How To Design A Website? Step By Step Beginners Guide

Thinking about designing a new website or redesigning your old website? Here’s a step-by-step beginners guide on how to design a website for a higher engagement and easier use

9 Steps:

  1. Simplicity Is Everything
  2. WHITE SPACE!
  3. Design Hierarchy
  4. Shorten Your Message
  5. Focus On a Call-To-Action
  6. Be Consistent
  7. Speak The Language Of The Web
  8. Show Credibility
  9. Make It Shareable

1) Simplicity is everything

Whether you’re designing a landing page, navigation bar, or a blog, keep it simple. Try not to make it hard to the visitors of your site to find what they’re looking for.

In case you’re looking for a specific action you’d want your visitors to do, don’t make them scroll to the bottom of the page to do it. Use navigation wisely and guide them through the experience you want them to have.

Secondly, although your site design is important, most of your visitors won’t come to your site to look at your design. They’re going to your site to find something specific they’re looking for, or find information on your site.

Including pointless design elements (i.e., elements that fill no practical need) to your website will just make it harder for the visitors to finish the action they’ve started with.

From an ease of use and UX standpoint, simplicity is one the most important things on your design. Simplicity can be defined in a few ways. Here are a few examples:

  • Colors – Try to use a maximum of 3 main colors (not including shades). When you use a minimal amount of colors you make your website’s message look clearer and bolder.
  • Fonts – Use as minimal types of fonts as you can. A recommendation is two font types per website (for headlines and paragraphs).
  • Graphics – Use graphics to enhance the user experience your site already have. Use them carefully because graphics tend to take a lot of attention, so if they help guide the user to the action you want him to do – they fit.

Isn’t that better?

how to design a website

2) WHITE SPACE!

In general, I tend to see a lot of websites owners that tend to put every aspect of their business on the home page of their site. In terms of design and UX, It’s probably the worst you could do.

While showing what you have is important, today’s users expect you to simply guide them through your site. When your visitors encounters information overload on your site, they’ll probably rush for the exit button.

For that reason, I would suggest providing room and space between your design elements as much as you can (even if sometimes it looks too much). Spacing lines of text is important as the space between your paragraph and its borders. Whenever you feel it’s much easier to understand your website’s design, its message and the intention behind it – than you know it’s enough spacing.

3) Design Hierarchy

Right up with simplicity and white spacing, design hierarchy entails arranging and organizing website elements so that visitors naturally gravitate toward the most important elements first.

If we take the principle of guiding the visitor to a definitive action we want then to make – hierarchy can help us with that matter. The parts that are the most important for the visitor should be the biggest or the boldest and parts that are less important should be smaller or lighter.

It means that whenever we’re looking on how to design a website or and app, we should always first map all the important elements for us and then organize the elements by importance on the design itself according to our hierarchy.

When we talk about design hierarchy it’s important to note that it’s not only about our design structure but also about the colors and text sizes of the site – we need to set the primary colors and set the sizes of every header and paragraph.

Here’s an example of a beautiful landing page that implements a good design hierarchy.

4) Shorten your message

Make your message simpler and shorter. If there’s something you tend to say in two sentences try to make it one sentence, if you say your message in a sentence try to shorten it to 3 words.

A good example for this tip is this home page of Airbnb. They’ve managed to concise their message into 3 words that do explain their business in a most efficient way.

Airbnb - how to design a website

Hey, I know it’s easier said than done.  Picking the right words is not an easy task, but believe me, once you do invest the time on doing it you’d find yourself with a better design overall and much better user experience.
,

5) Focus on a call-to-action

In addition to our design hierarchy, a call to action is one of the most important things in your design.  A call-to-action (usually abbreviated as CTA) is an incentive that prompts your visitors to take action. It is, quite literally, a “call” to take an “action.”

How to Grow Your Online Tutoring BusinessIt doesn’t have to be a button, it doesn’t have to be a form of sign up. But a call-to-action means you guide your visitors into that one action that would make them get an “aha” moment. A moment when they realize your business purpose.

