Web design

FOWD conference 2010

I've just spent 2 really awesome days at the Future of Web Design conference. John Hicks talking about Icon Design

The talks were awesome, in particular I got a lot out of the sessions on Emotional Design and User Testing; and the jQuery for Designers information will also be really useful. It was great having the design clinics and hearing Mike Kus' review of my work, I really respect him as a designer so it was a great opportunity. The whole format was much better than last year, and gave much more opportunity for networking. Odd fact: Ryan Carson is crazily tall, and being rather short I felt like a dwarf talking to him!

Most of all I'm excited about all of the things I want to try out and do now. Things like unfinished ideas for this blog that I didn't want to use Flash for are now possible with CSS3... oh so many ideas you'll just have to wait and see! I also met some really awesome people, it's very cool to talk to other web designers from different areas, share challenges and have fun!

I've done some more detailed write ups on the work blog, check them out: FOWD Day 1 and FOWD Day 2.

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.

New website

One of my friends, Sokha Nhim, has just started her own business in tailored formal wear.  She was going to launch a website for herself from iWeb... but I couldn't stand the thought of it and so I whipped one for her in my spare time instead! Sokha's website

I'm happy with the design - it's very suitable for her audience and was quick to do and has a lot of scope for future development with the content.

As yet, she still has a whole range that has not been shot yet.  Currently she's working on 3 beautiful flower girl dresses, and we're going to shoot those at the final fitting, and after that hopefully get her remaining pieces up in the gallery.

FOWD

The reception areaGraphic Design posterToday I went off to FOWD, I really like conferences because they just encourage and inspire you to do new and better things.  This was especially good because it was all about design and the stuff that I do day-to-day!  So there was Danny Sohmekh talking about Agile design processes, Jim Coudal talked about harnessing creativity, and Good Barry presented on how to communicate your skills in a society where design and websites are commodities.  My favourite presentations of the day were definitely Mike Kus' beautiful slides (supporting his talk about the importance of graphic design, the slides were very inspiring!) and Mark Boulton's talk on typography which is an area that I always want to learn more about. Microsoft did quite a cool story telling using their surface display which was fun. One of the best bits about it tho was meeting up with some other London web designers... I hope we can continue to network in some way, as being the only designer at work does have it challenges sometimes!

All of the presentations are now available for download; if you couldn't come along then definitely check them out.

3 year anniversary of my blog

Crazy... my blog is 3 years old! YAY HAPPY BIRTHDAY WEBSITE!!! Given my tendency to avoid everything computer-ish after work I do think I've done pretty well to post something every month over that time... I guess it goes to show that something can take shape over time.

There has also been a redesign for every year, but I think I'm pretty happy with this design so might stick with it for a while longer, what do you think?

Hugest ever thanks go to my brother Paul for all of his help and hosting!! :-)

News

Visual diary showing sketches of this blog designI know I've been rather remote the last week. But if you notice all the changes to this site then you'll know why! A brand new design, a new maemay address (thanks Pauly!), and a lot of Wordpress/PHP learning ;-) Oh and check out the Portfolio section. It's something I've wanted to get up for ages, and now it's finally done! I especially like having my visual diary up, it's too bulky to bring overseas with me, so I scanned the pages that give me the most inspiration so that I can continue to refer to them. We now have tickets booked too... We're leaving on the 25th April and spending a couple of days in Hong Kong before we get to the UK :-)

But when we get there... who knows! All of our plans for places to stay in London have fallen through, so we might actually do a bit of touring around when we first arrive, and go to London later instead. At least we do already have a bank account setup which will be a huge help. Kinda scary though, all the savings emptied and the many NZD converted into what looks like a pitiful amount of GBP.  The exchange rate is good right now, but it's still almost 3 dollars to a pound...

And the Canon 450D is finally in NZ... very tempting. Do I spend my last bit of NZ savings on it, or wait till we're overseas??

Interaction design goodness

Today I'm at Amy Hoy's workshop on interaction design. They have wifi in the workshops *yay* it's so nice being connected through the day! Before morning tea she covered the basic principles of usability and interface design. Out of the three layers of interface (Expectations, Direct interaction and Behaviour) the only thing that designers can have an impact on is the direct interaction layer. And the whole thing with usability is not a science, but relevant to the audience and people who use the site or application.

