29.08.22 - 03.08.22 (Week 1 - Week 5)
Janaan Ahmed (0353333)
Interactive Design / BDCM
Project 1: Landing Page
Instructions
Project 1: Landing Page
We are required to create a landing page for a website based on a topic of
our choice. The landing page should be able to communicate to the audience
about the site's goal.
Things to do:
- Select a topic
- Research
- Moodboard (visual reference, colour palette, font choice - select from Google font only)
- Sketches/wireframe (minimum 20 sketches)
- Presentation deck of complete landing page (for final submission)
Topic:
For no particular reason, I decided to make up a
plant gift shop named
PlantenJoy. My landing page would therefore be in effect for PlantenJoy's
e-commerce website.
Research:
I first needed to know the purpose and basics of how a landing page
operated before making any sketches. Here's a summary of what I
learned:
Purpose of a landing page:
- To lead/ push visitors toward a single action (usually accompanied by call-to-action buttons and lead generation forms
- Their one objective is to convert visitors into leads
Key characteristics that make a landing page look good + convert well:
- Visual simplicity to direct visitors where needed
- Headline that grabs the visitors' attention
- Relevant media that is relevant to your audience and creates value
- Lead form that sits above the fold to capture visitors' info
- CTA's that are action-oriented and compelling
- Copy and description that informs and entices visitor to complete your form
- Social proof and/or testimonials to build trust
While design and layout are important, the content is the foundation of a good landing page.
Brand Identity
To know what content to include in PlantenJoy's landing page, I had to
figure out the brand's purpose, services, target audience and
such.
|
| Fig 1.1: PlantenJoy Identity |
Based off of this, I then went on to look for visual references, potential
colour palettes, and font choices.
Visual References:
|
| Fig 1.2: Layout and aesthetic references |
|
| Fig 1.3: Colour palette inspo |
|
| Fig 1.4: Header font options |
|
| Fig 1.5: Body font options |
Wireframes
Though we were required to create 20 wireframes, I was able to make only
13 due to time constraints (and also my previous work being accidentally
erased). The link to my Miro board can be found here.
|
| Fig 1.6: Wireframes 1-4 |
I realised that my wireframes were way too long (1-4) and so proceeded to
simplify and shorten them (5-13).
|
| Fig 1.7: Wireframes 5-9 |
|
| Fig 1.8: Wireframes 10-13 |
After receiving feedback from Ms. Dini, I went on to combine features of wireframe 3 and 6 to develop wireframe 13, which is what I chose to digitise. I replaced the dummy text with all the content as shown below:
|
| Fig 1.7: Finalised wireframe |
Digitisation
After importing my wireframe into Illustrator, I proceeded to first create
the basic outlines and the layout, and then added the text. Afterwards, I
looked for the necessary images and icons (from Pexel, Unsplash, and
Flaticons) and cropped them to match the necessary borders.
|
| Fig 1.8: Overall Progression |
Final Outcome:
.jpg)
|
| Fig 1.9: Final Landing Page Design [JPEG] - (02.10.22) |
Fig 1.10: Final Landing Page [PDF] - (02.10.22)
Fig 1.11: Final Presentation Deck of Landing Page Design - (02.10.22)
Feedback
WEEK 5
General:
The primary call-to-action button needs to be on the right as Mr. Shamsul
advised (reading patterns: top to bottom, left to right). Mr. Shamsul also
reminded us to consider Gestalt Principles when designing our page.
Specific:
Ms. Dini liked the 3rd wireframe, however as the page was too long, she
advised to shorten it. She also liked the 6th wireframe, and suggested that
I combine elements from both for my final design.
Reflection
Experience
I felt very nervous and lost diving into this project at first as I knew
next to nothing about web design. I found this to be a very enjoyable challenge and it was interesting to apply what I have learned from other modules. I did however run into TWO instances where my work/progress got erased, which proved to be extremely frustrating. The second instance was especially draining since Illustrator crashed on me while I was ALMOST done. So redoing everything was well... something.
Observation
When designing the wireframes, I often found myself reflecting on what I personally found convenient when navigating a web page. It definitely was a bit of a challenge switching gears from the mindset of 'user' and 'designer'. Taking breaks and coming back to my landing page with fresh eyes certainly helped in evaluating my design.
Findings
I've come to learn that simplicity is key in designing an effective landing page. I learned about the importance of applying things from typography and design principles, such as grouping, alignment, typeface pairing, etc. I also found it eye-opening to learn about several psychological aspects, such as social proof, influence how we engage with a web page.
Comments
Post a Comment