In late 2014 we began a process of revaluation of the company in Sophilabs. This process aimed to emphasize values and feelings of it. So with these changes it arose to redesign the website of the company. This redesign should reflect the character of Sophilabs, it had to be aimed at attracting new projects but also employees. These two types of target users should understand and perceive the ideals that the company holds.
The first thing was to study trends in companies operating as competition. All those were following a hipster aesthetic, mixed with flat designs and handled almost all full-screen images.
I didn't want the website of the company was a loss in the common designs. I decided to use full-screen images but only on pages of detail or product case studies. Videos could be used to better show the feeling of these projects. It was decided to accompany this new website with an institutional video.
Having defined the basic design layout we continue with color palettes and font.
Typefaces bring personality to the brand, they give real character and transmit the values of the company. Imaginatively used, the fonts can express emotions and create sensations. It has been selected as the main typography the Libertad family in its different versions.
Libertad was created in 2014 by Fernando Diaz.
#292F33 #E75244 #009D84
Defining The Home Page
The home page should display a summary of the company and invite you to learn more our projects, contact or read posts or news. To keep minimalism, we applied masks to company's video. With this we avoid falling into the common putting the full-screen video in our homepage. The structure would look like this:
Hero sction + video Featured work case study + video/image Featured work case study + video/image What we do - Product design - Software development Contact Us! Footer + menu + latest post
To create the effect of increasing ball we had to include all the elements within an SVG and use some JS.
In this section many elements from the forms are shown. the values of the company are also defined and photos showing everyday team scenes.
This section breaks with the aesthetics of the company. A split vertically to display a fixed cover image and development of post to his right design arises. It includes more publications along with the filters required for posts labels listed on the menu.