Best Practices for UI Design
January 23rd, 2015
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. It’s simply a list of general front-end web development techniques I’ve learned so far. They are a good place to begin for those who want to get started with UI/UX design.
- Choose colors with good contrast.
- Choose clean, readable font.
- Encapsulate your CSS into a stylesheet.
- 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. It’s often the part that gets the most attention since it’s 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, it’s 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.
When selecting colors for you app or website’s 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 you’re 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, it’s important to strive for high text-to-background contrast.
To direct the user’s 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 website’s 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).
Pumpkin Programmer’s Color Palette:
2) Choose clean, readable font.
For body text, it’s 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, it’s 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.
3) Encapsulate your CSS into a stylesheet.
To keep your code organized and easy to maintain, it’s 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. what’s behind the scenes). A formal way of thinking about this separation is the Model-View-Controller paradigm.
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, it’s 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).
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):
Of course, it’s 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):
Encapsulating CSS into a style section (good modularization):
4) Make your UI responsive.
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, it’s 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 website’s 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.