On the job

Before the elements of a product can be designed, someone has to think up what those elements are going to be—what functionality is required, how things will appear on screen, how they’ll work together, and so on.

This is obviously a very collaborative stage of the process. Just how involved a UI Designer is during this stage will depend on their level of seniority. A Senior UI Designer may be expected to take over much of this initial design ideation, working with a UX Designer to help determine

At all levels of seniority, it’s the UI Designer’s responsibility to take the research and personas the UX Designer has developed and run with them, conceiving and creating interactive design elements like menus, tabs, widgets, buttons, sliders, scrollbars, page navigation and search fields, and even layouts, typefaces, color palettes, images, icons, and original graphic designs, illustrations, and animations.

These essentially add up to the design of each screen or page a user interacts with—the

Once all the visual elements have been generated and assembled, it’s time to make sure they work, first by identifying and troubleshooting issues with basic functionality, and later, by allowing test users to interact with the product prototypes to get feedback on their experiences (and, obviously, to make changes to the product based on that feedback).

This typically takes place in two stages: first, via basic clickable wireframes or prototypes, which give Developers and test users a chance to i

Sketch is used by 66 percent of respondents—but 44 percent of respondents also cited Illustrator, with InVision Studio, Adobe XD, Axure, Figma, and Marvel rounding out the category.

The list was similar—with Sketch cited by 64 percent of respondents—but with Photoshop taking the place of Illustrator, at 43 percent. Photoshop and Illustrator are excellent companion tools, with the former dedicated to photo editing and the latter designed for creating and editing vector-based images.

InVision was used by 58 percent of UI/UX Designers, edging out Sketch. For more advanced prototyping with micro-interactions, there are a range of alternatives, including Proto.io, Principle, Flinto, Framer, and ProtoPie.

UI Designers do not need to code, but it is extremely beneficial if you have programming skills. Depending on the nature of the product, it’s also not unusual for UI/UX design and development to be intertwined into a single process. So although design and development do require different skill sets, knowing both is becoming more and more crucial to the tech and design industry. Web Developers need to understand the design needs of what they are coding, 

So it’s very much to a UI Designer’s benefit to be able to think like a Developer and use the language of development—of deadlines and budgets and what technology can and can’t do. If a Developer tells you a given feature is impossible, how are you going to refute them without first understanding how to make it happen? As UX Designer and Information Architect Ben Shoemate puts it, “Real Designers make their own design work.”

the ins and outs of responsive design, for instance. Now that more than half of all web traffic is generated by mobile devices, a solid footing here is essential. High-fidelity prototyping apps like Principle and Framer may also require a bit of coding in order to take full advantage of all their features