Interactive Design/ Exercises

28/8/2023 - 11/9/2023

Week1-Week3

LIM CHAEHWAN (0363792)

Interactive Design / Bachelor of Design (Hons) in Creative Media/ Taylor's University

Interactive Design/ Exercises

---

INTRODUCTIONS

---

LECTURES

Week 1

The Norman door 

A Norman door, also known as a "Norman Rockwell" door, is a term used to describe a poorly designed door that confuses or misleads people trying to use it. This concept gained popularity through Don Norman, a cognitive scientist and usability expert who wrote about user-centered design in his book "The Design of Everyday Things."

Design thinking process

1. empathize(observation)

2. define

3. Ideation

4. prototyping (test-on, to target customers), 

5. Testing (find the problem and go back to steps 3 and 4) -> Find the best product

Week 2

Usability

 Key Principle of Usability

1. Consistency
It also determines branding, Consistent design is intuitive design, It includes a consistent navigation system, page layout and menu structure, fonts and typography, and branding in web design
(2 colors is maximum)
Simplicity alignment clear, white space sufficient

2. Visibility

3.Feedback(progress bar)

4. Error Prevention

I made a group in class and had time to design a website that was easy to use
Scenario 1: Designing a new e-commerce website for a local clothing store.

Week3

Understanding Website Structure

Websites are typically divided into three key elements:

1. Header: The top section with the logo, menu, and contact info.

2. Body: The central area where the main content, such as text, images, and videos, is displayed.

3. Footer: The bottom section contains copyright info, links, and contact details.

I made a group in class and designed the travel agency's website navigation

---

EXERCISE

Week1

We need to choose 2 websites from the link given

https://www.csswinner.com/winners

I chose KONA Digital Studio and Little Red Riding Hood's Quest

I carefully reviewed the design, layout, content, and functionality of the selected website to identify its strengths and weaknesses, and wrote a brief report considering how they affect the user experience

A total of five criteria were evaluated 

1. Consider the purpose and goals of the website and evaluate whether it is effectively delivered to users.

2. Evaluate the visual design and layout of the website, including the use of colors, typography, and images.

3. Consider the functionality and usability of the website, including its navigation, forms, and interactive elements.

4. Evaluate the quality and appropriateness of website content such as accuracy, clarity, and organization.

5. Consider the performance of your website, including load time, responsiveness, and compatibility with a variety of devices and browsers.

 

Week 2

I chose two of the websites in the link and replicated the existing main page to better understand the website's structure. Focus on layout, font, and color style.

1. https://www.oceanhealthindex.org/?authuser=0

2. https://www.morganstanley.com/?authuser=0

To take a full-screen capture for website replication, press the right button on Chrome, press Inspect, Command Shift p, and press the full-screen shot button

I found the most similar font on Google Pond and downloaded it

Fig 1.0 Google font Montserrat

https://fonts.google.com/specimen/Montserrat?query=mont

Fig 1.1 Process (replicating the first website)

Fig 1.2 Process (make a gradient round graph)

Fig 1.3 Process (use a pen tool to make same image)

Fig 1.4 Process (out line of website)

Fig 1.5 Process (compare the websites)

Fig 1.6 Google font Belanosima

Fig 1.7 Process (using a pen tool to make a same icon)

Fig 1.8 Process (using a guideline)

Fig 1.9 Process (outline of website)

Fig 1.10 Process (compare the second websites)

Photo Usage List( in pexels)

https://www.pexels.com/ko-kr/photo/8791342/

https://www.pexels.com/ko-kr/photo/9406883/

https://www.pexels.com/ko-kr/photo/360591/

https://www.pexels.com/ko-kr/photo/6140444/

https://www.pexels.com/ko-kr/photo/8224452/

https://www.pexels.com/ko-kr/photo/258160/

https://www.pexels.com/ko-kr/photo/3778235/

https://www.pexels.com/ko-kr/photo/7657884/

https://www.pexels.com/ko-kr/photo/4971918/

https://www.pexels.com/ko-kr/photo/8872471/

https://www.pexels.com/ko-kr/photo/1036864/

https://www.pexels.com/ko-kr/photo/ai-8386365/

https://www.pexels.com/ko-kr/photo/1733192/

https://www.pexels.com/ko-kr/photo/worm-s-eye-view-233698/

https://www.pexels.com/ko-kr/photo/373543/

https://www.pexels.com/ko-kr/photo/18069827/

https://www.pexels.com/ko-kr/photo/373543/

https://www.pexels.com/ko-kr/photo/6949977/

Result

Fig 2.0 Final results (jpg)

Fig 2.1 Final results (PDF)

---

REFLECTION

Experience: My journey into interactive design began with high anticipation and eagerness to delve into a field I found most intriguing. For my initial practice, I opted to replicate a website, a task that seemed straightforward but proved to be a significant learning curve. The most challenging aspect of this endeavor was undoubtedly the meticulous search for analogous images and fonts. This process demanded a considerable amount of time and effort as I scoured various sources for high-quality, free-to-use images and strived to match fonts precisely.

Observation: The replication exercise provided insightful observations into the nuances of interactive design. The difficulties in finding similar images and precisely matching fonts shed light on the meticulous nature of crafting a visually cohesive website. The challenges not only pertained to the technical aspects but also to the importance of visual consistency for a seamless user experience. This observation highlighted the intricate balance required to achieve a harmonious and aesthetically pleasing web design.

Findings: The findings from this practice have been instrumental in solidifying my comprehension of fundamental website structure. Beyond the technical skills honed in image and font selection, the exercise underscored the significance of attention to detail in creating a visually coherent website. This hands-on experience emphasized the need for precision in design elements and how they collectively contribute to a user-friendly interface. Moving forward, I recognize the importance of meticulous planning and execution to ensure not only a visually appealing but also a functionally effective design