Website design ideas
Designed by Freepik

Consistently developing with nice web site design concepts is difficult labor. When you may’t get the inventive juices flowing on demand, it’s simple to really feel caught and turn into pissed off.

If that’s how you feel proper now (or generally), this submit is right here to assist you. In the next, we wish to offer you methods to recover from the hump when the concepts are simply not flowing.

The first half will offer you net design tips that may open up new views and spark some change. After that, you'll find some kick-ass instruments for making your design efforts simpler. In the final half, we are going to checklist a variety of web sites you may go to to discover inspiration for new web site design concepts.

If all of this mixed, received’t assist you get inventive once more, I’m undecided something will!

9 Web Design Tips for When You Feel Stuck

In order to assist you give you good concepts, we begin with net design tips you need to use instantly to enhance what you might be engaged on.

1. Use Pinterest Mood Boards

Pinterest is a superb instrument to create mood boards. You can acquire visible materials that you simply suppose can be useful in your mission or will present a path. These might be pictures, colours, layouts, present web sites and extra.

Pinterest mood boards

The temper board will act as a central hub for your design inspiration. You are additionally ready to share it with purchasers or collaborators to allow them to contribute with their very own materials.

2. Create a Plan

Making a planYou know what they are saying: Failing to plan is planning to fail. This can also be true in net design. If the web site design concepts fail to come round, perhaps it’s since you haven’t handled the basics but. Only when the fundamentals are in place, will you give you the option to put inventive touches on high. Here’s what planning can appear to be:

  1. Define the web site’s purpose — You want to know what the positioning is definitely supposed to accomplish. If you don’t, what the hell are you designing in direction of? Good objectives are SMART: Specific, Measurable, Attainable, Relevant and Timely. More on that here.
  2. Sketch out the client’s journey — Besides the general purpose, you additionally want to work out what highway you need guests to take. From after they hit your website all the best way to whichever goal you keep in mind. That method, you may create a construction to information them alongside the best way. Hubspot has a great article on that.
  3. Come up with a mode information — Creating a mode information will assist you keep constant in your design. It defines fonts, colours and different design parts. Using one promotes uniformity, particularly when working with others. Google is an efficient instance.
  4. Plan your search engine marketing — Planning can also be vital for search engine marketing. Create a web site map to perceive how to construction your info for each guests and serps.

3. Focus on the Structure First

Just like making a plan, concentrating in your web site’s construction first helps you step away from the method and get extra of a chicken’s eye view.

It may help to work with a distinct medium than your laptop. For instance, by making sketches on paper with a single pen, you may overlook about colours and different particulars for the second. If you might be utilizing flipcharts or a whiteboard, you may even make the entire thing collaborative.

A fantastic train can be to draw the web site on a post-it observe. This will power you to stick to necessities. A variation of that is to create your design in shades for grey first and solely add shade later. This method, you might be pressured to set up a visible hierarchy with out counting on shade.

Start with grayscale
Laura Elizabeth/Smashing Magazine

If you might be hell-bent on utilizing your laptop to design, you need to use the “squint test”. That means transferring away from the display and squinting your eyes. The blurred picture will present you what's most evident in your website and what the first-time guests will most definitely notice first.

4. Stick With Standards

It’s within the nature of designers to need to be inventive. That’s typically a superb factor. Keep in thoughts that it’s mandatory to set some boundaries inside which to be inventive.

For instance, in net design, there are a selection of established requirements. Visitors are used to sure design tropes and web site parts. When you break these guidelines an excessive amount of, it would confuse them and flip them off.

In reality, Google research has proven that the much less a web site confirms to prototypical requirements, the less customers understand it as stunning. Because of that cause, sticking to established guidelines is a good suggestion.

Among these established requirements are:

  • Consistency in branding and design across all pages
  • Website brand within the high left nook
  • Contact info within the high proper or heart
  • Main navigation across the highest of the display
  • Main headline/worth proposition and call-to-action excessive up on the homepage
  • The search characteristic within the header
  • Social media icons within the web site footer

