Menu Search
Jump to the content X X
SmashingConf London Avatar

We use ad-blockers as well, you know. 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 London, dedicated to all things web performance.

How To Think Like An App Designer

There’s more to designing mobile apps than meets the eye. The task requires a deep knowledge of devices, and it often means changing the way we think — even if that means leaving behind much of what we’ve learned from designing for the web.

App Designer

I started my career like many designers: working on print design projects. Shortly thereafter, I discovered the world of websites, which fascinated me and became the focus of my work for some time. Along the way I learned concepts related to interaction design1 and user experience2, which I hardly knew existed until then.

Further Reading on SmashingMag: Link

At some point I felt stuck in a kind of repetitive work cycle: I had found a formula, an almost surefire way of designing, that enabled me to deliver each new project more easily and quickly than ever before, but in some way or another, all of the designs looked similar. It was then that the first versions of iOS and Android were released.

Thereafter, looking for a breath of fresh air, my life took an unexpected turn, focusing me on something that seemed completely different: mobile app design. That was what I needed, a real challenge. I not only had to learn new things, but somehow had to forget part of that magical recipe for designing websites that I had been using till then.

A few years after that aha moment, just days ago in fact, the design community met the launch of new apps for Apple’s smartwatch with mixed emotions. On the one hand, seeing a device that offers a world of new design possibilities is exciting. On the other, the challenge of understanding a medium with unprecedented interactions and use cases is daunting.

It’s not the first time we’ve seen a device like this on the market. But as new technologies that require new design approaches appear more and more frequently, we will have to adapt6 at an increasingly quicker rate.

Apple Watch7

New device categories, like smartwatches, force designers to constantly learn new design paradigms. (Image credit: Apple8) (View large version9)

Of course, the first big push came nearly 20 years ago, with ubiquitous Internet access, which ushered in the first websites. Before then, most designers, like me, focused on print, and the arrival of the Internet required us to learn how to design for an interactive medium. The user had become much more than just a spectator.

The transition was harder for some than for others, and that’s why so many websites of the time looked like signs with buttons on them — designers didn’t immediately understand the characteristics of this new medium.

Apps that look like a mini website10

Apps by the BBC (left) and Hertz (right) look like websites more than native apps, and they omit some mobile design conventions. (View large version11)

The same thing is happening today with apps. One often comes across applications that look like mini-websites: They’re constructed as web pages “translated” for smartphones, and in turn, they fail with contrast, font size, touch targets and gestures. They also miss the mark with who will be using the app, where and on what devices.

When designing for mobile, escaping from a web structure is imperative because it can work against us. We have to face projects with a different mentality and fully comprehend the mobile devices12 in order to take full advantage of them and deliver delightful experiences.

So, what do you need in order to be an app designer? Beyond knowledge and tools, you need to change the way you think. Below are a few recommendations for adapting to the world of app design.

Change The Way You Work Link

Hundreds of apps are entering the market at this very moment — you’ve got no time to lose.

As professionals, we can no longer afford to spend weeks or months on detailed fancy designs before launching a product, only then to realize that other apps have already solved the problem (and most likely solved it in a similar way).

This is where lean UX13 comes in, a way of working in short quick cycles. The approach entails continual iteration on design and development, keeping one single focus in mind: that nothing is certain until users try it out.

Lean UX cycle14

Lean UX is based on constant iteration in a never-ending cycle. (View large version15)

Thus, app design can’t begin with interface design in Photoshop or Illustrator. It has to start before that, with wireframe-based prototypes and basic designs. That way, if change is necessary, it will take moments — not months — to apply.

Beginning with the visual design is a normal tendency for designers: That’s the stage that is usually most interesting to us. In some way, we also got used to working in this way because it was the only way possible.

Recently, in speaking with many designers, most look at me with surprise when I recommend that they start working on projects without even using the computer, but instead by simply drawing on paper. It sounds so natural that we often forget it’s even a possibility. Designing like this has proven to be very useful in preventing us from thinking in terms of variables (such as the size of the design document, colors and fonts used, etc.) — variables and details that can actually block our creativity when we are starting a project.

Personally, I find sketching on paper to be much more useful because we focus only on the idea and the problem to be solved, without falling into the trap of considering design details, or at least not in that first stage.

