Interactive Design / Exercises

23.04.2024 - 20.07.2024 (Week 1 - Week 4)
Gunn Joey / 0366122
Interactive Design / Bachelor of Design (Hons) in Creative Media
Exercises


TABLE OF CONTENTS



MODULE INFORMATION BOOKLET


LECTURES

Week 1
Usability: Designing Products for User Satisfaction


Lecture Summary

What is Usability?
Usability is about how effectively and efficiently a user can use a product or design in a specific context.
It's a crucial part of User Experience (UX) Design, focusing on meeting users' needs and making their experience easy.

Key Principle of Usability:

1. Consistency
  • Ensure visual elements and functionality are uniform across the design.
  • Examples: consistent navigation, page layout, fonts, and branding.
  • Consistent design helps users learn and navigate easily.
2. Simplicity
  • Interfaces should be simple, with minimal steps to complete tasks.
  • Use clear symbols and terminology.
  • A simple design helps users achieve goals quickly and efficiently.
      3. Visibility
      • Make important elements visible to users.
      • Users should easily see their options and how to access them.
        4. Feedback
        • Provide clear responses to user interactions.
        • Example: changing colour or showing submenus when hovering over items.
          5. Error Prevention
          • Alert users when they are making mistakes to help them avoid errors.
          • Example: asking users to confirm actions to prevent accidental mistakes.

            Common Usability Pitfalls and Solutions:

            • Avoid complex interfaces, confusing navigation, poor feedback, and inadequate error handling to improve usability.

            Week 2 
            The Anatomy of a Web Page: 4 Basic Elements


            Lecture Summary

            1. Header: The top part of a web page, crucial for navigation. It often includes a logo, call-to-action (CTA) buttons, links to main sections, and contact information. It helps users find important information quickly.

            2. CTA Button: Encourages users to take specific actions like "Buy Now" or "Subscribe". These buttons are designed to be noticeable and prompt user interaction.

            3. Hero Section: The first visual element users see, located above the fold. It captures attention with images, videos, or catchy text to engage visitors and encourage them to explore further.

            4. Footer: The bottom part of a web page that provides additional navigation links, contact information, and other relevant details. It's useful for users looking for more information or ways to connect.

            5. Slider: An interactive element that displays multiple items, like products or services, in a rotating manner. While it saves space and engages users, it can also slow down page loading and distract users if not used properly.

            6. Search Bar: Allows users to search for content within the website. It enhances usability by helping users find specific information quickly, especially on larger websites.

            Each element is designed to improve usability and user satisfaction, making the web page both functional and visually appealing. The lecture emphasizes the importance of balancing these elements to create an effective and user-friendly web page.


            Week 3
            Understanding Website Structure


            Lecture Summary

            Why Website Structure Matters?
              User Experience: A well-structured website helps users find information easily, keeping them engaged and satisfied.SEO: Good structure improves search engine optimization, making the website more visible in search results.Performance: Proper organization enhances overall website performance.

              Three Key Elements of a Website:

              1. Header: The top section of a webpage, usually containing the logo, navigation menu, and contact information. It provides quick access to essential information.

              2. Body: The main content area, including text, images, videos, and other multimedia elements. Proper organization within the body ensures readability and a smooth user experience.

              3. Footer: Located at the bottom, it typically includes copyright information, links to important pages, and contact details. The footer provides closure and additional navigation options.

              Organizing Content:

              • Use headings (H1, H2, H3, etc.) to create a hierarchical structure.
              • Group content logically and label sections clearly to enhance user experience.
              Navigation Menus:
                • Navigation menus help users move around the website easily.
                • Use clear and concise labels for menu items.
                • Consider dropdown menus for complex sites to keep navigation simple and organized.

                Week 4
                Web Standards


                Lecture Summary

                Web Standards:
                • Evolution from keyboard, mouse, and monitor to diverse devices like phones, tablets, and audible interfaces.
                • Importance of web standards for accessibility and consistency across devices.

                How the Web Works?

                • Explanation of how web browsers connect to web servers via DNS to retrieve websites.
                • Detailed steps on how browsers use DNS to convert domain names to IP addresses and communicate with web servers.

                Structure of a Web Page:

                • Importance of document structure in helping readers understand and navigate content.
                • Comparison of web pages to traditional documents like newspapers and catalogs.

                Elements of Web Page Structure:

                • Overview of HTML tags and elements.
                • Importance of using proper markup to ensure readability and accessibility.
                My About Me Sites:


                Week 5 HTML & CSS


                Lecture Summary

                1. ID Attribute: Used to uniquely identify elements on a web page for styling or scripting.
                • Ensures no two elements share the same ID.
                • Allows unique styling for individual elements.
                2. Class Attribute: Used to group multiple elements for styling.
                • Enables distinguishing elements that share common characteristics.
                • Allows consistent styling for groups of elements.

                3. Extra Markup
                • Block elements: Occupy full width and start on a new line.
                • Inline elements: Occupy only the necessary width and remain in the flow of text.

                3. Semantic HTML

                • Importance of using semantic elements for better accessibility and SEO.
                • Examples include <header><footer><article><section>, etc.

                Week 7
                CSS Selectors

                Lecture Summary
                 
                Types of CSS Selectors
                • Universal Selector (*): Selects all elements on the page.
                • Type Selector: Targets elements by their tag name (e.g., ph1).
                • Class Selector (.className): Targets elements with a specific class attribute.
                • ID Selector (#idName): Targets an element with a specific ID attribute.
                • Attribute Selector: Targets elements based on attributes (e.g., [type="text"]).
                • Pseudo-classes and Pseudo-elements: Target elements based on their state or position (e.g., :hover::after).

                Best Practices for Using Selectors:

                • Use specific selectors to avoid unintended styling.
                • Organize and structure CSS for maintainability.
                • Combine selectors for more precise targeting (e.g., div.className > p:first-child).
                Week 9
                Box Model

                Lecture Summary  
                1. Display Property:
                • The display property in CSS controls layout.
                • Elements have default display values: block or inline.
                • Block-level elements (e.g., <div>) start on a new line and stretch out.
                • Inline elements (e.g., <span>) fit within the flow of text without breaking it.

                2. Box Model:

                • HTML elements are containers, each having three layers around the content:
                                - Padding: Space between the content and the border.
                                - Border: The outline around the padding.
                                - Margin: Space outside the border, separating the element from others.

                3. Flexbox:

                • Flexbox is a powerful tool for creating responsive web layouts.
                • Key concepts:
                                - Flex Container: The parent element with display: flex.
                                - Flex Items: The children elements within the flex container.
                • Important properties of Flexbox:
                display: flex: Establishes a flex container.
                flex-direction: Defines the direction of flex items (row, column).
                justify-content: Aligns flex items along the main axis (start, end, center, space-between, space-around).
                align-items: Aligns flex items along the cross axis (stretch, center, start, end).

                EXERCISES

                Exercise 1: Web Analysis

                We are required to analyse an existing website and identify areas for improvement. In this task, I will choose two websites to analyse and write a report from the link given by Mr. Shamsul in Google Classroom.

                What to have in the analysis:
                • Consider the purpose and goals of the website, evaluate whether they are effectively communicated to the user.
                • Evaluate the visual design and layout of the website (colour, typography, imaginary)
                • Consider the functionality and usability of the website (navigation, forms, interactive elements)
                • Evaluate the quality and relevance of the website's content (accuracy, clarity, organisation)
                • Consider the website's performance (load times, responsiveness, compatibility with different devices and browsers)
                Deliverables:

                Write a brief report summarizing in not less than 500 words. You can include a screen capture of each section or page of the website to explain. Make sure that the formatting of the report is clear (heading/subheadings)

                The first chosen website is Prand [link]

                1.1 Purpose and Goals

                Figure 1.1: Prand home page

                Prand is an animation studio focused on bringing emotions into its creation. Their website is a vibrant online platform focused on the field of animated graphics. Their animated graphics were vibrant and colourful, showcasing their creative thinking. Stories are being told through their ideas. They aim to inspire and engage audiences with captivating animations that captivate the imagination and elevate storytelling in the digital realm.
                There are many amazing animation projects on Prand. Their projects are all about emotions. They are very creative in making 2D, 3D, Collage and Mixed Style.

                1.2 Visual Design and Layout
                Colour, Layout, Elements:

                Figure 1.2.1: Visual Design

                Figure 1.2.2:Visual Design

                The choice of colours of the website is very vibrant. The lively atmosphere catches users' attention. The colours that used for background are light pastel colours. Together with dark grey font colour, it creates a contrast visual effect. There are many cute and creative elements used in the website. Once users click on the faces of team members, different animated elements will appear on their faces. The layout of the website is simple, just different in sizes of frames.The layout of website is also clear and easy to understand. There is proportion used in the website.

                Typography:

                Figure 1.2.3: Typography

                Figure 1.2.4: Typography

                The font size of the header text is big enough to create visual hierarchy. Strong visual hierarchy guides audiences' visual and logical progression by showing what is important. The key point of header text is bolded and also used in a different font. The font used in description is same with the unbold header text. The spacing of the description text is just nice but it can be better if the font is bigger in size. 

                Imaginary:

                Figure 1.2.5: Imaginary

                In my opinion, there are too much elements on the main page. The animated emotion graphics obscured the title. This can affect audiences' focus point.

                1.3 Functionality and Usability


                Figure 1.3.1: Functionality and Usability

                Figure 1.3.2: Functionality and Usability

                Figure 1.3.3: Functionality and Usability
                 
                Prand's website is ease to use and effective for users which users are able to easily locate what they are searching for. The navigation is straightforward and clear. As we can see, the bottom bar lists and categorises projects into many categories. Next, users can then examine the selected project by clicking on the cover image of animated graphics. Prand functionality is highlighted by its eye-catching, but they also load very quickly and run smoothly. Prand also has interactive feature like buttons and image experience. They had also divided the main topics into categories, such as projects, about, sparks and have a project in the menu bar. Users with projects to work on with Prand can contact them by filling out the personal details and project.

                The website Prand boasts both functionality and usability, offering a seamless user experience. Its functionality is highlighted by its smooth navigation, allowing users to easily explore various sections such as portfolios, blog posts, and team profiles. The website's animations are not only visually stunning but also load quickly and run smoothly, enhancing the overall user experience. Additionally, Prand provides interactive elements, such as sliders and image galleries, adding depth to the browsing experience.

                Prand's simple layout and ease of use provide a strong usability decision. The design of the website is simple and well-organized, with clear labelling and navigation options that allow users to quickly locate what they're looking for. The website's responsive design makes sure that it looks and functions properly on all devices, from laptops to smartphones. Prand's focus on functionality and usability delivers an entertaining and fun experience for its users.

                1.4 Content Quality and Relevance

                Prand's website is fantastic and stands out since it features extremely nice animations created by a skilled team. They display a variety of styles and approaches, demonstrating the team's skill. The website also features a blog that discusses how animations are created and what's new in the field of animation.  These profiles allow audiences to learn about the designers of the animations, including their inspirations and motivations. This personal connection gives the website a sense of authenticity, making it more interesting and relatable.

                In conclusion, Prand's website is a combination of entertaining and education, offering audiences with a memorable experience.

                1.5 Performance

                Figure 1.4.1: Performance of Main Page with Safari

                Figure 1.4.2: Performance of mouse key appearance with Safari

                Figure 1.4.3: Performance of Main Page with Google Chrome

                Prand loads faster on Safari. Many animated graphics are only supported on Safari using laptop. In contrast, Google Chrome loads slower than Safari and all those small and fun animated graphics did not appear when the mouse key reach the cover image of animation. Safari brings a better experience for users compared to Google Chrome.

                Figure 1.4.4: Performance on iPhone

                Figure 1.4.5: Performance of Main Page with iPhone

                The size of iPhone blocked the title. The word "Conference" is not fully displayed. Users need to zoom out their screen to read the full text using iPhone.

                Figure 1.4.6: Performance of the project with iPhone

                Once users zoom out their screen to read the full text, the layout of images could not fit the screen. It looks untidy. This will affect users' using experience.


                The second chosen website is Nokia 3310 tribute [link]

                1.1 Purpose and Goals

                Figure 2.1: Nokia 2210 Tribute

                The Nokia 3310 Tribute website highlights the well-known Nokia 3310 mobile phone, which is known for its durability, long battery life, and classic design. The site is to pay respect to the Nokia 3310's history. The website promotes the Nokia 3310's lasting appeal by displaying essential features through a combination of photographs, videos, and stories. 

                In addition to highlighting the phone's benefits the website aims to engage its audience by including interactive components like quizzes, polls, and user-generated material. These features enable users to contribute their own Nokia 3310 experiences and memories, which creates a sense of community among phone users.  

                1.2 Visual Design and Layout

                Colour, Layout:

                Figure 2.2.1: Visual Design and Layout

                The Nokia 3310 Tribute website has a layout with the colour of green and dark grey. It features easy-to-read fonts and high-quality images of the phone. Some of the animated graphics are red colour. The homepage includes a hero section, followed by sections highlighting the phone's durability and design. Navigation is simple, with a clear menu at the top.The colour and design of the website is designed to create a classic and aesthetic look. I did some research about Nokia 3310 and found out the website's visual design looks the same like the old Nokia 3310 screen. The snake game session can also referred to Nokia's snake game.
                The layout of the website is cluttered. This will cause difficulty in finding information.The designer can simplify the layout and improve the information hierarchy to enhance the overall user experience.

                Figure 2.2.2: Research on Nokia 3310

                Figure 2.2.3: Research on Nokia 3310

                Typography: 

                Figure 2.2.4: Typography

                Figure 2.2.5: Typography

                Figure 2.2.6: Nokia Cellphone FC Font

                Typography on the website is easy to read. Serif fonts are used for body text, ensuring readability across different devices. The typography of title and headings of the website looks also the same as the typography of Nokia 3310's screen. From my research, the typography of Nokia 3310 is named Nokia Cellphone FC font. The font colour of the website is black. Some of the section, font colour is red.

                Imaginary:

                Figure 2.2.7: Imaginary

                Figure 2.2.8: Imaginary

                Imaginary on the website plays a crucial role in conveying the nostalgia of the Nokia 3310. High-quality images of the phone, along with graphics and illustrations, creates a visually appealing and great experience for users. Additionally, the website features videos showcasing the Nokia 3310's features and history, further enhancing the overall visual appeal of the site. The meme hero session has high quality images. Users are able to slide and see more about the heroe section.  At the bottom of the home page, the Nokia 3310 illustration moves when users scroll down. The designer is very creative in designing all this details.

                Figure 2.2.9: Imaginary

                The animated illustrations move from left to right repeatedly. I believe the fun and creative illustrations will improve users acceptance of this website and willing to know more about Nokia 3310. I found out the bottom outline of the cloud illustration blocked the first word "But". 

                1.3 Functionality and Usability

                Figure 2.3.1: Functionality and Usability

                Figure 2.3.2: Functionality and Usability

                The Nokia 3310 Tribute website functions properly and is user-friendly. Its straightforward design makes it easier to locate what you're looking for. The website looks great on both computers and phones since it adjusts to different screen sizes. You can click on the images and videos to find out more about the Nokia 3310. There are additional fascinating articles on the website, such as blog entries and staff biographies. The Nokia 3310 Tribute website honours the iconic Nokia 3310 mobile phone while also being simple to use and entertaining.

                1.4 Content Quality and Relevance

                Accurate information is crucial to establish trustworthiness. The information on the website is not complete and clear. Although this website is eye-catching as the elements and games are presented with creative, the historical details and other information need to verify and update. The designer uses straightforward descriptions when visiting the Nokia 3310 Tribute. The language and short clear explanation in the website make users can quickly understand the headings, subheadings and descriptions easily. I suggest the designer to write a more detailed explanation for each sections. Moreover, the organization of the website can be better. This can help users navigate what they want to understand and find out more about Nokia 3310 Tribute. The navigation structure can be redesign to be more intuitive, with clear headings and a logical sequence.
                1.5 Performance

                Figure 2.4.1: Performance on laptop


                Figure 2.4.2: Performance on iPhone

                Figure 2.4.3: Performance on iPhone

                Nokia 3310 Tribute loads the same time on both Safari and Google Chrome. The home page has issue of slow load times and lack of immediate clarity on the website's purpose. The designer can optimise load times and write the purpose clearly. The website fits well to mobile screen size. All the animated graphics and other elements are well arranged and presented smoothly.


                Exercise 2: Web Replication

                For this task, we are required to replicate TWO (2) existing main pages of the websites given in the link to gain a better understanding of their structure. Choose any two from the link given. Follow the dimensions of the existing website from the width and height. This exercise will help in developing our design skills using software such as Photoshop or Adobe Illustrator, and gain insights into web design best practices. 

                I choose to replicate Morgan Stanley and Ocean Health Index. Mr.Shamsul taught us to screengrab the website during lesson. I imported the screen grab images in Adobe Illustrator and started replicating with the similar images in Pixels and downloaded font in Google Font.

                Morgan Stanley:

                Figure 3.1: Progress

                Figure 3.2: Final Outcome


                Ocean Health Index:

                Figure 3.3: Progress

                Figure 3.4: Final Outcome


                Exercise 3: Creating a Recipe Card

                For this task, we are required to create a recipe card using HTML and CSS. The goal is to design a basic webpage that displays a recipe's ingredients and instructions in a visually appealing format. 

                1. Create an HTML file named "index.html." Create a section that displays the following information:

                • Recipe title
                • Include necessary images for the page
                • List of ingredients
                • Step-by-step cooking instructions

                2. Create an external CSS file named "style.css."

                • Apply CSS rules to style your recipe card.
                • Use CSS selectors such as element selectors (e.g., body, h1, ul), class selectors (e.g., .recipe-title, .ingredient-list), and ID selectors (e.g., #instructions) to style different parts of the card.
                The chosen recipe from the given link: 

                 
                Figure 4.1: Chosen recipe

                Firstly, I started designing the recipe card with basic HTML, including recipe title, ingredients, instructions and notes.

                Figure 4.2: Basic HTML

                Figure 4.3: Basic HTML

                After adding basic HTML structure, I sketched my idea of the layout.

                Figure 4.4: Idea Sketch

                Next, I created a CSS file to add some basic CSS to improve the appearance of the recipe card.

                Figure 4.5: CSS progress

                Final Outcome:



                HTML code:



                CSS code:



                REFLECTION

                Engaging in the interactive design exercise involving web analysis, web replication, and creating a recipe card was a valuable learning experience. Through web analysis, I learned to critically evaluate websites, focusing on layout, usability, and visual design. This helped me understand what makes a website user-friendly and aesthetically pleasing. Web replication taught me how to recreate existing web pages. This exercise deepened my understanding of how different design elements come together to form a cohesive web page. It also highlighted the importance of attention to detail and precision in web development. Creating a recipe card allowed me to combine what I had learned about layout, design, and coding into a functional and visually appealing project. This task emphasized the importance of clear and simple design.

                Overall, these exercises enhanced my web design and development skills, taught me to appreciate the intricacies of creating user-friendly interfaces, and underscored the value of combining aesthetics with functionality.








                Comments

                Popular posts from this blog

                Advanced Typography / Task 1: Exercises

                Design Principles / Task 1: Exploration