I’m certain as an avid Internet person, you might be already conscious of extra requirements web sites adhere to. If not, you'll find extra of them here.

5. Think About What You Can Eliminate

When the target of your website and pages, this additionally permits you to eliminate every thing that doesn’t serve that function. This streamlines your design and makes it extra nice to take a look at.

Again, there may be analysis to again this up. In the identical examine talked about above, Google has discovered that visible complexity is negatively correlated with web site enchantment. In brief – people don’t need to be overwhelmed! Simplifying your design is nice for different options, e.g website speed.

Here are some things you may safely eradicate:

  • Menu objects — Of course you need others to discover extra of your website. However, an overloaded menu might be tremendous complicated and have damaging results. Again – persist with the necessities!
  • Sidebars — More and extra web sites are phasing out the sidebar. What do you might have in your sidebar? Is that actually vital?
  • Muddy jargon — The similar factor that goes for inventory pictures goes for language. Overused phrases, cliches and hole phrases make people tune out. Stop utilizing them, inject some character in your writing, be taught some power words and learn copywriting.

6. Start With Mobile

Mobile gadgets have taken the world by storm. By now, extra people surf the online by way of telephones and tablets than on desktop computer systems.

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

 

Additionally, Google announced that they're rolling out their new mobile-first index. That means, when absolutely in impact, the search engine will decide each web site on their mobile presence first. If it’s not doing its job correctly, you'll take successful within the search rankings.

For that cause, when designing a web site, it might be a good suggestion to begin with the mobile presence first. From now on, mobile customers will likely be your major prospects. Therefore, you higher be certain that they really feel catered to.

At the identical time, it’s good observe for developing with web site design concepts. Again, beginning with mobile forces you to consider the necessities and suppose by the aim of your design. You can then additional unfold and add parts because the display dimension grows greater.

7. Pay Attention to Content Formatting

Content formatting is an underestimated instrument for net designers. Content is crucial factor of your website, be it within the type of weblog posts or a gross sales copy. In the top, that's what you need guests to eat. Your design’s function is to current it in a method that they do.

Unfortunately, by now people are so saturated that few of them learn every thing in your web page. Instead, most visitors scan. Furthermore, they have a tendency to do so in an F-shaped pattern.

Content formatting

It implies that you want to make your content material match their consumption habits to make it extra impactful.

Here’s how to do this:

  • Include headings — Headings are a good way to break up content material. Many readers additionally use them as anchor factors for scanning and learn solely these components beneath headings that appear fascinating to them. Therefore, be certain that to use headings and make them descriptive.
  • Use paragraphs and lists — Nobody desires to learn one massive blob of text. Paragraphs divide content material into little chunks. Open up a brand new one everytime you open up a brand new level. Lists have an analogous perform and make info extra accessible. Use them as effectively.
  • Don’t skimp on media and visuals — Visual info is way more approachable for the human mind than text. For that cause, it’s a good concept to use pictures and different media to underline the factors made in your copy. It’s additionally, once more, a good way to break up longer items of text.
  • Optimize your fonts — Your use of fonts additionally significantly affect legibility. The most vital instruments you might have listed here are the scale and line peak. Go for at least 16px (Medium has 22px!) and be certain that to add extra line peak the smaller the font you might be utilizing.

If you examine this text, you may see all the above in impact.

8. Try Out One-Page Design

Back within the day, web site design was all about the fold. Everything vital had to be above the restrict from which customers would begin scrolling. There’s nonetheless one thing to be mentioned about it since that’s nonetheless the place users spend most of their time.

Visitor viewing time - the fold

That doesn’t imply that the fold is the be-all and end-all of your web page. People will certainly scroll. In reality, they'll scroll down your entire web page for those who give them a cause to.

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

One page design

