Interactive Design: Project 1
17/5/2022 - 31/5/2022 (Week 8-Week 10)
Adeline Wong Chyn Nee / 0344017 / BDCM
Interactive Design
Project 1 / Landing page design
INSTRUCTION:
TASK
week 8 (18.5.2021)
This week, we were tasked to design a landing page with the topic of our choice, we are also required to come up with sketches/wireframes for our landing page and show them next week during class for feedback.
In my understanding, a landing page is a single page on a website that's built for one single conversion objective. The most important information should be placed on the landing page. Therefore, for my sketches, I have included a section to place a call for action and include the main elements of the other pages in the other sections.
Fig. 1.1 - 1.3 Eco-Friendly products
For my project topic, I have chosen something that I am passionate about, which is veganism and protecting the environment. That is why my topic which is Eco-Friendly product services would push me to create a website that I can connect to and perhaps users would be able to witness that through my website.
Sketches:
Fig. 1.2 Landing page sketch #1
Fig. 1.3 Landing page sketch #2
Fig. 1.4 Landing page sketch #3
Fig. 1.5 Landing page sketch #4
After the feedback session, Mr. Shamsul advised me to go for landing page sketch number 1 as it contains the necessary call for action button, however, I would very soon have to populate the landing page with elements such as images, and colors to complete the prototype. I also would need to decide on the specific contents I want to include on the page such as navigation texts, product names, and footer.
Looking at my wireframes for the landing page, I feel that a minimalistic earth-tone theme would suit my topic the most. Images that suit that color theme would be an essential element for my landing page, so I made sure to prepare plenty of images that would suit my website.
Colour palette for landing page
Fig. 1.6 Landing page colour palette (Warm browns)
Fig. 1.7 Eco-Friendly site example #1 (Source: Homesong Market)
Fig. 1.8 Eco-Friendly site example #2 (Source: Homesong Market)
Fig. 1.8 Eco-Friendly site example #3 (Source: The Hive)
Updated landing page:
After understanding what I need to include in my own sites, I proceeded to change and add new elements to my landing page. The new elements I have added are a logo, striking images, a products section, an about us section, a footer to place contact details, and other sections.
A simple logo is added at the start of the navigation bar as branding, it is a cursive initial design of my chosen shop name "The Kaia Shop".
Fig. 1.10 Final Landing Page (PNG)
Fig. 1.9 Final Landing Page (PNG)
Fig. 1.10 Final Landing Page (PDF)
I created a presentation slide explaining my chosen topic of choice, shop branding, and each section of the landing page.
Fig. 1.11 Final Landing Page design (Slides)
Image References:
Klenova, N. (2019, May 22). Zero waste eco friendly bathroom [Photography]. Creative Market. https://creativemarket.com/klenova/3799313-Zero-waste-eco-friendly-bathroom-ac-containing-above-accessories-and
the tasty k. (2019, April 11). #MYGREENACTION CHALLENGE [Photography]. The Tasty k. https://www.thetastyk.com/2019/04/11/mygreenaction-challenge/
Feedback:
Week 9
During the feedback session, Mr. Shamsul commented that the call of action button was nice and the placement would grab the attention of users, however for the next class, Mr. Shamsul wished to see all the complete information on the landing page including elements like the navigation bar links, information paragraphs, images, and added footer. Overall, Mr. Shamsul preferred the first wireframe of the landing pages as it contains all the necessary information.
Week 10
For the product section, it's better to add a "more" link at the bottom right to allow the users to click for more products. The image for my 'About Us' section is too big and should be scaled down for it to fit on the page along with the body text on the left. There should be more spacing between the images and the text in the 'Monthly Events' section. The icons in the 'Contact Us' section should be omitted for they may look outdated, no one uses those icons anymore apparently. Lastly, a copyright mark should be added at the bottom of the site.
Reflection:
This project felt like a warm-up for what could be the most complicated projects in the module. I have learned the necessary elements to include in a landing page and could carry this knowledge over to the next projects. The designing part was fun, adding images and creating the wireframes for the landing page made me realize the endless ways a site can be designed. I am not sure of what comes next after this project but I know I'll face obstacles along the way because coding is not my forté however I will try my best and hopefully pass this module.
Comments
Post a Comment