Overall design

At its core Noja is a premium design brand for quality conscious consumers that enjoy a well crafted furniture and a elegantly presented brand. This brand image is also conveyed through the website with functional and visually pleasing design.

As mentioned the website took inspiration from various clothing and furniture online stores. By mixing and matching different elements from different websites I was able implement best practices and also creating something new altogether. I do not recommend starting creating Webflow directly as it isn't as flexible as Figma when creating quick designs but since I had a somewhat clear vision of what I wanted to build so I began the design process in Webflow.

Logo design

The logo uses a similar style than my own logo which is modified version of a peculiar font. I first tried various kind of logo styles: abstract logos, different font styles. In the end I decided to go with what I liked to the most.

I decided to use sharp corners for all the elements instead rounded corners as they convey a more elegant feel. Rounded corners convey a more playful feel which not suit Noja brand as a elegant furniture brand.

Colors

White background is most used background color in web design but for reason; it works well with just about every other color. This comes in handy with product images that might have varying background colors. Best case scenario would be remove background from each product image and then add a white or light background color.

For this project I went with the classic black on white background with some light greys mixed in there to give some variety to the colorscape. I found great images that bring enough color to the website so not much additional color were actually needed.

Website visitors tend to use all kinds of different devices to surf the web which responsiveness a key factor when designing websites. The Noja website was built mobile users in mind and the website scale to different viewport breakpoints for smooth user experience on all devices.

Most mobile users navigate websites by scrolling and clicking using their thumb which means that they cannot easily click on top half of the phone especially considering that smartphones have very large screens. A well designed website should require the user to only move its thumb to navigate the website. For this reason I decided to but the mobile navigation menu on the bottom which is easily clicked with the thumb whether you are left or right handed. Clicking the menu button opens menu for easy access accompanied with a smooth interaction.

The website e-commerce takes inspiration of various online stores with a great visual representation and user experience to enable a pleasant shopping experience. You have your standard shopping cart, search, product categories and product specific. In its current form it meant to serve as a prototype but can be made fully functional.

Navigating the is done using the categories on left and breadcrumbs. A proper filtering system would need to added but the shop in its current serves as a good baseline that can be further developed.