Interactive Design : Project 3
1. Instruction
Write-up for each pages :
The Home page is designed to act as the main entry point to the Bromley Education Matters website and immediately communicate the organisation’s purpose and values. The large hero section at the top introduces the core message, “Supporting Education Professionals”, which clearly states who the website is for and what it aims to achieve. This helps users instantly understand the target audience and encourages them to explore further. The call-to-action button, “View Services,” guides users toward the Services page, improving navigation and user flow.
The colour palette uses warm maroon and soft peach tones to create a professional yet welcoming atmosphere. These colours reflect trust, stability, and approachability, which are important qualities for an educational support organisation. The layout is clean and uncluttered, ensuring that users are not overwhelmed with information when they first arrive.
The “Our Focus Areas” section visually breaks down the organisation’s main offerings into clear categories: Workshops & Training, Educator Support, and Resources. Using images alongside short descriptions makes the content more engaging and easier to understand. This section helps users quickly identify which services are relevant to them without needing to read long paragraphs.
Overall, the Home page is structured to create a strong first impression, communicate key information efficiently, and encourage users to continue exploring the website.
The Organisation Overview section provides a clear explanation of what Bromley Education Matters does and why it exists. The text is concise but informative, outlining the organisation’s role in providing resources, professional development, and support for educators. Placing this text over a background image of collaboration visually reinforces themes of teamwork and shared learning.
The Mission and Vision section further expands on the organisation’s long-term goals. The mission statement explains what the organisation currently aims to achieve, while the vision statement focuses on its future aspirations. Separating these two ideas helps users better understand both the practical and aspirational sides of the organisation.
Overall, the About Us page builds trust by clearly explaining who the organisation is, what it stands for, and why it is relevant to educators.
The Programs & Services page is designed to provide a structured overview of the different forms of support offered by Bromley Education Matters. The introductory text explains that the services are tailored to educators at different stages of their careers, highlighting inclusivity and relevance.
The use of service cards allows information to be broken into manageable sections, making the page easy to scan. Each card focuses on a specific area such as Professional Development Programs, Workshops & Training, Support Services for Educators, and Program Descriptions. This layout helps users quickly locate the services they are interested in without feeling overwhelmed.
Images are used to visually represent collaboration, leadership, and professional learning, which reinforces the purpose of each service. The consistent design across all service cards ensures visual cohesion and improves usability.
This page is effective because it balances visual engagement with clear explanations, allowing users to understand the organisation’s offerings while maintaining a professional and organised structure.
News page
The News & Events page keeps users informed about the organisation’s latest activities, workshops, seminars, and announcements. This page plays an important role in showing that Bromley Education Matters is active, current, and continuously engaged with the education community.
Each event is presented in a card format with a date, title, and short description. This layout makes the information easy to read and helps users quickly identify upcoming or recent events. The inclusion of dates adds realism and credibility, making the organisation appear organised and well-managed.
The visual consistency between event cards ensures that the page feels structured rather than cluttered. Images help add interest and context, showing real-world educational environments and interactions.
Overall, the News & Events page demonstrates ongoing engagement, transparency, and commitment to professional development, which helps build trust with users.
Contact us page
The Contact Us page is designed to provide a clear and accessible way for users to get in touch with Bromley Education Matters. The introductory text reassures users that enquiries, feedback, and collaboration opportunities are welcome, creating a friendly and open tone.
The contact form is simple and easy to use, asking only for essential information such as name, email, and message. This reduces friction and encourages users to reach out without feeling overwhelmed. The “Send Message” button is clearly visible, improving usability.
Additional contact details such as email address, phone number, and location provide alternative methods of communication, increasing accessibility for different user preferences. The handshake image reinforces themes of trust, collaboration, and professionalism.
Overall, the Contact Us page effectively supports user interaction by being clear, welcoming, and easy to navigate.
Introduction
This project involved the design and development of a multi-page informational website titled Bromley Education Matters. The purpose of the website is to support education professionals by providing clear information about the organisation, its mission, services, events, and contact details. The website consists of five main pages: Home, About Us, Programs & Services, News & Events, and Contact Us.
The project aimed to demonstrate an understanding of web design principles, user experience (UX), layout consistency, and responsive structure using HTML and CSS. Throughout the development process, several design and technical challenges were encountered and resolved, resulting in a functional and visually consistent website.
Planning and Structure
The development process began with planning the overall structure of the website. A clear sitemap was created to ensure logical navigation between pages. The five-page structure was chosen to reflect standard professional organisational websites, allowing users to easily locate information without unnecessary complexity. Each page was designed with a consistent header and navigation bar to maintain continuity across the website. This helps users feel oriented while moving between pages and improves usability. The footer was also kept consistent to reinforce branding and professionalism.
Before coding, visual references and layout ideas were explored to determine appropriate colour schemes, typography, and spacing. The final design uses warm maroon and peach tones to convey trust, professionalism, and approachability, which are important for an education-focused platform.
Page-by-Page Development
The Home page was developed first, as it establishes the overall design language for the rest of the site. A large hero section was implemented to clearly communicate the website’s purpose. This section includes a strong headline, supporting text, and a call-to-action button that directs users to the Services page. Below this, a focus area section was added using cards and images to visually represent the organisation’s key offerings.
The About Us page focuses on organisational identity and credibility. A banner section introduces the organisation’s values, followed by an organisation overview placed over an image background to visually reinforce collaboration and professionalism. Mission and vision statements were placed side by side to clearly separate present goals from future aspirations.
The Programs & Services page required careful layout planning due to the amount of information presented. A card-based design was used to organise different services into visually distinct sections. Rounded images and consistent spacing were applied to maintain a clean and modern appearance while ensuring readability.
The News & Events page was designed to present dynamic and time-based content. Events were displayed in a grid format with dates, titles, and brief descriptions. This layout allows users to scan information quickly while reinforcing the organisation’s ongoing activity and engagement.
The Contact Us page was developed last and prioritised simplicity and accessibility. A contact form was created using basic form elements, supported by clear labels and placeholders. Additional contact details such as email, phone number, and location were included to provide multiple communication options.
Design and Technical Challenges
Layout Consistency
One of the main challenges faced during development was maintaining layout consistency across all five pages. Differences in content length and structure initially caused misalignment and uneven spacing. This was addressed by creating reusable CSS classes for sections, headings, and cards. By standardising margins, padding, and font sizes, visual consistency was achieved throughout the website.
Responsive Design Issues
Ensuring that the website adapted well to different screen sizes was another challenge. Grid and flex layouts initially caused elements to overflow or stack incorrectly on smaller screens. This issue was resolved by adjusting grid-template columns and using flexible units such as percentages and minmax() values. Media queries were also applied to refine spacing and alignment on smaller viewports.
Image Handling and Visual Balance
Images played a significant role in the design, but managing their size and alignment proved challenging. Some images initially appeared stretched or disrupted the layout. This was solved by applying consistent aspect ratios, border-radius styling, and object-fit properties. These adjustments ensured images enhanced the design rather than distracting from content.
Navigation and User Flow
Early versions of the navigation bar lacked visual clarity regarding the active page. To improve user experience, hover effects and spacing adjustments were introduced. This helped users clearly understand navigation options and improved overall usability.
Solutions and Improvements
Challenges were overcome through iterative testing and refinement. Previewing the site regularly in the browser helped identify layout and spacing issues early. CSS was continuously refined to improve readability and alignment. Simplifying code structure and grouping related styles together also made debugging easier.
Feedback from viewing the site as a user helped guide improvements in hierarchy, spacing, and content flow. Each change was made with usability and clarity in mind rather than purely visual appeal.
Final Outcome and Reflection
The final website successfully meets the project objectives by delivering a professional, accessible, and visually cohesive platform for Bromley Education Matters. The design communicates trust and clarity, while the structured layout ensures users can easily access information. Through this project, valuable skills were developed in HTML and CSS structuring, layout design, and problem-solving. The experience highlighted the importance of planning, consistency, and testing in web development. Overcoming challenges strengthened understanding of responsive design and reinforced the relationship between design decisions and user experience. Overall, this project represents a strong example of applying web design principles to create a functional and purposeful website suitable for a professional educational organisation.
Comments
Post a Comment