Interactive Design / Exercise 1

23.04.2024 - .02.2024 (Week 1 - Week 3)

Tan Sin Mi (0368821)

Interactive Design

Exercise 1

CONTENT
  1. Instructions
  2. Exercise 1 - Web Analysis
  3. Reflection
INSTRUCTIONS
 
EXERCISE 1 - WEB ANALYSIS

We are required to choose TWO (2) websites from the link given. Review the website that we 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 our findings and recommendations.


The websites that I have chosen are from CSS Winner.

1. CSS Winner [link]

Purpose and Goals

From the bottom of the website, we could clearly know that CSS Winner was a unique global platform awarding and showcasing the best websites and promoting innovative web designers, developers and agencies. We can get more information of this website from "ABOUT US". It clearly shows the purpose and goals of this website. I reckon that they have effectively communicated to the user.



Visual Design and Layout

CSS Winner's website layout is very concise and clear. When users click on the website, they will see the winning work was highlighted on their home page, which is "Site of the Day" (SOTD). It will first show an image which is the design of the site, and it will come out with the score of the site beside the image. The options bar is mainly light red as the main color. The red color allows users to see other information and navigation more clearly. Each title has a different navigation, and users can click on it to see more content about that title.



Functionality and Usability

CSS Winner does not have too many complicated navigations. It only has a few simple navigations for users to access, which allows users to quickly find what they want to know. Not only that, but CSS Winner also sets more detailed classification options, which is category, tag and color. This allows users to find what they are looking for more quickly and accurately by selecting more detailed options.


CSS Winner are open for public to submit their site for getting a chance to let their work shows to the visitors around the world. They have prepared the form for who wants to submit their site to fill in their personal details. The form is divided into three parts, users can see the progress of the form.


More than that, CSS Winner also places icons that can directly open their accounts on other social platforms. This setting saves users time for finding this website's social platform account (Twitter / Facebook / Pinterest).


Quality and Relevance of Content

The content quality of CSS Winner is quite good, it included many different design styles, if user did not have idea what design styles they want, they could have a look at SOTD or SOTM, it will show the winning works of daily and monthly, and each work will clearly display the score of each content. In addition, it will also tell the designer's information and the intro of the site and attach some photos of the site.

CSS Winner will also issue certificates for the designer who website submission is accepted; they will get a high-quality CSS Winner certificate in PDF; the certificates of award are Site of the Day/Site of the Month/Award Nominee.

Website's Performance

The overall performance of CSS Winner is pretty good. As long as the network is stable, the loading time will not be too long or stuck, and the responsiveness is good.

I have tested to open this website on different devices and browsers, below are some testing results.

Laptop:
1. Microsoft Edge
  • Good performance in full screen, fast loading time with stable network.
  • Website layout simple and clear, simple and eye-catching colors.
  • Website setup is smooth and easy.
  • The page jumps smoothly and no lag problem.


2. Firefox
  •  Same performance as Microsoft Edge.
  • No problem on page jumps, same as Microsoft Edge.

Comments

Post a Comment

Popular posts from this blog

Advanced Typography / Task 2

Image
22.05.2024 - 21.06.2024 (Week 5 - Week 9) Tan Sin Mi (0368821) Advanced Typography Task 2 CONTENT Instructions Lectures Task 2A - Key Artwork Task 2B - Collateral Feedback Reflection Further Reading INSTRUCTIONS   LECTURES Week 5: Lecture 5- Perception & Organization Perception 1. Definition Perception is how something is regarded, understood, or interpreted. In typography, it involves visual navigation and interpretation via contrast, form, and organization of content. 2. Focus Typography deals with how textual, visual, graphical, and color elements are perceived and understood. Contrast 1. Size Large elements draw attention first, such as a big letter standing out against smaller letters. Commonly used to make titles or headings more prominent than body text. 2. Weight Bold type can stand out amidst lighter type of the same style. Other met...
Read more

Advanced Typography / Task 3

Image
21.06.2024 - 23.07.2024 (Week 9 - Week 14) Tan Sin Mi (0368821) Advanced Typography Task 3 CONTENT Instructions Task 3 - Type Exploration & Application Feedback Reflection Further Reading INSTRUCTIONS TASK 3 - TYPE EXPLORATION & APPLICATION  In this task, we are required to create or improve a font that addresses a problem or adds value in graphic design, animation, new media, or entertainment design. In last, we need to use the font we created to applying and presenting. This task can take one of three forms: Creating a new font Improving an existing font Experimenting Proposal: Figure 1.1 Proposal PPT Sketches: Figure 2.1 Letterforms Sketches First Version Digitized Letterforms: ...
Read more

Advanced Typography / Final Compilation & Reflection

Image
22.04.2024 - 23.07.2024 (Week 1 - Week 14) Tan Sin Mi (0368821) Advanced Typography  Final Compilation & Reflection INSTRUCTIONS Task 1:  Typographic System & Type and Play Task 2:  Key Artwork & Collateral Task 3:  Type Exploration & Application SUBMISSIONS TASK 1 | Exercise 1: Typographic System 24.04.2024 – 15.05.2024 | Week 1 – Week 4 Figure 1.1 Final: Axial (08/05/2024) Figure 1.2 Final: Radial (08/05/2024) Figure 1.3 Final: Dilatational (08/05/2024) Figure 1.4 Final: Random (08/05/2024) Figure 1.5 Final: Grid (08/05/2024) Figure 1.6 Final: Modular (08/05/2024) Figure 1.7 Final: Transitional (08/05/2024) Figure 1.1 Final: Bilate (08/05/2024) Figure 1.9 Final Typographic System.pdf (08/05/2024) Figure 1.10 Final  Typographic System with grids.pdf  ...
Read more