Oursky has a lot of pixel lovers. Even though majority of our staff are developers, we take pride in our UI. In fact, our designers are perfectionists that not only design great front-end interfaces, they make sure our developers implement them properly.

Below, we’re sharing our internal design 101 guide that our designers created for developers. We hope it helps your implementation too!

Front-End Web Styling Basics

Layout

Zurb Foundation 6 Layout Templates

Front-end templates. Image courtesy of Zurb Foundation 6

Layout is knowing how to arrange the information on your page to guide user behaviour. The good news is, the web has many great, responsive templates.

  • Find a suitable framework. We recommend Foundation from Zurb, one of the most powerful responsive front-end frameworks.
  • Use rows and columns to create your layout quickly. Don’t depend on this once you populate with content. Grids are for basic layouts only.
  • DON’T mess with the default grid stylesheet.
  • Build responsive. Your content and elements should float around automatically. Avoid hard-coding and locking to specific positions.

Buttons

UI-BASIC-1

Centre-aligned button. Guiders are used for design software.

  • Equal padding, for top and bottom, left and right for your buttons / labels
  • Centre align your text. Don’t argue. Just do it, and go back to coding.
  • Create buttons that expand. Apply a minimum width in case the label is very short.
  • Include hover states. If the style for the hover state is not already given in your template, add a simple darken or lighten function. It’s elegant and works.

Labels

icon label UI design

Give space between your icon and label.

  • Icons should vertical-centre aligned in most cases to go with your labels.
  • Give appropriate spacing between the icon and label. The one or two pixels matter, so invest the time into it. People who start out usually put them too close, so try giving 10% more space than your first choice.

Typography

UI-BASIC-3

Checking heading and text cohesion for our design.

Text matters. Most good designers are obsessed about typography. You don’t need to learn all the terms, but check Adobe Typekit to see what styles are out there. Typography is also about spacing, which creates an overall character to your site and helps people read.

  • Choose universal fonts. Google Fonts are a great place to start.
  • Define your typography style. Use em /  rem sparingly. Check this comparison blog post
  • Check line height.  Text that’s too tight is difficult to read, especially on small screens.
  • Check letter-spacing. More space is clearer, but too much and the words get lost.
  • Use margin-bottom to separate text content (i.e. headers from paragraphs)
  • Check Word-wrap to see if it breaks your layout.
  • Use truncate (text-overflow: ellipsis) for text that is too long and breaks your UI.

Images

Buffer Pablo Twitter Facebook Headers

Know your screen dimensions across platforms. Image courtesy of Buffer Pablo.

  • Keep large files. Make sure you have images 2x the necessary resolution on hand.
  • Use smaller files. Compress the images to reduce load time for your site, which can turn off users.
  • Request SVG or PNG files from designers because you will need to scale your designs. SVG is better, but PNG is more universal.
  • Icon fonts are easier when there are a lot of icons on a web app. There are lot of great resources out there, such as Font Awesome.
  • Always lock your ratios. When you resize, choose the width or height and have your application auto-calculate the rest; if it isn’t, you haven’t locked the dimensions. Do not DISTORT image ratio.
  • Always check image sizes, dimensions & position. Are they where they’re supposed to be across all the platforms?

Alignments

Check our CSS hacks & resources for vertical and content alignment in our Code Blog.

If you found this post helpful, subscribe and bookmark our blog!