INTERACTIVE DESIGN - PROJECT 1: PROTOTYPE DESIGN

28.8.2023 - 27.11.2023(Week1- Week 14)
LIM JUN TENG / 0362890
Interactive Design / Bachelor of Design (Honours) in Creative Media
Project 1 : Prototype Design

---

LECTURES

Week 2

Introduction to Usability

- What is usability?

Usability: Designing Products for User Satisfaction

Usability refers to how effectively, efficiently, and successfully a particular user can utilise a product or design in a certain situation.

It is a part of User Experience (UX) Design. It is the second level of UX Design

A design’s usability depends on how well its features accommodate users’ needs and contexts.

- Principle of Usability

1. Consistency

2. Simplicity

3. Visibility

4. Feedback

5. Error Prevention

1. Consistency

- Consistency is a key factor in web design for both visual elements and functionality. 

- Consistency ensures that your website looks coherent and works harmoniously across all its different elements, such as headers, footers, sidebars and navigation bars.

- Consistency is key for these patterns to be recognized and learned by users. If similar-looking things do not produce a similar output, the user is bound to become frustrated. 

Example : Apple.com, Sime Darby.com.my, 153joombas.com.

2. Simplicity

- The principle that user interfaces should be “simple” for users.

- Simplicity is used loosely to refer to the need to minimize the number of steps involved in a process, to use symbols and terminology that make the interface as obvious as possible, and to make it difficult to make mistakes.

- Incorporating simplicity in a designs will help design better user interfaces by helping the users achieve their goals faster and more efficiently, all while enjoying a great user experience.

3. Visibility

- Visibility is the basic principle that the more visible an element is, the more likely users will know about them and how to use them. Equally important is the opposite: when something is out of sight, it’s difficult to know about and use.

4. Feedback

- Feedback communicates the results of any interaction, making it both visible and understandable. Its job is to give the user a signal that they (or the product) have succeeded or failed at performing a task.

5. Error Prevention

- It involves alerting a user when they’re making an error, with the intention to make it easy for them to do whatever it is they are doing without making a mistake. The main reason this principle of error prevention is important is that we humans are prone to- and will always make mistakes.

Common Usability Pitfalls and How to Avoid Them

-Complex interfaces

-Confusing navigation

-Poor feedback

-Inadequate error handling

Week 3

Understand Website Structure

-Why Website Structure Matters?

Website structure is the foundation of a user-friendly and accessible website.

It affects user experience, SEO, and overall website performance.

A well-structured website helps users find information easily and keeps them engaged.

-Websites are typically divided into three key elements:

1 .Header

2. Body

3. Footer

1. Header

The header is the top section of a webpage.

It usually contains the website's logo, navigation menu, and contact information.

The header provides users with quick access to essential information and navigation.

2. Body

The body is the main content area of a webpage.

It contains text, images, videos, and other multimedia elements.

Proper organization of content within the body is crucial for readability.

3. Footer

The footer is located at the bottom of a webpage.

It typically includes copyright information, links to important pages, and contact details.

The footer provides closure to the webpage and additional navigation options.

Week 4

Introduction to CSS ( Cascading Style Sheet )

• CSS allows you to create rules that specify how

the content of an element should appear

• Example, you can set the background of the

page is cream, all paragraphs should appear in

gray using the Arial typeface, or that all level

header should be in a blue, italic, Helvetica

typeface

INSRUCTUIONS

---

WEEK 4 

PROJECT 1 : Prototype Design

Requirement :

1. Content and Structure:

-Prepare the content for your resume, including personal details, education, work experience, skills, projects, and other relevant sections.

-Decide on the order and hierarchy of sections based on their importance and relevance.

2. Layout and Visual Design:

-Design the layout of your digital resume using the chosen prototyping software. Define the placement of different sections and how they will flow together.

-Apply a consistent visual design using typography, color palette, and appropriate spacing.

3. Sections and Organization:

-Organize your resume into logical sections, such as "Profile," "Education," "Experience," "Skills," "Projects," and "Contact."

-Prioritize sections based on their relevance and significance to the position you're targeting

4. Visual Elements:

Incorporate relevant images, icons, or placeholders that align with the content and enhance the visual appeal of your digital resume.

5. Prototype Presentation:

-Update your e-portfolio explaining and showcasing the processes of the task

Evaluation Criteria:

Your UI design prototype assignment will be evaluated based on the following criteria:

-Clarity and effectiveness of the UI design, layout, and visual elements.

-Appropriateness of the chosen typography, color palette, and imagery.

---

PROGRESS:

1.Content 

At the outset, I create an extensive inventory of my personal information, skills, and pertinent experiences. This process assists me in composing descriptions and content more effectively, with a primary emphasis on my Personal Details, which hold utmost significance.

2. Research

I do some research before start my sketches. Here is my example of resume I found :

3.Sketches

After conducting my research, I outlined a few of my ideas. In general, the structure remains unchanged, but I endeavored to introduce some variations in the finer points. The overarching layout is designed for clarity, aligning with my objective to ensure that my digital resume is highly readable.

4.Digitalize :

First I done the layout with 12 column first. After that, I use the apps "color palet" to confirm my resume theme because my sense of color is not particularly good. Then I put all the details that I prepare into my resume

And this is my final outcome.