Interactive Design / Bachelor of Design (Hons) in Creative Media
TABLE OF CONTENTS
2. Exercise
4. Reflection
INSTRUCTIONS
For the first task of this module, we were instructed to analyze 5 different websites and review its design, layout, content, and functionality. We also had to identify its strengths and weaknesses, as well as its impact on user experience. The chosen website should be taken from the following sites:
EXERCISE
Week 1 / Analysis
|
| Fig 1.1 GRAPHICHUNTERS Website Entrance Animation |
Purpose & Goals - GRAPHICHUNTERS is a design studio that specializes in designs around sports – helping brands to create their identities, campaigns, and products. I think that their website is able to showcase all this clearly with how all their content is laid out. Right from the get go, you are introduced to their best project, which acts as a great promotion by immediately showcasing the quality of service they provide. As you scroll down, you can get into more detail with more information and previous works displayed.
Visual Design - The overall design is quite bold with a strong color palette and variety in text size. However, there are too many fonts used throughout the whole site which is throwing off the visual consistency. The design choices itself really reflects on the whole sporty theme that the studio is about. They also used an adequate amount of spacing to let the elements stand out without making the page feel empty.
|
| Fig 1.2 Multiple Fonts in One Section |
This might be a bit nit-picky, but I don’t really like the different sizes used for the works’ thumbnails. Due to the different sizes, it leaves patches of negative space. It could be seen as a creative choice, but I’d prefer it if everything was aligned for a neater look. In addition, at the end of the site, another work is placed there which didn’t make much sense to me.
|
| Fig 1.3 Patches of Negative Space |
|
| Fig 1.4 Odd Project Placement |
Functionality & Usability - The website has some interactive features, like a parallax-like movement when scrolling and how some pictures will pop as you hover over them. I also find the website to be easy to navigate. On desktop, one thing I noticed was that a navigation bar was given when scrolling quickly. On the other hand, mobile devices have a hamburger menu which leads into a navigation menu.
|
| Fig 1.5 Parallax Animation & Navigation Bar |
Quality & Relevance - Overall, the content is relevant to their work and is able to highlight their strengths well. Everything fits their niche and its done in a clear and organized manner. It doesn't overwhelm users with crazy visuals or huge walls of text which is a great thing to take note of.
Performance - Surprisingly, the website’s performance is really good. Despite the amount of high-quality images and motion graphics used, everything loads quickly. However, when viewed on smaller devices, they don’t translate well due to the dimensions of some images, leaving blank spaces in between content. In addition, because the portrait orientation changes the text format, some animations went missing as a result. However, the layout adjustments done to accommodate the change doesn’t obstruct the experience which was great.
|
| Fig 1.6 Mobile Display |
|
| Fig 1.7 VISUALBUSINESS Menu |
Purpose & Goals - VISUALBUSINESS is a production and modelling studio, and they use this website to promote and showcase their works. You can tell what they are about from the start, as their website highlights their work through a clean presentation right as you open the site.
Visual Design - The design of their website is very modern and minimalistic. The main color palette is in black and white and uses only sans serif fonts. It is clear that they wanted to emphasize their works, and this was easily achieved with their color choice and limited use of text throughout the site. The images used are also high quality and well selected, making it look like a modelling catalog.
|
| Fig 1.8 Models Page |
Just like the previous website, this is just personal preference, but I also don't really like the random patches of negative space, especially in their ‘works’ page. But this time, the placements do feel a bit more intentional, which some people might appreciate more.
|
| Fig 1.9 Patches of Negative Space |
Functionality & Usability - The website’s features are simple and direct, making the user experience seamless. They highlight only the essentials that you’d expect from such studios, like their projects, models, and contact. As you scroll through the website, you get this optical distortion effect, as if the website is seen through a fisheye lens. This effect is also seen when you hover over the pictures in the site.
|
| Fig 1.10 Optical Distortion when Scrolling |
Quality & Relevance - The content and design of the website are minimal, but everything is done with intention – highlight the studio’s works without distraction. Even if the writing is limited, it is able to communicate their strengths and quality as a studio.
Performance - The website performs smoothly, which is expected with a simpler design. The load times are quick and all the interactive features work well without lag. On mobile devices, all the features run smoothly too which was great.
|
| Fig 1.11 Mobile Display |
|
| Fig 1.12 Topology Website Entrance Animation |
Purpose & Goals - Topology is a company that invests in AI, decentralized systems, and neurotech. Their website explains what they're about and what it is they do, but I do find their descriptions to be quite vague. The first time I scanned through the website, I had no idea what they were about until I started properly reading its content.
|
| Fig 1.13 About Page |
Visual Design - The design is very clean with a futuristic look to it. The website is mainly in black and white, with use of chromatic aberration effects at the start and end of the website. Overall, I like the elements in the website, but I think it could use some more visual elements, especially inside the content to make it more engaging. They also show what projects they have partnered with, but again, with the lack of visuals throughout the site, there is nothing that really grabs your attention.
|
| Fig 1.14 Portfolio Animation |
Functionality & Usability - The site is easy to navigate as you only need to scroll to view all its contents. There are navigation features that speed up the process or if you want to look for certain information. One cool feature is when you hover your mouse on the white parts of the site, it slightly affects the movement of the background.
Quality & Relevance - The quality of this website is amazing, especially with the interactive features in it. However, I’m afraid that the design and displayed information lacks relevance and barely communicates what the message of the website is really about.
Performance - The performance of the website is surprisingly well. There are a few subtle lags sometimes when it first loads, but afterwards it runs smoothly both on desktop and mobile.
|
| Fig 1.15 Mobile Display |
|
| Fig 1.16 Dgrees Home Page & Hover Effects |
Purpose & Goals - Degrees is a studio that helps brands create web design and development, digital branding, digital experiences (interactive features), and content strategy. Like the previous sites, they also display their works right from the start and that got me interested in what services they provide.
Visual Design - Design-wise, the website is colorful with a mix of clean and loud, and I find that to be a great fit for the studio. The colors palette is actually just black, white, and orange, but with the different projects they have and icons used, the site is filled with multiple colors. I think this fits the studio well since it reflects their flexibility and ability to manage different projects. As for the texts, I think that they used hierarchy well to emphasize certain parts and help guide the eye.
%20(1).gif)
|
| Fig 1.17 Works Page |
Functionality & Usability - There are lots of interactive features in the website, mainly activated when you hover over elements with your mouse. You can see it with distortions in the home page and the change of backgrounds in the works page. The way images transition as you scroll in certain segments also look really cool. Despite all of that, it doesn’t hinder the user experience, except for the work page which could shock some people when they first open it with colors flashing.
|
| Fig 1.18 Image Transition Effect |
Quality & Relevance - The content of the website is well made and overall relevant to their service. All of their projects are displayed with great quality and with the right amount of text. In some of the works however, I do wish that they put in a bit more text to explain their process or what the picture is about to make it not so image-heavy.
Performance - The performance is overall smooth, except the lag you might experience when you first load the website. Afterwards, everything ran smoothly in desktop and mobile. Some features when hovering with the mouse is unavailable in mobile though which was quite a shame since it looked cool on desktop.
|
| Fig 1.19 Mobile Display |
|
| Fig 1.20 AW Portfolio Home Page |
Purpose & Goals - This website is French developer Alice Wodniak’s portfolio, where her user experience works are displayed. Her website showcases her skills and displays it both in content and the website itself. You can tell that she knows her stuff with the interactions and the great use of 3D effects in the site.
|
| Fig 1.21 About Page |
Visual Design - The design itself is very strong with its red and black color palette as well as its bold font choice, and has this Y2K-inspired illustration style. The text portion is quite minimal with just grids and some icons as its visual elements, but I do feel like the design is carried by the bold color choice, simply because you don’t see that in most websites.
However, from a design perspective, personally I wouldn’t say that the website design is the strongest. It is memorable, but it feels as if the design was an afterthought to its technical features. But from another perspective, you could say that she wants to emphasize her coding abilities which definitely shows throughout the site.
Functionality & Usability - The website is easy to navigate since you can scroll continuously to view all the content. There are also jump links from the home page that allows you to skip to segments you’re looking for. Some parts of the site are also interactive, with animations popping when you hover your mouse over it. In mobile however, you need to click for those animations to appear.
|
| Fig 1.22 Hover Effect |
Quality & Relevance - The content of the website is great and it does a good job of highlighting her abilities as a developer. One thing that could help would be a short description for the showcased works so that there’s a better introduction to her work. Although, given the way the works page is set up, that might be a bit awkward to do.
|
| Fig 1.23 Lack of Description |
Performance - The website works smoothly, but there are noticeable lags when you first load it, likely because of the heavy animations and 3D effects. There are also some stutters when you scroll too quickly. Other than that, mobile and desktop can run the website smoothly.
|
| Fig 1.24 Mobile Display |
FEEDBACK
REFLECTION