INTERACTIVE DESIGN- PROJECT 1
Week 3(12/9/22)- Week 4 (20/9/22)
Student: Tai Ser Yeet (0345798)
Programme:
Bachelor of Design (Honours) in Creative Media
Task: Project 1-
Prototype Design
INSTRUCTIONS
Fig 1.1 Project 1 Slides, Week 3 (13/9/22)
PROJECT 1: PROTOTYPE DESIGN
LANDING PAGE DESIGN
WEEK 3-
BRIEFING
For this week's project briefing, I was absent due to health reasons therefore the attached image below was the class note from my friend, Hadiya. Later, I read the document below & proceeded with the research process.
|
Fig 2.1 Class Notes, Week 3 (13/9/22) |
- 20 Sketches meaning that we have to design 20 types of layouts using the Miro template
- Use Web Common or Web Large for Adobe software dimension
- Submit using Google Slide link
RESEARCH
After much contemplation, I went with the option of redesigning a bad
website instead of creating a whole new one from scratch. This is
because I felt that it was much more time-efficient & I could focus
more on creating a better layout design than on the content
itself.
I then went onto the AWWWARDS website & randomly chose a few websites to evaluate. After a while, I came across this website called Mahsa.
|
|
|
While evaluating, I also referred to an article that speaks about the
purpose of a landing page & its necessary content in order to
fulfill the criteria. Even though the website isn't a landing page, I
believed that the requirements of a landing site should be incorporated
into the web layout.
|
|
|
EVALUATING THE EXISTING WEBSITE
Characteristics:
1. Font size is too small
- E.g the footer of the website
|
|
|
2. There is no sense of hierarchy established between the
headings & body text
- No distinct contrast e.g usage of color or more bolding of text
- E.g Navigation bar had the same style of text as the body text so there wasn’t any separation
|
Fig 2.5 Journal & Shipping, Week 3 (13/9/22) |
3. Alignment of the page is odd
- It was hard to know where the eye should look at
- Pictures were sometimes randomly placed (not left-aligned nor right-aligned)
|
Fig 2.6 Example of Bad Alignment, Week 3 (13/9/22) |
4. Purpose of the website as an e-commerce platform was unclear as the
first thing, I was led to was it was an e-portfolio website.
5. Sometimes there was a huge gap between the images
- This made me believe that the items sold were unrelated due to the Principle of Proximity
|
Fig 2.7 Proximity, Week 3 (13/9/22) |
- The gap disappeared in Phone Mode but remained in Tablet Mode
|
Fig 2.8 Tablet & Phone, Week 3 (13/9/22) |
6. No arrow icon to indicate that there was a carousel present & it
slides horizontally (Collection)
- There was a picture that was cut in half which was what made me curious about that ordeal
|
Fig 2.9 Example of Picture Cut in Half, Week 3 (13/9/22) |
7. Call-to-action button was barely noticeable at the right of the
landing page.
- Button says “Shop mood”
|
Fig 3.0 Tablet & Phone, Week 3 (13/9/22) |
8. In the Moods section, the number sequence did not begin from the top
left as per usual. Instead, it began from the bottom right.
- This is bad because naturally, our eye would start reading from the top left therefore the number 1 should be at that position instead of having it numbered in descending order.
|
Fig 3.1 Bad Choice of Text Alignment, Week 3 (13/9/22) |
INSPIRATION
MOODBOARD RESEARCH
I was unsure of what a moodboard consisted of therefore I went ahead
& did some research on it beforehand. According to MockPlus, 2017,
mood boards typically include sample images, typefaces, illustrations,
color palettes, logos, UI screen captures, icons & more.
Essentially, it helps to set the tone & character for the web
design.
|
Fig 3.2 Moodboard Example, Week 3 (13/9/22) |
|
Fig 3.3 Moodboard Example 2, Week 3 (13/9/22) |
MY MOODBOARD
Based on the Mahsa website, I could depict that the branding was
somewhat elegant, bohemian & a mostly cool-toned color scheme.
Besides that, since it was a female clothing brand, a more feminine
approach to the typeface would be ideal. Next, because I needed to use
the brand's pictures to build my landing page, I needed to pick a
cohesive theme that would be suitable for that style. A similar
color scheme with the images & branding but is different from the
official website.
Firstly, I began by finding what color works best with neutral &
brown undertones. To do that, I inserted a few images from Mahsa's
Instagram page & put them through a color generator so that I could
have an accurate color representation. Then from there, I transferred
the color's hex codes into Adobe Color & selected all the color
relationships such as analogous, complementary & triadic.
Google Fonts Selection
- Roboto Mono
- Reem Kufi Fun
|
|
|
SKETCHES
WEEK 4-
Before creating a landing page, I asked myself these questions:
- How are you going to drive visitors to the page?
- Who is going to visit the page?
- What do you want your visitors to do?
- Does the page deliver on its promise?
Next, during class, Mr.Shamsul encouraged us to utilize the Miro
application in order to create the website wireframe
efficiently.
Fig 3.5 My Miroboard, Week 3 (13/9/22) |
DIGITALISATION
WEEK 5-
|
| Fig 3.6 Progress on Landing Page, Week 5 (27/9/22) |
|
|
|
|
|
|
|
|
|
After Mr.Shamsul's feedback on my landing page design, I went ahead and
changed it starting with the design inconsistencies that he pointed out
such as the font, sizing, alignment, etc.
FINAL SUBMISSION OF PROJECT 1
|
| Fig 4.1 Final Submission on Landing Page (Revised), Week 5 (27/9/22) |
Fig 4.2 Final Submission on Landing Page, PDF, Week 5 (27/9/22)
FEEDBACKS
WEEK 4 - RESEARCH
Mr.Shamsul's Feedback
- Mahsa's website follows a grid system regarding the alignment.
- The CTA button is indeed too small. The solution is to create an outline for it or bold it. The font size must be controlled.
- Mr. Shamsul said I can redesign their user experience but in terms of their style, can remain.
- They also do not really design for large screens, better when viewed with a phone or tablet.
- The landing page does not have to be so detailed (e.g line spacing can be adjusted later)
- Additional bad trait: the website has too much white space
WEEK 5 - MIRO SKETCHES
- Mr.Shamsul suggested that Attempt 8 could work based on my wireframe sketches.
Comments
Post a Comment