Labels

EXERCISE 1

Week 1-Week 6 (23/04/2025-21/05/2025)

Jennifer Michelle Hiendrawan/0374682

Interactive Design/Bachelor of Design (Honours) in Creative Media

Exercise1

TABLE OF CONTENTS 
1.Lecture
2.Instructions
3.Task
4.Feedback
5.Reflection

LECTURE

Week 1
No Lecture

INSTRUCTIONS

TASK


Visual design and Layout
Baci-Baci website is designed with playful vibes and vibrant colors, creating an eye-catching experience and strong visual impact. This approach users' attention, providing greater interest in their products. The website used contrasting colors for typography, which effectively draw the viewer's eye to the emphasized elements. Most of the pages use orange color for the background or use a little bit orange color to boost enthusiasm and encourage action, such as making a purchase. The use of sans-serif fonts contributes to a modern, minimalist aesthetic, enhancing readability, and has minimalistic feel. The product images on the website are high quality, with clear details and excellent lighting. The photos are neither too dark nor too bright. Some pages use full screen photo and some of it use split screen layout. The full screen photo helps to deliver a powerful and clear images, while the split screen layout separates the photos and text so that we can see it neatly and not confused.

Fig 3.1 Sans Serif Typography and Split Layout (Week 1, 23/04/2025)

Fig 3.2 Some Orange Color (Week 1, 23/04/2025)

Fig 3.3 High Quality Images (Week 1, 23/04/2025)

Fig 3.4 Full Screen Layout (Week 1, 23/04/2025)

Performance
The website does not have a long loading time. In one click, it will immediately display what we want. The website is compatible for all types of mobile phone, including ipad, and other devices. However, the display becomes different when we use mobile phone and ipad. When we open the website using Mobile Phone, there is only 1 product displayed, even though there should be 4 products. Meanwhile, when we open the website using an iPad, 4 products are displayed but the products are very small and the design becomes weird.

Fig 3.5 Mobile Phone Screen (Week 1, 23/04/2025)

Fig 3.6 Ipad Pro Screen (Week 1, 23/04/2025)

Fig 3.7 Laptop Screen (Week 1, 23/04/2025)

Purpose and Goals
According to the ‘about us’ page, the purpose and goals from the website are they wanted to introduce to the world about donkeys that have great therapeutic value and because of onotherapy , their course has produced good results. Moreover, their goal is to promote their products to the public and make money from the purchase of their products. The website provides information about bacibaci product that include the ingredients, instruction for use, and also some explanation about the products. The website is effectively communicated to the user, because it uses headlines and sub-headlines with different sizes so that they are more easily understood by readers, using colors, text, and also images that support the content as a whole, and also have good and clear navigation.

Fig 3.8 Products Explanation and Clear Text (Week 1, 23/04/2025)

Functionality and Usability 
The navigation is good and clear enough. It used contrast color, so viewers can immediately see the navigation. The website consists of some interactive elements that makes the website become eye-catching. All of the interactive elements work. The interactive elements on the cover page helps to highlight the products and donkeys that are the main point on the website, therefore emphasized is created and it makes the eyes of the viewers will immediately focus on the interactive elements.

Fig 3.9 Navigation (Week 1, 23/04/2025)

Quality and Relevance
Overall, this website has a good quality. The images are very clear and has a high-quality, the design also explain the products really well. The playful and vibrant colors match the product. When selling a product at a website, using vibrant colors can boost enthusiasm and encourage action. This website targets viewers who are looking for beauty products

Strengths and Weaknesses 
The strength of this website is that this website uses several interactive elements that illuminate their products so that people will focus on the product, then the colors used are very bright so that they can attract the viewers to purchase the products. In addition, the content is very clear, each product is followed by text and also pictures to clarify the product. The font is also easy to read even if you use other devices. However, the weakness is When we open the website using a mobile phone or laptop, the product displayed is only 1 or the product is too small, even though the product is located on the first page which should be used to attract viewers attention.

SECOND WEBSITE: HOMERUN Creative Things

