Interactive Design | Project 2
26/05/2025 - 16/06/2025 | (Week 6- Week 9)
Nadia Chong Wen | 0355736 |
Bachelor's of Design (Honours) in Creative Media
Interactive Design |
Project 2 / Website Prototype
Table of Contents
1. Lecture Notes
Week 6: CSS Selectors
CSS (Cascading Style Sheets) selectors are a fundamental part of CSS that allow you to target and style HTML elements on a web page. Selectors are used to define which elements should receive specific styles, such as colors, fonts, spacing, and more.
- The List of CSS Selectors are written in the slides.
The reasons as to why there are so many selectors is because it provides a variety of selectors to offer flexibility and granularity when targeting HTML elements for styling. It is also to give web developers the ability to precisely target and style specific elements or groups of elements based on. It is also due to the reasons below...
- Specificity
- Structure
- Attribute-Based Selection
- Pseudo-Classes and Pseudo-Elements
- Responsive Design
- Stateful Interactions
- Cross-Browser Compatibility
- Ease of Maintenance
- Accessibility
Week 7: Box Model
The Display Property
Display is CSS's most important property for controlling layout. Every element has a default display value depending on what type of element it is. The default for most elements is usually block or inline.
2. Instructions
3. Project 2 / Website Prototype
For this project, this time I'm tasked to translate my website redesign proposal into a functional prototype. This prototype should reflect the proposed visual design and user experience improvements, providing a tangible representation of the final product. The prototype needs to be clickable and includes key pages and features of the redesigned website
Visual References & Wireframe
As I wasn't able to find many visual references during the initial proposal phase of the project, I decided to find more references to help with the process as well as develop draft visual plans made from inspiration of the references.
Links to Websites:
- https://teachertapp.com/uk/
- https://www.faireducation.org.uk/
- https://soeonline.american.edu/
- https://coenet.org/
Brief Summary of Prototype
Bromley Education Matters is a website aimed at educational professionals in Bromley, England. It is made as a centralized informational hub to provide opportunities for training, learning, and support to teachers, educators, schools, and other stakeholders or members of the education industry to help them meet the needs of learners of different ages. It provides for streamlined access to essential information, training, resources, and guidance aimed at supporting schools, early years providers, and educational staff in delivering high-quality education.
5 pages have been developed for the prototype.
- Main Page
- Our services and Teams
- Latest News
- Training & Events
- About Us
- Resources
- Contact Details
- Meet the teams
- Contacts
- Form
- Services
- Catalogue
- News
- Latest News
- Older Posts
The visual hierarchy of the website had been improved upon and established by employing differing text sizes, the use of stroke and drop shadows, and high-contrast, varying color combinations in order to clearly indicate buttons, headers, and sections. Additionally, the website's layout was optimized to improve text and image alignment, and a more varied layout with different information arrangements was employed to make the scrolling and reading experience more engaging. This makes it easier for users to navigate the website, with navigational features and points of interest being easier to identify.
Furthermore, various steps have been taken to minimize clutter on pages such as the Services and News pages, with text-heavy and disorganized menus being replaced with more modernized and minimalistic image-focused elements that use larger tiles and buttons to make them both neater and more compact.
Lastly, low-quality, pixelated photos used on the website were eliminated in favor of high-resolution images and the sharper, more hostile edges of the website were replaced by rounder, corners in order to modernize the website’s visuals.
Final Prototype / Submission
4. Feedback
Week 9
- Overall clean look
- Looks slightly outdated but fits the target audience due to formal look
- Change the Training & Events so that not everything is a carousel
- Put a form in Contacts and put the Teams in About Us
5. Reflection
Experience:
This project was very difficult for me, as a first-time Figma user. I often found myself at dead ends and struggled to keep up with this assignment while trying to handle those from other subjects as well. There were many times when I was unable to create the necessary work for the next session because of this, and I often fell behind on schedule. It was a very difficult process and trying to juggle the weekly requirements of all my subjects took a significant toll on my health, to the point it started to impact my physical health.
Observation:
The process of trying to design the layout and think of how to order content was particularly difficult and time-consuming for me, as I had to think deeply about the needs of my users and what they would find most useful. I believe there is much room for improvement on my website itself still, and that I could add more interactive components to it so that it may be more engaging still to my users.
Findings:
Despite the hardship I faced, I believe this was a very rich learning experience, and I came to appreciate the usefulness of Figma and its very convenient and user-friendly features, even if sometimes I struggled to understand it. I understand why it is such an important tool to designers after my experience in it, and I aim to improve my proficiency in Figma as I continue learning web design.
Comments
Post a Comment