About the essential qualities of mobile designers

Mobile Terminals have always had their own set of rules. At the same time, this is also a rapid development platform, with the new technology and functions. We can no longer design mobile terminals as we do for posters and webpages. So what skills and thinking models do mobile designers need today?

Challenges and constraints

Each carrier has its own limitations. Even a mobile platform-one of the most ideal canvas of a designer's dream has the characteristics that must be followed.

Diversity of devices

Today there are countless smartphones and tablets, each of which has different screen sizes, pixel density, and physical inputs (not to mention screen rotation ). This means we can't just consider the iPhone 5 screen size and then design it for adaptation. On mobile Web pages, responsive design allows us to adapt the design to different screens without having to design and match it all at once. The local mobile design lacks mobility, so we need to consider the design adaptation for different screen sizes and record the effects of different changes on the layout.

Diversified Operating Systems

Today, we have three mainstream mobile operating systems: Android, IOS, and Windows OS. Each operating system has its own interface standard, external input and design specifications, not to mention upgrades and changes between system versions. The Android system is more complex. Different Android devices are limited by device manufacturers. For example, the uidesign of different terminal vendors is different, and the hardware architecture and processing capability are also different. Not to mention the subsequent upgrades provided by the carrier)

Although the advent of system diversification does not allow the design work to be completely different, it does affect users' expectations for the operating system in terms of user experience. For example, most users are used to TouchWiz Samsung user interfaces for the Android system) or SenseHTC user interfaces ).

Performance

The application design method can affect the power consumption of the system. In other words, our design can exhaust the power consumption of our users. Some unnecessary visual effects or animations require a large amount of graphic operations; a large number of Javascript Web pages consume a lot of power. Our newly purchased device may run the APP very smoothly, and the old device will be slow after two years. These examples only show that mobile designers need to better understand the impact of their design on system resource usage and APP performance.

Development Cost considerations

A cool new APP doesn't mean it is easy to implement. Our design of the APP can directly lead to the release of our application on time. If we do not clearly understand the development cost of our design decisions, it is basically increasing the burden on developers and laying hidden risks for future friction.

Learning new skills

Many of us have received professional training as designers in a certain field, but they have just begun in the digital design field. From a more objective perspective, can someone export HTML directly from Firefox ?), And this controversial approach is still being taught in schools. With the development of mobile terminals, the difference is getting bigger and bigger, which leads to the shortage of our current language and almost all tools and methods. So it is time to change our mindset.

The mobile platform is not a whiteboard

HTML is not a canvas either. You cannot design a poster as you do. I think using Photoshop won't help us change, because we have been using it for more than 20 years to design posters, illustrations, and retouching photos. We still "Draw" our interface, while screen size diversity and Dynamic Interaction Features of movement require us to use a different method of design.

Best interface thinking and starting to think about interaction

We began to realize that the presentation of the interface does not affect the design of the Mobile End. Thanks to Facebook and Yahoo weather for presenting us with different design methods, let us understand that design should be more focused on interaction rather than static display.
Interaction, a stunning visual experience, is becoming the core of mobile user experience. They not only make the interfaces themselves vivid and friendly, but they are also an interface element. Interaction can build a bridge between apps and users and express actions, space, transformation, and a series of communication methods. This outshines the pure static display.

Put the designer's identity down

You do not need to be unique or original, especially when you re-design a known interface for "uniqueness. It is often wise to stick to the original UI elements and patterns to make the application complete on time. It is more valuable to focus on building a simple and effective interface and creating a brand than to design your UI components from scratch.

Looking for inspiration, the existing APP will be better than the design website

Many designers like to go to Behance or Dribbble to find inspiration for their next mobile project. Of course you will find a site of excellent art, but if you are not an experienced mobile designer, these models may be misleading. Many people only create templates but never implement them, and they will mislead you into believing that you can customize the UI for users every time.
The true inspiration comes from successful applications. You will find that the design makes the product grow steadily. Their Interface interaction has been detected by the real world, and you confirm that these can be copied.

Learn new skills

Platform Learning

Just as you are a good web designer who needs to understand HTML/CSS, you need to understand the underlying structure of mobile apps, which is totally different from their web pages. For example, they do not present stream content like HTML/CSS, which will change the way we consider layout. You will not have the magical CSS inheritance (at least not as out-of-the-box) to detach the tag from the page. Even the concept of Mark connection is none.

You need to read the manual from some developers to learn about the mobile application architecture, compilation, and release. Understand how a mobile device works and which ones consume batteries. You may even need to learn some code basics for the long term. after learning the development language, your design work will be more efficient and feasible.

