The Future of Web Design conference is amazing this year – here’s a quick update after Day One.
The Best
The format of this year’s conference is tons better than last year. The atmosphere of the Brewery is great, and the food (which is also outstanding) at the break times gives people a chance to talk to each other and network. It has been much easier this year to meet people and talk to other designers.
It’s really hard to choose a favourite speaker because they’re all so great! I think jQuery for Designers is probably going to have the most impact on my day to day work because it has encouraged me to take a new step into jQuery.
The design clinic time was great, and it was a wonderful opportunity to talk to designers you really respect. I got some great feedback from Mike Kus, who has to be one of my all time favourite web designers because of his original work.
The Worst
Definitely had to be font.com’s sponsor slot. Not only were they the ugliest slides of the day, the introduction was dated (we know about using @font-face already) and then followed by a whole sales pitch on why we should all buy their service. It was very amusing to see the tweets coming in during the talk!
Don’t get me wrong, their service is great and no doubt I’ll be using it soon, but the talk and presentation definitely gets labelled the worst, after everything else was so amazing.
More to come tomorrow, but in summary…
(I’ll add links to slideshows and downloads as I get them)
-
Play. Destroy. Create. from Brendan Dawes
I loved his reference to maths and nature, and seeing how he had turned that into something new. It’s about observing things like the trend of technical stuff to non techy people. Some of the things he was showing was simply play to explore and provoke reactions. He encouraged us to play, have passion and love what we do!
-
How to Get Started with CSS3 from Dan Cederholm
After doing a lot of CSS3 work already, I wasn’t expecting to get much from this session, but was very pleasantly surprised. I now have a list of things I want to try, tools to use, and new ideas generated from this session. Definitely ideal for people new to CSS3, but still lots of great stuff in there for those of us who have already been using it.
-
jQuery for Designers: All You Need to Code (Remy Sharp)
Very inspiring stuff, and I’m now eager to take the plunge into jQuery!
Download slideshow
http://jqueryfordesigners.com -
Accessibility in Web Design Robin Christopherson
I’ve seen Robin speak a few times, and each time he has something new and very informative. This time he encouraged mobile versions of websites, as the format of them is also much more accessible. He also encouraged the use of Text Captcha because it’s accessible, free and offers a comprehensive API. You Tube are now also providing automatic captioning on their videos!
-
Learning to Love Humans: Emotional Interface Design (Aarron Walter)
Making things usable is not enough – we should also make them enjoyable. Don’t compromise on the base needs for t»he user, but look for ways you can add that extra layer of emotive enjoyment – like the Mailchimp quotes!
-
UX Masterclass with Web Standardistas Web Standardistas
This flowed on really well from the Emotional Interface Design and looked at the secret for making something that is usable really great. The secret is YOU!
-
Smart Tips for Wireframing Brad Haynes
Wireframes help communication, focus and workflow. This session was a good practical reminder of why we should be using them and looked at which techniques to use where, including some good tools.

Our old home page
I always find that designing your own website is a much larger task than designing a site for someone else. You become the pickiest designer ever, striving for the tiniest details to be spot-on and investing a lot of energy, but then receiving a lot of energy back when the results work out just as you hoped.
Our aims for the new site are to make it much more visually appealing, demonstrating our design work within the site itself. The structure was changed entirely to give ultimate focus on the full-service aspect of our business – that clients can use all of our services or just the particular ones they need. We researched what our clients thought of us, and wanted to bring the website in line with the recurring aspects of the feedback: we embark on a journey with our clients (we don’t just launch a site and leave it), our work yields results, we’re proactive and push expectations, clients talk directly to the people working on their site, and we’re a close knit team of specialists.
I think we’ve achieved all of this in the new design. Here are the main aspects that went into it:
Fonts – the Big Decision

Our font choice for the new design
The font choice underlies everything else in the design. We wanted to move away from the Georgia look of the previous design, and needed something that communicated high-tech modernism and intelligence more effectively. I also really wanted to take advantage of the @font-face CSS property so that we could just our chosen font in a wider variety of situations. (sIFR tends to restrict you to using the non-standard font only for headings – unless you want multiple headaches.)
@font-face technology is moving very quickly thanks to sites like Typekit, however there is still a long way to go. The choices of fonts available are still relatively small, especially when it comes to fonts that have been engineered specifically for screen use. Ideally, we also wanted to choose a font that could be rolled out in our printed documentation for consistency.
After a bit of research I found Graublau Web. It is a lovely font that communicates all of the values we wanted to capture. It is produced by a quality foundry; there is a specific screen/web version; it’s licensed for @font-face implementation; and is part of a wider print-based family that we can purchase for our hard copy material. Tim Brown’s demo page meant that we could check out how the font behaved in different browsers before implementing it.
I was chuffed to say the least!
The Grid

