Interactive Design - Lectures & Exercises 1, 2 & 3

23/4/2024 -  / Week 1 - 

Cindy Clarissa Leslie / 0367677
Interactive Design / Bachelor of Design (Hons) in Creative Media
Lectures & Exercise 1, 2 & 3

---

LECTURES

Week 1: Lecture 1

Usability

Usability refers to the effectiveness of how users can utilise a certain product in the right way. The higher the usability a design has, the better it is able to guide users into their goal of the usage.

To investigate problems in usability to accommodate users, we can gather data by:

• Interviews
• Surveys

Proceed to create a solution to the found problems, create prototypes (drafts and such).

Each websites have different goals, example:

Netflix - streaming website using subscription, same with YouTube

Key Principle of Usability:

• Consistency
• Simplicity
• Visibility
• Feedback
• Error prevention

Consistency - ensures that the website is coherent and works harmoniously across its all different elements (includes: consistent navigation system, page layout and menu structure, typography and branding). Ex: apple.com, 

Simplicity - interfaces should be “simple” for users. Minimise the number of steps that are involved in a process by using symbols and terminology that can be easily understood, avoiding mistakes done by users. Refrain from making designs too complicated.

Visibility - more visibility on elements so that users have an idea of what they are supposed to do, users should know what to do just by looking at an interface and what options they have access to.

Feedback - used to communicate the results of any interaction, it is used in order to give users an image of whether the design has either succeeded or failed at performing the initial goal it is supposed to.

Error Prevention - alerts the user when they are making an error, guide them to do the tasks correctly and prevent mistakes.

Avoid these for better usability:

• Complex interfaces
• Confusing navigation
• Poor feedback
• Inadequate error handling

Week 3: Lecture 3

Website Structures

Website structure - foundation of a user-friendly and accessible website. Well-structured website helps users navigate, find information while keeping them engaged at the same time.

Uses elements for accessibility, makes sure that it appears on search engines (SEO, Search Engine Optimization). 

Key Elements of a website:

• Header
• Body
• Footer 

Websites could be improved further by having an accessibility section.

Further elements that should be including in the website:

• CTA Button (Call to action) - encourages the users to take a certain action, ex. Signup button.
  
  
• Hero Section - The pre-scroll area on top of the webpage that presents a strong visual hook.
  
  
• Footer - lower (bottom) part of the webpage, usually provides useful links and data users may find interesting.
  
  
• Slider - interactive element to present different products, offers, etc.
  
  
• Search - enables users to browse information in the website based on their search query.
  
  
• Breadcrumbs - navigation elements that helps users be aware of where they are on the website.
  
  
• Form - interactive element that allows users to send information to the server or system.
  
  
• Cards - layout elements that help arrange different content in an easy-use way together.
  
  
• Video - could be important as it keeps engagement in a website, it may also be found embedded in the background.
  
  
• Progress Indicator - element that helps users the current point they are in within the set of actions.
  
  
• Favicon - URL icon or bookmark icon, symbol that represents the brand.
  
  
• Tags - presents keywords or phrases that enables users to jump directly to the items/information related.

Week 4: Lecture 4

Web standards

Since there is a high probability that your website would look different for everyone as they access it in different ways, it is important that web standards are applied. Web standards ensures that the website works across all devices.

Web standards are important for both developers and visitors, not only does it provide equal access for visitors but also help simplify development and makes it easier for a developer to understand another’s coding.

HTML elements

HTML code is made up of characters that live inside angled brackets <>, called HTML elements. Elements are usually made up of two tags: opening and closing tag.

Ex.

<element>Information</element>

The element tells the browser something about the information.

Open tag: <p>

Closing tag: </p>

HTML attributes

Attribute provides additional information about the contents of an element. Appears in the opening tag, made up of two parts: name and value, separated by equal sign.

Ex.

<p lang=”eng-us”>Paragraph in English</p>

