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
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 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.
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?
Thank you to Steff for passing on this lovely graphic illustrating the differences between Helvetica and Arial.
June 9th, 2009.
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.
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.
Evangel Cathedral is a church site that is in dire need of ADD medication – this site is buzzing, literally.
You may need to take motion sickness medication to view the next site. I kept asking myself “Is THIS what Jesus would do?”
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.
Sometimes I wonder if people are even looking at what they publish online?
Bad site, but great product! Inflatable churches, shame it’s a whole six months to my next birthday.
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.
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.
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.
Lets see how many tables we can fit on a page. Oh look, that many.
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.
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.
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.
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.
Possibly not the worst site on the list, but hell, these guys are supposed to repair computers, not infect them with awful designs.
This eyesore of a site at least has a nice dog picture- dogs win, web design loses.
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.
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.
This guy actually does web design. In that case I’m a brain surgeon.
Does anyone have any idea what this site is even about? I really am at a loss.
Someone thought that using a colour scheme based on a wounded zebra would be attractive.
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…….
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.
Yes, more frames, tables, bright colours, marquees, and flashing graphics – you’re spoiling us!
This is actually Aaron Wall’s first site. I guess we all started off like this, myself included, mine just isn’t online anymore
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.
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.
With thanks to…..
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.
We took a dogs dinner of an old website and transformed it into a work of art that converts users to buyers. AsÂ always the project was delivered on time and on budget.
Yapp Wine Merchants website now has a fresh, modern design, packed with tools to help you find the wine you need.Â It is unfrightening and designed to cater to Yapps broad user base.Â We’ve made searching for wine fun and easy whilst retaining Yapp’s connoiseur edge.
Everyone has their own ways of looking for wine so we implemented 4 ways to navigate the site:
- The Easy Wine selector uses dynamic searching
Watch your search results change dynamically with easy to use search sliders. Have a play.Â The great advantage of this is thatÂ it all happens onÂ one page with no hopping backwards and forwards to and from search results.
- The Food and Wine selector allows you to search for wine by Food Type by clicking on images of different food types.Â This is not rocket science but is dis-armingly useful.
- Advanced Search - for those who really know what they are after.
Search by Regional maps
- “You recently looked at”
Isn’t it annoying when you look at lots of different items and then have to re-find them by re-doing the searches.Â Well we eliminated this problem with the “You recently looked at section” so you dont have to re-do previous searches.
- Tell a friend / Bookmark tools
Not strictly a navigation tool but so simple and effective.Â How else can you let your loved one know what you want for Christmas?Â Simply post your choices to your Facebook page and invite others to have a look.
Search engine friendly
As always with Datadial, the site is built to be search engine friendly
All pages from the old site have been redirected to the relevant new pages.
The site uses Friendly URLs so http://www.yapp.co.uk/Wine-List/Rhone-South/Chateauneuf-du-Pape/ instead of
Integrated stock control – the site is integrated to draw stock levels from Sage accounts.
The site is fully content managed, giving Yapp control over all aspects of the site including creating offers, mixed case offers and product information.
The site is also integrated with Datadial’s email marketing system.