Interactive Design / PROJECT 2: Website Redesign Prototype
Daphne Lai Yu Cheng / 0366380
GCD 60904 / Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylors' University
PROJECT 2 / Website Redesign Prototype
Week 6 (27/5/2025):
Week 7 (3/6/2025):
- To control layout.
- Default for most elements are usually block or inline.
- Block level element: <div> is the standard block level element. Starts on a new line and stretches out to the left and right as far as possible.
- Inline element: <span> is the standard inline element, inline element can wrap some text inside a paragraph.
- Other display properties: Inline block, Flex, Grid.
Box Model in CSS
Figure 1.1 Box Models
- Most HTML elements are containers/box (body, p, h1, h2, div, ul, ol, li).
- Each box has 3 layers surrounding its content (inside to outside): Padding, Border, Margin.
- Reason to include an element in div tag/element is to create layout.
Flexbox (Flexible Box Layout)
Figure 1.2 Flexbox
- Manipulate elements' positioning and spacing within a container.
- Flex container: The parent element with display: flex.
- Flex items: The children of the flex container.
Figure 1.2 CSS Selectors Tutorial (3/6/2025)
- a:link
- a:visited - a link you have visited (example: link text becomes purple instead of blue when content is already searched on Google).
- a:hover
- a:active
color: #0022ee;
text-decoration:none;
}
color: #0022ee;
text-decoration:underline;
}
a:active {
color: black;
}
- Button with hover effect
- Setting layout guides
Figure 1.3 Figma Tutorial (3/6/2025)
Week 8 (10/6/2025):
Figure 1.4 Fixing HTML File (10/6/2025)
Week 9 (17/6/2025):
Figure 1.5 HTML Codes (17/6/2025)
Figure 1.6 CSS Codes (17/6/2025)
Final outcome of the dropdown menu:
Figure 1.7 Dropdown Menu (17/6/2025)
Project 2: Website Redesign Prototype (27/5/2025)
The objective of this assignment is to translate your website redesign proposal into a functional prototype. This prototype should visually and interactively represent the proposed changes, demonstrating your ability to apply design principles and UX strategies effectively.
Building upon your previous assignment (Website Redesign Proposal), you are now required to develop a prototype of the redesigned website. This prototype should reflect the proposed visual design and user experience improvements, providing a tangible representation of the final product.
Prototype Development:
Interactive Prototype:
Develop a clickable prototype that includes key pages and features of the redesigned website. The prototype should allow users to navigate through the site and interact with essential elements.
Tools: Use prototyping tools such as Adobe XD, Figma, Sketch, or any other relevant software to create the prototype.
Key Pages to Include:
Homepage: Present the main design elements, including navigation, hero section, and key content areas.
Core Content Pages: Develop prototypes for at least ONE core page (e.g., About Us, Services, Products) to showcase how the content is organized and presented.
Contact Page: Include a prototype of the contact page, demonstrating how users can interact with forms or other contact methods.
User Experience (UX)
Considerations:
Usability: Ensure the prototype reflects a user-friendly design, with clear navigation, intuitive interfaces, and accessible features.
Interactivity: Implement interactive elements (e.g., buttons, hover states, form fields) to provide a realistic user experience.
Submission:
A fully functional prototype ACCESSIBLE via a SHAREABLE
link or as a DOWNLOADABLE file.
A brief writeup in your E-Portfolio of (500–800 words) outlining the key features of the prototype, any design decisions made during development, and how the prototype addresses the objectives set in the redesign proposal.
Pages created for Task 2:
- Home Page
- About Page
- Contact Us Page
Process
I started by creating the website layout then created elements for the prototype and link them to their designated locations by Adding Auto Layout > Create Component > Add Variant > Hover/On Click
I updated the colour palette from my Task 1 because few colours did not complement well.
Figure 2.1 Updated Colour Palette (13/6/2025)
Figure 2.2 Images Used (13/6/2025)
Additionally, to ensure the consistency of social media icons, I did image trace of social media icons to change their colour in Adobe Illustrator then convert them to PNG.
%20%203_8_2025%202_54_01%20PM.png)
Figure 2.3 Social Media Icons in Adobe Illustrator (13/6/2025)
I also did some improvisations on the layout compared to the wireframe sketches I did in Task 1 to make the overall layout look more coherent.
Figure 2.3 Layout (13/6/2025)
Figure 2.4 Interactive Elements Links (17/6/2025)
Figure 2.5 Website Prototype Links (21/6/2025)
Interactive elements created for the prototype:
- Buttons with hover effect and directs users to the designated location when clicked on.
- Icon buttons that link to BUBS's social media when clicked on.
Figure 2.6 Buttons (17/6/2025)
- Carousel slider effect for users to click to view the 'Featured Events'.
Figure 2.7 Carousel Slider Effect (21/6/2025)
- Contact form with error prevention triggered when users do not fill in part of the contact form.
- Radio menu for users to select options, selected options change appearance from a light to darker colour when clicked on to indicate the option is selected.
Figure 2.8 Contact Form (20/6/2025)
Figure 2.9 Website Prototype (21/6/2025)
Dev Mode Link: https://www.figma.com/design/OYS99EYtVNU6RqtGR8xnyu/PROJECT-2--Website-Prototype?node-id=0-1&m=dev&t=z9762bJXvW5d2D6v-1
500-800 words write up:
Key Features of the Prototype
1) Clean and minimalistic visual identity
The website redesign used a soft and muted colour palette, primarily earthy tones like beige and brown and pastel tones to convey a sense of serenity and simplicity. This colour palette reflects the values and atmosphere of the Buddhist community while creating a soothing digital environment for users. The typeface used is minimal and using sans serifs fonts enhance the readability of the contents.
2) Improved information hierarchy
One of the main issues with the original website was scattered and overwhelming information. The prototype incorporates a clear and structured layout by breaking down the content into digestible sections. For example, the homepage highlights key areas like 'About' and 'Featured Events' with distinct cards and buttons. This guides users through the content smoothly without cognitive overload.
3) Layout and navigation feedback
The redesigned website uses a navigation menu that is fixed and simplified with clear labels. When users click on a section like 'About' at the navigation bar, the active link is underlined to indicate their current location on the page. A radio menu for users to select options, selected options change appearance from a light to darker colour when clicked on to indicate the option is selected, this provides visual feedback and reducing confusion during navigation. Additionally, a 'back to top' button using an arrow icon enhances navigation and improves the overall user experience by allowing users to return to the top of the page easily.
4) Carousel slider effect
To highlight ongoing and upcoming events, a carousel slider is added under the 'Featured Events' section. The design includes left and right arrows to navigate between event cards. This allows users to browse through activities and avoids the website displaying all the events which can result in a cluttered and cramped layout.
5) Clear 'Calls to Action' (CTAs) buttons
CTA buttons such as 'Learn More' and 'Read More' makes it easier for users to engage with the BUBS website directly. The buttons are designed to stand out visually while still keeping the peaceful feel of the website. The buttons also change appearance when the cursor hovers over them which make the website more interactive and easy to use.
6) Footer page links
On the footer, I included the location of BUBS and page links to all pages and also includes the website's social media handles by replacing them with icons, users can immediately recognise the icons and click on them that directs them to the social media. This ensures users can find essential details no matter where they are on the site.
7) Visual consistency
The font, button and icon sizes are the same throughout the website. The button styles and corner radius are also consistent which makes the website look neat and tidy.
8) Error prevention
On the 'Contact Us' page, an error prevention feature is added and triggered displaying "This is a required field." in red when users do not fill in parts of the contact form.
Design decisions during development
-
Minimalist Visual Appeal: The decision to keep the design minimal was made to reflect Buddhist values such as clarity, simplicity and mindfulness by reducing visual clutter.
Visual Consistency: Rounded corners and consistent spacing were used. Initially, some components like the “Back to Top” button and event cards had too many corner radius which felt more on the playful side rather than peaceful. I adjusted them to subtler corner radius for better alignment with the overall mood.
-
Typography & Icons: I applied bold for headings so the body texts are easily differentiated. Icons were used to support content without visually overwhelming the website. I also resized the text and icons into a smaller size to make sure that they are proportionate with the website size.
-
Linking Strategy in Prototype: I only focused on designing certain pages like the homepage and About page, not all buttons lead to fully designed sections. For buttons like 'Learn More' or 'Read More', I linked them to the original BUBS website to show where they would normally go. This helped make the prototype feel more complete and allowed users to understand how the full site would work.
Redesign Objectives
-
Modernise the outdated visual design by creating a clean and minimalistic layout that appeals to users of all ages. Using consistent and harmonious colour scheme and typefaces to improve visual hierarchy and readability, update outdated UI elements (buttons, subscribe sections) to align with current web design standards.
-
Improve the flow of information and content readability by ensuring visual consistency across pages to strengthen the organisation's professionalism. Breaking down dense paragraphs into skimmable chunks with bullet points or icons and use structured layouts (panels, grids) for the overall layout.
-
Increase engagement and accessibility by improving the clarity of information and interactive elements.
-
Preserving the identity of a Buddhism community by designing a website that reflects Buddhism values, simplicity and serenity.
Improve usability by reducing cognitive load by minimising clutter and organising information into clearly defined sections.
Week 9 (17/6/2025)
Design looks very safe and clean. But some element are not proportionate with the size of the website. Like your back to top button and Featured Event section can be improved by not using to much corner radius. And as for the footer, you can reduce the font size to 80%-70%
Throughout Task 2, I initially struggled with using Figma as I was not familiar with the interface. However, after spending some time exploring and following Youtube tutorials, I became more comfortable with the tools and found it much easier to navigate and build my prototype. Redesigning my chosen website gave me a deeper understanding of usability in web design and places to improve to enhance users' experience.
Class activities were especially helpful when it came to understanding coding. I could see myself improving in my ability to memorise them but I still need more practice time on them. The class activities were also a way for me to explore different codes and understand how they function in real websites.
Overall, I learned that the design of a website plays a crucial role in shaping user experience. Careful planning and consideration in designing the user interface can significantly enhance the website’s visual appeal and functionality to make it more intuitive and enjoyable for users.
Comments
Post a Comment