INTERACTIVE DESIGN EXERCISES: WEB ANALYSIS & REPLICATE A DESIGN
Emily Goh Jin Yee / 0357722 / Bachelor of Design (Honours) in Creative Media
Interactive Design / GCD60904 / Section 04
Exercises: Web Analysis & Replicate a Design
TABLE OF CONTENTS
1. LECTURES
2. INSTRUCTIONS
3. TASKS
4. FEEDBACK
5. REFLECTION
LECTURES
Week 1- LECTURE
Usability: Designing Products for User Satisfaction
Usability:
- how well users can use a product or design effectively and efficiently in different situations
- a part of User Experience (UX) Design & it is the second level of UX Design
- a design’s usability depends on how well the design's features meet users' needs and contexts
- users should easily navigate an interface without relying on expert knowledge to achieve their objectives
- an interface with high usability that guide the users through its easiest route to achieve its goal
Principle of Usability
Key Principle of Usability
Consistency
- key factor in web design for both visual elements and functionality and ensures website looking coherent and works harmoniously across all different elements(e.g. headers, footers, sidebars & navigation bars)
- ensuring minimal steps, intuitive symbols, and clear terminology are crucial to reducing errors in the interface
- the more visible an element, the more likely users will know and use it
- communicates interaction results, signaling success or failure
- alerts users when they're making mistakes, aiming to facilitate error-free actions. This principle is crucial because humans are prone to making mistakes
Common Usability Pitfalls and How to Avoid Them
- Complex interfaces
- Confusing navigation
- Poor feedback
- Inadequate error handling
Dimension for web: pixels
Color settings: RGB
Understanding Website Structure
Why does website structure matters
- foundation of a user-friendly & accessible website
- impacts user experience, SEO and overall website performance
- helps users find information easily and keeps them engaged
Three Key Elements:
Header
- top section of a webpage: websites logo, navigation menu and contact information
- quick access to essential information
- main content area: text, images, videos
- proper organization is crucial for readability
- located at the bottom of a webpage
- contains copyright information, links to important pages, contact details
- provides closure to the webpage, extra navigation option
- a key to a well-structured website
- use headings (H1,H2,H3,etc.)for hierarchy
- logical grouping, clear labels improve UX
Navigation Menu
- aids website navigation
- clear, concise labels for items
- dropdowns for complex sites
Some notes from class:
WordPress: a free and open-source web publishing platform
Open source software: allows free access to its source code for viewing, modifying, and distribution, fostering collaboration and innovation
UX: observe how users behave, browsing, decide colours
INSTRUCTIONS
<iframe src="https://drive.google.com/file/d/1ShuHv1wfTw-F7hvr-nWHTBjzXIqC6PUD/preview" width="640" height="480" allow="autoplay"></iframe>
TASKS
EXERCISE 1: WEB ANALYSIS
Week 1: Pick 2 websites from the given link. Review the chosen website and observe/take note of its design, layout, content, and functionality. Identify the strengths and weaknesses of each website, and consider how they impact the user experience. Write a brief report summarizing our findings and recommendations. (due May 1)
What to have in the analysis:
- The purpose and goals of the websites, evaluate whether they're effectively communicated to the user
- Evaluate the visual design and layout of the website, including its use of color, typography, and imagery
- 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.
WEBSITE #1
source/reference: https://www.awwwards.com/sites/dirty-dog-beauty-club
PURPOSE AND GOALS
DDBC (Dirty Dog Beauty Club) is an e-commerce website primarily sells carefully crafted beauty care products for dogs and merchandise. These products are developed by pet owners, veterinarians, and beauty industry experts who aim to improve the lives of dogs and their owners. Additionally, DDBC is dedicated to supporting Service Dogs and destigmatizing Mental Health.
The homepage prominently features their bestselling product with the tagline "Vet-formulated grooming essentials for your best friend", accompanied by an intuitive navigation bar for easy exploration of product offerings and website purpose.
Overall, the website effectively communicates its purpose, fostering a community of dog owners and promoting pet well-being through intuitive navigation and engaging content.
VISUAL DESIGN & LAYOUT
Fig E1.2 home page of DDBC website
FUNCTIONALITY & USABILITY
The website provides a simple and straightforward navigation bar, allowing users easy access to categories and information. Two icons represent options to sign up or log in, and access the shopping cart. In the footer, users can find additional details such as contact information, delivery and returns policies, and the option to make a donation (giving bark), etc.
CONTENT QUALITY & RELEVANCE
DDBC's organization into pages is skillfully executed for showcasing its content. Each page is thoughtfully curated to highlight relevant information and products, ensuring a seamless and engaging user experience.
ABOUT US:
DDBC SCIENCE:
.jpg)
This page shares knowledge while promoting their brand by explaining why 'good' products matters.
I believe that instead of using a paragraph to explain the reason of why clean products matter, they could make them into point forms/incorporating infographic elements or statistical graphics could further engage users and encourage them to delve deeper into the content.
SHOP NOW:
.jpg)
In the purchasing page, detailed product information is presented alongside graphical elements to enhance visual appeal, potentially increasing users' desire to purchase the products. Reviews are also included below for buyers to gain insights from others' experiences with the product, aiding in their decision-making process.
.jpg)
RESPONSIVENESS AND COMPATIBILITY
The website is really responsive, fast loading time and smooth. However, the compatibility on the tablet device, in vertical view, could be improved.
WEBSITE #2
source/reference: https://www.awwwards.com/sites/dryrobe
PURPOSE AND GOALS
Dryrobe® is an e-commerce website known for their original weather-proof change robe. It has pioneered a new category of clothing, establishing itself as a leader in premium-quality, versatile, and highly functional changing robes. The team is passionate about getting active outdoors. Through the dryrobe® Warmth Project, they are proud to support charities and non-profit organizations that share their values of promoting wellbeing through outdoor activity and protecting the environment.
VISUAL DESIGN & LAYOUT
Fig E1.23 Layout and Design of homepage
FUNCTIONALITY & USABILITY
Dryrobe's website design prioritizes user navigation by placing the search bar and navigation bar at the top of the page. Clicking on their brand logo in the middle conveniently directs users back to the main page, ensuring intuitive navigation. Additionally, in the footer, users can access further details such as contact information, FAQs, delivery and returns policies, and about them section, enhancing user experience with comprehensive accessibility.
Fig E1.30 Product listing shown in main page
To enhance user experience, incorporating arrow buttons for navigation while viewing products could be beneficial. These buttons would simplify the process of exploring various options, enabling users to seamlessly move through the available selections. By providing intuitive navigation tools, the designer can ensure a smoother browsing experience, ultimately improving user satisfaction and engagement with the platform.
CONTENT QUALITY & RELEVANCE
Dryrobe has effectively organized its categories and curated compelling content, providing users with clear clarifications and highlighting key features to enhance their browsing experience.
.jpg)
.jpg)
RESPONSIVENESS AND COMPATIBILITY
The website is overall responsive, minor issues mentioned earlier was the cursor not being able to move to the side (in Fig E1.29). The website is also compatible with all devices.
EXERCISE 2: REPLICATE A WEBSITE
Week 3: Replicate two existing main pages of the websites given in the link to gain a better understanding of their structure. Follow the dimensions of the existing website from the width and height
This exercise will help in developing our design skills using software such as Photoshop or Adobe Illustrator, and gain insights into web design best practices. Images from stock image or free stock icon can be used. The image that will be used does not have to be an exact image from the original website, can be replaced with a similar image. Focus on the layout, type style, and color style. To find similar typefaces/fonts, download fonts from Google Fonts. We may need to screengrab the website and can begin to replicate the page.
Free image: https://www.pexels.com/
Google Fonts link: https://fonts.google.com/
choose two links to replicate:
- https://www.morganstanley.com/?authuser=1
- https://www.oceanhealthindex.org/?authuser=0
- https://banditrunning.com/
WEB STRUCTURE EXERCISES
Week 4: We were taught on how to create a basic website by using the HTML and CSS codes. Steps:
- create a folder and name it 'HTML lesson'
- create an 'images' folder and place an image file in it
- by using Notepad from windows, follow instructions on inserting the HTML codes
- at the same time in Netlify website, we have to create a new site and select 'Deploy manually'
Fig WE1.1 step 4 - drag and drop site output folder
- keep Notepad app turned on for the HTML insertion and save the progress
- refresh on web to check the updates
WEEK 6: Continuation of the website. We learnt on how to insert colors to the background and create a table for the timetable. Besides that, we were taught on how to change the typeface for the texts.
EXERCISE 3: CREATING A RECIPE CARD
In this exercise, we 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.
1. Choose ONE recipe from https://www.101cookbooks.com/2. Create an HTML file named "index.html."
3. Create a section that displays the following information:
- Recipe title
- Include necessary images for the page
- List of ingredients
- Step-by-step cooking instructions
- Apply CSS rules to style your recipe card.
- Use CSS selectors such as element selectors (e.g., body, h1, ul), class selectors (e.g., .recipe-title, .ingredient-list), and ID selectors (e.g., #instructions) to style different parts of the card.
- Use your creativity to make the page look appealing and interesting
CHOSEN RECIPE
HTML AND CSS CODES
FINAL OUTCOME/SUBMISSION
final submission link here !
FEEDBACK
no feedback
REFLECTION
Experience
Exercise 1: Through interactive design exercises, I've learned to observe websites and put myself in users' shoes to understand their browsing experience. This understanding of interaction brings valuable insights.
Exercise 2: Surprisingly, I found this exercise quite interesting as it was something I had not tried before. Initially, I struggled to keep up in class due to missing a certain step. However, asking my peer for assistance helped me understand what to do. Additionally, our tutor was patient and provided guidance on applying effects to my text when I sought his help.
Replicating the website was particularly intriguing, as it allowed me to learn more about observing the layout and structure of a website. During this process, I also noticed mistakes in the original website that may not be immediately obvious to viewers. This realization highlighted the importance of attention to detail.
While the exercise was not very difficult, it did take up a lot of time. Overall, I enjoyed browsing through pixels to select the images for the exercises and was satisfied with the outcome.
Exercise 3: The recipe card exercise was very challenging for me, I can confirm that I still need more practices as I don't completely understand how to apply the codes, I find it extremely confusing. Although the recipe card was completed, I think it could be more simplified, especially at the Instructions part. I have slightly removed some words from there but as shown, it was not enough. I also should've removed more information. But it was too late to change already.
I struggled a lot during the process, I was really clueless on how to continue and what to do. Even looking at others' work, I still couldn't understand how these codes work. I needed to explore on my own and spend really much time on it. It was frustrating when sometimes the outcome turns out differently than expected and not being able to fix it because of not knowing how to do it.
Yet, the outcome was exciting to look at, being able to see what has been turned out from the codes. Although my work may have lack certain things, not perfect, codes may not be right, I find this exercise important for everyone to learn how to observe and explore. Being patient is one of the main keys to complete the exercise. I strongly believe that this exercise was a great experience for me to know where my level of designing a basic webpage at and so I can improve myself in the future!
FURTHER READING
Week 2: https://blog.tubikstudio.com/anatomy-of-web-page/
The Anatomy of a Web Page: 14 Basic Elements
Header
- the upper part/top of the webpage
- an element of strategic importance
- core navigation should be provided so that users could scan it in split seconds and jump to the main pages
- an element of a user interface
- aimed at encouraging a user to take a certain action
- the action presents a conversion for a particular page or screen (e.g. buy, contact, subscribe, etc.)
- it has to catch attention and stimulate users to do the required action
- usually in bold so that website visitors could see them in split seconds and respond(e.g. “Learn more” or “Buy it now”)
- above-the-fold(pre-scroll) area of the webpage
- contains a strong visual hook like images, typography, or videos
- doesn't need human or character images; can be product photos, landscapes, or abstract compositions
- instantly grabs attention and establishes connection with users
- encourages further interaction like scrolling or clicking buttons
- located at the bottom of the webpage
- contains useful links and data
- provides additional navigation options
- marks the end of the webpage
- a common place to search for contact information, credits, and sitemaps, so playing on this pattern can be beneficial
- based on the idea of supporting general usability and navigability
- interactive slideshow or carousel
- often used in e-commerce and business websites
- helps users find content on a website
- saves time and effort
- implemented with a search field
- recommended for larger websites (50+pages)
- not as important as navigation
- not needed for simple websites or apps with clear navigation
- key navigation element in interfaces
- presents interaction options
- can list commands or categories
- commands are actions like "save," "delete," etc.
- different types and locations (side, header, footer)
- design choices based on user research
- well-designed menus improve user experience
- aid user navigation by showing their location on the website
- serve as a supplementary navigation tool
- provide secondary navigation, enhancing website usability, especially for sites with numerous pages
- interactive element for sending information to system/server.
- digital version of paper forms, offering more options and functionality.
- common in digital life: registration, adding personal/financial details, payments, feedback, newsletter subscriptions, etc.
- tiles, organize homogeneous data visually
- typically arranged in a grid, each card stands alone
- combine various content types about a specific item
- example: product preview card with image, title, add-to-cart functionality, etc.
Video
Progress indicator
Favicon
Tags
QUICK LINKS
Comments
Post a Comment