The Design

Gimel.js was a new Javascript library with no established design. I chose bold colors, like orange and dark gray, and more reserved colors, like blue-green and light yellow-brown, to achieve a bold, strong look. I chose Open Sans for the main font as it worked so well with the double-layer text effect I used throughout the page.

gimeljs design

The layout of floating, colored blocks stacked on each other in various ways was a unique idea I had, inspired by the div tags ("boxes") commonly used to make up layouts in HTML/CSS.

I drew up some some rough design templates for the landing page in Lunacy (Sketch for Windows) to make sure I was happy with the layout before beginning to write the code.

The Website

The requirements for the Gimel.js landing page website was to allowed people to easily download gimel.js, download the documentation and get started using the library with a starter HTML template.

This was a mobile-first website, using Bootstrap to make the landing page look great no matter what screen size it was viewed on. :)

I decided to break it into sections and steps so that potential users could easily find what they wanted, either through clicking a link on the sidebar or by scrolling the page.

The hero area had the main title slide-into the page on load a neat typing effect with a blinking cursor for the subheader (both effects from Gimel.js, of course). Right underneath the hero was a feature gallery section listing the main features of Gimel.js.

gimeljs hero & features section

The next section was a Get Started section with 3 steps that a visitor could follow to get the library, docs, example and a starter template.

gimeljs get started section

The footer included a link back to the Gimel.js Github repository for those wanting to help develop the library.

After the page was complete, I generated the site with Jekll and deployed it to Github Pages.

Results

The landing page website for Gimel.js was a unique project I worked on and was able to create a landing page that served it's purpose and looked great -while showing off some of Gimel.js' neat effects!