Initial principles cover basic layout such as top to bottom and left to right orientation (e.g. typically a logo should be in the top left as that is the most prominent area). This also applies a lot to sidebars - left sidebars get tuned out a lot – and although they do not interrupt reading flow, they also do not command attention (navigation blindness). Right side bars are hard to tune out – which can be good or bad. They interrupt with reading flow, especially if jagged edge on right. Bad to use if centre content is critical, but good for attention.

Without sidebars the content is much more readable. She suggested picking one sidebar layout – they both have different properties so test with your audience. Without sidebars, the content is a lot more readable - and if you need to have columns try to keep it to one sidebar.

Website visitors often just simply satisfice - choose the closest option to what they're looking for. This is really bad for experience, making it very hard to find information or reach your goal. Things need to be obvious and at surface level.

When designing a website (and by that I mean information and structure, not just graphic design) try very hard to make your priorities the same as the visitors.

Visual perception (e.g. Colour, Shape, Size) can be more predicable and easier to measure (based on Western society). Things like the colour red = stop, warning, no, error. In this area, conventions are good and should be used to avoid confusion.

And over and over again she emphasised that all of this is relevant to audience and their experiences. It's not an exact science and theory will not provide all the answers we need. Studies, research and analytics are not a substitute for thinking and testing. Real life is difficult to measure and people are complex. Target your audience, not using generic reports where you don't know the content, or the people, etc. It's not until you get feedback from your visitors that you can start to gauge effectiveness of your design.

Form design – the most dreaded beast. Always ask first: do you really need a form? They are hurdle for users, eliminate them where possible. What can you eliminate? Do you need to ask their country - or can you use the IP address and then check that your assumption is correct? Remove the barriers.

Breaking a form into sections creates a sense of accomplishment. Inline written content is useful, e.g. "I rate this at [option] out of 10".

Error messages are a classic mistake of form design. Often they are poorly written and not helpful. Again, try to remove as many barriers as possible - use red, make them jump out, position them next to where the fault is and ensure they are written well. Even better - eliminate the use of error messages by just dealing with the "incorrect" input. For example if a message in Twitter is too long, they just trim it down and let you know for next time. Gmail has an undo feature for deleted messages.

We want to leave a positive and fun impression on visitors so that they come back, recommend it to friends, etc. However, the way we remember things is not how it really happened – things are rarely as direct as we remember. The beginning and end are the most memorable to people. Negative things are also more memorial than positive things.

She wrapped up the day challenging us to not get locked into method, but instead look at things creatively. This allows for truely new innovations, for example the iPhone was never user tested outside of the Apple team working on it - and yet it is such a successful and wonderful interface. Don't lock out innovation with convention.

Amy Hoy's site with the list of links from her presentation.

I love Meomi!

Screenshot of the Meomi website header Okay Meomi Cloud House has to be like my favourite site ever! Cause not only does it have really cute graphics and awesome desktops for download, but it also has a really nice combination of static and interactive features. A lot of sites are either Flash for HTML - or if they are are HTML they may include Flash elements like galleries or maps. But this site has a really nice blend of the two... it's HTML content and stuff which makes it easy to read, etc. but then it's surrounded by the cutest little bits of Flash ever. Each little scene going up the side of the tree and at the top does it's own little movement and sound when you hover over it.

Flock is so cool

Screenshot of FlockThis is awesome - I can write a blog post right from my browser hee hee Recently at work we were talking about social networking blah blah, so Graeme and I downloaded Flock - which is a web browser based on Firefox, but with all of your social networking stuff right there at your fingertips.

It's quite confusing to start with, but I have logged into my Flickr account and wrote this blog entry right from the browser window (instead of having to visit my site, login, etc. etc.)

Give it a go - especially if you're into Facebook or something!

Blogged with Flock

Sites I love

Some more very cool illustration design sites that I've found and love: hip.young.thing. This website profiles art, design, fashion, etc. and is updated really often. There is such a huge variety of really cool things on there.

Ghostco illustration with skeleton and skin layerghostco I really love this guys illustration - he is very amazing. I find his skeletal work especially interesting, as one of the papers I did at uni was just focussed on skeletons, muscle structure, then skin/outer layer. I love the way he makes each layer see through, so the structure is visible.

Emil Kozak This guy is awesome - he's a designer and artist and he's done artwork for skateboards, etc. etc. I love his stuff :-)

