Interactive Design GCD60904/Project 1: Prototype Design

on

21th April 2024-17th Jun 2024

WangShengxiao/0369380

Bachelor of Design(Honours)in Creative Media

Interactive Design/Project 1: Prototype Design (week 1-week 6)

INSTRUCTIONS

 

WEEK 1

Website analysis report--1-Css winner

  1. Goals and objectives:

    • Purpose: The main purpose of CSS Winner is to showcase excellent web design work.
    • The goal: To attract designers and developers to showcase their work while providing inspiration and design references for users.
    • Evaluation results: Clear goals and objectives to help attract the target user group.

  2. Visual design and layout:

    • Images and colours: The website uses high-quality images and a simple and bright color scheme to enhance the sense of professionalism and visual appeal.
    • Typography: The typography is clear and easy to read.
    • Evaluation results: The visual design and layout are generally satisfactory, but may need some fine-tuning to improve readability.

  3. Features and Usability:

    • Navigation: The website provides intuitive navigation menus and clear categories to facilitate users to browse different categories of works.
    • Interactive elements: Users can easily submit their own work, but some feedback mechanisms can be added.
    • Evaluation Results: Functionality and usability are good.

  4. Content quality and relevance:

    • Accuracy: The presentation page provides detailed information.
    • Clarity and organization: The content of the site is clear and organized.
    • Results: Overall content quality is good, but there is still room for improvement to enhance users' browsing experience.

  5. Performance:

    • Load time: The website loads faster, improving the user's access experience.
    • Responsiveness: The website displays well on different devices.
    • Evaluation result: Good performance.

Summary and Suggestions:

The CSS Winner website does a good job of expressing its purpose and objectives, and the visual design and layout are attractive and readable. However, there is still some room for improvement in terms of functionality and usability, such as optimizing interactive elements and enhancing quality content filtering. It is recommended to continue to focus on content quality and performance optimization to improve the user experience and make readers more interested in browsing. 

Website analysis report--2-The Webby Awards

  1. Goals and objectives:

    • Purpose: The Webby Awards recognize the best websites, apps, advertising, media, and movies on the Internet.
    • Objective: To provide a platform for users to learn about and participate in the latest trends and innovations in Internet culture.
    • Evaluation results: The purpose and objectives are clear and clear, helping to attract the target user group to use their website.

  2. Visual design and layout:

    • Images and colours: The website uses modern, bold colours and high-quality images and videos to showcase award-winning works and events, in line with their content and theme, enhancing visual appeal.
    • Layout: Clear text layout, clean layout, clear content category.
    • Assessment: The visual design and layout are impressive overall.

  3. Features and Usability:

    • Navigation: The website is divided into different modules to greatly improve the efficiency of viewing, and provides a simple and clear navigation menu.
    • Interactive elements: Users can easily browse, search, and share content, but may need more personalized interactive features to enhance user engagement.
    • Results: Functionality and usability are good, but could be further improved to enhance the user's interactive experience.

  4. Content quality and relevance:

    • Accuracy: The website is rich in content, providing a large number of award-winning works and related information.
    • Clarity and organization: The content structure is clear and orderly, but some simplified module classification and operation can be done.
    • Assessment Results: There is still room for improvement to enhance the user's browsing experience.

  5. Performance:

    • Load time: Websites load faster.
    • Responsiveness: The website displays well on different devices.
    • Evaluation result: Good performance.

Summary and Suggestions:

The Webby Awards website well reflects all kinds of high-quality film and television works, websites, videos, etc. Readers have a good sense of browsing experience. However, in my opinion, there is still some room for improvement in the function, such as simplifying module classification can greatly improve browsing efficiency, and making the cover of various contents more concise to improve user experience and attract more users. 



WEEK 2


 

We learned the important elements of the website in class, and then each group made a simple version with pen and paper, and we also took turns to experience it. Through this class practice, we knew the important components of the website, which was a very interesting class activity.

WEEK 3

Exercise 1:

We need to choose two of the three websites as templates. By checking the web and copying them to Adobe Illustrator or Photoshop, while following the existing size of the site. You can use the links to free images and fonts in Google Classroom to pick and replace similar images and fonts. Pay attention to layout, font style, and color style.



WEEK 4

Digital Resume/CV Prototyping

Duration: 2 weeks

Goal: To create a UI design prototype for a digital resume/CV that demonstrates layout, visual elements, and user interface interactions.

  1. Content and Structure

    • Prepare your resume: Include personal information, education, work experience, skills, projects, etc.

    • Determine the order: Arrange the parts according to their importance.

  2. Layout and Visual Design

    • Design layout: Use prototyping software (Adobe XD or Figma) to define the location and order of the parts.

    • Visual design: Apply consistent fonts, colors, and spacing.

  3. Sections and Organization

    • Resume sections: Include "Profile," "Education," "Experience," "Skills," "Projects," and "Contacts."

    • Prioritization: Prioritize each part based on job relevance.

  4. Visual Elements

    • Add elements: Add images, icons, or placeholders to enhance the visual effect.

  5. Prototype Display

    • Update the e-portfolio: Explain and demonstrate the prototyping process.

Evaluation Criteria

  • UI Design: layout and visual elements.
  • Suitability of fonts, colors, and images.

  • Edit my resume for the first time


  • Final Digital CV Prototype


WEEK 5

Mission Overview

Goal: Use HTML and CSS to create a beautiful web page that showcases a recipe, including ingredients and instructions.

Steps:

  1. Create an HTML file:

    • Name it 'index.html'.
    • Include the following information:
      • Recipe title
      • Necessary pictures
      • Ingredients list
      • Procedure description

  2. Create an external CSS file:

    • Name it 'style.css'.
    • Use CSS selectors such as element selectors, class selectors, and ID selectors to style the page.

  3. Design and Landscaping:

    • Apply CSS rules to make the page look attractive and engaging.
HTML

CSS



REFLECTION

In the study of this project, I have a preliminary understanding of interaction design. This is the first time in my life that I have access to knowledge about computers. I think it is difficult for me, but I am very interested in it and full of enthusiasm. I think interaction design requires patience and care.



Comments

Post a Comment