INTERACTIVE DESIGN-EXERCISES

August 27, 2023

INTERACTIVE DESIGN-EXERCISES

INTERACTIVE DESIGN

28 August 2023

28.08.2023- 14.07.2023/Week 1 - Week 8

Nur Fariha Binti Mohd Rodzuan/0351242

Interactive Design/Bachelors(Hons) in

Creative Media

Exercises

LABELS:

Lectures

Instructions

References

Reflection

LECTURES:

Week 2: Usability: Designing Products for User Satisfaction

Week 3: Understanding Website Structure

Week 4:

Week 5:

Week 6:

Week 7: Box Model

Week 2: Usability: Designing Products for User Satisfaction

-Usability refers to how effective, efficient and successful a particular user can utilize a product/design in certain situation. This is the second level of UX design and a design usability depends on how well the features accommodate user's need and contexts.

-Users encountering an interface should be able to find their way easily to achieve their objective without expert knowledge.

Principle of Usability

1. Consistency

Consistency ensures that websites look coherent and across all different element (headers, footers, side bars and navigation bars)
Consistency creates pattern to be recognized by users, similar looking things should produce similar output. For instance, if website's buttons are protruding boxes with labels on, then all other buttons should be the same.
Navigation system, page layout and menu structure, fonts and typography and branding in website should also be consistent.

Examples of consistency in design: https://www.apple.com/

2. Simplicity

User interface should be simple for users. Simplicity refers to the need to minimize the numbers of steps involved, use symbols and terminology that makes interface as obvious as possible, and difficult to make mistakes.
Applying simplicity will help design better user interfaces by helping users achieve their goals faster and more efficiently.

3.Visibility

The more visible an element, the more likely users will know about them and how to use them.
Users should know just by looking at an interface, what their opinions are and how to access them.
For instance; Icons, thumbnails and using different color on call action buttons to make it more visible and that the buttons are clickable.

4. Feedback

Communicates results of any interaction, gives user a signal that they have succeeded or failed at performing a task.
Example; Progression bar when you download something, when a website loads longer it gives you a looping indicating it's loading to the users, feedback through sounds.

5. Error Prevention

Alerting a user they're making an error, with the intention to make it easy for them to do whatever they wanted without making a mistake.

fig 1 Mailchimp Demonstrating error prevention by asking users to type DELETE to confirm their actions

Week 3: Understanding Website Structure

1. Three Key elements that are divided in the website:

HEADER- The top section of webpage, usually contains website logo, navigation menu and contact information. The header is a quick access to essential information for user.

BODY- The main content are of a webpage that contains text, images, videos and other elements.

FOOTER- The bottom section of the page that includes copyright information, links to important pages and contact details.

2. Organizing Content

Use headings (H1,H2,H3,H4) to create a hierarchical structure, clear labeling of sections and also logical grouping

3. Navigation Menu

Helps user to move around the website faster.
Use clear concise labels for menu items
Consider using dropdown menus for complex sites.

Week 7: Box Model

*when naming html don't make it uppercase- exercise 3

*naming file: yourname-exercise03

*name CSS file box-atyle.css

*create CSS file>attach file to html (to attach CSS link created into html)

*always press 'tab' when creating new line of code to differentiate the groups

*<div> controls the position of the <p>

"*" selects whole element

Overflow: occurs when an element's content does not fit entirely inside the element box.

