On the subject of Design Ideas

Best & Worst of FOWD Day 2

On May 19th, 2010 Rachel wrote on the subject of Design,Design Ideas,Industry News,Inspiration.


FOWD logo
Following on from my post after Day One

The Best

John Hicks giving his talk

John Hicks giving his talk (image from m-king)

My favourite today definitely has to be Aral Balkan‘s session. He really knows how to present and make learning fun! It was very inspiring and encouraging on how to make your designs that little bit better by adding an emotional element to your apps/sites. He got the longest applause I have heard at a conference!

But then the loveliest thing was when he acknowledged my tweet of thanks on twitter and his blog. What an awesome guy!

The Worst

umm…
ermmm….
ahhh…

Nope… I really can’t think of anything for The Worst… did I miss something?

Honestly, the whole thing was amazing. I’m really shattered now, but it’s a good tired because I’m also really excited to start doing so many of the things that were presented.

If you couldn’t make it to FOWD this year, I would definitely recommend buying the video pass. It would be really worth it. I’m looking forward to the videos myself because I wanted to go to both tracks so many times today… shame we can’t clone ourselves when the need arises!

In summary…

(I’ll add links to slideshows and downloads as I get them)

  1. Progressive CSS3 Design (Molly Holzschlag)

    Molly presented the plans and workings of the W3C and asked for any web designers who are keen to be voices to the W3C. What I found most exciting was her mention of IE9′s capabilities – it sounds like my optimism about CSS3 in IE9 may be closer to reality than I first hoped!

  2. What will Web Design Look Like in Two Years? (Simon Collison)

    According to Colly it’s going to evolve quite a bit, growing up and getting comfortable with the medium of being online. For example, no longer will we mimic tables with paper and coffee stains; but instead embrace the pixel, the grid and typography. Of course this does require a more mature understanding of grid systems and design fundamentals, but this will make the professionally designed sites stand out from the sea of online content.
    View Slides & Examples

  3. The Art of Emotional Design: A story of pleasure, joy, and delight. (Aral Balkan)

    As I mentioned above, the whole presentation was a pleasure, joy and delight. Aral showed us examaples of how he has made his apps come to life by adding in little emotional attachments, like his famous bird turning red and singing in Feathers.
    Read Keir Whitaker’s write up on Think Vitamin

  4. How to Build a HTML5 Website – Live Demo (Bruce Lawson)

    Up until today I haven’t dabbled too much into HTML5, but Bruce did a live demo which helped to demystify it all. HTML5 is definitely going to be mainstream, and soon. The capabilities of it are awesome, and it is so easy to still support older systems that don’t understand it. In particular I’m looking forward to the day where we can use the <video> tag without having to provide a Flash alternative for IE.
    http://www.brucelawson.co.uk/
    Another good introduction from Smashing Magazine

  5. Rethink Your Job (and Earn More Money). (Brett Welch)

    Everyone knows Web stuff is becoming increasingly commodised, but where the value remains is in expert knowledge, advice and helping your client’s goals. Brett also emphasised starting small, growing in iterations, and the importance of having a marketing plan in place following the site’s launch. We all really admired him for not actually plugging his product in the talk.

  6. Icon Design (Jon Hicks)

    I don’t do icon design very often, so it was really valuable to hear these tips and guides for when I do need to. It’s also very exciting to hear about future abilities like using SVG for icons.
    http://www.hicksdesign.co.uk/

  7. Blending Usability Testing with Interface Design, Prototyping and Rapid Iteration (Dan Rubin)

    I always want to do more and more usability testing, and Dan’s excellent talk really got me excited about it even more. He talked us through a case study of how they had assessed a current site, found the good things and bad things about it, and came up with some suggested changes. He then detailed their technique for testing the changes and how they were able to accurately test them while keeping it in a format that was easy to change and adapt as they went (basically using image maps with an exported Photoshop comp). Definitely a great technique for getting the most value from a test.

Best & Worst of FOWD London Day 1

On May 18th, 2010 Rachel wrote on the subject of Design,Design Ideas,Industry News,Inspiration.

FOWD logoThe Future of Web Design conference is amazing this year – here’s a quick update after Day One.

The Best

jQuery for Designers session

jQuery for Designers session

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.

The Worst

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)

  1. 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!

  2. 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.

  3. jQuery for Designers: All You Need to Code (Remy Sharp)

    Very inspiring stuff, and I’m now eager to take the plunge into jQuery!
    Download slideshow

    http://jqueryfordesigners.com

  4. 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!

  5. Learning to Love Humans: Emotional Interface Design (Aarron Walter)

    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!

  6. 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!

  7. Smart Tips for Wireframing Brad Haynes

    Wireframes help communication, focus and workflow. This session was a good practical reminder of why we should be using them and looked at which techniques to use where, including some good tools.

Also check out summary of Day 2 »

Inspiration: Typography

On December 10th, 2009 Rachel wrote on the subject of Design,Design Ideas.

A beautiful type print by Douglas Wilson

One of Douglas Wilson's beautiful prints

I’m about half way through The Elements of Typographic Style and thoroughly enjoying it.  I really wish there was a way you could read a book and ride a bicycle so I could get more reading time in while commuting, but I’ll just have to take my time reading it instead!

