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.

Source: Styletil.es

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 Apple.com clean or NYTimes.com 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:

• 960 Grid System – templates for Photoshop/Illustrator/many things
• Grid System Generator – generates CSS & HTML for your custom grid
• BlankWork – pre-made SASS file to @import in your CSS
• Modular Grid Pattern – set options, generate template for Photoshop, etc.

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

• Grid Layouts in Modern Web Design (onextrapixel)
• The Grid Sytem (“the ultimate reference”)
• Designing With Grid-Based Approach (Smashing Magazine)
• The Infinite Grid (A List Apart)
• Grid-Based Design: Six Creative Column Techniques (Smashing Magazine)

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.

Source: http://www.netmagazine.com/interviews/ryan-singer-user-experience

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 del.icio.us, here is the link with the things:

• SCVNGR’s Secret Game Mechanics Playdeck

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.

Cheese or Font?

http://cheeseorfont.com/

This one’s been around awhile. It’s a lighthearted game, where you’re shown a name of a cheese (or font), and you have to pick whether it’s the name of a cheese or a font.

Why good SEO is about being yourself.

Good SEO is about being honest and being real.

I believe this because I believe people relate to websites and brands in the same way they relate to other people. People want to feel they can trust you, they want to feel you care about them (especially if you’re asking them to give you money), and they want enjoyable measured doses of exposure to you.

These feelings and desires apply to websites as well.

SEO is not science, at least not in the way some companies sell it

Search optimisation bears much similarity to social etiquette. While you can expect a few norms, you also find many unknowns, variables and factors beyond your control. Just as how taboos today may be acceptable tomorrow, what your SEO agency implements for you could become irrelevant overnight.

Let’s look at keyword stuffing as an example. This practise became widespread in response to the search engine criteria of measuring page relevance based on how often topical words appeared.

IRL, you wouldn’t blindly trust medical advice from someone who simply says many medicine-related words and name-drops famous scientists. OK, maybe at first you’d listen, then when you find yourself sicker, you’d learn to probe, ask questions, glean context from the next maybe-doctor you meet to see if they really know their stuff and understand your situation well enough to give the right solution.

Search engines soon found their results sick with inappropriate links, thanks to completely irrelevant pages filled with desirable keywords. So they changed the algorithm that determines page ranking. “They” being the key word (lol) here – the search company, not SEO pundits, control the criteria for how pages are perceived by the engine, which is constantly reviewed and updated to reflect a smarter, more human way of making decisions.

Just like how you learn to ignore & avoid advice from quacks, search engines learn too. Keyword stuffing is now not only ineffective, it carries harsh ranking penalties for the offending site. You’ll find similar tales about other black hat and “cheap and quick” style SEO practises like cloaking, hidden text and sneaky redirects.

There is science behind good SEO, but it’s more like a philosophy

So if tailoring tricks for search algorithms is only a temporary fix, how can we achieve sustainably decent SEO rankings? This is where things get philosophical, because search engine algorithms mean to emulate how the human mind deems stuff relevant and desirable.

The world is huge. You could be a beautiful unique snowflake, or generic yet still great value. The same goes for your site, service, product or deal. We can’t control how people see us or how they feel about us, but we can control our output framing us in our best light.

img sauce

This means understanding the ins and outs of who we are and what we offer, and owning how we express this to an intended audience. On the web, it looks like you talking about stuff relevant to you and your business, describing your benefits and advantages in terms your users can understand. And doing so with a tidy version of your natural way of speaking, because this is meaningful to a human audience – and who knows when search engines will learn to filter out a cheesy or sleazy sales pitch the way people already do.

But what do I know? I’m just a nobody with a blog

In my opinion, everyone has the capacity to carry out their own good SEO. The web and search are virtual layers built upon a market made of people. Humans control the demand that websites cater to, with a search engine acting as the friend who understands you and fetches things you may need.

(circa 2012)

Earlier this year, Google added celebrity profiles to search results, based on the knowledge that this is what people typically want when they enter a celebrity name as a search query. This is more than ‘data in, data out’ – the Google engine has considered the real desire for information in circumstances involving real people.

So I believe it’s useful to get well-versed in “knowing thyself” and accurately expressing thyself with respect to the people you wish to connect with. I’m not talking about putting on the hard sell, but exercising self-observation and emotional intelligence, and getting familiar with theory of mind and empathic design. Understanding how you personally respond to sites, design elements, advertising – any sort of stimuli, really – lets you empathise with the people that search algorithms continue to work for.

Of course, this may also turn out to be a temporary fix. Who knows how much longer we’ll be human with the singularity totally on its way. 😛

img sauce

Tl;dr – Be yourself. Don’t cheese out just to hax a search engine cos they can change overnight.

The Same Colour Illusion

The Same Colour Illusion demonstrates that a design element can produce different results when placed in different surrounds.

• Yes, the A and B squares really are the same colour. 🙂

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

http://www.alistapart.com/articles/mo-pixels-mo-problems/

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.