There’s no denying the importance of the first impression, especially when it comes website design. But while we’ve been so focused on the aesthetics, we’ve stopped thinking about what sort of impression we’re making overall.

Creating a lasting impression takes more than good design. You also need quality content. It takes a person just a few seconds to scan a web page and work out if it relates to what they’re looking for – and it’s the content’s job to convince them that, indeed, it is.

Be relevant

Before anything else, your content should be relevant. And being relevant means giving people the information they need, in the places they expect to find it. If your business has an interesting start-up story, great. But your home page isn’t the right place for it. And when you’re really passionate or knowledgeable about your industry, it’s easy to find things fascinating, but difficult to know when something of interest to you isn’t of interest to your visitors. Scrutinise every piece of information and keep asking yourself if your readers will find it useful.

Keep it short

More content doesn’t mean more impact; it usually has the opposite effect. You might have a lot say, but you can’t say it all on one page. The average page should have no more than 300 words on it, but if it absolutely must be longer, break up the text with bullet points, sub-headings or anchor links, and see if some of the content can have its own sub-page. Your visitor should be able to take in all the information in front of them at a glance.

Write for humans

It’s nice to be on the first page of Google, but it shouldn’t be your ultimate goal. High search engine rankings aren’t worth much when your visitors are put off by over-optimised content.  As search algorithms evolve, they become more human-like, which means they look at your website in much the same way people do. With this in mind, always write for people first. Quality content will be naturally keyword-rich, attracting search engines and, most importantly, engaging your visitors.

You can do better than make a good first impression. Spend some time on getting your content right or invest in professional copywriting, and you’ll be impressed by the difference it makes.

This guest post was written by Julia Cameron of Blue Ink Copywriting.  You should follow Julia on twitter.

As such, we’re evolving, and we’re looking for a talented interface designer to join our team.  If this sounds like you, or you know someone who might be suitable – please go to evolution.humaan.com.au for more information.

The website that Jay was tasked to redesign was that of ‘Sparks‘, a children’s medical research charity based in the UK, and the makeover was published in the October 2010 (Issue 207) .net print edition.  The original version of the website is included below:

Sparks Original Website

After considering the brief and the existing website design, it was clear that a lot of time had been spent on the website and the content, but it wasn’t presented in a way that encouraged users to get involved.  The redesign involved creating an aesthetic that was appealing to users and encouraged engagement, remained professional and delivered information with more clarity and structure:

Sparks Website Makeover

You can view the full version of the design in our work section.

The full article excerpt is included below.

Sparks.org.uk Makeover

The content and information provided within the Sparks website is up to date, relevant and thorough, but it seems that the design and information architecture haven’t been given the same level of attention and they’re affecting the website’s real potential to engage its users.

On first look, it’s obvious that the people looking after the Sparks website have dedicated a great amount of time and effort in delivering what they have today.  They’ve already got all of the right information for a great website, but aren’t presenting it in a way that is appealing to the user.   Added to this, the site seems to be directed at the wrong audience – it’s too technical and lacking the vibrancy and fun that exists within the charity and the team behind it.   The foundations of the website are there, but it falls short of presenting an inspired design that properly conveys the charity’s background and purpose. Overall I found that the biggest issues and areas for improvement were:

• The colour scheme is not complementary and often makes the website difficult to use
• There are too many items competing for our attention and there’s no clear hierarchy
• There’s a lack of refinement and attention to detail
• The main text is justified and reasonably small, which makes it difficult to read
• There are navigation elements throughout the site with no clear function
• There’s no distinction of purpose between content areas

The site needed a complete refresh – it needed to present itself in a way that was appealing to its viewers, remained professional and was able to deliver information with more clarity and structure.

Look & Feel

The biggest issue I had with the existing website is that it wasn’t what I’d have expected from a charity dedicated to helping children.  I wanted the new website to reflect it’s values directly and communicate its purpose in a more light-hearted and welcoming manner.  With this in mind, I decided to begin with the logo and colour scheme.

Starting with the logo was a tough decision as it’s a part of Sparks’ established brand.  I didn’t want to make any radical changes, just introduce a more approachable aesthetic that would fit in with the rest of the design.

The result wasn’t too different, but moved away from the harshness of the original typeface.  I chose Quicksand for its approachable aesthetic, but also because it was available as an embeddable web font which could be used for headings and display text within the website.

“They’ve got all the right information for a great website, but aren’t presenting it in a way that’s appealing to the user”

– Jay Hollywood

The existing colour scheme lacked vibrancy and in some places made the website difficult to use.   To introduce a sense of fun I decided to incorporate a more pastel-based colour scheme.

It was important to keep blue as the primary colour, but I also brought in a set of secondary colours that would complement the design and help with the separation of content.  Added to the new colours and vibrancy, some subtle textures would bring more life to the design and further communicate that the focus is on children.

