Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

How To Sketch A New Mobile Web

The mobile Web has gotten a bum rap. It spends most of its time either in the shadow of the desktop or playing the role of the native app’s frumpy friend. Luckily, we’ve got the tools to change that. Progressive enhancement, mobile-first and responsive design can help lead us towards a more unified, future-friendly Web. That’s the good news. The bad news? These tools are worthless if you don’t have license to use them.

What’s holding us back, in many cases, is our clients and the conceptual models they cling to. If our clients are to embrace the potential of the mobile Web, then we need to get them thinking beyond desktops and apps.

Further Reading on SmashingMag: Link

The Promise Of The Mobile Web Is a Tough Sell Link

Let’s face it: designing responsively takes longer and costs more.

When we introduce different screen sizes, resolutions and device capabilities, there’s a lot more to design. We’ve got more layouts to wireframe, different gestural interactions to consider, and a broad range of functional capabilities to support. All of this packs on significant testing time as well. Still, time and expense can be justified, especially when compared to the cost of trying to retrofit device-specific optimizations onto your design. You can make rational arguments to justify longer timelines, and most companies can find additional resources when they want to. There’s an obstacle much bigger than time or cost: it’s the obstacle of change.

Change Is Hard Link

Changing the way we do things is hard. Breaking from convention is scary. As humans, we’re naturally averse to this. Saying, “Got no time, got no money” is much, much easier than investing in a forward-thinking strategy that requires a fundamental shift in our notion of what a website is. We’re battling against stereotypes that we’ve collectively created for the Web. Ask someone to envision a website, and they’ll picture a 960-pixel-wide layout, comfortably nested in their desktop browser window. Ask them to envision a mobile website, and they’re bound to think of apps. They’ll picture a simple task-based interface with limited content, minimal navigation and elegant transitions. Desktop and mobile: two entirely different beasts.

Fork in the road, desktop vs. mobile5
We continue to fracture the Web every time we prompt users to choose a path: desktop or mobile website.

Expectations Are Project Baggage Link

We need to wean ourselves and our clients off the baggage that these expectations introduce into projects. We need to abandon outdated conventions. That’s easier said than done, so let’s attack the problem head on. Below, I’ll share the methods we use to change the way people think of the mobile Web; if you have other or different methods, let’s hear about them. How do we get ourselves and our clients to let go of the conceptual models they cling to?

Rational Appeal Is Effective (Until It’s Not) Link

Begin by creating a compelling business case for a more responsive approach to the Web. Bombard your stakeholders with mobile statistics, research6 and real use cases. If they seem to be hung up on creating mini-websites with arbitrary portions of content, then discuss the fragmentation of screen sizes. Focus specifically on that murky area between large smartphones and small tablets. Challenge them to define at exactly which screen size the interface should turn on its head and snatch the content from users’ reach. If you’re able to build a strong case, you should have a room full of people who see the light and are amenable to this new approach. Until they’re not… until later when they seem to have relapsed into their old ways. Rational arguments for adaptive design will get you only so far because:

  1. You are asking people to discard a conventional system that they’re familiar and comfortable with;
  2. The concept remains abstract, creating a gap between theory and reality.

If a client can’t envision how their website will adapt across a range of screen sizes, then they’ll have trouble committing to this approach. In the wake of uncertainty, people will retreat to the security of convention.

If you want to lead clients to a new way of thinking, collaborative sketching can help shape the path.

The path to the unfamiliar seems treacherous7
When guiding clients down an unconventional path, the first steps are always easy. How do you keep them moving forward, and stop them from turning back halfway?

Use Sketching as a Form of Exorcism Link

Expectations of a design start to form the moment team members begin to envision the project. As planning and discussion go on, the mental images that take shape become more defined. This can lead to situations in which you find yourself designing for what’s in the client’s head, instead of designing for the project’s goals and users’ needs. In order to get people to accept new ideas, you need to exorcise the old ones. This is where sketching comes in. We often think of sketching as a way to generate and communicate ideas, but we can also think of it as a weapon to dismantle them. The goal of sketching here isn’t to produce drawings that inform the final design. We are not replacing the UX process. The goal is to drive out those stubborn, thorny ideas and make room for new ones.