*Margin, Padding, Border, Float (changes direction of img left or right, Overflow. (display block, margin auto).

Display Property

Display is CSS's most important property controlling layout
Each element has a default display value depending on what type of element it is.
Default for most elements is usually block or inline

Difference between block and inline display

Block: The structure collapses, each line of could would be a new line on display
Inline: Inline-block does not add a line-break after the element, so the element can sit next to other elements.
Block-level elements have a default size setting if you don't change it.

INSTRUCTIONS:

Module Information Booklet

EXERCISE 1: Web Analysis

For the first exercise we were required to choose TWO websites from the site https://www.csswinner.com/winners and analyze it's design, layout, content and functionality. Furthermore, Identifying the strength and witnesses of the website and consider how it would impact the user experience and write a report summarizing the findings in not more than 500 words in Google Slides. The report formatting must be clear and including screen capture of each section or page of the websites are allowed.

What To Have in The Analysis:

Consider the purpose and goals of the website, and evaluate whether they are effectively communicated to the user.
Evaluate the visual design and layout of the website, including its use of color, typography, and imagery.
Consider the functionality and usability of the website, including its navigation, forms, and interactive elements.
Evaluate the quality and relevance of the website's content, including its accuracy, clarity, and organization.
Consider the website's performance, including its load times, responsiveness, and compatibility with different devices and browsers.

1. Research

fig 2 Elements to consider in Website Analysis week 1(28/8/2023)

There are four main steps on how to analyze the effectiveness of a website and also questions to ask ourselves as we began inspect the website's technical, strategic and visual aspects.

I. Identify the target market for Search engine optimization (SEO)

Be concise on who you're trying to reach. For instance, e-commerce websites emphasize more on transaction-focused (direct purchase of products/services) with less clicks.
Identify characteristics of audience through Website Demographics.

Through gaining insights, we can answer important questions such as:

Is the site clearly focused on the right users and their needs?
Is the site structure designed to deliver convenient user experience?
Is the site optimized to be found and promoted by search engines like Google (i.e does it have good SEO)?
Is the content relevant and optimized for users and SEO?

II. Understand the customer's journey

Different visitors comes at different stages of journey: Awareness, Evaluation, Conversion and Retention
Use Digital Analyzing Tools (Software solutions that help marketers to collect, analyze and interpret data from various resources).

III. Optimize Design

Other questions to ask during this stage:

Does the site follow best-in-class design trends?
Is it relevant compared to other sites in your industry category?
Is the site designed to be 'mobile first' (does it display on phones and tablet well?)
Content Clustering: A topic cluster (or content cluster) is a group of content assets on a website that are all centered on a related topic.

IV. Ensure technical aspects are up to date

Some of technical aspects and parameters to evaluate are;

Is the website fast enough to meet the user's need?
Do all the links work?
Is there sitemap that people (and search engines) can follow to find the key pages?
Is the site protected? Is it compliant with the data capture and management rules?
Is the content update regularly? This helps to push up the site's page ranking on search engines.

Final Web Analysis in Google Slides:

https://docs.google.com/presentation/d/10JH8YUkJDf8n_dlftNJKUCd3OPXGSNNiDwdVOybTDy0/edit?usp=sharing

Web Analysis, PDF format

EXERCISE 2: Web Replication

For the second exercise, we were required to replicate two websites main pages using either Photoshop or Illustrator through the link given to grasp a better understanding of the website structure. Focus on the layout, type style, and color style. To find similar typefaces/fonts, you can download fonts from Google Fonts.

Research:

Before starting a website layout, its crucial to create the basic structure of the website by creating a sitemap which gives the basic direction for your layout.

fig 3 Example of creating Sitemap for the homepage with sub-pages.

fig 4 How to Create a Wireframe

What's the wireframe for?

A general idea of the overall structure of the web page and how the navigation will flow in these pages.

Design a home page layout for a website using basic visual elements and the Bootstrap grid system.
The website should include a homepage with a slider image, logo, and a main menu, with an emphasis on clarity and simplicity.
The wireframe should include arrows for navigation and a hero image that runs behind the front page.
Additional sections can be added to the homepage, such as testimonials or sponsors.
Each section should be labeled in the wireframe to make it easy to understand.
The footer should also be included with common elements such as a logo, contact form, contact information, and social media links

fig 5 I tried creating wireframe structure of the two websites to get a better understanding on how to create a wireframe.

Chosen Websites: OCEAN HEALTH INDEX

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

fig 6 Details on used fonts in the website week 2 (4/9/2023)

To be honest, I did not realize that I was able to extract the font information required in the replication from the inspection page until I came to check references from other students to come to that realization, but at least I'm able to use it on the second website instead. Fortunately, the font 'Arial' was available in photoshop and I was able to replicate similarly to the original website.

fig 7 The Main page for Ocean Health Index Website week 2 (4/9/2023)

fig 8 Ocean Index website replicated in Photoshop week 2 (7/9/2023)

Chosen Websites: MORGAN STANLEY

https://www.morganstanley.com/

fig 9 Morgan Stanley 'Inspect' week 2 (4/9/2023)

For this website, I changed the fonts to similar ones such as Banshrift for Headings and subheadings and Calibri for body text.

fig 10 Original Website (left) and Replicated page on Photoshop (right)

week 2(4/9/2023)

Final Website Replication:

Final Compilation Website 1 & 2 PDF week 2 (4/9/2023)

EXERCISE 3: Recipe Making

In this exercise, you will create a recipe card using HTML and CSS. The goal is to design a basic webpage that displays a recipe's ingredients and instructions in a visually appealing format.

I decided to go with the recipe to make simple bread pudding just because, it's my favorites' (ones with no raisins). Below is the link to the recipe I would be creating a recipe card for.

https://cooking.nytimes.com/recipes/1012636-simple-bread-pudding

*If the link doesn't work:

fig 1 Website to the recipe I'm taking from week 6 (2/10/2023)

fig 2 Website to the recipe I'm taking from week 6 (2/10/2023)

First, I put in all the information and images into the html file, once it's done, I divided the codes into four components which are title, a brief description, ingredients and preparations.

fig 3 HTML view week 6 (2/10/2023)

fig 4 Website structure view in google chrome week 6 (2/10/2023)

fig 5 I needed to choose the background color befitting the picture used inside the website, and this were the color palette

We learned how to put navigation bar in week 7, whether it is necessary or not, I thought it would be good practice to apply the same thing to my recipe card as well.

fig 6 HTML structure navigation bar week 6 (2/10/2023)

fig 7 Decorated the navigation bar with CSS week 6 (2/10/2023)

Furthermore, I decided to make the picture and the Title, description and other information into a column structure.

fig 8 HTML structure for the column week 6 (2/10/2023)

fig 9 CSS file created to decorate the column week 6 (2/10/2023)

fig 10 Recipe website view in Google Chrome week 6 (2/10/2023)

For the font, I wanted to make it more aesthetic so I chose one font for the title/heading which is DM Serif Display regular and for the body text, Dosis sans serif regular since the fonts are easy to read and gives a more cheerful vibe to the website.