Mock-ups for each device, or just one global one?

Question

I'm new in user experience design. Now I started working on my first app idea, it is really interesting. I want to make this application for 3 main platforms right now. If it gets positive responses, then I'm also interesting launching this app as a web application, and for Blackberry too.

I am confused by one thing: Is it right to follow only one design and flow for all these three platforms? Or is it better to make all different mock-ups with basic platform standards, and I can spend my money and time as each platform needs it.

Does it make any sense if I spend money and time for different designs, or is it better that I use one single mock-up design for all platform?

Answer 1

You are extremely likely to benefit from adaptive design - a dedicated design for each display group. Twitter's Bootstrap defines 3 of these (and you can see the width range of each):

• Mobile
• Tablet
• Desktops

With relation to template design, different display sizes affect the following:

• The amount of content reasonable to put in a template.
• The visibility of content/interaction elements (which is vital for high-usability).
• The arrangement of items.
• The size of the elements.
• The way people interact with the application (no right-click, hover, or modified drag-and-drop behaviour on touch screens; can you imagine a drag-and-drop between two tables on a mobile device?).
• The 'fold' height - while many already disregard this for desktop displays, it could be a factor if you take a 'one-design-fits-all' approach.
• There is also the platform standard (Microsoft and Apple has differences in their design guidelines).

So unless your application is very simple (like a single scrollable page - when responsive design can provide a one-fits-all solution) you will most likely have to create alternative designs for each display group.

A small display design would typically involve more templates and deeper navigation, with each template involving less content and interaction elements. Your task models will typically be sliced to templates more often with small displays. Thus the arrangement will change. You will also have to account for the interaction variation between the devices.

If any guideline may be given, you may wish to start with the mobile design - it is typically easier to join templates for bigger displays than break them down for smaller ones. Designs for smaller devices also tend to promote higher proximity and minimalism (less is more), which are generally a good thing for designs.

Just to further exemplify, consider the differences:

Answer 2

If your 3 platforms are very different sized, you should go into 3 different-but-related mockups. You should google a bit about "Responsive Design".

I guess you are designing the interface for desktop, tablets and mobile devices.

Normally on Desktop you have plenty more space, and you can lay it out as you want (but following the common UX guidelines)

On the opposite, on mobile devices you will be looking for a more vertical design as they normally lack space.

A good example is Sony's website (I'm not related to sony at all xD) try to browse their site from your desktop and from your mobile.

On smaller devices some elements will change the layout and some even disappear/collapse normally in the responsive design, but you might keep the general feel/style/branding compared to the desktop/bigger version

---

Anyway if you have enough budget, I would really recommend you to do the website and different native apps for each platform. People always like the native apps more.

Answer 3

As a developer myself I find it useful to have responsive versions of sites mocked up or at least be given and indication of how styles and objects will change when the screen gets smaller.

For example at desktop size the base padding/margins on most elements can be around 20/30px comfortably, but what do we drop down to at tablet and mobile sizes? Do we only change down to around 10px at mobile or do we also drop at tablet size too?

Even without a full mockup of responsive versions of a site, it is good to have a clear understanding of how elements should be when the screen reaches certain breakpoints or sizes.

From a design point of view however it could be a good idea to experiment with how your elements will work at smaller screen sizes. I constantly come across instances where a widget beautifully crafted for a desktop display just won't fit nicely into the responsive frameworks that we are using.