designblo.gs

LoveFilm’s Cancellation Dark Pattern (Amazon UK’s answer to Netflix)

Zach Inglis — Sat, 03 Dec 2011 09:03:18 -0800

Dark-Patterns appear all the time on websites but this is one of the worst I’ve seen in a while. I’ve heard of people having problems with this before. I went to cancel my account on the Lovefilm website. I recently … Continue reading →

Zach Inglis — Thu, 17 Nov 2011 08:10:08 -0800

After some further banter on Twitter about why fixed-bid projects are better than hourly. I decided to put my points down here. The post says: If you respond to the question with your hourly rate, they may start immediately comparing you … Continue reading →

Politically Incorrect: Spec Work

Zach Inglis — Wed, 09 Nov 2011 02:58:38 -0800

Web designers love a good bandwagon. The latest Anti-Spec movement is strong and people are in a frenzy while taking no prisoners. A lot of people are seeing this as a black and white matter. I see spec work as a completely … Continue reading →

My First Month @ Mark Boulton Design

Zach Inglis — Thu, 06 Oct 2011 08:56:45 -0700

It’s been one helluva month. Lots of life changes have happened and my whole life has been turned upside down. All in a good way, I assure you. The furthest thing from my mind was working for a design studio … Continue reading →

I’ve Got Myself Employed, the Future of London Made & This Blog!

Zach Inglis — Fri, 02 Sep 2011 05:17:10 -0700

As of a few months ago I was in the planning stage of how to expand London Made. Over the years we have been getting far more work than we could take on and I felt it was time to … Continue reading →

Why The UK Startup Scene Is Doomed

Zach Inglis — Thu, 01 Sep 2011 08:20:42 -0700

Background A year ago I was talking a lot about my startup, the processes and the issues I encountered so others may learn. However, you may have noticed that my talk then went dead. I was entangled in the web … Continue reading →

An alternative to employee options/equity grants

Mark Boulton — Mon, 15 Aug 2011 13:13:29 -0700

Very interesting, simple solution to equity/share options which is similar to an annual profit share scheme. Except this example is when the company is sold or IPOs. A very elegant solution. Continue reading →

Rethinking CSS Grids

Mark Boulton — Mon, 08 Aug 2011 05:15:10 -0700

Off the back of this article in Net Magazine last week, and the subsequent few tweets popping up in my stream, I’ve finally managed (in no small part from the help of Nathan and Alex) to pull together some of … Continue reading →

On Weddings and Websites

Avalonstar — Sun, 07 Aug 2011 17:44:04 -0700

This is the story of a guy and a website. But this isn’t just any website. It’s Ren.ai, his wedding’s website. In the first of hopefully a couple of posts about his journey as a wedding designer, he’ll take you through the journey of building out one of his best, but hardest projects.

Rolling Your Own Honeyfund

Avalonstar — Sun, 07 Aug 2011 17:43:58 -0700

This is the story of a guy and a wedding. In particular, this is about honeyfunds or honeymoon registries that allow your guests to buy you experiences in China rather than some china. After finding out that the existing options available weren’t fitting the bill, he set out to build his own for his wedding website.

On Weddings and Websites

Avalonstar — Sun, 07 Aug 2011 16:40:32 -0700

IE8 bug with max-width and overflow

Jon Snook — Wed, 03 Aug 2011 17:52:25 -0700

Just a quick documentation of this interesting bug. This only happens in Internet Explorer 8 (but not 7 or 9), which was interesting. If you have an element with long text but it has white-space:nowrap to prevent text wrapping with a max-width and overflow:hidden to clip the overflowed text, then a floated container (which should collapse to the width of the content) will collapse to the width of the text as if it was not set to be clipped. The use of text-overflow:ellipsis has no effect on this.

Here is the text case:

<style>
        #a { float:left; border:1px solid blue; }
        #b { overflow:hidden; max-width:50px; border:1px solid green; white-space:nowrap; }
    </style>
<div id="a">
        <div id="b">here's a really long string</div>
    </div>

As the screenshot from IE8 shows, the floated container doesn't collapse like it should.

Solution?

In this particular case, I was able to add a max-width to the container so that it only expanded as far as the content contained within would expand.

IE8 bug with max-width and overflow

Jon Snook — Wed, 03 Aug 2011 17:52:25 -0700

Here is the text case:

<style>
        #a { float:left; border:1px solid blue; }
        #b { overflow:hidden; max-width:50px; border:1px solid green; white-space:nowrap; }
    </style>
<div id="a">
        <div id="b">here's a really long string</div>
    </div>

As the screenshot from IE8 shows, the floated container doesn't collapse like it should.

Solution?

In this particular case, I was able to add a max-width to the container so that it only expanded as far as the content contained within would expand.

IE8 bug with max-width and overflow

Jon Snook — Wed, 03 Aug 2011 17:52:25 -0700

Here is the text case:

<style>
        #a { float:left; border:1px solid blue; }
        #b { overflow:hidden; max-width:50px; border:1px solid green; white-space:nowrap; }
    </style>
<div id="a">
        <div id="b">here's a really long string</div>
    </div>

As the screenshot from IE8 shows, the floated container doesn't collapse like it should.

Solution?

In this particular case, I was able to add a max-width to the container so that it only expanded as far as the content contained within would expand.

Visual Design is not a thing

Mark Boulton — Tue, 02 Aug 2011 09:30:50 -0700

Recently, in our industry, I’ve noticed a disturbing increase of the term ‘Visual Design’. It’s often used to describe a job title, or a step in a UX design process; ‘we’ve done the strategy, the product definition, the prototyping… now, … Continue reading →

CERN

Mark Boulton — Tue, 02 Aug 2011 04:30:10 -0700

As of a couple of weeks ago, Mark Boulton Design — together with Content Strategist, Relly Annett-Baker of Supernice Studios — have been tasked with redesigning CERN’s public-facing website, and the organisation’s intranet. Most importantly, we’re helping CERN tell the … Continue reading →

Tame Your Wild Inbox With A Few Easy Steps

Zach Inglis — Mon, 01 Aug 2011 06:05:41 -0700

The secret to my latest productivity spurt has not been increased amount of caffeine but because of a new pledge to myself to tame my inbox. I thought it would be a lot harder than it was but there was … Continue reading →

A Modest Proposal for CSS3 Animations

Jon Snook — Fri, 29 Jul 2011 10:12:10 -0700

I've been thinking quite a bit about CSS architecture these days.

One thing in particular that has crossed my mind is how to handle certain situations. For example, we want to hide content on the page and then reveal it (or vice versa). In JavaScript, this is relatively straightforward: get an element, and apply a class or remove a class to change the state of the element. The CSS for that might look something like this:

div { display:block; }
div.hidden { display:none; }

In this case, I've used display:none to hide the content visually and from screenreaders, too.

Adding a visual effect

Now, if I want to add a visual effect, I might use JavaScript to alter a style property from value A to value B (eg. style.opacity) The script would run through the animation and apply the hidden class at the end of the animation.

What if we wanted to offset the visual effects over to CSS3 Animations?

