Be sure to design your site for both mobile and desktop users. With that in mind, you can section out a 1280 px central container on a 1440 px wide page, before splitting the 1280 px section into 12 columns, with a 30 px gutter, as I’ve done here to create the templates for this website. Design your navigation in a way that gets visitors where they want to go with the least number of clicks possible. When designing a website, remember the three-click rule, which says that your viewers should never be more than three clicks away from what they are looking for. Include navigation options in the footer of your site.

An excellent design attracts new viewers to your website and keeps them engaged with the content there. But if you’re not a designer, choosing the best design for your website can be a daunting task. In this guide, we’ll explore 18 different website design ideas, along with a collection of real websites you can use as inspiration

18 website design ideas with real examples

1. Use a one-page website

A one-page website keeps all of the important information about your company on one page so users can learn everything they need to without being forced to navigate to different parts of your site. One of the best ways to accomplish this is by placing all of your information on a full-screen slider like the Galleon and Caravan site has done:

The most important thing to remember when working with this kind of design is that you want to avoid crowding the page with too much information.

While a great hero image will encourage the visitor to stick around and explore, a clean design will help them make the most of the website experience. Think about simple, easy-to-comprehend categories which your user needs to see. Make everything clear and clickable.

👉 How to create a one-page website

2. Website design ideas for video

Video content can be an effective component of any website, and it’s a particularly powerful way to welcome visitors to your home page. One site that uses video well on their homepage is the Canadian Agorapulse site:

You can choose to make a video easily playable from your homepage or even set it to autoplay, but make sure you don’t choose autoplay if the video includes sound. Many people prefer silent browsing.

👉 How to add video to WordPress

3. Invest in illustration

Custom illustrations are a great way to establish the unique feel of your brand and give visitors an idea of what working with your company will feel like. One site that does this particularly well is Social Media Examiner:

Their custom-illustrated banner conveys Social Media Examiner’s commitment to exploring new aspects of social media and the friendly approach they take to working with clients.

Of course, this route can get expensive, so you want to focus on two or three custom illustrations for your main page.

4. Accent your homepage with animations

Another great way to make your homepage unique and keep visitors’ attention is to feature custom animations. These can fill your entire homepage or be used as an accent like they are on the site for Best Day Ever Education:

Keep your animations simple and brief to accommodate visitors’ short attention spans. You may also want to include a call to action in your animation.

5. Gamify your site

One of the best ways to convince an audience to take action on your website is to make it fun. Zurb has done this particularly well with a website that acts like a choose-your-own-adventure game where you can use to find out how you can work with them.

You can create your own choose-your-own-adventure website fairly easily, or take this strategy to the next level by creating your own currency and rewarding users for specific actions.

6. Add a popup

Popups may be one of the most annoying marketing tactics on the web, but they’re also one of the most effective: in one experiment a single opt-in popup drew in 1,375% more subscribers. However, you don’t want to annoy people with popups before they read your content; the most effective time for a popup to appear is when somebody tries to leave your website.

Social Media Examiner has done this particularly well, with multiple popups using different visuals and wording to draw in the most subscribers possible:

👉 How to add personalized popups to WordPress

7. Use a full-size photo

Instead of a regular white background, consider using a full-size photo as the background for your homepage. Even better if the photo uses a face, like the background of the Bluehost homepage:

This helps people connect with your website, and your brand, on a more personal level.

8. Website design ideas for eCommerce

Do you sell products online? Make your homepage part of your eCommerce store and encourage people to start buying the moment they enter your website. You can see this idea executed really well on the Jeep People site:

Of course, if you choose this route you also want to make sure that you’re not making any of the common eCommerce site design mistakes.

👉 How to start an online store

9. Divide your homepage

Do you have several different products, services, or other pieces of information you want to share on your homepage? Consider dividing it into sections with blocks, vertical dividers, and white space.

One website that does this particularly well is Etsy:

10. Website design ideas for navigation menus

