Website Design Ideas: Tips, Tools and Resources to Try

. No Comments
Website design ideas
Designed by Freepik

Consistently coming up with great website design ideas is hard labor. When you can’t get the creative juices flowing on demand, it’s easy to feel stuck and become frustrated.

If that’s how you are feeling right now (or sometimes), this post is here to help you. In the following, we want to provide you with ways to get over the hump when the ideas are just not flowing.

The first part will provide you with web design tips that can open up new perspectives and spark some change. After that, you will find some kick-ass tools for making your design efforts easier. In the last part, we will list a number of websites you can visit to find inspiration for new website design ideas.

If all of this combined, won’t help you get creative again, I’m not sure anything will!

9 Web Design Tips for When You Feel Stuck

In order to help you come up with good ideas, we start with web design tips you can use immediately to improve what you are working on.

1. Use Pinterest Mood Boards

Pinterest is a great tool to create mood boards. You can collect visual material that you think would be helpful in your project or will provide a direction. These can be images, colors, layouts, existing websites and more.

Pinterest mood boards

The mood board will act as a central hub for your design inspiration. You are also able to share it with clients or collaborators so they can contribute with their own material.

2. Create a Plan

Making a planYou know what they say: Failing to plan is planning to fail. This is also true in web design. If the website design ideas fail to come around, maybe it’s because you haven’t dealt with the fundamentals yet. Only when the basics are in place, will you be able to put creative touches on top. Here’s what planning can look like:

  1. Define the website’s goal — You need to know what the site is actually supposed to accomplish. If you don’t, what the hell are you designing towards? Good goals are SMART: Specific, Measurable, Attainable, Relevant and Timely. More on that here.
  2. Sketch out the buyer’s journey — Besides the overall goal, you also need to figure out what road you want visitors to take. From when they hit your site all the way to whichever objective you have in mind. That way, you can create a structure to guide them along the way. Hubspot has a great article on that.
  3. Come up with a style guide — Creating a style guide will help you stay consistent in your design. It defines fonts, colors and other design elements. Using one promotes uniformity, especially when working with others. Google is a good example.
  4. Plan your SEO — Planning is also important for SEO. Create a website map to understand how to structure your information for both visitors and search engines.

3. Focus on the Structure First

Just like making a plan, concentrating on your website’s structure first helps you step away from the process and get more of a bird’s eye view.

It can help to work with a different medium than your computer. For example, by making sketches on paper with a single pen, you can forget about colors and other details for the moment. If you are using flipcharts or a whiteboard, you can even make the whole thing collaborative.

A great exercise can also be to draw the website on a post-it note. This will force you to stick to essentials. A variation of this is to create your design in shades for gray first and only add color later. This way, you are forced to establish a visual hierarchy without relying on color.

Start with grayscale
Laura Elizabeth/Smashing Magazine

If you are hell-bent on using your computer to design, you can use the “squint test”. That means moving away from the screen and squinting your eyes. The blurred image will show you what is most obvious on your site and what the first-time visitors will most likely notice first.

4. Stick With Standards

It’s in the nature of designers to want to be creative. That’s generally a good thing. Keep in mind that it’s necessary to set some boundaries within which to be creative.

For example, in web design, there are a number of established standards. Visitors are used to certain design tropes and website elements. When you break those rules too much, it might confuse them and turn them off.

In fact, Google research has shown that the less a website confirms to prototypical standards, the fewer users perceive it as beautiful. Because of that reason, sticking to established rules is a good idea.

Among those established standards are:

  • Consistency in branding and design across all pages
  • Website logo in the top left corner
  • Contact information in the top right or center
  • Main navigation across the top of the screen
  • Main headline/value proposition and call-to-action high up on the homepage
  • The search feature in the header
  • Social media icons in the website footer

I’m sure as an avid Internet user, you are already aware of more standards websites adhere to. If not, you can find more of them here.

5. Think About What You Can Eliminate

When you know the objective of your site and pages, this also allows you to get rid of everything that doesn’t serve that purpose. This streamlines your design and makes it more pleasant to look at.

Again, there is research to back this up. In the same study mentioned above, Google has found that visual complexity is negatively correlated with website appeal. In short – people don’t want to be overwhelmed! Simplifying your design is good for other features, e.g website speed.

Here are a few things you can safely eliminate:

  • Menu items — Of course you want others to explore more of your site. However, an overloaded menu can be super confusing and have negative effects. Again – stick with the essentials!
  • Sidebars — More and more websites are phasing out the sidebar. What do you have in your sidebar? Is that really important?
  • Muddy jargon — The same thing that goes for stock photos goes for language. Overused phrases, cliches and hollow words make people tune out. Stop using them, inject some personality in your writing, learn some power words and learn copywriting.

6. Start With Mobile

Mobile devices have taken the world by storm. By now, more people surf the web via phones and tablets than on desktop computers.

