Interactive Design Task 1

on
23.04.2024- 14.05.2024 (Week 1-Week 4)
Ng Kar Yee / 0367743
Bachelor of Design (Honours) in Creative Media
Interactive Design  / Task 1

LECTURES

Week 1⇒ Usability: Designing Products For User Satisfaction

1. What is usability?

  • Refers to how effectively, efficiently, and successfully a particular user can utilize a product or design in a certain situation
  • A design’s usability depends on how well its features accommodate users’ needs and contexts
  • When users first encounter an interface, they should be able to find their way about easily enough to achieve objective without relying on expert knowledge
  • An interface with high usability guides users through its easiest route to achieve its goal 
2. Principle Of Usability
  • Consistency
  • Simplicity
  • Visibility 
  • Feedback
  • Error Prevention
A. Consistency
  • Consistency is a key factor in web design for both visual elements and functionality.
  • Consistency ensures that your website looks coherent and works harmoniously across all its different elements, such as headers, footers, sidebars and navigation bars
  • Consistent design is intuitive design as it includes consistent navigation system, page layout and menu structure, fonts and typography and branding in web design
  • Consistency is key for these patterns to be recognized and learned by users. If similar looking things do not produce a similar output, the user is bound to become frustrated
For example
  • If a website’s buttons are protruding boxes with labels on them, then all of the website’s buttons should look like that
  • Similarly, if a backward arrow denotes the back button, then it should not be changed to something else because that would be inconsistent with what the user has learned
Website example
  • Apple.com
  • Sime Darby.com.my
  • 153joombas.com
B. Simplicity
  • The principle that user interfaces should be “simple” for users
  • Simplicity is used loosely to refer to the need to minimize the number of steps involved in a process, to use symbols and terminology that make the interface as obvious as possible, and to make it difficult to make mistakes
  • Incorporating simplicity in a designs will help design better user interfaces by helping the users achieve their goals faster and more efficiently, all while enjoying a great user experience
C. Visibility
  • Visibility is the basic principle that the more visible an element is, the more likely users will know about them and how to use them. Equally important is the opposite when something is out of sight, it’s difficult to know about and use
  • Users should know, just by looking at an interface, what their options are and how to access them
D. Feedback
  • Feedback communicates the results of any interaction, making it both visible and understandable
  • Its job is to give the user a signal that they (or the product) have succeeded or failed at performing a task.
For example
  • When you’re on desktops or laptops, when you hover over navigation items, you expect them to change color or load a submenu.
E. Error Prevention
  • It involves alerting a user when they’re making an error, with the intention to make it easy for them to do whatever it is they are doing without making a mistake. The main reason this principle of error prevention is important is that we humans are prone to- and will always make mistakes
3. Common Usability Pitfalls & How To Avoid Them
  • Complex interfaces
  • Confusing navigation
  • Poor feedback
  • Inadequate error handling

Week 2⇒ Class Activity

For our second week, we were seperated into 4 group to solve a scenario question given by Mr Shamsul. For our group, we were tasked with designing a new app for a local restaurant.

Instruction 

  • Users want to be able to easily find information about the restaurant's menu, location, and hours,and make reservations.
  • Usability principles to consider are consistency simplicity
We started our discussion on what are the necessity in a app and the features that we wanted to included in. We began sketching our ideas and used Figma to complete our prototype.

Figure 1.0.1 Figma Prototype

Week 3⇒ Usability: Understanding Website Structure 

1. Why Website Structure Matters

  • Website structure is the foundation of a user-friendly and accessible website.
  • It affects user experience, SEO, and overall website performance.
2. Three Key Elements In Website Structure
  • Header
  • Body
  • Footer
A. Header
  • The header is the top section of a webpage.
  • It usually contains the website's logo, navigation menu, and contact information.
  • The header provides users with quick access to essential information and navigation.
B. Body
  • The body is the main content area of a webpage.
  • It contains text, images, videos, and other multimedia elements.
  • Proper organization of content within the body is crucial for readability.
C. Footer
  • The footer is located at the bottom of a webpage.
  • It typically includes copyright information, links to important pages, and contact
  • details.
  • The footer provides closure to the webpage and additional navigation options.
3. Organizing Content
  • Content organization is key to a well-structured website.
  • Use headings (H1, H2, H3, etc.) to create a hierarchical structure.
  • Logical grouping of content and clear labeling of sections improve user experience.
4. Navigation Menus
  • Navigation menus help users move around the website.
  • Use clear and concise labels for menu items.
  • Consider using dropdown menus for complex sites.
5. Hierarchy 
  • Heading can be center align however body must be left align as viewer read from left to right. 
  • If there a lot of content in heading align left is also advise 
  • H1-H6 is different sizes of heading H means heading. 
