Developer guide to better UI/UX design
As developers we often find ourselves working on projects where we have to implement certain features for which we are not provided with a design. Reasons for that can differ quite a lot, but most of the time the client does not have the resources to hire a designer to solve this predicament for us or the project is limited by a very tight deadline.
Whatever the reason might be, in the end it’s up to us to find a solution which will be best suited for the project itself and of course for the end user who will be using the final product.
In my opinion every developer, be it a front-end or even a back-end developer, should know the basic principles of good UI/UX design. By no means am I an expert on this subject but I would like to share with you the basic principles that I follow while working on projects which have little or no designs prepared for the developer.
Wireframe everything!
Yeah, you read it right - you should wireframe everything! For those who don’t know what wireframing is, it’s just a simple method of laying out the content and functionality of the feature you are working on, on a page which takes into account the end user’s needs and the user’s flow, how they interact with different elements and where they end up. This helps you out to plan ahead and reduce wasted time when marking up and styling your code.
Keep your wireframes loose
The most important thing here is to plan and not to make it all pretty. The layout and the user flow come first before making things easy on the eyes! Make sure with the client or teammates who are working with you that your wireframes capture the essence of the feature you are developing. Once approved, you can take the additional time and make everything look nice and pretty. This can be an enormous timesaver. Plan ahead and lose less time with refactoring!
Wireframes can be simple sketches drawn in your notebook or different creations made in software like Photoshop, Adobe XD, Sketch and so on. I would recommend using Freehand by InVision, because you have the ability to collaborate, be it with your client or a teammate. If you have a graphic tablet, even better, you can just plug it in and you have the same result as sketching on a piece of paper.
Example of a mobile view wireframe made with Freehand by InVision
Composition
By composition I of course mean that you need to keep an eye on how you align your elements.
A simple example of that could be that you have a title and a paragraph and each of them has a different alignment. Let’s say that the title is aligned to the left and the paragraph is centered. In this case the alignment is odd, the user could be confused and the content is harder to read.
A simple example of a correct/wrong alignment
Size does matter
This is a common mistake that I see people make. You need to keep the size of buttons and other UI elements in consistent proportions on the whole page, whatever the case. Use contrast to make them distinguishable by the level of their importance. A button is still a button and you don’t have to scale them up in order to make them feel more important.
Example of using contrast instead of scale to demonstrate importance of UI elements
Spacing and typography
Once upon a time we were using dividers in order to achieve a better division between different elements. But users tend to evolve and can distinguish between elements better than a few years back. So instead of using dividers I recommend the usage of whitespace, just space things a little more and the user will not miss them.
As I mentioned before, the final design should be easy to read. Spacing of typography plays a major role in that. When dealing with Headings and a body text I usually tend to follow the ½ rule. It’s quite simple. You just take the height of the heading, divide it by two and use that value as the space between the bottom of the heading and the top of the body text. It looks clean and works for most use cases.
Example of good spacing
Outro
These were just a few simple examples of how to improve your designs, but you would be surprised how often I see these mistakes. There is much more that I didn’t mention. Color theory or Typography are both huge topics by themselves and I wanted to avoid writing a long blog post which would bore you to death.
I sincerely hope that these few tips will help you out in your daily development life, improve your current workflow and most importantly lead to less refactoring of your code which will in the long run save your and the clients time.
