Esperluette
Esperluette is a fictitious clothing brand. I wanted to try my hand at making a website revolving around a very specific subject, here a special operation made by the brand, promoting human rights.
From that premise, I formulated a few design requirements.
First of all, colors needed to be bright ans relatively vibrant to portrait a sense of joy and purity revolving around the brand and its products.
Then I would have to find a balance between promoting the operation and marketing the brand.
Finally I wanted the navigation to be a bit special.
[Esperluette's operation landing page]
The design marrying theses requirements has a light gray for background and is contrasted by the orange elements and gradients throughout the whole website. The design language starts to take shape when adding a dedicated color for anything relative to human rights, setting a standard spacing and a limit on the amount of elements and information on each section.
[The color palette used]
The exotic navigation, namely snapping the scrolled page to the start of each section. The "scroll-snap" feature is available on every browser and terminal for continuity. This feature has to support and work with the natural behavior of the user, that why scroll-snap works with all the ways a user has to scroll the page, and will still snap in a non intrusive way. A static element indicates how far the user has scrolled, to be more precise, how many pages he's seen.
[The page indicator]
Lastly the balance of the duality between the elements we want to promote here is achieved by placing recurring, bright call to action buttons leading the shop (not part of the website, as the challenge was based around this front page) and strategically placing images which would depict the types of clothes sold by the brand and a common element between each photograph, maybe a color or a prop. I sadly could not setup a shooting to take the pictures myself, so I did my best searching for images matching the mood and colors I would want for each picture of the page.
[The second and third pages of the site. We can see the recurring theme and image choice.]