Interactive Design / Project 1
24.4.2023 - 8.5.2023 (Week 4 - Week 6)
Loke Yan Ling / 0344602
Interactive Design / Bachelor of Design in Creative Media
Project 1: Landing Page Design Prototype
Instructions
Instructions
- Choose an existing website with design problems that you would like to address.
- Analyze the website's design and identify the areas that need improvement.
- Develop a concept for your landing page that addresses the design issues and improves the user experience.
- Create a wireframe or a mock-up of your landing page design.
- Develop your landing page prototype using any prototype software of your choice (Figma or Adobe XD).
Deliverables:
- A one-page design concept
- the design issues you are addressing.
- A wireframe or a mock-up of your landing page design.
- The prototype of your landing page.
Your landing page will be assessed based on the following criteria:
- The creativity and effectiveness of your design concept.
- The quality of your wireframe or mock-up.
- The overall user experience of your landing page.
- Reflection on your e-portfolio.
Requirements:
Your landing page should include a clear and concise headline that describes the purpose of the website. The landing page size width is 1366 pixels. Follow the preset in Figma or Adobe XD. The landing page should include a call-to-action (CTA) button that directs users to the most important part of the website. It should be visually appealing and easy to navigate. The landing page should adhere to web design best practices, including accessibility and usability.
Project 1 / Landing Page Design Prototype
Your task is to create a landing page for an existing website of your choice that you feel has a design problem. A landing page is the first page that visitors see when they arrive at a website, and it is crucial for making a good first impression. Your landing page should be designed to improve the user experience and address the design issues you have identified on the original website.
Exist website with design problems: https://www.nskonline.com.my/
This website is found during my sister wanted to buy groceries online with a delivery service. This poor design website is not functioning. However, NSK Grocery still mentions this website in their social media, Instagram bio, so it is chosen to develop.
Identify and analyse the issues
Fig 1.1 Half-screen window size
Fig 1.2 Full-screen window size
Navigation is only shown in half-screen window size, not in full-screen window size, and category is also not included in navigation which is the most important navigation for grocery websites. It also has a bad layout design with too big images and no text included in the entire website, which causes distraction.
Fig 1.3 All Information grouped together
Fig 1.4 Overlay
All information is grouped together with a bunch of images, the colour used also causes distraction. The icon also overlays the information at the bottom of the website which can be avoided. Only one primary call-to-action button can be seen on the website. All icons or images on the website cannot click and lead to any other page.
Develop a concept
A one-page design concept that describes your landing page and the design issues you are addressing.
I would like to develop a clean and graphical online grocery landing page rather than a grocery webpage. The navigation will mainly include home, promotions and categories. The landing page will show the purpose of this website and describe the benefits. The steps to start an order are also considered to be included. The colour scheme will be red and green which is the logo colour of the existing website, but mainly will be green colour because people recognize grocery is green colour.
Wireframe
Fig 2.1 5 Wireframes
The first wireframe is just a rough design of how the landing page should look by placing the elements mentioned in the concept into it. In the progress of exploring the design of wireframes, I confirm my landing page will be a click-through page. The sequence of elements mainly follows the autonomy of a landing page, but I still struggle with the sequence of showing the steps of order or the categories first.
Fig 2.2 Selected Wireframe 4
Progression
Fig 3.1 Edit in Photoshop
I selected Wireframe 4 as my prototype because I like the flow of information and develop the prototype in Adobe XD. The image placed on the artboard can be directed to edit in Photoshop to remove the background or crop the image size by right click the image. This function is very useful when you want the image background without complicated import step.
Fig 3.2 Drop shadow
The drop shadow function makes the elements stand out and prevent flat appearance. I have used this function only for the head title, subtitle, call-to-action button(CTA) and some boards. To make it easier for me to pick the colours, I put the colour scheme directly next to the artboard.
Fig 3.3 Plugins
Fig 3.4 Illustration (Lamp) from Plugins
Fig 3.5 Illustration from freepik (plant, milk, egg, grocery, icons)
Some of the icons and illustrations are from plugins in Adobe, while the others icon and illustrations are illustrated by myself and mainly come from freepik.
Fig 3.6 Negative space
At first, I followed the layout drawn in the wireframe, but it let me feel too packed and breathable space. By exploring several approaches, the final decision made was to cut the backdrop in half to increase the interaction of colours and to add negative space.
Fig 3.7 Rearrangement of element
At the bottom of the landing page, I also made some differences from the wireframe. The differences have been made due to the imbalance when applying. For the button on the right bottom, I had make sure it won't overlap with other elements and overlap colours with the whole landing page background colour.
For the typography, I used the same typeface throughout the landing page. The consideration to use the same typeface is due to the large area of target audience, from the elder to teenagers. Using the same typeface will help them easy to navigate and scroll through the landing page.
Fig 3.8 First draft prototype
Fig 3.9 Balance
Mr Shamsul has noticed that there has some imbalance in the CTA button and give a reminder on it. The balance is manually adjusted because the auto-alignment sometimes is not working out.
Fig 3.10 Colour Scheme Reference
Mr Shamsul also gave advice on the colour scheme used, that the colours of the website should follow the logo or a memorable perception of the logo's feel, which I understood. Therefore, I did some research and manually mobilised the colour palette when applying to the prototype design.
Fig 3.11 Draft sketch for the catalogue
Fig 3.12 Information
Fig 3.13 Adjusting the proportion
I select the information of hiring from the original website
Fig 3.14 Prototype 2
Final Landing Page Prototype
Fig 4.1 Fina Landing Page Prototype
Feedback
Week 6
The whole design is good. Maybe could consider using the colour red which is the main colour of the website logo. Prefer to include catalogues inside, such as the top sales or some kind of promotions.
Week 7
Everything looks good. Just the box shape in "Why Choose Us" section can be improved and the back to top button can be simplify by using only 1 arrow instead.
Reflection
Comments
Post a Comment