A few months ago we started collaborating closely with the SMartBe Foundation to rethink their global online experience. Since 1998, the SMartBe Foundation has been active as a social and economic actor in the creative sector in Belgium and is currently expanding its activities throughout Europe. 

The new SMartEu corporate website, which presents SMart pan-European projects and activities, is the first released project to feature the new online experience we are working on globally for SMArt.

The goals of the new SMart online experience were quickly defined during a preliminary phase, together with smaller test projects. SMart customers use many online services and the main goal is to deliver a streamlined experience across the services with a user centered approach. During the test phase, our research was concentrated on content strategy, usability and information architecture (more on these topics later), but we quickly felt the need for an update of the online identity in order to strengthen the global experience we were developing.  

Previously, the identity was based on a Swiss style mixing the Helvetica typeface with a palette of red, black/greys and white. As graphic designers who studied Joseph-Müller Brockmann and Wim Crouwel works among others, we love Swiss-Helvetica approach. Nevertheless, we found that the SMart original identity wasn't entirely meeting its audience and goals. 

SMart needed something more humanistic, with a blend of the European visual cultures, to reflect the social facet of its activities. We are lucky to live in Belgium, a country with two different visual cultures, that permanently mix and battle north European and Latin influences: a great heritage for us on this project.

We wanted to avoid a total break from the current identity, and we handled the change as an evolution. 

The previous typography was constructed around the Helvetica typeface. It was used in a way that could sometimes lead to a cold communication, setting a distance from its audience. We wanted something more generous, that would bridge the gap between the content and the user, without being too different. Technically, we also needed a font that was available and optimised as webfont.

When we tried the ARS Maquette font, drawn by Angus R. Shamal, it immediately gave us the answer we were looking for (and we totally fell in love with this font). The ARS Maquette is a high quality typeface that mixes the North European influences –with its clean and stylish simplicity– and the Latin influences –with its humanistic touches and generous curves. The text is now slightly warmer and pleasant to read. This characteristic drawing also leads to more identity.

To bring a bit of contrast in the typography we added to our set the Hoefler font for a very limited use in order to bring light and contrast in the titles. 

We kept the original colours palette but we slightly tuned the red primary color. We matched it with a warmed black and a gradient of warm greys to adjust the contrast.

Alternative colours are currently being added to complement the palette when needed. 

When we started to collaborate with content creators we quickly found that we were working on content that was sorely lacking of visual elements, due to their nature.

We started to draw a library of elements that can then be mixed together to illustrate the content or identify services. The illustrations evolved into a hand-drawn style to humanise the general feeling. We also were careful to work with a limited set of colours and stroke styles to make sure drawing new elements later in the same fashion would be easy.

Some of the elements from the illustrations library 

The website is designed around a classic 12 columns grid with large gutters to ventilate the content layout. The website is fully responsive and the 12 columns collapse into a single column with an adjusted navigation on small screens in order to deliver an improved experience with great legibility on mobile phones. 

Technically the website was built upon a customised Twitter Boostrap (and Wordpress for the content management) that we code-named SMartstrap. We put in a lot of customisations to adapt the framework to the new SMArt identity, and we enhanced it with new custom components.

This SMartstrap helps us to build new projects quickly, from prototyping to production. It provides a shared set of styles and assets that make any new production conform to the visual experience we defined. SMartstrap is also heavily documented and included in an experience toolkit we are building. This toolkit helps to produce online content that follows the defined recommendations. It will also speed up production time while keeping a strong focus on the experience quality. 

The new SMartEu website is just the beginning of a range of projects we are currently cooking up in the Central Design's kitchen with SMart Foundation. In the near future we will also release various kinds of online projects for SMart, including online applications, portals, content platforms and more. 

If you want to stay updated please subscribe to our newsletter on our minimal website or follow us on Twitter. 

—

Geoffroy Delobel (@geoffdlbl)

http://centraldesign.be