Interactive Design · Exercise 1 & 2
24/4/2024 - 1/5/2024 / Week 1- Week 2
Yang Zhi Ching (Chelsea) / 0365154
Yang Zhi Ching (Chelsea) / 0365154
Interactive Design / Bachelors of Design (Hons) in Creative Media
Exercise 1 & 2 · Web Analysis & Web Replication
Instruction
Doc 1.1 MIB of the module
We were tasked to choose 2 websites from the websites given, analysis the
design, layout content, and functionality, then analysis the strengths
and weaknesses of website and how they impact the user experience.
The websites given are:
2 of my chosen websites are Site of the Day Awards and
Awwwards.
Exercise 1 - Web Analysis
Website 1 - Site of the Day Awards
Website 2 - Awwwards
Purpose and Goals |
· Website 1 - Site of the Day Awards
Upon visiting this website, my attention was immediately drawn to a series
of images. Initially, I found it difficult to ascertain the website's
purpose. However, upon noticing the name "CSSwinner" in the top left
corner, I decerned the website's name, Despite this, the purpose of the
website remained unclear to me until I noticed the option to "Submit
Website."I inferred that it was related to website awards. Clicking on the
images, I discovered that they were linked to various websites, each
accompanied by a score and basic details. Further exploration of the site
revealed additional images.
.png)
|
| Fig 1.1 Home Page of Web 1, Week 2 |
.png)
|
|
|
· Website 2 - Awwwards
In contrast to the aforementioned website, my experience upon entering
this platform was notably different. Immediately, I was greeted by a clear
and conspicuous title, "Menu Inspiration," supplemented by relevant
subtitles, which facilitated an understanding of the website's purpose –
sharing website designs. Furthermore, the navigation was streamlined, with
the search bar prominently positioned for convenient access. Notably, upon
directing my attention to the upper right corner, I encountered the
prominently featured "Be Pro" button and the user account login system.
This arrangement, rather than overtly soliciting engagement in a
sales-oriented manner, provided a seamless and intuitive guidance through
the navigation systems.
.png)
|
|
|
Visual Design and Layout |
· Website 1 - Site of the Day Awards
The predominant use of orange-red color in the header immediately catches
the eye upon visiting the website. The homepage features a display of
various websites, each showcasing diverse color themes. However, the
choice of red as the header color may pose a challenge as it could clash
with the colors present in the content of these websites, potentially
causing discomfort for users due to visual overwhelm.
.png)
|
|
|
· Website 2 - Awwwards
In contrast, this website adopts a minimalist approach with a predominant
black and white color scheme. This choice of color palette lends a sense
of simplicity and clarity to the interface, ensuring that it does not
compete with or overshadow the colors present in the content of showcased
websites.
.png)
|
|
Fig 2.2 Relatively integrated theme color and content color, Week
2 |
Functionality and Usability |
· Website 1 - Site of the Day Awards
The search bar on this website isn't prominently featured, but the
inclusion of filters for categories, tags, and colors is a thoughtful
design choice. Users can easily narrow down their search criteria to find
the desired style. However, inconsistencies in color usage are noted,
particularly in the 'submit website' section where the form fields feature
colors like yellow and light green, while the submit button transitions to
black upon scrolling up. This lack of color consistency may impact user
experience. Additionally, the use of sharp-cornered rectangular buttons
throughout the site facilitates navigation, and the ability to click on
images to access content adds convenience and interest.
.png)
|
|
Fig 2.3 The searching bar and filter function, Week 2 |
.png)
|
|
|
.png)
|
|
|
· Website 2 - Awwwards
This website excels in clarity and user accessibility. Clear headers guide
users effectively, and the prominently placed search bar and filter
options adjacent to it enhance the ease of finding desired content. The
placement of the login system and subscription button in the top right
corner, alongside the search bar, is intuitive and unobtrusive. The
consistent black-and-white color scheme contributes to a user-friendly
interface, ensuring easy adaptation and content discovery. Interactive
features, such as clicking on images to access content, further enhance
usability. Moreover, the smooth transition upon entering content and the
clear presentation of information contribute to a seamless user
experience.
.png)
|
|
|
.png)
|
|
Fig 2.7 The navigation system of Web 2, Week 2 |
.png)
|
|
|
Content Quality and Relevance |
· Website 1 - Site of the Day Awards
Upon initial assessment, it's evident that the content on this website
is regularly updated, as indicated by the presence of upload dates on
almost every piece of content. This ensures timely relevance for users.
Additionally, the inclusion of a "like" function for each work enhances
user interaction, while providing author information and region details
adds credibility and context to the content. The feature allowing users
to access the author's personal profile and website fosters transparency
and facilitates potential collaborations. However, the layout of the
author's interface appears lacking in distinct features and somewhat
disorganized, particularly with content separation on the left and right
sides, which may hinder readability and focus.
|
|
|
|
.png)
|
|
|
.png)
|
|
Fig 3.3 Turning to author's personal website after clicking
author's name, Week 2 |
· Website 2 - Awwwards
In contrast, the absence of appearance dates for content on this website
poses a challenge in assessing its timeliness. Nonetheless, the use of
animation on the content display page enhances user engagement and
reference accessibility. Clear links to designers and additional related
content upon scrolling contribute to a seamless browsing experience. The
interface employs concise and user-friendly language, such as "Also, you
can view more Elements below...", fostering a sense of involvement and
ease of navigation. Notably, the author user interface offers richer
content compared to the previous website, with a structured layout
presenting concise author details, diverse works, color palettes, and
descriptions. The inclusion of a real-name scoring system further
bolsters content credibility and reference value, enhancing the overall
user experience.
.png)
|
|
Fig 3.4 Content page of Web 2, Week 2 |
.png)
|
|
Fig 3.5 Friendly introductory captions, Week 2 |
.png)
|
|
Fig 3.6 Enter author's profile, Week 2 |
.png)
|
| Fig 3.7 Author's colour pallettes, Week 2 |
.png)
|
|
Fig 3.8 Author's description column, Week 2 |
.png)
|
|
Fig 3.9 Scoring system,
Week 2 |
Performance |
· Website 1 - Site of the Day Awards v.s. Website 2 - Awwwards
I used the website PageSpeed Insights and Pingdom Website Speed Test
to test the speed. The following is a screenshot of the results.
PageSpeed Insight
Fig 4.1 Results in PageSpeed Insights, (Left: Web 1; Right: Web 2)
Overall, the values are similar. The only big difference is
Interactive to Next Paint. Web 1 is 28ms, while Web 2 is 96ms.
Pingdom Website Speed
Fig 4.2 Results in PageSpeed Insights, (Left: Web 1; Right: Web 2)
We can see more intuitively that the grade of Web 1 is grade B, while
Web 2 is grade C.
After that, i make an assessing the website's responsiveness entails
evaluating its ability to adapt and perform consistently across a
spectrum of devices and screen sizes. This analysis involves
conducting thorough testing across various platforms, including
desktops, laptops, tablets, and smartphones, to ascertain a seamless
user experience regardless of the device used.
Below are the different performance of Web 1 and Web 2 in each device
(Desktop, Iphone, Ipad) and chrome (Google Chrome, Microsoft Edge in
Desktop).
Difference Between Devices
Desktop
Web 1 v.s. Web 2
Iphone
Web 1 v.s. Web 2
Ipad
Web 1 v.s. Web 2
Difference Between Chromes
Google Chrome
Web 1 v.s. Web 2
Microsoft Chrome
Web 1 v.s. Web 2
Strenth and Weakness |
· Website 1 - Site of the Day Awards
Web 1 excels in its fast server response time, contributing to a
seamless user experience. However, it suffers from inconsistencies in
color usage and a cluttered layout in the author's interface,
potentially hindering user engagement and readability.
· Website 2 - Awwwards
On the other hand, while Web 2 may lag in server response time, it
compensates with clear language and engaging animations. Nonetheless,
the absence of appearance dates for content and the lack of clear
section delineation pose usability challenges that need addressing for
optimal performance.
| Conclusion |
The report evaluates two websites: "Site of the Day Awards" (Web 1) and "Awwwards" (Web 2). The analysis focuses on various aspects, including the purpose and goals, visual design and layout, functionality and usability, content quality and relevance, performance, and strengths and weaknesses.
Purpose and Goals:
Web 1 initially lacked clarity in communicating its purpose, while Web 2 had a clear focus on sharing website designs.
Visual Design and Layout:
Web 1 used a vibrant color scheme but lacked consistency, while Web 2 adopted a minimalist approach with a clear and simple design.
Functionality and Usability:
Both websites offered functional search bars and filters, but Web 1 had inconsistencies in color usage, while Web 2 provided a more intuitive user experience.
Content Quality and Relevance:
Web 1 featured regularly updated content with interactive elements, but its layout was disorganized. Web 2 lacked appearance dates for content but offered richer and more structured information.
Performance:
Web 1 showed faster server response time compared to Web 2, but both websites had similar overall performance grades.
Strengths and Weaknesses:
Web 1 excelled in server response time but suffered from color inconsistencies and a cluttered layout. Web 2 compensated with clear language and animations but lacked appearance dates for content and clear section delineation.
In conclusion, both websites have their strengths and weaknesses. Web 1 prioritizes speed but needs improvement in design consistency, while Web 2 offers clarity and richness in content but lacks certain usability features. By addressing these aspects, both websites can enhance their overall user experience and effectiveness.
(727 words)
Exercise 2 - Web Replication
Instruction |
- Task: Replicate TWO main pages from the provided link to understand their structure.
- Link 1: https://www.morganstanley.com/?authuser=0
- Link 2: https://banditrunning.com/?authuser=0
- Link 3: https://www.oceanhealthindex.org/?authuser=0
- Objective: Improve design skills using Photoshop or Adobe Illustrator.
- Requirements:
- Follow the exact dimensions (width and height) of the original website.
- Use any stock images or free stock icons as replacements for original images.
- Focus on:
- Layout
- Type style
- Color style
- Tips:
- Download similar typefaces/fonts from Google Fonts.
- Use screengrabs of the website as a reference for replication.
Process |
The 2 websites I chose are Bandit Running and Ocean Health.
The original screengrab from website Bandit Running.
 |
| Fig 5.1 Screengrab from Bandit Website, Week 3 |
The original screengrab from website Ocean Health.
 |
| Fig 5.2 Screengrab from Ocean Health, Week 3 |
 | ||
Fig 5.3 Set original image as template, Week 3
|
Final Outcome |
1. Bandit Running
 |
| Fig 6.1 Final of Web #1 ,Week 4 |
Doc 2.1 Final Web #1
2. Ocean Health Index
 | |
|
Doc 2.2 Final Web #2
Comments
Post a Comment