As a Senior Product Designer, Tim Pleiko-Izik, has a ton of experience working closely with development teams to bring digital products to life. In today’s post, Tim offers new designers some essential tips to apply in their design process for a successful and efficient collaborative workflow with developers.
Getting hired in digital product design goes beyond having a strong visual portfolio. If you’re just getting started in the field, keep in mind that landing a UI/UX job also means you’ll be expected to work closely and effectively with developers. After all, developers are the ones technically in charge of bringing your designs to life.
One of the main problems I see with new designers is a lack of knowledge in the technical requirements for their design work. If you’re seriously pursuing a career in UI/UX, you need to know how to create designs that developers can easily work with once handed off to them.
To help set you up for success in your career, I’d like to share the minimum standards your work will be expected to meet when working with product design teams. Use these ground rules to guide your design process and save both you and your developer colleagues a lot of unnecessary time and effort.
First thing’s first: Consistency is key
The first and most important thing I’d like to start with is consistency. For each of your projects, you should build global rules that you will apply to all of your design work and in turn, this will streamline the development process. Remember, consistency is one of the foundations on which the successful cooperation of the designer and engineer is based.
1. Create a hierarchy of text styles
It is essential to follow the sequence in text styles within a project. To do this, you need to create a hierarchy of styles that will be used within the entire project. The order of text styles should start from the largest to the smallest. A simple hierarchy of text styles might look something like this:
- H1 - The largest text used for main headings
- H2 - Secondary headings (e.g., headings of categories)
- H3 - Least important headings
- P1 - This style can be used for body text (the style used for the main text on the page)
- P2 - Small text on the page. Can be used for legal text and any other small size text
- L (links) - all links are highlighted with a different text style to make them easier to find in the text and to make it immediately apparent that this word or part of the text is a link. This text is usually bolder. By default it is blue, but links can be set to any color.
Developers use this hierarchy for the names of text styles, and it is better if you start using them from the very beginning in the design files.
2. Keep fonts minimal
Try to use no more than two fonts in one project. The first font can be used for headings, the second font for the rest of the text.
At the beginning of their journey, many young designers go overboard with variations of different fonts in one project. Try to stick to consistency and minimalism in this. It simplifies the perception of the product by users and simplifies project development.
A useful resource for the selection of font pairs: https://fontpair.co/ .
3. Use a grid system
In my work, I use an 8pt grid system. This approach is visually balanced. This rule applies to block widths, padding between them, etc. Excellent materials on this topic:
4. Know your platform specifics: Android vs iOS
The platform in which an application is created may impose its specifics on the design. For example:
System fonts:
- iOS: SF Pro Text, SF Pro Display
- Android: Roboto
Button Height:
- iOS: 44 px
- Android: 48 px
Clickable area for icons:
- iOS: 44x44 px
- Android: 48x48 px
Format of assets that will be sent to developers: Depending on how the design of the app is adapted to the system style, the differences may apply to many other elements, such as the style of headers, switches, toggles, buttons, the radius of elements, and so on. Keep this in mind and know which platform you are designing for.
5. Explore native platform elements
When it comes to mobile design, I highly recommend exploring the native elements of the platform (iOS vs Android). Many young designers tend to create non-native elements or elements that are too complex. All of this can be easily solved with sufficient knowledge of the platform you are designing for. I am convinced that this is one of the main points worth exploring.
However, also keep in mind that apps consisting of only native elements can be very dull and monotonous. In my work, I always try to create some element that will add uniqueness to a product. Here are some great solutions:
Left to right: Jakub Antalik, Darin Senneff, Cuberto
6. Check for masks in icons and illustrations
Always pay attention to the assets that you use inside an app: check for masks in icons and illustrations. You will not notice the difference in the design phase, but the developers will face difficulties when the elements look entirely different from what was planned.
7. Keep iconography consistent
If you are working in a small team, you are likely using icons from the web. Here, as elsewhere, consistency of elements is essential. If you are using icons from different sets, don’t be afraid to customize them. Pay attention to the level of detail and make sure that all icons are combined with each other. The thickness of the lines in all icons should be the same. If it’s not, customize the icons!
8. Design for accessibility
Since a large number of people will use the products that we create, it’s crucial to think about how everyone can use it without any obstacles. The most common mistake when designing interfaces is a lack of contrast between the colors of the text and the background.
Remember, contrast and color use are key factors to consider when designing for accessibility. Users, including those with color vision deficiencies, must be able to easily view the content on a digital screen. Here are some tools that will help you pick an accessible color palette for your projects:
9. Prepare a UI Kit
At the end of any project, I prepare a UI Kit for developers which lists all text styles, icons, illustrations, elements, and their states in different scenarios. This file is extremely helpful for developers because it includes all of the necessary information to start working on projects and saves them tons of time.
This image is a very brief example and does not show what a real UI kit should look like.
Being able to design with the development process in mind will take you far in your career as a designer. By implementing the techniques above, not only will you streamline your own design process but you’ll also save your fellow developer teammates a ton of unnecessary time and effort. Many thanks to Alexa Pleiko-Izik for supporting my blog post with her outstanding illustrations!
Want to keep up with Tim? Find him on Dribbble, Instagram, and Medium.
Find more Process stories on our blog Courtside. Have a suggestion? Contact stories@dribbble.com.
