Interactive Design: Project 1

13th September - 27th September 2022 / Week 3 - 5
Alana Sofia Othman / 0353451 / Bachelor of Design (Hons) in Creative Media
Interactive Design

Project 1

LECTURES

Week 3

Colour Theory

Colour Matters

- A crucial element of any website, especially when it comes to background color and text

- Using the right combinations in web design help users understand and navigate the site

- Improve user's experience

- Enables them to find the information they need and respond to our Call to Action (CTA)

- Plays a role in branding, product messaging and customers’ decisions about purchasing a product

Contrast

- Without it, users are more likely to have trouble differentiating between elements

- Helps with readability and content hierarchy

Web Colours Fun Facts

- RGB are the three basic colors that monitors transmit

- HTML 4.01 can reference 147 colours by name (e.g., "red")

- There are 216 colours in the "web-safe" palette but 22 "really really web safe" colours that consist of mostly greens, yellows, and blues

- Finding alternate ways to show information other than just relying on colour is necessary for designing sites that are accessible to people who are color blind. (e.g. design principles)

INSTRUCTIONS

Project 1: Prototype Design

Apron Fools

Research

Figure 1.1. Apron Fools Instagram

Figure 1.2. Apron Fools Instagram

Figure 1.3. Apron Fools Linktree

Figure 1.4. Apron Fools Facebook Page

Figure 1.5. Apron Fools Facebook Shop

Figure 1.6. Collection of Apron Fools Instagram Posts

A small local bakery in USJ 2. They currently do not have a website and rely on their Instagram and Facebook pages. They have a linktree that leads to their Yezza, Whatsapp and Beepit. Their font used , Bugaki, for logo and promotional/marketing was easily found on Canva.

Moodboard

Colour Scheme

Figure 2.1. Apron Fools Main Colour Scheme

Visual Reference

Figure 3.1. Visual Reference 1.1

Figure 3.2. Visual Reference 1.2

Figure 3.3. Visual Reference 1.3

Figure 3.4. Visual Reference 1.4

Figure 3.5. Visual Reference 1.5

Figure 3.6. Visual Reference 1.6

Bakery Websites Reference

Figure 4.1. Chateraise Landing Page 1.1

Figure 4.2. Chateraise Landing Page 1.2

Figure 4.3. Komugi Website 1.1

Figure 4.4. Komugi Website 1.2

Figure 4.5. Bisou Website 1.1

Figure 4.6. Bisou Website 1.1

Font Options

Figure 5.1. Header Font Options

Figure 5.2. Body Font Options

Progress

Sketches Round 1

Figure 6.1. Sketches 1 - 6

Sketches Round 2

Figure 6.2. Sketches 7 - 14

Figure 6.3. Sketches 15 - 20

Landing Page Designs

Figure 6.4. Landing Page Designs 1 - 3

Figure 6.5. Landing Page Designs 4 & 5

Landing Page With Menu Designs

Figure 6.6. Landing Page With Menu Designs 1 - 3

Final Outcome

Landing Page Designs

Figure 8.1. Final Outcome of Landing Page with Menu Closed

Figure 8.2. Final Outcome of Landing Page with Menu Open

Attachment 1.1. PDF of Final Outcomes

Attachment 1.2. Google Slides of Final Landing Page

Google Slides Link: Landing Page Slides

FEEDBACK

Progress

Moodboard

- Colour Scheme is good

- Go with Shrikhand font for the header. The others are too serious looking for the brand

- Outfit or Nunito would pair best with it

- Don't do the noise effect. Stick with flat colours or gradient

Sketches Round 1

Figure 6.1.

- They are too overcrowded and do not have enough white space

- Sketch 1 (Top Left) has clear Call to Action

- Sketch 5 (Bottom Center) is okay. It is simple and not over crowded

Sketches Round 2

Figure 6.2. (Sketch 13 - Bottom, second from the right)

- Has different sizes but is well organised

- A good option to consider

Figure 6.3. (Sketch 18 - Bottom Left)

- Has a dynamic look of the 3 images not being inline but is not messy

- The layout has a happy and bubbly look

- Best fits the brand

Landing Page Designs

Figure 7.1.

- Design 2 (Center) green border is unnecessary and distracting

- "Quality Baked Goods" in Design 3 (Right) is hard to read. The pink blends with the background

- "Buy Now" button should go below because people don't usually want to buy immediately

- For web, don't use pure black for text, make it very dark grey

REFLECTION

Experience

This assignment is exciting as it is the beginning of something completely new to me. Website design and coding, as I have heard, is not as complicated and painful as the tiny bit of coding I have learnt before (Javascript for interactive installation exhibition). This particular assignment was not exactly new considering it still focused on design and layouts but it was interesting to put myself in the shoes of the user and think of their wants, needs and comfort.

Observations

Personally and shamefully, I know for a fact that I have never been much of an empathetic person and with this assignment I began to realise how much empathy actually goes into UI/UX. During the short course of designing the landing page, I found myself being more empathetic automatically, which caught me by surprise. I now realise, believe and hope that with this module, I not only am able to learn the basics of web design and code but also having the chance to work on empathising with others.

Findings

Through this assignment and weekly lectures, I have learnt alot of the basic things that go into a website. I realised how important colour is, to the minor point of where pure black is not always used. It was also interesting to learn that layout can also convey emotion as it was something I have never realised or even thought about.

Alana Sofia Othman (0353451)

Search This Blog