Blog /

How to Create An Implementable UI Design

Twitter Facebook Google+
12 Jul 2016

Read this post on Medium

To be a qualified UI Designer, you need to have a general idea of how front-end developers implement your design. This means that you need to know HTML and CSS or understand how mobile developers put your pictures/texts on the screen. If you don’t have an engineering background, don’t regard learning programming as a pain in the ass. Without knowing the process, it’s difficult to finish the design and developing process smoothly because the inconsistence of cognitions between designers and developers is a main cause of design conflicts and implementation deviations.

For example, let’s assume you designed a website like this, using inclination and a stack of layers:

It looks good, right? But have you considered the implementing difficulties of this design? Whether your company has a strong team of front-end developers or not, it’s a UI designer’s responsibility to balance design and implementation.

In the current art board, this design looks pretty good. Obviously you want the website to cover the whole screen. But what if we want to display it on another device and the resolution is changed?

If you didn’t know you were supposed to create a responsive design, this website might look like this now:

Because you didn’t know you were supposed to create different artboards for different displaying devices, how can your design fit in different devices automatically? And how can font-end developers cover the blank area and implement your design?

If you had thought about this issue and designed another version:

You must have thought about how the blank area should be covered. And there are other details like how pictures and texts are layered together and the order of layers…don’t think implementation is just a piece of cake.

Here’s another example:

Animation is cool! But you don’t have to the use these After Effects animations when it’s not proper to do that. The animations might give you some “wow”s, but when it comes to front-end development, you have to consider in advance how these effects are implemented, how they are supported, what extensions they might need and if they might slow down device or even cause a crash.

You may have spent a whole night to design an amazing motion effect, but when you go to work in the morning, you won’t want to be told that it can’t be implemented.

More generally, you might find every time the front-end team get back to you, the application has so many places that are different from your expectation. That is probably because you didn’t “design correctly”.

Here are what you may need to do:

1. Review prototype before you start designing UI

You should think about and arrange map layers division and structure, interactive effects, and effectively communicate with developers to see if your ideas/arrangements are implementable.

Make sure you understand the importance of prototype, and evaluate your ideas detailedly with developers to avoid wasting time and effort.

Here’s an example:


2. Get familiar with the design principles

No matter which platform you design for (Web, iOS, Android, WP, etc.), you should get familiar with the corresponding design guidelines. Designing without knowing the correct design principles is like playing a game without knowing its rules — which will result in avoidable mistakes and the postponement of development process. So before you start, please do your research, and make sure you follow up (e.g. the updates of iOS Human Interface Guidelines).

Since you already have a prototype, all you need to do is to finish the UI Design in the frame. Standards exist for reasons. Don’t break the “rules” if you have no idea of what you are doing and its consequences. For example, for web design, Chinese characters under 12 pixels cannot be displayed; text displays are supported by only local fonts; the heights of the tab bar and top bar in iOS cannot be casually changed, etc. If you submit design drafts with random changes but don’t have a good reason, you are only making you team think you are unprofessional.

3. Make your project design principles

You will find having your own project design principles is very helpful to improve work efficiency and design consistence. You can set up your own design system in the frame to present your unique ideas. Don’t forget to record the feedback for future use.

For example, set up standards for these elements may help you finish the design more smoothly: main colours’ values, button size and shape, fonts/sizes/colours of different texts, distances between different elements, etc.

4. Learn slicing

It’s irresponsible to just the source files to developers after you finish the design and think it’s done. For example, a web design looks good doesn’t represent it’s also appropriate. It’s very important and necessary for you to know how to optimally export a background, which file format should be used when the application needs a transparent background picture, etc.

You need to create a design with which you can independently finish the slicing process and give it to developers to implement instead of waiting for them to come to you and tell you what is inapplicable.

5. You MUST know how to properly label annotate

I’m pretty surprised that a lot of designers just skip labelling. Annotation is extremely important in design collaboration. Many Developers don’t check and review the parameter settings of design details, such as the distance between elements and text size. (They sometimes really just “feel” it!) You might want to label clearly so they can review more easily to lower the chance of making small mistakes.


6. Compare the app with prototype, modify as needed

After the developers finish the development of visual parts, you can start to review. Compare the presented design with your reference/prototype. Use Invision to test and gather feedback, and update as you needed.

If you are both a designer and a developer, congratulations, you’ve saved yourself much effort; if not, it’s also totally fine, know more about the basic front-end development process and follow these advice, you will also be able to “design for code” soon.


Twitter Facebook Google+