Interactive Design - Lectures and Exercises

The website (https://12wave.com/) has a modern and visually appealing layout with vibrant colours and high-quality images. The layout is clean and organized, making it easy for users to navigate and find products.

Main page contains the website logo, main navigation menu, play button, social media and contact information button.

Figure 3.1&3.2 Main Page (Left) and Game over page (Right)

Featured Work page contains of the past work of the website's workshop. About page contains of a short introduction of the founder of their workshop.

Figure 3.3&3.4 Featured work page (Left) and About page (Right)

The Menu Bar page contain of navigation elements such as directing users to Main page, Featured Work page, About page and Contacts page.

The Contacts page shows a short description and several button include social media (Facebook and X) and also contact information (LinkedIn and Email).

Figure 3.5&3.6 Menu bar (Left) and Contacts page (Right)

1.2 Colour Scheme

This website (https://12wave.com/) contains of Primary colour and Secondary colour (Black, White, Vibrant Accent Colour and Soft Pastel Colour).

Black (#000000): Black is used for text, buttons, and other essential elements, providing good contrast and readability against lighter backgrounds.

White (#FFFFFF): White is used as the background color for most sections, helping to create a clean and modern look.

Vibrant Accent Colours: Used sparingly throughout the website to highlight buttons, links, and important elements. These colors create visual interest and draw attention to key actions.

Soft Pastel Colours: Used to represent different categories or types of elements, creating visual consistency and helping users navigate the website

Figure 3.7 Colour Scheme 01

Figure 3.8 Colour Scheme 02

Figure 3.9 Colour Scheme 03

1.3 Visual Hierarchy and Consistency

The color scheme is consistent across different sections of the website, creating a cohesive and unified visual experience.

High contrast between text and background colors ensures readability and accessibility.

Figure 3.10 Contrast between text and background

Features work are displayed in a grid layout, with clear images and concise information. creating visual consistency and hierarchy.

Figure 3.11 Featured work displayed in a grid layout

Layout and design elements are consistent across the websites, maintaining a cohesive visual identity and user experience. Clear navigation, consistent spacing, and well-defined sections contribute to a user-friendly interface.

2. Content analysis

2.1 Type of Content

Main page shows the website logo and play buttons in the middle of the website. There are also sound and menu buttons on the upper right corner. Copyright text on the lower left corner. Social media and contact information on the lower right corner.

Figure 3.12 Main Page

Figure 3.13 Website logo and Start button

Figure 3.14 Sound and Menu button

Figure 3.15 Copyright text

Figure 3.16 Social Media and Contact Information

Play and Game Over page

Figure 3.17 Play page

Figure 3.18 Game Over page

Featured Work page

This page shows all the past works of the website's team.

Figure 3.19 Features Work (Arrange in grid layout)

Clicking inside, the page shows a short description about the work.

Figure 3.20 Features Work (descriptions)

Inside the page, they provide additional picture and video link to users.

Figure 3.21 Additional pictures (Information about the work)

Figure 3.22 Video link under the additional picture and information

About page

This page inteoduce the founder of their team and shows their service to users. There is also have a play button under the description.

Figure 3.23 Description and Play button

Contact page

This page gives a short description, also social media (Facebook and X), play button under the description and contact information (LinkedIn and Email).

Figure 3.24 Short description and interaction element (Buttons)

2.2 Typography

The font choice of the website (https://12wave.com/) appears to be san-serif typeface, it provides a modern and clean look. Examples are, Montserrat and Open Sans. They are used for accent or decorative purposes, adding variety and visual interest.

Figure 3.25&3.26 Font used in website

Figure 3.27&3.28 Open Sans (Left) and Montserrat

Font sizes are well-balanced, with larger fonts used headings and smaller fonts for body text. Clear hierarchy ensures readability and emphasizes important information.

Headings are bold and prominent, making them stand out and creating visual hierarchy. Subheadings are slightly smaller but still distinguishable from body text. Adequate line spacing ensures readability and prevents text from feeling cramped or overwhelming. Line length is optimized for readability, with an appropriate number of characters per line.

Black or dark gray text on a light background ensures good contrast and readability.

Typography is consistent across different sections of the website, maintaining a cohesive visual identity.

The chosen font and typography ensure readability across different devices and screen sizes. Font size, line spacing, and contrast ratios are optimized for accessibility, ensuring that text is readable for all users.

3. User experience

The user experience on the website (https://12wave.com/) is smooth and intuitive, making it easy for users to navigate and find what they're looking for. The website's design is clean and organized, with a clear menu at the top to help users explore different product categories. The website is responsive, meaning it works well on both computers and mobile devices, so users can browse from anywhere. Overall, the website offers a pleasant and hassle-free experience to users.

3.1 Responsiveness

The website is responsive, which means it works well on different devices like computers, tablets, and phones. No matter what device you use, the website adjusts to fit the screen, so you can easily see everything.

Laptops:-

Figure 3.29&3.30 Laptop layout 01

Figure 3.31&3.32 Laptop layout 02

Figure 3.33&3.34 Laptop layout 03

Tablets:-

Figure 3.35&3.36 Tablets layout 01

Figure 3.37&3.38 Tablets layout 02

Figure 3.39&3.40 Tablets layout 03

Mobile Device:-

Figure 3.41, 3.42&3.43 Mobile device layout 01

Figure 3.44, 3.45&3.46 Mobile device layout 02

3.2 Loading speed

The website loads quickly, which means you don't have to wait long for pages to open. This makes it easy and fast to browse through the different products.

I have test this website in PageSpeedInsights. (https://pagespeed.web.dev/)

Figure 3.47 Page speed (Mobile Device)

Figure 3.48 Page speed (Desktop)

3.3 Ease of use

The website is easy to use and navigate. There's a menu at the top of the page that helps you find what you're looking for quickly. You can click on different categories like Main, Work, About, Contact, and it takes you right to those pages. (Figure 3.10)

3.4 Interaction Element (User Experience)

Play around with the Website 01 (https://12wave.com/)

Video 01 Interaction Element (User Experience)

4. Strengths and Weeknesses

4.1 Strengths

Users-Friendly design. The website has a clean and intuitive design, making it easy for users to navigate and find products.
Visual appeal. High-quality images and a modern layout make the website visually appealing and engaging.
Responsive design. The website is responsive and works well on various devices, including desktops, tablets, and smartphones.
Fast loading speed. Pages load quickly, providing users with a smooth browsing experience.
Clear navigation. The menu and category organization make it easy for users to find what they're looking for.

4.2 Weeknesses

Lack of personalization. The website could benefit from personalized colours based on user preferences.

5. Impact on User Experience

Clean and user-friendly interface. The clean design and user-friendly interface make it easy for users to navigate the website and find the products they're looking for.
Straightforward. The navigation is straightforward at there, the featured word is shown with clear images and descriptions provides users with a straightforward experience.
Limited engagement features. Although the website is lack of extensive engagement features, it still focus on the featured works ensure that users can quickly browse on the works.
Responsive design and fast loadinig speed. Responsive design ensures usability across different devices, and fast loading speed provides users with a smooth and seamless browsing experience.

3.2 Website 02: Equinox Space

According to the casestudy of the workshop regarding to this website, this website is an interactive storytelling website. The workshop of the website is crafting an immersive space survival experience that combines interactive storytelling and gamification.

Website background:

They think that a website needs more narrative-driven experiences, where stories unfold via exploration and user interaction. So they embarked on creating our own interactive story about something awesome: space travel!

They draw inspiration from video games, they created a first-person journey to enhance immersion. They ensured the controls were user-friendly, allowing even those unfamiliar with gaming to enjoy it comfortably.

Equinox is available for desktop and mobile browsers. Thanks to an interaction mode specifically designed for touch screens, the entire story can be experienced on any phone or tablet with just one finger.