Wise words…

Rule 10 –
Good design is as little design as possible-
Less, but better – because it concentrates on the essential aspects, and the products are not burdened with non-essentials.
Back to purity, back to simplicity.
Read more on Dieter Rams ten most important principles for what he considered was good design.

Lean and Agile. Design evolved.

Lean and agile… yes please. Just sounds right so it must be hey?

The Agile inspired approach to design, has its roots in the lean manufacturing process and Agile software development. There has been much discussed recently about how to apply these principles to the digital design process a great read with reference to this Eric Ries book the Lean Startup. 

It inspired me up to see how streamlined we can get the process on design projects here at konstructive.

A lot of what Lean and Agile working is all about is good business and design sense.
We have set up teams that are purposely compact so that we can work in more agile way. With designers and coders working together with clients to design, build, test and measure early on. It’s about empowering the project teams to make the right choices and to be able to respond and pivot quickly and efficiently where and when needed. Whether we produce a website, mobile, app or commerce tool they are all essentially products and as such we are manufacturers. I have long thought of what we do as design engineering. The leaner and more efficiently we can work the better the product and the more rewarding and successful our work and lives will be.

The exciting and breathtaking rate of change in the digital space means we are constantly reassessing and improving our process and this helps us stay lean, efficient and agile as a company.

Above all it’s important to constantly adapt and evolve.

There is always a way to do better.

A user focused approach to web design

Website design is essentially a solution-based discipline – a rational, logical, sequential process that is intended to solve problems and satisfy a need.

The key then to successfully designing to maximise online engagement is to put the focus on the user, the human, the decision maker. A user centred design will focus and respond to the needs, wants, and limitations of that user, encouraging them to stay on your site and delve deeper.

Taking the first step towards implementing fundamental design strategies that improve engagement, requires you to research and understand your customer from a rational and emotional perspective. This will allow you to carry out a critical review of your site from your end user’s perspective and identify key areas for improvement.

As a good starting point here are a few basic common barriers to engagement that we typically see from a design and layout perspective.

No clear calls to action
A big issue on many sites is a lack of clear calls to action. ‘What do you want me to do? What’s in it for me? Your visitors don’t have much time so simplify things – don’t make them work!

Confusing customer journeys
Is it clear what a potential customer is supposed to do on arriving at your site? Your visitors are coming for a reason – they have a need and your site design should clearly direct them to where they can find the information that answers that need.

Positioning statement lost, branding poorly executed
On arrival at your site a visitor will make an incredibly quick decision about whether you offer what they want and if you are better than your competitors. If they can’t decipher who you are or what you do, they’ll quickly lose patience and confidence in your brand – be upfront and clear.

No real animation or interaction
Does your site inspire and encourage interaction? This is incredibly important for customer engagement because the more it does, the longer a user will spend on your site interacting with your product and brand… and the more they do this, the more likely they are to fulfill your call to actions and come back.

Typography needs to work harder
Typography can play a critical role in signposting user journeys and scent trails throughout the site. Clear, well designed typography complements a user’s journey taking them deeper into the site, whereas confused, badly executed typography can actively confuse and discourage them to continue their journey.

Inconsistent and confusing use of colour
Colour doesn’t just make a site look good. Colours have particular emotional associations which help to draw the eye. It’s also a very important tool for categorising multiple products in multiple categories. Sites which don’t recognise these associations or use colour inconsistently create a confusing and off-putting user experience.

Site real estate needs to be better utilised.
Ever been faced with a webpage that is so jam packed full of information that you have no idea where to start? Having lots of content is great but too much in one place is overwhelming. Give your content space to breathe, create an information hierarchy that breaks it into manageable chunks and directs your visitor towards the bit that they need – if you make it logical and don’t waste their time, they’re far more likely to persevere, clicking through to other pages to find more detail.

They may sounds obvious but these mistakes are all too common. Getting the basics right can make a significant difference to your sites success or failure.

And as ever simplification and honesty are key…

“Any idiot can make things complicated, it takes a genius to make things simple”
A. Einstein

Rules are guides

We all need barriers to push against. To define our lives. Our zones of comfort. Less gives you more. Too much choice and uncertainty leads to poor design choices. As designers we need limits so we create rules to define these limits.

Defining these is a key part of the creative process and something that is essential when designing in the commercial world, where time is the main constraint.

I see rules more as guides.

