5 Tips to Simplify Your Web Design

simplebits 5 Tips to Simplify Your Web Design

Simplicity rules! It makes a websites look sleek, reduce nagivation confusion and it helps achieving desired goals and results (I.e., more signups, subscribers and sales). But too often it seems elusive to simplify your website design. No matter how hard you try, you can’t make your work look like Apple’s. So what does a website designer really needs to do? Fret not, for there are 5 starting points to simplify your website design.

A simple website design shouldn’t be a daunting all-or-nothing ordeal – you can simplify your design by taking small steps. Simple tasks like putting the focus only on the essential elements of your website, getting rid of the unnecessary, reducing the number of pages your site has, getting more content above the fold, and limiting the number of colors you use. You can always fine-tune and improve your simple design, but the important thing here is to get started. Ready to start simplifying your website design? Awesome. Without further ado, here are 5 starting points to simplify your website design.

 

1. Focus Only On Essential Elements

thesis 5 Tips to Simplify Your Web Design

This first step probably seems forehead-slapping obvious: of course I should put the focus on the essential elements in my site, what am I, an idiot? But a surprising number of websites fail to achieve this and the result is a big mess of important and unimportant elements spewed onto a page. I’m as guilty of doing this in the past as anybody. It’s hard to be objective and prioritize what’s important or not, because everything seems essential. If you want your website design to be simpler, identify what needs to be focus, just like with any good visual design or piece of art. And that means putting the focus only on the essential elements.

Use the 80-20 rule

What 20% of what’s on a page gives 80% of the value and content that people go there for? It could be the copy, some social proof (review snippets, testimonials, media badges), and a signup form or call-to-action button, for example. That’s the 20% right there. On your website, as well as on each individual page, focus on displaying only the 20% of site elements that are delivering 80% of that usefulness.

This isn’t a technical step but a principle that you can use as your guide to simplify your website design constantly. The 80-20 rule will help simplify your website design by pushing you to trim your site elements down to the essentials. What’s really cool is that the 80-20 rule can also help increase your desired results that you hope to achieve on your website. For example, an increased conversion rate in visitors subscribing, signing up, or buying. How? You’re making it so there are less distractions and things for visitors to click on to leave the page.

As we all know, we’re always looking for an excuse not to purchase something at the final step, and any reason to navigate away is a good one. Reduce those reasons and click-away options with the 80-20 rule.

Chris Pearson, creator of the popular Thesis WordPress theme framework, says this is exactly what helped increase sales on his website.

2. Get Rid of All Unnecessary Elements

tumblr 5 Tips to Simplify Your Web Design

We’re continuing with the 80-20 rule here.

Now that you’ve identified the 20% of website elements that will get you 80% of your desired results, it’s time to get rid of all unnecessary elements. In other words, the 80% of website elements that will get you only 20% of results. It could be social media sharing widgets, sidebar elements, blog post meta details (date, time, author, number of comments, etc), or links in the footer (this is especially a huge culprit a lot of the times, particularly when the visitor is looking for the aforementioned excuse to navigate away from the page).

3. Reduce the Number of Pages

squarespace 5 Tips to Simplify Your Web Design

A large part of simplifying your website design is to simply have fewer places to explore and click around. You can do that by trimming the page count. Either get rid of unnecessary pages that deep down inside you know aren’t needed, or at the very least, fuse multiple pages into one. I mean, you don’t really need to separate “about the site” and “about me” pages.

Firstly, get in the mindset of the visitor – if you were to arrive on your website, what are the key things would you want to do? For instance find out what your stuff is about? Or contact you? Next, make sure that your pages facilitate what is necessary and nothing more. Don’t keep unnecessary pages on your website because you think you need to, or because other websites have them. When you reduce the number of pages on your website, not only it is easier for your visitors to focus on your content because there’s less places to click around, but your navigation menu is simpler too.

We’ve all been on websites with too many nav menu items. We don’t know where to start navigating because we get overwhelmed by the choices. And when we get overwhelmed by being presented with too many choices, we go with choosing nothing. By having as few nav menu items as possible, you make your website not only simpler but more inviting and friendlier to visitors.

4. Get More Content Above the Fold

mailchimp 5 Tips to Simplify Your Web Design

Studies have shown that a majority of people spend most of their time above the fold on web pages (what shows up on the screen without scrolling down). So if you want to increase the effectiveness of your website, have the main content and call-to-action elements above the fold. You can do something as simple as shortening the header height if you have a logo and a navigation menu at the top of your website.

This involves nothing more than changing the header’s “height” value in your stylesheet (typically style.css or stylesheet.css). Also, see if a sign-up form or button is below the fold. Move that element higher up in the page so it’s the first thing a visitor sees. After all, that is your desired call-to-action of the visitor, so decrease the work needed to get to it (ie. scrolling).

