When you’re working with mockups to test your ideas, speed is crucial. You don’t want to spend days working before you can gain valuable feedback. For that reason Photoshop is often ignored in favour of sketches and wireframes. Using Photoshop, however, to create high fidelity prototypes doesn’t need to be time consuming. Many of the components graphic designers use are freely available on the web and can be quickly remixed to create almost any interface. In this article I’ll walk you through a process that enables you to mock up high fidelity prototypes in a matter of hours instead of days.
Before you begin
To make this work you need:
Grids make it easy to make decisions on what to place where. One of the most popular grids in the 12 column 960 grid that you can download from 960.gs. Pick the psd file from the zip and use it as a starting point for your document.
Add a little more character to your mock-up by using one of the quiet patterns from Subtle patterns.
Bonus: how to make a pattern in Photoshop.
Use Font Squirrel to find a typeface that will give your site a bit of extra character. You can use it for the logo and important headers. The rest of the copy can be in Arial or Helvetica and you can use Lipsum to quickly generate some copy.
Bonus: more on selecting typefaces.
If you look at Dribbble you see that some people are obsessed with creating interface elements. Luckily a group of these people has made their work available for free. You can find many of these elements on 365psd.com.
If you’re looking for some great photos to add to your mock-up, the easiest thing you can do is go to Flickr’s advanced search and check the ‘search in Creative Commons’ photos box, for example these landscapes.
By using a service like InvisionApp you can easily connect your screens and click together a prototype.
Linked two screen together in the Invision app, you can try it here.
Finally you can download one zip with the grid, 5 backgrounds and 5 fonts via this link:
Download the mockup template zip here
Let me know how it goes, and leave a comment if you know more great resources.
This post originally appeared on London-IA.com in February 2012
Lean UX – getting out of the deliverable business by Jeff Gothelf
Jeff Gothelf, formerlly director of UX at the Ladders and currently principal at Proof, an innovation studio in New York, has already made some furor with his concept of Lean UX. In the past we had only his slide deckto rely on, but last Tuesday Jeff finally made his UK debut at London IA.
Jeff’s Lean UX story starts with a retrospective. If Lean UX is such a good thing, then why aren’t we all practising it? Jeff states that long, long ago, there was a world with very young information architects, where every trade had their own deliverables –some had reports, some had code and others had excel sheets– but the young discipline of IA had nothing, nothing but wireframes. In order for IA to claim a seat at the table, the wireframes were used to represent IA. For a while this approach was successful but the good times didn’t last. Web projects became more complex, and in line documentation kept on growing and growing. We now have reached a point where projects are so complex and situations so unpredictable that it becomes impossible to describe them with documentation. Something has to be done.
As a remedy Jeff proposes Lean UX, where real experiences are continuously tested and where people work together towards great experiences in a shared understanding of the problem.
Jeff explains Lean UX in 5 points:
1. Solve problems together. Business, marketing, development and design should start actively collaborating on solving business challenges. Working collaboratively leads to a shared understanding and more motivated and invested people.
2. Sketch. The common language, the thing that everyone gathers around, should no longer be spec documents but sketches. They can become the initial artifacts that spark discussion and create a shared understanding. And because they are easy to make, no-one is too invested in their own ideas, and they can be easily thrown way.
3. Prototype. In line with the Lean Start-up concept, prototypes are seen as a great way to create validated learning. Due to their interactive nature they allow for easy validation, and quick iteration.
4. Pair up. Cross-functional pairing is another pillar to the method. When designers work directly with developers they both start out with a shared understanding of the problem. Developers can start working on the things that are hard for them, whilst designers can focus on the more complex interaction challenges. Pairing creates mutual trust and deeper investment. Jeff mentioned using firebug as a tool that allows developers and designers to work together in an agile way.
5. Style guides. In order to live without massive specs, some documentation cannot be avoided. Jeff opted for the idea of a living, breathing style guide, that allows developers to quickly look up which style comes with ‘main call to action’ and designers to check if there are existing code patterns that could be reused.
Jeff continued by dealing with some of the critiques and challenges of the Lean UX approach. In order for it to work we need to get rid of this idea that designers should get it right the first time and it should be the designers and not the spec document who are in control. To create buy-in and shared understanding it’s important that everything is open and visible. For people who are used to working towards a certain amount of perfection in their deliverables the Lean method will at first feel a little uncomfortable, but as Jeff stated, how can you aim to make the best product when you don’t know if you are working on the right product? It’s successfully solving problems and creating value for our clients (and users) that should be our focus and not the creation of beautiful deliverables.
Q&A and Discussion
The second part of the evening was a panel discussion with Johanna Kollman, Leisa Reichelt, Jeff Gothelf, James O’Brien and Mark Plant, and Jonty Sharples as the host. Based on questions from the audience, they discussed how it’s possible that while everyone agrees with the premises of Lean/Agile –less waste, shared understanding, focus on the end results– a more lean way of working still seems to be far from common practice.
Several reasons were discussed.
Economical: many of the larger agencies are actually in the deliverables business and get good money for delivering wireframe decks. Also there’s an initial cost of changing to a new method. This might only change after clients themselves become more agile too; to achieve this, Johanna argues, there need to be internal stakeholders or embedded teams.
Trust: to become more agile people have to trust each other, Leisa argues that it’s almost impossible to do Agile in a situation with 3th party developers. If you haven’t build up a relationship with your client they will most likely go with a competitor who claims they can deliver on a fixed deadline and fixed budget, and will see your agile approach as too risky.
Technical: creating a living and breathing wiki style guide takes time and effort. How do you integrate such a thing in your organisation? Jeff suggests choosing someone as the owner of the wiki, and if it also includes code snippets, to co-own it with development and have a dev-owner too. James argues that instead of using a wiki, patterns should be printed out on the wall, and a css-preprocessing language can be used to store all the default styles.
Social: getting agile to work means spending more time talking and explaining things to colleagues, not everyone is up for that. Also here it is possible to start small, make some of your process or some of your team more agile, and let everyone slowly get used to shared responsibility and shared ownership.
Experience: no-one would argue getting agile to work is easy, it’s best done by people who know a rich set of tools and methods to adjust their process to the problem (and not the other way around). Mark argues that it’s impossible to force people into an agile way of working, they must want to work that way, and Johanna wonders if mentoring and show’n’tell is a good way to distribute Agile knowledge.
Psychological: Agile can be a painful process for perfectionists. Visual designers in particular protest against losing their time and ability to do large pixel-perfect design upfront. James argues that the agile process forgets quiet places and time for reflection. Developers have refactoring time, where they clean up old code, and designers should claim this time for themselves too. Another element that Jeff brought up is that designers are used to being applauded for the beauty they bring into the world. Agile, and its focus on the end product, however, has no room for individual heroes and only works well as a team sport.
Somewhere towards the end, Leisa wonders if we’re just finding endless new ways – Agile, Lean UX, goal directed design – to rename what should be known as good design? And this sentiment also resonates with others, was this evening just another version of our yearly agile versus waterfall debate or is there something new under the sun? What is certain though, is that we are moving towards a more complex and uncertain future, and that we need all the ideas we can get to stay in control of our technology. This evening at the Sense loft was therefore an evening well spent.
Prize-winner and starchitect-in-denial, Rem Koolhaas and his studio OMA have created a method and practice that is uniquely capable of dealing with an ever more complex world. Interested in what this could mean for digital designers I started digging into their design process, in this article I’ll discuss my findings.
When asked once what his goal with his practice was, Koolhaas answered: “to keep thinking about what architecture could be. What I could be.”¹ And it is this ‘could be’ that plays a defining role in Koolhaas’ career.
Rem Koolhaas studied scriptwriting and architecture and is heading OMA/AMO, an office he co-founded in 1975. You might know him from his books Delirious New York or S, M, L, XL and his practice from the CCTV HQ, Casa da Música in Porto or the Central Library in Seattle.
It is not easy to define Koolhaas. Although his buildings can be found all over the world, it’s hard to recognise a typical Koolhaas building by visual appearance alone. To define Koolhaas you have to move to his realm, leave the world of bricks and steel, and enter the world of images, models and processes, a world of ideas. Not what is, but what could be.
His buildings and his books do, however, have something that makes them recognisable as a product from OMA. A product that is very much influenced by the process of creation, a bottom up, labour-intensive, research-lead way of questioning everything. His products are assemblies, where Koolhaas refuses to give any easy answers, and instead reveals a selection of evidence and demands from spectators to form their own interpretations.
Koolhaas’s greatest achievement is therefore not a building or book, but a system that is capable of harvesting, questioning and producing ideas. What Koolhaas has built is a very large version of himself, a system that, through a method of researching and building, is capable of reliably creating beautiful and intelligent ideas on how the world could be. In this article I want to discuss the system that Koolhaas has built to get in that position and how he manages to remain at the forefront.
It is clear that our old model of the world as a complicated (but classifiable and ultimately comprehensible) system no longer matches the things we see happening around us. Where did the economic crisis come from? Why are there riots in the streets? No amount of logic seems to bring the answers. Luckily a new model is in the making: the idea of the world as a complex adaptive system, where small things can have big implications and where large things can have hardly any implication at all. Welcome to the world where, as Kevin Slavin suggested, we can no longer read the algorithms we’ve written.
Within this new world, Design of Understanding tried to answer two questions:
1. How do we begin to understand our current world?
2. How do we begin building our future?
1. Understanding the world.
Gill Ereaut of Linguistic Landscapes proposed an interesting method of understanding the inner workings of an organisation: through looking at the internal language of a company. How are departments called? What job titles do people have? Which words are used in emails? All these small signs create a rich insight into the hidden ways of corporate thinking. If this internal language and these silent assumptions are not addressed, a change of corporate strategy is guaranteed to fail. Ereaut mentioned that in many cases companies came back to her every five years because they had managed to recreate their own problems. If you want to change a company’s path, if you want to follow a beautiful new strategy, you need to address the unspoken rules and the silent assumptions. In short, you need to look at the language, because it is language that constructs the world.
Tom Armitage offered a different way of creating models of the world. In his talk on game design he explained how games can serve as a model for the world at large. If we want to understand a game, we often just start playing it, thereby testing our assumptions against the unknown rules of the game. It’s only through playing that we slowly uncover the rules within the black box. Well designed games are unstable games where not all rules align; for every two rules that reinforce each other there is a third one that creates friction. It is this friction that makes it fun to play.
To understand our current world therefore it is not enough to come up with new theories. To understand it, we must play and keep on playing. Because only through play we will able to slowly reverse engineer the process in the black box and discover opportunities for new approaches.
2. Building the future.
Timo Arnall of Berg made a case for the use of film as a medium to bring the future closer. Film, if done well, is powerful in unpacking actions over time and allows insight into complex emotions. More than any other medium, film gives you a bodily experience of what you see. This makes it a powerful medium for testing ideas before they are made. The touch screen in Minority Report is a good example of a cinematic interpretation that made touch screens look desirable long before they were commercially possible.
The challenge of making people enthusiastic for new technology is also something that Alan Patrick dealt with. He sees hypes and bubbles as unavoidable, and even as a positive phenomenon for new technology to cross the chasm between early adopters and early majority. It’s thanks to the madness of crowds that so much money was pumped into ICT, the Internet and social media, and although much of this money evaporates, in the end we do manage to have better technology.
For me Dan Hill‘s talk was the best of the day, he took all that was good from the previous talks and pushed it forwards. In his work as strategic design lead at Sitra, the Finish organisation for innovation, he deals daily with the challenge of changing the country for the best, whilst avoiding all pitfalls that come with change. He used Wouter Vanstiphout‘s idea that the only way to change cities is by changing the system that governs them, and used the metaphor of dark matter to explain this. Like the universe, our world consists for 90% out of dark matter, a thick layer of rules, regulations, ideas, habits and codes that, although invisible, make our 10% visible world possible. To start changing this invisible world of dark matter, Hill proposed the usage of Trojan horse strategy. A Trojan horse or a McGuffin is a token that is built not for its own existence, but for the sake of understanding and changing the world in which it has been brought to life. Through cycling this new object round after round through the dark matter, slowly the invisible starts to reveal itself (also a theme Tim Arnall and James Bridle). Once the outlines of the dark matter have revealed themselves, experiments can be created to explore the possibilities of altering these lines.
It’s here that the world of games and the world of dark matter start to come together and make a clear statement: the only way to start understanding complex adaptive systems is by starting to play with(in) them. And the only way to change them is through many rounds of slow iterations.
At dConstruct 2011 cyberspace was declared dead. Gone are the days when we dreamed about walking in second life, uploading our brain to the net and leaving our bodies behind to float forever in an infinite virtual space. Now we’ve abandoned the long stairway to cyber-heaven, where do we find ourselves? After scaring people for too long, technology has begun to hide itself. First it shrunk clunky boxes into shiny objects, then it transformed winding cables into waves of air. Suddenly it was behind our walls, underneath our floors and our offices and kitchens, and one day, without anyone taking notice, it jumped into our pockets and has not left us since. How do you design for a world where not life, but technology has become virtual, something that can do and be anything you can imagine, but that in itself has no particular shape or place? The answer is both complex and simple. It’s a lot like living in the old days: we share stories and create memories, we hang out with our friends and family and try to make sense of the world in which we live. But it is like living in the new days too, every object has its virtual doppelgänger, every move turns into data that can be tracked and traced, at any place we can connect with anyone and anything else. In a way technology has become more like ‘the force’ – an omnipresent faceless power that can be tapped into at any moment to use for… to use for what?
One day a small itch visits you, a feeling, a hunch of something that could be changed. You start exploring what it might be, how big it is, what is part of it, what doesn’t fit, which edges are too far to see. Slowly the hunch starts to transform into an idea. First it’s very rough, its contours merely visible, then, after you beat, torture, inquire and polish it, it starts to unveil some of its potential beauty. It’s translated into another language, documented, sketched and presented. You invite people from all of the world to test and try the idea, to punch it, to build upon it, to take it for a walk or for a wild bus ride down the country side. Slowly the idea starts to alter reality, in corridors whispers can be heard, folded notes pass from hand to hand, it gains momentum, it shows up in books and presentations, children shout its name and grown ups discuss it over coffee. It starts to change the world, cathedrals and shopping centres are erected in its name, magazines and tv hosts spew it out in an endless sea of words, images and objects. For the idea this is the sign that it has to move on, it has done its duty and is free to float again, above the roofs and squares of the old city it flies until it has found yet another sleepless night.