Underlying grid of the design. Each line shown here is 12px apart.
The site adheres to a 12px grid to give it comfortable vertical-rhythm. All of the font sizes, line heights and margins on headings and paragraphs are multiples of 6, which means the eye can easily jump from one item to the next down the page without any jarring of irregular spacing.
Consistency of design and uniqueness of pages
With such strong underlying consistencies through the design, we could then branch out and have a bit of fun with other elements such as the background colour of the page. With dark backgrounds and the bright orange of the Datadial brand, we had to be very careful that content on the page was not being swallowed by the strong contrasting colours. Having the ability to change the background colour on the page released us from that.
We developed a base colour scheme to avoid any clashing choices arising in the future. But I didn’t want to hinder our creativity with brand guidelines that are too restrictive, so we also allowed pages to have individual CSS files on the site. This means we can really branch out if the content warrants it. This will be an ongoing task, but 2 examples are Sexy Panties and Naughty Knickers and exemplifying the stunning Hope and Greenwood brand.
Transparency
I’ve always been one for subtle design effects. I believe the details add up to a sense of a good experience, even if the visitor isn’t fully aware of the individual details.
The site uses CSS3 transparency throughout it to give a different impression on individual pages. By setting the content area to white with 90% opacity, each page has a slightly different tone: the equivalent of setting the page area to #ECEBEA, #EBEBEB, #EDECEB. The navigation, social links and footer use the same effect with a black base.
What about Internet Explorer?

Our browser stats
Thankfully, our site has a relatively low (and hopefully ever-decreasing) number of visitors using Internet Explorer. This allows us to fully take advantage of CSS3 and provide Internet Explorer users a suitable fall back without compromising the majority of our visitors. So instead of subtle transparency there is a normal solid colour background (always #EEE), instead of text shadows the text sits on the page as normal, and Javascript takes care of the text columns.

Internet Explorer 8 compared to Google Chrome
It may not look quite as pretty, but with the majority of our visitors able to see my full intentions without having to wait for Javascript to load, I feel the use of CSS3 pays itself off. I also try to remain optimistic – hoping that IE9 will look just as good as Chrome or Firefox does right now, and therefore future-proofing the design.
I’m about half way through The Elements of Typographic Style and thoroughly enjoying it. I really wish there was a way you could read a book and ride a bicycle so I could get more reading time in while commuting, but I’ll just have to take my time reading it instead!
Some thoughts so far…
“With type as with philosophy, music and food, it is better to have a little of the best than to be swamped with the derivative, the careless, the routine.” (Page 117)
I think this is true of all design. In a time where you can get free website templates anywhere or make a website yourself so easily, the designs that have a lot of thought, care and expertise behind them really stand out from the crowd.
Shaping the page
Although the book focuses on print, the principles found in the chapter Shaping the Page can be applied to web design also. It is a great reminder to me of design school, especially the theories of the Golden Section and Fibonacci series. Using ratios based around π are useful for arriving at a design that is easy on the eye and feels comfortable to use.
Visiting Switzerland

Coffee cup in Zürich
What you read opens your eyes to things around you; I have been noticing nicely designed type everywhere! Recently we spent a weekend in Zürich – I love it how clean, thoughtful design surrounds you in that beautiful country.

Thank you to Steff for passing on this lovely graphic illustrating the differences between Helvetica and Arial.
At business school I was taught the way to make money was to make our assets sweat. I think they meant to get the most out of everything you owned and to make sure it was being worked night and day to maximum effect. And so at Datadial we try to do the same for our clients’ websites by making sure that they are focused on developing websites that maximise sales levels by being search engine friendly and that convert users in to buyers.
The usual reaction in squeezing more out of a website is to rush into a redevelopment exercise. Redeveloping a website is expensive that is often undertaken on a whim and without real research into what is working and what is not on the current website. Indeed it’s often the case that the current site is perfectly capable of delivering many more sales and that it just needs refining to improve the user experience.
This doesn’t need to be an expensive exercise. The key to successful marketing is to consistently test and measure everything that you do. Delivering fantastic conversion figures is within reach for us all, no matter how small the budget.
Here are four ways that we have carried out for some of our clients to help increase their onsite conversions at virtually no cost.
1) Online surveys
What better way to really understand your customers than to ask them for direct feedback? What is it that makes them want to buy from you rather than your competitors? How did they hear about you?
Carrying out market research will enable you to build on what you’re doing well and make any necessary adjustments and help you to grow. You will be surprised by how many people are willing to take the time to reply to surveys.
We recently did a survey for one of our clients Design911.co.uk which gave vital insight into user behaviour. Coupled with Click Tracking report (see below) Design911 have been able to fine tune their website to respond to users’ expectations and behaviour.
Below is a sample of the survey results that were produced.