Mobile first16,” or starting with the small screen, is also a good strategy to employ. Even if your app will run on both smartphones and tablets, beginning by designing for the smaller phone is more effective. Starting the design process from a mobile standpoint forces us to prioritize, choose and above all alter our mental structure, which is accustomed to the larger screen of a desktop computer as a general point of departure.

Mobile First Process17

“Mobile first” is based on designing for the smartphone as a starting point, before moving to larger screens. (View large version18)

The first time I started a project this way, I almost ended up with a headache. Perhaps it’s a similar situation when you go to the gym for the first time; muscles that you haven’t used for a while start to hurt, due to the effort of working differently. If you haven’t done it yet, try it some day. You’ll notice how your priorities change, and you will sooner realize what are the truly important things in your app, the things that are indispensable.

You could also draw a parallel with travelling with luggage. If you have a small suitcase, what should you bring? You’d bring the most important things, of course, the things you are sure to need during the trip, and leave everything else behind. Believe it or not, this ordinary example is similar to what happens when we design for a smartphone.

Learn From The Other Half Link

The success of an app depends on both the designer and the developer, who must work together to innovate and achieve the highest level of quality. To accomplish this while working efficiently, you can shorten iterations by working in parallel. For this to work, you must both be conscious of the complexities of the design as well as of the actual implementation.

One way to do this is to learn to use development tools, not necessarily to develop apps from start to finish, but at least to build screens that can be transferred quickly and faithfully, while accurately communicating the design’s intent.

Explanining what a bottleneck is19

I was the only designer, and many developers were waiting for me to finish, resulting in a bottleneck. (View large version20)

Shortly after arriving in Barcelona, I started working at a tech startup. I was surprised to find that I was the sole designer there — I was literally surrounded by developers, and at first there were a lot of bottlenecks because everybody was waiting for me to finish my design work in order to continue their own.

With time, I learned how to use tools such as Xcode21 and some basic programming languages. These enabled me to make more complex proposals and to work at certain moments at the same pace as the rest of the team.

After a while, once I had been with the company for months, developers learned the way I work, too. They would now open my design documents directly and would know how to export design assets without my help.

Finally, I would like to teach you a little trick: Learn to use the same terminology as the rest of the team. Doing so, you will feel that everybody in the office speaks the same language. Designers and developers often refer to the same thing but in different words, which makes understanding between parties more difficult.

Recognize The Value Of Teamwork Link

Going back a bit to the previous topic, teamwork goes far beyond sharing office space. It entails collaboration between roles and constant communication. Lean app design entails putting an end to cascading processes, where the work of one individual begins where another one’s ends.

But in practice, most teams have settled into an efficient hybrid process, with developers following an agile22 methodology (working with a goal to accomplish by a specific deadline) and designers following a lean23 one (rapid iteration, usually without a specific deadline).

While there is still a vestige of a “cascade” (or waterfall) here, with designers usually working just a bit ahead of the rest of the team, developers can certainly start without waiting for every design to be ready.

That’s why an app designer must recognize that their coworkers — especially programmers — are allies, not enemies. Understanding one another and growing accustomed to working together will lead to a better, more synergetic result.

We are often afraid to share our work. We tend to be somewhat defensive of the reviews and comments that may arise, especially coming from fellow designers. The truth is that many of the things that others say are vital to improving our proposals, including feedback from those who do not have a design background, such as programmers. Their vision, generally more pragmatic than ours, can provide a good balance.

People in a company I visited a while ago told me that designers and developers work on separate floors, communicating through various systems of instant messaging. I suggested that they try something else: Designers and developers who work on the same projects should try sitting all mixed together. A few months after that, they told me that the quality of their products had dramatically improved, as did even the relationships between team members.

Use Various Operating Systems Link

When you’re designing a mobile app, you can’t just use your own phone for reference. If your target is the global mobile market, you’ve got to have access to at least Android, iOS and Windows Phone devices and grow accustomed to using them constantly in order to fully understand how to resolve different design scenarios on each platform.

The truth is that the world doesn’t begin and end with the iPhone. So many designers limit themselves to iOS, and when the time comes to design for Android, they just translate — often almost literally — the original app.

Examples of patterns in iOS, Android and Windows Phone24

A simple navigation resource like tabs is used in different ways on iOS, Android and Windows Phone. (View large version25)

Interaction patterns (i.e. established solutions to problems of design) are different on each operating system. As such, designers must alternate frequently in order to assimilate them and use them correctly.

