menu

E3M website and branding

By: Daniel Pomlett on 09.12.14
Category: Economic, Web
Tags: , , ,

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

Related Work

Open Labour website design & build

Open Labour is a grassroots and member-led organisation who describe themselves as standing for transformative, left-wing politics and encourage an […]

Inclusive Growth website design & build

The All Party Parliamentary Group on Inclusive Growth have a membership drawn from across the Houses of Parliament and, in collaboration […]

Wake Up Europe!

Wake Up Europe! are a group of journalists who believe passionately that the European project, despite it’s imperfections, is vital […]

Foreign Desk Ltd website design & build

Foreign Desk Ltd is a company started by four prominent UK journalists who, having worked globally, recognised a need to […]

Liam Byrne MP website design & build

Liam Byrne is the Member of Parliament for Birmingham, Hodge Hill. We were asked to design and build a website […]

Nick Hornby official website for Penguin Books

We were asked by Penguin Random House to build a website to promote the books and writing of the author Nick Hornby. The […]

InFacts

InFacts are a group of prominent journalists who passionately believed that Britain would be better off remaining in the European […]

The Wake Up Foundation 2050 Index

The Wake Up Foundation is a, journalist lead, educational charity that, in it’s own words, ‘aims to raise public awareness […]

Wolmar for London website build

Christian Wolmar is standing as a Labour candidate in the 2015 London mayoral elections. His team asked us to build […]

Vintage & Cie

Vintage & Cie are a french company, who sell rare and fine collector’s wines and spirits. Although they already had […]

Sign up to our newsletter

Send me the newsletter