5. Limit Your Color Scheme

37signals 5 Tips to Simplify Your Web Design

It’s easy to get carried away with colors. Why settle on 2 or 3 colors when you can have 12 or 13? But in order to simplify your website design visually, you need to limit your color scheme. When in doubt, use fewer colors. It’ll vary based on your design of course, but try sticking with no more than 2 or 3 colors to start off. If you need more subtlety and texture to your visual design, use shades of the same color – light blue for the background and darker blue for header and menu items.

I’m as guilty as anyone with getting wild with colors in the past. I’ll add this color, then another, and another – and before I know it, it looks like a rainbow diarrhea all over my website. You can have your website constructively simplified, but if the colors distract the eyes when you look at it rather than complimenting the content, then all that effort was for naught. So use fewer colors with your website design instead.

Having trouble choosing a color to start with? Before & After magazine has a useful free e-book on how to find the perfect color here. Need help with picking a color scheme? Try out this handy color scheme generator.

Last, but not least

apple 5 Tips to Simplify Your Web Design

Hopefully you’re now armed and ready to start simplifying your website design. You’ll be more proud showing off your website because it’ll look gosh-darned sexy and lastly, your visitors will have a much more enjoyable experience browsing in your website.

To recap, here are the 5 starting points to simplify your website design:

  1. Put the focus only on the essential elements
  2. Get rid of all unnecessary elements
  3. Reduce the number of pages
  4. Get more content above the fold
  5. Limit your color palette

Related Articles

  • 11 common web design mistakes. Things like avoiding complicated forms, unorganized content, bad readability, and a not-easily-located search bar – all will further help you to simplify your website design and make it a joy for visitors and a higher conversion rate for you.
  • Clean, simple and minimalist website designs. All of those website examples just further prove that a simple design not only looks sweet and impresses members of the opposite sex, but it greatly helps with the user experience

Over to you: what are your favorite website design simplifying tips? Have you seen an increase in your desired results from simplifying your design?

(bellefoong)

Beginner’s Guide to CSS3

Ever since the announcement of in 2005, the development of the level 3 of Cascading Style Sheet or better known as CSS3 has been closely watched and monitored by many designers and developers. All of us excited to get our hands on the new features of CSS3 – the text shadows, borders with images, opacity, multiple backgrounds, etc, just to name a few.

As of today, not all selectors of CSS3 are fully supported yet. But that doesn’t mean we can’t have some fun testing new CSS3 stuff. This post is dedicated to all designers and developers who are already familiar with CSS 2.1 and want to get your hands dirty on CSS3.0.

It’s a compilation of useful CSS3 reads, sample codes, tips, tutorials, cheat-sheets and more. Feel free to use them in your projects, just make sure it falls gracefully on incompatible browsers.

Getting Started with CSS3

Introduction to CSS3

An (roadmap) official introduction to CSS and CSS3. This document gives you an overall idea on the development of CSS3.

css3 roadmap Beginners Guide to CSS3

CSS3: Take design to next level

Advantages of CSS3, with explanations and examples of CSS3 properties and selectors.

next level Beginners Guide to CSS3

Several tricks with CSS3

Webmonkey brings you through several basic tricks in CSS3, including rounded borders, borders, drop shadows, image tricks and more.

Several tricks with CSS3 Beginners Guide to CSS3

Interview: Six questions with Eric Meyer on CSS3

Folks at Six Revision interviewed Eric Meyer with valuable insights and answers on CSS3.

eric meyer Beginners Guide to CSS3

CSS3: Progressive Enhancement

How you can use graceful (or, progressive) enhancement techniques to make use of CSS3 features in browsers that support them, while ensuring that your code will still provide a satisfactory user experience in older browsers that do not yet support those features.

css3 progressive enhancement Beginners Guide to CSS3

CSS3: Background and Borders

Rounded borders (border-radius)

A guide to creating rounded border with CSS3′s border-radius property.

css rounded borders Beginners Guide to CSS3

Rounded borders with image (border-images)

How to use images in borders with border-image property.

css image border Beginners Guide to CSS3

CSS3 borders, backgrounds and boxes

Detail explanation with examples of new CSS3 properties like: background-clip, background-origin, background-attachment, box-shadow, box-decoration-break, border-radius and border-image.

CSS3 borders backgrounds and boxes Beginners Guide to CSS3

CSS3: Text

Letterpress Effect

Create simple letterpress effect with CSS3.

letterpress effect Beginners Guide to CSS3

Six text effects using text shadow

Text effects include: vintage/retro, neon, inset, anaglyphic, fire and board game.

css text effect Beginners Guide to CSS3

Text emboss

How to correctly add an embossed effect to any text depending on the colors used.

text emboss Beginners Guide to CSS3

Beautiful typography

How to take basic markup and transform it into an attractive and beautiful typographical design through pure CSS3.