To name just a few examples, the location of tabs, how to show menus, and when and how to display primary and secondary actions vary on each of these mobile operating systems.

To learn the different patterns on each mobile OS, here’s a practical exercise you can follow: Download and install the same app on various operating systems, and analyze their distinctions and similarities critically; the patterns should be different. So, if you find that an app looks and works practically the same on iOS and Android, it’s possible that something has not been done correctly on one of them.

Instagram on iOS and Android26

Instagram’s app looks suspiciously similar on both iOS (left) and Android (right). The developers seem to have ported the app to Android without following some basic interaction patterns. For example, tabs in the Android version should be in the upper part of the screen. (View large version27)

Moreover, continually looking at and trying out other applications is a great way to discover how to solve your own interface problems. For example, many times when I feel some sort of a creative block and don’t know how to fix a problem, I’ll start playing with my phone, carefully analyzing the apps to see their approach to the problem I’m facing.

If you don’t have a phone near you, you could check websites such as Pttrns28 (for iPhone), Android App Patterns29 and Windows Phone UI Design Patterns30, which have plenty of examples that might be useful to you.

Prototype Everything Link

An agile methodology requires understanding how something will look and function prior to implementation. Likewise, prototypes help us to evaluate (via user testing) an app’s usability. Ideally, we would not have to wait long before building our first prototype.

Palm Pilot prototype31

A prototype could be as simple as a piece of wood with a piece of paper on it, as in the case of this Palm Pilot prototype. (Image credit: Computer History Museum32) (View large version33)

Few of us probably remember the Palm Pilot34: One of the first prototypes was a simple piece of wood with a sheet of paper on it with the printed design of the interface. Employees would carry the prototype in their pockets as if it were a real device.

For what it was intended to test — size, weight and comfort of use — that prototype was more than enough. The point is to determine the extent to which it’s necessary to design in order to test what you have in mind, and then get down to work!

Numerous tools exist for prototyping and even viewing a design on smartphones as though it were a finished product. That being said, a prototype has to do more than just show a static design; it must also include images, transitions and gestures.

Using POP35

POP enables you to take pictures of paper designs and build an interactive prototype in minutes. (Image credit: POP36) (View large version37)

Choosing the most appropriate tool will depend a lot on your workflow, what you want to achieve and the result you are expecting. For example, I often use POP38 when I have no more than simple wireframes drawn on paper. With this app, I can take pictures of designs, then add gestures and transitions — quickly and easily!

But when a concept is more advanced, I find it more convenient to work in design-specific software, such as Sketch39, and then build a prototype using Marvel40, Flinto41 or InVision42, making for a more polished prototype. (Note that sometimes one tool is not necessarily better than another. Choosing among them will partly depend on which you feel most comfortable with. However, if you’d like to learn more about prototyping with Sketch and InVision specifically, Smashing Magazine has you covered43!)

As mentioned, a ton of prototyping apps44 are out there, so many that I decided a few months ago to create a small website, Prototyping Tools704745, that lists all of them that I am aware of. The website provides an overview of which features each tool provides and so should help you choose one. (website screenshot)46

My personal project, Prototyping Tools704745 (View large version48)

On the other hand, be aware that operating systems like Android — with its “material design49” — are bringing more focus to micro-interactions50. Prototyping micro-interactions is the responsibility of many designers today. (A tool like Keynote51 enables you to prototype these kinds of details with relative ease. Keynote’s Magic Move option comes in handy here.)

Don’t Trust What You See Link

When designing for the web, it’s possible to watch a design come to life as you work. But with apps, you have to test on a mobile device in order to see how an interface will look (and function). Above all, such testing is imperative for choosing contrast and sizes.

Tools for both Android and iOS will help designers view their work on mobile screens with varying resolutions and densities. For iOS, one of the most well-known options is LiveView52. Another, the one I use most, is Skala53 (available for both iOS and Android), which comes with a desktop version that you can use on a Mac. If you use Sketch, you could also try Sketch Mirror54.

Unfortunately, a tool of this kind is not available for Windows and Windows Phone (at least not that I’m aware of).

Using Pixate55

Pixate has an app that connects with a computer to show previews of a design on your phone as you work.Pixate) (View large version56)

