Appszoom for Developers

UI/UX Designers: Here’s How To Design Your Apps With The Developer In Mind

Posted by on 01/02/2016


You might be a crack app UI/UX designer with loads of great ideas that can propel your team’s next app ahead of the competition. But fact of the matter is that not everything that is possible in Illustrator or Sketch is necessarily feasible when it comes to developing the app. A UI design that hasn’t been created with development hurdles in mind can give major headaches to the developers who will actually build the app

As a long-time app developer, I’ve experienced this more than once. Here are a few tips that will help you to minimize the back-and-forth with your developers and create UI designs that will transition smoothly in both the implementation and development phases.

Know your constraints – and your strengths

The first step in designing a UI concept that will go off without a hitch is to know your development constraints and limitations beforehand. This will depend very much on what platforms and tools your team uses to develop apps.

One tried-and-true method is to keep handy a list of limitations and hurdles to avoid for each platform and framework that your team uses. This way, you get to focus on ideas that are more feasible in the initial stages of the project, and then tackle issues and concepts that are more challenging once you have a solid infrastructure in place.

For instance, you might see a very cool animation that you might be tempted to include in the design. But implementing it might need tools and libraries that your team does not use, or might not even be feasible in the platform they’re using.

On the other hand, you should also have an assessment of the strengths that different platforms and IDEs provide. For instance, with the advent of HTML5 and CSS3, many effects like shadows, which required sophisticated programming and additional image resources, have become an inherent part of the development environment, thus easing the task of the developer and also helping create more optimized apps.

Specific IDEs provide additional UI features. For example, the Ionic development framework provides ready-made tools for swipe animations.

Take a HTML5/CSS3 crash course

If your team uses cross-platform development tools such as PhoneGap and Appcelerator, you can benefit from some HTML5/CSS knowledge. Knowing the general guidelines of designing web-based mobile app interfaces can go a long way toward bridging the gap between you and your fellow developers.

Many UI designers are scared off by the idea of learning HTML5 and CSS, fearing that it would require a lot of sophisticated background information and basic programing knowledge. The truth is that HTML5 and CSS aren’t exactly programming languages like C/C++. They’re structuring and formatting languages, and therefore they’re very easy to learn and pick up.

Knowing both HTML5 and CSS will help you easily grasp the outlines of more sophisticated languages in the future.

There are many sources that can help you learn the skills you need, including the W3C School’s excellent self-study pages for HTML5 and CSS3.

Try prototypes

UI designers usually present their ideas through mockups, which they create using their favorite graphics design program. Prototypes are an interactive version of your mockups, in which the flow of the app and the relation between the views is visible. Prototypes offer a much richer experience than simple, annotated sketches of the app’s user interface.

Even low-quality prototypes, which simply show the app’s layout in simple wireframes, can give a clear picture of what the app should look like, which they can later adapt to a chosen design template.

Prototypes and prototyping tools such as Fluid UI can increase your productivity speed and allow developers to give you quick feedback on your designs. Also, having app scaffolds that actually work like real apps can allow developers to give you technical and device-specific feedback and, for instance, warn you at an early stage if your app’s navigation header is being hidden by the device’s or browser’s address bar.

 Make your app run smooth like butter: 5 Tips To Improve Your App’s UI Design

Stick to patterns and guidelines

In most cases, you’re better off using tried-and-tested UI concepts, because the advantages of using them are twofold:

  • From a user’s perspective, they’re easier to pick up and learn, and new users won’t be confused in finding their way through your app.
  • From a developer’s perspective (which is the goal of this post), they’re easier to implement, because developers have already seen them in action, and most likely have premade components and libraries that will speed the implementation process.

There are many invaluable sources on design patterns including UXPin’s free e-books, Mobile UI Patterns and Interaction Design Best Practices. You can also study common mobile patterns on the Mobile Patterns website.

Also important are the guidelines provided device manufacturers themselves. Again, sticking to guidelines stated on official Android and iOS websites will make sure that your UI designs will both be easy to implement and to use. Both Apple and Google provide comprehensive details on the UI principles for their mobile platforms.

Never forget the end user

The goal of this post was meant to ease communications and interactions between you (as the UI designer) and app developers. Nonetheless, I’d like to stress the point that while you get caught up in your inner-team interactions, never forget that your app’s success will be assessed by the feedback and reaction that end users show toward it.

Therefore, it never hurts to also check your designs with potential users before shipping them to the development team. I’ve already touched upon the issue of UI design with users in mind in previous posts. I suggest you read that post as well if you haven’t already.

Final thoughts

UI designers can make a developer’s life easy or make it a nightmare. Try not to be of the latter type. Hopefully, the advice provided in this post will help you move in the right direction. If you have any tips to add, please drop a line in the comments section below.


Topics: Uncategorized