Mobile Patterns and Why Use Them in Design

Mobile Patterns or Mobile Templates are, as the name obviously states, templates to use for easing our work when designing a site for portable devices. As mobile web design means more and more nowadays, designers often have problems reaching deadlines because of a high workload.

In web design we have grid systems we build on in order to help us maintain a clean visual pattern, but also to help us build a web page faster. Many of us even buy WordPress themes and customize them to our use. And it is worth mentioning that 10 years ago HTML templates were widely used in the industry.

The truth is that designers always looked to ease their work and move on to the next project, therefore mobile patterns are something the experts start to look into more and more.

Mobile patterns are structured, organized and well researched before going online. These patterns are suited for use when the designer understands how they work properly and the reason behind it. As WordPress themes, many of them come already designed and ready to use. This is, however, something I do not recommend you to do. You should always customize a pattern to your needs in order to better fit the audience you target. Design is not only a way of looking good anymore; it became so important that it often makes the difference between failure and success.

Mobile Environment

It is very important not to forget you design for mobile devices and not for the web. There are so many things to keep track of. The screens are smaller than the ones of a computer, information needs to get across much faster, the font choice needs to be perfect and fit the small screen and it needs to load fast.

With so many things to keep in mind, it is surely not easy to design for mobile interfaces. And even if you will get a pattern from the internet, your task of customizing it for your needs will definitely take some time to finish.

Maybe the most important thing to remember is that while designing for different mobile platforms is done using the same concepts, the result is always going to be different because of the different screen sizes, mobile browsers and operating systems.

When designing for mobile it is important to keep in mind and consider the device or sets of devices you will provide for. Not even the best developers were able to deliver a Facebook app for both iOS and Android – as a matter of fact, they didn’t even try to, as they knew it is impossible – they designed two different onces. So although designing for mobile devices is based on similar concepts, the results will always be different and it is something you should expect when starting such a project.

How To Use Patterns

In case you want to design your own template, there are some things you should consider.

  • You shouldn’t go into mobile web design if you don’t plan on using a grid system. It is simply too messy for such a small device. As screen size is different from a device to another, the grid system will more or less help you keep everything organized and in place on all of them.
  • Using classes in mobile design is a good practice. Because IDs can’t be used more than once, using classes is the only way you can apply the same style to different containers.
  • You need to have a strategy and create some standards for your template. You will obviously have multiple pages (unless it is a single page site – which happens rarely) and all of them need to have the same style. Don’t think that if the screen size is small people will not notice these details.
  • You need to make an important decision in the beginning and think if you go for tabs or buttons in the header. And this is just one small part. You need to take such important decisions for every small piece of your website.

Know some history

If you want to be a complete designer, then you need to know something about design and technology history. This is the only way to predict the future and to know which things work today – and more important: why do they work.

A good example is the Palm IIIc – a very old Personal Digital Assistant which would still be a decent device if released today. It has wireless connection capabilities and integrated browser for internet surfing. Or remember the first MP3 phones released many years ago. They had almost no memory and uploading music onto them was quite difficult – not very different than the way iPhones sync music with iTunes many years later.

If you have some knowledge of what happened in the past in the design industry and closely follow the results and reactions, you will definitely find out why some things worked and why some others failed miserably. You need to know what happened before in order to know what will work for you.

Similarities

As mentioned earlier, many portable devices have similarities which not only need to be learned, but also need to be taken advantage of. In case you are a designer, it might be a good idea to stick your hands into your pockets and continue experimenting with other devices. Sticking to your favorite one will not make you a perfect cross-platform mobile designer.

If all your friends and relatives have an iPhone, then buy an Android device. You can always borrow, use and observe different behaviors on your father’s iPhone…

Knowing the advantages and disadvantages of many smartphones will turn you into a better designer by default. And another good part is that if you don’t always want to design, you can also work as a mobile design consultant.

By looking at general patterns in mobile design you will notice how they actually look quite the same. There are many similarities between different designs, only they are not easy to notice if you do not know how a website is built.

Trying as many new things as possible will help you develop a vast knowledge of how patterns work on different platforms, operating systems and devices.

Help your users

When coming on a new website for the first time, everything is unknown. You have no idea where and what to look at first. The same happens to your users, but the difference between you and them is that you can do something about it.

What I mean is that when you design a mobile user interface, using illustrations or general patterns in order to help them navigate will help you a lot. To be more specific, these things are doable through hierarchy and priority.

Mobile Patterns Examples

Conclusion

Patterns are a good and common practice nowadays, but this doesn’t mean using them is a must-do. Designing your own patterns requires much more than the willingness to do it. You need lots of skills and lots of devices for testing – and this costs money. Emulating and trying to test a mobile pattern on a computer is not always going to be successful and show you the real deal. And even if you want to use a downloaded pattern, things are not as easy as they seem. Unlike WordPress themes, they need to be heavily customized in order to fulfill your needs.

With this introduction to modern mobile patterns I didn’t try to convince you to use them, nor to convince you not to use them. It is barely an introduction into an industry with multiple rules and guidelines. The interesting thing to mention about mobile user interfaces is that while they are quite new in the industry, there is already a lot of buzz around them and you can expect even much more of it in the future.

Christian Vasile is an enthusiastic Romanian web designer currently living in Denmark. You can follow him on Twitter at @christianvasile or visit his web portfolio at christianvasile.com.

Newsletter

5 Comments
  1. Sergey Apr 17, 4:12 pm

    Great article! Mobile patterns are very powerful tool if you know how to use them. Btw check the biggest collection of mobile UI patterns in the world – Inspired UI at http://inspired-ui.com

    Reply
    0
  2. Cody Apr 17, 10:06 pm

    Mobile Patterns is definitely one way forward in designing for mobile devices. But what are your thoughts on using responsive web design for mobile devices?

    Reply
    0
  3. Theresa Neil Apr 23, 10:51 pm

    Check out my new book, Mobile Design Pattern Gallery, with patterns that span multiple OSs. While it is a gallery like a lot of the popular mobile pattern sites, it also explains the different patterns and gives suggestions. The patterns are also grouped into broad categories like Navigation, Forms, Charts, Tools, Invitations, anti-Patterns. See an example chapter on Smashing http://uxdesign.smashingmagazine.com/2012/04/10/ui-patterns-for-mobile-apps-search-sort-filter/

    Reply
    0
  4. Think360studio Apr 25, 10:48 am

    Hi christian Now a days Mobile patterns are very important because now people prefer tablets instead of Laptops and Personal computers. So as a designer i feel that its become necessity to use mobile pattern. The collection of Mobile patterns which you had given, all are beautiful. Thanks for sharing this article.

    Reply
    0

Leave a Reply

*
* Minimum length: 20 characters