Floating navigation menus stick with your visitors as they scroll, making it easy for them to move to other parts of your website at any time. Many websites have adopted this navigation style to make their visitors’ lives easier, including the websites of smaller companies like STEAMLabs:

You can easily add a floating navigation menu using the free Sticky Menu (Or Anything) On Scroll plugin.

11. Focus on accessibility

If you want to reach audiences with visual impairments and mobility impairments, you need to focus on building an accessible website. The KidzWish Foundation is a great example of a website built with accessibility-first thinking:

You can make your own website more accessible by using large fonts and contrasting colors.

12. Website design ideas featuring your community

Is your website primarily the home of an online community? Consider making the forum, chatroom, or other primary means of communication your homepage. You can see this idea used well on Barista Exchange:

Of course, you want to make sure your page is still attractive. Customize your homepage with welcoming colors and graphics to draw people in.

13. Share your social proof

Social proof is one of the most valuable website design ideas in your marketing toolbox. Feature your best testimonials prominently on your homepage, as I have done on my own website:

You can amplify the power of your testimonials by working them into graphics and building a slider with those graphics.

14. Add a chat feature

A chat box or popup on your homepage allows visitors to interact with your brand and get basic answers right away. Best of all, you can use a WordPress chatbot to automate the entire process.

One site that uses a chatbot well is OptinMonster:

Consider having your bot pop up in the bottom right corner so it doesn’t interfere with other uses of your homepage.

👉 How to add live chat to WordPress

15. Add quizzes with broad appeal

Everyone loves an entertaining quiz that tests their knowledge or shows them something about themselves. You’ve probably spent at least a few hours on Buzzfeed quizzes yourself.

Another site that does this really well is the PlayBuzz site, which centers around Buzzfeed-style quizzes.

You can add quizzes to your own site easily with a WordPress quiz plugin.

👉 How to create a quiz on WordPress

16. Use brutalist design principles

Brutalist web design is design focused on raw content, with little regard for typical design conventions. You can see this principle used effectively on The Outline:

This principle won’t work for all brands, but it can be highly effective for companies focused on the arts, youth culture, or DIY culture.

17. Website design ideas for a unique homepage with glitch art

Glitch art uses digital or analog glitches to create a hyper futuristic aesthetic. Some of the most common techniques used to create this aesthetic are pixelation, light leaks, and double exposure.

One site that uses glitch art to create a powerful aesthetic is Active Theory:

18. Use a black and white palette

Sometimes the best thing to do is go back to the basics, and that’s exactly what a black and white palette helps you do. One site that does this particularly well is the marketing agency Councl:

You can use black and white photography or illustration to further customize this look.

Create your website today

With the website design ideas in this post, you should have plenty of inspiration to make your own website.

For help with that, we also have some guides on the technical process of making a website:

6 Tips For Creating A Website Design That Sticks With Users Using

Do you like these website design ideas? Have we missed anything awesome? Let us know in the comments section below!

Designing a website is easier than it has ever been. Long gone are the days of manual coding and restrictive print-based layouts. Today, almost anyone can create a gorgeous, responsive, functional site in minutes — as long as you know where to start.

Fortunately, the basics of website design are relatively easy to understand if you apply some common sense and careful planning. Your goal should always be to create a site that is both visually striking and easy to navigate and use.

In this article, we’ll discuss how to design a website and share six key tips. We’ll also introduce you to WP Website Builder and demonstrate how you can use this tool to create your own website quickly and easily.

Related: Here’s Why Responsive Web Design is a Must

How to Design Your Site: 6 Key Tips for Success

1. Plan Your Design Thoroughly

Before you do anything related to website design, you’ll need a concrete and thorough plan. At this stage, you should clearly define your site’s goals and expectations and outline what you hope to accomplish with it.

Here are just a few of the questions you’ll want to have clear answers to:

1. Is the site personal or commercial?
2. Do you want it to make money, and if so, how?
3. Will you be using advertisements or affiliate marketing?
4. How much traffic are you expecting?

