Interactive Design | Exercises

on

24/04/2024- __/05/2024 (Week 1-Week 4)
Lizzie Tanaka (0362065)
Interactive Design | BDCM | Taylor's University
Exercise 1: Website Analysis

Lectures

Week 1

On week 1, we were briefed on all our tasks and was introduced to the 5 key principles of usability. 

Fig 1.1 PPT; 5 Key Principles of Usability (Week 1)

Week 2
On week 2, we did a group task where each group would make a paper prototype based on a given scenario. My group got to redesign a learning management system, so we decided to redesign the myTimes website. 

Fig 1.2 Pages on our paper prototype (Week 2)

Unfortunately, our group didn't read the instructions clearly so we didn't design the prototype to have a task done, we intended for the testers to explore the website. Nonetheless, throughout this session, I learned a lot from other groups' results. 
(We ended up adding another page to submit the assignments but isn't included in the picture)

Week 3
This week, Mr. Shamsul taught us about website and its structure. 

In a website, the header comes first on top to give users the main navigation of the web, it can contain important information. The body, which comes second, contains all the main contents and the design and layout of a website's body should be well-thought to ensure readability. Last is the footer, which goes on the bottom of the website. It closes the website and provides users with navigation option.

Slides: 
Fig 1.3


Week 4: 
Mr Shamsul taught us the basics of HTML. Here is the slides: 


Fig 1.4
 
In HTML there is elements <element>information</element>

<p> Opening tag
</p> Closing tag 

Attribute: additional info about the element. 
e.g. <p lang="eng-us">Paragraph in English</p> (lang is attribute, "..." is attribute value)

Some html needs an attribute to work but not always the case.

Headings
- 6 headings; H1 is the biggest, H6 is the smallest
e.g. <h1>This is a main heading</h1>

No need to bold your heading, its bold by default. 
Body
<body> all your content
- use <p> and </p> for paragraph
- <b> and </b> for bold
- <i> and </i> for italic 

e.g.
<p>Inside a product description you might see more<b>key features</b> in bold</p>

Title
<title>
Lists
Ordered list <ol>
Unordered list <ul>
<li> is LIST ITEM 

Example: ordered list (numbered)
<ol>
    <li>Chop potatoes into quarters</li>
    <li>Simmer in salted water for 15-20 minutes until tender</li>
    <li>Heat milk, butter and nutmeg</li>
    <li>Drain potatoes and mash</li>
    <li>Mix in the milk mixture</li>
</ol>

Example: unordered list (bullet points)
<ul>
    <li>1kg King Edward potatoes</li>
    <li>100ml milk</li>
    <li>Freshly grated nutmeg</li>
    <li>Salt and pepper to taste</li>
</ul>

Nested list example: on a dropdown menu. Menu is created using list html & use css to change the style. 
Fig 1.5  Nested list

Links
<a> and </a>
Specify the link with attribute href 

e.g.
<a href=“http://www.imdb.com”>IMDB</a>

Linking to image using <img/> (single tag, no closing tag) 
attribute to
1. src: the path to our image
2. alt: alt text
3. title: title of image

"image folder name/file name.fileformat" 

width="..." 
target="_blank" (redirect to new tab)

Fig 1.6 HTML for image


Fig 1.7 HTML 


Week 5 - ID & Class 
- ID; can use to link to other section of the page
- cannot apply width or height to <a, only to block level elements. 
- & have to use &amp;

On week 5, we continued on our previous 'about me' blog and worked around making a table in html. This time, we tried it in Adobe Dreamweaver. We also explore more attributes to our html. 

Fig 1.8 Table with HTML 


Fig 1.9 Slides on ID and Class

Week 6 - CSS
separate by ; semicolon and end with : colon

Week 7 - CSS
We learned about CSS Selectors:

Fig 1.10 CSS Selectors

Instructions

In exercise 1, we are to analyze two websites and comment on various aspects of it such as the web's performance, the visual aspects and aesthetics and the overall experience of it. 

Exercise 1

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. 

b. Works Page

Clicking at their works' page, the layout is rather simple and not as playful. I think this is a great approach too since this is the one part where most potential clients would spend the most time in. However, I noticed at the bottom, they insert a text that acts as a button to go to the next page and when users reach that page area, the color of the page changes into a certain color. The color is the same as when we hover on the menu list. In fig 0.0, I hovered on 'about' and the page changes to purple, here the page is urging me to visit their 'about' page and when I reach this part, the page turns purple as well. 

Fig 3.8 Works page


Fig 3.9 End of the page

I finally noticed one consistent hover feedback: the statement bubble. They use this a lot, even when the page is loading, the bubble text changes to 'loading'. Here, when I hover on one of the projects, the boxes are more rounded, the bubble text appears, and the title has a slide up transition. I've also noticed that some projects are highlighted 'featured partnership.' Again, I think of this as a good approach to attract more clients since this is a partnership with bigger brands. 

Fig 3.10 Hover feedback on each project's area

When the project is clicked, the layout is neat and simple, not as playful too, except for the bubble texts when hovering on the pictures. I'd like to think that keeping the bubble text effect throughout the website adds to a more playful feel, even when the layout and organization feels more rigid. Each project page is ended with another fun typography button to urge users to the next project. 

Fig 3.11 Layout in each project page

c. About Page 

On the 'about' page, they have a consistent typography title and color, with these pictures that when clicked will change to another object. I've also noticed that when users click on a menu list, the letters disappear one by one and then the new page will start by the letters appearing one by one as well. 

Fig 3.12 About page; title

I particularly find myself liking this layout when explaining about their services. They kept it consistent with this layout throughout the about page, with the same hover effects. It's neat, straight to the point, interactive enough. 

Fig 3.13 Layout in about page

d. Partnership Page

In the partnership page, I've finally noticed that they used the same font for buttons. They only strictly use this font on buttons, not anything else. I think it's great because the script font goes against the sans serif and catches people attention. Even though, the colors are the same, I think it still stood out quite okay. 

Fig 3.14 Different font on buttons


When they include moving pictures like these, they automatically move to the side slowly but the users are able to slide on their own pace. I find this feature quite smart since not everyone wants to wait and watch a slow slideshow on pictures. Although, this is where I find the first issue. Some of the assets here are like stock videos that are like a few seconds and while the slideshow is moving, sometimes the videos are laggy.

Fig 3.15 Slideshow of photos and short videos

e. Career Page

It's in this career page where I find that when users select on the text, instead of the usual blue background, it is a neon yellow. And this is where I also realized that they used the same script font on texts that they want to highlight but isn't the main point, as seen as in 'current openings.'


Fig 3.16 Career openings section

Probably the most unique section yet; the team members (I assume). It's a very unique take, rather than the usual pictures, names, and position. They made this more of an interactive where the users can click and drag around and the repetitions will appear. 

Fig 3.17 Team members section

f. Contact Page

On their contact page is also this unique take on displaying their locations. When hovered, some alphabets turn into a playful one, turns into black, and photos related to the place appears, with the bubble text too for the address. I've also noticed that the transition of the address in the bubble starts from random letters until it forms the address. 

Fig 3.18 Contact page; hover feedback

The footer is also very clear and concise, not playful at all but is highly functional.

Fig 3.19 Footer

The last thing I noticed in this website is the menu list that seems to blend in with the objects underneath them when we scroll. Sometimes it's readable, but when the objects have many colors, it's less readable. However, I think it's not really an issue. 

Fig 3.20 Menu list when users are scrolling

g. Conclusion

Purpose and Goals
I think that the main purpose of this website is to display their best works to potential partnerships and brands with the approach of 'fun.' I really enjoyed how their website was a perfect balance of neat organization of information and fun, playful interactives. They kept it consistent with only some parts being playful, such as the titles and preserving it throughout the colors of each page and transitions. They kept it rigid and formal on the more important sections such as the main texts where there are explanations offered. I particularly find their imagery unique, with some of them using an object cutout that's more playful. Aside from that, their typography choices on the titles are so unique, the changing alphabets, the animated letters and more. 

Functionality and Usability
The website is overall still very much functional and is efficient. It's easy to navigate, despite the many transitions, it's pretty straightforward. I think the interactive elements are my favorite in this website, it's very fun and interesting, balancing the rigidness of the main content. 

Quality and Relevance, Website Performance
Every content is also organized very neatly in the layout, it's easy to read and understand the flow in every page. Lastly, even with the heavy animations from the interactives, I find that the website's performance is excellent. It's not slow when loading pages, videos and photos also load quickly, each scroll and click on interactives are also smooth and seamless. 

Strength and Weakness
In my opinion, this website's main strength is the playfulness of it. It's unique to have an agency that is supposedly 'strict' have a website that has a lot of playfulness to it. I think it makes them stand out between their competitors. The layout is minimalist, their logo is minimalist but their website is a little maximalist. To be honest, I don't think I have any issue with this website. It's very well made. 



Exercise 2: Web Replication

For the second exercise, we were tasked to replicate 2 websites given by Mr Shamsul. We are to do this in Adobe Illustrator. 

Process: Morgan Stanley

The text part is done normally while the pictures, I put rectangles first and find the pictures from Pexels. I used clipping mask to make sure each picture is in the same size as the one in the original website. There are several things I did to achieve a similar website. 

To begin, I followed Mr Shamsul's instruction to fit the artboard to my screenshot. I then set this layer to a template layer with 50% opacity and locked it. This is so that the reference wouldn't move around while I adjusted things. 

Font used: Karla (Google Fonts)

Fig 4.1 Template layer

Fig 4.2 Progress

Since there are many pictures used in this page, I covered all pictures using a rectangle. Once I was done with all the text part, I looked for related pictures in Pexels and clipped mask the picture with the rectangle. This way, the size are all the same without the pictures being weirdly distorted. I downloaded the small sized pictures for these parts since the sizes are small. The headline image is the larger sized. 

Fig 4.3 Clipping mask

For the quotation mark in the page, I used pen tool to trace it. 


Fig 4.4 Quotation mark

The footer of the screnshotted version was different to the actual website since it was kind of squished (?) by the inspect bar. I had to go screenshot the actual website (top picture of fig 0.0). Because of this, I decided to adjust it accordingly (third picture) so that it looks organized. 


Fig 4.5 Adjustments on footer

Fig 0.0 is how I did the privacy toggle on the footer. I used a rectangle and rounded off the edges. Then I created this shape (the diagonal blue part inside) that goes beyond the cylinder shape. I used shape builder to delete excess area. I think it would take more time to trace the blue shape neatly. I used pen tool to create the tick and the cross. 

Fig 4.6 Privacy toggle



Process: Bandit

Similar to the Morgan Stanley website, I fit the artboard to the screenshot first. Then, I changed the layer to a template layer. 
Font used: Neue Haas Grotesk (Adobe Fonts)

Fig 5.1 Progress on Bandit


However, there was an issue where this bar for cookies & privacy kept on showing on my screenshot even though in the website I didn't even get this bar. I screenshotted several times and even reloading the website multiple times but nothing changed. I screenshotted this part only and overlapped it with the rest of the web (as seen in fig 0.0). 

Fig 5.2 Issue on the privacy settings

Fig 5.3 Resolved issue


Before starting out on the text, I started to make this arrow first. I followed Mr Shamsul's direction too. I started from a regular circle and then delete 2 anchor points to make a quarter shaped stroke. I copied this and rotated & reflected the other curve before adding the line. When in use, this is a stroke where the stroke thickness can be adjusted accordingly. 

Fig 5.4 Arrow

Another issue I had was finding the picture for the product catalog. I found this picture in Unsplash. However, the color of the product is inaccurate so I decided to trace the object and change the color to my desired color. I then lowered the opacity so that the texture of the original object would still be seen subtly. I also did this for the navy colored one. 

Fig 5.5 Recoloring

For the membership part, I attempted to do a 3D in Illustrator but the function somehow didn't work (?), there was a popup bar that told me it wasn't functioning. So I just did the gradient part on the text. For the background, I overlapped a pastel-colored hologram background with a lowered opacity black rectangle so that it would look darker. 

Fig 5.6 Membership & background

For the logomark of Bandit, I just traced over it. 

Fig 5.7 Bandit logo

The spacing on the right side of my screenshotted website was also unequal with the left one (it had no white space). I had to resize some things to make it look like it's equal. For the social media logos, since the icons were all in black, I had to change its color. I used the image trace and expand tool in Illustrator and then changed it to the desired color. 



Final Result
Fig 6.1 Morgan Stanley - Replicated JPG

Fig 6.2 Comparison of Morgan Stanley's website
Left - Original
Right - Replicated

Fig 6.3 Bandit Running - Replicated JPG 

Fig 6.4 Comparison of Bandit Running website
Left - Original
Right - Replicated

Fig 6.5 Final Replicated Website - PDF (Week 4)


HTML

On week 4, Mr Shamsul introduced us to HTML. We had to make a basic website with our information and upload it through Netlify. Below is the HTML we did in class.

Fig 7.1 HTML

Final result: lizzie-exercise3.netlify.app

HTML & CSS (Week 7)

Fig 7.2 Final website exercise

On week 7, Mr Shamsul taught us how to do CSS on another file and connect it to our HTML file. 

Access the website through this link: 
About My Life - Exercise

Exercise 3: Recipe Card 


Before I start explaining, I'd like to say if any of the html and css code screenshots are not the same as the one in the 'inspect' page of my web, it's because I accidentally deleted the CSS file after I exported it to Netlify. I had to redo it and not all can be the exactly the same. 

To start the project, I made the content first such as the title, the ingredients, the instructions. And then I inserted the pictures. I used the <div> tag to group the pictures and manually made sure the width and height are equal. I aligned it to the center as well. I was happy with the distance between each pictures on default so I didn't change it. 

Fig 8.1 Pictures

For the title, I used the <h1> tag, the subheadings used <h2> tag. Each headings use the font 'BioRhyme' that I retrieved from Google Fonts using the embed code. 

insert img. 

Navigation Bar:

Fig 8.2 Nav bar

I also used the <div> tag to group the bar. For each of the button, I put it inside an <li> tag and added class to it. 

Fig 8.3 HTML for nav bar

On the CSS, I used the float style so it stays on the top right side of the web. I used the list-style-type style here too and change it to 'none' so it becomes an inline element. Padding is increased so each item will have space between them. 

Fig 8.4 CSS for nav bar


Tips and Tricks:

I decided to add the tips section from the website, just to add more content on the recipe card. I wanted this section to be divided into two columns. 

Fig 8.5 Outcome for tips and tricks

To achieve the 2 columns, I used <div> tag to group all the tips and used another <div> tag to separate into left and right columns. For every title of the tip, I used the <li> tag so it would have the bullet list. However, for the content, I used <p>. This is because I wanted the content to be under the heading. I also added the class 'tipslist' for the headings since I wanted to add background color only to the heading part. 

Fig 8.6  HTML for left column

Fig 8.7 HTML for right column

On the CSS, I used the float style on 'left' and 'right' to made sure they stay on one side, I also reduced the width so that it doesn't stick to each other. The headings just have the background color and the padding. 

Fig 8.8 CSS for tips and tricks

For the ingredients and instructions section, I also wanted it to be divided into 2 columns. Similar to the tips section, I also use the <div> tag to separate it into different groups and in the CSS, I also used the float style to position it. 

Ingredients:

Fig 8.9 Ingredients section

The HTML is just the <div>, the title <h2> and the <li> content. I also added the cardamom pods image since I thought it would help viewers to know what a cardamom pod is. I set the width of the image here. 

Fig 8.10 HTML for ingredients


I had a hard time adjusting the image. This was how the image looked like. The uneven top and bottom spacing here bothers me and I couldn't add a space on the bottom of the picture. I tried adding a <br> tag, since it worked on the top part. Eventually, I added an id to it and adjusted it in CSS using margin-bottom. I also resized the weight to 150px.

Fig 8.11 Spacing issue

Fig 8.12 CSS for image

Fig 8.13 CSS for ingredients

Instructions: 

Fig 8.14 Instructions

The HTML is the same with the ingredients section, just with no picture. I added a <br> tag after each <li> to add spacing. 

Fig 8.15 HTML for Instructions

The CSS is also similar to the ingredients section. 

Fig 8.16 CSS for Instructions

Credits:
8.17 Credit

For the credit section, I used the <a> tag and href attribute and target attribute to redirect the link to a new tab. 

Fig 8.18 HTML for credit

The margin-top amount is big since it kept on staying under the tips section. I decided to put it inside a <div> and adjusted the margin-top. 

Fig 8.20 Credit before <div>

Below is the CSS code after the <div>. 

Fig 8.21 CSS for credit


Fig 8.22 Final web screenshot


Access the final result:
Recipe Card

Reflections

I feel like these exercises really helped to introduce me to website design in general. Learning about HTML and CSS is quite interesting as a first-timer. So far, I feel like I can catch up and hopefully so until the end of the semester. 

I've learned a lot through these exercises and I'm sure all of these will help me in the future projects. 

Comments

Post a Comment