Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Practical guide to switch from web to mobile design. Part 2

Mobile is on rise, as are Mobile apps. Although the web is still relevant,
mobile apps are here to stay. These days, there is more and more
pressure to deliver appealing user experience, and design does the job.
Lukas Imrich @imrichl

Within the first part of the article we’ve talked about general practical hints to make your design look and feel great on the mobile. Here I’ve put together specific tips to keep in mind to help your work look professional and completed.

1. Avoid weighty images

Mobile app users expect their apps load fast. When it comes to shoppers they want pages to load promptly. Otherwise they simply switch to another resource.

It is impossible to provide decent broadband for everyone. That is why you have to deal with your app. To make it load as quickly as possible add limited amount of big images for each screen.

2. Environment and conditions

When you design a website you start with investigating the target audience and primary goals. When it comes to mobile the process is almost the same.  While you also have to be aware of the conditions.

It is rather unlikely that your users will browse a website outdoors under the bright sun or in the gym.

When designing for mobile you have to keep in mind under what conditions your users are going to run the app. Think over:

  • the level of illumination (bright sun, daylight, darkness);
  • whether their hands are shaking or not (apps for runners) or they might be using your app in the shop with handful of little kids and a huge cart (shopping apps);
  • are they gonna use your app on the go, etc.

These details are crucial for overall usability and user friendliness of your design.

3. Guidelines

This set of rules gives you an opportunity to create high quality mobile designs. They provide information both on design requirements, overall UI elements placement and app behaviour.

Another powerful tool you maintain with the deep knowledge of the guidelines — the understanding of how you can fudge the rules.

You may face various design situations when you need to make some out of the box solution. This is the point when you might need to “disobey” the guidelines without breaking them.

4. Specifications and Sources

When you design for the web there’s a layout designer, who is the intermediary between you and the developer.

In mobile there’s no layout designer. You work directly with the programmers. It is a common situation when they have no tools (like Photoshop or Sketch) to work with your images to slice them.

Cutting edge specifications will help you to explain nuances of your design to them. There should be mentioned any tiny tity details about your design, even colour palettes or font types and sizes.

5. App Icon Preview

Being a mobile designer means that you have not only develop the app design. Your customers often expect also an app icon to be created.

I love this delicious and creative part of my job. While even at this step there are some rules to be remembered.

The Icon — is the introduction to the app. It is the first visual contact of the potential user and it plays a huge role in app acceptance by the target audience.

Your app should look and feel both capturing and natural in many contexts: in the app itself, in the AppStore or PlayMarket, on the customer’s’ home screen, etc.

One of my favourite tools at this step is Mockup.io. Here I can upload several app icons to my prototype project and check how they look in different environment, like App Store or homescreen.

6. Artworks

Since you’re on mobile design think over any additional graphic elements your customer might need. This will help you to gain reputation of the highly qualified specialist.

These may be promo screenshots for App Store or Google Play, banners, various screen casts or promo video.

And again, use the guidelines to find out requirements for the promo materials for the stores: picture sizes, formats, applicable devices for the screen shots.

7. Use the device

When you design for some platform it is crucial to implement native app performance or navigation within your design. And it is fairly impossible to feel it using only guidelines or other documentation. The best way is to find the required device and run it for few days. Check how native and similar apps run on the device. It will help to make your design predictable and friendly for your future users.

And remember that in the world of mobile the primary focus in on the speed and simplicity of goals completion.

Author bio: Liza Repko, UI/UI designer at Alterplay. She delivers top-notch designs and believes that design should enable users to achieve their goals easily.



This post first appeared on Bytes Wire - Modern Web Design & Web Development R, please read the originial post: here

Share the post

Practical guide to switch from web to mobile design. Part 2

×

Subscribe to Bytes Wire - Modern Web Design & Web Development R

Get updates delivered right to your inbox!

Thank you for your subscription

×