Put your thoughts and ideas down on paper and start drawing up a plan. We mean that literally, by the way. A smart method of planning your site is to create sketches of how you want it to look and operate. You should also take everyone’s ideas into account if you’re working with another web designer or collaborator.

By the end of your planning phase, you should have a blueprint of the site’s top-level framework. This includes a plan for its user interface (UI), sidebars, and other page elements, as well as an idea of how navigation will work. Doing this first will make it much easier to bring your vision to life.

We’ve Got a Great Design Tool for You

When you partner with DreamHost you get access to WP Website Builder and more than 200+ industry-specific starter sites for free!

2. Create Your Site’s Visual Identity

6 Tips For Creating A Website Design That Sticks With Users Must

Once you’ve got an idea of your website’s structure, it’s time to look at its appearance. You’ll need to choose the fonts and typography you’ll want to use. If you’re working from an established brand identity, consider how your choices match up to offline materials. It’s also worth exploring how well the fonts you choose work with multiple languages and how effectively they scale up and down on differently-sized screens.

You’ll also need to decide on a color scheme. Again, if you’re creating a site based on a brand with an established visual identity, you’ve already done most of the hard work. Otherwise, picking a color scheme requires you to consider color theory and ensure your choices are accessible.

Thinking about the “feel” you want your site to have can make this decision easier. Colors represent different emotions and meanings, after all. For example, red is typically seen as an aggressive and impulsive color, while green is associated with health and the environment. You should take the time to choose your colors carefully since they can help you create a cohesive visual identity.

3. Consider the Layout and Navigation

If you planned ahead as we discussed earlier, this step will be a lot easier. You’ve already considered how navigation will work on your site. It’s now time to dig deeper and think about your website visitor and the journey they’ll take on your site.

The visitor’s journey refers to the possible paths that people can take on your website. In other words, you’ll need to consider how users will access different parts of the site from any given page. After all, you won’t always have control over how users first arrive on your website, so you can’t just rely on a homepage to serve as your hub. Navigation needs to be available across your site, and it has to be accessible and easy-to-use.

You also need to plan out the layout of each page carefully. To do this, ask yourself what each page on your site is trying to achieve. For example, if you want people to fill out a contact form, you’ll need a strong Call-To-Action (CTA) button. Your CTA should always be prominent and clear.

Every element on a page should be designed to promote the overall goal. It’s best to start simple and add elements over time to ensure you aren’t adding unneeded information or features.

Related: 7 Steps to Identify a Target Audience for Your Online Business

4. Pay Attention to the Details

When you’ve completed your website design and layout, it’s time to shrink your scope and focus on the details. These are the seemingly minor things that create the general look and feel of your site, such as buttons, menus, image placements, and so forth.

Treat each component on your site as a stand-alone object and give it proper attention. This is the kind of precise work that can seem excessive but will significantly help to refine your site overall. Your goal should be to make the final product better than the sum of its parts, and spending appropriate time and effort on those parts is the best strategy.

One way you can make your site “pop” is by adding engaging elements like microinteractions. We’ve previously discussed that these are a popular trend — and for good reason. They help make your site feel more interactive and living since it’s able to respond to the user in small ways.

You should also work on avoiding common mistakes, such as bad font rendering and poor color contrast. These are the kinds of issues that are easy to miss if you don’t get up-close with your site’s individual components. For that reason, make sure you give them the attention they require.

5. Prototype and Share Your Design

Prototyping is an integral part of the design process. A prototype is simply a demo version of your site that you can share with others. It can be presented as images, or you can create a static HTML representation of how each page is meant to look with little-to-no functionality.

Creating a prototype is an excellent way to give others an idea of what the site will look like when it’s done. If you’re working for a client, they will naturally want an overview of your plans and the chance to suggest changes. You should, therefore, show them a prototype early on so they can provide feedback. This will save you time down the line, as they won’t be surprised or displeased with your work when it’s nearing completion.

