Soludos Website

Web Design
Adobe Illustrator
Hand Coded using: HTML | CSS | JavaScript | GSAP Library
http://do.hblainedesigns.com/Soludos_Website_Revised_Final/Soludos Microsite shown on laptop MockupSoludos Microsite Various Screens shown on Tablet and Mobile Mockups

Overview

The concept behind this project was to create a microsite for the company Soludos. The main goal behind this microsite was to demonstrate the materials that they utilize in their products and showcase their sustainability.

Brainstorming

For this microsite, I decided that I wanted to make it interactive by having the user scroll through the site as well as employing a parallax-type effect. Although I knew the technical direction I wanted to go with the site I needed to determine the general look and feel of the site. To do this I started creating a moodboard. I knew that I wanted to focus heavily on the textures of the various materials and the illustration style that immediately came to mind was a paper cut/layered type illustration. As such I started adding illustrations and inspiration that were themed around this main concept.

Moodboard for Soludos Microsite
Moodboard for Soludos Microsite
No items found.

Sketches

Once I knew the aesthetic and conceptual direction that I wanted to go with this project I started to sketch out my ideas for the illustrations. I decided that I wanted to dedicate one section of the website to each of the materials that Soluods utilizes in their products. Below you can see my sketches and additional ideas for the microsite.

Sketches for Various Materials for the Moodboard for Soludos Microsite
No items found.

In-Progress

Before I could get to coding the main portion of the microsite I needed to create all of the Illustrations for the site. I have an illustration for each of the sustainably sourced materials Soludos uses in their products. Each illustration plays with and creates depth by utilizing the texture of the material being represented.

In-Progress Background Illustration for Linen Material
In-Progress Background Illustration for Ortholite Material
In-Progress Background Illustration for Repreve Material
In-Progress Background Illustration for Eco-Blended Outsoles Material
In-Progress Background Illustration for Jute Material
In-Progress Background Illustration for Leather Material
In-Progress Background Illustration for Cotton Material
No items found.

Final Piece

Here is the final version of the responsive website. Below you can find a live link and some screenshots of the website at certain breakpoints.

Screenshot of the Mobile Version of the Soludos Microsite
Screenshot of the Tablet Version of the Soludos Microsite
Screenshot of the Laptop Version of the Soludos Microsite
Screenshot of the Laptop Version of the Soludos Microsite
Screenshot of the Laptop Version of the Soludos Microsite
Screenshot of the Laptop Version of the Soludos Microsite