Statcounter mobile vs. tablet vs. desktop use in June 2018

 

Additionally, Google announced that they are rolling out their new mobile-first index. That means, when fully in effect, the search engine will judge every website on their mobile presence first. If it’s not doing its job properly, you will take a hit in the search rankings.

For that reason, when designing a website, it would be a good idea to start with the mobile presence first. From now on, mobile users will be your primary customers. Therefore, you better make sure they feel catered to.

At the same time, it’s good practice for coming up with website design ideas. Again, starting with mobile forces you to concentrate on the essentials and think through the purpose of your design. You can then further unfold and add elements as the screen size grows bigger.

7. Pay Attention to Content Formatting

Content formatting is an underestimated tool for web designers. Content is the most important element of your site, be it in the form of blog posts or a sales copy. In the end, that is what you want visitors to consume. Your design’s purpose is to present it in a way that they do.

Unfortunately, by now people are so saturated that few of them read everything on your page. Instead, most visitors scan. Furthermore, they tend to do so in an F-shaped pattern.

Content formatting

It means that you need to make your content fit their consumption habits to make it more impactful.

Here’s how to do that:

  • Include headings — Headings are a great way to break up content. Many readers also use them as anchor points for scanning and read only those parts under headings that seem interesting to them. Therefore, make sure to use headings and make them descriptive.
  • Use paragraphs and lists — Nobody wants to read one large blob of text. Paragraphs divide content into little chunks. Open up a new one whenever you open up a new point. Lists have a similar function and make information more accessible. Use them as well.
  • Don’t skimp on media and visuals — Visual information is much more approachable for the human brain than text. For that reason, it’s a good idea to use images and other media to underline the points made in your copy. It’s also, again, a great way to break up longer pieces of text.
  • Optimize your fonts — Your use of fonts also greatly influence legibility. The most important tools you have here are the size and line height. Go for at least 16px (Medium has 22px!) and make sure to add more line height the smaller the font you are using.

If you investigate this article, you can see all of the above in effect.

8. Try Out One-Page Design

Back in the day, website design was all about the fold. Everything important had to be above the limit from which users would start scrolling. There’s still something to be said about it since that’s still where users spend most of their time.

Visitor viewing time - the fold

That doesn’t mean that the fold is the be-all and end-all of your page. People will indeed scroll. In fact, they will scroll down your whole page if you give them a reason to.

Crazy Egg tried this out when they replaced their original sales page with a 20 times longer one.

One page design

The result: the conversion rate went up by 30 percent! If your current buyer’s journey goes across several pages, consider consolidating them all into one place instead. This might be one of those website design ideas that makes all the difference.

Don’t bury content in slideshows/carousels or tabs/accordions, they don’t work!

9. Employ A/B Testing

Sometimes when evaluating different website design ideas, it can be hard to decide which is the right way to go. You think back and forth, make tweaks, yet stay unsure of your decision. At some point, thinking will no longer cut it. You will have to let users decide.

A/B testing can be a great way to see what makes your website better. It means serving different versions of your design up to visitors at random, then check how they are reacting. You can make decisions based on the results.

You can test pretty much anything. From entire page designs over color changes, calls to action to images, article titles and fonts. All of these can make a huge difference in the performance of a page. Yet, if you don’t test it, you’ll never know!

These tools and plugins will help you in doing the tests.

19 Tools That Help Make Your Website Design Ideas Become a Reality

Once you have gained enough website design ideas, you need ways to put them into practice. The web design tools below will help you do just that.

WordPress

Wordpress.org homepage

When you are done putting together your ideas, you need a place to implement them. WordPress is a great tool to do so. We are big fans of it. This website is built with WordPress and it is also what we advise you to use in our guide on how to build your own website.

The platform is free to use and gives you the ability to change your site’s design at the touch of a button via themes. You can add a multitude of functionality with WordPress plugins. At the same time, it is beginner friendly, secure, tested and mature. In short – the perfect foundation for making your web design ideas a reality.

For alternatives, you may also look into Joomla and Drupal.

Website Builders

While WordPress is a great option for a lot of people, it’s not suited for everyone. More advanced customizations need knowledge of HTML, CSS, PHP and/or JavaScript. This can be too technical for some people.

For them, website builders can be a valid alternative, even if they are usually paid and don’t offer the same flexibility as WordPress. If you are interested in this topic, we have a number of articles on this topic for you:

The above will introduce you to some of the most popular website builders and also gives you a better understanding of what you can do with them.

Dreamweaver

Adobe Dreamweaver logo

If you are looking for a way to build a website without a CMS or website builder, Dreamweaver is a valid alternative.

The application by Adobe helps you design and code websites with the help of a visual interface. This way, you can build a basic website structure very quickly without coding.

At the same time, you have the option to write custom code. Dreamweaver has all the necessary functionality to make that a breeze.

For more information, check out our detailed Dreamweaver tutorial. For an alternative, you may also look into Webflow.

