Label

Interactive Design: Exercise 1

04/23/2025  - 04/30/2025 (Week 1- Week 2)

Katherine Alexandra Sutanto / 0373585
Interactive Design / Creative Media / School of Design
Exercise 1 / Website Analysis

TABLE OF CONTENTS

1. Lectures

2. Instructions

3. Task

4. Reflection


LECTURES

  • Week 1: No lectures



INSTRUCTIONS




EXERCISE 1: Website Analysis



In order to accomplish our first exercise. We need to choose 5 websites from the links given. 

We are assigned to review the website that we've selected, taking notes and analyzing its design, layout, content, and functionality as well as identifying the strengths and weaknesses of the website.

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.

Requirements:
  • Write a brief report summarizing in no less than 200 words for each website analysis. 
  • Include a screen capture of each section or page of the website to explain.


WEBSITE 1 - Kisses Kisses Matera by EGO55

 

 

    • Purpose & Goal
      Baci Baci Matera is an interactive website that showcases their cosmetic and personal hygiene products, their corporation is located in Matera, Italy.

      Baci Baci corporation is aiming to establish and support the rehabilitation of people suffering from pathological dependencies and/or mental illness. They provide therapy courses which are geared towards psychological and social rehabilitation, guiding individuals to learn skills that will help them recover self-esteem.

      The website provides the informations regarding details of the products, their background, feedbacks/comments from customers and the contacts.

    • Visual Design and Layout




      Color
      The overall color palette of the website is to be consistently soft throughout the whole page which creates aesthetic and harmony. The main colors include, light blue, mud orange, mold green, and yellow. Each color is in low saturation which keeps the vibe of the product.

      Typography
      The typeface that is included consistently for the headline is a type of Script Fonts . Usually in a form of handwriting or calligraphy. The average size of texts used is 155pt.





      For the main contents, usually in the form of paragraphs or additional buttons for jump links, the typeface used is a type of  Sans-Serif . The average size of the text is 16pt.



Imagery 
The website's showcases are in the form of slideshows and photography to emphasize the graphics and design happening on the page. Photography taken are models presenting the product itself, or the product's image itself as well as minor graphics added alongside it.


Layout
The website features identical minimalist design in particular pages contexts. The main page displays a menu bar page on top of the screen. Pictures are usually showcased on the left while the headline and contents featuring the signature typefaces ( Script Font & Sans-Serif ) are written on the right. 

 

 

    • Functionality and usability
Navigation: The menu bar is straightforward and clear to be discovered and easy to lead us to a desired page.

Interactive elements: There's a lot of interactive buttons to lead us, such as the bar to the social media. 




    • Quality & Relevance 
Quality: The website is well designed and organized which comes off high quality. It is also easy to navigate users to necessary contents of the website. 

Relevance: The website generally showcases the purpose of their corporation. Such as the details of their products and more information about their corporation.

    • Website's Performance
Load time: Generally, this website's loading time is fairly smooth and fast, both on laptops/PCs and mobile phones. Though, the graphics are at a slower loading rate in mobile phones.


Responsiveness & Compatibility: The website both works for laptop/PC and mobile phone's format. 


WEBSITE 2 -  Eshikoto  by FunTech inc. 

 

  • Purpose & Goal
Eshikoto is an interactive website that features the information and details of their corporation.  The name "Eshikoto" is a sake brand under the corporation by Ishidaya Nizaemon called Kokuryu Sake Brewery. 

Eshikoto corporation is aiming to represent the beauty and origin of their homeland in Japan, Eshimoto. Kokuryu Sake Brewery, which produces Eshikoto , has been rooted in Eiheiji Town, the land of the underground flow of the Kuzuryu River, for 220 years and has been honing its skills. With gratitude and admiration for the water source, ESHIKOTO was built in a place where the Kuzuryu River can be seen, with the hope that it will become a place where the natural blessings brought by the Kuzuryu River can be realized and disseminated as a distinctive food culture and experience.

 
  • Visual Design and Layout

 

Color
The overall color palette of the website is to be consistently soft and low saturated throughout the whole page which creates aesthetic and harmony. The main colors include, light grey, light blue, gray and blue-ish grey. Each color is in low saturation which keeps the vibe of the product.

 

Typography
The typeface that is included consistently for the headline is a type of  Times New Roman  . Usually in a form of standard typing font. The average size of texts used is 20-50pt. 

