Alan Delmar · UI/UX Designer Alan Delmar
UI/UX Designer
Alan Delmar · UI/UX Designer
apparel X apparel X apparel X

Apparel X

Apparel X was a project to design an online presence for an ethical clothing brand. Market research was done to inform the design process of the deliverables, which included a brand logo and a company website built without the aid of any frameworks or libraries. The result was a responsive website complete with a functioning shopping cart, dynamically updated content and a logo which encapsulated the brand's identity.

Market Research

The process began with conducting market research into the domain. Current trends and aesthetics were observed, both within the ethical clothing trade and wider retail industry. The general theme across the board was simple and minimal, often monochrome but sometimes with very muted colours; essentially a clean and unobtrusive design which best showcases the clothes on offer.

Colour

The natural tones found through nature and greenery were the initial source of inspiration for the colour scheme, which were then developed into muted tones which were more in keeping with the domain standard. Inspiration was taken from Dulux for the refinement of the hues. The colour swatches were tweaked with adobe Colour CC until the perfect colour scheme was arrived upon:

Logo

Many paper sketches were done before finally deciding on a logo which best encapsulated the identity of the company. a lowercase A projected a more warm, inviting image than the more standard capitals used in logo design, and the green heart summed up the company's values of environmentalism and global compassion.

=

When a heart was decided upon, other logos which incorporated a heart were looked at:

Logos incorporating hearts

Below shows the finished logo

Apparel X logo
The finished logo
Font
Apparel X navbar
The navbar, displaying different link states

Helvetica Neue was the body font while Georgia was used for the headings. These relatively common fonts were customised by careful attention to letter-spacing, which gave an airy, minimal look to the text while still remaining familiar and legible.

Sitemap
Apparel X sitemap
Wireframe images

Below is a selection of wireframe images which illustrate the responsive grid.

Homepage (desktop)
Homepage (desktop)
Homepage (mobile)
Homepage (mobile)
Product page (desktop)
Product page (desktop)
Product page (mobile)
Product page (mobile)
Javascript functionality

Using vanilla javascript only, a shopping cart, dynamic content updating, product refinement and client-side input verification was incorporated into the website. The complete code for the website can be found here.

Final Product

Homepage (desktop)
Homepage (desktop)
Homepage (mobile)
Homepage (mobile)
Homepage (mobile view with menu pull-out)
Homepage (mobile view with menu pull-out)
Product page (desktop)
Product page (desktop)
Product page (mobile)
Product page (mobile)
Shopping cart page (desktop)
Shopping cart page (desktop)
Shopping cart page (mobile)
Shopping cart page (mobile)
Contact page (desktop)
Contact page (desktop)
Contact page (mobile)
Contact page (mobile)
User-generated content