2) Mouse tracking -
Why do other sites make it so difficult to buy anything from them? We’ve all experienced a confusing website at one point or another. But could your site also be suffering from usability issues? Find out where the sticking points are with Mouse tracking.
You may also find that users are trying to click on things on your site that are not designed to be clicked on. We found this with Design911:
With design 911 we found that that very few people clicked on the middle of the page and that lots of users tried clicking on ads on the right handside of the page which were not actually clickable. We found too that the search box was being under used as it was below the page fold and that users were taking at least 60 seconds to make a click on key navigation items.


3) Study your analytics
It’s all too tempting to gloss over your analytics reports – these reports contain vital information which reveal where users are getting stuck, turned on or turned off. Seems obvious to say it but unless you take the time to check what is going on on your site you will never be able to intelligently amend your site and measure the effect of your changes.
There is a mass of information to look at but here are 3 basic things to do
Check Bounce Rates: Bounce rates tell you if a visitor who has been directed to your site via a search engine or Adwords likes what they have found. If they leave the site immediately this is called a bounce. If this happens you need to question if you are showing the right products for the keyword search and if you could provide better information, or if they had come via Adwords, are your Adwords set up correctly.
Funnels: You can set up funnels to determine where people are dropping off over a series of pages (typically the shopping cart process). Different funnels can be set up for different goals.
Compare to previous periods: There are a number of trends such as time on site, the number of keywords that you are being found for, the number of pages per visit that are good to compare from onen time period to another so that you detect trends.
4) A/B Testing
Having pawed over your analytics you can then start making intelligent changes to your site. How will you make more people fill in your enquiry form? How can you get them to add one more thing to their basket. Take a look at the forms below and guess which one had the higher conversion rate.


This company carried out A/B testing on their sign up form and increased their conversion rate by 10%.
This is called A/B testing or Multivariate testing which we use to determine which images, copy and design most appeal to your customers and which version increases conversion. You can have as many or as few variables as you like when creating your A/B testing. Ideally you would set it up to automatically serve different versions of the page to alternate users but to save money you can do it on a week on/week off basis.
We helped Conference Genie increase conversions on their site by altering the sign up process. Interestingly we did it by making their site more complicated.
Weirdly the problem on this site was that it was too easy to use. Users could not believe that they could just dial a default number, punch in a code and start a conference call. So we made the site appear to generate a specific telephone number and a unique code for them. Turning a one step process into a two step process actually increased conversions.
Making small changes instead of wholesale changes was also recently backed by Peter Fitzgerald, who leads Google UK’s retail industry division. He said that the whole area of analytics – that’s technical jargon for examining the ways that people navigate websites when they shop online – has taken on new importance to retailers.
Simple changes can make the world of difference, particularly since statistics show that 50.1% of online shoppers who place items in their shopping carts still do not buy them.
By subtly altering a website’s layout based on how people use it, websites can increase sales significantly.
“There is often a lot of unimportant information on the top of a web page. If you move this information out of the way it can make a huge difference,” said Mr Fitzgerald.
For example when Comet, the electricals retailer owned by Kesa, the listed stores group, removed two bits of text from the top of its web page (saying ‘top checkout tips’ and ‘you’re safe with us’ respectively), its conversion rates increased by 6.7pc. “Online retailers are spending more time on analytics to see where things are going wrong,” said Mr Fitzgerald.
Department store group Debenhams recently tested the message and positioning of an online sign-up form for its Beauty Club. Improvements to it increased the number of customers the chain signed up by over 89pc. Little such tweaks are being made by online retailers as a means of gaining incremental sales. Experts say that the results of the small changes can be seen almost immediately.
Google’s Mr Brittin said: “By interpreting analytics data and continually testing their sites, retailers can really understand what consumers are looking for online. Often very small and seemingly obvious tweaks can boost sales significantly.”
All of the above exercises can be implemented fairly quickly and inexpensively. However, don’t underestimate the time you need to truly get to grips with your findings.
By constantly analysing the results and carrying out appropriate changes you will be able to squeeze every last conversion out of your site without incurring expensive redevelopment costs.
Decent web design doesn’t cost too much these days. With the advent of WordPress and a plethora of free web templates it’s not that difficult to knock together a site that most web designers would be happy to call their own. For some reason there are those that strive to be different, difficult, or deluded.
Here are 30 of the worst sites bandwidth can buy.
Warning, be prepared to regret clicking this link! Seriously, epileptics beware! I’m not quite sure what was going though their minds when they thought this was a good idea.
http://www.paperrad.org/

