Interactive Design / Exercises

 April 24, 2024 - 

24.04.2024 –  / Week1 – Week

Ryoma Kato / 0365874

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


MIB



Lectures


Week1 - Week2:

 


 Week3:



Week4:



Week5 - Week6:

 


Week7:



Exercises


Exercise 1 - Web analysis 

Web site 1: https://nicee.com.ua/

Purpose & Goals

The main objective of the website is to motivate the visiting audience to purchase ice cream and ice cream treats. The website will provide detailed information about different types of ice cream and ice cream treats, attractively communicating their taste, characteristics, and quality of ingredients. The website will also utilize fun pop-up animations and visual elements that will catch the viewer's eye and make the products more appealing. Furthermore, by presenting special offers and discount information for seasonal and event-specific information, the website stimulates viewers to buy the products and encourages them to purchase them. In this way, the website aims to be an attractive platform for communicating product appeal to viewers and encouraging purchasing behavior.


Visual Design & Layout

The visual design of this website creates a very inviting atmosphere. The layout is simple and straightforward, with all icons and sections of the website appropriately placed. The logo is clearly displayed in the upper left-hand corner, making the brand easily identifiable. The website uses predominantly warm-colored backgrounds that are easy on the eyes, creating a visually pleasing atmosphere. The typography is also well-organized and designed to be easy for users to read. Headings are prominent and line spacing is appropriately adjusted.

In addition, small moving animations have the effect of creating a sense of loveliness and interest for visitors to the site. These animations help draw the user's eye and increase interest in the website's content. Overall, the visual design of this website is visually appealing, yet easy to use and informative.


Functionality & Usability

When scrolling down to see more details, the ice creams on the screen move, creating an exciting effect for users as the page transitions. The contact form for reaching out to the company is straightforward and user-friendly, encouraging visitors to contact for more information.


Content quality & Relevance

The content is highly accessible, offering detailed information ranging from introductions to the company's products and services, to in-depth descriptions and contact details. Each section is succinctly summarized, prioritizing readability while adopting an engaging design.


Performance

The website is designed to be easily viewable from any device, ensuring that content is accessible regardless of the device used. It boasts short loading times and efficient resource utilization.


Recommendation

Without a button to return to the top of the page, users either need to scroll all the way up or reload the site if they want to return to the homepage, which seems inefficient. Adding a feature that allows users to return to the top of the page with one click would enhance user convenience. Additionally, there's very little information on pages other than the homepage, with some supplementary information provided on the homepage itself. It might be beneficial for user experience to consolidate all the information on the homepage rather than dividing it into separate pages, enabling visitors to access all the content at once.




Web site 2: https://backstage.bonjovi.com/

Purpose & Goals

The main purpose of this website is to showcase information about the studio for band rehearsals and attract new clients. Visitors can find information such as introductions to past users of the studio, an overview of the studio's facilities, booking options, services offered, and contact details.


Visual Design & Layout

The website exudes a design reminiscent of the music industry from the 1800s to the 1900s, primarily featuring a black background with white text. Typography is clean and easily readable across all pages, employing consistent or closely related fonts throughout for enhanced readability overall.

The images used within the site serve not only as decorative elements but also as previews, providing users with a quick glimpse of the content awaiting them upon clicking. This enhances user convenience by offering a preview of what information lies ahead before navigating further into the pages.


Functionality & Usability

While there are instances where the usability differs, causing some confusion, overall, the website is intuitive to navigate. There are playful features, such as being able to click on furniture to view information or having the color of the item change when the cursor hovers over it, enhancing user engagement. Despite occasional discrepancies in usability across pages, users can generally navigate the site with relative ease. These interactive elements not only capture users' interest and enhance the appeal of the site but also make accessing important information easier. With this combination of features, users can efficiently navigate the site while enjoying the overall experience.


Content quality & Relevance

The content provides detailed information on studio rental services, introductions to past studio users, merchandise sales, studio facilities, and contact details, among other aspects. Each section is comprehensive, offering relevant information that potential clients would find valuable.

The organization of the content is logical and easy to navigate, with clear headings and subheadings guiding users through the website effectively. Additionally, rich imagery and client testimonials are incorporated to accurately convey the studio's appeal.

This level of detailed content serves as a crucial resource for potential clients to understand the studio's features and services, helping them make informed decisions and fostering interest in the studio.


Performance

The website is compatible with various browsers, but there's a slight delay in loading times.


Recommendation

The button to return to the top screen is somewhat difficult to locate, so it would be convenient for visitors if we moved it to a more noticeable position or labeled it more clearly as a "Return to Top" button. Additionally, the way information details are accessed varies from page to page, with some requiring clicking on items to view details while others allow clicking on furniture for more information. It might be beneficial to unify this approach to reduce user frustration.

Moreover, while it's great to have a feature displaying the percentage of loading progress during page loading, the site seems to be overly elaborate, resulting in longer loading times. Trimming down unnecessary elements to make the site load more seamlessly would likely improve the user experience.





Exercise 2 - Web replication

Chose any two web site link and copy it by using Illustrater.

Link1 (https://www.morganstanley.com/)
Link2 (https://www.oceanhealthindex.org/?authuser=0)

Link1
(Link1 Editing screen)

(Left: Original , Right: Copy)


Link2

(Link2 Editing screen)

(Left: Original , Right: Copy)




Exercise 3 - Create a recipe card using HTML and CSS

For this exercise, we need to choose recipe from 101 Cookbook and make a recipe card using by HTML and CSS.
I chose a recipe of making "Yellow Cake with Chocolate Frosting" from 101 Cookbook.




(The image of html editing screen)

(The image of css editing screen)

(The Image of web site that I made)



Link to completed website: 


Comments

Popular posts from this blog