Interactive Design - Exercise: Website Analysis
03/10/2024 - 10/10/2024 | Week 02 - Week 03
Koh Sher Wei | 0353816
Interactive Design | Bachelor of Design in Creative Media
List of Contents:
MIB (Instructions) :
Purpose and Goal
Studio pic is a creative studio that specialises in Multi-Faceted design
services. "PIC" stands for Partners In Crime, which is used to describe
their goal of collaborating with innovative clients to help creating
unique brands with a traditional design thinking approach. They work with large global grands in luxury and technology sectors, to
provide identity development with their creative narratives.
The 3 core values of the company are "Play to learn", "Keep it simple",
"Sometimes for money, always for love". The key takeaway is that the idea
of a creative design is a fun and playful process. With their
knowledge and traditional design background, they like to dissect complex
ideas and condense them into simplified forms. Which results in a healthy
workspace for a better mindset of doing what they love.
Visual Design and Layout
The main colours used are black and white. With white being their
general background and black for texts. However, a large percentage of their website focuses on showcasing their
projects and illustrations. The typeface used in their website is "Aeonik Regular", with font
sizes 12pt, 16pt, 26pt, and 112pt
The website is minimalist and focuses on high-quality visuals. Every
subpage is paired with their own animation design with relevant topics.
The animations are kept simple but engaging with a slight cinematic feel
to them. Though the illustrations move on their own, some are also
interactive with the cursor. Additionally, the overall layout maintains
clean lines and specified sections with seamless
transitions.
Functionality and Usability
Navigation:
The site uses a top-bar menu with all the links to main pages
"Projects", "About", and "Lab". There are also additional links
throughout each page that brings you to a subpage for easy navigation.
This form of navigation is consistent across all pages, with the same
font.
Interactive elements:
There are sub-bars on the bottom of some pages that shows the
different fields that they design for. When we scroll through each
category, the bar switches from white to black, for a better
transition effect, then switches back to white once the bar
reaches the top. Direct links are also underlined upon
hovering, while there are also direct links that are paired with
illustration backgrounds that extend beyond their size to
highlight cursor interaction.
Quality and Relevance
Overall, this website is relatively clean and sleek. The quality is
top-tier as they themselves are a design company, hence the graphics
are totally mesmerising. The illustrations play a big part in the
companies relevance to showcase their abilities. The website itself
serves as a portfolio with their motion design capabilities. It is
also an opportunity for them to establish their brand as a modern,
innovative design practice.
Website Performance
The website itself is very digestible so it works well on both the
mobile and desktop version. However, I prefer the way it is done on the
mobile as each of their illustrations are easier to observe and
navigate. Whereas on the desktop, many graphic boxes are able to fit in
frame which makes loading lag a little, and may be harder for users to
manoeuvre due to the amount of movements happening.
Conclusion/Summary
Studio-pic has done an amazing job in keeping to their minimalist
designs and quality illustrations. The website runs well and is pleasing
to navigate. Text and image placements are done in a way that
compliments their goal of showcasing their works. However, the
responsiveness of the website can be a bit slow due to the resolutions
required for motion graphics. On the desktop version, larger texts on
the menu bars could be beneficial to improve readability for users.
Doing so would also help to highlight and separate different sections
clearly.
Website 02 :
Sonder by OHMY
Purpose and Goal
Sonder is a website that presents the agency's broad capabilities in
market and creative research. They focus on helping brands transform
complex data into actionable insights to help businesses make informed
and strategic actions. The goal is to offer human-centric, innovative solutions for
companies to better understand their brand positioning and creative
performance. As such, Sonder provides customised segmentation, and ad
tracking to ensure that businesses can grow based on market
insight.
Visual Design and Layout
Colour:
The colours used in the website are a bit scattered hence it is hard
to determine the exact colour palette. The menu bar, as well as the
loading screen between pages are in black. However, the rest of the
website utilises a few colours: blue, green, lilac, yellow, orange and
white.
Typography:
The primary typeface used in this website is "NeueHelveticaPro". Font
sizes vary according to headings, sub-headings, and body texts. Only
the word "SONDER" is spelled in entirely uppercase.
Imagery:
Considering the focus of the website, it's only reasonable that
there's not too much imagery going on. There are some simple photos,
videos and small graphics but it is overall a text centered design
layout. The loading screen has motion transitions that makes loading
seem smoother as we can see movement before switching
pages.
Functionality and Usability
Navigation:
The site is designed with very basic navigation buttons and
direct links. There's a prominent menu bar on the to right corner
with large texts and clear structure, which is fixed in spot even
when scrolling.
Interactive Elements:
When hovering on a text that is a direct link, the text or its
textbox changes colours to indicate that it is clickable. There are
also seamless transitions when scrolling through certain sections of
the website.
Quality and Relevance
The website is well done in terms of navigation and accessibility,
it works well and is Relatively easy to understand. The main menu is
well constructed and direct for website directions. However, It's
hard to say the same for the layout and design of the pages, as the
amount of colours and information boxes can be overwhelming to look
at. Although bright and bold, the colours do not benefit their
website for readibility. As for the relevance, the website pretty
much supplies any information that is needed for clients to
understanding the company. They provide sufficient images to support
texts that details their presentation.
Website Performance
The website is very smooth due to its low needs for performance features.
Some pages have more elements but still run well.
Conclusion/Summary
For a "Market Research" company, the quality of their website is
relevant to the information they aim to provide. There is not much of
a need to appeal in terms of design hence the website may seem less
modernised, and focuses on easy maintenance. The font sizes and page
performance is appropriate and easy to understand.
However, there is room for improvement in terms if layout and graphic
placement. Some pages are well designed while others are harder to
digest, with random patches of colours placed on the left and right
consecutively which seems a little messy. It would be better if they
used smaller textboxes to keep things neat, to direct user's
attentions to the highlighted text information.
