Interactive Design - Exercises1&2 / HTML Document Development & HTML, CSS Document Development, CSS Layout Model

25.04.24 - Week 1

Qian Guoyi (0369462)

Interactive Design/ BDCM

Exercises 1：HTML Document Development   & HTML, CSS Document Development,   CSS Layout Model 

  INSTRUCTIONS

LECTURES

Report about website

I chose the two websites https://www.csswinner.com/winners and https://www.webbyawards.com/ for analysis.This report examines two websites, CSS Winner and Webby Awards, focusing on their design, layout, content, and functionality. The goal is to identify the strengths and weaknesses of each website and evaluate how they affect the overall user experience. The analysis includes an assessment of the websites' purpose, visual design, functionality, content quality, and performance.

Website 1: CSS Winner

CSS Winner is designed to spotlight exceptional websites and recognize outstanding web design.CSS Winner has a clean and modern visual design. The use of color is balanced. Typography is clear and easy to read, with a good hierarchy of headings and text. The layout is simple, focusing attention on the featured websites without clutter or distraction.The navigation on CSS Winner is intuitive, with a simple menu guiding users through different categories. Interactive elements like hover effects and animations enhance the user experience without being overwhelming. The search function is effective and returns relevant results quickly.

Recommendations：

1.A more detailed review or review of the site being presented is needed to give users a deeper understanding of the design choices.2.Need to add some user comments

Website 2: Webby Awards

The visual design of the Webby Awards is vibrant and dynamic, using bold colors and high-quality imagery. Typography is generally clear, but some text can be small or hard to read, and the layout, especially on the homepage, can feel crowded due to the abundance of content.

Functionally, the navigation on Webby Awards can be complex, with many menu options and subcategories, which may overwhelm new users. The interactive elements like voting and commenting enhance engagement, but could require more guidance.

Content-wise, the website offers a diverse range of information, but some sections could be better organized. Performance-wise, the site works well but may have slower load times on complex pages and some compatibility issues on mobile devices.

Recommendations：

1.Simplify the navigation structure to reduce complexity and make it easier for users to find specific content.

2.Improve typography for better readability, especially on densely packed pages.

3.Streamline the layout to reduce clutter and improve load times, particularly on the homepage.

Exercise 2 - Web Replication