web design

Build Conference 2012

It was a predictably wet day in Belfast. I made my way into the town centre, passing large banners proudly displaying the Build identity, and met other Buildees for a co-working session.

Over the course of the day we had interesting discussions about our approaches and challenges with our work as web designers. Responsive design was a topic we returned to often, discussing our solutions to the challenges of the design process and especially prototyping designs in a responsive way.

8192939539_77db86e1a6.jpg

The hub of Build was the Black Box where that afternoon some designers talked about their passions outside of work. I am obsessed with making things, and although I love my job I am rarely on a computer after work or on the weekends. This multi-disciplinarily creative approach was a real focus at Build and permeated everything. (Why else hold an axe-making workshop at a web design conference?) The afternoon talks were a really honest glimpse into their creativity outside of work and it was fascinating to see how that varied and where it met their designs.

Oh, and that night our team came second in the Standardista’s Open Book Exam. Sweet.

The next day everyone gathered at the Waterfront for the full conference day. The talks remained on topic with the Build theme: creativity filled with passion and craftsmanship. There was a strong sense of the web entering a more mature phase of development and what that may mean as we map out a new era.

Mandy & Tiffani came from content backgrounds, but their talks on editing and being true to yourself should be applied cross-discipline. Reshaping a work while remaining true to it and telling an honest story about yourself are both super relevant to all of us.

Kirby’s talk, Everything is a Remix, was really reassuring about the critical stage of reusing that happens in creative processes. Let’s face it, we all do it, but it can often result in feeling that we are not ‘creative enough’ as we appropriate other people’s work. Remixing is an inevitable part of idea generation and should be used to enhance the source and the result.

Jeff Veen is a natural storyteller. His engaging talk about his teams at Typekit had so much in common with the team I’m part of at uSwitch, I feel really fortunate to make that statement. His final topic of Design/Product Reviews was really helpful as it’s an area we haven’t got right yet (evident in all of ourinconsistencies) and I’ve come away with some great ideas to try with the design team.

Ethan’s talk at the end of the day was super relevant to a project we’re working on with Restless Development in Uganda, where our audience could very well be in rural areas using a shared mobile phone accessing our service via WAP or SMS. By having such strict technical requirements it forces you to focus the service and full accessibility is a must. But even with our other projects – where I’m loving creating such image-rich designs – we have to remember that a significant number of our visitors are struggling on Edge mobile internet or overloaded broadband connections and they won’t see what I’ve lovingly laid out in Photoshop. I have to be ok with that – but how do I balance it with striving for quality experiences? Does quality just become relative?

The Build experience has been fantastic – we’re all buzzing and have a lot to continue thinking about, discuss and explore. Build 2013 is the final year for this amazing conference, make sure you get your ticket!

The beautiful photos on this page are by Al Power.

Designing the Datadial website

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.

The old website

The old website

 

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 Grid

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?

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.

 

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.