Interactive Design / Final Compilation & Reflection

on
23.04.2024 - 23.07.2024 (Week 1 -Week 14)
Ng Kar Yee / 0367743
Bachelor of Design (Honours) in Creative Media
Interactive Design / Final Compilation & Reflection

SUBMISSION

TASK 1
EXERCISE 1⇒ WEB ANALYSIS
23.04.2024 - 14.05.2024 (WEEK 1 ~ WEEK 4)

Link to TASK 1's blog:
https://0367743.blogspot.com/2024/04/interactive-design-task-1.html

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

        1. Morgan Stanley
        https://www.morganstanley.com/

        WEBSITE COMPARISON
        Left → Replicate 
        Right → Original

        Figure 3.9 Website Comparison

        FINAL WEBSITE REPLICATION

        To have a clearer look, pls click
        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

        FINAL DIGITIZATION

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

        PROJECT 1 
        PART 1⇒ PROTOTYPE DESIGN (DIGITAL RESUME/CV)
        14.05.2024- 28.05.2024 (WEEK 4 ~ WEEK 6)

        Link to PROJECT 1 & 2's blog:

        https://0367743.blogspot.com/2024/05/interactive-design-project-1.html

        FINAL DIGITIZATION

        Figure 1.1.0 Final Digitization

        FINAL DIGITIZATION ON FIGMA

        PROJECT 2 
        PART 2⇒ WORKING WEB PAGE
        28.05.2024 - 11.06.2024 (WEEK 6 ~ WEEK 8)

        WEBSITE VIEW

        MOBILE VIEW

        FINAL HDML STRUCTURE

        FINAL CSS STRUCTURE 

        FINAL LINK TO NETIFY

        https://sprightly-crepe-163c66.netlify.app/

        FINAL PROJECT
        EXERCISE 1⇒ WEB ANALYSIS
        11.06.2024 - 23.07.2024 (WEEK 8 ~ WEEK 14)

        Link to FINAL PROJECT 's blog:

        https://0367743.blogspot.com/2024/08/14.html

        WEBSITE VIEW

        MOBILE VIEW

        FINAL HDML STRUCTURE

        FINAL CSS STRUCTURE 

        OVERALL LINKS TO BLOG

        Link to TASK 1's blog:

        https://0367743.blogspot.com/2024/04/interactive-design-task-1.html

        Link to PROJECT 1 & 2's blog:

        https://0367743.blogspot.com/2024/05/interactive-design-project-1.html

        Link to FINAL PROJECT 's blog:

        REFLECTION

        EXPERIENCES

        Learning Interactive Design was quite a rewarding experience for me as I get to learn coding and experience with CSS and HTML.Starting a new module on Interactive Design was like entering a new world to me. At first, I didn't know we can use coding to design web pages. At first, I had little to none of the knowledge on how to do coding nor use coding app like Adobe Dreamweaver. However, it quickly evolved into an immersive experience of visual discovery. 

        I felt a bit confusing at first, figuring out how to do coding nor designing web pages using CSS and HTML. However by practicing and geeting guidances from my lecturer Mr Shamsul, I learned and improved along the way.

        OBSERVATIONS

        I found out that coding wasn't a simple task, it's about creating and designing a page that may attract as well as interact with the viewers. For example using the hamburger icon and navi to guide users to the content. Besides, I also discovered how to be more patient and to have a better problem solving skills as a designer so that users can enjoy the best experiences.

        FINDINGS

        One of the most profound revelations during this learning experience was understanding the power of interaction holds in sending out messages to the users. Interaction in user experience may transform digital design from just mechanical and cold experiences to natural and personal.

        Comments

        Post a Comment