Interactive Design

24/4/2024 - 1/5/2024 (Week 1 - Week 2)

Aisya Diva Anwagodsa (0365505)

Interactive Design / Bachelor of Design (Hons) in Creative Media

Task 1/Exercises

JUMPLINK

Exercise 2

LECTURES

Week 1

Usability: Design Products for User Satisfaction

Usability refers to the effectiveness, efficiency, and how successfully a particular user can utilize a product or design in a certain situation. Design usability depends on how well its features accommodate users' needs and context.

Five Principles of Usability:

Consistency: Ensuring that the website looks coherent and works harmoniously across all its different elements, such as headers, footers, sidebars, and navigation bars. An example of consistency in a web design can be seen on these websites (Apple, Sime Darby, 153joombas)
Simplicity: It is used to minimize the number of steps involved in a process and helping the users to achieve their goals efficiently.
Visibility: Helping users to recognize the feature, because if a website's features are out of sight, it will be hard for the user to maximize the website's function.
Feedback: Results of any interaction, making both perspectives visible and understandable. Its job is to give the user a signal that they (or the product) have succeeded or failed at performing the task.
Error prevention: Alerting users when they are making an error, the intention is to make the user aware and doing their job without making a mistake.

Week 2 - 3

In week 2, we learn about the website's anatomy. Mr. Shamsul gave us an article to read.

The article mainly talked about the basic elements of the website.

Fig. 1.1 Website Anatomy

Fig. 1.2 Website anatomy

The pictures above might not contain all of the elements mentioned, but I attached them as an exercise to identify parts of the website. For detailed examples refer to article.

