I am not a designer! But as a front-end developer, sometimes, you have to simply design the page, such as this blog to make it readable and at least comfortable. Besides, a good developer need to understand the designer’s work. I will cover this in the next post.

The design of following page is simple. The conception and implementation just cost 2 hours. There are no low-fi or high-fi of course.

It is too simple, but the page highlight the content and simplify the user experience. We can easier get the information we want. How to reveal the content and how to make simple UI design? The followings are the most important tips for the design.

###Color schemes Create of effective color palettes for designs is complex. Color theory is a science. I used to spend lots of time adjusting the site colors. What you actually need, for this kind of simple design, is a simple color scheme. There are tools that could help to generate the color scheme for you. I like Adobe Color CC. You can create from an image you like or choose a popular theme that predefined.

Find more from smashing magazine’s color theory if you want to be more professional.

How to use the color schemes to your site then? Usually the site has more than 3 colors:

  • Primary color : #009aff, usually to highlight the content
  • Font color : #323232
  • Background color: we use a white background image in this case
  • Secondary color : usually be used to subtitle or buttons

Don’t use too many colors on your web pages.

###Separation delimiter The separation of page components is really important. It will straighten out the mess of contents and highlight the important. There are several methods to split the page region.

  • Add different background for the component. The most straight forward example is to add a darker background to sidebar.
  • Add one side border or box-shadow to the component. The color do not need to be dazzling.
  • Add spacing to the surroundings.
  • Grouping the components.
  • Make the position fixed or static. We usually fixed header to make it more obvious and reachable.

###Font Again, no matter what font family, font size, or font color you choose, it should be readable.

Find special fonts at Google Fonts, Fonts, or else.

###Icons The icons on mobile site and mobile app popularize the usages of icons on web designs, especially the font icons. There are lots of font icon websites. I like the fontello.com because of two reasons:

  • It has plenty varieties of icons
  • It can be customised

There are other websites supply these as well, you can find the ones you like.

###Hover It is not necessary, but will highly improve user experience. It doesn’t mean we need fancy animation when hovering.