This weeks ‘Website of the week’ belongs to Emblem, a law firm whose site challenges our preconceptions of what a law firm looks and sounds like.
Bright blocks of colour combined with photographs and bold modern text give the website, and the Emblem brand, a distinct personality that sets itself apart from the rest.
The site opens with an ‘attention grabber’ statement on its home page – which changes every time you re-load the page. ‘We see your ideas way before your wallet’ they say. Or ‘Check yourself before you wreck yourself (legally)’.
Makes you want to read on doesn’t it? ‘Awesome start-ups deserve an awesome start up lawyer’ and ‘Proactive pays off, re-active costs more.’
If any of these statements resonate you’re likely to think ‘these guys sound right for me!’ (Right?) This is just one of the ways the Emblem home page combines text and colour to create an impact-full design. So let’s look at the 4 cornerstones of brand design and how these have been applied to their website.
A brand is more than a logo, website design is more than a layout
There are four primary brand elements that contribute to consistency across your communications. These are:
Fonts: a confirmed selection of fonts and formatting rules for headlines, sub-headings and body text.
Colours: a palette of colour combinations and formatting rules that can be applied to page layouts.
Imagery: consistent use of imagery, patterns, and motifs with and the emergence of a distinct ‘ image style’ e.g. photographic, illustrative, hand-drawn.
Values and Concepts: one or more distinct ideas and behavioural values that need to be reflected in the brand experience e.g. simplicity, integrity, creativity.
Brand elements in action: 5 great design features
Brand elements can be combined across all platforms to reflect a companies distinct brand personality. In the case of Emblem their brand personality is modern and youthful. Here’s some of the ways their brand has been applied to their web design:
The energy commonly found amongst Emblem’s start-up centric audience is mirrored in the brands bright colours and snappy copy.
Brand-specific fonts are used consistently throughout the Emblem website for visual impact and increased brand-recognition
Photography is used to break up flat blocks of colour, adding depth and sense of place. Images of a city, a desk, and Nadia herself – the lawyer behind the brand – add a crisp professional appearance and ‘make it real’
Glifs and Symbols
Symbols are used on Emblem navigation buttons (which spark your curiosity) and then a text label appears ‘on-rollover’. Buttons pictured: ‘Philosophy’, ‘History’, ‘Advocacy’.
Emblem answers our question ‘What do you do?’ not with a list of services but with emotional and practical benefits – making them easy to understand, at a glance.
When you look and sound different
In reality, every company is different but sometimes we all need a little help to bring out our unique character and insights into our business communications and activities. By working with a designer to establish the four brand elements, you can create a solid foundation for delivering your message and embodying your brand.
Standing out from your competitors.
Consolidating your business intent and values into instantly recognisable imagery and behaviours.
Consistent and focused communications.
Repeatable brand patterns, saving on development costs.
Clarity of decision making through referencing your brand framework.
Increased pride in your business.
If you have any questions about developing or reviewing your brand please contact Maija @ Pixink.net who would love to discuss this with you.
Web Experience Design and Experiential Marketing are two different approaches: one in the real world, one on the web. What if you combined the two? An eco-system of on-line and off-line components would emerge – all of them reflecting your brand in a way that can be actively experienced. That’s Experience Design for digital-savvy businesses who want to be consistent across all platforms.
Little details matter. Event planners get it.
Digital technology is integral to how we communicate in our society. As a consequence, our web platforms are part of how we do business and how we communicate. If we can can agree on this – that we are living in a ‘Digital Age’ – then we can stop debating what tools to use online and offline and concentrate on what we have to say.
Brand Experience Design starts with what you stand for, and why people are going to connect with your brand over any other. Then finds ways to enrich the experience people have of your business in brand-affirming way.
1. Brand Experience Design is Value Based / Purpose Based
A clear sense of purpose helps you deliver a consistent message about who you are and what your company is about. Your purpose can act as an umbrella for all you say and do, re-enforcing its meaning; value; and relevance to your target audience.
Within the guard rails of a clearly defined purpose, a designer can unleash their creativity and really work some magic.
2. It’s Integrative
Brand experience design starts with a conversation about who you are as a company and where you’re headed. The objective isn’t to look at one communication tool (e.g. your website) in isolation, but integrate it into the bigger picture: your business plan, and the journey each individual client takes – from when they first hear about you, to when they become engaged advocates for your business.
3. It’s Business Focused Not Product Focused
The experience people have when they come into contact with your company at any time informs how they feel about you, and what they associate you with. That’s why brand experience design looks at building consistent messaging across all platforms. It’s business marketing not product marketing.
4. It’s Interactive or Participatory
Simon Sinek famously said that when people buy from a well known brand they are making an identity statement about themselves. When businesses have clear messaging and we like what they stand for – we connect with them on an emotional level. We love buying products from like-minded businesses.
Savvy businesses are looking for ways to give their target clients an opportunity to interact with their brand before they buy – it’s a show don’t tell ethos. Don’t just reserve the brand experience for people who buy your products.
5. It Has Integrity
The beauty of cultivating a specific brand experience is that it builds trust. By focusing on the human experience during the design process one creates something that doesn’t just “talk the talk”. Instead, what a business stands for is embodied and demonstrated in its behaviour and communications.
If you would be interested in a brand experience review please email firstname.lastname@example.org
Stelfox IT Recruitment follows the now prevalent trend of having a simple ‘cover’ to their website – a simple statement in bold type, against a full size background image. Aside from the logo, navigation, and a couple of supporting sentences, that’s what ones first impression is built on.
During planning and development, keeping things simple is a great way of achieving focus. No business finds it easy to condense what they do into a sentence or two, but in doing so, they get clear on their message.
I’ve selected this site as Website Of The Week to demonstrate the key elements of a website home page. Take a look at the site and see how easy it is to absorb the information ‘at a glance’. It’s all on one page not scattered throughout multiple pages – and there are additional pages if you want to go deeper to get more detail.
The home page includes 4 key features:
An introductory summary touching upon what they do, how, and why.
A picture of the team – real people, not impersonal stock imagery
Examples of clients they have worked with (testimonials are great too), both are ‘validators’
An invitation to connect
This is the formula Selfox has followed to create their landing page:
What the company stands for and what they do at a glance
2. Short cuts
Identifying the primary purpose of your site and how you and your site visitors will use will increase usability and performance. In this case, Stelfox, a recruitment company, has made it really easy for visitors to search for jobs, using a prominent search bar. Follow their example by choosing one ‘most important thing’ to go at the top, and making it easy for users to skip straight to the information they are looking for.
3. Who we are and what we do
A bit of text and a photograph is all that is needed to get a sense of the people behind the company. Using Stelfox as an example you can see this is different to the about page or team page which goes into more detail.
4. Proof we can do it
Awards and client examples are displayed on the home page to reassure potential clients at a glance.
5. An invitation to connect
There is a (slightly too small) “Lets Talk” button at the bottom of the page, directly underneath a relevant quote. The quotation is a nice touch of character which has the potential to connect the company to like-minded visitors.
The best ideas to take away…
On this website the navigation follows you down the page and you don’t need to scroll back up to flick through the site.
Cleverly, the diamond motif which originates in the logo has been used on the ‘Services’ page to create icons for each service. Little details like this go a long way to maintain the consistency and character of ones brand on the web.
Without growth, we are standing still and if we are standing still we die. By growth, I don’t necessarily mean profit – there is more to growth than a swelling bank account. By growth I also mean our innate ability to learn, develop insight, and act on our ideas to do something different.
At the Shirlaws Annual Conference this year there was at least 200 entrepreneurs and Shirlaws coaches from around the world gathered to explore innovation as a magical process for developing assets in their business.
“If you can predict it, it’s strategic. Innovation is magic.”
So said Darren Shirlaw, who shared with us an impressive timeline of ideas and innovations he has helped lead since 1994 and then generously demonstrated how they were leveraged into income.
Any business owner unconvinced about ‘taking a leap’ and trusting the innovation process (and yes there is a process) needed only to look upon the graph David J Hall from The Ideas Centre shared with us.
The graph showed the pace of change and opportunity in the world; and the pace of change in a business when its response to the world is based on traditional models – that is “the way it’s been done before”.
To close the gap between reality (the world of opportunity) and your business, doing something different is required.
To quote Darren Shirlaw -
If you do something first, you are called a leader.
If you do something different, you are called innovative.
It doesn’t need to be more complex than that.
3 steps to get you started
Assign one person responsible for cultivating innovation in your business and make time to play with ideas.
Let go of ‘how’ thoughts.
You are “exploring” not “fixing”.
Ask questions, don’t build solutions.
Frame the question.
The question is a problem statement that puts ‘guard-rails’ on your innovative ideas
Create an ideas portfolio
It’s unwise to try to implement all your ideas at once, but keep a record of ideas you can return to at a later date.
Let go of the fear of being wrong.
No business problem has a single right answer.
You may have noticed the increasing popularity of video on websites – not just as featured clips, but as moving full-screen backgrounds that add depth and interest. Here is a collection of 5 very different examples from the understated and impact-full, to experimental and delightful.
A clever use of video backgrounds emphasises Youth London’s USP – they understand young people, because they are themselves youthful.
The video clips are incredibly short, just enough to add movement and realism. Having young people looking back at you out of the screen is striking and somehow made more powerful by their positioning on the page. Great design decision, don’t you think?
The ‘Philosophy’ page at XY Agency displays series of ‘ethos’ statements on a moving background. A short video clip fills the screen and is on-repeat. It adds depth, interest, and movement to an otherwise simplistic page.
Video adds depth and movement and it’s attention grabbing too
One thing to bear in mind, if you use the same technique, is that movement is attention grabbing and therefore it is important to consider what you are drawing attention to. Does the filmic backdrop add anything? Context, meaning, re-emphasis?
There’s nothing worse than an auto-play video that plays before you’ve decided you want to see it. It’s a common mistake made on website home pages – but this site bucks the trend and puts the user in control with the call to action ‘Slide to begin’.
This site uses video to signal the start of a narrative and ‘make it real’.
Once you have decided to look deeper the first video takes you on a journey into/along a street before introducing you to navigation options. Full screen video and audio narratives are interspersed amongst full screen images throughout the site to deliver a multi-sensory experience and give voice to the people of New Orleans.
5. Just a Reflektor – Watch in Google Chrome
Featured as Website of the Week last month, this website hosts an interactive short film exploring the themes in the song ‘Reflektor’ by Arcade Fire. It’s so immersive in fact that it’s possible to quite forget yourself and any preconceived ideas about the nature of film and what videos on websites look like as each of them are broken.
This is an immersive Google Chrome experiment using a combination of video and interactive technology.
Relationships are made up of a series of moments – ‘points of contact’ where we have an opportunity to interact.
You don’t need to physically present or live online in order to interact with your audience. You can invite users to interact with your organisation online and set up your website and email to respond automatically.
Imagine each point of contact as an opportunity to draw that person closer – closer to an understanding of who you are and how you can help them (and visa versa!); closer to recommending you to their friends.
Social media; news sites; websites; email; and video are all tools that can help us build relationships. Coupled with art, design, and digital thinking your digital toolbox can be implemented in surprising and powerful ways.
Building relationships is done by
* Reaching out / demonstrating a genuine interest in others
* Helping one another out / problem solving
* Sharing interests and things in common
* Hanging out in the same locations (online and offline)
* Making time to talk / dialogue, discussions, conversations
* Sharing good times – having fun and celebrating
Have you leveraged your web platforms to do any of these?
As a type enthusiast, I may be bias. Please correct me if you too don’t find this website utterly delightful.
An interactive playground, this website is dedicated to showcasing a new typeface ‘FF Mark’ which is available for purchase on FontFont.com
Simplicity and integrity are the key words that jump out at me. The ‘cover’ page of the site has an introductory paragraph and a background film that loads quietly in the background without disrupting the user experience.
Interactivity quickly becomes a given, as each section allows you to explore the typeface from another angle.
Navigation is seamless with help from red arrows that show you where to go next. This allows movement to be free and playful, centered around the question ‘what can I play with next?’
Experiment with the FF Mark font in the browser, composing paragraphs, and applying advanced styling.
Adjust the styling of the clock, and see what time it is in different time-zones.
Explore the weight of any individual character
Experiment with combining text in different layout scenarios
In truth, this website best speaks for itself. Check it out here: www.ffmark.com
In order to adapt to a world that has fully embraced digital communications it is important to resist the pull of digital solutions and return to the core purpose of being online in the first place. Building relationships and sharing information.
The temptation of vimeo and youtube, sound cloud and iTunes, blogger and wordpress, Facebook and twitter, LinkedIn and Email is great. All of these things are tools you can use — that you see other people using — but they are not answers in and of themselves.
When you find yourself struggling to get website visitors engaged and taking action – focus not on the tools you might use, but the quality of interaction you are looking for.
Here are some ideas to get you thinking:
Path making, way finding, and problem solving — most people who visit your website have a problem you can help them with. You know that in order to solve their problem there is a path they must follow. Why not create an journey for your users with a clear beginning, middle, and end?
Give visitors a way to connect – really connect. Is providing social media links really enough? How might you encourage a two-way interaction? Can you personalise the experience?
Give people a way to contribute their point of view. E.g. guest posts, Q&A sessions or debates, and image sharing. Consider what would be appropriate for your organisation
Encourage dialogue and conversation. How do you want your customers to communicate with you, and do you want them to talk to others about you? How might you make it easier for them to do both these things?
Extend an invitation – is a call to action really enough? How can you step it up to the next level and provide access to a deeper level of information, knowledge, and connection (in exchange for an email address)?
By considering the quality and nature of interactions they are looking for, a website owner can use their online platform to strengthen the relationship with their audience.
Idea generation and brainstorming are my favourite pastime, so why not give me a call and we can talk about how these questions can be applied to your business? I’ll buy the coffee!
This website is a stirling example of how to combine concise copy and understated design to make you and your website shine, i.e:
Make an impact
Glow with praise
The ‘Bienville Capital’ website (pictured) stands out because of the following:
1. A simple and purposeful home page with a clear message
The home page consists of one sentence, a short loop of film depicting New York City at the current time of day (night, day, dawn, etc), and a discreet menu bar on the left which features the logo.
At a glance we can see where Bienville is located and what they believe: ’Creativity starts with viewing the world differently.’ The loop of film in the background re-enforces this philosophy by giving us view of New York city and the use of time-specific media helps us feel connected to the place in real time.
Where next? The menu slides out from the left of the screen on-click, and the page is so free of clutter – it’s not hard to work this out.
2. Clear concise copy that connects the reader with their brand and benefits they can feel.
‘How do you view the world?’ – as a heading this links back to their core philosophy and speaks directly to the reader with a question. The unspoken question is ‘Do you share our values/approach?’
The body copy goes on to make the reader feel good about themselves, and make it clear what they can expect from the firm.
3. Useful, relevant, content that will re-enforce your claims and keep people coming back for more
The lasting value of this website is the knowledge library which re-enforces Bienville’s claim that you can rely on them for knowledge on specific investment themes. By sharing some of their knowledge the firm becomes more believeable and credible as a source of knowledge.
4. Attention to detail / Remove all clutter
Lastly, and perhaps most importantly, all design decisions have consistently been made to enhance and showcase the content and brand messages. The result is a clean, bold design, and clear messaging.
In his recent Guardian article (pictured) Rohan Gunatillake calls on the arts sector to shift its funding focus from projects and products to the how and why of process.
The time has come to make a case for funding people because it is the creative person or team that drives the ‘how and why’ of process.
As I see it, the format and structure of project funding is based on assumptions about the shape and nature of the collaborations and outcomes. While this sounds like common sense to a funding body, it leaves little room for anything genuinely new and innovative to result.
In order to embrace digital technology and create strategic partnerships with other professional networks, the arts must set the spirit of the artist/maker free – and allow them to shake preconceptions.
Art comes into it’s own when it responds to the status quo by exploring new possibilities and alternatives.
Given free license to develop a new art venture in collaboration with professional artists, academics, and creative companies, R&D partners would have the opportunity to use art as a genuine catalyst for change.
In the end, innovation will result from new insights and ways of working, and pre-defining the shape of a project or project team will only stifle innovation.
Does innovation come from funding projects or people?
In the end, the answer is obvious, isn’t it? The finished project or product is the product of people – their skills, their knowledge, and their conversations.