I’m actually a fan of MIA, but this site seems to have been designed by the same guy as the site above, though possibly while drunk, asleep, or both.
http://www.miauk.com/

Evangel Cathedral is a church site that is in dire need of ADD medication – this site is buzzing, literally.
http://www.evangelcathedral.net/welcome.htm

You may need to take motion sickness medication to view the next site. I kept asking myself “Is THIS what Jesus would do?”
http://www.dokimos.org/ajff/

This site is actually amazing, there are no other words for it. Why procrastinate over going for a two or three column layout when you can go for five. It’s okay though we’ll make things simply by having 9 forms of navigation.
http://www.havenworks.com/

Sometimes I wonder if people are even looking at what they publish online?
http://home.texoma.net/~jimg/welcome.html

Bad site, but great product! Inflatable churches, shame it’s a whole six months to my next birthday.
http://www.inflatablechurch.com/

You’re looking forward to your big day as a bride. Who do you choose to take care of the outfits for your big day? The site that looks like it was designed by borderline crazy person of course. Missing plugins? I must be missing the one that makes this site readable.
http://yvettesbridalformal.com/

Bright colours hurt the eyes, and godawful design that scares small children. I had to highlight the text just to read it. Under construction apparently, maybe the best option would be to knock it down and start again. If I were a part of Princeton Consultants, I think I’d consider litigation.
http://home.comcast.net/~dmaneyapanda/zugorific/personal2.html

Broken links, and I’m not even sure what that is in the background. This site does partially redeem itself however by allowing the viewer to chose music, or not. Not I think.
http://ronoslund.com/

Lets see how many tables we can fit on a page. Oh look, that many.
http://www.huntgraphic.com/moto.htm

Perhaps not as offensive as the previous sites, this site definitely has been beaten with the ugly stick. I can’t believe they have the nerve to offer free backgrounds. That’s like Gordon Brown offering free PR advice.
http://members.tripod.com/fuzzymartian/

A big fat obnoxious site, with a monotonic robot voice. This page must have been designed by a former, disgruntled employee. Scrolling, flashing text and graphics actually made me have to take a break from researching this post.
http://www.esupersoft.com/lips/

If the appearance of this site means all officers are on the street protecting the citizens of West Virginia, rather than taking web design lessons, then it has my blessing.
http://www.martinsburgpd.org/

Never let so called ‘web conversion experts’ tell you that you shouldn’t put all of your products on one page. Why bother with layout, or indeed logic.
http://www.arngren.net/

Possibly not the worst site on the list, but hell, these guys are supposed to repair computers, not infect them with awful designs.
http://home.comcast.net/~computerphysicians/
This eyesore of a site at least has a nice dog picture- dogs win, web design loses.
http://frnz.de/

Jackson of Piccadilly does not fit in the ugly, flashy, boring or eye-popping categories. In fact, it is rather pretty. It has a lovely face, but no substance. Navigating this site made me want to reach for a coffee. I don’t even like coffee.
http://www.jacksonsofpiccadilly.co.uk/main.htm

As well as the wacky misspelling of the word “wizard” in the site’s name, this is a pretty gruesome site! Not the sort of design that would convince me that they’re the best people to stick a needle in my arm.
http://www.wizzardstattoo.com/

