Tag Archives: web design

Key lessons from Designing for Emotion

I recently read Aarron Walter’s book Designing for Emotion.

Walter is the lead user experience designer for MailChimp where he is the chief responsible for making the online e-mail campaign program’s interfaces more human.

As someone fascinated by the psychology of the things we do, I rushed through this book at an eager pace.

My key lessons from the book include:

  • It is easy in the rush of daily business to build what Walter calls “fast and cheap sites with no reverence for the craft or the relationship we build with our audience.” Take the time to develop a solid strategy before diving into the design just to get a job out the door.
  • Design for humans and the human condition. For example, attention is finite and we are running on low supply. Make it easy for visitors to your website to subconsciously identify patterns and as a result see predictable user behaviour and an ability to retain the information on your site.
  • Give users/visitors freedom and don’t oblige them to fit into a mould. Walter draws upon the example of how Twitter gave users the option to continue using the old interface for as long as it was available. By empowering users of your service to choose for themselves you are automatically changing their tone of their response. This, according to Walter, is companies saying. “You may.. instead of “You must…” You only have to look at the outcries when Facebook makes changes to their interface to see how this works.
  • By employing good design and positive experiences consistently from the start you can build enough of a reputation that when disaster strikes, as it inevitably will, your community will forgive you. Similarly, when disaster strikes be brave and transparent enough to admit to the mistake and ask your community for forgiveness.
  • Know that not every customer, client or viewer of your website is the right fit for your company. It is ‘OK’ to admit this.
  • Make the experience as frictionless as possible. This seems obvious, but as exemplified by this great blog post by Nick Crocker when trying to sign up for The Australian’s paywall service, it is easy to forget that users want the least resistance to the end goal as possible.
Excerpt from Nick Crocker's article "The Australian Shoots Itself In The Foot"

Remember:

We’re not just designing pages. We’re designing human experiences. Like the visionaries of the Arts and Crafts movement, we know that preserving the human touch and showing ourselves in our work isn’t optional: it’s essential” - Aarron Walter

 

You can purchase the book from A Book Apart here as an e-book or hard copy.

Yours in psychology,

Justine.

 

7 sites every designer and developer must bookmark

Designers and Developers across the world need to keep up with the latest technology and trends or get left behind. It’s just how the industry works. The great thing about both of these professions is that everything we could possibly want to know is readily available, right now, for free.

I won’t hold any more of you eager learners back by raving about why you should check the following sites out, and just cut to the chase, below are a few sites you might not have heard of that are definitely worth the bookmark or RSS subscription.

1. OnTwik

An excellent resource for designers and developers dedicated to showcasing lectures, conferences and other video resources.

2. DesignIsKinky

An Australian art and Design resource that is great for inspiration and finding out what’s on locally.

3. SitePoint

An incredidbly valuable resource targeted at pretty much everyone in the Communication Design industry, great podcasts, great articles and just generally useful references. They even write their own textbooks!

4. Fonts In Use

Fonts in Use is a fantastic typography resource, great for keeping up with trends in type and full of awesome tips and tricks.!

5. YouTheDesigner

This is a cool blog full of interesting and useful print, web and photography tid bits.

6. Bittbox

A great place to find both paid and free resources including fonts, designs, tutorials and showcases of user’s work.

7. Design Float

A DIGG-like website for graphic and web designers that has a nice broad selection of topics presented in a very to the point fashion.

Yours in design and technology,

Lee

Designing for iPhone 4’s Retina Display

Hmmm, ok so the new iPhone 4 is pretty amazing with some really amazing enhancements on the previous model such as the new high resolution retina display which now doubles the resolution to 640×960 pixels.

The screen resolution on Apple operating systems (OS) has always been superior to other OS’ especially in internet browsers (if you use a PC and haven’t seen the difference go to the Apple store and see for yourself!). The difference between the great quality of the screen of iPhone 3GS to amazing quality of the new iPhone 4 is just astounding! Think of crystal clear and then think clearer than that!!! This new level of resolution in the retina display is great for iphone users, especially for reading small type in emails and websites…

BUT… it does cause some headaches for iPhone developers. Why? The main problem is that now with double the resolution this effectively, in pixel terms, doubles the amount of pixels required to fill the screen. One redemption from Apple is that the sizes are now referred to as ‘points’ instead of ‘pixels’. On older iPhones a point=1px, on the iPhone 4 a point=2px; so as long as all measurements are points, you should be right!

What about images and type, you ask! The Apple iOS automatically pixel-doubles the image to display at the correct size. Text also will display at the correct size as type is not a pixel based glyph. However, to take advantage of the crystal clear retina display you wouldn’t want to just double the pixels by scaling the image up, which is where the work around comes in to basically have two sets of images for the two different generations of iPhones. Creating two sets of images with different resolutions can be problematic in the design stage, and this is where I see a shift about to happen in web/mobile web design to take on a more vector like appearance as we have to start accommodating som many different sizes that need scaling up and down from the same artwork. The only form of artwork that is capable of not degenerating from such scaling is the vector format, effectively Adobe Illustrator (not Flash though!!!).

Yours in pixel-pushing

Paul.