Visual Design and Layout
Homerun website is designed with Elegant and modern minimalist vibes. The website used contrast colors that can emphasized the elements with the bright color. The website overall colors are black, cream, soft purple, orange. The colors used in the design of this website produce a visual balance between dark and light colors, so that it is not monotonous and attracts the attention of the reader. In addition, it gives a professional and elegant impression. The use of sans-serif fonts contributes to a modern, minimalist aesthetic, enhancing readability, and has minimalistic feel and used contrasting colors for typography. The images and videos on the website are high quality, with clear details and excellent lighting, not blurry. The layouts are very varied, this makes readers not bored of reading the website because there are various layouts that can be explored. Some pages used full screen photo, split screen layout, and also grid layout. Grid layout creates symmetrical website with a lot of pictures and informations in one page, while full screen photo helps to deliver a powerful and clear images and split screen layout separate the photos and text so that we can see it neatly.
Fig 3.10 Website Color and Sans-Serif font (Week 1, 23/04/2025)

Fig 3.11 Website Color and Sans-Serif font (Week 1, 23/04/2025)

Fig 3.12 Grid Layout (Week 1, 23/04/2025)

Performance
The website does not have a long loading time. In one click, it will immediately display what we want. The website is compatible for all types of mobile phone, including ipad, and other devices. However, the display become different when we use mobile phone and ipad. When we open the website using mobile phone, the illustration of hat that is the interactive elements is lost, even though these interactive elements can be an interesting thing for viewers because they can create a page that is not too rigid with just texts. Overall, there are no major issues with the performance on the mobile phone and ipad.

Fig 3.13 Phone Display Without Interactive Element (Week 1, 23/04/2025)

Fig 3.14 Laptop Display with Interactive Element (Week 1, 23/04/2025)

Purpose and Goals
According to the ‘about’ page, the purpose and goals from the website are to recognize their shared responsibility in building a more reasonable, fair, and sustainable future. Moreover, they also have a goal based on sports, which is to help athletic organizations and brands, through sport, elevate their iconic status, grow their fan base, and communicate in innovative, responsible ways. The website is effectively communicated to the user, because it uses headlines and sub-headlines with different sizes so that they are more easily understood by readers, using colors, text, and also images that support the content as a whole, and also have good and clear navigation. The website contains complete information about what homerun provide for the company that will be working with them and how to do it.

Functionality and Usability 
The navigation is good and clear enough. Although the navigation is small and located at the top, there is a label 'menu' that can immediately inform people that it is navigation, and there is also an arrow next to the 'menu' label that provides a signal to viewers. Moreover, the website consists of some interactive elements that makes the website become more alive. The interactive elements on the cover page, where there is a video and if we scroll down, it will be bigger helps to create an interesting impression for the first reader which will make people even more curious about the website and read until the end. At the top of the cover page, there is also a scrolling text that emphasized the words there. At the bottom there are also interactive elements where we can change the color and design of the helmet according to what we want. Overall, there are a lot of interactive elements, so that the website design is not monotonous.

Fig 3.15 Navigation and Scrolling text (Week 1, 23/04/2025)

Quality and Relevance
Overall, this a high-quality website where the images and videos has a high-quality. Moreover, the interactive elements also support the content and design, so that it makes it more alive. The contrast and combination of dark and bright colors create an interesting design. The bright orange color represents creativity and cheerfulness in delivering a service. Meanwhile, the cream color reflects elegance, and black symbolizes minimalism, which are all relevant with the content.

Fig 3.16 Interactive Elements (Week 1, 23/04/2025)

Fig 3.17 Interactive Elements (Week 1, 23/04/2025)

Fig 3.18 Interactive Elements (Week 1, 23/04/2025)

Strength and Weaknesses
The strength of this website is that this website has a lot of interactive elements which is perfect because interactive elements make the design not boring and usually viewers will continue reading because they are interested in the interactive elements. In addition, the combination of colors used is also very good. The wide variety of layouts used also shows the creativity and not all website has that. However, the weakness of this website is some interactive elements are missing if we open the website using other devices, though it is the one of the main pointy to attract viewers.

THIRD WEBSITE: Company – Sun Metalon

Visual design and Layout
Sunmetalon website is designed with minimalist vibes. The website used the combination of black and cream colors that results in a perfect and elegant combination. The use of sans-serif fonts contributes to a modern, minimalist aesthetic, enhancing readability, and has minimalistic feel and used contrasting colors for typography. The images on the website are all clear and no blurry. The person’s picture all have good lighting. This website used a lot variety of layout.

