Interactive Design: Exercises

Ng Zheng Kai / 0359424

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

Exercises 1 & 2

Exercise 1: Web Analysis

Instructions

Choose TWO (2) 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.

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.

Deliverables:

Write a brief report summarizing in not more than 500 words. You can include a screen capture of each section or page of the website to explain. Make sure that the formatting of the report is clear (heading/subheadings)

Google Slides link

Website 1:

The NextGenNow website (https://nextgennow.canopyplanet.org) by Canopy Planet aims to promote sustainability and environmental awareness through data visualization and storytelling.

Strengths:

The website’s goal is clear from the homepage, creating a strong connection with the target audience. The website also uses a great deal of green, eco-friendly colors and the imagery aligns with the environmental awareness theme, which creates a visually appealing website for users. Moreover, the contents of the website is well researched, accurate, and relevant to the target audience. It provides valuable information and resources on environmental issues and solutions.

Weaknesses:

Although the content is informative, it could be better by improving their organization. Implementing clear hierarchies, headings, and subheadings could enhance readability and user comprehension. Also, the website lacks interactive elements that could engage with the audience further. Adding features like quizzes, polls, or forums could make the site more interactive and encourage user participation.

Recommendations:

The website could be improved by incorporating interactive elements such as quizzes, polls, or forums to encourage user engagement and participation. Also, review and reorganize content to create clear information hierarchies and improve user comprehension.

Fig 1.1 Screenshot of the website

Website 2:

The Anna Utkina Website (https://annautkina.com) is an online portfolio and blog about a digital designer and macrophotographer, Anna Utkina.

Strengths:

The website uses a clean and minimalistic design approach, by utilizing white space and a simple layout which allows the visitor to focus on the content. The website also has a custom cursor, which is a simple dot, and some parts of the website reacts when ther user hovers the mouse over it, which improves user interaction. Moreover, the website is easy to navigate, with a straightforward user interface. Interactive elements like the “Photography” and “Graphic Design” sections are well-organized, allowing users to find content easily. The website also includes categorization to make it easier for users to find specific topics of interest.

Weaknesses:

Load times are slightly slower when opening images in the “Photography” and the “Graphic Design” section, which could affect user experience.

Recommendation:

Optimize the website by reviewing the code or compress some images to reduce the load time and increase user satisfaction.

Fig 1.2 Screenshot of the website

Exercise 2: Web Replication

Instructions

Your task is to replicate TWO (2) existing main pages of the websites given in the link below to gain a better understanding of their structure. Choose any two from the link given. Follow the dimensions of the existing website from the width and height. This exercise will help you develop your design skills using software such as Photoshop or Adobe Illustrator, and gain insights into web design best practices. You can use any image from stock image or free stock icon. The image that you will be using does not have to be an exact image from the original website. You may replace it with a similar image. Focus on the layout, type style, and color style. To find similar typefaces/fonts, you can download fonts from Google Fonts. You may need to screengrab the website and can begin to replicate the page.

The websites I have chosen are https://www.morganstanley.com and https://www.oceanhealthindex.org/?authuser=0

First website (https://www.morganstanley.com)