Cool website of websites

Cute gnome on ABC websiteRecently I stumbled across this website which is another website full of cool websites. Normally I'm only checking out gallery sites from Web Standards related groups, but this site profiles many Flash sites and a huge variety which is nice :-) Three of my favourites are: Ragnarok I have no idea what this is, but I would love to know! It looks like anime or a game or both? If anyone can translate I'd be grateful! I love fantastical stuff and I love cute stuff, and this combines both.

ABC Land The Japanese make everything SO cute!! This is apparently a real estate agency. You can make the gnome jump onto the branches of trees and roofs until he reaches the castle in the sky. I love the illustration and stuff! This site takes a while to download.

Farm Fashion designers?? Anyway a very cool site and I love their little cute things around the site :-)

Sneak peek - new website design

Collage and water colour painting to show my new website designMy wool still hasn't turned up for my cardi, I've finished Aaron's birthday scarf, can't do any gardening in this weather, and there are only so many cakes one can bake... so my creativity banks are fully charged with no other outlet than drawing, painting and design. When the weekend comes around I am sick of looking at a computer screen, so I grabbed out the water colours and started painting, cutting and collaging a new design for my website. It was so refreshing designing a website by paper.

Here's a sneak peek. The photo is very poor so it really is a peek instead of a preview ;)

Yay for Safari!

:-D I feel slightly happier with my work computer today because I can now use Safari on it :-D Every day I get so annoyed with Windows and I really miss my little Mac at home, so this is like a slice of home at work! *A true Mac person at heart* Screenshot of Safari running on Windows Vista

Safari for Windows is currently in beta (testing release) version, but the finished version will be ready later this year when Leopard is released. That is also when Aaron and I will be getting ourselves one of those gorgeous little macbooks *yay* :-)

Webstock mini

Last night Webstock had a mini conference, a 5-9pm thing with three speakers and networking drinks between. It was really fun! It was great to catch up with CJ, Natcol people and meet new people like Dale. And the speakers were all really great!

First up was Natasha Hall who talked about some usability examples on Trade Me. She had a huge line-up of their top traders who they had visited to better understand how they use Trade Me and manage their business selling on there. I was really amazed at just how much some people earn on there, the average gross income of her examples was like $700k!

Russell Brown then stepped through his recent trip to California, and ohhhh I wanna live in San Fran now!! LOL I'm so easily impressed, but it was a very exciting talk because it seems that there are just so many possibilities and initiatives there that are made possible by funds that are so much harder to get here in NZ.

And last, but no way near least, was Nat Torkinton who talked about 7 points of Web 2.0. Over the last few months I have been getting throughly sick to death of this buzz-word, especially when it is mis-used by marketers who have no idea what they are talking about. But Nat's talk was really great because he sought to clarify "Web 2.0", with real emphasis on the sharing of data and cross application of it.

It was a thoroughly good night! The next large Webstock conference isn't going to be until 2008, but there will be many smaller events such as this through 2007 - a great idea and I'm going to look forward to each one!! :D

Web Directions Day 2

Andy Clarke's presentation was a great way to kick of WD Day 2 - he talked about Creating Inspired Design, really pushing creativity for all members of a team, even code developers. How can we use design to convey a deeper meaning about the website? And how can we start to think outside the square of web design into the level of creativity that you see in strong Flash designs? These days the tools are no longer a hurdle, our imagination is the limit (although I think he may have been thinking ahead a bit to IE7's release ;) ). One idea I especially liked is the collecting of anything that inspires you creatively - like keeping a scrapbook. It has been a long time since I have done this, and after his presentation I took a little crappy disposable camera and took shots of everything! The highlight of the day was meeting up with Andy over morning tea. We had a quick wee talk about stuff, but I can't believe it - he remembered me from leaving this comment on my blog!! Then after that he editted the connection thingee to say crush and cute lady! Cheeky!

Laurel Papworth's presentation on the business of online communities was great, there were some really good stats there that I shared with the others; such as 9 times more visits that last for 5 times as long when you have a genuine online community on your website.

Jeremy Keith did a presentation of implementing unobtrusive Javascript practices with AJAX (aka HiJAX). I found this really valuable as I have spent so long teaching myself the best practices with CSS and seeing the major advantages that come of seperating presentation and strucutre, I would love us to apply these theories to the Javascript too. I just wish that Damian was there to see this presentation, cause I don't think he believed Kirti and I LOL! ;)

