May 18th, 2010.
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.
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.
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!
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
March 24th, 2010.
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?