24/9/2021 - 1/10/2021 / Week 5 - Week 6
Lui Hsiao Hui (Tressa) / 0342003
Interactive Design / Bachelor of Design (Hons) in Creative Media
Project 1: Landing Page Design
Interactive Design / Bachelor of Design (Hons) in Creative Media
Project 1: Landing Page Design
INSTRUCTIONS
For project 1, we are to design a static landing page with the purpose of
promoting a business/service or product.
1. Ideation and sketch
Fig. 1.1 and 1.2 Sketch and rough design idea, Week 5 (25/9/2021)
The sketch and rough design idea were done in Adobe Illustrator. The style I
am going for is minimalistic and a dark mode look. The purpose is to promote
my services/portfolio, basically my own identity. I chose to do a portfolio landing page because I'd like for my landing page to be based on something personal.
- "Home" button: Direct to main website home page.
- "Services" button: Direct to services section on the landing page.
- "Portfolio" button: Direct to the portfolio page on the main website.
- "Contact me" button: Direct to contact me section at the end of the landing page.
- Images: Direct to the specific portfolio page of the selected service on the main website.
- Social media icons: Links to social media.
In the rough design idea, I decided to change the boxes/images and buttons to have rounded corners, so they're easier on the eyes. It's also to contrast against my sharp logo and art style.
2. Designing the landing page
Fig. 2.1 Use of guides in Adobe Illustrator, Week 6 (1/10/2021)
I used the built-in grids in Illustrator to make my custom guides.
Fig. 2.2 Variations of about me section, Week 6 (1/10/2021)
I prefer the larger font size (middle) because it looks better and more readable. However, since I'm new to coding I don't know if it's doable for beginner coding. Especially since the lack of leading. Both the top and middle versions have the avatar overlayed over the text, which I'm also not sure if it's annoying to code. So I decided to go with the third option (bottom) to ensure that I'll be able to code the entire landing page within a limited timeframe.
Fig. 2.3 Attempt at a light mode version, Week 6 (1/10/2021)
I attempted to do a light mode version to see how the landing page would look in that style. I removed the gradient background and switched my art avatar to the red version I have to better match the colour scheme in the services section. I didn't really like the look of this so because it doesn't really convey the vibe of my art style.
3. Final design
Fig. 3.1 Final Project 1: Landing Page Design - JPEG, Week 7 (7/10/2021)
In my final landing page design, I reduced the rounded corners for the images and captions because they felt a bit too much and I didn't like how they cropped off the artwork. I also changed the title fonts to a serif to match the style of my logo. The smaller texts and navigation buttons are left as a sans serif for easy readability. Lastly, I changed the layout for the contact me section, separating the social media icons and contact me form to left and right. I did this because the entire landing page was following the center alignment, lacking variation in layout. By separating them into two halves, it balances out the negative space.
Fonts used:
Serif: Sprat
Sans serif: Helvetica
Fig. 3.2 Final Project 1: Landing Page Design - PDF, Week 7 (7/10/2021)
FEEDBACK
Mr. Tarmizi's written feedback through email
Week 6: You managed to portray the concept of your proposed landing page through
the submitted sketch, however be careful with colour usage and application
of fonts in your final design.
REFLECTION
With this project, I learned what is a landing page and what are the contents usually found in one. I also got to exercise design principles, typography and graphic design aspects while designing the landing page. While designing, I learned that it is important to design something that's achievable in code, especially since this is my first time coding.
Comments
Post a Comment
be nice