Sunday, October 31, 2010

Inspiration: The Ford logo that never was

Here is a great pictoral look at the evolution of the Ford logo.


While digging around I came across my favourite Ford logo of the lot.


This logo went unused by Ford. Apparently it was too radical a switch. A damn shame. This would look great even today.

You can check out Rand’s extensive portfolio over at Paul-Rand.com. Inspiring stuff.

http://j.mp/IcBteB

Saturday, October 30, 2010

Mind maps and my design process

Every designer has a method they use to create. This week for a bit of fun I took part in Illustration Friday. A weekly design exercise with no creative restrictions.

But how do you begin a project which has no creative restrictions? Where do the ideas come from? This is what I want to share. How I get started generating ideas.

Mind Maps

To get the creative juices flowing I use mind maps. Mind maps are a kind of brain-dump of thoughts relating to the project at hand.

Simply put, it is word association. These words can be tightly related or abstract and loose. It really doesn’t matter. The goal is to explore many different directions quickly.

Exploration

Exploring concepts before you begin to design is very important. This helps you uncover ideas which were not obvious at the start. And this is exactly what mind maps are great for.

My “Racing” Mind Map

Lets take a look at the mind map I used for this weeks Illustration Friday topic “Racing”.

I began my mind map by writing the word Racing. I circle it. I then write down any word I can think off that relates to racing. These words can come after some research or simply whatever thought pops in to your mind.

At this point there are no good or bad ideas. In fact the more bad ideas the better.

Notice the highlighting. If I add a word I think has potential I highlight it. This helps me focus on the stronger ideas.

You can see that from “Racing” I jumped to “Cars” which lead to “Formula 1″ which lead to “Grand Prix Motor Racing 20s, 30s”. And this was the concept I choose to base the photo illustration on.

You can see the final result over on Behance.

http://j.mp/IcBteD

Tuesday, October 26, 2010

How I got media queries all wrong

So this website adapts. It’s been on my to-do list for a while and it’s nice to check it off but I got my approach somewhat wrong.


I got some things right. I built it using fluid grids paired with fluid images and when I pushed the site live it was about 90% flexible.

My error was in thinking that once live I’d just bolt–on some media query magic and my website would be suitable for mobile. I was wrong.

When I began the redesign of this site media queries were not on my radar. Ethan Marcotte had not published his article and some well known designers were not pushing this technique. Consequently my initial content gathering considered desktop only and not mobile.

And when the time came to review that very same content before implementing a responsive design it was clear the content was not suited for the mobile world.

The fluff was everywhere

As I reviewed the content on each page the fluff became apparent. Content I added to pad out my website. Do mobile visitors to my website really want to see snapshots of my digital scrapbooking? Do they really want to read my latest mumblings on twitter? I doubt it. And what about those featured panels on the homepage!?

So I have hidden some parts of the website when viewing on smaller resolutions, not ideal and left in my scrapbook for better or worse.

The good parts

What the layout handles well is varying viewport sizes. My website is not mobile ready, it just adapts nicely to different screen sizes.

Summing up

Media queries are simple. The syntax is not hard. The hard part is designing a website which works in varying resolutions and in a number of different contexts. Oh! and looks well of course. That’s the tricky part.

http://j.mp/HnC6s9

Thursday, October 14, 2010

A response to a responsive talk, Fronteers 2010

Last week I attended Fronteers in Amsterdam. A web confernece focused on web design and front-end development. It was an excellent conference, chock-full of CSS3 & HTML5. I left with my head buzzing, excited about working on the web.

The highlight for me was Stephen Hay’s talk on Real World Responsive Web Design. A topic that has really sparked my interest in Web–Layout again.

Some key points from Stephen’s talk:

  1. Don’t think about Desktop first and then mobile.
  2. Think mobile first and progressivly enhance the site to desktop.
  3. Include do not remove.
  4. Work from the content out. Do not think about the visual layer initially.
  5. Think agnostically about the content.
  6. Layout != Design.
  7. Adaptive layout is responsive design.
  8. Embrace uncertainty. Use Fluid Grids. Not several fixed grids.
  9. Fluid grids = Less media queries.

This was also my introduction to Stephen. I found him to be an extremely engaging & smart speaker.

Sidenote: Here are his thoughts on “The Fold” — I love this quote.

“I don’t like to turn the pages of a book, but that’s how it works.”

— Stephen Hay

Spot-on. And a great way (as Stephen pointed out) to explain to clients “There is no fold”.

The videos of the talks from Fronteers are being released daily. If you are interested in layout keep an eye out for this one. In the mean time check out the slides.

http://j.mp/Hj23Iz

Monday, September 13, 2010

Making Ideas Happen

Making Ideas Happen

How do we take the brilliant ideas that we come up with on a daily basis and see them through to completed projects?

That’s exactly what the book Making Ideas Happen by Scott Belsky (the founder of Behance) aims to teach us.

http://j.mp/HqP8Fa