Interactive Design Project 1: Landing Page Design Prototype

25/4/2023 - 11/5/2023
Edwin Choo Quan Rong / 0348305 / Bachelor of Design (Hons) In Creative Media
GCD 60904 / Interactive Design
Project 1 / Landing Page Design Prototype


INSTRUCTIONS



Project Description

In this project, students are tasked to create a brand new website design for an existing website with bad design of our choice. The website to work on is chosen by students and we are to give a reason why did we chose that website. The work process starts with identifying the website and its flaws, developing wireframes to solve design issues and doing the final design on software like Figma or Adobe XD.



Fig 1.1 - Yale School of Art full landing page

The website I chose to fix was Yale School of Art. After taking a look through the landing page thoroughly, the key element that made the website bad was the visuals. It is not aesthetically pleasing, there is a lack of images, the boxes made the text hard to read and the text on the boxes was placed throughout the website without any correlation with the background. Information was not sorted well making it discouraging to read through as well. 



Fig 1.2 - Wireframes

The website has information broken down into chunks, so the wireframe designs were done based on grouping those information together. I end up choosing the third design from the first image to the right.



Fig 1.3 - Introduction chunk of landing page

The software I used for creating the entire landing page was Figma. This is the introduction chunk towards the website so I want to keep it simple and easy to read. A navigation menu is placed on the top for easy accessibility, images to give users cohesive information about the website being an art school's website. The call-to-action button is done in red and white text and is placed both at the header and after the description about the school to grab attention and ensure they won't miss it. In technical aspect, call-to-action button and background is made with shapes and color. Text is produced with textbox with different font types used to make it different from each other. Images were found on Pexels.




Fig 1.4 - Second chunk of info

To redesign this section of the website, I color-coded the links for it to stand out from the black text. Text arrangement was improved to make the text readable easily and an image to help spice things up.




Fig 1.5 - Third chunk of info

On the original website, this chunk of information is displayed in a manner where it is hard to read as information is jammed together without much color difference. In order to fix it without applying too much content to not make the website too cramped, only a few events are added. Image is used to enhance show more instead of telling with words, with the idea of it being clickable to expand into another page that has a more detailed description of the event. The left and right buttons are to browse other events that will show up and replace the current ones. 




Fig 1.6 - Fourth chunk of info

The original information is displayed in one long paragraph of text which makes it discouraging to read. Thus, the redesign goal was to attract attention of the user with the title of the content, followed up with a brief message of the content before having a "Read more..." button to entice the viewers to continue reading if they are interested, if not it does not take up space. 




Fig 1.7 - Fifth chunk of info

This was the toughest part of the redesign as I had to think of a way to combine both information together as it is too short if broken down into two chunks, and difficult to combine as the information is not well related. In the end, I managed to make it work by using icons to help display the small amount of information both visually and textually.



Fig 1.8 - Sixth chunk of info

I decided to keep the footer simple by only adding a text along with the call-to-action button to remind the users again to join or apply for the website. The rest of the text was from the original website, rearranged and added icons to replace the Instagram, Facebook and YouTube text.

Full link to website: Project 1: Landing Page Design Prototype


FEEDBACK

Week 6
Changes to improve Landing page prototype
  • Change certain typefaces, can use serif/sans serif combination
  • Rearrange certain text towards the left (eye-reading pattern)
  • Background img can remove if it delays loading time
  • "Link text" change towards other color bc it will auto link when clicked on anyways

I end up not removing the background images as I liked how it looked at certain parts of the website, so instead of removing it, I got introduced to a tool called Downsize from Figma plugins that reduce the size of the images while maintaining quality, this drastically reduced the loading time. 


REFLECTIONS

The experience I had with creating websites was with tools like Wix so being able to create a website from scratch with Figma has been an interesting and unique experience. Figma is more customizable according to your preference and elements can be edited around to suit the wireframes. Figma is not complicated to use as well as after experiencing it for a few hours, I got the hang of it and manage to work with it. Through this experience, I learned to identify what makes a good website and bad website even further, and analyzed what needs to be improved and experimented with multiple ways on how to improve it. Overall, creating a landing page prototype design has been a great learning experience both in terms of knowledge and technical skill.

Comments

Post a Comment

Popular posts from this blog

Games Development Task 1: Game Design Document

Image
22/4/2024 - 13/4/2024 Edwin Choo Quan Rong / 0348305 / Bachelor of Design (Hons) In Creative Media DST 61104 / Games Development Task 1 Game Critical Review (Exercise) Reaper Test Good theme and aesthetic of the game, the simplicity helps the character as well as background elements stand out. Gameplay has some accessibility through allowing multiple options for movement by either using WASD or Arrow Keys. The sound effects fits smoothly with the visuals along with the background music fitting for the visual themes of the game, contrasting the enraging nature of the actual gameplay. About the gameplay, the initial level design is cool, slowly introducing more controls to help ease the player into the mode. However, having only 1 HP from terrain elements raised the difficulty of the game. It is as critical as avoiding any mistake from touching terrain elements, which ...
Read more

Interactive Design Exercises

Image
3/4/2023 - XX/XX/2023 Edwin Choo Quan Rong / 0348305 / Bachelor of Design (Hons) In Creative Media GCD 60904 / Interactive Design Exercises 3/4/2023 - 10/4/2023 (Week 1 - Week 2) Exercise 1: Web Analysis This is the introductory exercise we have to the class of Interactive Design. To understand websites better, we are tasked to analyze TWO websites from this link . A brief summary of analyzing 2 websites was written so we can take note and improve our understanding of the design,  layout, content, and functionality, strengths and weaknesses about websites. The websites I chose to analyze were Simply Chocolate and Torgerson Design Partners .  Here is my analysis for each website. Simply Chocolate Landing page looks clean and gives an easy introduction. The big white text is clear and readable but the smaller texts of white can be harder to see as the background is also of light color. The menu texts on the side are placed sideways, making it harder to read quickly or rep...
Read more