Labels

Interactive Design Exercise 2

Eric Chang (0378298)

Bachelor Of Design in Creative Media

Interactive Design

Instruction:


Lecture:

Week 2: Designing Products for User Satisfaction

Usability is a component of User Experience (UX) Design, which measures how effectively and efficiently a user can utilize a product or design. there are 5 key principle of usability which is consistency, simplicity, visibility, feedback and error prevention.


Consistency is a key factor in web design for both visual elements and functionality, and consistency ensures that the website looks coherent and works harmoniously across all its different elements, such as headers, footers, sidebars and navigation bars. consistency is intuitive design and it includes consistent on navigation system, page layout, menu structure, fonts and typography and branding in web design.


Simplicity in user interfaces minimizes steps, uses clear symbols and terminology, and reduces errors. This enhances user experience and efficiency.


Visibility is important for user interface design, visible elements are more likely to be used. And users should be able to identify options and access them easily.


Feedback communicates interaction results, making them visible and understandable. It signals whether the user or product succeeded or failed at a task. For example, when you select an icon on your mobile app, its color changes to indicate that you’re in the selected screen.


Error prevention alerts users when they make errors, making it easier for them to complete their tasks without mistakes. This principle is crucial because humans are prone to making errors.


There are a few usability traps, which is Complex interfaces, Confusing navigation, Poor Feedback, Inadequate error handling.


Week 3: Understanding Website Structure

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.

The body is the main content area of a webpage. it contains text, images, videos and other multimedia elements. and proper organization of content within the body is crucial for readability.

The footer is located at the bottom of webpage. It typically includes copyright information, links to important pages and contact details. The footer provides closure and additional navigation options.

Organizing content:
Content organization is a key to a well-structured website. We can use heading (H1,H2,H3) to create a structured website. and logical grouping of content and clear labeling of section improve user experience.

Navigation menus: Navigation menus can help the user move around the website. We should use clear and concise labels for menu items.


Week 4:

Why Web Standards Matter:
  • The web is accessed through diverse devices (phones, tablets, computers) and interfaces (touch, voice, keyboard/mouse)
  • Different browsers (Chrome, Firefox, Safari, etc.), operating systems, and screen resolutions create variability
  • Web standards ensure consistent access to content across all platforms and configurations
  • The World Wide Web Consortium (W3C) maintains these standards, including HTML and CSS

Why Web Standards?
  • To make internet a better place, for both developers and visitors, it is important that both browsers and Web developers follow the Web standards.
  • When developers follow the Web standards, the development is simplified, since it is easier for a developer to understand another's coding.
  • Using Web standards will ensure that all browsers will display your Web site properly, without time-consuming rewrites.
    Basic HTML elements:
<html> - Root element
<head> - Contains page information
<title> - Page title shown in browser tab
<body> - Contains visible page content

    Content Elements:
Headings: <h1> through <h6> with h1 being the main heading
Paragraphs: <p> for text blocks
Text formatting: <b> for bold text and <i> for italic text

    Lists:
Ordered lists: <ol> with numbered items
Unordered lists: <ul> with bullet points
List items: <li> for individual list entries
Nested lists: Lists can be placed inside list items for sub-categories
    Links and Images:
Links: <a href="URL">Link text</a>
Images: <img src="path" alt="description" title="tooltip"/>


Exercises 2: Website Replication

For this exercise we are asked to replicate 2 website from the 5 website that we picked, we may choose another website if the website that we selected are full of video, and it's impossible to screenshot the entire website.

for this exercise I decided to go with www.dayglow.com/ and wemake.nl/ initially I wanted to go with graphic hunter website, however that website is full of video and I was unable to take the full page screenshot.


1. Replicating dayglow.com

The first website that I decided to replicate is dayglow.com, because I think that it takes more time to replicate than wemake.ln (since it has a lot of elements and text), and so below are my progress of replicating the website.

Fig 6.1: Original Website



The first thing that we have to do is to create an artboart that is the same size as the screenshot, this process this quite simple.

Fig 6.2 Progress 1


Next I used the shape builder tool to create the background for the website. and at this point I decided to replicate the bottom part of the website first as it seemed more easy for me. For this website I decided to use "Adobe Caslon Pro" for the serif font and "Myriad Pro" for the sans serif.

Fig 6.3 Progress 2

For the bottom part I used the Line tool and the square to measure the exact distance of the text.

Fig 6.4 Replicating the top part

Afte the bottom part I decided to do the top part first and then move on to the middle part of the website. for the middle part I also used the square method to measure the exact distance of each elements.

Fig 6.5 Replicating the middle part



Lastly, I compared the replicated website next to the original to make sure that I didn't miss anything. i also replaced the sunset image, since I couldn't find the exact image that the website was using.

Fig 6.6: Quality Check


And here's the final outcome for the first website.

Fig 6.7 Final outcome


PDF:

*Zoom out to view the PDF

Website 2: Wemake


On first sight replicating this website seems much easier compared to dayglow.com, this is because the website doesn't have that many text and elements, however replicating this website is more stressful because the is a lot of font style used on this website.


Fig 7.0; Original Website


For the first step is pretty much the same as the previous website, we need to create an artboart with the same size as the website that we're trying to replicate.


Fig 7.1 Progress 1

After creating the artboard I decided to replicate the buttons first (to save time later), I do this by using the pen tool and the shape tool. After that I also replicate the exact size of the image frame and then inserting the image using the "Draw inside" feature


Fig 7.2: Progress 2


Fig 7.3 Progress 3

for the image itself, I decided to use the "Inspect" mode on chrome to directly download the image, but I decided to change one of the image because I was unable to download it.

Fig 7.4 Progress 4

After completing all of the top and middle part, I just need to do the bottom part of the website.

Fig 7.5: Final Progress


Final Outcome:



PDF: 


*Zoom out to view the PDF

Labels:

Comments

Post a Comment

Popular Posts