Urbanee

Urbanee

Areas of Design
Front-End DevelopmentUX/UI Design
Tools
VS CodeGithubFigmaHTML/CSS/JavaScript
Teammates
Khanh Linh Nguyen
Description
An online creative furniture store for artists and art-lovers
📌

Check out the website: urbanee website

image

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

image

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.

image

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.

image

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.

image
image

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.

image

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.

image
image

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.

image