For a backend developer, designing a user interface for an application can be difficult, primarily because you are not a hundred per cent comfortable with what you are doing. It’s like writing using your left hand when you’re a righty.
However, with the inception of frontend toolkits and frameworks, UI design has become a little bit more convenient for backend developers like you. Because of open source UI frameworks like Bootstrap, Foundation and Yahoo’s PureCSS, building the interface of your application has gone leaps and bounds in consistency, and comfort.
Of course, at first, it might be a little daunting. You have to take into account a few theories that you are not used to, and of course, there is this itch to sketch your own signature in the design itself. That is why you need to wake up the frontend designer in you.
But, first things first, you have to realize that frontend design is comprised of a series of steps that you shouldn’t skip. It starts with a piece of paper, or maybe a blank document. This is where you plot your mockup to kickstart your design. You may start using a low fidelity mockup and imagine how your interface will look when it is finished. After that, you have to make them look a little bit more real by digitalizing them using high fidelity mockup tools.
Okay, I pretty much explained to you how the process is. Here are my tips:
1) Make do with what you have
Of course there is this option where you have to build everything from scratch, and hey, I have nothing against that. But as a backend developer, I think it will not be necessary because doing this will make you waste a lot of both effort and time.
Here’s the deal, there are UI frameworks out there that you can tweak and tinker to make them your own. Frameworks like Bootstrap often come with a starting point UI, color scheme and components and this is where you can begin.
2) Tweak and tinker
UI frameworks are built with subcomponents that you can edit. You’ll find that there are common patterns on each framework’s approach. What you have to do is to break these patterns up and use what your backend code requires. You really don’t have to create the most beautiful interface, you’re not in it for awards, what you want to do is for something to work.
Now, after realizing that each component can be pulled out of the main UI template, you can now put them together in your design. Again, the tip here is to be keen. What works for the competing web apps? Did your competitor place the sidebar on the left? Do you think it will be effective if you put it in the right? If you find it to be so, then you just need to pull out a right sidebar from your template and plug it right in your design.
Of course this tip requires you to copy other designs. Remember what Picasso said, “Good artists copy, great artists steal”. You can copy other designs, or at least what works for them, and make it work better for you.
3) Know your color
Color is important in design. Different colors send different signals to your visitors. Humans, being the visual beings they are, are convinced with what they perceive as beautiful and comfortable to their eyes. User Interface is largely dependent on that human nature. That is why a lot of attention has been paid to building and selecting a specific color palette for different companies.
Of course, you are a backend developer, so this is not something you get in the first try. You have to note a few color combination techniques for your interface.
According to Kissmetrics, 93 per cent of people identify a company using their corporate color scheme. Of course, if you want your app to sell, you have to create a specific color scheme for it, otherwise, it won’t be trusted.
Think of Facebook, Twitter and Google. These three have their own color palette we identify them from. Is the color relative to their function? Honestly no. But it is important because the color is identified with their brand.
4) Now what?
Now what? Now, you start making mistakes. Being good at UI, and backend development, both at the same time, requires you to become patient and develop a sense of aesthetics. It will take you a few bad mistakes before becoming attuned to what looks good and comfortable to the user’s eye. You will make a couple of bad decisions on the way, but that shouldn’t prevent you from trying, exploring, and experimenting because no one ever gets it right first time.
If you want your web app to look good, you need to take this step: try now. You have nothing to worry about, as long as you keep in mind these tips.
Don’t forget to copy, steal, and modify until you get what your style really is.
