Design Blog

Future of Web Design, day 2

The second day of FOWD NYC somehow managed to trump day one, which was already so fantastic. The morning got off to a great start with Cameron Moll encouraged us to push ourselves into areas where we're not comfortable and to go ahead and make mistakes. He was followed by Whitney Hess who suggested that we look at some Principles of UX to ensure that our designs provide excellent experiences. Dave Shea's talk on the future of CSS was really exciting for me, I secretly geeked out learning that things like nth child can finally be supported, 5 years after I first learnt and tried to use it. He focussed on the lesser known aspects of CSS3 and suggested that it's time to drop a lot of the vendor prefixes. He also introduced some CSS4 stuff, and concepts like the Shadow DOM which will allow us to style browser-rendered items (welcome back coloured scroll bars!) There are some new layout options being developed, but I can't say any of them really grabbed me. He also gave a little warning that using a lot of CSS3 things on the page can significantly slow down the browser rendering, so we do need to still use these with caution even though it's created via CSS. Having lunch with Dave was a real highlight of the day, he is definitely a super talented person.

Looking at the Future of Mobile UX with Steve Fisher was actually not so much about mobile... he encouraged us to think of sites and that it's no longer about the devices themselves that people use to view it. These sites need coherence, but do not need to be the same as each other. We should look at patterns in the medium people are using, and remember the moment that people are using them in by mimicking things that people are used to already using on that medium (for example, allowing the keyboard to slide away on an iPhone as you can in the messaging).

I loved the talk from Randy Hunt, Creative Director for Etsy, especially as we are working on developing the brand at work right now. He emphasised that manufactured brands show and create a lack of trust, so it's ultra important that the brand is a genuine reflection of the values of the company and what is already happening. The control of this is already being given over to the customer or community around the company, and this is going to continue to grow - we can only try to nudge it in a direction and listen to what the community is saying. Smart content, an honest story and a memorable personality holds it together. I managed to talk to Randy after the talk to get some more detail, as obviously Etsy is a great brand that is already leaning towards these things, and he strongly recommended the book The Brand Gap.

The day ended on a high with Joshua Davis. As someone who loves creating with textiles, I really loved his approach to offline work and realising that computers are only a tool, nothing more. Stay human, stay analogue, and we retain a warmth to our work that cannot be obtained otherwise. As designers, let's stay teachable (no complacency!), opinionated (but no ego and not arrogant), and have faith in yourself.

There were 2 streams and I didn't make it to every talk, so for a different take on the conference, check out Sophie's excellent blog post. I met so many great people at FOWD NYC and felt that it was such a great setting for a design conference; it was really worthwhile making the trip for it :)

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.

*I love my new scrapbook!*

My Image Spark scrapbook Being online every day I have a slight issue as a designer. I can't keep a traditional visual diary very easily, unless I print every image or colour scheme I like out; which I don't want to do in order to save paper.

On the Mac at home we use LittleSnapper to keep track of cool images and stuff, but I'm on a PC at work, and also use more than one machine. One day I came across Image Spark and I was very happy! It also has a Firefox plugin so that when you find an image you like, you just right-click and voila - it's now in your Image Spark scrapbook. Now that I've been using it for a while, I'm starting to see trends coming up in my choice of images, my style :-)

My scrapbook »

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.

Beautiful Bank Holidays!

View of London from Hampstead Heath This weekend was a holiday weekend...  as usual our plans fell through due to lack of planning (this time we were intending to go to Wales and stop at the spots where our Grandparents grew up, but there were no rental cars left!)  But I think it worked out for the best, cause it was a wonderful weekend to stay in London - it was beautiful, hot, sunny and empty cause everyone else was away!  We did lots of cycling, eating of ice creams and tripping around - the photo was taken from the hill at Hampstead Heath - I think it's the best view of the city!


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.

*cutest stamps ever*

Cute turtle stampI found these today, I think they are just SO cute! I have a bit of a problem tho when I see things on Etsy, and at markets too - I keep thinking "I could so make that", but then I never get round to it.  One day I'm sure I'll just go ahead and buy the superflous cuteness, but for now I'm going to continue dreaming of making my own and see if I can find some rubber and make a cute stamp for the labels of my hand knitted baby gifts.