6. Static website 
  • No need login 
  • Content not frequently change 
  • Need update my html file 
  • Simple straight forward 
  • Not much content 
7. Dynamic website 
  • Have a data base 
  • Have login button 
  • By system
8. How does search engine works? 
  • By searching and matching meta and key words in html
Figure 1.0.2 Website structure

INTRODUCTION


TASK 1

EXERCISE 1⇒ WEB ANALYSIS

For our first exercise, Mr Shamsul introduced Visual Analysis to us, which we are needed analyze an existing website and identify areas for improvement. Besides it will help us develop our critical thinking skills and gain insights into web design best practices.

For this task, we are required to
  • Choose two 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.
What To Have in The Analysis:
  • Consider the purpose and goals of the website, and evaluate whether they are effectively communicated to the user.
  • Evaluate the visual design and layout of the website, including its use of color, typography, and imagery. Consider the functionality and usability of the website, including its navigation, forms, and interactive elements. Evaluate the quality and relevance of the website's content, including its accuracy, clarity, and organization. Consider the website's performance, including its load times, responsiveness, and 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)

WEB ANALYSIS

A. Website Analysis 1 

Upstatement (from the webby awards website)
https://upstatement.com/

1. Purpose And Goals

  • Upstatement is a digital product studio with an editorial mindset which makes websites, products and apps, digital brands, and creative tools.
Figure 1.0 Upstatement's main page

2. Visual Design And Layout

A. Colour Palettes

i. Pros

  • Through my observation, black and white is the main colour palettes in Upstatement’s website as there are widely used for the main pages and the navigation buttons. 
  • Black and white color scheme is a popular choice in web design as it can make typography, images, and other visual elements stand out while simplify user choices. 
  • Besides, the colour yellow, grey and blue is also used in the design to differentiate out different sub pages.
Figure 1.1 Colour palettes

Figure 1.2 Colours used in Upstatement

ii. Cons

  • The designer has created interactive keys for the users to interact in the webpages. However, the same colours are used for the navigation keys and the fill in form as the background. Therefore, it’s not obvious in the first glance unless users scroll to that part of the webpage and clicking it.

Hence in my opinion, I would recommend to change the colours for the important keys like the navigation keys, bars and forms to let users have a direct glace and have a direction on what they need to do.

B. Typography

i. Pros

  • The designer limited the fonts for the webpage into 2 types of fonts and different sizes fonts for its heading, sub heading and body. Therefore the overall outlook of the webpage is clean and easy to read.

Figure 1.3 Fonts in Upstatement

Figure 1.4 Fonts in Upstatement

C. Layout

i. Cons

  • The website layout features clear images and interactive videos with captions below them. However, the overall design appears a bit cluttered initially due to varying scales and proportions of the images. Some images have excessive space, others are not centered, and certain navigation bars are positioned on the left while others are on the right.

Hence in my opinion, I would recommend to arrange the scale and propotion to the same size and clear off the excessive space to let users have a more comfortable view
Figure 1.5 Layout

Figure 1.6 Layout

Figure 1.7 Layout

3. Functionality And Usability

A. Functions

i. Cons

  • The website features navigation bars at the left and top sides of the website so that users can explore the website freely and easily.
  • However, the navigation bar are not unified and show different buttons which may mislead and cause inconveniences for users. For the left navigation bar, the navigation for blog, engineering, services and newsletter are missing. Besides, the left navigation bar can only appear when users scroll down the page. To let the top navigation bar appear, users need to click in the We make... section and scroll down.

Hence in my opinion, I would recommend to arrange and unified the navigation bars to locate it at the top of the main page so that users can have a directory
Figure 1.8 Functions

B. Interactive Elements

*For the video example, pls watch at the slide below cause the file size exceed the maximum size

i. Pros

  • Upstatement has features some creative interactive elements in their website to attract their users from boredom. For example, the images will play a short video briefly about the content and navigation bars will responds when the mouse interfere with the page.

4. Content Quality And Relevance

