GAN YI KIAN / 0374572
Bachelor of Design (Hons) in Creative Media
Interactive Design / Project 2
Bachelor of Design (Hons) in Creative Media
Interactive Design / Project 2
Website Redesign Prototype
Lecture
Week 6
Holiday
Week 7
CSS Selectors
Week 8
Independent learning week
Week 9
Box Model
Week 10
Cool website
Position
Week 11
Completed the web prototype of the final project 2
Bootstrap Link
Mr Sham introduced us to this website, which helped us create a website for the Final Project.
Project 2 | Website Redesign Prototype
Objective:
Transform the previous web design proposal into a functional prototype to demonstrate the visual effects and user experience of the design improvement.
Task requirements:
Interactive prototype
Use tools (such as Adobe XD, Figma) to create a clickable prototype.
Include key pages:
- Homepage: navigation bar, main visual area, and core content display.
- Core content page: such as "product" or "service" page, reflecting content organization.
- Contact page: display form or other interactive methods.
User experience focus
- Usability: intuitive navigation and interface design.
- Interactivity: interactive simulation of buttons, hover states, and forms.
Submit an online prototype that can be accessed through a link, or a downloadable file.
My plan:
I will use Figma to create a prototype around LINGsCARS website, focusing on user experience optimization and design aesthetics. My reference site is Volvo Malaysia.
I decided to design the Homepage and Contact Page. For the Core Content Pages, I chose to create a page about the service and a page for user login.
I also made some navigations. If you are interested, you can go to my work Project 1 to try it out.
Key features of the prototype
1. Homepage design
- Visual focus: The header located at the top of the page is also the main informative and visual area of the site, which has adequately contrasting images and unambiguous buttons that invite and help the user to develop an immediate feeling of understanding the purpose and the main offering of the site – its product line.
- Navigation bar: A fixed navigation bar is introduced to enable users to access key sections like “Home”, “Products”, “Services” and “Contact Us without necessarily scrolling across the page.
- Featured content display: From a card design perspective, it is very convenient and easy to recognize how the generally popular product or promotion is highlighted.
2. Core content page (Service page)
- Content organization: Clearly display all kinds of service information and arrange them by category, so that users can quickly find the services they need.
- Interactive function: Design a hover effect for service items, provide a brief description of the service and quick links to help users understand the specific content in depth.
3. Contact page
- Form design: Including fields such as "name", "email", "title" and "number", the form is simple and easy to use.
- Additional information: Social media links and map placeholders are added, providing multiple contact methods.
The considerations behind design decisions
1. User-centered design
- The organization of content and design of the navigation bar and other available interfaces adheres to ease of use to guarantee that a user will locate the desired information as fast as possible.
- It is easy to use and this is evidently ensured by taking into consideration the accessibility, for instance, the text color contrast, clear label prompts of form areas, etc.
2. Visual consistency
For color and font, focus on consistency, and in addition to that there is correspondence to the brand image.
In this sense, use reasonably different levels of spacings, as well as alignments to achieve the most clean and neat design decisions.
3. Adjustment of details of social relations
Interactive effects are incorporated into objects like buttons, filters, and navigation bars to create the feel of working real website applications.
4. Clear content priorities
Functional Significance: This hierarchy should be employed to draw attention to key elements (for instance, the button ‘’Explore our range’’ and products) to enable users to peruse through website information with ease.
How to achieve the proposal goals
Based on the analysis, in this prototype design, what appeared most important were the usability, look and feel, readability of content, and enabling of business objectives. First, as for usability, I made the navigation bar static and chose a plain layout for all the web pages to ensure users can directly locate the information they want. Thus, all the additional simulated interactive details like hover effects and click feedback improved the fluidity and ease of operation.
From a design perspective, I chose a current design style for the website to ensure that it meets the trends of the current world and keeps the tone of the brand. Thus, the use of a set of pictures and texts with the addition of reasonable layering not only makes the page more visually appealing but also leads the users’’ attention to the core zone.
In addition, in the hope of reducing the difficulty of the content, I simplified the content structure and font type to enhance the website's friendliness for a variety of audiences. Moreover, according to the barrier-free design standards, more users including visually impaired users can surf through the website easily which shows the corporations’ concern to the different types of users.
Thirdly, the business goals were also fully taken into consideration. The current format of the service details page is an enhanced design, with an animated interface to display the service’s information and a convenient browsing manner, so it can be understood and decided by users. Through such calls to action and clean website page designs, the prototype, however, enhances user engagement while offering adequate backing of business objectives.
Personal reflection and future improvement direction
Through this prototype development, I moved from conceptual design to actual operation and deeply experienced how to balance beauty and functionality. The prototype has achieved the design goals, but there is still room for further improvement:
- Dynamic effect optimization: smoother animation transition effects can be added to make the page more attractive.
- Function expansion: More pages (such as shopping carts and user reviews) can be added in the future to improve the website structure.
Final Prototype PDF
Comments
Post a Comment