One thing to remember: site builders make creating a site so quick and easy that you often don’t need a separate prototype. You’ll be able to quickly put together a new idea and solicit feedback from others without creating a demo (more on this later).

Related: Everything You Need to Know About Using a Website Builder

6. Challenge Yourself and Be Willing to Experiment

Finally, remember that web design is a creative endeavor, and you should always be willing to challenge yourself. This applies whether you’re creating your first website or your 50th. For example, you can consider new ways of approaching a particular design goal. Maybe you’ll experiment with different color schemes, images, or a more accessible navigation layout.

This step is more critical than it might seem. Not only will it help you grow as a creator, but it will also give you an extra incentive to find new solutions. It’s easy to get stuck in a rut. Giving yourself a challenge in each new project is an excellent way to keep yourself focused and invested in your work.

One smart way to get started is by finding inspiration in recent design trends. You can consider how you can implement those trends yourself or even improve on them.

Related: 10 Web Design Lessons You Can Learn From StarWars.com

How to Design a Website Using WP Website Builder

WP Website Builder is a suite of premium tools and plugins built by our friends at BoldGrid. You can use these tools to create gorgeous designs for your website without having to touch a single line of code. Plus, if you sign up for any of our shared or managed WordPress plans, you’ll have access to WP Website Builder at no extra cost!

When you set up a new website with us, you’ll receive an email that includes your WordPress login credentials and some information about how to get started. One of the options at your disposal is to use the WP Website Builder setup wizard.

This wizard walks you through choosing a design for your website, setting up basic pages, adding vital information, and accessing the WordPress dashboard. First, let’s choose a “design,” which is a fancy way of saying a WordPress theme.

Related: How to Pick the Right WordPress Theme for Your Website

With WP Website Builder, you get access to dozens of starter site designs across 12 different categories. Once you choose the perfect theme for your website, you can select which pages you want to set up from the start.

Keep in mind that the available pages will vary depending on the theme you choose. If you see a design you like, but it isn’t quite perfect, don’t worry — you will be able to edit it in a moment.

For now, move on to the final step, where we’ll ask you to enter some basic contact and social media information.

WP Website Builder uses this information to set up social media sharing for you. If you don’t want to add this information, that’s okay.

When you’re ready, click on the Finish and Install button. While you wait for the quick-start wizard to set everything up, feel free to go have a cup of coffee.

As soon as your website is ready, you’ll get access to the WordPress dashboard. Before you do anything else, take a look at your home page.

We’re already off to a great start, but a few pages don’t make a website. At this point, you probably want to make some changes to the theme you chose. To do that, return to the dashboard and open the editor for the page you want to change.

Once you’re in, you’ll notice that we set up a new Post and Page Builder for you, which replaces the default WordPress Block Editor.

With this feature, editing the design of your pages and posts has never been easier. You can move elements (or blocks) of content around with your mouse, and get access to quick styling settings just by clicking on them:

If you want to add new blocks to your pages, all you need to do is click on the Add Block Component button at the top of the screen.

WP Website Builder includes a broad range of pre-built blocks, including website layout options, media elements, widgets, and more.

If you scroll to the bottom of the editor, you’ll notice that you also have access to Search Engine Optimization (SEO) recommendations, so you can help users find your new website.

From here on, all that’s left is for you to try out WP Website Builder for yourself. When you combine its theme selection with the drag-and-drop builder, designing a gorgeous website becomes a simple matter.

Website Development, Explained

Whether you need to install WordPress, choose a design template, or build a custom website, we can help! Subscribe to our monthly digest so you never miss an article.

Ready to Design Your Site?

Even if you’ve never touched a line of code in your life, you can still create a great-looking, functional website. All it takes is understanding the basics of what makes a successful site, and using an intuitive tool like WP Website Builder to put it all into practice. Web design, here you come.

Register for just $2.99

Normally $49.95