Best Practices for UI Design

January 23rd, 2015

mobile

In this post, I will review some good practices for front-end web development and UI (user interface) design. By all means, this is not an exhaustive list. Its simply a list of general front-end web development techniques Ive learned so far. They are a good place to begin for those who want to get started with UI/UX design.

Best Practices:

  1. Choose colors with good contrast.
  2. Choose clean, readable font.
  3. Encapsulate your CSS into a stylesheet.
  4. Make your UI responsive.

The user interface is the part of a software application that humans interact with. It could be a login screen to a social media site or falling coconuts in a video game. Its often the part that gets the most attention since its the most visible to everyday users. Another important concept in software development is UX (user experience).

UX is about optimizing the human-computer interaction by choosing appealing color palettes, readable font, and general user friendliness. I read somewhere that, if an application requires a manual, its already broken. Basically, what that means is that an app should be as self-explanatory as possible. The instructions should make sense and the interface should be easy to navigate.


1) Choose colors with good contrast.

text_contrast

When selecting colors for you app or websites user interface, avoid colors that are too similar in hue or intensity. This helps improve the readability of your content and decrease eye strain. In general, if youre making a website that focuses primarily on textual content (e.g. a blog), you should choose a solid, non-distracting color for your text background. For example, a white or ivory background contrasts well with black font. Likewise, a black or very dark gray background contrasts well with white font.

Note: For a more artistic site or app (e.g. an photo gallery), you may want to superimpose text over a background image. Still, its important to strive for high text-to-background contrast.

websites_contrast

To direct the users attention, place your colors in a strategic way. In general, avoid using more than four main colors for the overall template. For example, this website uses pumpkin orange, bright green, white, and charcoal (see the list below). Too many colors will overwhelm your users. A better approach is to be somewhat minimalist without being too bland for your app or websites particular image. A lot of websites use vibrant colors to highlight the interactive components (e.g. sign-in buttons) of the website and more muted colors for the more passive components (e.g. body text).

paint

Pumpkin Programmers Color Palette:

  •  pumpkin orange (#ff9900) 
  •  bright green (#ff9900) 
  •  white (#ffffff) 
  •  charcoal (#303030) 


2) Choose clean, readable font.

serif-san-serif

For body text, its best to minimize flair and focus on readability. It seems to be the trend these days to use sans-serif fonts like Arial, Helvetica, and Verdana since these fonts pair well with flat design.

For header text, you can use fonts with more personality. Whether your header text is sans-serif or not, its a good idea to use a different font for body and header text since it helps define the various sections of the page and breaks the monotony of seeing the same exact style of text everywhere on the page.

cupcake_site


3) Encapsulate your CSS into a stylesheet.

To keep your code organized and easy to maintain, its important to separate the interface from the functionality of your application. Basically, the interface is what the user sees. The functionality, on the other hand, consists of the inner workings of the application (i.e. whats behind the scenes). A formal way of thinking about this separation is the Model-View-Controller paradigm.

MVC

Model-View-Controller (MVC) is a way of organizing a piece of software into three main components. The model represents the data involved in an application (e.g. the database). The view represents the user interface (e.g. the stylesheet). The controller represents the module that integrates the view and the model (e.g. the web browser).

When I was first learning how to create webpages, I learned to customize the appearance of HTML elements using inline CSS. Although this is a quick and easy way to stylize a web page element, inserting CSS as an inline attribute is not a good practice for professional web development. Instead, its better to separate the CSS away from the HTML, either in a separate file (e.g. style.css) or in a separate part of the HTML document (e.g. between style tags).

boxRounder

For example, to make a div element with a charcoal background, rounded corners, and orange text color, I would inject the following a particular style attribute into that div element.

Adding an inline style attribute (bad modularization):

1 2 3 4 5 6 7 8 9
<!-- An example of inline CSS. -->
<div style="-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-color: #303030;
color: #ff9900;
padding: 1.0em;">
Hello World!
</div>
view raw inline_css.css hosted with ❤ by GitHub

Of course, its better to modularize code whenever possible. This prevents the programmer from having to rewrite the same code more than once, thereby saving time/space and reducing the chance of errors. Modularization also makes the HTML code easier to read and look up. In the code example below, I use a class selector to include CSS from elsewhere (either from a separate CSS file or from a style section within the HTML page).

Encapsulating CSS into a stylesheet (great modularization):

1 2 3 4 5 6 7 8 9
/** style.css */
.boxRounder {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-color: #303030;
color: #ff9900;
padding: 1.0em;
}
view raw style.css hosted with ❤ by GitHub

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
<!-- myPage.html -->
<html>
 
<head>
<!-- Include style attributes from a separate CSS file. -->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!-- Inject a style attribute with a class selector. -->
<div class="boxRounder">
Hello World!
</div>
</body>
</html>
view raw div_example.html hosted with ❤ by GitHub

Encapsulating CSS into a style section (good modularization):

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
<!-- myPage.html -->
<html>
<!-- Define style attributes in a style section. -->
<style>
.boxRounder {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-color: #303030;
color: #ff9900;
padding: 1.0em;
}
</style>
<body>
<!-- Inject a style attribute with a class selector. -->
<div class="boxRounder">
Hello World!
</div>
</body>
</html>
view raw div_example_2.html hosted with ❤ by GitHub


4) Make your UI responsive.

mobile

Modern websites tend to implement responsive design. Basically, a responsive site is one that adapts to various screen sizes and behaves in an interactive manner. For example, a lot of modern websites have a parallax scrolling effect. To see an example of this, check out the home page of this site on a desktop. As you scroll down the page, the foreground image and text will scroll past the background image. Adding neat little animation effects, if not overdone, can make your site more exciting for the user.

A common best practice in modern web design is taking a mobile first approach. This means that web developers should focus on making their websites look good on mobile devices first and desktops second. The reason for this is that mobile devices are becoming increasingly popular. Therefore, its likely that most people who try to access your website will do so on a smart phone or tablet. To make a good first impression, a website should look good on a mobile device.

For this websites theme, I used Bootstrap, a front-end framework developed by Twitter for building responsive websites. What has made my website responsive so far is the fact that it conforms to various screen sizes. The Bootstrap grid system displays elements in a fluid way. For instance, on a desktop browser at full-screen size, the sidebar of this website sits to the right of the main content.


Resources


Categories: designtechnologytutorials