Brief Write-Up: Craigslist Website Redesign Prototype
In this assignment, I’ve redesigned the Craigslist website to enhance both its aesthetics and usability. The primary objective was to create a more visually appealing and user-friendly interface, with a focus on accessibility and functionality across different screen sizes.
Color Palette & Typography
To align the website with Craigslist’s existing branding, I adopted a purple color palette, as it matches their logo. The primary colors initially included white (#FFFFFF), a soft lavender (#F9E9FF), and a rich purple (#723389) for accents. However, after consulting with my lecturer, it was suggested that the design was overly purple and could benefit from a complementary color. Initially, I experimented with cream shades, but ultimately decided on a light gray (#F3F3F3). This color blends seamlessly with the existing palette, creating a balanced, eye-catching design while maintaining a clean and professional look. The typography remains Roboto, chosen for its simplicity and readability.
Navigation Bar
At first i'm locating my menu bar of the left side of the design but following additional feedback from my lecturer, I relocated the previously left-aligned menu bar to the top of the page. This change was made to improve the layout’s adaptability to various screen sizes, as a horizontal top bar ensures better organization and accessibility. The navigation bar also includes hover effects, making it more interactive and visually engaging.
Interactive Features
The contact form on the Helpdesk page is one of the key interactive elements. Users can input their name, email, and phone number, with a cursor animation that flashes (increasing and decreasing opacity) when clicked. This subtle interaction draws attention to the active input field, enhancing the user experience.(But currently the contact form is still unable to key in any information like name and others.)
Page Structure
For the About Us page, I designed a section introducing the team, community reviews, and the company’s location. The location section features an embedded Google Map image on the left side of the page, with the company’s working hours displayed on the right. This layout makes it easy for users to access important information while maintaining visual balance.
Helpdesk Page
The Helpdesk page includes a contact form and an FAQ section beneath it. The form allows users to communicate directly with support, while the FAQ section provides quick answers to common inquiries. This dual approach streamlines user support and ensures an efficient experience.
Footer Section
The footer section of the redesigned website incorporates essential elements to ensure functionality and brand consistency. It features a simplified version of the logo, the company's location details, and quick navigation links to different pages for ease of access. Additionally, the footer includes the company's contact number, a copyright notice reading “© 2077 Untitled UI. All rights reserved,” and icons linking to the brand's social media platforms. This design ensures that key information is readily available while maintaining a clean and professional appearance.
Post-Consultation Adjustments
The feedback from my lecturer during consultations played a significant role in refining my design. Moving the menu bar to the top of the page improved the design’s adaptability and accessibility, particularly on varying screen sizes. Additionally, the introduction of the gray (#F3F3F3) color as a complementary shade to the purple brand colors significantly enhanced the overall visual appeal, making the design less monotonous and more engaging.
Future Interactions
While the current prototype includes interactive elements such as the navigation bar hover effects and the contact form animations, further interactivity—such as clickable buttons and dynamic transitions—will be implemented in the next phase. This will involve coding the design using HTML and CSS, as outlined in the assignment brief.
Comments
Post a Comment