Beautiful typography Beginners Guide to CSS3

Text Rotation

Uses an image sprite and a sprinkle of CSS to get things positioned right.

text rotation Beginners Guide to CSS3

Outline Text

How to add an outline, or stroke, to your text using the CSS3 text-stroke property.

text outline Beginners Guide to CSS3

Text masking effect

Interactive text masking effect using the text-shadow CSS property.

text shadow Beginners Guide to CSS3

Link nudging (animation) with CSS3

Ditch Javascript and create nudge effect entirely with CSS3.

text nudge Beginners Guide to CSS3

CSS Selection Styling

Change text selection styling with CSS3.

text highlight Beginners Guide to CSS3

CSS3: Menu

Multiple-columns content

Using CSS3 to create a set of columns on your website without having to assign individual layers and (or) paragraphs for each column.

multiple columns Beginners Guide to CSS3

Sexy Tooltips with Just CSS

How to use the evolving CSS standard can enhance some lovely cross-browser tooltips.

Sexy Tooltips Beginners Guide to CSS3

More tooltips:

CSS3 & jQuery Drop-Down Menu With Integrated Forms

jQuery and CSS3 powered navigation menu that supports integrated forms.

CSS3 & jQuery Drop Down Menu Beginners Guide to CSS3

Dropdown menu

How to create a Apple.com alike multi-level dropdown menu using border-radius, box-shadow, and text-shadow.

dropdown menu Beginners Guide to CSS3

CSS3-Only Tabbed Area

Click on a tab, hide all the panels, show the one corresponding to tab just clicked on – all with CSS.

CSS3 Only Tabbed Area Beginners Guide to CSS3

3D Ribbons with CSS3

Create nice looking 3D ribbons with only CSS3.

3d ribbons Beginners Guide to CSS3

CSS3: Drop shadow

Drop shadow in image

Showcase several techniques and some of the possible appearances for dropping shadows without using images.

Drop shadow in image Beginners Guide to CSS3

Glow Tabs with Box Shadow

How to create intuitive and beautiful tabs in CSS3 with no image.

Glow Tabs with Box Shadow Beginners Guide to CSS3

CSS3 boxes without using images

15 different styles of boxes without using images. Works in Chrome and Safari.

CSS3 boxes without using images Beginners Guide to CSS3

CSS3: Buttons

Tutorial: Pretty buttons

How to create beautiful cross-browser compliant CSS3 buttons that degrade gracefully.

pretty css3 buttons Beginners Guide to CSS3

Tutorial: Dynamic buttons

How to create nice looking, dynamic buttons that are fully scaleable using the new CSS3 properties border-radius, box-shadow and RGBa.

dynamic css3 button Beginners Guide to CSS3

Speech Bubbles

Various forms of speech bubble effect created with CSS 2.1 and enhanced with CSS3.

speech bubble Beginners Guide to CSS3

BonBon buttons

CSS buttons that are sexy looking, really flexible, but with the most minimalistic markup as possible.

BonBon buttons Beginners Guide to CSS3

Github alike buttons

Collection of buttons that show what is possible using CSS3 while also maintaining the simplest possible markup.

Github alike buttons Beginners Guide to CSS3

Spinning, Fading Icons with CSS3 and MooTools

How to use CSS3 and MooTools to create dymanic, rotating elements.

Spinning, Fading Icons Beginners Guide to CSS3

 

CSS3: transparency and overlay

Opacity and transparency

Create image transparency with CSS3.

css3 opacity Beginners Guide to CSS3

Image overlay

Practical application of the CSS3 border-image property.

CACTC3 awesome overlays Beginners Guide to CSS3

More

Cheatsheets & References

CSS3 Cheat Sheet (PDF)

Printable cheatsheat with complete list of all properties, selector types and allows values in the current CSS3 specification from the W3C.

CACTC12 css 3 cheat sheet pdf Beginners Guide to CSS3

CSS Support in Opera 9.5

Complete list of the supported CSS selectors in Opera 0.5.

opera 95 css Beginners Guide to CSS3

Fonts Available for @font-face Embedding

Comprehensive list of fonts currently licensed for @font-face embedding.

font face Beginners Guide to CSS3

CSS 3 Selectors – Explained

A guide and reference to CSS3 selectors and its patterns.

css3 selectors Beginners Guide to CSS3

Cross-browser CSS3 Rule Generator

CSS3 rules you can copy and paste onto your own stylesheet.

CSS3 Click Chart

Get CSS3 styles like boz sizing, border radious, text shadow, and more within a click.

click chart Beginners Guide to CSS3

CSS Content & Browser Compatibility

Complete list of selector tables of both CSS and CSS3 with declaration for browser-compatibility check.

content browser compatibility Beginners Guide to CSS3
(bellefoong)

 

Creative design from the Nation's Capital

Get in touch with us!