Web Design - Assignment 1

February 24, 2018

Web Design - Assignment 1

Seoh Yi Zhen (0328497)
Web Design and New Media
Assignment 1 - Landing Page Design

INSTRUCTIONS

Landing Page Design (20%) – DUE WEEK 3
Choose the subject matter given and design ONE (1) landing page for each topic. Each design should be able to present what the company does clearly. Be creative yet able to describe the page usability and information structure distinctly. Look for inspiration and refer from other establish website to have better idea on the design.

Topic:

• Product

• Service

You can choose any existing company for the assignment and use all the information and images from the Websites.

Requirement:
Landing page dimension should not exceed 1024 X 768 pixels*. Color mode RGB. File resolution must be 72dpi.

Submission Requirement:
Please convert the file to .pdf or .jpeg and upload the files in Google Classroom within the given time.

ASSIGNMENT 1

Topic

• Product: https://www.insidescoop.com.my/
• Service: https://www.isetankl.com.my/thejapanstore/

For the Inside Scoop website, the layout was quite neat and overall very easy to navigate. However, the choice of font color for the floating menu and header titles made it impossible to read at some parts. The floating menu also took up too much space and was kind of annoying when scrolling down the page.

Fig. 1.1: Inside Scoop's website.

Fig. 1.2: Issues with the floating menu.

As for Isetan The Japan Store, I thought that the menu categories were quite confusing and some of them weren't really necessary. The appearance of the Social Updates section also felt dated and messy compared to the rest of the landing page.

Fig. 1.3: Isetan The Japan Store's website.

Fig. 1.4: The Social Updates section.

Wireframe

I roughly planned out the layout of both landing pages in my sketches. Then, I created the mockups using Illustrator because I wanted to incorporate graphic elements into my design.

Fig. 2.1: Wireframe for Inside Scoop.

Fig. 2.2: Wireframe for The Japan Store.

Final Outcome

Link to Google Drive: https://drive.google.com/open?id=1_WrfEXsPWSIFEqSNVk3otHhadIOmxOGf

Fig. 3.1: Inside Scoop landing page.

Fig. 3.2: Inside Scoop hamburger menu.

Fig. 3.3: The Japan Store landing page.

FEEDBACK

For my Inside Scoop design, I should make the transition element shorter because it's taking up too much space. As for Isetan The Japan Store, Mr Shamsul said that I should have picked a worse website. He wanted me to change websites but allowed me to continue after seeing how much work I did already.

REFLECTION

Doing this assignment, I realized that web design is a real challenge because it requires a balance between aesthetics and functionality. There are many aspects to consider like user experience, layout, typography as well as the overall visual direction. But I quite liked this assignment because it challenged me to be a more well-rounded designer who also thinks of functionality when designing something.