Poor Kelly Goto was loosing her voice by this stage!! However she powered on and gave a brilliant presentation on using the SCRUM practices alongside her Workflow practices. I first saw Kelly a year ago at the Web Essentials conference, and since then we have changed the way we approach our projects entirely. So it was very interesting to hear her developments, and I'm really looking forward to getting some time to look further into the SCRUM stuff. This is where you break your projects into three week blocks and at the end of each block there is a working functional result. She also gave a few more pointers on how to implement this succesfully.

What an awesome conference!! We didn't want to leave...! :( Kirti and I were too late to the after party though :( because we kinda got distracted by the shopping en route *blush* but I bought a really cool top for $10! *blushes more*

Web Directions Day 1

Day one of Web Directions conference was awesome! There was a lot of focus on microformats, accessibility and workflow; but here are my favourite points: Kelly Goto kicked off with a great keynote focussing on understanding your audience and the possibilities of the future (what about one personal avatar and setting across all apps, all hardware you own so you only have to update it once if you want to change).

Jeremy Keith did an awesome intro to AJAX. For a designer like me who is not into programming it was very useful. It was also nice to see that our using AJAX so far in Go Fetch is appropriate - not too much, but enough to make it easier to use (although we still have more to implement). Always ask yourself why an I using this - why is it useful? why does it make a good difference?

The Campaign Monitor guys talked thro what they had found developing their apps. A lot of this was directly tanible to us developing our apps and in particular Go Fetch - a small team building an app on the side for a specific use.

Unfortunately the catering and venue isn't as good as last year IMHO, as the whole thing is quite spread out on the UTS campus. But the reception tonight was good an it was really cool to meet more faces over some good nibbles and drinks!

Now it's time to hit the late night shopping ;)

Webby week

Well lots have been going on in the web space with me lately, some I can talk about, others I can't just yet! Here are two bits of exciting stuff! Mum and Dad's Taupo Holiday House website is now launched! I did the original website as one of my first Natcoll assignments, but now it needed some updates and a bit of a refresh of design, and this is the result: http://taupo.radfordnz.net. It should also help them out with search engines and stuff too. Although at this stage it still needs some IE debugging, which is one of the struggles of developing it in a Mac environment - as much as I LOVE Macs and Firefox, and wish the rest of the world did too, you can't have a website that is broken in IE..!

And the other big news is that in September, Kirti and I are off to the Web Directions conference - yay! SO exciting because Andy Clarke is talking and I've wanted to see him speak for so long now. And I feel real lucky cause I have already been to a web conference this year, but get to go to another one - and I love Sydney so it's a great opportunity to go back there :-)

Webstock - conference Day Two

Webstock in the Town Hall AuditoriumWow what an awesome conference! Russ Weakley delivered a very funny and informative presentation on letting go and allowing the users to control their own experience. He related it back to working with one of the Australian museums which wanted to structure their information by department - but this of course isn't how people will look for the information when using the site. So he was like "Well what if we tagged pages and then people could search for them and related pages by tags". And then bringing this to the next level by allowing users to comment and add tags themselves.

Heather Hesketh talked about Progressive Development - Gradual small changes, rather than large redesigns, and scheduled for say quarterly or monthly. This is really interesting because the general impression I've had from clients is that they want the project to be just finished, and we have been trying to encourage them to treat their site almost like a living thing, it needs attention regularly.

Ben Goodger did a talk on Firefox, the history and also showed a demo of Firefox 2, which looks great. I love one of the new features - if it, or the computer, crashes it reopens with all the tabs that you had open restored. There have been times when I have had 15 tabs open, and lost them all because something crashed and I hadn't got round to reading or bookmarking them yet!

Tony Chor from Microsoft did a good presentation of IE7, which is of course a huge improvement on IE6. I don't think the crowd were really impressed because I'd say most, if not all, Firefox users and IE7 doesn't really have anything that Firefox doesn't already. But I think it's awesome because most internet users only have and only know about IE, so it will be really great for them, and for our jobs!

Then there were drinks and nibbles, following by dinner, followed by Odessa playing and dancing. There were some gorgeous kids there who loved the music and were just dancing by themselves!!

More photos are of course on flickr: http://www.flickr.com/photos/tags/webstock/