The outcome: the conversion price went up by 30 %! If your present purchaser’s journey goes across a number of pages, take into account consolidating all of them into one place as a substitute. This is perhaps a kind of web site design concepts that makes all of the difference.

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

9. Employ A/B Testing

Sometimes when evaluating completely different web site design concepts, it may be exhausting to resolve which is the appropriate method to go. You suppose again and forth, make tweaks, but keep not sure of your determination. At some level, considering will now not reduce it. You may have to let customers resolve.

A/B testing could be a smart way to see what makes your web site higher. It means serving completely different variations of your design up to guests at random, then verify how they're reacting. You could make selections based mostly on the outcomes.

You can take a look at just about something. From whole web page designs over shade modifications, calls to motion to pictures, article titles and fonts. All of these could make an enormous difference within the efficiency of a web page. Yet, for those who don’t take a look at it, you’ll by no means know!

These tools and plugins will assist you in doing the checks.

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

Once you might have gained sufficient web site design concepts, you want methods to put them into observe. The net design instruments beneath will assist you do exactly that.

WordPress

Wordpress.org homepage

When you might be performed placing collectively your concepts, you want a spot to implement them. WordPress is a superb instrument to accomplish that. We are large followers of it. This web site is constructed with WordPress and it's also what we advise you to use in our guide on how to build your own website.

The platform is free to use and provides you the power to change your website’s design on the contact of a button by way of themes. You can add a large number of performance with WordPress plugins. At the identical time, it's newbie pleasant, safe, examined and mature. In brief – the proper basis for making your net design concepts a actuality.

For options, you may additionally look into Joomla and Drupal.

Website Builders

While WordPress is a nice choice for a whole lot of people, it’s not suited for everybody. More superior customizations want data of HTML, CSS, PHP and/or JavaScript. This might be too technical for some people.

For them, web site builders could be a legitimate various, even when they're often paid and don’t supply the identical flexibility as WordPress. If you have an interest on this subject, we've got a variety of articles on this subject for you:

The above will introduce you to among the hottest web site builders and additionally provides you a higher understanding of what you are able to do with them.

Dreamweaver

Adobe Dreamweaver logo

If you're looking for a method to construct a web site with out a CMS or web site builder, Dreamweaver is a legitimate various.

The software by Adobe helps you design and code web sites with the assistance of a visible interface. This method, you may construct a fundamental web site construction in a short time with out coding.

At the identical time, you might have the choice to write customized code. Dreamweaver has all the mandatory performance to make {that a} breeze.

For extra info, try our detailed Dreamweaver tutorial. For an alternate, you may additionally look into Webflow.

Sketch

Sketch web design tool

Sketch is a instrument for designing net interfaces that many see as the higher various to Photoshop. It is vector based mostly, that means information are so much smaller and this system works very quick.

Users additionally reward the clear person interface and newbie friendliness, one thing that may’t all the time be mentioned about Photoshop. Sketch additionally comes with a load of plugins to additional enhance the workflow. Check it out!

By the best way, Adobe has launched an analogous instrument referred to as Adobe XD that you could be additionally need to look at.

Canva

Canva design tool logoCanva is a freemium design instrument you need to use in your browser and on mobile gadgets. It has a drag-and-drop interface that makes it simple to create web site prototypes, graphic parts, infographics and social media content material.

The program supplies hundreds of free templates so you may shortly get began. It additionally comes with helpful instruments like a color palette generator from pictures and a instrument to assist you find good font combinations.

There is a “free forever” choice however a variety of actually important options are reserved for the paid model.

Paletton

One of the instruments I like to recommend is Paletton. It permits you to enter a base shade and will assist you discover different shades that harmonize with it. It’s tremendous helpful, particularly for the much less gifted within the shade division (I’m speaking about myself).

Paletton - a tool for creating website design ideas

There are additionally options just like the Adobe Color Wheel and the aforementioned instrument by Canva. The submit talked about in relation to Canva incorporates much more options!

