Couple tips for an easier mockup process

Responsive web now means making multiple mockups of the same page. This can mean 3x the Potatoshop effort and sore shoulders. Boo.

Here are a couple tips from around the web on how to make life easier for client-agnostic design:

Tip #1: Make your mockups in code.

Once we understand the site’s content and priorities, our first visual step is to create wireframes. But as you may have already noticed, shuffling text around a Photoshop file can be time-consuming and frustrating.

But you know what’s really great for laying out content in a way that accurately expresses its hierarchy? You guessed it: HTML and CSS!

Source: Responsive Comping: Obtaining Signoff Without Mockups

Tip #2: Use ‘style tiles’ instead of static mockups.

Style tiles are for when a moodboard is too vague and a comp is too literal. Style tiles establish a direct connection with actual interface elements without defining layout. They work well for clients who have established brands and need them to translate smoothly to the web. Whereas the word “mood” is often associated with brand and identity design, the word “style” was chosen to mirror “cascading stylesheets” and reinforce that Style Tiles are specific to Web design.


The style tile is not a literal translation of what the website is going to be, but a starting point for the designer and the client to have a conversation and establish a common visual language. When a client says “clean,” does she mean clean or clean? Speaking the same visual language clarifies aesthetic opinions before getting too far into the actual design of the site.

Source: Style Tiles as a Web Design Process Tool


What the hell is a grid system?


“The Grid System,” they said. And I was confused. #anotherhipsterbuzzword?

We know what a grid is and what it’s for. But it’s a big mental leap from “school exercise book” to “trendy designr tool”. As always, the hype leads you to believe it’s akin to the rapture – some ground-breaking paradigm that will take weeks to master. But, of course, it’s not.

Pictured above is a humble grid (img sauce) – used to make sure the stuff in your web pages are aligned nicely to each other. Just like the ones in school, it’s a series of evenly spaced lines to use as a guide when doing your thing.

Pre-made grid guides are widely available to use as templates in your design environment:

And there’s a buttload of articles and examples for best good practise, nice practise, interesting practise, aesthetic theory and other stuff:

Again like in school, it’s entirely possible to miss the grid or fubar a design completely. This isn’t a foolproof system that will make your work awesome 5eva – just a starting point for getting stuff to line up.

Yeah, that’s really it.

UX research is actually cheap and accessible if you do it smart

Interesting quote on being practical about UX: (it’s in the video)

“For some reason, entrepreneurs love having arguments about what their product should be, even though they’re never convinced that they’re wrong – but they find it intellectually satisfying to win all these arguments cos founders always think they know what to do.

“The framework we need instead is to translate all of these opinion battles into empirical questions for testing. So let us discover which elements of our product are brilliant and which ones are wrong. Even if you’re 100% right about everything, let’s just double check – double check – that the world really does work the way that your business plan says.”

— Eric Ries

via Lean Startup Is Great UX Packaging (Smashing Magazine)

Tl;dr – Good UX research doesn’t have to be arduous and expensive. It’s just explained in a way that makes it seem so. DIY: Be empirical, validate your theories and the things you learn.

UX in three points

UX is a fancy name put onto practical things by consultants so they can charge for them. In practice there are three main points.

First, there is the matter of knowing what is common to all people. How the brain works, how the eyes scan, how people tick, what makes a screen understandable and so on. Principles of clarity apply regardless of what the domain is. Tufte’s principles for example apply here.

Second, you need to know what is special about your users. It’s not their brains or perception – that’s the same in everybody. What makes your users different are their habits and the job they are trying to do. You need to understand their purpose for using your product, how they talk about it, their points of reference and so on. Technically this is called ‘domain knowledge’. It’s most useful to think about the jobs individual users are trying to do.

Lastly you need empathy, the ability to see these points from the user’s perspective. You have to see it through their eyes in order to make the right decisions. You can use friendship as an example. You usually know what your friends like or don’t like. So try to become friends with your users. If that’s too hard, make friends with someone else in the same role.


Game mechanics


Every now and then, friends will hop onto a gamedev project and ask me to send them “that link you showed me before with the list of things”. Well, in case I lose all my bookmarks (this hard drive is clicking, I can hear it) and forget how to use my ever-changing, ever-bloating, here is the link with the things:

It’s a TechCrunch article from 2010 talking about the various mechanics used in game design. I like to look at it every so often because it reminds me of games that use those mechanics, arming me to daydream about games I loved, hated and would like to make one day.

Super useful. I can’t remember who sent it to me originally, probably @shadowmint.

Why does choice create anxiety?

Tl;dr –

  1. We choose what other people are choosing.
  2. We try to make an ideal choice.
  3. Choice always involves loss.

How does this relate to UX?

  • Offering too many choices may make your users anxious to the point of inaction (analysis paralysis), or action at your competitor (“too hard, going somewhere else”).
  • It’s helpful to suggest why a user would choose a particular option.
  • Give users an ‘out’ if they make the wrong choice – eg. refunds, exchanges, upgrades & downgrades, a properly functioning back button.

Mobile web stuff – if you must make it big, make it clever first

Some discussion on how to balance between the big, beautiful stuff new generation devices can handle, and lame-ass expensive slow mobile network bottlenecks that real users have to deal with.