i. Pros

    • The contents in Upstatement are well organised presenting useful informations to their users. There are sub pages which introduce the business more to the users like their specialty and the process of working with them. Upstatement also presents pass work examples to users so that future customers can rest assured when leaving the job to them.

    Figure 1.9 Work Process

    5. Website Performance

    i. Pros

    • The overall loading performance for Upstatement was generally well as it works quite swiftly. Besides that, the transition between web pages were also smooth. Upstatement is also compatible to different browsers and devices which are convenience for all users

    Figure 2.0 From Poco X4 Pro’s view

    Figure 2.1 From Macbook Pro’s view

    6. Conclusion

    • In a nutshell, Upstatement is quite a good website as it exceed well in it’s design and features while giving an user friendly experiences. However, uniting the content of the navigation bars and having a more neater layout is also a crucial part to enhance the experience for the users
    B. Website Analysis 2

    Konpo (from css winners website)

    1. Purpose And Goals

    • Konpo is a full stack design studio who is also an award-winning software design team specialized in branding, websites, products and systems from 0 → 1 for Startups and Fortune 500 Companies.
    Figure 2.2 Konpo main page

    2. Visual Design And Layout

    A. Colour Palettes

    i. Pros

    • Through my observation, black, white and purple is the main colour palettes in Konpo’s website as there are widely used in the pages and the navigation buttons. 
    • Black and white color scheme is a popular choice in web design as it can make typography, images, and other visual elements stand out while simplify user choices. 
    • Besides, using a purple color palette can help the website stand out and create a unique, memorable experience for the users.

    Figure 2.3 Colour palettes

    Figure 2.4 Colours used in Konpo

    Figure 2.5 Colours used in Konpo

    B. Typography

    i. Pros

    • The designer limited the fonts for the webpage into 1 types of fonts however different sizes of fonts are designed to differentiate its heading, sub heading and body therefore the overall outlook of the webpage is clean and easy to read.
    Figure 2.6 Fonts in Konpo

    Figure 2.7 Fonts in Konpo

    C. Layout

    i. Cons

    • The website layout features clear images and interactive elements with captions below or beside them. The overall layout for Konpo website is amazing as the scales, space and propotions are evenly arranged. However, just a few parts in the website appears too much to the right for its alignment.

      Hence in my opinion, I would recommend to adjust the spacing to clear off the excessive space to let users have a more comfortable view

      Figure 2.8 Layout

      Figure 2.9 Layout

      3. Functionality And Usability

      A. Functions

      i. Cons

      • The website features a menu bar which give excess to the sub webpages. Besides on the top right, there’s a CTA button which leads customers to place their inquiries and orders.

      • However, I believe that the webpage is missing a navigation bar, forcing users to scroll through the entire website to access subpages. Additionally, there is no 'Go Back' button, requiring users to scroll back from the top to return to the previous page.

      Hence in my opinion, I would recommend to add a navigation bar to enhance a user’s experience and convenience.

      Figure 3.0 Functions

      B. Interactive Elements 

      *For the video example, pls watch at the slide below cause the file size exceed the maximum size

      i. Pros

      • The overall website design for Konpo involve many features with creative interactive elements to attract their users from boredom. While scrolling down in Konpo’s website, users get to experience many new interactive and new appearances like getting a new experience in every scroll.

      4. Content Quality And Relevance

      i. Pros

        • The contents in Konpo are well organised presenting useful informations to their users. There are sub pages which introduce the business more to the users like their feedback section and the workers in the team. Konpo also presents pass work examples to users so that future customers can rest assured when leaving the job to them.

        Figure 3.1 Example of pass work

        Figure 3.2 Feedbacks

        5. Website Performance

        i. Pros

        • The overall loading performance for Konpo was generally well as it works quite swiftly. Besides that the transition between web pages were also smooth. Konpo is also compatible to different browsers and devices which are convenience for all users

        Figure 3.3 From Poco X4 Pro’s view

        Figure 3.4 From Macbook Pro’s view

        6. Conclusion

        • In a nutshell, Konpo is quite a good website as it exceed well in it’s design and creative interactive elements. However, adjust the spacing to clear off the excessive space and adding a navigation bar is also a crucial part to enhance the experience for the users

        FOR A MORE DETAIL ANALYSIS


        EXERCISE 2⇒ WEBSITE REPLICATION

        For our second exercise, Mr Shamsul introduced Website Replication to us, which we are needed to replicate existing websites and analyse website structures. Besides, this exercise will help us develop our design skills using software such as Photoshop or Adobe Illustrator, and gain insights into web design best practices. 

        For this task, we are required to

        • Replicate TWO existing main pages of the websites given in the link below 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. 
        • We can use any image from stock image or free stock icon. The image that you will be using does not have to be an exact image from the original website. We may replace it with a similar image. Focus on the layout, type style, and color style. 
        • To find similar typefaces/fonts, you can download fonts from Google Fonts. You may need to screengrab the website and can begin to replicate the page.

        WEBSITE REPLICATION 

        1. Morgan Stanley

        To begin the exercise, I took a screenshot of the website. To grab the screenshot we were taught to Right click the webpage>Click inspect>Select the hamburger icon>Select run command>Select run>Type in Full screenshot

        Figure 3.5 Website Screenshot

        Then, I started to inspect the website to have a better understanding of the structure and gathering all the resources.

        Figure 3.6 Website Inspection

        After that, I started laying out my website's layout and structure with the help of Adobe Illustrator. I started with the heading which is the title, the navigation bars and icon. Then, the body and the story cards of the website. Lastly, the footer and the social media icons. After setting the layout, I inserted the images to their responding places.

        Figure 3.7 Overall Website Layout

        There are three type of fonts used in Morgan Stanley's website which are Karla Regular, Karla Bold and Ms_Gloriola.

        Figure 3.8 Fonts Used
        WEBSITE COMPARISON
        Left → Replicate 
        Right → Original

        Figure 3.9 Website Comparison

        FINAL WEBSITE REPLICATION

        To have a clearer look, pls click
        https://drive.google.com/file/d/1XhhVY-YmS92NkIWnbuE4vPGmVeLMvUKI/view?usp=sharing

        Figure 4.0 Final Website Replication

        2. Ocean Health Index
        Figure 4.1 Website Screenshot

        Then, I started to inspect the website to have a better understanding of the structure and gathering all the resources.

        Figure 4.2 Website Inspection

        After that, I started laying out my website's layout and structure with the help of Adobe Illustrator. I started with the heading which is the title, the navigation bars and icon. Then, the body and the story cards of the website. Lastly, the footer and the social media icons. After setting the layout, I inserted the images to their responding places.

        Figure 4.3 Overall Website Layout

        There are three type of fonts used in Morgan Stanley's website which are Helvetica, Montserrat and Arial
        Figure 4.4 Fonts Used
        WEBSITE COMPARISON
        Left → Replicate 
        Right → Original

        Figure 4.5 Website Comparison

        FINAL WEBSITE REPLICATION


        Figure 4.6 Final Website Replication (PDF)

        EXERCISE 3⇒ CREATING A RECIPE CARD

        For this exercise, we are needed to creating a recipe card using software such as Adobe Dreamweaver and uploaded to Netify upon completion.

        For this task, we are required to,

        • A recipe's ingredients and instructions in a visually appealing format. Choose ONE recipe from the link below.
        • 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
        • 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.
        • Use your creativity to make the page look appealing and interesting

        DIGITIZATION

        From the link provided by Mr Samsul, I have decided on doing a recipe on the creamiest cauliflower soup from 101 Cookbook.

        Link to 101 cookbook
        https://www.101cookbooks.com/creamiest-vegan-soup/

        Figure 1.1.1 101 Cookbook

        I started by keying in all the infos of the recipe into Adobe Dreamweaver. 

        Figure 1.1.2 Typing In Infos

        I have divided the recipe into 5 sections. For the first section, I have added a hamburger menu and a search bar for viewer to get more infos and navigate themselves throughout exploring the websites. I also designed the first section to have a brief introduction of the recipe so that viewers have a first view of the main subject of the page.

        Figure 1.1.3 First Section

        For the second section, I designed the page to have a more elaborate explanation and tips on how to make the recipe. 

        Figure 1.1.4 Second Section

        For the third section, I had inserted the nutrition infos and ingredients list so that viewers can have a first-hand understanding on the diet to prevent the lack of ingredients or sensitivity toward specific ingredients. 

        Figure 1.1.5 Third Section

        For the fourth section, the step by step of the instruction on how to cook the recipe is placed.

        Figure 1.1.6 Fourth Section

        Figure 1.1.7 Fourth Section

        Figure 1.1.9 Fourth Section

        Lastly for the last section, I have placed the feedback comment and the subscribe my newsletter column so that viewer may give us some feedback during their visit.

        Figure 1.2.0 Fifth Section

        After filling in the infos, I added <style> to the html. For most of the infos, I added a container attribute to it as it looks more nearter as they are align center in the box.

        Figure 1.2.1 <style>

        For the overall layout, Playfair Display has been used for h1, h2 and h3  text while Montserrat has been used for p and li. the overall alignment is also set as align center so that it look more clearer. The colour white and black is also commonly used in the website while the color red is used in CTA buttons.

        Figure 1.2.2 Text Styles

        Besides, I also use <div class>=<"card"> as well as<ul><li> attributes so that infos can be presented clearly. I have used <div class>=<"card"> in the step by step instruction while <ul><li> in the nutrition and ingredients list where infos can be express clearly by creating a bullet list.

        Figure 1.2.3 Bullet Point & Cards

        FINAL DIGITIZATION

        After completing the task in Adobe Dreamweaver, I have uploaded the html & css to Netify. 



        Comments

        Post a Comment