target="_blank" (attribute to open link in new tab"

Headings

HTML has six levels of headings:

<h1> main heading

<h2> subheadings

Further sections under subheading will be <h3> and so on.

For paragraphs use <p>.

Bold & Italic

Enclosing words in the tags <b> and </b> makes characters appear bold.

Enclosing words in the tags <i> and </i> makes characters appear italic.

Lists

Ordered list - each item in the list is numbered.

Unordered list - list that begins with a bulletpoint.

Ordered list starts with <ol>

Unordered list starts with <ul>

Each item in the list is enclosed with <li>

Ex.

<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>

Writing Links

Links are created using the <a> element, specify which page to link using the href attribute.

Ex.

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

‘IMDB’ will be the text the user clicks on to access the link.

Week 5: Lecture 5

ID attribute

Used to uniquely identify the element from other elements on the page. It is important that no two elements have the same value for their ID attributes. ID has to be unique. Used to style an element differently from others.

Class attribute

A way to identify several elements as being different from the other elements on the page.

Block elements

Some elements will always appear to start a new line in the browser window

Ex.

<h1>, <p>, <ul> and <li>

Inline elements

Some elements will always appear to continue on the same line as their neighbouring elements

Ex.

<b>, <i>, <em>, <a> and <img>.

---

INSTRUCTIONS

Exercise 1 [Web Analysis]

Analysis Report (Wilde Weide)

Figure 1.1 Wilde Weide website's homepage

Figure 1.2 Wilde Weide's 'about me'.

Purpose & Goal

    From the domain alone, the audience can figure out that the whole purpose of the website is to inform about a certain festival that takes place in the Netherlands. Though at first, the website may seem confusing, as users scroll the homepage, they are immediately greeted with information regarding the festival it is promoting, which clarifies their main purpose with a brief 'about' and what users can look forward to regarding the festival, therefore communication is pretty effective as they are straightforward.

Figure 1.3 Wilde Weide's artists page.

Visual Design & Layout

    As users scroll down, the websites aesthetic becomes more apparent as they only use warm colours (specifically yellow and orange), this not only invokes an overall friendly ambience but also works well with the elements used in the website (mushrooms, dandelions etc.). The visual design is able to complement each other and give the impression that this would be a outdoor festival, showcasing the beautiful nature of the Netherlands to which it's culture is also presented in a rather childlike/humorous way. The fonts used are dominantly display fonts, again it harmonizes well with the elements that are found in the website, showcasing an 'indie' aesthetic that represents the artists who are showing up to the festival. Even the mouse cursor itself is an important element, it appears as a goat which is native to the Netherlands, further showcasing the country's cultural aspects. The layout is also coherent, with all the information categorized properly to the relevant navigations. The layout and navigation is satisfactory until the following FAQs.

Figure 1.4 Wilde Weide's FAQ page.

Figure 1.5 'More Information' page on Wilde Weide.

Functionality & Usability

    The website overall functions well, the navigation buttons are straightforward and there are options to change the language which makes it more inclusive for users all around the world. However, one thing that was ineffective was definitely the FAQ and additional information, it lacks the ability to contact through email or customer support, where it is placed on the bottom of the site called 'Colophon' instead which was not very obvious, therefore if users have any specific problem they may face they would have to solely rely on the FAQ section. The screen for providing further information (as seen in figure 1.5) is also ineffective function wise, though design wise was interesting, there was too much going on that I, myself didn't realize that the running text could be clicked on. Complicated and overcrowded designs like these might further confuse the users especially at first glance, which is why it is better to minimalize it as it is rather ineffective for a page that is focused on providing extra important information.

Quality & Performance

    However, the information provided is coherent and straightforward, it allows users to picture the festival itself and also lets users familiarize themselves with the artists in the information page, providing their socials especially if they are interested in one. The website's content is consistent and relevant to the festival it is trying to promote. The website also runs smoothly despite having a lot of elements and animations, however it only starts getting a bit slow through the 'about artists' page, other than that there were no performance issues.

Analysis Report (Zava)

Figure 2.1 Zava's homepage.

Figure 2.2 Zava's introductory page

Purpose & Goal

    Zava's website provides an excellent impression on the users as soon as they get to the homepage, the header that says 'Design of Lighting' and the picture of the lamp would immediately showcase their function and purpose, which is to sell high quality lamps. As the users scroll, they would also be shown a short introductory page about themselves, which further allows users to familiarize themselves to what the website functions as. Not only that, the text itself includes in vocabulary that enhances their image of being a skilled brand in creating lamps.

Figure 2.3 Products shown by Zava's websites

Visual Design & Layout

    The overall design was very simple and minimalistic, supported by the dark colour schemes that mostly consists of black or navy, where it was able to help the brand's professional image. The website itself didn't need much elements to convey an air of classiness as it utilizes colours like black, colour, grey and blue to mimic a high quality setting. The layout was also very interactive (as seen in figure 2.3), where it encourages the users to be curious and explore the collections they have to offer.

Figure 2.4 Zava's navigation screen

Functionality & Usability

    Again, the minimalistic design of the website plays a huge part in its functionality, the navigation bar was extremely simple and easy to go through as it was consistently straightforward. The contents shown when clicking on any of them were relevant, users wouldn't struggle finding their desired information. There is a section dedicated for customer service which definitely comes in handy for feedbacks and problems that users have. The website also includes different languages other than English, making it usable for a decent amount of people worldwide. Overall, the functionality and usability of the site is satisfactory with how accessible it is.

Figure 2.5 Company information in the website

Quality & Performance

    The whole website's content is consistent and relevant to the brand itself. Ranging from products to information, the website is able to provide them in full clarity and was transparent in showcasing their reliability. With sections such as projects and information of their company, they are able to reassure users with seeming credible. With the minimalistic design, there aren't any performance issues and the website is suitable for most modern devices.

Exercise 2 [Web Replication]

For the second task, we were told to replicate a website in order to familiarize ourselves with the layout. The goal is to get as similar as possible with the actual websites by using Adobe Illustrator.

Figure 3.1 Screen grabbing a website by using 'inspect'.

We were required to pick 2 websites out of the 3 provided, to which I chose 'Ocean Health Index' and 'Morgan Stanley'. Before starting, we had to screengrab the whole website to set it as a template. We were taught how to do it, where we would 'inspect' on the website then proceed to screengrab by running command.

Replication Process (Ocean Health Index)

Figure 3.2 Creating guides in the layout of the Ocean Health Index website

Before starting the replication, I attached the screengrab as a template and created guidelines for me to follow to make arrangements easier. I also made another artboard on the side to make colour picking easier.

Figure 3.3 Process of replicating the website

Since this was my first attempt, I didn't have a proper approach in the process of replicating it. What I did was finish replicating it from top to bottom, therefore it took me a lot of layers to make and I took a lot of time since I was focused on completing a specific part first before continuing down. I tried to focus on the graphical elements first before completing the texts. The font that I have used for this website was 'Univers LT Std'. 

Final Exercise 2 - Ocean Health Index

Figure 3.4 Final replication of Ocean Health Index.

Figure 3.5 Side by side comparison to replicated and original website.

Replication Process (Morgan Stanley)

In my second replication, I decided to have a more proper approach. I divided the process to replicating the graphical elements first before all the texts. 

Figure 3.6 Creating guides in the layout of the Morgan Stanley website

Same as before, I set the screen grab as a template and created guidelines to make arrangements easier for me to do. I set the lines mostly on the text elements that requires the same baseline.

Figure 3.7 Process of replicating Morgan Stanley website

As mentioned, I first arranged all the images and any other graphical elements in one layer on top of the template. Then I proceed to hide the graphics layer to create a new one solely for the texts. The fonts that I have used in this replication is Almarai for the logo and Work Sans for the rest of it.

Final Exercise 2 - Morgan Stanley

Figure 3.8 Final replication of the Morgan Stanley website

Figure 3.9 Comparison of replicated and original website layout

Exercise 3 [Creating a Recipe Card]

Replication Process

Using a cookbook website that had been provided, I chose a recipe that I wanted to make a recipe card for, to which I chose Yellow Cake with Chocolate Frosting. When I started creating my card, I focused on HTML and its contents before moving onto CSS with styling.

Figure 4.1 HTML coding in Dream Weaver

The contents of the HTML mostly contained both numbered and unordered listings since it included both ingredients with step-by-step instructions. This one took less time since it was basically the fundamentals.

Figure 4.2 CSS coding in Dream Weaver

For coding the CSS however, took more time and I had to explore a lot more in each elements and attributes in order to get the proper look that I want.

Final Exercise 3 - Creating a Recipe Card

Netlify link: https://cindy-0367677-exercise-3.netlify.app/

Figure 4.3 Final HTML and CSS code

Figure 4.4 Final HTML code

Figure 4.5 Final CSS code

Figure 4.6 Final screengrab

Figure 4.7 Final pdf

---

REFLECTION

Starting interactive design, I was pretty excited to have something related to my specialization. In my experience, these exercises had served as a good way to be introduced to the module. In the first few exercises I learned about the importance of layout and navigation in UI/UX, where I can't simply focus on the aesthetic aspect however balance it out with the functionality. Next, with the recipe card, I mostly learned about the really basic aspects of coding with HTML and starting with simple CSS.

I found that coding required remembering a lot of commands, since I was completely new aside from the basic stuff, I had to search up and rely on the internet a lot to reference other's codes. However it was still pretty fun as there's a lot new to explore. The lextures had especially helped me since I've taken notes.