Sketch

Sketch web design tool

Sketch is a tool for designing web interfaces that many see as the better alternative to Photoshop. It is vector based, meaning files are a lot smaller and the program works very fast.

Users also praise the clean user interface and beginner friendliness, something that can’t always be said about Photoshop. Sketch also comes with a load of plugins to further improve the workflow. Check it out!

By the way, Adobe has released a similar tool called Adobe XD that you may also want to glance at.

Canva

Canva design tool logoCanva is a freemium design tool you can use in your browser and on mobile devices. It has a drag-and-drop interface that makes it easy to create website prototypes, graphic elements, infographics and social media content.

The program provides thousands of free templates so you can quickly get started. It also comes with useful tools like a color palette generator from images and a tool to help you find good font combinations.

There is a “free forever” option but a number of really essential features are reserved for the paid version.

Paletton

One of the tools I recommend is Paletton. It allows you to input a base color and will help you find other shades that harmonize with it. It’s super useful, especially for the less gifted in the color department (I’m talking about myself).

Paletton - a tool for creating website design ideas

There are also alternatives like the Adobe Color Wheel and the aforementioned tool by Canva. The post mentioned in relation to Canva contains even more alternatives!

Google Fonts

Besides colors, another important part of web design is the fonts. Luckily, these days you have a lot of sources for free, high-quality fonts. The biggest library: Google Fonts. It has more than 850 free typefaces to choose from that you can implement in your site or download to use offline for your website design ideas.

Foogle Fonts

We have a whole article on how to use custom fonts in WordPress. You will find all the information you need. There is also Typekit, which is another excellent option to find fonts for your site.

Fonts In Use

Fonts In Use

One of the most difficult things in using fonts is pairing them up with other typefaces. If you need some help in this department, there are Fonts In Use.

On the site, you can see typefaces used in real life across many different types of media. The website also shows and names other fonts that they appear in combination with. That way, you can find working pairings that you can steal for your own project.

An alternative is Font Pair. People post their favorite font combinations online. If you are not sure about what to pair your typeface with, simply search for it and find something that works instantly. Or use the free Canva option mentioned above.

WhatTheFont!

By the way, if you have a font you like but you aren’t sure about what it is, this service can help. Simply submit an image of the typeface in question and WhatTheFont! will try to tell you what it is. If that doesn’t work, you are still able to submit your request to the forum which is also part of the website.

Image Optimization Tools

Images are an important part of web design. With the advent of mobile devices, it has become increasingly important to optimize them properly for performance by compressing them. It’s one of the best ways to improve website speed.

There are several online tools that can do this for you, such as TinyPNG. There are also WordPress plugins like Smush Image Compression and Optimization and EWWW Image Optimizer. A desktop alternative is RIOT.

If the above is not enough and you are looking for additional tools to make your website design ideas a reality, you may want to check our article on web design software.

Inspiring Websites to Generate New Website Design Ideas

If at this point you still feel stuck, in this final part we will go over a number of websites chock full of web design inspiration.

Awwwards

Awwwards

This website gives out awards for web designers, developers and agencies around the world. They have a huge and searchable archive of web design examples. Additionally, there is a blog where they introduce designs in detail and a section where you can vote on the site of the month nominees. It’s all high quality and truly inspirational!

Web Design Inspiration

Website Design Inspiration

It’s a gallery of finished web design projects. You can filter it in many different ways to find what you are looking for – e.g by industry, type, color palettes or styles. Their archive is so large, that it’s often the only page you need to come up with your own website design ideas.

siteInspire

siteInspire

This website showcases both web and interactive design. Like the previous example, you are able to filter the entries in different ways including style, type, subject and even platform. If you create an account, you can also set up collections of your favorite designs.

One Page Love

One Page Love

This example is a web design inspiration site specifically made for one-page designs. We mentioned the idea earlier in the article. You can browse the gallery or search specifically for things you are looking for. Be sure to swing by when building your own one-page site.

Dribbble

dribbble for website design ideas inspiration

At Dribbble designers show off their work. This can be anything from apps to icons, illustrations and other examples. You can use it for general inspiration or use the tags to find what you are most interested in, such as web design.

Behance

Behance

A website very similar to Dribbble. It’s also a place for designers to connect and show off their portfolio. You have plenty of web design examples and can use the search function to look for them.

Wrapping Up

Web design ideas don’t grow on trees. Sometimes you need a little help to come up with something good. Thankfully there are posts like these to help you get back on track!

Hopefully the web design tips, tools and resources mentioned in the post above have nudged you back into creativity land. Obviously, there is plenty of more useful stuff out there, which is why we want to hear from you!

Do you know additional tips, tools or inspiration to generate web design ideas? If so, please share in the comments section below!


Want to ask a question or leave a comment?


Ask me anything

captcha

  • +

0 comments

Leave a Reply

Your email address will not be published. Required fields are marked *

*