The navigation on the existing site was prominent, but lacked personality and wasn’t encouraging users to browse.  I moved ‘Login’ to the top of the page and removed the words ‘in the’ from ‘News’ as I felt that they were unnecessary and misleading.  I decided to incorporate relevant icons for each of the main navigation items in the header. These would be useful for increasing the prominence of the navigation overall, but would also encourage interaction, help users to visualise the purpose of each section and maintain the new aesthetic that I was aiming for.

The original website included several areas for important information, but there was no hierarchy between them.  With the new design, I introduced a ‘feature area’, with the intention of displaying five interesting elements that Sparks would want the visitor to see, using JavaScript to cycle through them over a period of time.

This area sits directly under the navigation and includes a title, image and summary for each item, which links to a page of Sparks’ choosing.  Added to this, the most recent news and events would be displayed with less prominence below, along with the introduction from the current website.

Adding Clarity

Included within the existing design was a link to sign up to the Sparks newsletter and a list of ‘Quicklinks’. I decided to incorporate these into a sub-footer between the main content and footer of the new design. This would bring clarity and separate of these items from the main content. Also included in the sub-footer was an expanded set of supporter logos from the existing design, which reduced the need to animate them one by one and helped display them in a way that wasn’t exhausting for the viewer.

Finally the footer more structured and re-introduces the colour and texture from the top of the page.  Included here is Sparks’ original content, but also a repeat of the main navigation items and social links to encourage engagement.

Thanks for reading!

It’s been a long time coming (we have been trading as a company for 8 months now) but as I’m sure a lot of creative types would agree, often the last project to get completed is your own.  So it is with great joy (and relief) we’re finally able to do away with our glorified coming soon page and  pull the curtains off the new model.

This marks quite a big step forward for us as it establishes a solid foundation for which to truly extend our brand online, provides a place to display our growing body of work and allows us to express our thoughts, ideas and inspiration with a wider audience.

Please take your time to have a look around and let us know what you think below!

It was an honour to be invited to speak at an event which we have attended in the past, to present alongside David McKinney of Jammbox and also take part in a Q&A panel with the talented Richard Giles, Stuart Hall (and David McKinney) further discussing the presentations and examining the future of the industry.

Tomorrow when the web began

Jay’s presentation examined the history and current state of web design to find a common progression of where we’re headed for the future.  The title, ‘Tomorrow when the web began’ was a reference to a key point of the discussion – that we’ll soon overcome the limitations of technology that have guided web design in the past, and a progression to a mobile and social and seamless web will grow stronger.

The presentation is available to view on slideshare and the PDF is available to download below.

• Download the slides from the presentation
• Download the slides from the presentation including notes

Thanks to AWIA for the opportunity, David, Richard, Stuart and all of the attendees for a great night!

We’ve developed a fantastic relationship with Explorer Travel since embarking on our first project with them around a year ago and have since worked on many components of their online identity.  Below is a summary of the projects we’ve undertaken with Explorer Travel and their outcomes.

Kuredu Resort

Approximately a year ago Explorer Travel approached Humaan to redesign their existing Kuredu Resort website to provide a professional design with a fresh, tropical feel that reflected the beautiful location of the resort. We created a design that incorporates an enticing bright and simple aesthetic, captures the mood of the resort and allows users to browse information and resort offers in a clear and structured manner.

My Cruise Website

My Cruise Website is Explorer Travel’s most recent addition to their range. It gives franchisees the opportunity to purchase their own website which allows users to search for and enquire about cruise holidays worldwide. Explorer Travel required a design with a clear cruise theme and a clean and easy-to-use interface that would be easy for their franchisees to update and add information to. With this in mind, we created a website that focused primarily on users searching the site. The search function of the website is easily accessible from the homepage which was kept very simple with the latest cruise offers being the secondary focus. Internally, the interfaces are designed clearly and consistently to create a sense of familiarity and ensure the user is not overwhelmed by the volume of information that is available.

All Sorts of Holidays & The Best of Travel

Explorer Travel required a design for their entry-level websites, nicknamed All Sorts of Holidays and The Best of Travel. The purpose of these websites is to demonstrate the functionality available in each package and encourage new franchisees to enquire about starting their own travel website. The designs that we delivered for each of these sites are bold, colourful and enticing; share the same key elements; focus on the search function of the website; allow users to advertise upcoming package specials; make it easy for potential customers to make enquiries.

My Travel Website

Explorer Travel required a clean and professionally designed website that presented information about their travel website packages clearly and concisely and also allowed them to add current information about upcoming seminars and specials. Although this website is run by Explorer Travel, it is also a brand in its own right. So it was important that it was distinct enough to be identified as its own entity but could also be classified as an extension of Explorer Travel. We created a website that was minimalistic, clean and information-focused. The structure of the homepage allows for a broad overview of the services offered on the website and gives users the immediate opportunity to get in touch or find out more information.