Sketching can be used as a tool to purge ideas and reconstruct them8

Developing A Workshop Plan Link

The steps outlined below reflect our current process. Although each one has value independently, consider how they work in combination to guide the group’s thinking along an intended path. Try to continually approach the design from different angles, alternating between techniques that require the group to focus (convergent thinking) and those that require the group to explore (divergent thinking). As you do so, conflicting ideas may emerge. Embrace these points of dissonance, because they can be key to breaking stubborn mental models.

The current process of our design workshop is this:

  1. Set up, define objectives
    Prioritize the goals that everyone is working toward. Establish the rules and the criteria through which ideas will be discussed and evaluated.
  2. Stick-figure comic strips
    Set some context that exists beyond the screen. Give people a world to design within.
  3. Mobile-first
    Ask the group to focus on information hierarchy and user goals. Get the small-screen ideas (especially those thorny app-centered ones) out of people’s minds and onto paper.
  4. 6-up templates
    Introduce conflict. There is likely a gap between what the group just drew for mobile and what it’s been envisioning for the “desktop” website — explore these incongruities. Purge as many ideas as you can from the minds of the participants.
  5. Concept sketches
    Collaboratively reconstruct ideas into new models that work regardless of screen size or device.

Set Up Link

Define the website’s business objectives and users’ needs Link

Stakeholder group
Time: 30 to 60 minutes.

  1. Establish and prioritize objectives.
    Before any drawing happens, we try to set some parameters. We begin by establishing the website’s objectives, all of which we make sure can be tied back to the organization’s broader goals. Steering clear of anything that describes particular features or functionality is important. “Quick links” and “Rotating slideshow” are not objectives. We list as many objectives as we can on a whiteboard or large sheet of paper, assigning a priority to each one.
  2. Define audiences and user needs.
    Next to that, we create a new list of user needs. This information should really be drawn from actual user research and interviews. Worst case scenario, if you are not able to get any, you could draw on your clients’ understanding of the target audience and what they perceive their needs to be. Start by identifying the primary user group and listing the tasks they will need to complete on the website. If you’re having trouble coming up with a list of actionable tasks, think about questions these audience types might have when coming to the website. What is motivating them to come in the first place, and what information would be most valuable to them? After brainstorming the needs of your primary target audience, move on to any key secondary audiences.
  3. Brainstorm mobile opportunities.
    Now that you have created a list of website objectives and user needs, it’s time to start planting the mobile seed. When we approach this, our goal is to start shifting people away from the mindset that mobile needs to be an add-on or a website-lite experience. I’ll challenge the group to think about what opportunities are created when a user is not tethered to a desk. What if they’re on a couch, at work or standing around somewhere? How do the capabilities of different types of devices open up possibilities for interacting with content that didn’t exist before? The goal here is to generate a lot of different ideas, even if some of them are implausible. Get people pumped up by the possibility of adding to rather than subtracting from the website.

This exercise is not meant to be exhaustive, so we try not to spend more than an hour total on it.

Start Sketching Link

With the set-up out of the way, it’s time to start sketching. These sketching exercises seem to change a bit from time to time and depending on the dynamic and size of the group we’re working with. Counting people on both sides, we try to limit the workshops to around 10 people or just under. This allows everyone a chance to work individually, but the group is also big enough that you can break into small teams. The more clout the group has, the better. Sketches should be simple and, more importantly, fun. Which brings us to our first exercise: stick-figure comic strips.

Stick-Figure Comic Strips Link

Teams of two or three
Time: 30 minutes plus discussion.

Stick-figure comics are simple to do. Break your group into teams of two. Give each team a piece of paper filled with square panels, and ask them to draw a crude comic that depicts a member of the target audience coming to the website and ultimately completing a task. We used this technique most recently when working with Marian University in Wisconsin. To give our burgeoning comic artists a little more direction, we specified, “Begin your comic strip with a character who is representative of your target audience. Your character’s story does not begin on your website. Think of a place where the story begins. What motivates them to visit your website, and what actions do they take when they get there? What device are they using?”