Fig 3.19 Website colors and sans-serif font (Week 1, 23/04/2025)

Fig 3.20 Good Lighting Picture (Week 1, 23/04/2025)

Performance
The website does not have a long loading time. In one click, it will immediately display what we want. The website is compatible for all types of mobile phone, including ipad, and other devices. The appearance on mobile phones, iPads, and laptops is no different at all. However, the display on mobile phones and iPads in my opinion is more suitable and good because the display on the laptop leaves too much white space so that the design becomes empty. Overall, it’s all the same, we can even look at the interactive elements when using mobile phone.
Fig 3.20 Phone and Ipad Display (Week 1, 23/04/2025)

Fig 3.21 Laptop Display (Week 1, 23/04/2025)

Purpose and Goals
According to the ‘company’ page, the purpose and goals from the website are reimagining metal recycling with a planet‑positive approach, giving humanity the tools to usher in a new age of metal manufacturing that will deliver local, sustainable, and cost‑effective solutions. The website is effectively communicated to the user, because it uses headlines and sub-headlines with different sizes, with bold and without bold, so that they are more easily understood by readers.

Functionality and Usability 
The navigation is clearly visible at the top of the row, but it is better to give a contrasting color on the menu so that the menu can be seen more clearly. Moreover, the website consists of some interactive elements which I think is quite interesting, where there is a photo and the photo will eventually disappear if we scroll down and will be replaced by the text that appears. There are also interactive elements at the end where the text can appear and move. All the interactive elements can work well, but I think the website is lack of interactive elements because if more interesting elements are added, it might attract more viewers' attention.

Fig 3.22 Interactive element (Week 1, 23/04/2025)


Fig 3.23 Interactive element (Week 1, 23/04/2025)

Fig 3.24 Navigation (Week 1, 23/04/2025)

Quality and Relevance 
The website has a good quality even though it is minimalist. The combination of black and cream colors relevance to the topic. The content aligned with the target audience that want to know more about this kind of information

Strength and Weaknesses 
The strength of this website is that this website looks minimalist but very aesthetic and the information explained is very interesting and clear. However, in the navigation section, maybe something can be added that makes it a bit more contrasting and also that there is still too much white space in some parts that makes the design look too empty. This may reduce the interest of viewers. In addition, the website is lack of interactive elements.


Visual Design and Layout 
Dgress website is designed with cheerful and dynamic vibes. The website used white as the main color that combines with colorful color from the interactive elements, images, and also videos that makes the website more playful and alive. Using white as the main color can make the viewers focus on the content because the visual pop and attract viewers attention. The use of sans-serif fonts makes the website design feels simple, clean, and easier to read even though we look at the website on different devices. The videos on the website can be played and the images also clear.  The colors in the images and videos are very good, contrasting, and balanced. The layouts are very varied; this makes the viewers more interested with the website. The website mostly used asymmetrical layout where the elements positioned off-center, however it creates emphasize to a particular side of the page.

Fig 3.25 Interactive Elements (Week 1, 23/04/2025)

Fig 3.26 Image and asymmetrical layout (Week 1, 23/04/2025)

Fig 3.27 Interactive Elements (Week 1, 23/04/2025)

Fig 3.28 Video (Week 1, 23/04/2025)

Fig 3.29 Interactive Element (Week 1, 23/04/2025)

Performance
The website does not have a long loading time. In one click, it will immediately display what we want. The website is compatible for all types of mobile phone, including ipad, and other devices. However, when i opened using a mobile phone and an iPad, it looks different for the images and text part. On mobile phones and iPads it looks neat and it doesn’t have much white space, while on laptop I think there is too much white space which makes the design a bit empty and boring.

Fig 3.30 Mobile Phone Display (Week 1, 23/04/2025)

Fig 3.31 Laptop Display (Week 1, 23/04/2025)

Purpose and Goals
According to the ‘capabilities’ page, the purpose and goals from the website are helping clients worldwide generate value in their products or services, regardless of their size or industry. They want to help their clients for creating web deisgn, web development, digital branding, digital experiences and also content strategies. The website is effectively communicated to the user, the entire content is easy to understand due to the headline and sub-headline are clear, then there are many images, videos, and interactive elements that makes us be able to visualize it immediately.