Learn various mobile Components

Here is a list: location service (Wi-Fi and GPS), Bluetooth, Bluetooth Low Power Consumption, lights, front and back cameras, microphones, gyroscope, accelerometer, vibrator, fingerprint scanner, eye tracking, speech recognition, face recognition, and stress detection are not uncommon. Every new technology opens the door for the implementation of a new APP. Your responsibility is to become a designer at the cutting-edge of technology.

Learn what you can do with native components

Native UI components actually provide a lot of customization space, but you need to know how to use them. If you can make some adjustments to your UI on native components, developers will thank you for saving them a lot of development time.

Understand mobile workflows

Understand mobile sdks, integrate and run them. Understand mobile frameworks, such as RubyMotion Xamarin or Titanium. Familiar with IDEs and how to name image resources in a mobile project.

Measure the test taker's knowledge about the mobile user interface mode.

There are similarities between the three mobile platforms and the difference lies in the interpretation of mobile interaction design. Their users expect to display different things from them. As a mobile designer, you should be fully aware of these differences and be able to detect them.
Do not focus on only one mobile platform. Try all three or use Android and iOS for at least six months every day. I did. It's amazing-your deep understanding of each platform will prevent you from blindly using them. The advantage of multiple switchover attempts is that it is not conducive to mobile designers to become a platform-focused fan.

UI description documentation

Because the interface does not intuitively present all services, You need to document the status, interaction, and animation of different states, and how to apply the data and environment. Comment out your prototype, provide animation instances, and rotate devices for planning.

Learn UX at the project design stage

Modern designers should be strategic designers. So your goal is not just to create beauty, but to invest in the design team to understand everything about the product. The quick prototype gives priority to what users want to get early predictions. Detailed artistic creations will be carried out later. Ensure that all design and core values meet user needs.

Pay close attention to UX during project implementation

You cannot patronize a developer's prototype and forget the user experience, because most of the graphic requirements will appear in the development stage. New interactions and status changes require new graphical resources. You need real-time response, so place your chair next to the developer and be ready to enter the design work at any time.

Tips on Mobile Web

Responsible for response design

For mobile Web, response design is not a one-size-fits-all solution. It works in some cases, but sometimes it is not desirable. Your responsibility is to know the situations in which mobile terminals can use dedicated solutions, and in which cases a separate code library is maintained for some response adjustments. Even if you are a "traditional" network design, you have to plan your page layout to adapt it to different screen sizes. And consider the size of resources: the gorgeous full-screen 1 m background image will waste money for your users to access mobile cellular data.

Exercise caution when using CSS and JS

It is true that CSS animation, gradient, conversion, and shadow are excellent and easy to implement. In addition, the visual effects are very good. There are a bunch of cool technical staff Developing, right? However, these elements have a negative impact on power usage on mobile terminals. The more vivid and vivid the implementation, the less smooth the device will be and the more power consumption.

The CSS3 selector can control the performance impact on low-end devices. Use ID and Classes whenever possible, and keep your element selector of a lower version. If you use # submit to replace. main. container. form> div. submit, it is also a good solution.

Select an appropriate tool

• Sketch mobile development toolbox ). It can be said that it inherits Adobe Fireworks and is currently eye-catching on mobile devices.
• LiveView and Sketch Mirror are tools that can map your products on Virtual Devices. You need to know that many things will have different effects on the actual device. You can use them to easily test the size, interaction, and control.
• Origami (by Facebook) and Quartz Composer are both mobile quick prototyping tools that allow you to quickly build a UI prototype without code, it also gives you a general understanding of logical thinking and programming.
• PaintCode can directly export the UI and vector graphics into Objective-C artifacts.
• Web-based prototype software. There are many: Balsamiq Mockups, Axure, UXPin, Moqups, Proto. io.
• Flinto can create interaction prototypes and install them into your iPhone to simulate real applications. Use Safari to add to the home screen ).
• ImageOptim can uncompress PNG and JPG files for you.
• Version Control Software, preferably Git or Mercurial. Submit your resources and changes to the remote repository in real time, which is much better than sending a Zip email to developers.

All of this is about to expire

Not completely certain, but the pace of mobile technology development is incredible. Soon we will face the challenge of connecting wearable devices, smart devices and sensors with our mobile applications. Every day, there are new challenges and innovations. Therefore, if you can maintain your curiosity and flexible thinking, curiosity will prevent you as a designer from being eliminated by the times.

This article is translated by Xiao walnut, product manager for everyone.

Original article: http://uxmag.com/articles/what-does-it-take-to-be-a-mobile-designer-today