In the university workshop, one team described the story of a teen who is attached to his friends and home town and doesn’t want to move away for school. He loves sports but doesn’t quite have the level of talent to play at a larger university. He’s excited to see that this university offers sports and has great student residences. He’ll be able to experience campus life while being just a short drive from home. The sketches showed the protagonist coming to the website with a purpose and interacting with different pages.

Examples of comics as a form of storytelling9
Drawing comics can be a fun way to imagine new use cases, whimsical though they may be.

These storyboard10-type comics are great because they make people turn lists of needs and objectives into narratives. Layers of abstraction peel away as participants relate detailed accounts of how they envision individuals using the website. This also moves conversation in the right direction, getting your stakeholders excited about how the website plays a role that extends beyond the screen and into people’s lives.

3-Up Mobile-First Templates Link

Solo sketching
Time: 30 minutes plus discussion.

We’ve got people thinking in the right direction: stories about people using the website. Then we’ll start to focus on the website’s interface. I’ll point to the whiteboard, filled with scribbles and notes about users and objectives, and remark that including all of that on one page wouldn’t work. After a brief refresher on the mobile-first approach, we hand out 3-up mobile templates to every person in the room and then establish which key page(s) to focus on. The challenge for this exercise is to “Assume that your user is using a device with a small screen. There is not a lot of room for complex interactivity, and you have limited space to present your content. What do you show on this page? Focus on the priority of content and the actions you want to encourage.”

With this and the other sketching exercises, keep everyone focused on the adaptability of the content, not the container.

Whereas the brainstorming and storyboards encouraged everyone to think big and to explore a wide range of ideas, this exercise is designed to rein in those ideas. The narrow page templates require people to focus and draw only the most important ideas and page elements. Many of the sketches will still look like apps at this point. This is a natural starting point and to be expected. Once sketching is complete, ask each participant to explain their ideas to the rest of the group.

3-up mobile template11
Mobile templates challenge participants to focus on important content and actions.

6-Up Responsive Templates Link

Solo sketch
Time: 30 minutes (no discussion)

If we could get through the entire sketching and design process without relapsing to age-old conventions, that would be great. But although we’ve come up with a lot of new ideas so far, we haven’t really done anything to get rid of those sleeper agents — those notions of “what a website should be” ingrained so deeply that they are bound to reemerge.

In the 6-up sketching exercise, we’ll ask each team member to take their original ideas from the 3-up mobile sketches and think about how to adapt them to different screen sizes. If new page elements are introduced, they should be justifiable and tie directly back to the user goals or website objectives established earlier. We’ve modified the traditional 6-up exercise slightly so that there’s an inconsistency between the proportions of the six panels; the boxes are still small, so that drawings stay crude. What I like about this exercise is that it encourages participants to move beyond their initial ideas and grasp for new ones. This is where you’ll see people desperately try to work in some sort of horizontal navigation bar or sliding image rotator. They are trying to reconcile their impulse to include these standard elements with the goals and stories that the group has already worked on. Of all the exercises, this one seems to give people the most challenge.

6-up template12
The 6-up template encourages people to move beyond their initial ideas and push for new ones. It can get pretty messy.

About 10 minutes in, after most people have sketched the low-hanging fruit ideas, I’ll often walk around and hand out Mental Notes (see below) to inspire participants to begin thinking about intent and the behavior they would like to encourage. When the sketching time is complete, we move directly into the concept sketches, without any group discussion.

1-Up Concept Sketches Link

Teams of two or three
Time: 30 minutes plus discussion.

