Interactive Design: Exercises
Ameera Rihana binti Remy Ansara
Bachelor of (hons) in creative media
Exercises
INSTRUCTIONS
Exercises
Week 2
Website Analysis
Recap
Choose FIVE (5) 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.
Week 2
Website Analysis
Recap
Choose FIVE (5) 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.
__
Website #1: AVISION
This website summarizes a collective of talents introducing their artwork to gain recognition and expanding their platform in the industry. The interface of the website is quite straightforward with an approach of minimalistic and simplicity. Thus, it is communicated well for the users.
The website uses off white as their main background color with a splash of colors from the images in order to create visual contrast. Off white is also purposely used so that it does not become too striking and to give a sense of professionalism.
Fig 1.1 Theme & Color
A font with thin strokes and sans-serif is chosen so that it does not look too heavy which gives proper readability. The website also keeps in mind their design logo "AVISION", to blend in with the typeface. The type of font remains constant throughout the website by sticking to a single typeface.
Fig 1.2 Logo & Typeface
Simple animations are added to interactive buttons when hovering them to draw attention to important actions. This will help to guide the users towards where the designer wants them to click. With small transitions, they make interactions feel smoother and natural. The logo itself is also a button to send users back to the main page. In addition, the images have a flair of cool animations when it is interacted.
Fig 1.2 animation
The website's function is to target new hires by showing a glimpse of their specialization to reassure them of what to expect and what kind of people they are working with. They wish to expand their team by extending their collaboration to other talents. For further clarification or interests, the website adds a contact page and a short form to join their team. The website also provides a specific page for showcasing talents by filtering them according to their specializations if users wish to view specific contents.
Fig 1.3 Join page
Fig 1.4 Contact & Social Media
Fig 1.5 Filters
The navigation bar is placed nicely at the top to provide immediate visibility and to ensure quick access to important links Thus, it helps users to navigate the website much easier.
Fig 1.6 Navigation bar
The website is heavily focused on providing a good quality of content and information about their goals and talents. Therefore, the visuals are directed in a simple way with less elements to contribute negative spaces. The accuracy is good by adding questions with answers about their team and mentioning services for each talents. The website is also well-organized and neat.
There are no issues with the performance and load times. The website responds normally with smooth transitions and is compatible with other devices too.
Fig 1.7 Phone (POV)
Website #2: Laguna Al-Sha'ab
The website's goal is to promote their restaurant called Laguna Al-Sha'ab by presenting a creative kitchen that uses fine dining to connect flavors and traditions from different cultures worldwide. The color of cream and deep navy blue are used to bring out the richness that compliments with one another to suit the theme of the restaurant. Thus, it looks more luxurious and expensive.
A font with serifs and bold typeface is widely used in the titles to create emphasis. In contrast, the body text uses a regular typeface with sans-serif in justified formation. The logo's typeface matches the titles and remains its consistency throughout the website. The images are captured in high quality to compliment the background of the website.
The website uses many transitions to texts and images when scrolling down through each pages. It gives a flipping effect like browsing a brochure. They also add slide transitions to each cuisine with summarized description. With a closer look, the typeface changes its color when it overlaps with the image.
Comments
Post a Comment