It about being clear on your message and let your visitors make their first step into eventually committing to your brand.

Google’s website has one of the best call-to-action on the internet probably. Why? Because they’ve realized that by typing a search term, you as user commit to their brand and understand what their business purpose is.

Brilliant call to action, ha?

google great website design

6) Be consistent

Ok, so you’ve made a great homepage with the help of my tips. What about all the other pages?

The overall design of your website should have the same fonts, colors, text sizes, backgrounds and even a constant tone of copywriting. All these elements contribute to a better user experience.

It doesn’t mean every page needs to look completely the same. You need to create different structures (inside the consistency of your brand and current language) to different pages. And by using common web design structures (as a landing page, blog etc) you can help your visitors understand what kind of content they are going to see on every page.

amazon how to design a website

Take for example amazon. Every product on amazon has the same layout structure where you already know how to find every piece of information you need in order to buy a product. Imagine if every product had a different design – would you still be able to find what you need?

7) Speak the language of the web

Like graphic design, web design has its own conventions. It means you have your creative freedom while understanding that your visitors expect to see a certain structure. As the internet evolves, we see a lot of different kind of structures such as a standard e-commerce layout or a social media layout.

Of course, rules are meant to be broken. But on the same note you should master the rules in order to break them. For example:

Most of the landing pages you’d see has their logo to the top left of the page (on websites written in English), their main navigation menu would be on the center or right side of the page.

Most of the visitors of your site would expect to go to the homepage when they’ll click on the logo.
While it might be tempting to throw all such design conventions out the window for the sake of being completely original or unique, it would be unfair for your visitors who’d expect to use your site in a certain way.

In order to provide the best experience possible for your site’s visitors, take advantage of the fact that you already know what types of web experiences they’re familiar with. You can use this information to make your site easier for visitors to navigate.

8) Show credibility

If you use the language of the internet and your visitors get the experience they expect to see – it should make your site more trustworthy. And if you want your visitors to come often – you should really think about credibility.

The best way to show credibility is to be transparent with your visitors. Give them all the information they need to know and keep it simple. Don’t make your visitors scroll too much to get the information, don’t let them get to another page in order to see more about your business. Explain in the simplest way the value of your business to your visitors.

A great way to build credibility is to use recommendations and reviews. Here’s a great lecture from Joe Gebbia the co-founder and designer of Airbnb, where he talks about how to design with credibility in mind.

9) Make it shareable

Design an easy way to share your content across social media sites. Think about how sharing tools fit into your new design. They can float on the side of your pages or can appear within your content, at the beginning or end of an article.

In Conclusion

Designing websites is much more than only designing. It’s about analyzing your visitors experience and building a design strategy that would complete your brand. With a little knowledge and guidance, it’s easy to learn web design and make beautiful and engaging websites.

See Also:

[do_widget id=wpp-2]

How to Grow Your Online Tutoring Business

6 thoughts on “How To Design A Website? Step By Step Beginners Guide”

  1. Great work on the web design guide tutorial! Its very comprehensive but still easy and perfect for people to follow!

  2. Interested outline on how to perfect a website design!
    I believe Perfect Design can only be achieved by great skills, attention to towards the requirements and understandings on what you are doing and trying to achieve.

    It all comes with experience, learning and exploring around. The more you explore the better you have the skills. Practice and practice until you make perfection in your skills!

  3. Thanks for the comment Bryan 🙂

    I totally agree with you. It takes time to perfect a website design, but with a few quality tricks and tutorials you can get there faster. This is why I made this tutorial. Hope it helped you!

  4. Hello There. I found your blog using msn. This is an extremely well written article.
    I will make sure to bookmark it and return to read more of your useful
    information. Thanks for the post. I’ll certainly return.

  5. Wow, Thank you so much for this article. I just started and I felt stumped and your article painted a clear picture for me. 🙂

Leave a Comment