If the exercises have gone well so far, people will be in a state of utter confusion. The website they were originally able to picture so clearly should now be a big cloudy mess — and that’s great! This is right where you want them. It’s like the part of spring cleaning when the house is messier than it was to begin with. In the wake of this confusion, you can begin to rebuild. Get people back into teams and have them work together on each other’s ideas. Have each team develop a single concept that represents an adaptive solution. When finished, post a large blank sheet of paper on the wall and have each team pin their drawings to it and present their concept to the group. Ask them to describe the evolution of their design. Walk through your own as well, which ideally will have also evolved beyond your original ideas. Use the paper backdrop to add notes about which ideas resonate with people or to flag parts that might require rethinking. You can then roll up the whole sketchboard13 and bring it back to your team.

Concept sketches14
Concept sketches should reflect an evolution in thinking as the initial 3-up mobile sketches are adapted and modified to take into account different-sized canvases.

Tips for Group Sketching Link

  • Pack a bag with pens, markers, pencils, paper and any other supplies you might need.
  • Show examples of everything.
  • If you are a Picasso, then intentionally drawing crudely might not be a bad idea. Make people feel like they can do it just as well.
  • Play music, because silence is awkward and it shouldn’t feel like your conducting a test. Chutes Too Narrow by The Shins and The Kinks are the Village Green Preservation Society are two pretty solid go-to albums.
  • Introduce Mental Notes15. I like to allow people to draw from a deck of Mental Notes and promise “prizes and glory” to people who can incorporate the given principles into their design.
  • No sketch is bad. The quality of the drawing doesn’t matter — drawing is thinking. Praise ideas and encourage exploration.
  • When forming teams, don’t pair up Bert and Ernie; they will only enable each other. Pair up people who don’t typically work side by side.
  • Some people won’t want to participate in the drawing. Offer to draw for them, or let them just participate in the dialogue.
  • Minimize the amount of time that elapses between sketching and delivering wireframes, designs or whatever is next in your process. The longer the span of time, the more time it gives for people to relapse.

Finishing Up Link

By the end of the workshop, everyone will feel creatively exhausted, every possible idea drained out of them. The concepts presented at the end of the day will lack the stamp of individual ownership, since everyone has had a hand in shaping them. While these sketches might not directly inform the final design, people will know that they’ve been able to contribute. More importantly, you’ll have removed the layers of abstraction that surround adaptive, device-agnostic solutions. Something that was once hard to envision has now been made much more attainable. You’ve hopefully also purged those thorny ideas buried in your clients’ heads that seem to resurface at the most inopportune moments. Collaborative sketching can help people make the leap to understanding the real potential of mobile to extend, not limit, how we interact with the Web. Fueled by possibility, they might even become advocates for more future-friendly16 approaches in their organizations. If you’ve ever been crushed by seeing a project not live up to its potential, you’ll recognize the importance of this.

There is no secret way to change what people believe or to overcome the conceptual models they cling to. We’ll always battle against stubborn personalities and decisions that seem to be driven by fear rather than strategy. Hopefully, you’ll find that incorporating collaborative sketching workshops into your client work helps you win more battles and build a more accessible Web. What techniques do you use?

Resources Link


Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20

↑ Back to top Tweet itShare on Facebook