@keyframes fade-out {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

div { display:block; }
div.hidden { display:none; animation: fade-out .5s 1; }

Nice and easy! Or is it? For those that have actually tried this code might be surprised to discover that this doesn't work. It's because once the hidden class is applied to an element, it's immediately hidden with display: none;.

The next thing you might think to do is apply display:block in the keyframes like so:

@keyframes fade-out {
    0% { display:block; opacity: 1; }
    100% { display:none; opacity: 0; }
}

The problem with this is that non-transitionable properties like display are ignored and have no effect.

A Proposition

I propose that the CSS3 Animation specification be changed to allow for this. Keyframes should act like classes being applied to an element. Therefore, the example above is display:block at 0% and becomes display:none at 100%. As a result, the page works as expected for this scenario.

Transitioning properties

I woke up this morning thinking about this further—and I'll readily admit that this next idea complicates things a little bit. I additionally propose that an animation-transition-property property be added. This specifies which of the keyframe properties should actually transition.

@keyframes fade-out {
    0% { opacity: 1; }
    100% { opacity: 0; position: absolute; left: -999px; }
}

div.hidden {
    animation: fade-out .5s 1;
    animation-transition-property: opacity;
}

By setting the animation-transition-property, only the opacity will transition. At the end of the transition, the element is then placed offscreen using position and left properties. The default setting for animation-transition-property would be all which would allow keyframes to behave exactly as they do today. There would also be a value of none that would allow for no property to transition. This would allow for stepped animations to be created.

Reversing animations

My last proposal for CSS3 animations is the ability to reverse an animation. Right now, the spec has an alternate property that allows every odd iteration to animate in reverse but that's not quite what we want. Again, allow me to demonstrate with an example:

@keyframes fade {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

div {
    animation: fade .5s 1;
}

div.hidden {
    animation-direction: reverse;
}

In this example, I have a fade animation applied to the div. By default, it'll fade to 100%. When the hidden class is applied, the direction of the animation is changed and the fade goes from 100% to 0%. This allows animations to be quickly and easily re-used.

Standards Process

Writing a specification is hard and I don't envy those that have to work through these things. It's a balance between making something powerful and making something complicated. I hope that my ideas fall more in the former category than the latter.

A Modest Proposal for CSS3 Animations

Jon Snook — Fri, 29 Jul 2011 10:12:10 -0700

I've been thinking quite a bit about CSS architecture these days.

div { display:block; }
div.hidden { display:none; }

In this case, I've used display:none to hide the content visually and from screenreaders, too.

Adding a visual effect

What if we wanted to offset the visual effects over to CSS3 Animations?

@keyframes fade-out {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

div { display:block; }
div.hidden { display:none; animation: fade-out .5s 1; }

The next thing you might think to do is apply display:block in the keyframes like so:

@keyframes fade-out {
    0% { display:block; opacity: 1; }
    100% { display:none; opacity: 0; }
}

The problem with this is that non-transitionable properties like display are ignored and have no effect.

A Proposition

Transitioning properties

@keyframes fade-out {
    0% { opacity: 1; }
    100% { opacity: 0; position: absolute; left: -999px; }
}

div.hidden {
    animation: fade-out .5s 1;
    animation-transition-property: opacity;
}

Reversing animations

@keyframes fade {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

div {
    animation: fade .5s 1;
}

div.hidden {
    animation-direction: reverse;
}

Standards Process

A Modest Proposal for CSS3 Animations

Jon Snook — Fri, 29 Jul 2011 10:12:10 -0700

I've been thinking quite a bit about CSS architecture these days.

div { display:block; }
div.hidden { display:none; }

In this case, I've used display:none to hide the content visually and from screenreaders, too.

Adding a visual effect

What if we wanted to offset the visual effects over to CSS3 Animations?

@keyframes fade-out {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

div { display:block; }
div.hidden { display:none; animation: fade-out .5s 1; }

The next thing you might think to do is apply display:block in the keyframes like so:

@keyframes fade-out {
    0% { display:block; opacity: 1; }
    100% { display:none; opacity: 0; }
}

The problem with this is that non-transitionable properties like display are ignored and have no effect.

A Proposition

Transitioning properties

@keyframes fade-out {
    0% { opacity: 1; }
    100% { opacity: 0; position: absolute; left: -999px; }
}

div.hidden {
    animation: fade-out .5s 1;
    animation-transition-property: opacity;
}

Reversing animations

@keyframes fade {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

div {
    animation: fade .5s 1;
}

div.hidden {
    animation-direction: reverse;
}

Standards Process

A Modest Proposal for CSS3 Animations

Jon Snook — Fri, 29 Jul 2011 10:12:10 -0700

I've been thinking quite a bit about CSS architecture these days.

div { display:block; }
div.hidden { display:none; }

In this case, I've used display:none to hide the content visually and from screenreaders, too.

Adding a visual effect

What if we wanted to offset the visual effects over to CSS3 Animations?

@keyframes fade-out {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

div { display:block; }
div.hidden { display:none; animation: fade-out .5s 1; }

The next thing you might think to do is apply display:block in the keyframes like so:

@keyframes fade-out {
    0% { display:block; opacity: 1; }
    100% { display:none; opacity: 0; }
}

The problem with this is that non-transitionable properties like display are ignored and have no effect.

A Proposition

Transitioning properties

@keyframes fade-out {
    0% { opacity: 1; }
    100% { opacity: 0; position: absolute; left: -999px; }
}

div.hidden {
    animation: fade-out .5s 1;
    animation-transition-property: opacity;
}

Reversing animations

@keyframes fade {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

div {
    animation: fade .5s 1;
}

div.hidden {
    animation-direction: reverse;
}

Standards Process

What My Week Has Entailed – July 29th 2011

Zach Inglis — Fri, 29 Jul 2011 05:38:17 -0700

This has been an extremely busy week for me. I’ve almost finished a client, I’ve launched 2 toy projects, made my efforts of another public on Github, I’ve posted 4 new dribbles of which 2 are websites I’ve launched. And … Continue reading →

On Weddings and Websites

Avalonstar — Thu, 28 Jul 2011 20:26:35 -0700

The Web Designer’s Idea Book Volume 2 review

Veerle — Wed, 27 Jul 2011 23:31:00 -0700

There is this book I've been reading a while ago called 'The Web Designer's Idea Book Volume 2' that I want to talk about in today's post. As the title says, it's the 2nd edition. I didn't read the 1st edition though, so I can't really compare, but I did enjoy this edition. Secondly, I should also mention that this book has been published a while ago, months ago actually. I've been reading it on and off… mostly at the hairdresser (Yes, I know!). Not that this means this book didn't trigger my interest enough. Not at all…just lack of time.

The main focus and structure

This book is full of practical advice and guidance on what the design possibilities are to create a website, and ideas on how you can create an eye-catching design with the limitations of the web in mind. Every chapter contains a lot of screenshots that the author has carefully picked out. He gives a short analyses of these sites in relation to the chapter's topic, ending with a practical note from a developer. This book is a bit of a lightweight compared to the books I usually read on the topic of web design. Most books involve practical code techniques, with some hand-on examples and sometimes demo files. This one however is totally different, and is more of an introduction or a source of inspiration for the web/UX designer, or for people who want to get a better insight on web design in general. Here is a short overview of each of the chapters of the book:

Inspiration

Starting with the topic of inspiration, guest author Marko Prljic shows us how you can create a fresh new design from other inspiring designs.

Basic principles of design

In chapter 2 Patrick takes us through the different basic design principles. Going from emphasis, contrast and balance to alignment, repetition and flow. Showing us practical examples of each of them. Keeping these basic principles in mind, chances are we create a design that feels well executed.

Sites by type

Chapter 3 is about the different types of sites, and what the different criteria are to keep in mind when designing such sites. Through this chapter Marko analyzes the common factors of each one of them. iPhone application sites are very focussed and usually very well designed. They are like mini e-commerce sites. A site of a freelance designer needs to shine in its uniqueness and needs to show professionalism, trust and reliability. A common denominator on music band websites is the important role of social media and the need for visual style or language, as branding is very important for these kind of sites. As for blog sites, it's important to grab the user's attention to start reading a post. Using related images is one way of doing this. Furthermore, subscribing (to RSS), commenting and sharing are most important aspects in the design. Personal sites are more focussed on the personal side of life together with some social media aspects. However, they can include a touch of business by showing some portfolio pieces. Design firm sites are very challenging as the possibilities are without limits and finding the right balance between good functionality and an appealing presentation can be hard. Event sites usually follow a thematic design, following the topic of the event, and are heavy on the graphics.

And so the list of type sites goes on. We get to read about travel and tourism sites, e-commerce, business card, web utility, web software, real estate, portfolios, coming soon, t-shirt and directory sites.

Each type design has notes from the developer including practical tips, although there was one occasion (chapter 4, Lighting) where I find the tip not being up-to-date with today's techniques, as there is CSS3 and I also don't think we need to consider any PNG hacking.

Sites by design elements

In chapter 4 we get to read about 'sites by design elements', starting with 'the pitch' which is a valuable tool that can be used for rapidly communicating the purpose of the site, the business or service. The clarity of the message and the design is vital. One of the topics is about the importance of icons and their quick communicating power. Then another very important design element is the typography, which if well executed can elevate a site to another level. Though, the note from the developer runs a bit behind on what's typographically possible today and doesn't mention services like Typekit or Fontdeck.

Sites by style and themes

After explaining the subtle differences between design 'style' and design 'theme' you get an introduction to a wide range going from ultra clean and minimal to illustrated, type-focussed, collage style and others styles and themes. You get to learn why certain styles or themes work and are better received than others, and how they are best applied.

Sites by structural styles

In this chapter the author confronts us with the two sides: one side is driven to break the rules of convention and still find a workable solution, and the other one dictates that doing anything that falls outside these conventions is "atypical" and creates wrong or poor usability. What's so good about this topic is that it forces us to reconsider things. People who know me a little bit will know that I'm all for sparking the creativity by reconsidering these conventions, and to bend the rules a bit. Topics covered in this chapter are, atypical navigation, atypical layouts, pseudo-flash, horizontal scrolling and one-page sites.

Sites by structural elements

Here the design approach is broken down by its function. Different design elements are being discussed in this chapter, going from tabs, to buttons, form elements, footers, 404 pages etc. One of the topics in this section is 'helpful homepages' which is a topic that can fill a book on its own. You only get to see a small set of successful examples within a sea of endless possibilities. It comes down to focus on the consumers and what they want most out of your site. Trying to create a design so that the user can find the content faster.

Conclusion

It's this type of book that you can read whenever you want, and where it doesn't really matter if you take your time as the subject and the writing style is really light. It reads pretty easy, and gives a good analysis on how the content of a web site should look, be organized and structured. The book is also an overall good design inspiration, where the author guides you through all these example sites pointing out the one thing that sets it apart. Even though the notes from the developer are practical and meaningful, I do feel that a lot of them are running behind on what is possible today, which is probably due to the timing on when the book was written. They are also often rather basic for the more experienced web designer. Still, I think they make a valuable part of the book, and so they are definitely a nice extra. Same goes for the examples given, as a lot of the sites have already changed their design by now. Even though, the focus of the book leans towards showcasing and analyzing the design of the given example sites, I think it certainly has its value for people who want to get a better insight of the design of a website. Wouldn't be a bad book for clients too that want to understand us web designers and the decisions we make.

Where to buy

You can buy the book in my Amazon store. You can also read other people's reviews on this page. There is also a $6.99 iPad app available on iTunes that combines The Web Designer's Idea Book Volume 1 and 2. More on the The Web Designer's Idea App.

Introducing Lorem-Ipsum.me

Zach Inglis — Tue, 26 Jul 2011 08:08:10 -0700

Yes! Introducing a second toy project. I’m having quite a productive day off. I built this little Lorem Ipsum generator as my current method took too long. I want to go to a URL, press a button and have Lorem … Continue reading →

Introducing iOS Viewers – View your current tab in Safari on the iPhone or the iPad.

Zach Inglis — Tue, 26 Jul 2011 03:07:30 -0700

Having been frustrated with checking my iPhone and iPad for any new site I create many times in the past, I set out trying to think of an easier way to do it. With serendipity this morning just as I … Continue reading →

Viva la Content

Zach Inglis — Sat, 23 Jul 2011 00:25:43 -0700

For the last few weeks I’ve realised more and more how I need to start blogging again. It’s a common thought with me. A few days ago I realised how over run my blog had become with widgets, links, or other … Continue reading →

Wanted: Web Designer

Mark Boulton — Fri, 22 Jul 2011 06:09:04 -0700

It’s funny to think that 5 years ago, I left the BBC to pursue a freelance career and have, quite literally, spent every day since scared to death. Today, Mark Boulton Design is going from strength to strength. Thankfully. We’ve … Continue reading →

Google Plus, Steam, Rdio

Komodo Media — Wed, 13 Jul 2011 06:02:32 -0700

I’ve added 3 new icons to my ever-growing set of social network icons, bringing the numbers to over 140 icons! Here are the new additions: View on light background • View on dark background Google Plus Rdio Steam Download? Ok, head on over to the downloads area to click on your download link to get the updated icon pack [...]

Delvaux Airess Illustrations

Veerle — Thu, 07 Jul 2011 09:59:00 -0700

This week's item is partly about Belgium and Illustration. The Belgian connection is the world's oldest fine leather luxury goods company Delvaux. The illustration part brings us to London. How these two got together you'll discover in what follows after the jump.

Delvaux Airess

First a little bit of history. Delvaux was founded in Brussels by Charles Delvaux in 1829, a year before the birth of Belgium. As you could read in the intro they specialize in leather goods. That's where Delvaux Airess comes in. To meet the needs of the first air travelers in the 60's Delvaux created a range of lightweight suitcases: the Avia Airess. In the past 40 years these travel products disappeared from the collection however until now. To put new life into this classic, Delvaux recently launched a new line of Airess traveling bags, under guidance of Veronique Branquinho. You're probably wondering what has that to do with this blog or is Veerle going all girly on us…hold on, I'm working my way towards it :)

Sarah McMenemy

To give this launch something special Delvaux commissioned London based illustrator Sarah McMenemy with the task of creating a collection of Illustrations that fit the theme of traveling to accompany the print advertising campaign. Sarah has come up with a series of beautiful illustrations that take my breath away. They are so simple that they are brilliantly executed.

A bit background on Sarah McMenemy

Sarah grew up in London. During her teenage years she was asked by a family friend to draw their house as a memento as they were moving away. By word of mouth she was soon receiving similar commissions and ended up drawing many of the fine houses in North London.

She studied at Chelsea school of Art and Brighton University where she graduated with a degree in Illustration. On leaving art school she started working for many of the architectural, beauty, home and financial magazines based in London. A notable job came from London Underground to create a permanent installation of eighteen full height panels lining the platforms at Shadwell Station on The East London Line. In recent years Sarah has also been working on Children’s Books.

Delvaux Airess collection

The collection consists of an upright suitcase, luggage (with wheels), business bags, a backpack, a shoulder bag, laptop bags and a beauty case, in three color combinations: black canvas with dark brown leather, dark brown canvas with cognac colored leather and gray jacquard with black leather.

Photoshop vintage effect

Veerle — Thu, 23 Jun 2011 04:46:00 -0700

Letting photos shine by adding some subtle effects is something you learn to do by trial and error. Some photos will work perfect for certain effects and others won't, but it's something we creatives love to experiment with. One of the more popular effects is creating some kind of a vintage color effect. You create a certain atmosphere and it can give more depth when you add these kind of effects the right way. As always, finding the right balance in how much effect you add is crucial.

A set of Adjustment Layers

Wouldn't it be great if you can start from a certain set of effects for each photo you like to give a vintage look? Once they are in place, all you need to do is a little bit of fine-tuning. Today's post is all about the creation of some Adjustment Layers in Photoshop that you can add to your photos to get you all set. The photo below is an example of what I mean.

Hover the photo to see the original

Choose your image carefully

You need to be aware that some pictures are suitable for this effect and a lot of them aren't. The effects explained here are just an example, and only serve as a starting point. It's a good to experiment a lot and find out if the result is to your satisfaction. Sometimes you can even discover a cool effect by accident. How it looks for you also boils down to personal preference. I've taken a few different pictures as examples. Each of them use a set of Layer Adjustments piled on top of each other, all with subtle differences. You can view the original photo of each of them by hovering the mouse over it.

Hover the photo to see the original

Hue/Saturation preset Old Style and Red Boost

Saturation to -40 and Contrast to 54

Adjust Levels

First place the image in a separate layer. If the photo looks a bit on the dark side you can make it a bit lighter using Levels. In the Layers palette click the Adjustment Layers menu icon and select Levels. Move the Highlight Input Level a bit to the left to make the photo a bit lighter.

Add Contrast and Saturation

In the Layers palette click the Adjustment Layers menu icon and select Brightness/Contrast. Set the Contrast to +20. Click the Adjustment Layers menu icon again and select Hue/Saturation. Set the Saturation to +20.

Adjust Curves

Add another Adjustment Layer. This time choose Curves.... Select the Red channel and make sure the edit points icon is selected. Change the curve line a bit as shown in the image below.

Select Green from the Channel dropdown menu and adjust the curve as shown in the image below.

Now select Blue from the Channel dropdown menu and adjust the curve as shown in the image below.

Apply Lens Correction and Vignette effect

Select the layer with your photo, go to the Filter menu and select Convert for Smart Filters. Doing this means you can apply filters to the photo while leaving your original in tact. It's a non-destructive way of applying filter effects, as you'll be able to adjust the filters you've applied at any time. First you'll get a message saying the layer will be converted into a Smart Object. Click OK.

Now go to the Filter menu, and select Distort > Lens Correction and select the Custom tab. In the Vignette option set the Amount to -75 and the Midpoint to +75. Hit the OK button. You'll see the Smart Filter appear below the layer. Double clicking this will open the Lens Correction filter options again where you can adjust anything you want. Double clicking the slider icon on the right will give you the option to adjust the Layer Mode and the Transparency of the effect on the layer. Set the value to 70%.

Add some Old Style

Your photo should look pretty dramatic right now with a lot of contrast. Now we'll tone it all down again, but of course with a special effect to make it look like an old photo. In the Layers palette click the Adjustment Layers menu icon again and select Hue/Saturation. From the presets dropdown menu select Old Style (which sets the Saturation to -40 and the Lightness to +5). Change the opacity of this adjustment layer to 50%.

Add Red Boost

Depending on the result you're after, you could add another Hue/Saturation Adjustment Layer on top of this and choose the preset option Red Boost (which sets the Hue to -5 and the Saturation to +20). This effect adds a bit of a pinkish touch to the photo. The last 2 effects are both presets, but you can of course play with the sliders and see what happens. Plus you can also adjust the opacity of the layer a bit to reduce the effect.

Use the Layer Masks

Also very important is to use the masks in each of the Adjustment Layers where needed. Sometimes an effect can make certain elements less nice (overblown) or even disappear. For example in the photo with the wheat (the last photo on this page), the top of the wheat was disappearing if I applied certain effects, but on the other part of the photo things looked quite to my liking. So I fixed this by revealing the top of the wheat: I selected the mask in the layer palette first, and then I painted over the tops using a very soft transparent brush.

Try out different variations on different photos

As you can see the options are really endless and the amounts applied in each of these effects really depends on the photo. The examples you see on this page all have different settings applied. This set of effects mentioned in this tutorial will help you set a basis to get started, but needs different fine-tuning for each photo. What I do is move all the effects in 1 layer group. Then when I want to apply it to a photo I drag this layer group into my photoshop document and tweak the settings, throw some effects out, add new in, adjust the opacity of the layer etc.

The Levels have been tweaked a lot.

Very visible lens correction effect.

Make sure you experiment with the settings of each Adjustment Layer and Smart Filter. Like I mentioned earlier the outcome differs a lot on the photo you choose and the settings you apply. Also keep in mind that a lot of photos may not be suitable at all for this kind of effect. Make sure to choose them carefully. Hope you enjoyed this tutorial and learned a few things again :)

Using the Layer Masks to reveal most of the sky.

Using the Layers Masks to remove some effects on the wheat stems.

The difference between a Trend and a Shift

Mark Boulton — Mon, 20 Jun 2011 07:23:50 -0700

Back in 2003, when I first got wind of Web Standards, I was working at the BBC in Cardiff. I read Jeffrey’s book and followed the excited writings of Doug, Dan and Dave. The web was electric with promise of … Continue reading →

How Much Design Is Too Much Design?

Mark Boulton — Mon, 13 Jun 2011 13:13:06 -0700

Khoi echoes some of my own thoughts about the value of design in digital products: is it pixel-perfection, or 'good enough' iteration. Continue reading →

Saying No

Mark Boulton — Fri, 10 Jun 2011 03:22:16 -0700

Over on the Five Simple Steps blog, Alex Morris (our User Experience Design Director at Mark Boulton Design) has posted a piece on why we don’t give away free multi-format books, and why producing good quality eBooks takes time. Deep … Continue reading →

Hardboiled Web Design Review

Veerle — Fri, 10 Jun 2011 01:58:00 -0700

Hardboiled Web Design, by Andy Clarke is a fabulous book aimed to web designers who want to learn about the creative opportunities offered by CSS3, and who want to use it today. You don't need to know everything about CSS, but you need to be familiar with writing well-structured, meaningful HTML or XHTML markup and using CSS to implement your designs. While learning about the latest technologies on how to make your website and applications more creative, flexible and adaptive, this book also offers a fresh perspective on how to handle older, less capable browsers.

Hardboiled?

What's 'hardboiled' web design? It's a challenge. It's about never compromising on creating the best work we can for the web. As Andy says himself:

It's about never being afraid to push boundaries, break rules, or invent new ones. Hardboiled is stripping our markup to the bone to make it more adaptable.

Hardboiled Web Design, by Andy Clarke

Hardboiled is not hesitating to make the most of new technologies.

It's taking it further than using CSS3 properties as a visual reward for people who use modern browsers. It's not good enough to start at the bottom, with the lowest common denominator design for less capable browsers, as there is only so far we can reach. The 'Hardboiled' approach is turning the progressive enhancement approach as applied to visual design on its head. It's working from the top down, designing for the best browsers first. Hardboiled web design also redefines graceful degradation for the challenges we face today. It pushes graceful degradation further and demands that we use our creative talents to design experiences that are responsive and tailored to a browsers's capabilities.

Aimed to forward thinking web designers

This explains the essence and mission of the book, and the techniques you'll learn. The book is definitely not aimed to pencil pushers, but to the brave creatives who want to expand their creative options, and who aren't afraid to evolve instead of making compromises. It's about focussing on what we can do, and not on what we can't do (yet).

So if you agree with the misconception that websites should look the same in every browser, and that it's not safe to adopt new technologies until every browser supports them, than this book will definitely not be for you. As the man says himself "Living in the past is not an option".

Introducing CSS3

Andy starts by explaining the way standards develop, and how CSS3 is broken into modules which enables the browser makers to implement CSS3 features gradually using vendor-specific prefixes. He digs further into the matter explaining the why's, how's, and the differences.

The hardboiled approach

Next, Andy talks about why a webpage doesn't have to look and be experienced the same in every browser, and also that browsers don't limit our creativity. He shows options on how to cope with older browsers. He demonstrates this in a very practical way with a real client conversation.

A cool tool called Modernizr

One of the tools Andy talks about in his book is Modernizr, an open source JavaScript library that enables us to serve appropriate and responsive designs that are tailored to the capabilities of a browser. Instead of enabling CSS3 properties in less capable browsers, Modernizr uses feature detection to test a browser’s capabilities to render them. He shows and explains all of this with practical examples, showing how things are rendered in different browsers, with different CSS(3) support. Since this book came out Modernizr has been updated to version 2. You can read what is new in this post on the Modernizr blog.

Microformats

For all of us who cares about making every HTML element and attribute count, and want to take it one step further semantically, there is the usage of Microformats. Andy shows us in a very practical manner how we can use Microformats in our designs.

I personally find this matter very hard to remember (I just can't). Andy has a very refreshing way of explaining and making it look effortless to take the extra leap to implement these into our markup. He turns them into our advantage and uses them to bind CSS styles to.

WAI-What?

The book takes it one step further into the topic of accessibility and explains the usage of another specification called WAI-ARIA (Accessible Rich Internet Applications Suite), which is aimed to make dynamic web content processed by technologies such as Ajax easier for people who use assistive technologies.

Presenting designs in a browser

Andy also talks about the limitations of designing websites the static way, using Photoshop or Fireworks. One of the things is the interaction that is missing, the poor typographic rendering of text etc. He states "Presenting designs as static images sets false expectations and reinforces old-fashioned ideas such as websites should look the same in every browser." The way we present designs needs to adapt to meet the wide-ranging browser capabilities and emerging technologies. Andy definitely has a point here, but I can't see myself actually starting my design in a browser. I just need the design applications that I know best, and feel most comfortable and creative in. For me they are Photoshop and Illustrator. Once the design is all set, I can start thinking about how to code. I can't really put my mind around design ideas while coding, unless it's something creative towards the markup itself. Like solving a problem in a creative way. To me it seems that most of the designs I create are too complex to code them before I present them to the client. It would take too much time and it could possibly be all for nothing as it happens sometimes that the first design isn't the right design. Unless there is an application that solves this problem, and is able to combine both worlds, I'm sticking to designing in Photoshop.

HTML5 and all

You'll get more than just an introduction to HTML5. Andy goes over almost the entire list of new HTML elements. Especially the form elements are very well explained. He explains when and how to use these elements. Furthermore he show us how you can style them and how we can fix things for older browsers. Throughout the book Andy gives use more than handful of useful links and tips as follow up on the side of each article or practical example.

CSS3 boiling it hard and harder

The next 2 big chapters, which is the biggest part of the book, is where the real fun begins. It covers all the goodness there is to know about CSS3. Just reading and looking at the examples given is a true inspiration. It makes your head spin into a 'can't wait to get started' mode. Andy gives us a ton of ideas on how we can apply CSS3 in different ways all very well explained and documented.

Exclusive!

Mark June 14th in your agenda!

A little bird told me that next Tuesday, 14th June, Five Simple Steps will be offering something special — all the digital editions of Hardboiled Web Design, including PDF and the new ePub and mobi formats — for only £14.00! That's less than the normal price of the PDF! The “Hardboiled Web Design Digital Special” is perfect for customers around the world for whom paperback shipping can be expensive. It's also perfect for PDF owners who want the two new digital formats. This offer will be for one week only.

It will be on sale at Five Simple Steps

Conclusion

It's definitely one of the best looking books for this subject matter. The beautiful cover illustration is done by Kevin Cornell, the part opening illustrations by Elliot Jay Stocks, and the cool cartoony illustrations used on the demo example files are done by Geri Coady. The design and art direction is very well executed. The book is rather tick and heavy, and contains 390 pages.

It's one of these books that is always laying either on my desk or at arm reach as I constantly use it to look things up. Especially about CSS properties like gradients. Some things are still new or are hard and complex to remember from the top of your head. This book explains things so well as it is aimed to designers like me. So it's the perfect book to keep close to you while working. Highly recommend.

JavaScript Interview Questions

SonSpring — Tue, 07 Jun 2011 22:05:34 -0700

JavaScript

I was perusing my list o’ RSS feeds this evening — Yes, I’m one of those people who still read RSS — and happened upon a list of JavaScript interview questions posted by James Padolsey. This reminded me that I had a few questions tucked away from when I was contacted by a Meebo recruiter a few years ago.

I didn’t apply for the job, because I was working at the (now defunct) startup Viewzi, and I didn’t want to uproot from Dallas and move to California. Just for kicks, I asked the recruiter if it’d be okay if I went ahead and tried my hand at their code questions anyway. After which, the recruiter replied:

You aced the puzzlers, well done! Are you sure you don’t want to be considered for our JavaScript / Front-End Developer position? If you ever have the itch to move to CA, be sure to let me know!

Since a few years have elapsed since then, I am hoping that it is kosher for me to share these questions, along with the answers I provided…

1. When does div.setAttribute('###') not equal div.###?

Answer:

When you’re trying to set an element’s class attribute, IE has issues. Therefore, it’s better to use .className instead of .setAttribute(). There is also an issue with .setAttribute() and style in IE, so .style should be used.

// Don't do this:
el.setAttribute('class', 'foobar');

// Do this instead:
el.className = 'foobar';

// Don't do this:
el.setAttribute('style', 'color: #000');

// Do this instead:
el.style.color = '#000';

2. What’s the difference between these two statements:

A. var x = 3;
B. x = 3;

Answer:

The first puts the variable in the scope of whatever function it was defined. The second places the variable in global scope. It can potentially cause collision with other variables with the same name. Therefore, the keyword var should always be used when defining variables, and an anonymous function should be used as a closure if need be, encapsulating multiple functions which can share access to the same set of variables. That makes sure the variables stay sandboxed, accessible only by those functions which need them.

3. What’s the difference between:

A. !!(obj1 && obj2);
B. (obj1 && obj2);

Answer:

The first returns a “real” boolean value, because you first negate what is inside the parenthesis, but then immediately negate it again. So, it’s like saying something is “not not” truth-y, making it true. The second example simply checks for the existence of the obj1 and obj2, but might not necessarily return a “real” boolean value, instead returning something that is either truth-y or false-y. This can be problematic, because false-y can be the number 0, or an empty string, etc. Simple existence can be truth-y. A “real” boolean will only be true or false.

4. Write a one-line piece of JavaScript code that concatenates all strings passed into a function. (Note: Formatting added for readability)

function concatenate() {
  return String.prototype.concat.apply('', arguments);
}

More on that here…
http://sitepen.com/blog/2008/05/09/string-performance-an-analysis

5. What do these two examples have in common?

Short Answer:

Both create potential memory leaks, especially in Internet Explorer.

Example 1:

var obj = document.getElementById('adiv');

document.getElementById('adiv').ptr = obj;

Long Answer:

This is bad practice, because you first assign a DOM element to a variable, but then you assign that same element to a (nonexistent) property of the element itself. This creates a sort of circular logic loop, and will negatively impact performance.

Example 2:

function assignClick() {
  var el = document.createElement('div');

  function handleClick() {
    el.innerHTML = 'clicked!';
  }

  el.attachEvent('onclick', handleClick);
}

Long Answer:

This example will only work in Internet Explorer, because it employs the proprietary .attachEvent() method. Granted, .innerHTML ~~is also proprietary~~ (now a standard), but unlike .attachEvent(), .innerHTML is widely supported in all modern browsers. To make this example more cross-browser friendly, the W3C standard .addEventListener() should attempted first, and if it does not exist, then try .attachEvent() as a fallback.

Interview with Ty Wilkins

Veerle — Thu, 02 Jun 2011 01:51:00 -0700

I always have utter admiration for graphical artists who are able to stylize something to its bare essentials using only a few lines or shapes and yet keep things very recognizable. There are only a few who are really good at it. Ty Wilkins, an independent graphic designer and illustrator living in Tulsa, Oklahoma, is definitely one of these talented few. He can draw illustrations in such a way that they look like logos. Ty worked for Gardner Design where he had the opportunity to redesign LogoLounge. He's also the founder and editor of the contemporary typography blog Type Theory. He currently teaches Typography for the Academy of Art University online undergraduate program. In his free time, Ty spends his time illustrating, drawing and collecting books by mid-century modern illustrators. His beautifully crafted style made me want to interview him, and this week I had the honor…

Logo for Peachpit Press and Illustration for Monocle.

Did you always know you wanted to be an illustrator, or did you do something else before you started freelancing?

I have always been interested in illustration. Growing up I wanted to be a Disney (and later Pixar) animator. I would carefully study photos and photorealistic illustrations like that of Norman Rockwell and meticulously recreate them in pen and ink. Over time I grew comfortable drawing with ink without preliminary pencil sketches. I later studied graphic design at Auburn University.

I rediscovered illustration several years ago when I realized that I could illustrate in much the same way that I design logos. I worked as a professional graphic designer for six years before going independent. I created a few personal illustrated pieces, such as the fox, horse and toucan, and was surprised at the response online to my illustration work. I started being contacted by design firms looking to hire me to create commercial illustrations. At this point I decided that I should go independent so that I could pursue these opportunities. This all happened about a year ago.

How would you describe your creative process?

As an illustrator I feel that it is important to develop original work that is conceptually and stylistically unique. At the same time I feel that inspiration is very valuable. If your source of inspiration is very limited it can be far too tempting to lift the ideas of other talented people. In order to make sure that I always create original work, I do tons of research. I buy books, make trips to the library, search online and visit the thrift store.

Once I have collected heaps of inspiration, I start to envision unusual relationships between colors, forms and concepts that were never there before.

Writing down words is very helpful. When working on a logo or editorial assignment I make a list of keywords and then list related words and visuals. This helps keep me on track conceptually. Sometimes the best solution is simply finding a witty way to combine two unrelated symbols.

I am a big advocate of sketching. I find that ideas flow out of a pencil much faster than a mouse or stylus. So I spend about 50-75% of my time on each assignment sketching.

Could you describe a typical working day?

I generally have anywhere from 2-5 deadlines in a week, so I am often working today for something that is due tomorrow. I prefer to dedicate large periods of time to a single project rather than jumping around frequently within a given day. I am quite the night owl and find that I can be very productive in a short period of time in the late hours of the night. I am passionate about my work so I sometimes forget that I work long hours.

Illustration for Poster Cabaret, Real Men Real Heroes logo, Monocle Issue Opener Illustration for Monocle, and Cheerios Polar Bear illustration for Cheerios.

We hear that you are planning to move to Austin soon. What takes you to the Lone Star State?

That's right, I am moving to Austin this summer. Austin has a flourishing entrepreneurial economy and really embraces the arts. In addition to great weather, Austin's economic climate continually ranks among the best in the country with strong education, government and tech sectors providing a strong foundation. I was born in Texas but this will be my first time living in Austin. I've really enjoyed my time in Tulsa and hope to return to visit often.

Illustration for Listopedia.

What do you do to recharge your creative batteries?

When I'm not working, I love to be outside enjoying the sunshine with my wife and kids. My daughter is fascinated with insects and is currently trying to create her own makeshift ant farm. I bought her a sketchbook recently and she often asks me to sketch with her. We like to create hybrid portraits with features illustrated by both of us. This results in some unexpectedly bizarre faces. My son is 1 and he loves to play hide-and-seek. I also enjoy grabbing empanadas at Mi Tierra, a local Latin restaurant.

More of Ty's work

Designing Through Adversity

This Is Aarons Life — Wed, 25 May 2011 17:12:25 -0700

As of late I have come across a fair amount of adversity. It started when I got home from the IA Summit back in early April, and has continued until this week. It can be fairly common for designers to come across adversity in their workplace, or at home in family life, but how do we continue [...]

Strategy in Mobile

Nick Finck — Tue, 24 May 2011 09:11:27 -0700

Here are the slides from my talk at the IA Konferenz in Munich, Germany. My talk covered my interaction design process for mobile, the tools I use to do this, and then I go into why we shouldn’t develop a separate strategy for mobile and instead just develop a strategy for the entire user experience. It is a bit of a high-level talk and I don’t go into technical details but its worth checking out.

Video of my presentation should be available for purchase through the IA Konferenz soon as well. Meanwhile, check out Jens Jacobsen‘s interview with me. He asked me a few questions about my talk, mobile interaction design, mobile information architecture, mobile user experience, and the future of mobile. Of course I bumbled some of my answers and seem to have gained 5 pounds on video here, but none the less I thought I would share.

User Research Friday

This Is Aarons Life — Mon, 23 May 2011 19:32:07 -0700

I am really excited to have the opportunity to speak at User Research Friday on June 24th. I have been a fan of the Bolt Peters gang ever since I read Remote Research last year. When I saw that they were holding User Research Friday in my neck of the woods I was stoked to attend, and now even [...]

Love your Clients

Komodo Media — Thu, 19 May 2011 09:17:41 -0700

It was an incredible honor to speak for the very first time, at Valiocon. I spoke on the art of loving your clients and how sacrifice, selflessness and commitment can take you far and help you create lasting friendships with your clients.

Jacob Souva’s process of Puzzld!

Veerle — Thu, 19 May 2011 02:34:00 -0700

Today I would like to introduce to you Puzzld!, a beautifully illustrated wood puzzle game for children by Windup Rocket apps. It features the stunning artwork by Jacob Souva of Two Fish Illustration. Six wonderful boards come alive at the fingertips of kids. I had the pleasure and honor of interviewing Jacob and ask him about the design process of this beautiful iPhone and iPad app.

The 'Farm' and 'Space' illustration for Puzzld! for iPad

The iPad app game Puzzld! has all the right ingredients to appeal to kids: cuteness, rich color palette and eye for detail. The people of Windup Rocket knew that Jacob Souva's typical illustration style would be a perfect match, but they weren't sure if he would be interested. Jacob stated:

"The client had very little to offer up front. It turned out that I was looking for an excuse to a.) have my work on an iPad b.) do kids related illustration c.) it was summer, and I wanted to do some "fun" work (as opposed to corporate web work, or print design work)."

Were there any hurdles relating to iPad that you had to overcome during the design phase?

The biggest hurdle was probably thinking through not only the illustration (content, age appropriateness, style), but how exactly a young child would interact with the pieces and the UI. Luckily, in my experience kids seem to find iOS very intuitive. They are not burdened with years of frustration from Windows or an old phone OS. We've put a good deal of time into this piece, and we've heard great things from kids as young as 1 understanding how to manipulate a piece of the puzzle.

How was the briefing for this project? Did you get a detailed outline or dummy or some kind of chart that shows the flow and interaction of the game? Or did the client approach with his 'idea' of the game and go from there in collaboration with you?

It all started with an email from Matt. He saw my work on Dribbble and explained what he was after. We agreed to "partner" on the whole of the app, with my main focus being the 6 illustrations and icon development. He would work on the UI, coding and overall app development. I ended up helping with the individual icons that sit on the shelf when the app is launched, symbolizing each puzzle. We wanted it to be simple and memorable for young minds.

We set up a dropbox folder to share and communicate mostly through email. I'd send him sketches and he'd send me videos of the app in use. Once he added the music - it seemed like magic.

Did you also design the entire graphical skin of the game? Or was your part of the project focussed on all the illustration work?

The idea was pretty simple and one that I could get my brain around easily, as my wife and I have a 1.5 year old who loves wooden puzzles. Matt knew that with the app being so simple that the illustration quality was really important. It needed to be beautiful and rich. My main job was to create 6 scenes that would be different, beautiful, and not too heavily tilted to one gender over the other. We went with: Beach, Space, Underwater (Coral Reef), Jungle, Farm, and Garden.

Like I mentioned above, the UI was mostly handled by Matt, but he asked me for input and opinions along the way.

The 'Garden' and 'Jungle' illustration for Puzzld! for iPad

What was the biggest challenge in this project?

The biggest challenge was probably the process of making the illustrations! I wanted them all to be of a certain quality. That means I needed to really take my time and not rush, even though we wanted to get it out there quickly. I wanted them to look like a "set" - so they needed to have similar stylistic similarities. I didn't want them to look too much alike. There is a certain responsibility to the audience as well. For example, I drew a gorilla for the jungle scene that at first looked terrifying. Everything needed to be safe and fun for young minds.

Can you reveal some of your design process?

My process has been tweaked a lot from when I first started. I've been narrowing and refining things to best suit my strengths and my aesthetic. I start by brainstorming the concept, usually on paper with thumbnails and key words. Once I've picked one that I'm most happy with, I usually knock out a bigger thumbnail with more detail. Sometimes I get ideas for lighting and color at this stage, a very good sign that things are progressing well.

Jacob Souva's typical creative process shown in 4 steps.

After the brainstorming, the first step used to be a drawing on paper using blue pencil in combination with a good old number 2 pencil to formalize my line over the blue. However, this project was one of the first ones where I skipped the "pencil on paper > scan" step and created the whole illustration using my Wacom Cintiq 21UX which I bought this year. I still use a "blue pencil", but now it's a brush/color within Photoshop. You hardly see the difference.

The nice thing about the Cintiq is the programmable buttons on the side. I was able to speed up my workflow a lot by setting them up to do common tasks, like group objects in Illustrator, and create layer masks in Photoshop. I don't miss the old way of doing things at all. I still sketch in pencil on paper, because it's almost essential to who I am, but adding this tool has made me more efficient and has added a more human touch to my Photoshop work, as opposed to working with a mouse.

Then I bring the sketch into Illustrator for shape building. This stage is not fun, as the Pen tool and I have a long history of disagreements. After I get things built, I drag shapes under my drawing in Photoshop. I really like the combination of sharp, clean vector images with messy pencil drawings. From there, it's a whole lot of masking, color tweaking and collaging textures and images in. I really enjoy this part!

You always work with these very cool textures, is that something you create yourself as well or do go look online for that? Are there any tips or pointers you can give?

This is something that people ask about all the time. It's a combination of textures I've saved (all copyright free) from the internet, or scanned from random found items, or shot with my camera. I usually just experiment with them to get the right color or look in PS. I also "paint" over the top of them to give them depth. I like the "flatness" of texture/pattern combined with highlights/shadows.

The font used throughout is "Prater Script". I choose it for its playfulness. I'd actually discovered it through Typekit for a different, web-based project and thought it would be perfect here.

More of Jacob's work

Puzzld! on iTunes

The Cross-Channel Experience - UXLx

Nick Finck — Fri, 13 May 2011 03:09:43 -0700

Thanks to everyone who attended my talk at UX Lx. This was my first time giving a talk outside of the united states and I am happy to hear that it was well-received. For those who are interested, here are the slides from my talk. Feel free to get in touch with me if you have questions that you were not able to ask in the Q&A at the end of my talk.

James Royal-Lawson took some pretty good notes from the talk here and Bauke Schildt created a sketch note of the talk. Lastly, here is the description of my talk to give you a little more context:

No matter how many departments your organization has, to your customers, it’s all the same business. They expect a cohesive experience across all touch-points with your company, regardless of whether it’s related to advertising, customer service, social presence, or the actual product or service you provide. The satisfaction of your customers, and thereby the success of your organization, depends in no small part on your ability to create a cohesive and consistently high-quality cross-channel experience.

Some examples of disjointed cross-channel experiences are:

The customer has to inform the customer service representative of what the website says about their own return policy.

The specifications of a product online does not match the actual product a customer goes to pick up in the retail store.

The experience of the mobile application is far superior to the experience of the standard web application or software application.

The customer has to make three different phone calls to get their account changed because the information is stored in three separate business units.

Applying consideration for the cross-channel experience is much easier said than done. It requires a significant level of coordination and collaboration between the stakeholders, to understand not just how to optimize their particular part of the service, but to maintain that optimal and consistent experience throughout. For example, the customer service department can do a great job of correcting a problem after the fact, but they can add greater value to the product or service as a whole by collaborating with sales and product teams to prevent the issue from arising in the first place.

In this presentation, you will gain a better understanding of the different ways your customers might interact with your business. We will show how you can map out these touchpoints and help drive the creation of a cohesive experience across the various channels. We will show you how to navigate the political waters within your business to implement a true cross-channel design, which will build great experiences for your customers, regardless of how they are engaging with your business.

Adaptive Web Design book cover

Veerle — Thu, 12 May 2011 10:22:00 -0700

In November my good friend Aaron Gustafson contacted me with the request if I would be interested in designing the cover of his new web design related book. Call me intrigued. Designing book covers isn't something that I do often and they are always a welcome creative challenge. Definitely when it involves illustration work. After checking my schedule and agreeing on the timing, there wasn't much doubt left.

The briefing

During a Skype meeting Aaron explained what his book is about. At that time the title of the book wasn't final yet, but there were already a few ideas circulating. One of the titles with the most potential was 'Adaptive Web Design, Creating Rich Experiences with Progressive Enhancement'. I was already familiar with the term 'Progressive Enhancement' so it didn't take too long to start discussing ideas. The book's cover needed to be a colorful eye-catcher, and we both agreed on trying to find some kind of a metaphor or analogy as illustrative subject.

For those that aren't familiar with the term 'Progressive Enhancement', it's a way of designing for the web with the emphasis on accessibility using semantic markup in a layered fashion that allows everyone to access the raw content and functionality of a web page, using any browser, while also providing those with a more capable modern browser an enhanced version of the webpage.

Some of the analogies Aaron had in mind were: a peanut M&M, a trifle, a layer cake or earth. He especially liked the peanut M&M because as he stated:

"Each layer adds something that makes the experience more pleasant, but not all layers are necessary for it to be edible. It doesn’t really work in a literal sense because there are more than three layers, but I still think it’s a valuable metaphor."

Even though it is a good analogy, and the result would definitely be colorful, the idea of using peanut M&M's for the cover of this book didn't really appeal to me. So I suggested to visualize the layered method in a more abstract way, using geometric forms. Aaron liked the idea as well, but of course it all depends on the outcome. It was totally up to me to make the idea work, and to have it speak for itself. We decided to follow this route, so I got started…

The design process

Browsing for inspiration

The first thing I did was browsing around to get inspired for form, colors, typography… Luckily, I didn't have to look very far as I have my own arsenal to start with, my Inspiration Stream. People often ask me if I have a typical design method that I usually stick to. I don't think I have really, as with every project it's a bit different. Of course I always start with the obvious, finding inspiration, but once it's starting to brew in my head it can differ what I'll do next. In most cases, for a project like this, I'll do some sketching and I start thinking about colors. This time I decided to try to find the right color palette first, combined with the typography plus trying to shape the idea of an abstract form that would be suitable.

Creation of a mood board

After gathering a few images that inspired me, I decided it would be a good idea to create some kind of a mood board in combination with a few suggestions on color combinations and typefaces.

After browsing the Inspiration Stream, I found these images that inspired me because of their color usage: number 5, 6, 10, 11 and 12. From these images I tried to derive a color palette of usable color combinations. Next I tried out a few color and typeface combinations for the main and subtitle, by creating these basic covers as seen in 1, 2, 3 and 4.

Images number 7 and 8 I liked because of the geometrical shapes. As for number 7 I thought the idea of overlapping shapes could be something to look into. As the center of all overlapping shapes would represent the users with the richest experience, and each separate shape would be a different experience. Though I wasn't sure if this thinking was actually representative enough, plus that it would translate that message. The idea fascinated me for a while, but then it faded away and didn't result in any concrete concept. Number 9 on the other hand was a special one, because of the concept. I thought it would work well if I could do something similar as how the dog was presented: going from outline, to flat fill and to a colored fill. It reflects the metaphor of progressive enhancement very well. That illustration got me thinking…

Aaron and his team liked the colors used on image number 11. So I decided to work with colors in the same palette of that illustration. Plus they also liked the typeface used in the main title of numbers 3 and 4.

The first design proposal

For the initial proposal I thought of using the shape of a cube and trying out the same idea as the dog illustration, using a color palette that is close to the colors used in image number 11. Below you see some of the process of the first design proposal, trying out a few different compositions. At that time I also didn't know the exact dimensions of the book. As you'll notice further below, the final proportion of the book is a bit taller.

First variation

Second variation

Third variation

Even though the client's preference was version 2, they weren't 100% convinced on how well the two concepts 'building up & abstract shapes' worked together. They did like some elements of the design, but they also thought of a more sophisticated illustrative style.

The second design proposal

After some brainstorming (via Skype), we came to the conclusion of trying out the concept of using a chameleon, which was also one of the ideas I mentioned in our first meeting. When thinking about the term 'adaptive', I couldn't help thinking about a chameleon. After all it is an animal that adapt itself to its environment around him, and I thought it could make an appealing look if I could create a stylized version. It would make a perfect subject because in terms of colors it gives me enough options, and because it's a very fascinated animal to draw, plus I totally love the shape of his tail. At first I dropped the whole idea, because I was convinced it had been used before on one of the O'Reilly books. Though, I'm now doubting if I don't confuse it with one of their other animals (the lemur?) as I couldn't find anything on the web… While thinking about this in more detail I knew that I would create something totally different from O'Reilly anyway as their animals are always in a black & white pen drawing style.

Second design proposal

Second proposal, now with adjusted background leaves and toes

After gathering a ton of photos of chameleons I made a small sketch of how I would position him on the cover. One thing was for sure, his tail needed to be on the cover as I totally love the curly shape. Aaron and his team also loved the color palette I used before, so it was my intention to try to adapt the same color palette into this new design. While studying the animal and his position, I tried to draw the animal using only basic shapes limiting into a horizontal, vertical or diagonal structure, with a minimal of deviations.

Aaron and his team really loved the direction of this illustration, and based on feedback I ended up with a second version where I gave the animal toes, and a leafy environment. I looked at many photos and compared them with each other. Some of the photos were too blurry for me to make things up. So for a moment the toes drove me a little bit crazy and I wished I could watch this animal in real life. That's why I made a mistake in how his toes are positioned in my first design.

The final and approved design

One of the final remarks was that the ribbon-like effect of the tail did feel a little awkward as it didn't feel like a tail but rather more as a detached ribbon. So I applied this surreal 3D effect to the tail, which gave it more depth and the illusion of thickness, while keeping the different color segments. Another request was if I could curve the crest of his head a little bit more. I initially thought this would ruin it, but after trying this out, it seemed to result in a more elegant look. I also corrected his toes on the front leg and changed the word 'Creating' into 'Crafting'.

Final and approved design of 'Adaptive Web Design' book cover.

Typefaces used for the cover are Trade Gothic Bold Condensed Twenty and Trade Gothic Condensed Eighteen. The book is now off to the printers and I can't wait to have a copy in my hands. That's something that web design will never replace, the tactile repsonse of something you created. The book is now available for pre-order at http://easy-readers.net/ with a discount. Will do a review of the book itself too.

The Paper Phone

Nick Finck — Sat, 07 May 2011 10:20:53 -0700

Researchers at the Human Media Lab at Queen’s University, Canada and Arizona State University’s Motivational Environments Research group have created a prototype electronic paper phone. The PaperPhone prototype was created to observe how easy it was for people to control a thin device using a series of interactions which include bending and flexing. The research found 8 individual bend gesture patterns and apparently there are around 174 ways to bend electronic paper. Learn more about the PaperPhone experiment at the Human Media Lab. Also see the CHI2011 paper.

Tips on how to optimize your web design workflow

Veerle — Thu, 05 May 2011 03:18:00 -0700

I'm not sure about you, but I'm still in favor of using Photoshop to create of my design for the web. However, I agree that this application, even with all its never-ending feature set, is not the ideal environment to design web sites in. The ideal application doesn't exist yet, until it does it is maybe not such a bad idea to investigate ways on how we can optimize our workflow.

The title of this article might sound familiar to some of you, as I have written this article for 24 Ways in December of last year. In the meantime many new readers have arrived unaware of this article so I thought it couldn't hurt publishing it here again on my site.

Why use Photoshop?

It will probably not come as a surprise if I say that Photoshop and Illustrator are the applications that I know best, and feel most comfortable and creative in. Some people prefer Fireworks for web design. Even though I understand people's motivations I still prefer Photoshop personally. On the occasions that I gave Fireworks a try, I ended up just using the application to export my images as slices, or to prepare a dummy for the client. For some reason I've never been able to find my way in that app. There were always certain things missing that could only be done in either Photoshop or Illustrator, which bothered me.

Why not start in the browser?

These days with CSS3 styling emerging and all, there are people who find it more efficient to design in the browser. I agree that at a certain point, once the basic design is all set and defined, you jump right into the code and go from there. But the actual creative part, at least for me, needs to be done in an application such as Photoshop. As a designer I need to be able to create and experiment with shapes on the fly, draw things, move them around, change color, gradient, effects etc. I don't see me doing this with code. I'm sure if I switch to markup all too quickly I might end up with a rather boxy and less interesting design. Once I start playing with markup, I leave my typical 'design zone'. My brain starts thinking differently. More rational and practical, if you know what I mean. Trying to structure and analyze how to markup my design in the most efficient semantic way etc. When I design, I tend to let that go for a bit. Think more freely and not so much about the limitations as it might hinder my creativity. Now that you know my motivations to stick with Photoshop for the time being, let's see how we can optimize this beast.

Optimize your Photoshop workspace

In Photoshop CS5 you have a few default workspace options to choose from which can be found at the top right in the Application Bar (Window > Application Bar).

You can set up your panels and palettes the way you want starting from the 'Design' workspace option,and save this workspace for future web work. Here is how I have set up things for when I work on a web site design:

I have the layers palette in the open state, and I keep the other palettes in the collapsed state. Sometimes when space permits I have them all in the open state. For designers who work both on print and web, I think it's worthwhile to save a workspace for both, or for when you're doing photo retouching.

Set up a grid

When you work a lot with Shape Layers like I do, it's really helpful to enable the Grid (View > Show > Gird) in combination with Snap to Grid (View > Snap To > Grid). This way your vector-based work will be pixel sharp, as it will always snap to the grid, and so you don't end up with blurry borders.

To set up your preferred grid, go to Preferences > Guides, Grids and Slices. A good setting is to use 'Gridline Every 10 pixels' and 'Subdivision 10'. You can switch it on and off at any time using the shortcut Cmd/Ctrl + '.

It might also help to turn on Smart Guides (View > Show > Smart Guides).

Another important tip for making sure your Shape Layer boxes and other shapes are perfectly aligned to the pixel grid when you draw them is to enable Snap to Pixels. This option can be enabled in the Application bar in the Geometry options dropdown menu when you select one of the shape tools from the toolbox.

Use Shape Layers

To keep your design as flexible as possible it's a good thing to use Shape Layers wherever you can as they are scalable. I use them when I design for the iPhone. All my icons, buttons, backgrounds, illustrative graphics,… they are all either SmartObjects placed from Illustrator, or Shape Layers. This way the design is scalable for the retina display.

Use Smart Objects

One of the things I like a lot in Photoshop, are SmartObjects. Smart Objects preserve an image’s source content with all its original characteristics, enabling you to perform nondestructive editing to the layer. For me this is the ideal way of making my design flexible. For example a lot of elements are created in Illustrator and are pure vector-based. Placing these elements in Photoshop as SmartObjects (via copy & paste, or drag from Illustrator into Photoshop) will keep them vector-based and scalable at all times without quality loss.

Another way on how you could use SmartObjects is whenever you have repeating elements, like for example if you have a stream or list of repeating items. You could for instance create 1, 2 or 3 different items (only just for the sake of randomness), make SmartObjects of each one, and have these repeated to create the list. Then, when you need to do updates, you only need to update the SmartObject, and the update will be automatically be applied in all its linked instances.

Turning photos into SmartObjects before you resize them is also something you might consider doing. You never know when you'll need that same photo just a bit bigger. It keeps things more flexible as you leave room to resize the image in a later stage. I'm using this in combination with the SmartFilters a lot, as it gives me such great flexibility.

I usually use SmartObjects as well for the main sections of a webpage, which you need repetitively for the different pages of a site. So for elements such as: header, footer, sidebar,… It can be handy for bigger projects that are constantly evolving, and where you have to create a lot of different pages in Photoshop. You could save a template page that has the main sections set up as SmartObjects, always in their latest version. Each time you need to create new page, you start from that template file. In case you need to update an existing page because the footer, sidebar, header… has been updated, you can drag the updated SmartObject into this page. Though I wish Photoshop made it possible to have SmartObjects live as separate files, which are then linked to my different pages. So whenever I update the SmartObject the pages are automatically updated next time I open the file. The same way in how a linked file works when you place a external image in InDesign or Illustrator.

Use Layer Comps

In some situations the usage of Layer Comps can come in handy. I try to use them when the design consists of different states. For example if there is a hidden and show state of certain content. For instance, the content is showed after clicking a certain button. It can be handy to create a Layer Comp for each state. Then when you switch between the 2 Layer Comps you switch between these 2 states. It's OK to move or hide content in each of these states, as well as applying different layer styles. I find this particular handy when you need to save separate jpeg versions of each to show the design to the client, instead of going over all the eye icons in the layers palette to turn the layer's visibility on or off.

Create a set of custom color Swatches

I tend to use a separate color Swatches palette for each project I work on, by saving a separate Swatches palette in the folder of the project (as an .ASE file). You can do this via the palette's dropdown menu and choose for Save Swatches for Exchange. Choosing this option will give you the flexibility load this palette in other Adobe applications like Illustrator, InDesign or Fireworks. This way, each time I have the colors of that particular project at hand. I name each color, using the hexadecimal values.

Loading, saving or change the view of the Swatches palette can be done via the palette's dropdown menu. My preferred view is 'Small List' so I can see the hexadecimal values or other info I have added in the description.

Though, I wish Photoshop had the option of loading several different Styles palettes, each as separate palette, so I could have 2 or more of them open at the same time, but each as separate palettes. This would be handy whenever I switch to another project, as I'm usually working on more than 1 project in 1 day. Now you can add a set of colors to the palette that is already open which is not very efficient if you need to update the palette of a project separately.

Create a set of custom Styles

Just like with saving a Swatches palette, I also always save the styles I apply in the Styles palette and save it as a separate Styles file in the folder of this project when I work on a web site design or design for iPone/iPad. During the process, when styles are added I re-save it. Each time I work on the project, I load the styles palette of that particular project. Though, here I have the same remark as with the color swatches. It would be great if we could have different Styles palettes open at the same time.

Use a scratch file

What I also find particularly timesaving, in case you are working on a rather big project, is working with some kind of scratch file. By that I mean a file that has elements in place that you re-use a lot in the general design. Think of buttons, icons, etc. that you need in every page or screen design. This is handy for both web design work and iPad/iPhone work.

Use the Slice Tool

This might not be something you think of at first, because you probably associate this way of working with *old-skool* table techniques. Still, you can apply your slice anyway you want with your way of working in mind. Just think about this for a second. If you use the slice tool, and you give each slice its proper filename, you don't have to worry about this once you need to do updates on the slice or image. Photoshop will know how the image of that slice is name and which 'Save for Web' export settings you've used for it. You can also export multiple 'slices' all at once, or export only the ones you need using 'Save selected slices'.

I hope this list of optimization tips were useful, and that these will help improve and enjoy your time in Photoshop. That is until the ultimate web creation application makes its appearance. Somebody is building this as we speak, right?

Font sizing with rem

Jon Snook — Sun, 01 May 2011 11:52:56 -0700

Determining a unit of measurement to size our text can be a topic of heated debate, even in this day and age. Unfortunately, there are still various pros and cons that make the various techniques less desirable. It's just a matter of which less-desirable is most desirable.

There are two main techniques that are extolled:

Size with px
Size with em

Let's review these two approaches before I reveal the magical third.

Sizing with px

In the early days of the web, we used pixels to size our text. It's reliable and consistent. Unfortunately, users of Internet Explorer—even in IE9—do not have the ability to change the size of the text using the browser function of increasing or decreasing font size. For those concerned about the usability of their site, this may be a big deal. Recent versions of IE include zooming, which increases the size of everything on the page—a feature that is also available in most other mainstream browsers, too. This has helped mitigate the issue to a degree.

I, personally, have been of the camp that px-based layouts provide the consistency I prefer and users have enough tools available to adjust their view that accessibility is less of a concern. But I digress. What else can we do?

Sizing with em

That whole inability to resize text in IE has been a continuing frustration. To get around that, we can use em units. Richard Rutter's article, How to size text using ems, was probably the first I read of this approach, way back in 2004. (Wow, it has been almost seven years.)

The technique modifies the base font-size on the body using a percentage. This adjusts things so that 1em equals 10px, instead of the default 16px. To set the font-size to the equivalent of 14px, set it to 1.4em.

body { font-size:62.5%; }
h1 { font-size: 2.4em; } /* =24px */
p  { font-size: 1.4em; } /* =14px */
li { font-size: 1.4em; } /* =14px? */

The problem with em-based font sizing is that the font size compounds. A list within a list isn't 14px, it's 20px. Go another level deeper and it's 27px! These issues can be worked around by declaring any child elements to use 1em, avoiding the compounding effect.

body { font-size:62.5%; }
h1 { font-size: 2.4em; } /* =24px */
p  { font-size: 1.4em; } /* =14px */
li { font-size: 1.4em; } /* =14px? */
li li, li p /* etc */ { font-size: 1em; }

The compounding nature of em-based font-sizing can be frustrating so what else can we do?

Sizing with rem

CSS3 introduces a few new units, including the rem unit, which stands for "root em". If this hasn't put you to sleep yet, then let's look at how rem works.

The em unit is relative to the font-size of the parent, which causes the compounding issue. The rem unit is relative to the root—or the html—element. That means that we can define a single font size on the html element and define all rem units to be a percentage of that.

html { font-size: 62.5%; } 
body { font-size: 1.4rem; } /* =14px */
h1   { font-size: 2.4rem; } /* =24px */

I'm defining a base font-size of 62.5% to have the convenience of sizing rems in a way that is similar to using px.

But what pitiful browser support do we have to worry about?

You might be surprised to find that browser support is surprisingly decent: Safari 5, Chrome, Firefox 3.6+, and even Internet Explorer 9 have support for this. The nice part is that IE9 supports resizing text when defined using rems. (Alas, poor Opera (up to 11.10, at least) hasn't implemented rem units yet.)

What do we do for browsers that don't support rem units? We can specify the fall-back using px, if you don't mind users of older versions of Internet Explorer still being unable to resize the text (well, there's still page zoom in IE7 and IE8). To do so, we specify the font-size using px units first and then define it again using rem units.

html { font-size: 62.5%; } 
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */

And voila, we now have consistent and predictable sizing in all browsers, and resizable text in the current versions of all major browsers.

Font sizing with rem

Jon Snook — Sun, 01 May 2011 11:52:56 -0700

There are two main techniques that are extolled:

Size with px
Size with em

Let's review these two approaches before I reveal the magical third.

Sizing with px

Sizing with em

body { font-size:62.5%; }
h1 { font-size: 2.4em; } /* =24px */
p  { font-size: 1.4em; } /* =14px */
li { font-size: 1.4em; } /* =14px? */

body { font-size:62.5%; }
h1 { font-size: 2.4em; } /* =24px */
p  { font-size: 1.4em; } /* =14px */
li { font-size: 1.4em; } /* =14px? */
li li, li p /* etc */ { font-size: 1em; }

The compounding nature of em-based font-sizing can be frustrating so what else can we do?

Sizing with rem

CSS3 introduces a few new units, including the rem unit, which stands for "root em". If this hasn't put you to sleep yet, then let's look at how rem works.

html { font-size: 62.5%; } 
body { font-size: 1.4rem; } /* =14px */
h1   { font-size: 2.4rem; } /* =24px */

I'm defining a base font-size of 62.5% to have the convenience of sizing rems in a way that is similar to using px.

But what pitiful browser support do we have to worry about?

html { font-size: 62.5%; } 
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */

And voila, we now have consistent and predictable sizing in all browsers, and resizable text in the current versions of all major browsers.

Font sizing with rem

Jon Snook — Sun, 01 May 2011 11:52:56 -0700

There are two main techniques that are extolled:

Size with px
Size with em

Let's review these two approaches before I reveal the magical third.

Sizing with px

Sizing with em

body { font-size:62.5%; }
h1 { font-size: 2.4em; } /* =24px */
p  { font-size: 1.4em; } /* =14px */
li { font-size: 1.4em; } /* =14px? */

body { font-size:62.5%; }
h1 { font-size: 2.4em; } /* =24px */
p  { font-size: 1.4em; } /* =14px */
li { font-size: 1.4em; } /* =14px? */
li li, li p /* etc */ { font-size: 1em; }

The compounding nature of em-based font-sizing can be frustrating so what else can we do?

Sizing with rem

CSS3 introduces a few new units, including the rem unit, which stands for "root em". If this hasn't put you to sleep yet, then let's look at how rem works.

html { font-size: 62.5%; } 
body { font-size: 1.4rem; } /* =14px */
h1   { font-size: 2.4rem; } /* =24px */

I'm defining a base font-size of 62.5% to have the convenience of sizing rems in a way that is similar to using px.

But what pitiful browser support do we have to worry about?

html { font-size: 62.5%; } 
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */

And voila, we now have consistent and predictable sizing in all browsers, and resizable text in the current versions of all major browsers.

Font sizing with rem

Jon Snook — Sun, 01 May 2011 11:52:56 -0700

There are two main techniques that are extolled:

Size with px
Size with em

Let's review these two approaches before I reveal the magical third.

Sizing with px

Sizing with em

body { font-size:62.5%; }
h1 { font-size: 2.4em; } /* =24px */
p  { font-size: 1.4em; } /* =14px */
li { font-size: 1.4em; } /* =14px? */

body { font-size:62.5%; }
h1 { font-size: 2.4em; } /* =24px */
p  { font-size: 1.4em; } /* =14px */
li { font-size: 1.4em; } /* =14px? */
li li, li p /* etc */ { font-size: 1em; }

The compounding nature of em-based font-sizing can be frustrating so what else can we do?

Sizing with rem

CSS3 introduces a few new units, including the rem unit, which stands for "root em". If this hasn't put you to sleep yet, then let's look at how rem works.

html { font-size: 62.5%; } 
body { font-size: 1.4rem; } /* =14px */
h1   { font-size: 2.4rem; } /* =24px */

I'm defining a base font-size of 62.5% to have the convenience of sizing rems in a way that is similar to using px.

But what pitiful browser support do we have to worry about?

html { font-size: 62.5%; } 
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */

And voila, we now have consistent and predictable sizing in all browsers, and resizable text in the current versions of all major browsers.