Design Trends

A Work In Progress

Flat/Minimal Design

Clean, simple and modern are 3 words that come to my mind when looking at a typical "flat" website. In fact, this website would probably be filed under this very category.

Is "flat" overused? Perhaps. But there's no denying the universal appeal of an uncluttered layout with sharp edges and lots of white space.

Here's an entire website devoted to showcasing flat design: fltdsgn.com.

Word of warning: this style is commonly viewed as the "hipster" of web design.


"Ghost Buttons"

Following the popular minimalistic trend in web design, "ghost buttons" or "inverse buttons" have several key characteristics:

On hover, the button's background color becomes solid; the text color is chosen for maximum contrast.

When done right, ghost buttons make elegant and effective calls-to-action (plus, they're fun to hover!). They are frequently placed on top of background imagery.

Example:

Loads more examples can be viewed here.


Parallax

Parallax sites consist of different "layers" of content that move at different speeds relative to each other to give the feeling of depth. It's like when you're driving in a car and nearby stuff appears to move faster than stuff far away.

Like flat design, many consider Parallax to be overused and underwhelming. In the correct situation however, it can be very effective and downright cool.

Click here to see the AWWWARDS' 20 best Parallax Websites for 2013.


Mixed Typography

When done right and used sparingly, using multiple font faces can bring an element of sophistication to your page. It's very common to see sans-serif fonts used for header text (h1,h2,h3...) and serif fonts used for paragraph text. Why? It makes it easier for visitors to discriminate and read. Take a look:

Example Sans-Serif Header

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo quia error, reprehenderit quaerat harum eligendi, incidunt nemo vero enim alias nesciunt quidem odio distinctio a libero nobis doloribus deleniti minus fugit pariatur officia itaque! Quis, aperiam qui voluptates dolorum dicta ab pariatur vel est corporis deleniti quasi praesentium consequuntur beatae.

My favorite typography resource is the Google Web Fonts library, which contains over 640 fonts to use in your project- for free. Since choosing the right fonts can be daunting, I suggest checking out this Google Typography project for examples of tastefully-used type faces.

Confused as to how to import a Google Web Font into your project? Follow these instructions:

  1. Find the font you would like to use: www.google.com/fonts
  2. Click the icon with a right-facing arrowing in a box to access the Quick Use page
  3. Select the styles you will be needing in your project (light, normal, bold, bold italic etc.)- remember, the more you import, the slower your page load time will be
  4. Decide which method you will use to import- either by including a link href="#blah" rel="stylesheet" type="text/css" in your head, by @importing at the top of your CSS or by placing javascript at the bottom of your html.
  5. Place the font-family: 'name of font' text into your CSS styles

Sexy Sorting

Check out the resources page- see how items rearrange automatically when you click the category buttons? Neat huh?

This technique is acheived (quite easily) using a popular Javascript library called Isotope.

A working example can be found here.