Disneyland Paris

Being a very competitive area of the travel market, Explorer Travel requested a design for their Disneyland Paris website that promoted confidence and engaged the user. Receiving booking enquiries through the website was the primary focus for this upgrade because the response to the current website was quite underwhelming. To encourage user interaction and enquiries, we used Disney characters and imagery to design a fun and family themed website that allows the user to immerse themselves in the familiar Disney backdrop whilst locating the information they require quickly and easily.

Email Campaign

To announce the launch of the new My Cruise Website, Explorer Travel required an email campaign to be designed and implemented. The campaign was to showcase the features of the new website and encourage new customers and enquiries. The template we designed for the campaign adopted the look and feel of the website and highlighted the rich features that the new website offered. The template was implemented with Campaign Monitor and we have since designed a simplified version of this template that allows Explorer Travel to reply to general enquiries generated through the website itself.

We have thoroughly enjoyed being part of numerous projects with Explorer Travel over the past year and have been delighted to provide them with designs that have revitalised and strengthened their online presence within the travel industry. Working with Steve Wood from Explorer Travel is always an absolute pleasure and we are very pleased to have built such a strong relationship with his company. We look forward to helping Explorer Travel further enhance their online brand and continue to provide inspired solutions.

Working with Karen and Jay continues to be a fantastic experience.

Unlike many web designers they are able to fuse together a brief, which is often quite vague, with a design that not only captures the essence of what we have visualised but also incorporates features that ensure that our websites are always unique and at the edge of current technology.

Our website builders also love their designs appreciating that fact that Karen and Jay both understand and are sympathetic to the challenges faced when converting a design into a living website.

Overall, I think that this is the perfect combination of skills and am delighted to have discovered them on the other side of the world!

Steve Wood.
Explorer Travel and mytravelwebsite (UK).

We discussed our ideas briefly with Myles Eftos of Madpilot Productions and he also saw the value of such an application. With very little hesitation we soon agreed to take on the project as a collaboration, bringing Myles’ extensive experience in app development together with our background in design to create our iPad app – Counter Culture.

Developing an identity

Although the iPad itself was relatively new at the time there was already a large catalogue of apps available, so it was important to us to have a strong, recognisable identity that fit in with the theme and purpose of the app. We identified three areas where the identity would feature prominently – in the app itself, on the website, and in all marketing material – and focused on developing a unified identity that would work well in all situations.  The outcome of this development was a design that came in two parts – a simple logotype that was a stylised version of the name which could be used for establishing our name and identity; and a set of graphic elements that would influence the design of the website, app and all other marketing material.

Counter Culture identity and supporting design material

Simple, useful and customisable

The purpose and function of Counter Culture was always going to be simple – enable users to collect customer emails offline.  However, we wanted to make sure that the app could be flexible, personal and useful beyond its primary purpose.  As such, we identified a set of secondary features that we felt would support and increase the overall appeal and usefulness of the application:

• The app would allow users to customise and brand the app with their own design
• Users would be able to capture emails without an internet connection
• When a connection was available, the app would sync with and store data in the a user’s account on the website
• Users would be able to create promotional slideshows for their iPad that would display when idle
• Lastly, being big fans and active users of the brilliant email marketing system Campaign Monitor, it was also a priority for us to also allow Campaign Monitor users to sync the app directly with their accounts.

All of this functionality became a core part of what we wanted to get out of the app, although there was much work to be done.  Added to the initial branding and identity, it was important to have a flexible, usable interface for the application and also a website that not only helped promote the app, but facilitated the management of the application and email database.

Designing the application

The application was the key component of the whole exercise and would be used by people who likely wouldn’t be familiar its purpose, and possibly not experienced with using an iPad either.  For this reason, it was essential that the purpose of the application was clear, the form fields obvious and the experience simple.  As such, the public view of the app was made of three components – two form fields, and a background.

The public view was to be the main focus of the application, so the remaining elements consisted of just a welcome screen, login or register options and a basic settings panel.

Signup and settings interface

In terms of customisation, we designed and included four separate background designs that could be loaded for use in the app immediately, but also included the ability for owners of the application to load in their own designs through the user account on the website.

Alternate interface designs

The website

Although the website served a secondary purpose, the design, structure and overall experience were critically important as it would facilitate the promotion and management of the application.  For this reason, the website was a key component driving the development of the identity as it would be used to create a story and help make the purpose of the application clear.  As such, the supporting elements – the coffee girl, counter and blackboard – became the focus and set the overall aesthetic for the website.

Counter Culture website design

This aesthetic was continued through to the user account area where they could login and manage their application and database.

Outcome

