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.
Design and development.
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:
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.
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.
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.
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 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 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.