Some thoughts so far…

“With type as with philosophy, music and food, it is better to have a little of the best than to be swamped with the derivative, the careless, the routine.” (Page 117)

I think this is true of all design.  In a time where you can get free website templates anywhere or make a website yourself so easily, the designs that have a lot of thought, care and expertise behind them really stand out from the crowd.

Shaping the page

Example of a page layout based on the Golden Section

Example of a page layout based on the Golden Section

Although the book focuses on print, the principles found in the chapter Shaping the Page can be applied to web design also.  It is a great reminder to me of design school, especially the theories of the Golden Section and Fibonacci series.  Using ratios based around π are useful for arriving at a design that is easy on the eye and feels comfortable to use.

Visiting Switzerland

Coffee cup in Zürich

Coffee cup in Zürich

What you read opens your eyes to things around you; I have been noticing nicely designed type everywhere! Recently we spent a weekend in Zürich – I love it how clean, thoughtful design surrounds you in that beautiful country.

Illustration in website design

On January 14th, 2009 Rachel wrote on the subject of Datadial Designs,Design,Design Ideas.

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.

3 finished illustrations on the live website
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.

Pencil sketch of the illustration
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.

Tracing the sketch in Illustrator
The sketch is then scanned into the computer and opened in Illustrator.  Here I outline the sketch and start building up some shapes.

Filling the illustration with colour
The shapes are then filled with colours, and tweaked according to what is needed.

Finishing the illustration in Photoshop
Finishing is then applied to the illustration in Photoshop and it is incorporated into the website design for a unique look and feel.

Why Do Print Designers Think They Can Design For The Web?

On October 21st, 2008 Rob wrote on the subject of Design Ideas,Usability.

Please excuse the following rant but I’m increasingly frustrated, bored, let down, despairing, incredulous that there are still “graphic designers” out there who have no concept of how to design for the web, but who insist on designing websites for their clients

It’s fine if they stick to Quark and what they are good at, and all credit to them, but for some reason they think they have carte blanche to roam into areas which are not their concern.

For example, let’s say that you wanted to design a new boat.  Who would you go to first?  Would you go to a designer of aeroplanes?  No, you would seek out people who have experience in boat design, because what you want is a boat,  and you need someone who understands nautical things like waves, water, ballast, the pros and cons of different hull shapes, propellars, and the like.  Would you really want to go to sea in a craft designed by a designer of aeroplanes? I think not.

Do you work for a web design agency?  Does this happen to you that clients get their so called “brand” guardian to do the web design or the guy who did their brochure and aks you to implement it as a web site.

And is it just us or do you receive a complete load of tosh that disobeys practically every law of web accessibility, search engine friendliness, usability, extensibility and future proofing, font usage and image sizing hell?

What planet to these people live on?  Why don’t they put up their hands to their clients and say we can give guidance on the design but we are graphic designers for print and you need a professional web designer who can take into account the requirements of the web.  Because they work in the web every day they will know what is the right way and what is the wrong way to do things.  Do web designers try to do design brochures?

I won’t get started on programmers who think that they are web designers as I’m far too angry.  Just for the record, in case you are a print designer and you are still wondering where you went wrong here are few tips:

  • Decide the width of your design and what happens to the site when viewed on different size monitors
  • Think about usability and consider tried and tested conventions.  No need to think of your own “unique” style of navigation.  There’s a reason for some of the conventions.
  • Think about search engine friendliness.  Not enough space here to explain but be aware that 60-80% of traffic and sales on most e-comms might come from search engines.
  • A little flash can be nice, it can look good. A whole site built solely is flash is pointless – just drop it.  Nobody is interested in seeing your logo sliding in and out.
  • Think what happens in the future.  What happens if more menu items, or product lines are added.
  • Think about who will administer the site and how many image sizes you really need.  It’s a pain creating 4 different size images for each new product, (although yes there are ways round this programmatically).
  • Splash pages – why? What are they there for? Why do you feel the need to make people click an extra time to get to where they are going?
  • Consider the online audience – they do not know your company probably so help them help you by giving as much information about yourself and don’t try to be so cool that they have to be Sherlock Holmes to find out what you do.

Thanks for reading, I feel better now

Enrich your web content with an E-Mag

On July 14th, 2008 Alex wrote on the subject of Design Ideas,Web Technology.

Have you ever seen one of those clever online magazines where you can “turn” or “flick” the pages with your mouse?

Here’s an Example

If you ever fancied getting your web content displayed in one of these flash viewers (you don’t even have to have a magazine, a product catalogue will do for example), ZMAGS provide an affordable way of creating these “online magazines” via the upload of various PDF files that represent the pages of the e-mag.

The service costs £19 for 1 magazine, £79 for 10 and £149 for 25.  More info here.

Many companies have used this service including our client, Pocket London as shown in the example above.  Other clients include, TNT Magazine, IKEA and Volkswagen

For Pocket London, we built a system around the Zmag IFrames that enables the client to “brand” each e-mag separately to their specifications.  The client can change the header, footer or an intro page around the IFrame through a bespoke content management system, therefore providing limitless possibilites of re-branding their online magazine for any number of clients.

Here are a few examples of the finished product:

Example 1

Example 2

Example 3