Interactive Design - Exercise
Interactive Design - Exercise
Ke Bo Zhi / 0362533
Bachelor of Design (Hons) in Creative Media
exercise
EXERCISE 1- Web Analysis
We need to choose two or two websites from the links given by the lecturer. As you examine your website, pay attention to its design, layout, content, and functionality. Submit a short report after identifying the strengths and weaknesses of the site.
webpage 1
Introduction
In modern life, the choice of furniture is not only about function, but also reflects personal lifestyle and aesthetics. The design style of a website that promotes furniture is particularly important. This article will analyze a minimalist furniture promotion website and discuss its design features, advantages and disadvantages, and possible improvements.
Website design features
1. Minimalist layout
The website adopts a minimalist design with a clear overall layout. Each element of the page has been carefully selected to avoid unnecessary decorations and complex patterns. The main navigation bar is concise and clear, usually with only a few main categories, such as "living room furniture", "bedroom furniture", "office furniture", etc., so that users can quickly find the products they need.
2. A lot of white space
The large amount of white space used in website design enhances visual comfort and allows users to focus on the product itself. White space not only makes the content appear neater, but also makes the website load faster and improves the user experience.
3. Unified color tone
The color matching of the website adopts a unified neutral tone, such as white, gray and wood color, which makes the product display more prominent and avoids color conflicts.
4. Clear product display
Product pages usually contain high-quality pictures and concise descriptions. The detailed pictures of each product are clearly visible, and users can use the zoom function to view the texture and material of the furniture. At the same time, important information such as price, size, and optional colors are clear at a glance, reducing the user's choice confusion.
Advantages Analysis
1. User-friendliness
Minimal design greatly improves user-friendliness. Clear navigation and layout make it easy for users to find the information they need, reducing the search time on the website. This intuitive design attracts more potential customers and enhances the shopping experience.
2. Focus on the product itself
By reducing visual interference, users can focus more on the product itself. This approach helps to improve conversion rates and makes it easier for users to make purchasing decisions.
3. Fast loading speed
Minimal design usually means fewer page elements, which makes the website load faster. In today's mobile device popularity, fast loading is the key to improving user satisfaction.
4. High brand recognition
The simple style makes the brand image more distinct. The unified visual style and color tone help to enhance brand recognition and allow users to easily remember the brand among many competitors.
Disadvantages
1. Insufficient information
Although the minimalist style is simple, it may lead to the lack of some information. When choosing furniture, users may need to know more about usage scenarios, maintenance knowledge or user reviews in addition to basic parameters. If this information is not fully displayed, it may affect the user's purchase decision.
2. Single visual experience
Browsing minimalist websites for a long time may make users feel visual fatigue because of the lack of changes and layers. This single visual experience may lead to a decrease in user interest and affect the user's stay time.
3. SEO optimization limitations
Minimalist websites may have certain limitations in search engine optimization (SEO) due to relatively less content. The lack of rich text content and diverse keywords may lead to a decrease in the website's exposure.
Improvement suggestions
1. Increase content depth
To make up for the problem of insufficient information, consider adding more detailed information to each product page, such as usage scenarios, matching suggestions, user reviews, etc. At the same time, you can increase the depth of website content by adding blogs or information sections to provide practical articles on furniture selection and maintenance.
2. Add interactive elements
Adding interactive elements to website design, such as 360-degree product viewing, virtual trial functions, or user comments and rating systems, can enrich the user experience and allow users to interact more deeply with products.
3. Optimize SEO strategies
To solve SEO optimization problems, you can appropriately add keywords to the page while maintaining a simple style. By writing relevant blog posts and guides, you can enhance the content diversity of the website and improve search engine rankings.
4. Improve visual hierarchy
Consider increasing the visual hierarchy of the page through subtle color changes or graphic elements. Appropriate dynamic effects or visual focus can attract users' attention and reduce visual fatigue.
web page link： https://poltronificioriva.it/
New Type
WEB PAGES ANALYSIS 1&@
Exercise 2 - Web Replication
In this task, we need to choose two of the three websites given by the lecturer, and find some pictures with similar styles to complete the remodeling of a website after the complete screenshot of the instruction.
Website
For this task we need to design and build a resume page using basic HTML and CSS. This exercise will help me organize information into sections, practice text styles, and create a clean, professional page layout.
- Add your name as the main header at the top of the page.
- Write a short paragraph describing yourself, your interests, and any hobbies.
- List your most recent education details. Include the institution name, year, and course or program.
- Create a bulleted list of at least five skills you have (these could be related to school, hobbies, or any other talents).
- Add a simple contact section with an email address and a link to any social media profile (optional).
- Use different font sizes and weights to make sections and headers stand out.
- Choose a basic color scheme for the text and background. Use colors that are easy to read and look professional.
- Add padding and margins around each section to give your CV a clean, organized layout.
- Use borders or horizontal lines to separate sections for a professional touch.
- Add an image or profile picture at the top.
- Style your CV with a unique font and background color or pattern to reflect your personality.
- Create a folder for the task and include subfolder (images) and the HTML file in the folder
- Create a single HTML file for the content. Name the file as index.html
- Add the CSS rule within the head section
- Upload the folder to Netlify (I will show it in class)
- Embed the link into your blog and submit the post in Google Classroom
评论
发表评论