blog

A BACKEND DEVELOPER’S GUIDE TO UI DESIGN

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.

Related posts

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

    http://cosmedicbook.com/treatments/info/Venus-Legacy

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

    http://cosmedicbook.com/treatments/info/Laser-facial

  3. The reason is very simple: the sample space of a normal distribution is the whole real set of numbers extending from −∞ to +∞. In contrast, the sample space of a proportion π extends from zero to one. Another point is that the beta distribution is symmetric only when (π = ½ – beta). The beta distribution,
    The author kindly provided me with the raw data allowing me to reanalyze the results within his focus. I came up with the results shown in Figure 3A which may be advantageously compared with Figure 3 of the article.

  4. be more than a one-line comment, such as “Great idea!” As much as we all like to receive compliments, this kind of comment does not contribute anything to the overall discussion and often only serves to promote the person leaving the comment. Take time to explain why or how or….
    Warren Ediger, an adult ESL specialist and former college and university instructor, created Successful English in 2006. He and his family live in southern California, about 15 minutes north of Disneyland.

  5. If English is your second language, Successful English is a good place to find clear explanations and practical suggestions for improving it.
    One of a blogger’s toughest tasks is managing the discussions around posts, and determining which comments are valuable and which are spam.

  6. Whenever you post content, it is almost guaranteed you will receive some spam in your blog comments. People will submit comments that are completely irrelevant to the discussion to get exposure for themselves or drop a link to their website.
    Remember, there is no comment system, plugin or tactic that will fully eliminate spam. Even if you require registration, people who want to leave spam will simply register and then leave spam comments.

  7. Requiring registration or using advanced commenting systems will reduce the amount of spam you receive. However, it may also lower the overall number of comments you receive. This is something to consider when you choose a blog comment system and configure your settings.
    Most blogging platforms such as WordPress, Blogger and Tumblr have a built-in commenting component. With Drupal, the default comment module must be enabled.

Leave a Reply