Functionality and Usability 
The navigation is good, however I think the navigation is too small and lacks contrast, so maybe people will be a little confused about which one is the navigation. The website consists of a lot of interactive elements, which is good because it allows us to visualize about what is explained on the website and also makes the viewers become more interested in clicking the next page. The duration of the interactive elements is quite long but interesting.

Fig 3.32 Navigation (Week 1, 23/04/2025)
Quality and Relevance
Overall, this website has a high quality. Not all website has a lot of interesting and eye catching interactive elements, however this website gave us a new amazing user experience. All of the images and also videos are relevance with the text, it gave us visualization. Moreover, the overall design suits the theme, it’s very playful and eye-catching, Suitable for attracting clients through good design results

Strength and Weaknesses
The strength of this website is that the interactive elements displayed on the first page look very advanced and guaranteed to increase the viewer's interest. In fact, this website makes its interactive elements a full page. The information conveyed is also quite clear. However, the weakness is that when this website is opened using laptop, there is too much white space in some parts which makes the design suddenly empty and boring. It should be more considered.


Visual Design and Layout 
Leandra Isler website is designed with calming, professional, and aesthetic vibes. The website used warm undertones with beige and green colors as the main color. Beige color creates a minimalist aesthetic, while green means nature, therefore combining both colors providing coziness. The website used contrasting size for typography, which attract the viewers' attention. The use of sans-serif fonts contributes to a modern, minimalist aesthetic, and enhancing readability. The images on the website have good lighting and colors, no blury at all. The saturation of the images also perfect. The website explored and used many kinds of layout, so that it doesn’t look boring.
Fig 3.33 Website Layout, colors, and sans-serif font (Week 1, 23/04/2025)

Fig 3.33 Website Layout (Week 1, 23/04/2025)

Fig 3.34 Website Layout and Images (Week 1, 23/04/2025)
Performance
The website does not have a long loading time. In one click, it will immediately display what we want. The website is compatible for all types of mobile phone, including ipad, and other devices. Overall, I don't see a significant difference if opened using different devices. All of the interactive elements can work for different devices.
Fig 3.35 Phone and Ipad Display (Week 1, 23/04/2025)

Fig 3.36 Phone and Ipad Display (Week 1, 23/04/2025)

Purpose and Goals
According to the ‘about’ page, the purpose and goals from the website is the owner wants to share her experience that she ever had polyarthritis but then healed through various therapies, therefore the website goal is to help other people with physical illness to try their services. By trying their services, people can be healed from illness. The website provides information about their complete services, explanation, and also images to make it look clear. The website is effectively communicated to the user because the design vibes is very suitable for the services offered so that people can feel the peace the message from the website, the images and audio that are there are very helpful, it gives the viewers more visualized about the services offered, along with the explanations using text.

Functionality and Usability
The navigation is good and clear enough. It is located on the center of the website, which is good, however maybe it can be a little bit bigger, so that it will be more visible. The website consists of some interactive elements and all of it works on different devices. The interactive elements enhance the aesthetic of the website and make it looks more interesting.

Fig 3.37 Navigation and Interactive elements (Week 1, 23/04/2025)

Quality and Relevance
Overall, this website has a high quality. The visuals really match the theme and the message, the images and videos are clear and also has a high-quality. The color match the content of the website, which brings calmness and coziness, like what theraphy session should be. This website targets viewers who are looking for theraphy session and other services to heal their illness.

Strength and Weaknesses
This website is one of the websites that used a choice of colors and design vibes that is very appropriate and in accordance with the theme and services offered. This makes me as a viewer immediately feel the calm and coziness of Therapy and other services offered. This website also explains the service by using high quality photos and videos. Moreover, this website still looks the same even though it is opened through various devices. Actually, in my opinion there is almost no weakness, but maybe ittle more interactive elements can be more interesting to look at.




REFLECTION

Experience
I gained a lot of new experience about how to assess a website and what makes a website considered good and also responsive. I now have a picture of how to create and design a website, because previously I had no idea at all about that as someone who had never made a website before.

Observation
I observed that a good website must have a consistent design; for example, if everything is round, then the entire website should be round, and vice versa. In my opinion, the presence of interactive elements also greatly improves the website and makes it more appealing to look at.

Findings
I am beginning to understand that there are many aspects that need to be considered when creating a website.













Labels:

Comments

Post a Comment

Popular Posts