Interactive Design: Project 1

on

17.5.2022 - 31.5.2022 (Week 8 - Week 10)
Chung Yi Ki / 0345014 / BDCM
Interactive Design
Project 1 / Landing page design

Lecture

Lectures 1-7 were documented in Interactive Design: Exercises

Instructions


For project 1, we are required to create a landing page for a microsite of any topic of our choosing. The topic that I choose is a microsite for a sea turtle conservation campaign. 

Visual reference
Fig 1.1 Screenshot from Blue Heart by Pentagonia microsite
Source: https://blueheart.patagonia.com/

Before sketching, I went to search for some examples of landing pages and microsites. For reference #1, I liked how the microsite uses transparent background header and footer to make the microsite look immersive, and the use of rows for multiple call to action buttons all leading to the main purpose of taking action on save the wild river. I wanted to incorporate the transparent background idea in my landing page and use the website as a guide on what content I should include in my microsite. 

Fig 1.2 Screenshot from Unbounce Landing Page course site
Source: https://thelandingpagecourse.com/

Fig 1.3 Screenshot from Unbounce Landing Page course site
Source: https://thelandingpagecourse.com/

In reference #2, I liked how the landing page uses contrasting colour boxes to divide the section and make each section look like “full width cards”. I also liked how the landing page uses a list to lay out its content as seen in Fig 1.3. So, I want to try to do that for on of my sketches idea. 

Fig 1.4 Screenshot from webprofits site
Source: https://www.webprofits.com.au/#mm-0

For reference #3, I found the use of container row boxes as text boxes interesting, so I wanted to try incorporating that too in my sketches ideas. 

Sketches
Fig 2.1 Sketch #1

Fig 2.2 Sketch #2

Fig 2.3 Sketch #3

Fig 2.4 Sketch #4

Fig 2.5 Sketch #5

I did 5 sketches for my landing page layout. The content of my landing page will start with a title message which mentions the urgency of sea turtle conservation, follow by the threats faced by sea turtles, then the efforts currently made in the country to save sea turtles, and finally a final message on the urgency of sea turtle conservation and a small introduction on the organization. The call to action button will either appear two times, once at the top and the second at the bottom, or appear only one time at the bottom. For the footer, it will either contain only icons to various socials or with a higher dimension to contain some other text contact details. The navigation bar will either be transparent or in a colour. 

Digitization of sketch
Fig 3.1 Colour palette reference

After receiving feedbacks from Mr. Shamsul, I went to Adobe Color website to create a colour palette for me to reference. Since my topic is about sea turtles, I plan to use blue colour to give a feeling of the sea.

Fig 3.2 Edited picture of plastic bag floating on water to extend the background

I then went on free stock images websites to find the images that I want to include in my landing page. In one of the images of a floating plastic bag I found, it was a landscape image but I wanted to use it in a portrait format, so I extended the background in the image to use it as a portrait picture. The rest of the source of images used will be listed below. 

Fig 3.3 Logo for website

As I needed a logo for my landing page/website, I created a simple sea turtle logo using Adobe Illustrator. 

Fig 3.4 Prototype of landing page

I then created the landing page prototype using Adobe Illustrator. I used the dark blue colour from the colour palette in Fig 3.1 but adjusted it a bit so that it's more brighter. Though, I used the dark blue colour for the call to action buttons. Drop shadow effect is used on the text in the navigation bar so that they would stand out a bit more. As for the contents typed out in the landing page, most of them are taken from news articles and sea turtle conservation organisations websites. 

Content sources:



Pictures used:
  1. Brown turtle swimming underwater in ocean
    https://www.pexels.com/photo/brown-turtle-swimming-underwater-in-ocean-5967813/
  2. Baby Turtle on the Beach
    https://www.pexels.com/photo/baby-turtle-on-the-beach-12184239/
  3. A single use plastic bag seen floating through the water
    https://unsplash.com/photos/qSOADa7byjs
  4. Quarantined beaches of Hawaii brought Green Back turtles back to the beaches to sunbathe
    https://unsplash.com/photos/IwUTrF9M3EM
  5. Black and Gray Sea Turtle on Brown Sand
    https://www.pexels.com/photo/black-and-gray-sea-turtle-on-brown-sand-3866697/
Further developments of digitization

Fig 3.5 Reworked prototype of landing page

After receiving feedbacks from Mr. Shamsul, I made some further changes on my prototype. Since the call to action button should have a primary, secondary and tertiary hierarchy, I kept the "Donate Now" button as dark blue (primary), the "Learn More" and "Be a Volunteer" button as white (secondary), and "Read More" button to have just an outline (tertiary). I also changed the headings in the second, third and sections to be title case so they would stand out from the paragraphs text. I also added the logo on the navigation bar, but reversed the colour from dark blue to white and white to dark blue so it would stand out more over the picture, I also plan to let the navigation bar fixed at the top as the user scrolls and let the logo and text change colour depending on the background. A copyright notice is also added at the footer of the page.

After that, I created a presentation slide using Google Slides to explain each sections of the landing page as submission. 

Final landing page design
Fig 4.1 Final landing page design breakdown slides

Fig 4.2 Final landing page design

Feedbacks

Week 9 
For sketch #3, two call to action buttons can be put at the top of the page, one under the title message and another on the navigation bar. For sketch #4, one call to action "donate now" button can be at the top of the page and the other call to action button at the bottom of the page can be "be a volunteer". For sketch #5, the effort section header can be aligned with the first line of the bullet points, so that this section header is the same as the threats section, and the quotation/statistics header will be the same as the last section. Sketch #4 and sketch #5 are the better ones, choose one of them for digitization. 

Week 10
The background colour of the secondary call to action button should be changed, probably to white so it's different from the primary call to action button. Consider if dark blue or white is louder and decide the colour between the primary and secondary call to action button. There should be third call to action button under the source stated in major threats to sea turtles, something like "check it out". The button can be in outline only so it differentiates from the other call to action buttons. The brand logo should be at the top of the page too and a copyright notice should be added at the footer of the page. The headers for the second to fourth section should be in title case. Other than that, the layout of the landing page is well aligned and clean.

Reflection

The project was enjoyable to do as we'd get to pick our own topic and design the landing page accordingly. The part that I had to pay a lot of attention to is alignment as I wanted to make sure everything is aligned, but other than that, I had fun creating the prototype and learning more about informational hierarchy, especially about creating different levels of call to action buttons. Creating this landing page gave me an experience on how to write content for a webpage, planning the amount of text content needed. Anyway, I'm glad that everything worked out at the end for this project and hope for the best for the coding part in the following Project 2, although I must say I'm a bit nervous about it. 

Comments

Post a Comment