We all know Web and UI design changes frequently, remember when “frames” were cool ? What about huge gradient “stickers” to highlight a sale ?

The web is shifting to a more clean, mobile frontier and I wanted to spend a few minuets going over what to expect and how designing a website that is both “flat” and “responsive” can improve user-engagement, sales and a brand.

So what’s flat design ?

Just as the name implies, flat design intends to simplify elements by flattening and removing any extra elements like shadows, bevels, textures and gradients that could create a 3D look. (These fancy effects also tend to take a long time to load!)

The concept is to simplify content and interfaces by stripping any unnecessary elements, decorations or anything that isn’t important to the main application of the content. Keeping things simple allows developers to easily provide consistency throughout different platforms as well.

Colors tend to be a bright but muted, here are some great examples: http://flatuicolors.com/

colors

Shapes tend to be square or slightly rounded squares. It keeps things simple and easier to read. Using circles, triangles or other geometry has been used in some flat design, but can be risky and hard to code across platforms.

Usability is key in flat and responsive design. If we design and code a fancy advanced look but visitors can’t navigate or find what they’re looking for, they’ll quickly leave. Instead of highlighting important content, why not just strip everything else away ?

Here are a few nifty examples:

http://oak.is/
http://werkpress.com/
http://mkprogramming.com/

How does this help a brand?

Companies are spending thousands of dollars every month driving potential clients / customers to their websites and when it comes to marketing everyone is interested in ROI. Flat and responsive design keeps users on the page longer and if they’re on a mobile device, users will quickly leave if the website isn’t optimized for their device.

Talk about a serious waste of money! If visitors can’t quickly find what they’re looking for, they’ll leave. Stripping away elements that are not important keep users engaged and they can interact easily, quickly and happily!

What’s responsive design anyways?

Responsive websites¬†“respond” to their environment, they’ll work on a desktop, tablet, phone and next months cool new gadget because they are able to fluidly resize and lay differently on the page depending on width.

Typically a fixed width design is used for large screens and potentially an ipad, but then the design switches to a fluid width for smaller sizes like an android phone.

You can re-size this website right now (mkprogramming.com) and watch how elements shift around based on the environment.

devices
(photo from: this article)

Where to start ?

When designing a responsive website, it’s best to start small – design the mobile content first and then expand from there. Remember that elements will need to be fluid and keep things simple!

Here are few cool examples, be sure to re-size your browser window:
http://launchrock.co/
https://www.wallmob.com/
https://thankfulregistry.com/
http://www.joyridecoffeedistributors.com/

Conclusion:

Mobile devices are here to stay, and before we know it (ie: next year) more people will be using mobile devices than desktops to view websites. Keep things simple and responsive!

Although any trend is simply a trend at best, flat design is a great concept to consider – it’s simple and effective.

Leave a Reply

  • (will not be published)