INTERACTIVE DESIGN Exercise 1&2&3
April 28, 2024
Week1 Exercise
LI JINGBU/ 0367209
Interactive Design/ Bachelor of Design in Creative Media
Lecture
In this week's lesson, we learned about website usability.
Usability refers to how effectively, efficiently, and successfully a particular user can utilise a product or design in a certain situation.
It is a part of User Experience (UX) Design. It is the second level of UX Design
A design’s usability depends on how well its features accommodate users’ needs and contexts.
Key Principle of Usability
1. Consistency
2. Simplicity
3. Visibility
4. Feedback
5. Error Prevention
1. Consistency
Consistency is key for these patterns to be recognized and learned by users. If similar-looking things do not produce a similar output, the user is bound to become frustrated.
For example, if a website’s buttons are protruding boxes with labels on them, then all of the website’s buttons should look like that. Similarly, if a backward arrow denotes the back button, then it should not be changed to something else because that would be inconsistent with what the user has learned.
2. Simplicity
The principle that user interfaces should be “simple” for users.
Simplicity is used loosely to refer to the need to minimize the number of steps involved in a process, to use symbols and terminology that make the interface as obvious as possible, and to make it difficult to make mistakes.
Incorporating simplicity in a designs will help design better user interfaces by helping the users achieve their goals faster and more efficiently, all while enjoying a great user experience.
3. Visibility
Visibility is the basic principle that the more visible an element is, the more likely users will know about them and how to use them. Equally important is the opposite: when something is out of sight, it’s difficult to know about and use.
Users should know, just by looking at an interface, what their options are and how to access them.
4. Feedback
Feedback communicates the results of any interaction, making it both visible and understandable. Its job is to give the user a signal that they (or the product) have succeeded or failed at performing a task.
An example of feedback is when you’re on desktops or laptops, when you hover over navigation items, you expect them to change color or load a submenu.
5. Error Prevention
It involves alerting a user when they’re making an error, with the intention to make it easy for them to do whatever it is they are doing without making a mistake. The main reason this principle of error prevention is important is that we humans are prone to- and will always make mistakes.
Instruction
Exercise 1
Choose two 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.
My Report
The first website I will analyze is csswinner.com.
Purpose and goals of the website: CSSWinner.com is a website that showcases and rewards excellence in web design and front-end development.It is dedicated to showcasing high-quality web design work from around the globe.
Its content is intuitive enough and the site's navigation is clear and concise, so I thought its purpose and goals are effectively communicated to the user.
The visual design and layout of the website：CSSWinner uses bright colors, mainly white and red, and this combination is visually striking.And the use of color is relatively consistent across all parts of the site, making the overall visual effect more uniform.
The layout of the website is clear, the content is easy to read, the fonts are more appropriate, the page layout is simple, and the information is hierarchical.
CSSWinner showcases great web design work through a large number of high quality images that play an important role in showcasing the beauty of the work.
The functionality and usability of the website：The navigation design is clean and simple, located at the top or side of the page, allowing users to easily navigate through the different pages and functional modules.
High-quality picture display
Navigation at the top of the page
like
share
The quality and relevance of the website's content: The content of CSSWinner website is mainly to display web design works, and its accuracy is mainly reflected in the presentation of information about the works.The site provides detailed descriptions of the work, including designer information, technical implementation, etc. This information needs to accurately reflect the characteristics and creativity of the work.
The site's content is clear and easy to understand, enabling users to quickly understand the features and highlights of each piece.
Artwork displays are categorized by different categories, tags, or topics to help users quickly find content of interest. For example, the site categorizes works by RESPONSIVE, MINIMALIST, ANIMATED, and so on. It's highly organized.
organization
The website's performance：The site is very responsive and has good compatibility for android, ios, pc.
The second website I will analyze is awwwards.com.
Purpose and goals of the website:Founded in 2009 and headquartered in Valencia, Spain, Awwwards is a professional web design and excellent web design competition platform. Developers or web designers can submit their web works (for a fee) through this platform, and then there will be a professional evaluation and scoring, and every once in a while will integrate the best recent design works. At the same time, the best works may be selected every year and an offline award ceremony will be organized.We can also take design-related courses in which
Awwwards.com’s typography is designed with a clear hierarchy, allowing users to easily understand and navigate through the different levels of content. The home page contains main content such as selected works display, latest award winners, community activities, etc., while the specific work pages will display the information and evaluation of individual works in detail.
The use of images on the Awwwards.com website is not limited to displaying screenshots of works, but also includes designer avatars, photos of community events, etc. Such diversified display methods enrich page content and enhance user experience.
The functionality and usability of the website：The navigation design of the Awwwards.com website is at the bottom of the page, which is very obvious and highly visible. It also has the functions of like, share, comment, vote and study courses. It can be interacted with the mouse, touch screen and other methods, and the interactive elements are diverse.
The quality and relevance of the website's content:Content on the Awwwards.com website is regularly reviewed and selected for accuracy and professionalism. The web design works and related information displayed are generally strictly screened and represent the latest trends and high standards in the design field.
The content of the Awwwards.com website is well organized, allowing users to easily browse the different works and functional modules.
The website's performance：The website responds quickly and supports multiple platforms.
Exercise 2 :Web Replication
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.
I chose was Bandit Running and Ocean Health Index.
Comparison of the original web page and my copy.
FINAL WORK
Exercise 3 :Recipe Card
This week, we need to creat a website about recipe cards. Here are the teacher's requirements.
In this exercise, you will create a recipe card using HTML and CSS. The goal is to design a basic webpage that displays a recipe's ingredients and instructions in a visually appealing format. Choose ONE recipe from the link below.
Create an HTML file named "index.html."
Create a section that displays the following information:
Recipe title
Include necessary images for the page
List of ingredients
Step-by-step cooking instructions
Create an external CSS file named "style.css."
Apply CSS rules to style your recipe card.
Use CSS selectors such as element selectors (e.g., body, h1, ul), class selectors (e.g., .recipe-title, .ingredient-list), and ID selectors (e.g., #instructions) to style different parts of the card.
Use your creativity to make the page look appealing and interesting
Create an HTML file named "index.html."
Create a section that displays the following information:
Recipe title
Include necessary images for the page
List of ingredients
Step-by-step cooking instructions
Create an external CSS file named "style.css."
Apply CSS rules to style your recipe card.
Use CSS selectors such as element selectors (e.g., body, h1, ul), class selectors (e.g., .recipe-title, .ingredient-list), and ID selectors (e.g., #instructions) to style different parts of the card.
Use your creativity to make the page look appealing and interesting
My work
html
css
recipe card
Netlify Link: https://jingbuli1.netlify.app
评论
发表评论