In my workflow, I always preview a design on my phone to be sure of how it will look before taking the next step. Likewise, I usually start designing for one operating system at a time, and always with the phone close to me most of the time. That way, I can frequently review how my work will appear on that screen, and from the moment the first wireframes are ready, I can be sure that the sizes (of graphics, text and touch targets), contrast and colors will be the ones I’m expecting. If you don’t do this, you might notice it later, when making changes and corrections would require much more time.

Also important, start working with a design document that is the same size (in width and height) as the phone on which you are previewing your work. (Note: If you are designing for different screen sizes, then keep in mind that pixels are no longer the best way to measure sizes, because they change from one OS to another — for example, see the difference between points57 on iOS and density-independent pixels58 on Android. This forces you in some way to fully understand the differences in how to design59 and how to treat images in the current mobile landscape.)

Once your designs have been implemented by the developers, check how the app looks and performs on different phones and OS versions, and not only in the best phone you have next to you.

Design Humbly Link

App designers must abandon the concept of creating something final. An app is never finished, because it’s a digital product that evolves over time. For this very reason, we can’t approach interface design with a definitive stance. The truth is discovered through usability testing and deciphering what problems users encounter.

Sometimes we designers tend to think that when a user makes a mistake using an app, they are at fault, thus freeing us from all liability. The truth is that we more likely have done something wrong.

Detecting problems (and discovering our mistakes) isn’t a bad thing. Rather, it is an opportunity to learn and correct our work, thereby improving it and building something that’s easier to use. We must approach design with an attitude of humility.

In one company where I worked, every time I told my boss that I had finished a design, he would ask me, “Have you tested it with users already?” I hadn’t always tested it yet, but in the end I incorporated it as a habit, and each time I tested, I went in ready with an open mind, willing to see what problems I would find.

This can only be done if you are mature enough to accept your mistakes and learn from them. It’s difficult, but if you succeed it’s really worth it.

Stay At The Forefront Link

The amount of information out there makes it nearly impossible to stay current on everything when designing for tomorrow60. Nevertheless, as app designers, we must stay engaged and curious about what’s new and what’s to come.

This includes trends in app design, as well as new versions of operating systems. Like it or not, we have to install new operating systems and stay ahead of the curve in order to see where app design is headed.

One good way to get valuable design information is by reading official design guides for the latest OS versions. You can also learn from industry leaders, like Josh Clark61 and Luke Wroblewski62, to name just a couple.

Staying on top of things also means trying tools that simplify design and make our work more efficient63 as they come onto the market. We can’t be afraid of getting out of our comfort zone and abandoning our old ways of working and designing.

Sketch UI64

Sketch is a relatively new tool, and really easy to use. (Image credit: Sketch65) (View large version66)

Along these lines, a while ago I finally dared to use Sketch. It was a bit hard at first, because it meant learning something new from scratch, when — I have to admit — I was already comfortable (sort of) using the tools I already knew.

A few months later, I now realize that this software has quite a gentle learning curve. It saves me time and enables me to work in a very agile manner — and all of that has been a reward for being willing to learn something new.

Conclusion Link

At the end of the day, changing one’s mindset to adapt to apps comes from the inside. No one will force you to do it. If you don’t adjust, you run the risk of becoming little more than an icon factory, just a small step in a larger process of design.

Above all, designing apps requires a new way of thinking. It’s time to leave our web design boxes and to understand smartphones, tablets and even watches as separate and distinct devices. It’s the only way to truly design complete, comprehensive mobile experiences.

Additional Resources Link

(mb, al, ml)

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
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49
  50. 50
  51. 51
  52. 52
  53. 53
  54. 54
  55. 55
  56. 56
  57. 57
  58. 58
  59. 59
  60. 60
  61. 61
  62. 62
  63. 63
  64. 64
  65. 65
  66. 66
  67. 67
  68. 68
  69. 69
  70. 70
  71. 71
  72. 72
  73. 73
  74. 74
  75. 75
  76. 76
  77. 77
  78. 78

↑ Back to top Tweet itShare on Facebook

