Website design and development for a company that helps you create an online asset that plays an active role in your online growth.
About the project
Owned labs, still in its first year, needed a new website to showcase the services that it provides to a prospective client.
Guiding principles for the OL website visual direction:
– Since it is a first time launch, should have appropriate use of colour and branding for recall
– Should be one that accommodates the use of bold typography
– Should feel approachable and trustable
– Should be actionable and have clear CTAs
– Should feel fresh with a pop of color
– Should be one that takes you in and out of different contexts
Starting point for Visual language: COLOUR!
The starting point for the Owned Labs visual language was the gradient used in the symbol
Extending the gradient
Since OL’s work focusses on understanding data and then using design to represent the outcome of the data, the analogy of a heatmap is used to derive the colour scheme. Green and blue are often the neutral spots in a UX heatmap, whereas red and yellow are the more actionable hues.
The following Color theory sheet shows a free hand application of the derived color scheme for the owned labs website.
– The typeface identified for the Owned labs website is Poppins.
– This typeface in its bold weight will be used in headlines and quotes where we are stating facts / making bold statements. The same typeface in its regular weight will find its application in body text and paragraphs.
Considerations while choosing a typeface for Owned Labs website
– Should be bold and impactful when used in headlines
– Should allow for continuous reading when used in paragraphs
– Should be available in multiple weights
– Should not feel dated (i.e., a traditional serif typeface)
– Should incorporate both geometry and circular forms (inspired by the symbol)
We tried new things! CSS Grid
We used GSS Grid to for the first time in the wild on this project. With @supports feature query, it made it easy to enable support for this website all the way until the early IEs.
Image showing CSS grid in application on one of the website modules
Some development Tools:
– WordPress with underscores.me base theme
– CSS Grid with feature queries and flex box
– Gulp for compiling sass, concatenating JS
– CSS keyframe animation
Project management tool
(We love) Trello.