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:


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.


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.


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.


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.

Related posts

  1. 高能聚焦量超聲波( HIFU )以物理性聚焦集中成一點, 快速穿透皮膚真皮及脂肪層面直達面部表淺肌肉腱膜系統( SMAS )層令其組織細胞分子高速磨擦 , 瞬間升溫至60 -70 度,令整個表淺肌肉腱膜系統( SMAS )受熱收縮,形成熱固化區域, 令結綈組織同時拉緊,達到拉皮防皺及美容效果。SMAZ聚焦超聲波提供了最有效的HIFU能量收緊皮膚及刺激胶原蛋白新生,提升彈性,恢復更緊緻的皮膚和更年輕的美貌。

  2. 以低能量的1064-Q激光反覆掃於皮膚表面,逐步改善皮膚色素問題。 治療時產生的熱能能促進膠原蛋白的再生,回復肌膚彈性。 使用7mm平行光光頭,使輸出的激光更溫和及均勻。功效: 去除紋身 美白及去除面毛 令整體膚色更白更均勻 減淡及去除荷爾蒙斑或反黑 增加皮膚膠原蛋白,改善皮膚彈性 減淡深層色斑 : 黃褐斑,荷爾蒙斑,蝴蝶斑 以低能量的1064-QS激光反覆掃於皮膚表面,逐步改善皮膚色素問題 使用8-10mm平行光光頭,使輸出的激光 更溫和及均勻 1. 激光能透進皮膚深層 2. 激光被黑色素吸收 3. 產生熱能將黑色素體分解 4. 被呑噬細胞吸收及排出體外

Leave a Reply