{"id":8386,"date":"2010-10-11T21:45:53","date_gmt":"2010-10-11T13:45:53","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=8386"},"modified":"2023-04-06T21:56:44","modified_gmt":"2023-04-06T13:56:44","slug":"5-tips-to-simplify-your-web-design","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/5-tips-to-simplify-your-web-design\/","title":{"rendered":"5 Tips to Simplify Your Web Design"},"content":{"rendered":"

Simplicity rules!<\/strong> It makes a websites look sleek, reduces navigation confusion and it helps to achieve 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\u2019t make your work look like Apple\u2019s. So what does a website designer really needs to do?<\/em> Fret not, for there are\u00a05 starting points to simplify your website design.<\/strong><\/p>\n

A simple website design shouldn\u2019t be a daunting all-or-nothing ordeal \u2013 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.<\/p>\n

Ready to start simplifying your website design? Awesome. Without further ado, here are 5 starting points to simplify your website design<\/strong>.<\/p>\n

<\/p>\n

1. Focus Only On Essential Elements<\/h2>\n
\"Thesis\"<\/figure>\n

This first step probably seems forehead-slapping obvious: of\u00a0<\/em>course<\/em>\u00a0<\/em>I should put the focus on the essential elements in my site, what am I, an idiot?<\/em> 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\u2019m as guilty of doing this in the past as anybody. It\u2019s hard to be objective and prioritize what\u2019s important or not, because\u00a0everything<\/em>\u00a0seems essential. If you want your website design to be simpler, identify what\u00a0needs to be focus<\/strong>, just like with any good visual design or piece of art. And that means putting the focus only on the essential elements.<\/p>\n

Use the 80-20 rule<\/h2>\n

What 20% of what\u2019s 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\u2019s the 20% right there. On your website, as well as on each individual page,\u00a0focus on displaying only the 20% of site elements that are delivering 80% of that usefulness.<\/strong><\/p>\n

This isn\u2019t 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\u2019s really cool is that the 80-20 rule can also help increase the 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\u2019re making it so there are fewer distractions<\/strong> and things for visitors to click on to leave the page.<\/p>\n

As we all know, we\u2019re 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.<\/p>\n

Chris Pearson, creator of the popular Thesis<\/a> WordPress theme framework, says this is exactly what helped increase sales on his website<\/a>.<\/p>\n

2. Get Rid of All Unnecessary Elements<\/h2>\n
\"Tumblr\"<\/figure>\n

We\u2019re continuing with the 80-20 rule here.<\/p>\n

Now that you\u2019ve identified the 20% of website elements that will get you 80% of your desired results, it\u2019s time to get rid of all unnecessary elements<\/strong>. In other words, 80% of website elements will get you only 20% of the 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 time, particularly when the visitor is looking for the aforementioned excuse to navigate away from the page).<\/p>\n

3. Reduce the Number of Pages<\/h2>\n
\"Squarespace\"<\/figure>\n

A large part of simplifying your website design is to simply have fewer places to explore and click around. You can do that by\u00a0trimming the page count.<\/strong> Either get rid of unnecessary pages that deep down inside you know aren\u2019t needed or at the very least, fuse multiple pages into one. I mean, you don\u2019t\u00a0really<\/em>\u00a0need to separate \"about the site\" and \"about me\" pages.<\/p>\n

Firstly, get in the mindset of the visitor \u2013 if you were to arrive on your website, what are the key things would you want to do?<\/em> For instance find out what your stuff is about?<\/em> Or contact you?<\/em> Next, make sure that your pages facilitate what is necessary and nothing more<\/strong>. Don\u2019t 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 are fewer places to click around, but your navigation menu is simpler too.<\/p>\n

We\u2019ve all been on websites with too many nav menu items. We don\u2019t 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.<\/p>\n

4. Get More Content Above the Fold<\/h2>\n
\"MailChimp\"<\/figure>\n

Studies<\/a> 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.<\/p>\n

This involves nothing more than changing the header\u2019s \"height\" value in your stylesheet (typically style.css<\/code> or stylesheet.css<\/code>). Also, see if a sign-up form or button is below the fold. Move that element higher up in the page so it\u2019s the first thing a visitor sees. After all, that\u00a0is<\/em> your desired call-to-action<\/a> of the visitor, so decrease the work needed to get to it (ie. scrolling)<\/strong>.<\/p>\n

5. Limit Your Color Scheme<\/h2>\n
\"37signals\"<\/figure>\n

It\u2019s 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.<\/strong>\u00a0It\u2019ll 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 \u2013 light blue for the background and darker blue for header and menu items.<\/p>\n

I\u2019m as guilty as anyone of getting wild with colors in the past. I\u2019ll add this color, then another, and another \u2013 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.<\/p>\n

Having trouble choosing a color to start with?<\/strong>\u00a0Before & After<\/strong> magazine has a useful free e-book on how to find the perfect color here<\/a>. Need help with picking a color scheme?<\/strong> Try out this handy color scheme generator<\/a>.<\/p>\n

Last, but not least<\/h2>\n
\"Apple\"<\/figure>\n

Hopefully you\u2019re now armed and ready to start simplifying your website design. You\u2019ll be more proud showing off your website because it\u2019ll look gosh-darned sexy and lastly, your visitors will have a much more enjoyable experience browsing in your website.<\/p>\n

To recap, here are the 5 starting points to simplify your website design:<\/p>\n

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

    Related Articles<\/h2>\n