Interactive Design - Exercise 1
22/9/2025 - 2/10/2025 (Week 1 - Week 2)
Lim Yeng San (0366316)
Interactive Design / Bachelor of Design (Hons) in Creative Media / Taylors University
Exercise 1
PROCESS WORK
Instructions
Choose FIVE (5) websites from the link given. Review the website that you've selected carefully, taking note of its design, layout, content, and functionality. Identify the strengths and weaknesses of the website, and consider how they impact the user experience.
Write a brief report summarizing your findings and recommendations.
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, load times, responsiveness, and compatibility with different devices and browsers.
Write a brief report summarizing each Web Analysis in not less than 200 words. You can include a screen capture of each section or page of the website to explain. Make sure that the formatting of the report is clear (headings/subheadings)
All websites sourced from https://www.csswinner.com/winners
Week 1
Analysis 1 - JO&SO
Purpose and Goals
JO&SO is a website that lists boutique hotels, holiday homes, apartments and villas in Portugal and reviews them for the purpose of tourism and travel in Portugal.
Visual Design
- Layout
The website uses the block layout to display its article titles which provides orderly visuals and the one column layout for its articles supported by large negative spaces which creates visual balance and gives users ample areas to rest their eyes.
Fig 1.1: Layout of the home page
Fig 1.2: One column layout of the "Homes" page
- Typography
The font families used are TWK Lausanne for headings and Arial for text bodies which give the website an elegant look. The font sizes are suitable and pleasing to the eye.
Fig 1.3: Fonts used in JO&SO
- Colour
A large variety of colours are used throughout the website. White and and black are mainly used for the text while the rest of the colours are used for backgrounds and elements.
- Imagery
JO&SO uses a heavy amount of imagery for its website, especially in the review articles. Photos is used to give viewers an impression of the place they're researching and graphics are used to signify perks of every hotel.
Fig 1.7: The layout of each hotel's page
Fig 1.8: Graphics used to signify perks of each hotel
Functionality and Usability
- Navigation
In the navigation bar, content is categorized into cities in Portugal for easy navigation.
Fig 1.9: Navigation bar in JO&SO
- Interactive Elements
The website has hovering animations for its buttons and links. It also has scrolling animations in the "About" section.
Fig 1.10: Hovering animations and scrolling animations
Additionally, each hotel review is accompanied by a button that redirects users to the hotel's webpage on Booking.com. As a suggestion, more hovering animations should be used for the article links as leaving the text static did not make it obvious that it was a button for a link.
Quality and Relevance of the Website's Content
- Accuracy
Most of the content in JO&SO is delivered well, being a good source of accommodation research for travel in Portugal. However, while it markets itself as an accommodation review website, some of the apartments listed in the website were not given a written review by the website creators. This could cause frustration for users looking for honest reviews about the place they are considering to live in during their travels.
- Organization
The content shown in JO&SO is organized well. It gives users a plethora of options for accommodations in Portugal.
Website Performance
- Load Time
The JO&SO website loads instantly even while other programs and websites are running.
- Responsiveness
The website has no issues with responsiveness as everything runs smoothly.
- Compatibility with Different Devices and Browsers
It is formatted well on phone without any formatting issues and keeps its neat layout.
Fig 1.11: JO&SO formatted to iPhone 14 Pro Max
Analysis 2 - Backstage with Bon Jovi
Purpose and Goals
Backstage with Bon Jovi documents the life of the band Bon Jovi. It gives users an interactive learning experience through animations and interactive room simulations.
Visual Design
- Layout
It compiles its contents in a list format in the "Exhibits" section. In other sections, the content is laid out in a block layout which is most suitable for an artifact gallery. Suitable negative space was also determined.
Fig 1.12: List format in Backstage with Bon Jovi
Fig 1.13: Block format in Backstage with Bon Jovi
The website also uses an interactive layout for a fun learning experience.
Fig 1.14: Interactive layout
- Colour
The website mainly uses a black and white colour scheme for its background, buttons and text. Some text and buttons are in red and blue.
Fig 1.15: Application of colours in Backstage with Bon Jovi
- Typography
The typefaces used give the website a strong and smart feeling.
Fig 1.16: Typefaces used in Backstage with Bon Jovi
- Imagery
All of the webpages are accompanied with a large number of imagery which is suiting for a memorabilia website.
Functionality and Usability
- Navigation
Certain material may be difficult for new users to access but the search bar helps this by providing possible answers as the user types their search prompt.
Fig 1.17: The search bar in Backstage with Bon Jovi
- Interactive Elements
The website utilizes a large number of interactive features. The biggest one being interactive simulations of several rooms the band uses in the "Studio", "The Road" and "Office". Moving the mouse moves the camera in the room and clicking on the designated buttons gives the user two buttons that brings them to separate gallery pages. Backstage with Bon Jovi also has a large number of interactive buttons with hovering animations throughout the entire website which are supported with sound effects. Finally, scrolling animations are also found in the website.
Fig 1.18: All animations in Backstage with Bon Jovi
Quality and Relevance of the Website's Content
- Accuracy
All of the content in the website is organized well. It is jam-packed with information about the band, Bon Jovi and their memorabilia.
- Organization
The content is categorized nicely and the website's heavily interactive features gives users a fun experience when using the site.
Website Performance
- Load Time
It has a moderate loading time of a few seconds on both laptop and phone due to all of the features it offers
- Responsiveness
Responsiveness is affected due to its heavy room simulation feature.
- Compatibility with Different Devices and Browsers
I was unable to use "inspect" to format the website to mobile devices on my laptop so I used my iPhone X. The website works fine on mobile devices but has limited some of it's interactive features most notably the room simulations by reducing its camera movement feature.
Fig 1.19: Backstage with Bon Jovi on mobile
Analysis 3 - Metal Spirits
Purpose and Goals
The Metal Spirits website sells liquor online, navigates physical stores and creates a dedicated community for its liquor brand.
Visual Design
- Layout
The website mainly uses the block layout to display its content.
Fig 1.20: Block layout in Metal Spirits
- Colour
The website uses a similar colour palette as Backstage with Bon Jovi. Black is used for the background, white for text and red for text and buttons.
Fig 1.21: Colours used in Metal Spirits
- Typography
Multiple typefaces were also used for its title, headings, subheadings and paragraphs giving the website an overall dark look according to its metal music theme.
Fig 1.22: Use of colour and typography in Metal Spirits
- Imagery
A lot of photographs are featured in the website for the purpose of advertising, branding, and community updates.
Fig 1.23: Use of photography in Metal Spirits
Functionality and Usability
- Navigation
Navigation is simple as the website is relatively small.
- Interactive Elements
In terms of interactivity, Metal Spirits only uses simple hovering animations for its buttons and an animation of the logo whenever the user visits the website and whenever one of the webpages is visited.
Fig 1.24: All interactive elements in Metal Spirits
Quality and Relevance of the Website's Content
- Accuracy
All content shown in Metal Spirits work to market their liquor brand. Some buttons, when clicked, redirects users to other websites like A1A Liquor to make online purchases and restaurant websites to navigate physical locations to purchase their products which makes it convenient for customers.
- Organization
The contents of the website are categorized and organized well with clarity. However, in the "Shop and Locations" page, some buttons are missing links while other buttons have messy organization. Some buttons load new websites and some open new tabs which feels messy.
Website Performance
- Load Time
It loads instantly without delay.
- Responsiveness
No responsiveness issues were found.
- Compatibility with Different Devices and Browsers
It is formatted well on mobile devices. However, in "The Tribe" page, images do load a little slower on mobile devices.
Fig 1.25: Metal Spirits formatted on iPhone 14 Pro Max
Analysis 4 - PRAND
Purpose and Goals
PRAND is an animation studio that delves into 2D, 3D and many other digital animation styles. Its website documents their projects and offers their services for creative projects.
Visual Design
- Layout
The website uses a very mixed layout. It combines an interactive, block, grid and featured video layout to effectively display their work in an interesting way.
Fig 1.26: Example of layouts used in PRAND
- Colour
The website uses a plethora of colours for its background, elements and buttons which contributes to its art and animation theme. The text is in black and white.
Fig 1.27: Colours used in PRAND
- Typography
PRAND uses a display font for its titles and headings and a sans serif font for body text. Suitable font sizes were used for the title and body text.
Fig 1.28: Fonts used in PRAND
- Imagery
The website is mostly made up of images and videos of the PRANDS creative works. Each article on the animations detail the creative process involved in making the animations.
Functionality and Usability
- Navigation
The directory bar eased navigation on the website. No issues were found for site navigation.
- Interactive Elements
PRAND uses a large number of interactive elements from interactive backgrounds, hovering animations and scrolling animations. This creates an entertaining experience for users especially when visiting the website for the first time.
Fig 1.29: All interactive elements in PRAND
Quality and Relevance of the Website's Content
- Accuracy
PRAND lays out all of its content clearly in great detail supported by numerous process images to let users learn the background and process behind their work.
- Organization
While the content is not placed uniformly across the website, it does not feel messy and still keeps a feeling of order in all the pages.
Website Performance
- Load Time
The website has a moderate load time of a few seconds
- Responsiveness
Responsiveness is a bit slow due to all of its interactive features.
- Compatibility with Different Devices and Browsers
On phone, some of the elements in the website converged with each other. Other than that, no other issues were found.
Fig 1.30: Elements covering each other when formatted to phone
Analysis 5 - NEW IN
Purpose and Goals
NEW IN is a clothing brand and online shop website. The website offers women's clothes of different styles and accessories as well as customization services.
Visual Design
- Layout
The website mainly uses a block layout as it is an online clothing shop. It shows its products effectively.
Fig 1.31: Block layout in NEW IN
"THE HOUSE" section uses both asymmetrical and one column layout.
Fig 1.32: Asymmetrical and one column layout in NEW IN
- Colour
Black and white are mainly used for the background and text. Some buttons are in yellow.
Fig 1.33: Colours used in NEW IN
- Typography
Different typefaces were used for the title and body text with suitable font size differences between the both of them.
Fig 1.34: Fonts used in NEW IN
- Imagery
The website contains a lot of images due to being an online fashion brand.
Fig 1.35: Photos in NEW IN
Functionality and Usability
- Navigation
Pages are divided in the navigation bar based on types of clothing. This makes it easy for customers to browse certain clothing.
Fig 1.36: Navigation bar in NEW IN
- Interactive Elements
NEW IN has hovering animations in the clothing catalogues and scrolling animations in "THE HOUSE" section.
Fig 1.37: Interactive elements in NEW IN
Quality and Relevance of the Website's Content
- Accuracy
The content shown is straightforward and accurate. A lot of model photos are shown to display the clothing in use.
- Organization
The content is categorized well.
Website Performance
- Load Time
The website loads instantly without any hiccups.
- Responsiveness
It has fast responsiveness but is a little slow at times.
- Compatibility with Different Devices and Browsers
The website is formatted well on phone without any major issues. I did notice that images loaded slower on phone.
Fig 1.38: NEW IN on phone
Comments
Post a Comment