This guy actually does web design. In that case I’m a brain surgeon.
http://www.webking.com/computer-services/index.html

Does anyone have any idea what this site is even about? I really am at a loss.
http://bremen.weltregierung.org/abstraktindex.html

Someone thought that using a colour scheme based on a wounded zebra would be attractive.
http://www.izzza.com/

Maybe not typical of German efficiency and ingenuity, unless you count efficient as putting as many elements on the page as possible. Actually, maybe those crazy Germans have stumbled on something…….
http://www.ingenfeld.de/

A site of very few words. I guess they’re letting the pictures speak for themselves. I’m not sure why, but I feel a bit uncomfortable looking at this site. Maybe it’s becacuse I feel like I’m about to get run-over by those trucks.
http://www.mccormickrecovery.co.uk/

Yes, more frames, tables, bright colours, marquees, and flashing graphics – you’re spoiling us!
http://www.fabricland.co.uk/

This is actually Aaron Wall’s first site. I guess we all started off like this, myself included, mine just isn’t online anymore ![]()
http://www.newnavy.us/

The sparse wasteland of this site is perhaps only rivalled by the grusome design of their building, which they seem to be very proud of for some reason.
http://cbm-eureka.com/

Does this chiropractic site instill trust? I think a good rule to live by is if someone can’t sort out text justification then you probably shouldn’t let them play with your spine.
http://www.proactivechiropractic.org/

With thanks to…..
Yesterday I tried something new as part of my attempt to release creativity by stepping away from computers. I recycled old printed designs by cutting out the elements, so that the client and I could drag around the pieces to get a layout working.
Initially it was quite amusing – designing a high-spec ecomm website with bits of paper, scissors and a glue stick! But it really worked. We were able to get the page laid out very quickly, interact with it, drag bits around and play with spacing collaboratively – without touching a computer.
I have been finding pencil sketches working well too, but this just took it an extra step as we could so easily drag bits around without having to erase pencil lines to make a change.
Grid style product layouts are now the norm and dare I say it, a little bit dull. And just as you are congratulating yourselves on getting all your ducks in a row, as it were, the big players are moving on and showing some more innovative ways of displaying products.
Again Zappos lead the way with their Zappos Product Explore – click on a product you like such as a Red Stiletto, you are then shown 54 similar products in a matrix. Horizontally you see products that are similar in style (more high heels in other colours). Vertically you see products in the same colour (red sandals).”
Compare this with Clarks new website which though quite good, (especially on customer service) pales in comparison to its US rival with regards innovative product display.
Check out also some other retailers daring to try something a little bit different.
Amazon WindowShop – turn on your speakers!
Apple iTunes Cover Flow
Sometimes photos just don’t cut it – especially stock photos that are also being used on many other sites. Illustrations using traditional (using pen, ink, watercolour, pencil) and vector (a type of computer graphics) methods are starting to fill some of those holes on websites around the world. One major benefit of illustration is that it can look exactly how you want it to look. The illustration can be of many different styles, according to what look you’re after, and there are many examples around the internet.

One of the sites that we’ve designed recently, Conference Genie, uses a cartoon style vector illustration to capture their three service in a unique way. I thought I would share with you the process that I went through to create these graphics.

Each character starts off with pencil sketches, which helps me and the client to get the same feel for the illustration. This part of the process should be a time of a lot of discussion and collaboration with the client.

The sketch is then scanned into the computer and opened in Illustrator. Here I outline the sketch and start building up some shapes.

The shapes are then filled with colours, and tweaked according to what is needed.

Finishing is then applied to the illustration in Photoshop and it is incorporated into the website design for a unique look and feel.
It’s no secret – I hate computers. Outside of work I avoid them as much as I can. I mean they are very very useful things, but i hate being tied to and dependant on a machine.
I think the root of my dislike is the way they diminish your creative output. Many others have written about how going straight to a computer with a design can limit the effectiveness of the outcome. Mindy from Vidget wrote late last year how she’s found her creativity drop significantly the more she looks at gallery websites around the internet. This oversaturation of information is exactly how I feel.
When I go to my sketchbook rather than my computer, I can often come up with much better results, and much more quickly. So my New Years resolution is to use my Moleskin to its fullest, filling it with sketches and drawings, before touching the keyboard & mouse.











