menu

E3M website and branding

E3M is an initiative that supports a group of leaders from the largest and most successful UK social enterprises that trade in public service markets. It is supported by partners to provide expertise and to share knowledge about the key ingredients for successful social enterprise growth.

They asked us to design and build a website to facilitate the sharing of publications, blog posts, events and other forms of content between Social Enterprise leaders. The site needed to be easily updatable and work across as many platforms as possible.

The results can be seen at e3m.org.uk

Colour scheme

Though there wasn’t really an existing E3M brand, Social Business International did have a logo that they were already using and wanted to retain. The logo consisted of three fairly bright colours, two blue and one orange, so the first question was how to integrate these colours into a site without it becoming garish and overwhelming.

It was decided that the best way to do this would be to build the design on a foundation of more tonally neutral colours, such as white, greys and blues and then use the three main colours sparingly to denote different content areas and call to actions across the site.

 

Content breakdown and icon design

The name ‘E3M’ makes reference to the three main areas that the organisation’s work would focus on, namely, Markets, Models and Money so primarily the content would be divided up down those lines. Each area needed to have a distinct visual identity so that it was easy to distinguish which kind of content you were looking at and so that users could quickly navigate to articles that might be of use to them.

With that in mind we decided to create a set of icons for each of the three M’s which could be used on articles and content pertaining to that area. We decided to use the colours from the logo for the three content areas and combined the ‘M’ shape from the logo with an appropriate visual signifier. The three icons can be seen here…

In addition to these three areas there were two additional areas, Measurement and Europe, that would need to be represented across the site. Again they needed to have their own identity but should sit back hierarchically from the three main areas. Like before, we used the letter shapes from the logo for constancy, but this time used a more neutral, dark blue combined with the same secondary colour. Again the secondary colour element would form a visual signifier for the given area but this time circling the letter instead of interacting with it…

Web Design

E3M had a lot of different  content requirements for this site. In addition to the articles in the different icon areas they also needed to showcase their partners and the various business leaders who comprised the E3M community.

The site was powered by WordPress so it was decided that all articles would be added through the built in blog functionality, with the different areas being specified by the category a post was in. We then used php to check the category of a post and style it specifically for that area.

To complicate things further it was possible that a post could be in two or more of the categories (e.g. a post about Money and Europe). In these instances I made the styling hierarchical with the post adopting the style of the most dominant area.

In addition to the five article areas a post could also be categorised as an event or a publication. In these instances articles were moved out of the main loop and displayed on a separate section of the site.

For the Leaders and Partners sections two custom post types were created so that layout and content could be designed and added in a separate area of the admin interface.

Enewsletter

E3M wanted to send out a monthly enewsletter, keeping subscribers informed on the latest news and content that had been added to the site. We produced the below template to accommodate that need. The template carries through the branding from the site, making use of the same content areas and icons. It is coded to work within Mailchimp for ease of use by the client and works responsively, across a wide range of email clients.

E3m newsletter desktop view

E3m newsletter: Desktop and tablet view

Documents

In addition to their online output E3M also produce various documents to support their work so needed a template that could carry the branding from the website through to a printable format.

Technologies used

  • Photoshop
  • Illustrator
  • HTML5
  • CSS3
  • SASS
  • JQuery
  • Grunt
  • PHP
  • WordPress
  • Responsive web design
Visit the E3M website