Guides we can voluntarily adhere to. They are more often than not are born out of real world solutions to real world problems generated in professional environments. Responsive Web Design (RWD) is a perfect example of this. In the wonderful constantly evolving world of web design today’s rules are just guides as things are moving so fast we need to keep constantly reassign and defining. I believe there need to be rules and these rules guide us to create the best possible solutions and experiences. We need to consider many things in addition to creativity and communication we needs guides for our approach to HTML 4, HTML5, typography, interaction, view ports, browsers, standards, bandwidth and audience abilities.=

Let us be guided by the rules…

Our set of rules we call a Guide.

Lets us guide our clients to create beautifully effective sites that help define the rules…

Effective use of colour online.

I believe that effective use of colour is key to a successful and accessible website. Communication and brand recognition is greatly aided by the use of a simple, relevant and effective colour scheme throughout the site.

Optimising design for the screen based medium is something many print designers take a while to get to grips with as designing for websites involves dealing with backlit luminescence, which can vary from monitor to monitor and from platform to platform. Colours are RGB not CMYK. Therefore effective and use of limited colour with emphasis on contrast is very important. An understanding of how certain colours perform on screen compared to when they are printed helps avoid communication and branding mistakes. In general it’s a good idea to restrict the number of colours used and isolating areas involving large amount of colour variation i.e. colour-coded section dividers, navigation elements and photography. Other points to note are that: large areas of text are more readable on black on white than white on black. Sites can involve movement as well as clever use of colour to emphasise important points and branding truths.

Colour tips and guidelines

  • Understand your site’s message and brand
  • Choose colours that reinforce your message. For instance, if designing a site for a financial institution hoping to convey stability, choose cool, muted colours such as blue, grey, and green. In this case, using warm, vibrant hues would undermine the site’s brand.

Understand your audience

Cultural differences can lead to unexpected responses to colour. Additionally, demographic segments and age groups respond to colours differently. Younger audiences generally respond to more saturated hues that are less effective with older segments.

Use contrast for readability

Colours similar in value do not provide enough contrast and hinder legibility and accessibility. Black text on white backgrounds provides the highest degree of contrast.

As ever its important to test and test early… here is a useful tool to use as a guideline/reference point:http://leaverou.github.com/contrast-ratio/

Why, What if and other stories…

I’ve always liked the idea of distilling a theory down to a few compact stages and this take on the “who, what, why” or “who, what, where” type approach to problem-solving is rather interesting.

“Asking Why, What if, and How, in that order, can help one advance through three critical stages of problem-solving. “Why” questions are ideal for coming to grips with an existing challenge or problem—helping us understand why the problem exists, why it hasn’t been solved already, and why it might be worth tackling. “What if” questions can be used to explore fresh ideas for possible improvements or solutions to the problem, from a hypothetical standpoint. When it’s time to act on those ideas, the most effective types of questions are practical, action-oriented ones that focus on “how”: how to give form to ideas, how to test and refine them with the goal of transforming possibility into reality.”

— Warren Berger

You can read Warren Berger’s full article here >

Also interesting relating to this is the inspiration for the 5 ‘ws – What, Why, Where, When, Who & How

“I Keep six honest serving-men:

(They taught me all I knew)

Their names are What and Where and When

And How and Why and Who”

— “Rudyard Kipling – The Elephant’s Child”

http://www.boop.org/jan/justso/elephant.htm

Work for free or for full price, but never for cheap.

I’d like to agree with this as it kind of looks right on paper, but I’d have to add a caveat regarding pitching for design based projects – in this case free is bad.

It’s an age old debate and covered so eloquently in an article by Andy Budd back in 2006.

Recent events have revived this issue and it’s one I’d like to deal with once and for all. 

Recently we were asked to provide a potential client with a’design boost’ for their marketing, some ideas for emails and site layouts.  Now the title ‘design boost’ already gave us reservations as to how this project may develop, but the view was taken that client would be a good fit and there was lots of scope to help them improve their on-going online presence.

So with the carrot of future work dangling in our faces and an initial meeting requesting design concepts and ‘ideas’ we were at a junction, should we move forward with our heads or our hearts. Our hearts told us to throw everything at it and invest in the opportunity. Our heads told us that if we design the solution now, the clients in-house design team could just take the ideas without paying a penny. By pitching in visuals we’d either solve the problem and retain our design kudos, or fail in the clients eyes. We chose hearts and a week of effort was used to produce a pitch presentation which was well received. The client loved the approach and design thinking and we felt happy that everything was well received and we’d done our best.