For the main contents, usually in the form of paragraphs or additional buttons for jump links, the typeface used is a type of   Sans-Serif . The average size of the text is 12pt. 

 

Imagery 
The website's showcases are in the form of slideshows and photography to emphasize the graphics and design happening on the page. Photography would be like the environment around the stores to emphasize their goal of respecting their homeland's beauty and culture.

 

 

Layout
The website features minimalist and straightforward design. Simple background with the logo at the top left and the menu on the right, with the contents taking up the whole screen without too many graphics.

 

 


  • Functionality and usability

Navigation: The navigation is pretty straight forward. However, there's no bar to making it look as visible as it needs. Though, the menu would still appear no matter how far you scroll through the page.

Interactive elements: There's a lot of interactive elements you can click and visit on, such as links to visit more details of their corporation. 

 


 

  • Quality & Relevance

Quality: The website shows off the minimalist design yet very appealing and interesting to interact with as they have 3D or animated slideshows to showcase their corporations. Overall, this website comes off high quality and well designed. 

Relevance: The website generally showcases the details, background and more of necessary information of the corporation. Such as the introduction, the purpose, the shop details, etc.

  • Website's Performance
Load time: Generally, this website's loading time is fairly smooth for both laptops and mobile phones. There's not much graphics to load on other than the animation of the slideshows

Responsiveness & Compatibility: The website both works for laptop/PC and mobile phone's format. 



WEBSITE 3 -   Bleibtgleich  by Maksym Bleibtgleich


  • Purpose & Goal
Bleibtgleich is a website that features the creator, Maksym Bleibtgleich's portfolio in his specialty in UI/UX. The purpose of the website is to show his passion towards creating user-friendly and visually appealing websites, especially using webflow. With his website, it shows his goal and proof of how dedicated Maksym is to improving his skills by exploring new tools and approaches while paying close attention to details in both professional and personal projects.


  • Visual Design and Layout

 

 

Color
The overall color palette of the website is to be very vibrant and bright throughout the whole page which creates the chaotic energy. The main colors include, white, red, and gray. Each color plays its role in creating the vibe of the website.

 

Typography
The typeface that is included consistently for the headline is a type of  Sans-Serif in bold. Usually in a form of casual or standard font. The average size of texts used is 50-70pt.   

 


For the main contents, usually in the form of paragraphs or additional buttons for jump links, the typeface used is a type of   Sans-Serif  . The average size of the text is 17pt. 


Imagery 
The website features a page that shows pictures which comes with a short animation to show plenty of images at once. The images are featuring his photography and graphic designs.

 

Layout
The website's layout has a chaotic nature and composition. It features random positions as it plays with the typography or texts involved. It serves a messy layout as the whole aesthetic of the website. 


  • Functionality and usability

Navigation: The navigation may be confusing to find since the navigation itself was small and partially invisible unless the mouse cursor was touching the menu as it was placed at the top part of the website. 

Interactive elements: There are plenty of elements that can be interacted with, such as the menu bar itself and the navigation to further details of information.

 


  • Quality & Relevance

Quality: The website shows off the creativity and madness that is happening on the screen alongside the interactive elements. Overall, the website alone is a high quality and well made.

Relevance: The website is generally to show its capability in this specialization of UI/UX, specifically in programming and designing websites. This website acts as one of his portfolio.

  • Website's Performance
Load time: Generally, this website's loading time is fairly smooth for both laptops and mobile phones. Despite the amount of graphics and animation, it takes a decent amount of speed to load the whole content.

Responsiveness & Compatibility: The website both works for laptop/PC and mobile phone's format. 



WEBSITE 4 -  Lilfrogeth  by 0XFUNGO


  • Purpose & Goal
LilFrogeth is a website that's purpose is to showcase and narrate a storyboard and the art itself. The goal of this website is to act as a portfolio or a canvas for the artist and to promote one of his works. LilFrogeth not only displays the artist's creative talents but also serves as a dedicated platform to feature and elevate one of his signature works, inviting viewers to explore and connect with the art on a deeper level.

 

  • Visual Design and Layout

 

Color
The overall color palette of the website is to be very vibrant and bright throughout the whole page which creates the chaotic energy. The main colors include black, pastel yellow and light neon green. Each color plays its role in creating the vibe of the website.

 

Typography
The typeface that is included consistently for the headline is a type of  Sans-Serif in bold . Usually in a form of casual or standard font. The average size of texts used is 200pt.  