Dennis Kardys is the lead user experience designer at WSOL. He spends most of his time helping clients understand the value of user centered design and challenging their assumptions about the web and mobile. You can follow him on Twitter or check out his design blog,

  1. 1

    Well stated and written. And very true on so many levels. Nice work!

  2. 2

    Very cool to read this article, thnx.

    I was just wandering the session of sketching is this on the same day, because your almost 3 hours sketching without any discussions? Do you block one full day of sketching, lunch, etc.?

    • 3

      Hi Bart,

      It depends on the length of time we are on-site with the client. If it’s only a couple days we will usually schedule a workshop day, where we conduct all the sketching in one day, interrupted with breaks and lunch. There’s typically some discussion surrounding the purpose of each exercise and the different design philosophies before each round of sketching, then conversation surrounding the drawings afterward. In cases where we have 3 or more days on-site, we sometimes break up the sketching into multiple days. In that case we may do some initial sketching on day 1, validate some of the ideas with users either by showing them the sketches or with paper prototypes, then use that feedback to guide further exploration of ideas on a 3rd or 4th day. Hope this is helpful!

  3. 4

    This is a brilliant article and workshop… I’m taking a course in HCI and having a need to find the resources, this would help me some guidance. Thanks!

  4. 5

    Very interesting article! One little remark: I found your suggested timelines rather ambitious if not impossible for the first part. For example in past workshops I needed at least 60minutes for defining users goals and personas, but maybe it is because you are assuming that the people in these sessions are already familiar with these concepts. Same goes with time to define the objectives and audience strategy (I would also actually do this after having defined the user goals).

    • 6

      Hi Remy,

      I agree the timelines are perhaps overly ambitious…in fact I’m finding that we’re often needing a bit more time than allotted. It’s a tough balance though, because you want to keep the drawings and idea generation moving at a rapid pace.

      Regarding the site objectives and user goal definitions, the time allotted for each of these doesn’t reflect the full time to gather this information. We’ll normally have most of this information already, drawing from our earlier stakeholder/user interviews or any other previously conducted research. Prior to sketching, we’ll spend the first 30-60 minutes posting the most important site objectives and user goals to the whiteboard. If they haven’t yet been prioritized, we’ll assign priorities to each. We’ll also give participants the opportunity to introduce any new items worth considering. Overall the sketching workshops just comprise one piece of the on-site discovery process. The full discovery process will also usually involve user interviews/observation, stakeholder interviews, and technical requirements discussions.

  5. 7

    Kevin Haggerty

    June 8, 2012 2:51 am

    This is a fabulous approach – I love sketching anyway, so having this focused plan to bring everyone together is not only fun, but a good educational tool. We have to bring people’s understanding of web ‘pages’ forward, and this looks like a good way to help do that.

    However, I disagree that designing responsively has to take longer or cost more, because I’ve built a little something that helps make it faster, called Edit Room.

    Edit Room is a web app that lets you assemble content, mark it up semantically, and then use fast, intuitive tools to design flexible HTML prototypes that can be presented and tested, and are even clean enough to be used as a kick-start for further development.

    It’s a great next step after your sketches are in hand. If you already know Photoshop, Edit Room feels very natural, but is designed specifically for the web. You can design at any width and see how your design flows and flexes while you are building it out. It’s pretty cool.

    I built it myself, and I hope that it’s helpful for designers struggling with responsive web design workflow, so here’s a link:

  6. 8

    Nice works.Thank you for sharing.

  7. 9

    Jimmy Breck-McKye

    June 8, 2012 5:43 am

    Absolutely agree that sketching is a great way to shake out unworkable ideas. In fact, I think one of the best reasons to create mid-fidelity mockups is that they very quickly expose concepts that just couldn’t exist in practice – either because the content model wouldn’t work or the design just plain doesn’t make sense. Making people draw their website at different sizes and scales is a great way to show them the issues with arbitrary viewport size triggers.

  8. 10

    Brian Walker

    June 8, 2012 5:56 am

    Excellent post! Explaining responsive design to clients can be tricky, just as it can be tricky to get your own head around all the different ways you’ll have to shuffle content around for different devices. I find once you’re able to start thinking in this way, it’s actually more difficult to go back to building static designs, as I’m constantly worrying about how it will scale on different devices.

    I’m always looking for suggestions to help with challenging clients’ perspectives on the mobile web, as well as explaining responsive design to them, so thank you for this post. I will definitely be referring back to it.

    Out of curiosity, have you had many clients who are extremely resistant to responsive design principles? How do you handle those situations?

    P.S. I also recently wrote a blog post of my own about responsive design, geared towards helping clients understand the process. I’d love to hear your thoughts on it.

    • 11

      Dennis Kardys

      June 11, 2012 6:18 am

      “Out of curiosity, have you had many clients who are extremely resistant to responsive design principles? How do you handle those situations?”

      Yes, we actually have had clients resist. It sucks when we do, because philosophically I believe that it’s often the best way to build a site. When a client says straight up, “Not interested. Not going to pay for it,” there’s not really a lot you can do. In the occasion when a client insists on “non-responsive”, we still *think* responsively, and code responsively (meaning in percentages/ems and with flexible layouts). We just comment out the media-query declarations and set a fixed width. This way we can always go back in, a month or a year later to remove the fixed width, re-instate the breakpoints, and do further performance optimization. In my experience it’s not developing responsively that’s so expensive and time-consuming, it’s all the device and browser testing.

      Also, in our proposals we used to offer clients a base price for the website and include “responsive” as an optional feature at additional cost. This resulted in it being cut more often than not. Even though the client saw the value in it, they were typically under pressure to get the price as low as possible, cutting out optional items. We no longer separate the two out. Although it has meant that our base price has gone up a bit, responsive design is now part of most every website we pitch.

  9. 12

    Darrell Hanley

    June 8, 2012 12:29 pm

    I do think that there is one screen type that is presently overlooked and will become a bigger deal in the future, namely large surface 7ft interfaces such as televisions. For the time being, we can ignore these environments without much repercussions, but with the arrival of systems like WiiU and Microsoft’s Smart Glass, we will soon enter an era where internet enabled televisions are able to rather easily browse the web. I’m sure its only a matter of time before Sony provides a similar solution for their Playstation hardware, and Google and Apple bringing similar functionality to GoogleTV and AppleTV.

    Additionally, these screens now come with a new cavat, that users will be pushing content from a smaller device, in the WiiU’s case its game pad controller, and in Microsoft’s case (and probably everyone else’s eventually) from a smartphone or tablet. This creates a challenge in that the UI of a small screen device or tablet cannot be too different from that associated with the television UI, otherwise, the transition between monitor sizes becomes jarring.

    Because of this, websites cannot remain distinctly mobile, distinctly desktop, or distinctly tv based. Rather the way forward is for responsive pages which can reassemble themselves for a variety of device sizes, mediums, and densities.

  10. 13

    Even though I’m not a web designer by job title (supposed to be senior programmer), I often find myself being the one who is forced to handle the front-end work for our company’s larger projects, ranging from mockup, to custom & reusable jQuery plugins, to plugging a finalized design into the backend. Needless to say I have a large notepad at my desk at all times. You still can’t beat pen and paper when it comes to brainstorming and problem solving.

    Sadly, many of the suggestions in this article, while completely practical, are often not able to come into fruition due to impractical deadlines and pressure from management. I know the first impression people with comfy jobs would have is that people like myself just need to find a better company to work for – but for the 90% of developers and designers out there (including myself), it’s all we can do (even at the senior level) to convince management that a team needs paid for a half day’s worth of sketches and brain storming, regardless of how much time we think it could save down the road.

    This is further complicated by the fact that many designers are still having trouble convincing management of the importance of responsive/progressive design.

    • 14

      I have a suggestion you might want to try:

      See if you can schedule a “workshop” with your team… say it’s for team development. During your workshop, go through the process listed here (or something you can accomplish in half a day at most to keep the wages down), and do what you can to have some decent “deliverables” that you can show to your managers at the end (even better, include them in the workshop so they experience it first-hand).

      I wouldn’t recommend using a real world client project, as you are trying to go under the radar here, you need to keep up the facade of “team building”… just make up a project that will serve the purpose.

      You will be able to show the value of doing the sketching activity, and may change a few perceptions of the value of the process. Worst case scenario, you will have a great afternoon of team building.

      From my experience, it’s not the cost managers are concerned about per se… the client will pay whatever is agreed to, and a contract is a contract…

      Remember, your managers/salespeople are on the hook to explain value of every line item, usually in-person, to the client.

      Imagine if you had a limited understanding, and/or were not comfortable enough with a process that cost x amount of money… how enticed would you be to explain the idea to a client who’s first words may be: “You spent my money doing WHAT?!?!”. You’d likely rather kaibosh it with your internal staff, as you don’t have to explain why, you just have to say it costs too much.

      What you need to do is make it so that your managers have a firm grasp of the value and can explain the cost/value to the client if/when the client asks. I have found that limited understanding of the value of the sketching/ideating process makes it much harder for a manager to “sell” the idea as something they are willing to consider adding to the cost mix.

      If you give it a shot, tell me how it works out!

      • 15

        Dennis Kardys

        June 12, 2012 8:29 am

        Great suggestions Dave, and I think Heri has hit on a really tough predicament designers and developers often find themselves in. Some additional tips I could suggest would be:

        – Start off informally including sketches and snapshots of whiteboard drawings along with any project documentation to help articulate objectives and firm-up design direction. Get people used to having conversations around drawings instead of just bulleted lists and excel docs.

        – If you can’t change the processes yourself, try to win over an internal champion with more clout, who can advocate for these techniques on your behalf

        And finally, go GUERILLA! The book “Undercover UX” by Cennydd Bowles and James Box describes fantastic, pragmatic ways of implementing UX techniques when you don’t have time, budget or approval. I believe Russ Unger (co-author of A Project Guide to UX) and Todd Zaki Warfel also have a new book coming out all about Guerrilla Research methods.

        Who says you need approval to sketch?? :)

    • 16

      Dennis Kardys

      June 12, 2012 8:46 am

      For those of you struggling to get approval for these types of techniques, or if the group you are with is resistant to drawing, here’s a dirty trick you can use to hijack almost any meeting and turn it into a sketching workshop:

      Take any concept a stakeholder (or boss) is trying to articulate. If the concept is being scrutinized or under debate, even better. Casually walk up to the whiteboard and totally (but intentionally) misinterpret what they are saying with a sketch. Then eagerly ask: “You mean like this, right??”

      Then sit back and watch people start fighting over markers, determined to correct what you’ve just done.

  11. 17

    Great article. That’s it.

  12. 18

    “Focus specifically on that murky area between large smartphones and small tablets.” Why would you do this if there are only a few devices of these sizes?

    If you are on the go, you want small. If you are browsing at home you want big. Who wants to put a 10″ phone in their pocket?

    Focus instead on the actual sizes, scenarios and user experience design as it applies to the real world. Yes, of course, you should not hide content from your customers, but you should also be aware that most of the people are browsing your site on their phone for a similar reason, one different from what they might do at home, work or on a laptop.

    • 19

      Dennis Kardys

      June 11, 2012 6:56 am

      Hi Greg,

      I actually disagree about the assumption that mobile = on the go, and home = wants big.

      The Samsung Galaxy Note (a smartphone) has a 5.3″ screen width, and a 5.78″ overall width. Pretty large for a handheld. It’s cousin the Galaxy Tab is a small tablet, but with only a slightly larger screen (3.54″ x 6.05″ Display Size). When we are measuring the difference between web enabled smartphones and tablets in fractions of an inch, I don’t see how we can impose stereotypical use cases. Most of the data that I’ve seen shows that people are browsing the web on their smartphones… on the couch, in the bathroom, and even yes: on the go.

      It’s my firm belief the real world scenario is:
      -fragmented screen size, with overlap between smartphone/tablet/laptop/other.
      -no overarching distinct use cases (though specific sites may reveal specific use cases)
      -a trend toward further fragmentation not increased consistency

      I believe we need to think about how a design can exist and adapt beyond the popular screen-sizes of the season. A good (web) design is not contingent upon a device, and as such should be able to outlast that hardware that supports it.

  13. 20

    George Michelis

    June 9, 2012 1:35 pm

    Very detailed article, useful for people interest with mobile/desktop dilemma or for people wanting to balance both, efficiently to achieve the best results out of good initial design phase. User experience is important so this article adds value to that!

    Nice article!

  14. 21

    What is great about sketching, is that everybody can do it. You don’t have to be an artist to sketch something. I’m a developer, my sketches are not beautiful, but they are a very effective communication tool between me and the designers in my team.

    I believe sketching should be a fast, iterative and fun process.

    We are working on a web app ( for organizing UI sketches, link them together, simulate the UI flow and get feedback from your teammates, or client.

    We are launching it really soon, but you can subscribe now for early access at: We would really love to have you on the board when we launch.


↑ Back to top