We received a request to put a cost together for the work based on a vague requirement. The team had a meeting and took a view on future work; client fit etc. and priced the job at almost cost, with our approach based on current best practice and the large amount of experience we have in a project of this kind. There was some initial back and forth communications with client and then… radio silence. That is until a promotional email arrives in my inbox from this company that I can only say was extremely heavily influenced by the work we pitched.

I personally felt very angry… Violated… How dare they take what we did for free and get away with it! 

Unfortunately this is all too common when approaching pitches in this manner. It’s a calculated risk that’s heavily weighted in favour of one party. Thankfully we rarely approach pitches like this.

A far more positive, respectful and productive approach for us starts with a receiving well considered RFP. We then invest our time in responding to this, engaging with the client through meetings and conversation, culminating in a final document which will outline our approach, expertise, initial costing and hopefully justifying why we are the right partner for this project. Ideally the team are then invited to present document and a selection/decision is made. This is the start of a relationship based on trust, transparency and respect. If appointed we can move forward together and start the design and project process in earnest. This enables the client to see how we propose to work, what they’ll get and what the project will actually cost. 

My view is that if we initially produced all the design and creative upfront, for free, the whole process has already been devalued.

From an IP perspective it could easily be used to boost flagging creativity, or highly influence another approach (something that’s subjective and costly to challenge legally) or equally as undesirable just discarded altogether.

The other side to this is if you are successful and win the work, it is difficult to recoup the initial costs and this work may need to be discarded/sacrificed once the project discovery phase begins. By solving the problem at the pitch stage it makes it very difficult to charge for it later on and the foundations of the client/agency relationship is already on shaky ground. 

So, why should we have to give so much away for free?

Simplify, then add lightness…

940x470_simplify

This fantastic phrase coined by the late great Colin Chapman inspires much of my thinking and approach to design projects.
To Simplify, then add lightness. So simple yet effective. Making the right choice with the minimum of options is tricky. Engineering the lightest most efficient solution takes skill. It’s years of experience that gives us and the confidence to successfully employ this strategy. To fine tune what works best, you need instinct feel and experience. It’s a process of streamlining and selecting from the massive range of ingredients and options we now have access to. After all it’s far easier to add than take away.

Perhaps the easiest thing one can do to ensure lightness and simplicity when working on a design project is to constantly ask,

“Why?”

Why are we adding this?

Why are we taking this away?

Why would users care?

Why would people share this?

Why will people do this?

Why can they do this?

Why will they still do this?

After all… the question is half the answer.

Less is more…

940x470_lessismore
I’m not a fan of rules being imposed on designers. I feel it stifles creativity and the ‘question everything’ ethos involved in the creative process. But essentially this statement defines the design process in a nutshell. The process of researching, inspiring, channelling and filtering the options into the most efficient effective solution. This takes skill, talent and time to make effective and informed choices. This is of course essential in all areas of design but even more so in the fast pace of the digital world.

Efficient well designed ‘Honest’ experiences, products, applications and devices enable business and life in general to operate more efficiently and effectively. Good design feels good and makes you feel good. It’s this honesty that helps make the world a better place to be.

I recently read this great article on honest web design.

I was also quite surprised to find some interesting principles from the team working at Microsoft on Metro:

Clean, Light, Open and Fast

We took an approach that we call “Fierce Reduction” to remove any elements in the UI that we felt were unnecessary; both visual elements and feature bloat. It allows us to shine a focus on the primary tasks of the UI, and makes the UI feel smart, open, fast, and responsive.

Alive in Motion

The transitions between screens in a UI are as important the design of the screens themselves. Motion gives character to a UI, but also communicates the navigation system, which helps to improve usability.

Celebrate Typography

Our design inspiration is very typographic, and it felt like it was time for User Interfaces to be uncompromising about type as well. Type is information, type is beautiful.

Content, Not Chrome

It’s the content on the phone that people want, not the buttons. Reducing the visuals on the phone that aren’t content will help you create a more open UI, and it also promotes direct interaction with the content.

Authentically Digital

Finally, we believe in honesty in design. A user interface is created of pixels, so in Metro we try to avoid using the skeumorphic shading and glossiness used in some UI’s that try to mimic real world materials and objects. I agree with a lot of what is mentioned here and it’s great to see such core design principles great being embraced in the digital world more seriously that it used to.