Header, the upper (top) part of the webpage. This is one of the important elements because the header will be the first thing people will look at when they open the website. The header usually contains elements like brand identity, call-to-action button, information, search field, etc.
A CTA Button, or a call-to-action button, is an element of a user interface that encourages a user to take a certain action. This action presents a conversion for a particular page or screen (for example, buy, contact, subscribe, etc.). In other words, it turns a passive user into an active one. So, technically it can be any type of button that is supported with a call-to-action text.
Hero Section is the above-the-fold (pre-scroll area of the web page containing the element that presents the strong visual hook: a hero image, slider, catchy piece of typography, video, or anything else attracting visitors’ attention and transfers a needed message to them. Make no mistake, the term doesn’t require that all images of this kind should include a human, animal, mascot, or any other kind of character. Don’t get tricked over with that “hero” part.
Footer is the lower (bottom) part of the web page which usually marks its end. Being another common zone of global website navigation, the footer provides the additional field for useful links and data users may be interested in finding. Footer usually contains social media icons, contact, brand identity, etc.
Slider is an interactive element that applies a technique of a slideshow or carousel to present different products, offers, etc. It is especially popular as a part of e-commerce and business websites to present a sort of gallery of products or services.
Search is a functionality that enables a visitor to browse the content inside the website and shows it according to the search query. Tuned correctly, it shows the relevant content, and this way provides the shortcut to what the user needs. Thus, the internal search saves the user’s time and effort, amplifies usability and desirability of the digital product, helps retain users, and increases conversion rates.
Menu, one of the core navigation elements in user interfaces. It is a graphical control that presents the options of interactions with the interface. Basically, it can be the list of commands – in this case, options will be presented with verbs marking possible actions like, for example, “save,” “delete,” “buy,” “send,” etc.
Breadcrumbs are navigation elements used to support users in a journey around the website: they get aware of where they are on the website and can get used to the website structure more easily. So, breadcrumbs present a tool for better wayfinding, yet, they don’t replace the primary navigation menu; they present the secondary level of navigation and increase website usability in case it has lots of pages.
Form is an interactive element that allows users to send information to the system or server. In a nutshell, it is a digital version of any real paper form we have to fill in to provide someone with the arranged information; however, digital forms can have more options and functionality to make this process even more smooth, clear, and user-friendly.
Cards or known as tiles, are layout elements that help arrange and visualize homogenous data or content in a scannable and easy-to-use way.
Video is not a really basic part of a web page, but with the progress of web development solutions and technical abilities, we can find it more and more often on the website of different kinds these days.
Progress Indicator is a small but helpful element that helps the visitor to understand the current point in the general volume of information or set of actions. It is beneficial on the pages loaded with text content and supposing long scrolling, like long-read articles or guides. I think this feature is very helpful for reader, because they can track their reading.
Favicon also known as URL icon or bookmark icon, is a special type of symbol representing the product or brand in the URL-line of the browser and in the bookmark tab. It allows users to get a quick visual connection with it while they are browsing.
Tags are presented with a keyword or phrase that enables users to jump directly to the items marked up with it. Tags are actually pieces of metadata that provide quick access to specific content categories, so they support navigation with the additional way of content classification.

Week 4

In week 4 we learned about web standards. Mr. Shamsul provided ppt slide with detailed information regarding elements, structure, tags, and lists, basically most of the things that we can use to build a website. I realize that before learning interactive design I already used some of the elements for example < br > for giving a gap between sections, or simply when we press enter we basically use < br >. Also tags for creating jump links that will lead us to certain parts of the website or blogs.

width="640" height="480" allow="autoplay"></iframe>

Elements that we can use in HTML

<p> opening tag

</p> closing tag

<p></p> are tags that we can use if want to create a paragraph, this also applies if we want to make a heading, <h1></h1> for the main heading and continue until <h6></h6> which the smallest heading.

other elements that we can use are list, which require us to use order list <ol>, unorder list <ul>, and list items <li>

numbered list/order list. We can put instruction between the tags, for example:

<ol>

</ol>

numbered list/order list. We can put instruction between the tags, for example:

<ul>

<li>three</li>

</ul>

There are also links, that will direct us to certain pages, parts, and websites. Depending on the purpose. For example, if we wanted to embed a link into a word, we could go with

<a href="http://www.links.com">Link</a>.

Week 5 - 7

This chapter. we'll start to learn how to use HTML and CSS, at first Mr. Shamsul taught us how to use HTML to create a simple website.

width="640" height="480" allow="autoplay"></iframe>

We also practice to create a simple website. We learned how to align text, insert images, embed links, etc. We were also learning how to create a table and style it using ID and class attributes.

this is one of the exercises that I did in class:

Fig. 1.3 HTML exercise

Fig. 1.4 HTML exercise

We were taught to create HTML documents on Dreamweaver and link it into our folder where we store all of the images that we want to put onto the website. We were using tags, links, also learn how to put text on the right or left side.

Fig. 1.5 Styling a table using class attribute.

Fig. 1.6 Styling a table using class attribute.

After learning about HTML we learned how to apply ID and class attributes. The class attribute can be used to apply color, adjust the margin, and basically style the element on our website.

🔝

INSTRUCTION

Write your report in e-portfolio

Choose TWO (2) 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.

🔝

Week 1 - Web Analysis

Website 1: https://www.lyon-beton.com/

About Website:

Lyon-Beton is a website that showcases its furniture products. They provided furniture that has a concrete style and explores the combination of geometric shapes that can be a philosophy of life, such as the De Stijl school, Brutalism, Art Deco, etc.

Here is the quick look of the website:

Fig. 1.1 Lyon-Beton Homepage

(1/5/2024)

Purpose & Goals

Lyon Beton is a website that provides a service of custom furniture and unique furniture that carries bold and minimalist aspects. They also have a great vision of furniture usage, where they do not want to create furniture that only follows trends, but they want to make something that is timeless and strong for a long period. This website is dedicated to attracting more buyers and introducing their concept to more people.

Visual Design & Layout:

Fig. 1.2 Lyon-Beton Layout
(1/5/2024)

Lyon-Beton has a minimalist and eye-pleasing appearance. They optimized the layouts by using a monochrome theme and big fonts to lead our sight into the product pictures. Looking into the layout of the article, they applied the different concepts, because there are only a few pictures so people can be focused on the text. The minimalist concept that they used was attractive, and the placement was on point. As a user, I would like to come back to the website and maybe buy something from it.

Functionally and Usability:

Fig. 1.2 Fuction And Usability
(30/5/2024)

Because most of the website uses monochrome color, It was surprising to see green color pop up on the search bar, but it suited the theme of the website. They also balance the minimalist theme with interactive features such as moving pictures or animated icons. One thing that I noticed was, that they added a unique scroll bar on the right side to make user easy to scroll down to the end of the page because on some websites we might find a boring grey scroll bar, instead of green colored scroll bar. This website also provided information such as contact number, address, social media, etc. Also, the font selection was smart, it complements each element on the website, so the website creates a harmonious look and gives users a good experience.

Content Quality & Relevance:

Fig. 1.4 Website's Content
(30/5/2024)

The content quality & relevance of Lyon-Beton was excellent. The appearance and resolution are at their best, especially since it is a website that sells things, Lyon-Beton can convince the user as they are providing the picture of their product with high-quality resolution. They are also putting a journal on their website so users can see the history of their work, collaboration, and things that are related to the product.

Performance:

Fig.1.5 Performance Laptop Vs Phone

(1/5/2024)

Technically, Lyon-Beton's website could give users a good experience at performance. In a big device such as a laptop, there is no lagging and it loads pretty quickly, Another thing that we have to consider is the internet connection of the device could affect the performance because a website's performance works differently on a mobile phone.

Strength & Weakness:

Strength:

Has a good design & layout.
Works very well on a laptop.
Providing journal/history of some of their work as a reference.
Not only selling product, but also communicate with users through their journal page.
Has interesting feature (Moving bar, changing pictures, etc.).

Weakness:

Giving a different experience when user opens it on a mobile phone.

Conclusion:

Overall, Lyon-Beton was an interesting website. It is so complete from A to Z, they have a unique concept and provide all of the information that users need. Another thing that would make the user experience better in visiting this website is, that using pc/laptop would be recommended.

Words: 584

Website 2: https://wildeweidefestival.nl/en/

Fig. 2.1 Website Preview

(1/5/2024)

About Website:

Wilde Weide Festival is a website that introduces the creativity of music festival and it is performances. This website sells tickets for its festival that will happen from the 5th to the 7th of July in the Netherlands.

Purpose & Goals:

As it's a festival website, of course, the main purpose is to promote the festival to reach more people. Besides the festival tickets, they also sell camping spots for the accommodation. Based on the observation, this website also has a dedication page for artists, so people can discover different artists that they never knew before.

Visual Design & Layout:

Fig. 2.2 Website's Layout
(1/5/2024)

This website has a very unique concept, it uses pop color and unique graphic elements that appear on every page of this website. It is quite bizarre, but the bizarreness makes this website stand out. The placement of the contents is very good. They were also very brave to replace the cursor with the goat-head, instead of an arrow. For some people, it can be very confusing to look at this website, but it is exciting at the same time.

Function & Usability

Fig. 2.3 Function & Usability

(1/5/2024)

As written before, Wilde Weide has a 'unique' concept, some of its features like the main menu are full of graphic elements, so people can mistake that for a button to the main menu or website's content. They placed the menu on the left upper corner of the website. Then, the menu will lead the user to another page with animated graphical designs that dominate the page, so people might not realize that the content is there. Maybe, because it is a festival website they want to be playful and give another level of experience to the user. For the content, this website has a separate page for each content, which is good, and they toned down the graphical elements, to minimize distraction. They even have a special page dedicated to introducing the artists and embedding the artist's platform.

Content Quality & Relevance:

Fig. 2.4 Content Quality & Relevance

(1/5/2024)

Both the quality and relevance of this website work very well, especially in giving such a weird yet astonishing experience for the user. Because of its playfulness, people will not be bored in exploring this website. They also added sound to the website, so people could scroll while listening to the music that suits them very well with the festival, that is why this website is relevant to its concept and brings the festive Wilde Weide experience to the user.

Performance:

Fig. 2.5 Web Performance Laptop Vs Phone

(1/5/2024)

Since Wilde Weide uses a lot of graphical elements, this website works very well on a laptop. The animation works smoothly both on a laptop and a mobile phone, there was no lagging on this website which enhances the attractiveness of the website.

Streght & Weakness:

Strength:

Has very unique design.
Worked smoothly on mobile phone/laptop.
Giving a very unique experience.
Every graphical elements in it is animated and suits the concept very well.

Weakness:

Might be a little bit confusing for some people, because of its graphical elements.
The goat-head cursor animation was too much, but it is not that bad.

Conclusion:

Wilde Weide is a good website, where people can discover new things, new styles, and cool graphical elements. It can also be studied by those who work in the design industry because it gives inspiration and reference for design.

Week 2 - Web Replicate

On week 2, we were told to do web replication, Mr. Shamsul provided 3 different website, and we'll be replicate 2 from those three websites.

Process:

Fig. 2.1 Replicate Process Web 1
(9/5/24)

Fig. 2.2 Replicate Process Web 2
(15/5/24)

Process breakdown:

Before started, I chose the website that I wanted to replicate, I chose Bandit Running & Ocean Health Index
On the first picture, we screen to grab the website that we want to replicate, to get the whole page we should press the right button on the mousepad > inspect > command search > type screenshot > press screenshot and that is how you will get the whole page.
After getting the whole page you can start to replicate the website in Adobe Illustrator, as can be seen in picture 2, 3, and 4. To replicate the websites, I mostly use shape and pen tool. In order to find the similar typeface, I go through google fonts to downloaded fonts that similar with the one on the website.
After done with all of the process your replicated website is good to go.

Final Outcome

Fig. 2.3 Clean Bandit Replicate
(9/5/24)

Fig. 2.3 Ocean Health Index Replicate
(15/5/24)

(15/5/2024)

WEEK 6 - Exercise 3

Process

This task require students to make recipe card from selected food recipe published in this website. I chose spicy tempeh crumble bowl as the content of my recipe card. Before I started, I would like to say that I watched a YouTube video as a guide to create this recipe card because I'm still not familiar with the usage of these elements and it is easier for me to watch a tutorial.

Fig. 3.0 Website tutorial

HTML file

I divided my card by sections, there are five sections in my HTML file. The sections are for:

Fig. 3.1 HTML file
(2/6/24)

Header.
Menu (description about the food). This section also contain table, division for the cooking steps, and ingridients.
CTA button that will lead to the recipes website.
For form.
Footer.

In those section I also included class so I can style them in the css file.

1. Header

For the header, I want to display a short description about the card, then I added CTA button that will lead to my blog. So after the section part, I added division with class so I can style the size, looks, and background at the css file.

Fig. 3.2 HTML file for header
(2/6/24)

Fig. 3.3 CSS File for header
(2/6/24)

2. Menu

In this section I put ingredients, table for cooking time estimation, and cooking steps.

For the cooking estimation, I created table and apply class attribute to the table. Before the table I also included the picture and short description about the food.

Fig. 3.4 HTML menu section
(2/6/24)

Fig. 3.5 Preview
(2/6/24)

In CSS file, I adjusted the table, image, and text position. For the image and table I want to make it a little bit rounder, so I set the border radius to 5 pixels. But for the table, I only set the top left and right, so the border was not completely rounder.

For the cooking steps and ingredients, I created a box using the row class. For this part I used an unordered list. For the row class, I used justify-content and applied space-between. For the box itself, I also use column.

Fig. 3.6 HTML menu
(2/6/24)

Fig. 3.7 Styling the box in CSS file
(2/6/24)

3. CTA Button

For the CTA button itself, I created a box with this setting:

Margin: 100px auto.
Width: 80%.
Background image: using a linear gradient.
Background size: cover.
border radius: 10px.
tex: I also put text on it, it contains <h1> and p, I styled it to be align in the center.
padding: 100px 0.

Fig. 3.8 Button CSS
(2/6/24)

And for the button, I'm using '.hero-btn', to style it:
Display: inline-block.
Text-decoration: none.
I did not set for any border radius, to make the box look square.
padding: 12px 34px.
I set the background to transparent.
Position: relative.
Cursor: Pointer.

4. Form

Fig. 3.9 Form section
(2/6/24)

For the form, I copied the box setting from the CTA section, and added the form inside the section.

5. Footer

Fig. 3.10 Footer HTML
(2/6/24)

The setting of the footer, on the HTML I placed the footer inside a different section, the section contains <h4> and <p> tags.

Footer in CSS file

margin-bottom: 200px
margin-top: 20px
font-weight:600
font-size: 30px

Final Result

Click Here

https://tempe-spici-188.netlify.app/

🔝

REFLECTION

Experience:

Analyzing websites is a new thing for me. Before I studied this module, I only learned about digital art, but never interested in making my art alive and interactive, that is why this particular task made me realize that new things are there to be learned. And from new things, we can discover something that we might looking for. In other words, we can enhance new knowledge every day by stepping out of our comfort zone.

Observation:

The learning phase is excellent, in my opinion. First, the students are introduced to the website rather than diving straight into coding. All of these exercises have certainly taught me how to use HTML and CSS.

Findings:

Design is fun, but by making it interactive it's like you make them alive and interesting.

🔝

QUICKLINKS

HOMEPAGE

🔝

Search This Blog

Aisya Diva Anwagodsa (0365505)

Interactive Design - Exercises

Week 1 - Web Analysis

Comments

Post a Comment

Popular posts from this blog

Advanced Typography - Task 1: Typographic System - Type & Play

Advanced Typography - Task 2: Key Artwork & Collateral