Check out the website: urbanee website
Project Background
In this project, I was the creative director and worked with my teammate to design and code a e-commerce site in Brutalist UX style. This project was the main deliverable for an upper division web design and development course about front-end code development. The scope included content management, responsive design, and server-side support.
The Interface
Go to the full site here
Design Concept
TYPEFACE
Roboto Mono was chosen as the primary brand typeface for Urbanee due to its elegant san-serif infused with a quirky style, this typeface face brings a stylish feeling.
LOGO AND COLOUR PALETTE
Urbanee's colour palette borrows the earthy tone for our background colour and highlights the elements with hints of vivid and saturated hues.
Process
1. Why the brutalist approach?
When thinking about creative or one-of-a-kind home decors or furniture, I adopted this monochromatic art direction to highlight product items, in which their colors and features will shine through the design.
2. Grid, grid, and grid
The main element of the page is the grid structure, so we opted to place it in the majority of the page. It was also important to code it in such a way that the content and images were responsively resized with the page. The visual design of the grid separated the images and content from the grid which created a challenge on how best to code it.
3. Hover states & cursors
Our interactive elements signify a mouse hover by changing the mouse cursor to a larger one. Additionally, we give clear feedback for both hover and focus states by changing the state of elements. The call-to-action button and secondary button will change their background colours.
The image stack animates-in when the page hits a scroll target to draw attention to its interactivity. The cursor also changes as a hint to the user that there might be something to click. Hover states are used throughout the site to reveal content to help guide the user through the site experience.
4. A design for all devices
We noticed the importance of a responsive website that users can use on any device or browser. To achieve that, the majority of our content used grid and flexbox. Together with media queries, grid and flexbox allow us to easily break the content into smaller columns or rows based on the size of the users' screen or viewport.