Once completed, it was not long until our app was available in the App store and began being downloaded and used in the wild.  It was a very intense but exciting project to work on, and we’re extremely happy with the outcome in terms of both the function of the application as well as the overall aesthetic we developed.

You can view more detail on the identity design,  and website / application design in our work section.  You can also check out Campaign Monitor’s write up on Counter Culture here.

If you’re interested in the application, visit the Counter Culture website, or download the app from the app store.

When people feel they had to express themselves for originality for its own sake, that tends not to be creativity. Only when you get into the problem and the problem becomes clear, can creativity take over.
Charles Eames, Architect, Graphic and Industrial Designer, Filmmaker

A creative brief is a fundamental part of the design process and a key foundation upon which successful projects are built. Not only does the creative brief ensure that all parties understand the requirements, background and goals of a project, it helps to inspire ideas and develop an understanding of a project that would not have been possible otherwise.

If you are a client, a creative brief will outline your goals, and help you measure a project’s success. If you are a designer, a good creative brief is your best friend.

The objectives of a creative brief

A creative brief doesn’t need to be (and shouldn’t be) overwhelming. An effective creative brief can be simplified down into three simple points:

• The Past
• The Present
• The Future

The Past

The past represents everything that has already occurred, and has bought you to today. This point identifies the constants or known elements of any project. The past consists of the client details, the background of the project, the target audience, the competition, the market position, and the existing brand.

The intention of the past is to develop a solid understanding of the client, their business and the background of the project.

The Present

The present is today. The present is the reason you have been hired and why you are writing the brief: the present is the problem. The present consists of the intentions of the project, the objectives of the design and the problems that need to be solved, and sets the requirements by which the success of the project will be measured.

The present will identify the problem, and set out the objectives that the design will be built upon. Depending on the project, the present could be relatively simple, or quite detailed.

The Future

The future is the expected outcomes – essentially, the vision for the project. The future is not yet known and, as such, is somewhat variable. The future encompasses a number of aspects of a creative brief, including: the intended style, the budget, the project’s timeline, specific project requirements, sources of inspiration and references.

The future is very much subjective, and it sets the requirements and goals for the solution of the project. It’s important to note that a creative brief shouldn’t prescribe solutions, but just provide suggestions – the brief will be the basis for the designer to develop ideas of their own.

Using these three key points, you should be able to structure a brief of your own, regardless of whether you are the client or the designer. If you are a designer, it is important to gather as much knowledge as possible about the project first, so that the brief can be constructed properly.

Develop a Questionnaire

Many designers (including ourselves) find it productive to provide a questionnaire to a client from which to develop a brief. A questionnaire is an effective method of gathering information because you can ensure you’re asking all the right questions to formulate a very specific brief.

A questionnaire doesn’t have to be boring and monotonous either – just keep it succinct and clear. With modern technology, it’s really easy to create something engaging and simple. You could use a word document, create an editable PDF, or even develop a web form. Just make sure that the fields you provide for answering your questionnaire are appropriate for the question.

In terms of structure, a questionnaire should cover the Past, Present and Future elements as previously discussed, but in more detail. For example, a typical website design questionnaire could be structured as:

• Company Information (past)
• Company Background (past)
• Market Position (past)
• Target Audience (past)
• Brand (past)
• Objectives (present)
• Requirements (present)
• Specific Information (future)
• Style Information (future)
• Reference Sites (future)
• Budget * (future)
• Timeline * (future)
• Extra Information (future)

*If the project has already been approved, the budget and timeline would likely be scoped in the project proposal.

Each of the points above can set the structure of the brief, and you would likely get more specific by adding multiple questions within each criterion. However, there is no point getting too specific if it is not necessary for the project at hand.

Consider the depth

A wise man once tweeted: “If the brief in words is more than the budget in dollars, I raise my red flag.” (@maxvoltar).

A brief for a 3 hour business card design probably wouldn’t need a questionnaire or a 4 page brief – it may just require a telephone conversation or a couple of paragraphs in an email. Whereas a 4 month design and development project would likely need a lot more effort and structure to develop a full understanding of the task at hand.

Similarly, if a client sends a lengthy brief for a 2 hour flash job which would probably require half the budgeted time to read and interpret, there is obviously an issue with the agreed scope. This should be identified immediately and discussed with the client.

There is no right or wrong here, just consider the effort vs. the reward.

Summary

The creative brief is one of the most important tools for any designer or client – it will set the foundation for a project, identify its direction and contribute to its success.

Without a creative brief, you’ll be more than likely walking into a project blind. The aesthetic result may be outstanding, but without understanding the problem and nailing the requirements, the solution may have been a waste of your valuable time.

Regardless of the means, we are confident that by following the guidelines and methods described, you’ll be well on your way to developing a useful, structured creative brief that will guide you to success in your next project.