For the main contents, usually in the form of paragraphs or additional buttons for jump links, the typeface used is a type of     Sans-Serif   . The average size of the text is 10pt.  

  

 

Imagery 
The website features graphics and digital art showcase as the whole content. Mainly for the purpose of storytelling. While showcasing, each digital drawings in slideshows are trasitioned through animation, which creates more personality to the website's showcase.

  

 

Layout
The website's layout is fairly neat as the pictures/digital showcases that is taking over the website. The graphics used are minimal and mainly focused on the content.


  • Functionality and usability

Navigation: The navigation can be found at the top part of the website. It is straightforward, easy to navigate and easy to access.

Interactive elements: There are plenty of elements that can be interacted with. Such interaction elements would be labels to more information of the artists behind the website.

  • Quality & Relevance

Quality: Overall, the contents itself that is being showcased are quite neat and well made and with the presentation happening in the website such as the labels, graphics, it's suffice to say that this is a high quality website.

Relevance: The website is generally to show it's purpose of being an art and narative showcase and promotion of the artist's work, which already hits the point of the website.

  • Website's Performance
Load time: With the minimal use of graphics in the website, both laptop/PC and mobile phone devices seems to adapt and has a smooth load time. However, mobile phone devices may has a slight delay in loading the animation of the slideshows.

Responsiveness & Compatibility: The website both works for laptop/PC and mobile phone's format. However, as in presenting the main contents, mobile devices couldn't access the whole picture as the main showcase are being cropped by 40-60% and therefore not being shown fully throughout few of the pages.



WEBSITE 5 -  Warhol Arts by Blacklead Studio


  • Purpose & Goal
Warhol Arts is a website that it's purpose to advertise their corporation, specifically their art studio, they generally showcase their graphic designs based on historical or known photography which they shown in their website. The website also has another goal of attracting audiences, typically to welcome new or potential audiences to their art studio/gallery and expo.


  • Visual Design and Layout

 

Color
The overall color palette of the website has a strong representation of the vintage style, it is vibrant and straightforward but not loud, instead it creates harmony to create the desired vibe. The main colors include, black, red, and beige. 

 

Typography
The typeface that is included consistently for the headline is a type of Champion Gothic in . Usually in a form of long and stretched vertically typeface. The average size of texts used is 150-200pt.  

For the main contents, usually in the form of paragraphs or additional buttons for jump links, the typeface used is a type of Champion Gothic . The average size of the text is 10-20pt.  

 

Imagery 
The website features animated slideshows that showcases the graphic designs the corporation produced, accompanied by graphics. Graphic designs would include photographies, digital drawings and many more.
 

Layout
The website's layout is rather minimalistic as in design perspective. Yet it sparks through colour, animated slideshows and and graphics.  The main page displays a menu label page on top right of the screen.
 
 
  • Functionality and usability

Navigation: The navigation can be found at the top right part of the website. However, the PC/laptop format appears to be more confusing compared to mobile devices, as there are no bar or direct label unlike mobile, i personally mistaken the other words above as the menu labels instead.

Interactive elements: There are plenty of elements that can be interacted with. Such interaction elements would appear as a jumplink to a desired pages such as their social media page, the page to purchase the gallery tickets, etc.




  • Quality & Relevance

Quality: This is a really well made website, from the design perspective to the contents it showcased. Not to mention the amount of animated slides as you scroll down to each pages and it really captures the intention of keeping it's aesthetic in a neat manner. Overall, this website came off high quality and enjoyable to visit anytime.

Relevance: The website is generally to show it's purpose of being an advertisement of their art studio alongside the artworks itself.

  • Website's Performance
Load time: Despite of many graphics involved in the website, the loading time are pretty smooth and quick for both laptop/PC and mobile devices.

Compatibility: The website both works for laptop/PC and mobile phone's format.




REFLECTION

During the first week, we were introduced to this particular assignment as a brief opening to how a website work by it's purpose and goal. To start with, i would value design more than an actual goal to why we design a thing in the first place, therefore this assignment really widen my perspective and my knowledge in design. It really helps my logic with how a website or a platform in general would impact or contribute to the audiences so as far as I'm researching deeper to each 5 websites, I now able to understand and empathize easily to how a design matters, I learnt that design is not just all about graphic values to attract audiences, it's also crucial to understand if a design is readable or easy to understand. In conclusion, this assignment is a great start for us to get an opening of this module.

 

Label:

Komentar

Posting Komentar

Postingan Populer