Dear hand bag theives...

... please return my hand bag.  Feel free to take all £3 cash that was in it, but please return my wallet which I was rather fond of as I bought it while our friends Jonny & Naomi were here so it reminds me of our outing to the markets that day.  Don't bother trying to use the debit card, I've already blocked it.  Feel free to take the cell phone, but please return the sim card so that I don't miss any calls, there was only about £2 credit on it so you're not missing out on anything there.  Please hand the stuff you don't want (but is still meaningful and useful for me) back into the Ping Pong restaurant.  Thank you in advance!  Rachel.

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!! :-)

Symmetrical Nature

Park at North Greenwich On Saturday we went to the O2 arena to try and see the Red Bull Air Race; but of course we were too late for some tickets.  We did see some action from afar tho, some pretty amazing moves as the planes flew around (the photos don't do it justice!) At the nearby park there are some young trees planted in perfect grids and trained to be perfectly straight.  I find the play off between perfection and nature fascinating, like how perfect and symmetrical leaves are, and yet how nature is so chaotic and although it's symmetrical it's never quite perfect.  Or a very straight tree trunk, but with big knobbly bits on it.

My new Canon 450D

Orchid Thanks to an extremely generous leaving present from my boss in NZ, today I finally bought a digital SLR! I chose the Canon 450D, just with the kit lens at the moment. The orchid was handy and pretty, so here's my first shot! Thank you so much Graeme I'm gonna go nuts with this thing on all of our travels!! :-) I realised that this is actually my first ever camera after 10 years of photography,  up till now I've always had my dad's old film SLR. I wonder what difference the digital camera will make to my photography...

My art history geek out

Today we visited Cambridge Museum... It is a cool building - all Roman like, with the columns and stuff. I knew there was an exhibition on about Chinese flower paintings, so we thought we were going into that, but instead walked straight into a room filled with French Impressionist paintings. I thought I'd died and gone to heaven! Monet, Pissaro, Cezanne, they were all there - for free!!! I was just in a trance; beautiful,  beautiful artwork. We wandered through a huge variety of stuff, antique furniture, sculpture, English china (Mum - you would love that!), medieval artwork (it was nice to see such decadent ikons after visiting Ely Cathedral, so bare and empty). There was a late renaissance gallery of Italian work which I liked, very emotive and passionate. Then there was an English artwork gallery that ironically had French cubism and early modernism in it - more Cezanne, and one of my absolute favourite high cubism pieces - JUST SITTING THERE ON THE WALL IN CAMBRIDGE!!!! So yeah I was blown away.

Then we went downstairs and saw ancient carvings, like 750BC stuff, and then more ancient Egyptian stuff, ancient Greek things, it was amazing. Then there was a gallery of medieval European armour, that was really scary - huge double handed swords taller than I am, and a setup of a knight on a horse, that freaked me out too cause my vivid imagination was thinking he was going to attack me. Very scary.  And that was our adventure and I was very excited for the rest of the day :-)


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.


Craftstock posterIn the webstandards email today they announced a combination of two of my favourite events... Craft 2.0 and Webstock blended becomes CraftStock! It is such a cool idea and normally I would be writing a post that used an excessive amount of exclamation marks to convey my excitement... but this is almost like salt in a wound for me... (so instead there are excessive amounts of ...s to convey my sadness...)

I can't make it to Webstock this year because a close friend of ours is getting married at a farm two hours drive from Kaikoura over the 14th - 17th February, and Aaron is going to be the best man. Andrew is the sorta guy that is so lovely and such good friends to Aaron that he considers him more of a brother than a friend. There is totally no way I can go to both, and family/friends comes first.

But it's still gutting because there are so many awesome speakers - I was especially looking forward to meeting Jason Santa Maria - and it's encouraging and refreshing to go to a conference like this and get that input to your day to day work.

BUT no doubt the wedding will be lovely and will be well worth the sacrifice ;-) After the wedding we're going on a holiday around the top of the South Island, it will be very nice to relax, get some sunshine, and have a break.

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 :-)