Interactive Design - Final Compilation and Reflection

25/04/2024- 0408/2024 (Week 1-Week 15)
Lizzie Tanaka (0362065)
Interactive Design | BDCM | Taylor's University
Final Compilation and Reflection

INSTRUCTIONS

Exercises

Task 1: CV Prototype

Task 2: Working Web Page

Task 3: Single Page Website

SUBMISSIONS

a. Exercises

I. Website Analysis

1. Basic Dept https://www.basicagency.com/

a. Home/Landing Page

Fig 2.1 Home page

Right off the bat, I noticed the cursor in this part of the page was a circle with instructions to watch the reel trailer. The video is played behind the circle but it is mute. To have the full reel experience, users can click on any part of the area and a video will play.

Fig 2.2 Playing video

While the video is playing, I noticed the timestamp is positioned at the bottom, it moves alongside the video but doesn't have a line like in other videos. I think this creates a more seamless look when people want to scroll down the web while the video is playing.

Fig 2.3 Hover feedback

Moving down, the whole design is very clean, minimalistic, and straightforward. They have the consistent hover feedback transition too: Zoomed out photo and underlined titles when hovered. When users hover in the area, photos are zoomed out just a bit and the text is underlined. It's not much of a transition, not overwhelming, but just enough to show users that they are hovering over something that can be clicked.

Fig 2.4 Engagement section

In this engagement part of their website, they use the same circle cursor again where users can click, hold, and drag to see the rest of the brands. It's simple and works just like a cursor but it definitely is something different and can interest the users.

Fig 2.5 Color scheme change

Scrolling down again, this part changes colors into a pink text and dark gray background. I think it's a good choice since this is probably where they want their users to click on the 'about us' button.

Fig 2.6 Featured News

On the last section of this page, the featured news takes place. They are consistent with their hover transitions, with the same zoomed out photo and underlined text when users hover in that area.

Fig 2.7 Footer

This footer part of their website is also very clear and straightforward. There's a space where users can sign up to their email subscription, where users can immediately email them, and other information such as social medias, initiatives, offices. I like how clear and concise this footer is.

Fig 2.8 Menu list

b. Works Page

The website uses one consistent hover transitions on texts: underlined texts. I do think this is very simple and minimal but it's clear enough for the users.

Fig 2.9 Works page

On their 'works' page, they provide three sections: services, industries, and all works. I love how clear this part is. users can find what services they have to offer in the 'services' section and they can find examples of the different industries that the agency has dabbled in before.

Fig 2.10 Filters feature

The 'all works' page even has a filter section where users can choose the service they are interested in and their industry of choice. I think this part is well thought of, it makes the whole process easier for users who have specific needs, rather than having to click on each project and find what they need.

Fig 2.11 Example of a project page

When users first click on a project, this is the first thing they see. The title is written in a big size, clear and straightforward. There is a short description of the project focus. The background is changed into another color (not white unlike the other pages). Other project pages also follow the project's color to fit in the background. When users scroll down to read a text, the background changes into white and the text into black. I think this is considerate towards accessibility since reading on black is not as comfortable as reading on white.

Fig 2.12 Text layout

When reading their process, I do appreciate how concise their texts are. Scrolling down, I noticed that their texts aren't lengthy, just enough. Even the font size is appropriate and not too small and narrow.

Fig 2.13 Consistency in videos

For this particular project, they included a video, which follows the same consistent design and transitions like their reel trailer; a circle cursor that can be clicked to watch the video clearly.

Fig 2.14 Example of explanation

This is an example of the explanation of process, a very short, clear and concise text. Not much to read but they did include more pictures. I find that the positioning of the photos are interesting, not aligned to one side or one position but is placed a little 'random'. I think this part where there is many photos are quite interesting for the users since it feels fun. At the end of one project, they also provided instructions that said 'scroll for next section.' This is an interesting take, rather than directing the users to go back, they urge the users to scroll down to see another project. However, probably my only problem with this is you can't scroll back up to the first project you clicked on.

c. About Page

Fig 2.15 Hover feedback on pictures

Moving to the 'about' page, things are mostly the same except for two. First is this picture section where users can hover on the picture and it will come up to the front.

Second is their awards section, where users can hover on the award name and a picture will appear. Really great and it feels fun for the users.

Fig 2.16 Hover feedback on award sections

When the texts are clicked, a side tab is opened where the data is presented very clearly and straightforward.

Fig 2.17 Full list layout and organization of awards

d. News Page

On their news section, the hover transition is the same: zoomed out photo and underlined text. I really appreciate their filter feature here, when the users hover, there is a smaller black circle inside the bigger circle. Again, very simple but is impactful.

Fig 2.18 News page

Fig 2.19 Hover feedback on news page

e. Career Page

Below is the hover transition they kept consistent throughout the buttons; an outlined frame and a filled frame after hover.

Fig 2.20 Before hover

Fig 2.21 After hover

f. Conclusion

Purpose and Goals

The website is to attract potential clients and I think with the way everything is organized, it is definitely effective. For all of the pages, they stayed consistent with their design style. The whole web is very well thought of in terms of visual aspects, it's clean and minimalistic, very straightforward to the users.

Functionality, Usability, Quality, Relevance, Performance

Not only is it visually pleasing, I think it's very easy to navigate around and isn't confusing with the neat organization of contents. The overall performance is also good, despite having photos and videos with HD quality. Sometimes the videos lag a bit and show only black, but I personally don't think it's a bother. Each buttons are responsive and not laggy, even when scrolling the web is smooth. On a smartphone, the web is still smooth and responsive, retaining their same style. The only big difference they made is giving a side tab for their menu which is collapsible.

Strength and Weakness

I think one of their strengths is how their website can still be very straightforward and informative but can include some 'fun' interactives. It's a minimal interactive but it definitely makes people more interested. For their weakness, I personally don't feel like there is any weakness that impacts a lot for their website except when the color of the pages changes suddenly, it's quite surprising. Getting your eyes used to reading in a certain color scheme and then suddenly change it to a darker or brighter scheme.

2. Haus https://madeinhaus.com/

a. Home/Landing Page

Fig 3.1 Landing page

Immediately after seeing the landing page, I liked the whole design aspect and the typography but what interested me so much was the interaction. While hovering around, these pictures showed up, no matter how little I moved my cursor, more pictures appear. When users click on the page, it switches to another color and another text. This alone already gave me a gist on how fun the whole agency is.

Fig 3.2 Hover feedback on landing page example

Scrolling down, the web explains to the users what Haus is. The color changes to a more neutral one, allowing the users to read clearly. I do notice though, the website uses big transitions, unlike Basic Dept's website which uses more minimal transitions on hovers. For example, when I hover on the Haus' logo, the circle filled with black and the whole site changed to a bright neon yellow. On the menu list, when I hovered on one of them, the text turns italic and the whole page turns to a certain color. Each menu when hovered triggers a different color, in this case it turns to purple.

Fig 3.3 Color scheme change

Fig 3.4 Hover feedback on logo

Fig 3.5 Hover feedback on menu list (clicking on 'about')

I've also noticed that the letters keep on changing and when we hover on certain things, an object appears too. In this case it's a statement about the brand they're working with.

Fig 3.6 Typography work and hover feedback (bubble text)

Fig 3.7 Example of the photo of the brand on the title

To introduce the new projects they're working with, this part has the picture moving up and down as users scroll while the background itself stays put and only the text changes into the brands' respective names. I find this very interesting and unique.