MathiasSM
Computer Science Student

Elgarson: Fashion web design

Originally written . Last updated on

I was hired to coordinate with a France-based client the design and implementation a lifestyle-oriented website (famous people, fashion, that kind of stuff): elgarson.com (now offline).

I used WordPress as a backend, to provide an easy UI for writing on the site. The frontend was built from nothing, with plain CSS and HTML, with tiny touches of JavaScript.

White, clear design

With white as its main color, the site showed elegance and clearness. Almost-black sans-serif typography is used. It followed the minimalism trend among famous fashion labels. Five (5) sections are shown: Le Jardin, Motivation, Inspiration, Curiosité and Personnalités.

Le Jardin mosaic

It consists of only pictures of flowers arranged in a symmetric three-column mosaic of squared photos. They can be clicked to look at in a big modal.

Motivation tips

The only part that’s not white, but pink. It shows motivational messages arranged in a single column. They stay visually separated by being in semi-transparent boxes.

Inspiration from famous

It doesn’t present a meta list of posts, but directly the last one. It presents a simple design of two columns, roughly one-third (1/3) and two-thirds (2/3) of the screen. The first column shows a photo of the person, while the second, wider column presents a short biography and share buttons. The user can browse for inspiration by using the left and right arrows for navigation. According to the client “just one of those pages should be enough to inspire a generation”.

Curiosité on the writings

A simple list of posts. Each a title and small thumb on the right side. Nothing fancy here.

Personnalités of the world

Present a mosaic of hand-drawn named images. Each is supposed to be for an interview with a famous person (singer, artist, comedian…). The mosaic is ordered in a “Masonry” way as every image can be of different size. On hover, the image flips to show the (usually short) interview. On mobiles, the cards are shown in a single column, with the image on the left, and the interview on the right, as hover effects don’t exist.

Mathias San Miguel © 2013-2019