Javier Cuello is a UX designer specializing in mobile. Currently residing in Barcelona, Javier has worked on app design projects for companies like Zara, Telefónica and Yahoo. He is the co-author of Designing Mobile Apps.

  1. 1

    Smart post! The points you make about fundamentals like sketching and collaborating with developers are spot-on. One thing I struggle with is *how* different apps should be from platform to platform. Maybe it’s because I’ve read too deeply into both the iOS and Android guides, but I feel like I agree that even beyond basics like the navigation bars that iOS and Android apps shouldn’t look identical. This is especially true now with Google being super clear with their Material Design guidelines (two years ago, the Android world was kind of like the Wild West).

    So, I think these apps should be sufficiently distinct. It’s important for a lot of reasons, but mostly because users stay within one ecosystem for years. Catering to that world takes advantage of their expectations and cuts down on re-learning. Still, I look at apps like Airbnb that are totally custom and also identical on both platforms and wonder. Are we being sticklers by saying that apps need to be unique to the platform? Maybe it’s better to stretch and go more custom? I’m honestly stuck. Maybe as iOS and Android have converged in the past year, it’s inevitable that apps will also start coming together?

    • 2

      Javier Cuello

      April 11, 2015 10:07 am

      Hi Ryan! I found your approach correct, and also understand your concerns. Apps should follow native patterns of each OS and don’t force users to relearn them. Even if there’s still room to customise some elements of the UI —navigation shouldn’t be one of those. I can’t really understand why some apps want to look ‘equal’ in different operating systems. That could only make some sense if users were changing from iOS to Android very frequently, and even if it was like that, there would be a lot to discuss.

      Regarding the evolution of design style, I think that for the moment both Android and iOS are maintaining their personalities apart, this is their ‘soul’ and we should, as designers, take advantage of this difference.

      • 3

        Consistency across platforms should be a UX myth that gets discouraged, just as pixel-perfect consistency across browsers and across screen sizes.

        I don’t subscribe to “the user expects everything on your desktop experience to be available on their phone” position. It may not make sense for small touchscreens to be a place to enter large amounts of data. Or use an iPad for most office work and to use large Excel documents.

  2. 4

    Enzo Cancellara

    April 10, 2015 7:09 pm

    WHERE are you located? DO you freelance?

    • 5

      Javier Cuello

      April 11, 2015 9:58 am

      Hi Enzo! I’m based in Barcelona (Spain) and I do work as freelancer. Connect with me on LinkedIn

  3. 6

    Great article Xavier,

    A lot of in depth information here for those working in the field.

    Looking forward to reading more from you.

  4. 7

    Great article Xavier,

    This is a very useful post for everyone I think. Lot of information is here. I also learn something from your post. I can understand about mobile operating system. I hope every Android user will get help from this post. I like your post. Thanks for the useful post.

  5. 8

    Excellent post, am still a newbie but I have been trying to build a couple of apps one for my site which I have succeeded, the challenge has been to build the other app which needs a database connection. Do you freelance? And how much would it cost? If you can PM me, that would be great, thanks.

  6. 9

    A very impressive post with a lot of insight. Good job.

  7. 10

    I like a lot of these issues. I think it will be useful to everyone. for s like this site

  8. 11

    Excellent article. I have read your book “Diseñando apps para móviles” -, is one of the best contents for app Designers -in Spanish- I ever seen.

    Thanks again!


  9. 12

    Bernard Farrell

    April 15, 2015 1:15 am

    Excellent article with lots of useful information, many thanks.

  10. 13

    John Donavan

    April 16, 2015 8:09 am

    Relatively great posts! Understanding today’s concern there is a vital role of mobile websites. Need to build websites which are responsive and are compatible on all the desired devices. Since in today’s time there are multiple operators used in day to day as well as varied using devices. Its a great tasks for web developers to build a website which is responsive.

  11. 14

    Awesome post. I agree on your saying about don’t trust until and unless we personally do not test the designs… You have delivered a lot of knowledge in your post. Thanks. Looking forward to read more from your posts..

  12. 15

    I think that thinking like an app designer is harder than it thinks. It is more geared towards interaction design and user experience. Most design is just print but app design is way more complex than that. Designing an app is a constant circle; idea then prototype the test. It is a never-ending cycle until they reach the end goal. Sometimes this process can take months even years. I personally as a consumer find comfort in the fact that they take the time to go back and forth before they are happy with the result. What I think is cool that they start working on projects without using the computer. It all starts with a drawing board just like any other idea. They have come up with the concept of “mobile first”. It is based on designing for the smartphone as a starting point, before moving to a larger screen. Teamwork is always needed when dealing with some kind of design. Someone may have a better approach to something you have been working on and they can help. Recognizing the value of teamwork isn’t always easy but when it comes to app design, it is necessary.


↑ Back to top