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 get frustrated.
If that’s how you are feeling right now (or ever), this post is here to help you. In the following, we want to provide you with ways get over the hump when the ideas just won’t come.
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. Finally, the post will list a number of websites you can turn to find inspiration for new website design ideas.
If, combined, this doesn’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. Here, you can collect visual material that you think would be helpful in your project or provides a direction. These can be images, colors, layouts, existing websites and more.
The mood board will act as central hub for your design inspiration. You are also able able to share it with clients or collaborators so they can contribute with their own material.
2. Create a Plan
You 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 if the basics are in place, are you able to put creative touches on top. Here’s what planning can look like:
- 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.
- Sketch out the buyer’s journey — Besides the overall goal, you also need to figure out what road you want visitors to take. From the first time 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 as a great article on that.
- 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’s is a good example.
- 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 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.
Here, 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.
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 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. However, it can be 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 and turn them off.
In fact, Google research has shown that the less a website confirms to prototypical standards, the less users perceive it as beautiful. For 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
- 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 to website appeal. In short, people don’t want to be overwhelmed. Plus, simplifying your design is good for things like website speed.
Here are a few things you can think about eliminating:
- 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 also 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.
In addition to that, 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, good advice when designing a website is 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 blog posts or 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.
For you that means, 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. So 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 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 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 look around the page you are currently reading, 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.
However, that doesn’t mean 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 one 20 times longer.
The result: conversion rate went up by 30 percent! So, 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.
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 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. From there you can make a decision.
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 do so.
19 Tools That Help Make Your Website Design Ideas Become 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.
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 very 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. Plus, 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.
For them, website builders can be a valid alternative, even if they 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 give you better understanding of what you can do with them.
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 necessary functionality to make that a breeze.
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 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 similar tool called Adobe XD that you may also want to glance at.
Canva is a freemium design tool you can use in your browser and onmobile 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 get started quickly. 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.
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).
There are also alternatives like the Adobe Color Wheel and the aforementioned tool by Canva. The post mentioned above contains even more.
Besides colors, another important part of web design are 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.
One of the more difficult things in using fonts is pairing them up with other typefaces. If you need some help in this department, there is 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. Here, people post their favorite font combinations online. So, if you are not sure about what to pair your typeface with, simply search it and find something that works instantly. Or use the free Canva option mentioned above.
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 that’s also part of the website.
Image Optimization Tools
Images are an important part of web design. However, 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.
Is the above not enough for you? If 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.
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. In addition to that, there is a blog where they introduce designs in detail and a section where you can vote on the site of the month nominees. High quality and highly inspirational.
Here, too, you find a gallery of finished web design projects. Filter it in many different ways to find what you are looking for, such as by industry, type, color palettes or styles. Their archive is so large, it’s often the only stop you need to come up with your own website design ideas.
This website showcases both web and interactive design. Like the previous entry, 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.
This next 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. Definitely swing by here when building your own one-page site.
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.
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.
Web design ideas don’t grow on trees. Sometimes you need a little help coming up with them. 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. Of course there is more useful stuff out there, which is why now 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!