Tutorial 20/11/2013 – Flat Design

In today’s lesson we looked at Flat Design principles.

Flat design is an area that I have looked into previously and is design style that really interests me.

Earlier this year I created a web-site for my Uncle to showcase his paintings, which while not entirely ‘flat’, was influenced by flat style sites before I realised that this was an actual design principle.  

When designing the site (www.davidwebbartist.co.uk), I had just seen the new Windows 8 operating system and really liked the UI idea of using big, colourful tiles, and decided to use this idea as a starting point.

Since then I have followed the trend, mainly though the regular features in Web Designer magazine and various blogs, and have observed the colour / whitespace getting bigger and bolder, and an increasing use of parallax scrolling (varying layers scrolling at different rates) which adds highly versatile and dynamic visual options, and is something I would like to explore in the near future.

I have also noticed a trend for flat sites to make use of BIG footers that hide away nicely to a narrow bar, or indeed the same principle for the main header nav options.

Resources to check out:

  • designrazzi.com
  • pinterest

In today’s lesson Phil introduced us to UI Kits – an option I’d never heard of before.  There are some really beautiful design packages available, and I’m really looking forward to deconstructing some of them and attempt to recreate to get some practice and experience with creating UI graphics of this nature.

We were set a task to create a ‘flat-style’ home page for our current project sites, while adhering to the current ‘flat’ principles:

  • Bright colours / pastel colours
  • Consistent colour schemes
  • Big bold buttons / links
  • Big type for site title
  • White text / white icons on coloured backgrounds
  • Lots of ‘white’-space

WIth these principles in mind I created the following design for Victorianweb.org in photoshop:




I gathered the icons from various sources (via google searches).  Some were already white.  For those that were originally black, I inverted the colour (CTRL-I) then removed the background and positioned into place.

For the hero image, I removed the colour tint to make it more monotone, then added a gaussian blur.

The screenshot below shows the same site but with the footer expanded:




Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s