22.10.2024
QIULIHUA/0365036
Interactive Design/Bachelor of Design (Honours)in Creative Media
INSTRUCTION
LECTURE
WEEK 4
WEEK 5
EXERCISE
Exercise in class :
Week4
WEEK 5:
Project 1 - Objective:
The objective of
this assignment is to develop a comprehensive proposal for the redesign of an
existing website. The proposal should demonstrate your ability to critically
evaluate a website’s design and functionality, and to propose design
solutions that enhance user experience, aesthetics, and performance.
Assignment Description:
You are required to
select an existing website which you feel has several design and UX issue and
prepare a detailed proposal for its redesign. The proposal should address the
following key aspects:
Website Analysis:
Current Design Evaluation: Provide a critique of the current design,
focusing on layout, color scheme, typography, imagery, and overall
aesthetics.
User Experience (UX): Assess the site’s usability, navigation,
accessibility, and responsiveness. Identify pain points or areas that could
be improved.
Functionality: Evaluate the website’s performance, including load
times, interactivity, and compatibility across different devices and
browsers.
Redesign Goals:
Objectives: Clearly define the goals of the redesign (e.g., improved
usability, modernized look, enhanced brand alignment).
Target Audience: Describe the intended audience for the redesigned
website and how the new design will better meet their needs.
Design Proposal:
Visual Design Concepts: Present your ideas for the new visual design,
including visual references, mood board and wireframes. Discuss the rationale
behind your design choices.
UX Enhancements:
Propose changes to improve user experience, such as simplified
navigation, better content organization, or enhanced interactivity.
Project 1(ppt)
i choose the world animal protection website.
wrold animal protection wedsite:World Animal Protection International – Act Against Animal Cruelty
Website Analysis:
Current Design Evaluation:
About layout:
The current website has a traditional layout and the distribution of information may lead to user confusion when looking for specific information. Some important information is at the bottom of the page and users need to scroll to view it, which may lead to a loss of attention.
Colour scheme:
The overall colour palette of the website is soft and monochromatic, with themes of environmental protection and animal conservation, but the overall colour contrast is insufficient and may detract from the visual appeal.
The colours of the key buttons and links do not stand out enough, and users may miss important interactive elements when browsing.
typography:
Font size and line spacing need to be optimised to improve readability.The current font style and typography appears slightly dull and lacks a modern feel.
Imagery:
The images on the website are of relatively high quality and convey strong emotions, but certain images fail to integrate effectively with the textual content, resulting in unclear messaging.The types of images used are relatively homogeneous and a more diverse range of visual elements could be considered.
And Overall Aesthetics:
The overall style is slightly dated and lacks a sense of modern design, suggesting the addition of dynamic elements and visual layers.
User Experience (UX):
Usability:
Users often have to go through multiple steps to find information, and the information architecture needs to be simplified.
Some pages are densely packed with content, which can be overwhelming for users.
Navigation:
Breadcrumb navigation is unobtrusive, making it difficult for users to find their way back when on deeper pages.
Accessibility:
Some elements fail to follow accessibility standards, making it difficult for some users (e.g., those with visual, hearing, cognitive, and mobility impairments) to access or use the content.
Responsiveness:
The website loads unevenly on different devices and browsers, and is especially experienced poorly on mobile devices.
Responsive design needs to be enhanced to accommodate various screen sizes.
Functionality:
- Load Time:The site takes a long time to load, especially on high image quality pages, it is recommended to optimise images and code to improve speed.
- Interactivity:Limited interactive elements, lack of user engagement, lack of social sharing and feedback mechanisms.
Redesign Goals:
Objectives:
- Improve usability and make information easier to find.
- Modernise the look to appeal to a younger audience and increase the visual impact of the brand.
Target Audience:
- Aimed primarily at members of the public with an interest in animal protection, including young people, students and environmental activists.
- The new design will meet their needs for information access through more appealing visuals and more intuitive navigation.
Design Proposal:
Visual Design Concepts:
Mood board: bright, natural colours (e.g. green, blue ) are used to convey themes of energy and hope.
Headline:Animal protection is everyone's responsibility
(Hope make more and more people care about the protecting animals are important.)
Logo design:
I chose 4 different animals to represent the animal protection theme icons, for example I chose animal silhouettes of rhinos, leopards, orangutans, elephants
（ eg:I use the five different colors,but I think the orange better more than.）
- Dark brown (#382E2C): background color for pages
- Beige (#FAF7F3), orange (#F3A91B), Green (#615F36): used as colors for small pages, so that the web page is not a single color，orange (#F3A91B) Dark Brown (#382E2C): button color, orange (#F3A91B) for eye-catching, call-to-action elements.
- I chose to have eye-catching, clear colors for the primary and secondary buttons, e.g. 'learn more' for the secondary button to make it easier for the user to better understand the animal, the green 'Confirmation of Donation' in green color is the main button.
- Font Selection:I chose to use a font from the Univers LT Std class, simple and advanced for easy reading
- Font Color:I chose to use black or white.
Visual references: referencing the design of modern non-profit organisation websites, focusing on a combination of simplicity and functionality.
Wireframes: create a clearer page structure that emphasises important information and interactive areas.
I made a draft of a web page layout in adobe illustrator
UX Enhancements:
Simplified navigation: redesigned the main navigation bar and added drop-down menus to present the site structure more intuitively.
Content organisation: make information more visual and digestible.
Enhance interactivity: add user engagement mechanisms such as comment sections, social media sharing buttons.
Comments
Post a Comment