How design skills help developer to contribute better to the products

UI and UX design skills are overlooked by developers, especially in large organizations. It's one of the important skills to build better products and help product teams with efficient feedbacks early on the UI and UX designs.

Feedback early on Usability

Developers are the first set of users who look at the design early before taking it to implementation and have the luxury to contribute to the overall usability of any mockups.

What is useful feedback for UI designs

• Typography issues and issues about separation of sub-content from title contents
• Color contrast issues. Feedback on text colors and background color overlap. Color blindness is a real issue, lot of people have it with variable degree so make sure the UI speaks itself even if the colors are just seen as gray, black and white.
• Usability in responsiveness for components, offer simpler solutions / ideas if there is any which solve such issues
• Always ask designer to first provide small screen mockups for feedback and then large screens not the other way. It helps to simplify the UI without cramping the page with functionalities without usability
• Issues related to copy if copy is included in the design. If a developer doesn't understand the copy on first look, most probably the user won't too. Make sure the copy is always simple
• Give feedback on layouts and spacing issues
• Check the primary actions and secondary actions. Raise concerns if the design didn't distinguish the primary actions.
• Examine custom components and see if there is any easy alternates with standard HTML components with bit of styling.
• Different states of UI. Design doesn't need to cover all states, but should cover some default states like empty state and complete state. Other intermediate states can be derived during development.

What isn't so useful as a feedback for UI designs

• Pixel issues. Often we go overboard and see pixel issues and consider we need to stick with exact pixels from mockups. No, there is no such rules. Often a 500px container and 520px container doesn't look much different in a large screen.
• Drawing an imaginary grid system based on what you use in development and align all design to work for that grid. Grids are overrated, don't always think 12 column or the 16 column is the standard way to design. It's just a helpful utility to define during development to easily create the UI. Design will always align close to a grid value, just use the grids that way and give more freedom for designers and also yourself from useless rules.

What to learn in design skills from developer perspective

• Typography - fonts size, weights and line heights for different screens
• Spacing and sizing for different screens
• Colors, how to use colors properly in different UI context
• Readability and accessibility best practices
• Images and icons usage. As more and more designs are images and icons heavy nowadays, you should learn best practices in how to utilize different icons, icons fonts and image contrast, image colors etc.

Hope this helps you learn about how to contribute better and give feedback early on in the design process as a developer 😎