Lejos

Lejos

 www.lejos.pe

www.lejos.pe

Lejos is the first in a brand of sustainable, humanitarian hotels. Made out of shipping container construction, Lejos aims to change the way people travel.
 
 

The Overview

Desiree Tavera is running this wonderful non for profit and needed a website to show investors. We outlined the priorities of her website and I was given ultimate design freedom. I used this website as an opportunity to push my developer side with difficult design challenges. 

 

The Request

Design and development.

 

The Research

The main research I did here was in terms of design. Since this was an informative page and all my content was given already - I wanted to present it in a beautiful way.

I'm a daily visitor of www.awwwards.com, the awards for design, creativity and innovation on the Internet. I went there for inspiration and picked out the following:

Home
http://www.oxfordhouse.nl/

This is where I got the inspiration to put a video as the background. I personally love this design trend and I've been seeing more and more. The Oxford House did a great job transitioning from video to menu - I used it as a guide to try myself so I can understand it from a technical standpoint.

What
https://www.cleverfranke.com

Clever Franke beautifully balanced out text and rich photos - the combination I was looking for. Their minimalist style in their design is right up my alley and so their website inspired the parallax affect in the what page.

I do want to note I did attempt the grid design in the second photo. I jumped straight to code and ran into a problem keeping the squares a fixed size while making them responsive with their corresponding photos. Those clean lines are beautiful when it comes to design, however you lose the beauty if not executed properly.

Who
http://www.judesenese.com/

I had bookmarked Jude's portfolio site when we first met getting drinks at a local SF bar. I fell in love with the simplicity of the design, bright colors, and fun transitions - and I knew one day I will recreate this. 

And thus I found scrollmagic.

Other Inspirations
https://bonnemarque.se/

Another simple design well executed. I appreciated everything about this site - it was eerie and intriguing but very clear and to the point. I wanted to try and achieve the menu on top of background video seen above but never got to it. I will be referencing back to this page for inspirations to come.

https://yearinmusic.spotify.com

Spotify has been killing it in the design game. I want to personally hug the entire team because they have mastered the art of using the entire screen as their canvas. Their grid system has so many layers that your mind effortlessly flows throughout the page. I wanted to use this design for the who page and combine it with the one selected.

 

The Challenge

The biggest design-to-dev challenge I faced was mastering the custom fixed-size divs to fit in a perfect puzzle - and then keeping it responsive. For example, the grid design in Clever Franke.

Timed transitions depending on actions, like scrolling to a specific spot on the page to trigger the next event was something new learned and with that provided challenge as well.

 

The Solution

The solution is here and I'm very proud of it. These type of informative sites that I don't have to design on top of a CMS tool is always a fun exercise to coding the latest design trends.

 

The Assets

IA

Wireframes

 Home

Home

What

How

Contact

Protoype/Mockups