Sophilabs.co

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 com

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.


Firsts Ideas

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.

Typographic Palette

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 sample

Libertad banner

Libertad was created in 2014 by Fernando Diaz.

Color Palette

#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  

Home Page


To create the effect of increasing ball we had to include all the elements within an SVG and use some JS.

Menu GIF


Highlighted Sections

Careers

In this section many elements from the forms are shown. the values of the company are also defined and photos showing everyday team scenes.

Careers Careers

Journal

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.

Journal Journal