Google Fonts

Besides colours, one other vital a part of net design is the fonts. Luckily, these days you might have a whole lot of sources for free, high-quality fonts. The largest library: Google Fonts. It has greater than 850 free typefaces to select from that you could implement in your website or Download to use offline for your web site design concepts.

Foogle Fonts

We have a complete article on how to use custom fonts in WordPress. You will discover all the data you want. There can also be Typekit, which is one other glorious choice to discover fonts for your website.

Fonts In Use

Fonts In Use

One of probably the most tough issues in utilizing fonts is pairing them up with different typefaces. If you want some assist on this division, there are Fonts In Use.

On the positioning, you may see typefaces utilized in actual life across many several types of media. The web site additionally reveals and names different fonts that they seem together with. That method, you'll find working pairings that you could steal for your personal mission.

An various is Font Pair. People submit their favourite font mixtures on-line. If you aren't certain about what to pair your typeface with, merely search for it and discover one thing that works immediately. Or use the free Canva choice talked about above.

WhatTheFont!

By the best way, when you've got a font you want however you aren’t certain about what it's, this service may help. Simply submit a picture of the typeface in query and WhatTheFont! will strive to inform you what it's. If that doesn’t work, you might be nonetheless ready to submit your request to the forum which can also be a part of the web site.

Image Optimization Tools

Images are an vital a part of net design. With the arrival of mobile gadgets, it has turn into more and more vital to optimize them correctly for efficiency by compressing them. It’s the most effective methods to improve website speed.

There are a number of on-line instruments that may do that for you, equivalent to TinyPNG. There are additionally WordPress plugins like Smush Image Compression and Optimization and EWWW Image Optimizer. A desktop various is RIOT.

If the above just isn't sufficient and you're looking for extra instruments to make your web site design concepts a actuality, you might have considered trying to verify our article on web design software.

Inspiring Websites to Generate New Website Design Ideas

If at this level you continue to really feel caught, on this remaining half we are going to go over a variety of web sites chock filled with net design inspiration.

Awwwards

Awwwards

This web site provides out awards for net designers, builders and businesses all over the world. They have an enormous and searchable archive of net design examples. Additionally, there's a blog the place they introduce designs intimately and a bit the place you may vote on the site of the month nominees. It’s all prime quality and actually inspirational!

Web Design Inspiration

Website Design Inspiration

It’s a gallery of completed net design initiatives. You can filter it in many various methods to discover what you're looking for – e.g by trade, kind, shade palettes or styles. Their archive is so massive, that it’s usually the one web page you want to give you your personal web site design concepts.

siteInspire

siteInspire

This web site showcases each net and interactive design. Like the earlier instance, you're able to filter the entries in numerous methods together with model, kind, topic and even platform. If you create an account, you can too arrange collections of your favourite designs.

One Page Love

One Page Love

This instance is an internet design inspiration website particularly made for one-page designs. We talked about the concept earlier within the article. You can browse the gallery or search particularly for issues you're looking for. Be certain to swing by when constructing your personal one-page website.

Dribbble

dribbble for website design ideas inspiration

At Dribbble designers showcase their work. This might be something from apps to icons, illustrations and different examples. You can use it for normal inspiration or use the tags to discover what you might be most enthusiastic about, equivalent to web design.

Behance

Behance

An internet site very related to Dribbble. It’s additionally a spot for designers to join and showcase their portfolio. You have loads of net design examples and can use the search perform to look for them.

Wrapping Up

Web design concepts don’t develop on timber. Sometimes you want a little bit assist to give you one thing good. Thankfully there are posts like these to assist you get again on observe!

Hopefully the online design tips, instruments and sources talked about within the submit above have nudged you again into creativity land. Obviously, there may be loads of extra helpful stuff on the market, which is why we wish to hear from you!

Do extra tips, instruments or inspiration to generate net design concepts? If so, please share within the feedback part beneath!