You’ve just landed a new client (yay!) and you’re on your way to building a website for them, but where do you start once your wireframe is complete?

Thinking of fresh, original and edgy designs can be tough. Sure, it’s easy enough to spot a good design from a bad one, but actually sitting down and creating something completely new can really be a challenge for some – especially if you haven’t come from a design discipline and might not have a formally trained eye for design.

Purchasing a child theme will let you bypass the design process, but if you’re building from scratch, you’ll be engaging with a series of design elements (including layout, color, typography and more), all of which will need to work in harmony with your client’s brand identity and communication objectives, and will need to be creatively translated to their identified target audience.

To help this process along, we’ve rounded up a collection of our favorite design resources from around the web.

Be sure to read all the way to the bottom of this post, as we’ve included a downloadable infographic listing and linking to each and every one of the resources.

Selecting a great color palette for a web build is an art. Whether you’re thinking of using a complementary or contrasting color scheme or are toying around with a neutral/monochromatic palette accentuated with one highlight color, check out the resources below for some inspiration.

Possibly the easiest and most fun to use palette generator is Coolors (free for desktop, paid app). By simply pressing the spacebar, you’re able to browse through a number of color palettes and then refine a color selection through a series of adjustment controls. Once complete, you’re able to export your palette (really nifty if you’re creating a client mood board) or save it to your profile for future use. Coolors also lets you browse through a number of already created user palettes, and too, comes with nifty add-ons to integrate with your Adobe applications.

From the creators of MaterialUp, Material Palette lets you chose two main colors and will automatically generate a pretty extensive palette for you. The palette can be tweaked to suit your design style, and thanks to the nifty preview function, you’ll be able to get a pretty solid idea of how to use the colors within your website. Once you’re happy with your color selection, you’ll be able to export your palette into a range of formats, including a .css file that you can quickly copy into your style sheet.

Great for viewing a series of complementary colors alongside each other, Flat UI Color Picker displays a small selection of vibrant colors. As the user can only view the colors and can’t compile their own tailored palette or see it in an example, a bit of imagination is required. With this, Flat UI Color Picker would probably work well for someone who doesn’t want to be too distracted with too many options or small tweaks and customizations. At present, Flat UI Color Picker doesn’t offer an easy export method so hex/RBG codes will need to be recorded.

Another really easy and fun to use palette generator is Colordot (free for desktop, paid app). With a very distraction-free and to-the-point interface, users simply move their mouse around the browser window to select a shade (scrolling up and down alters the lightness, left to right alters the hue, two finger scroll alters the saturation). Clicking the mouse will select the shade and save its value right within the browser. The same scroll and save method is applied until a full palette is generated. Each color can be tweaked via the RBG or HSL values. Colordot is also available as a nifty app (paid – iPhone only).

Another really lovely color selection tool is Coleure. Users are able to choose a number of colors from a large available selection and create a palette. These colors can easily be altered via the HSL channels to achieve the desired shade. Not only does Coleure allows for the user to compare two colors side-by-side, as well as mix two colors together, but it also displays what an individual color will look like in unison with black and white text. If desired, a user is able to create an account to store all of the generated palettes, and too, test out the color palette via an editable HTML & CSS mark-up preview tool.

Previously known as Adobe Kuler, Adobe Color is the color app created by Adobe Systems. Using an interactive color wheel, users are able to select from a broad range of colors to make up a custom palette, or, refine their color selection through the use of six available presets: analogous, monochromatic, compound, contrasting, triad or shades. Adobe Color also lists a wide variety of already saved palettes for users to browse through.

With a plethora of readily available fonts to choose from, in thousands of different combinations (sans-serif/sans-serif, serif/serif, serif/sans-serif), selecting a font group for a website is really a science. Typography has such a strong effect on the overall aesthetic of a website and has tremendous power in expressing the tone of a brand or business. With this, have a look at the following type resources and tools.

A few months ago, Google released an updated version of its Google Font directory. With its brand new UI, selecting and inspecting a font is easier than ever, seeing users able to search through a vast array of the free-to-use fonts and refining their selection via a myriad of adjustment controls. Inspecting an individual font will show a series of details, including information regarding the font designer or design company, the available characters and styles, as well as a handy interactive font pairings guide and a break down of the code needed to embed the font in your stylesheet.

Typespiration presents a number of beautifully crafted designs with perfectly paired fonts for you to browse through. A bit of a cross-over resource, Typespiration also includes a correlating color palette (with hex codes) for each of its design, which really helps you to visualize what your design and type could look like. One of the great features of Typespiration is Quick Use. Not only does this pull up the exact code needed to embed each font into the head of your website, but it also includes the CSS for you to simply copy and paste into your style sheet. Here, both the H1 and p tags will be defined – inclusive of color – from the get-go, as well as both the normal and active state styles of your < a > or link tags.

 

One of the most incredible typography resources is Typecast. Through Typecast, users are able to create a prototype of their design by selecting a collection of fonts and testing them out. Typecast includes a myriad of options for testing various type styles both visually and in conjunction with HTML elements, including size, weight, decorative effects and color, to name a few. Once complete, prototypes can be saved, shared, compiled into a Style Guide (great if you’re presenting a mood board to your client) or the code can simply be copied into a style sheet. Typecast is free but users are required to sign up to use.

Using interesting typography is a great way to present a unique look and feel for a website. One of our favorite retailers is Creative Market’s font store, where thousands of fonts, specially crafted by designers from all corners of the globe, are readily available for purchase. Each font includes its own license, so make sure that these align with your usage specifications. Catering to the vast needs of creative designers and web developers alike, Creative Market fonts are really well priced and are often available in bundle deals for added value.

Icons have become an extremely popular visual element to add to a web build. As well as attracting a viewer’s attention, icons are great for conveying core brand concepts in a quick, effective and striking way. Icons can be created from the ground up using design applications such as Adobe Illustrator, but this is really time-consuming. Using icons as font groups by embedding relevant code into a style sheet is a great way to make sure that site speed is not affected by database calls for images. In this regard, Glyph Search does a great job of collating popular icon databases (including Font Awesome, Octicons, Glyphicons, IcoMoon, Foundation, Ionicons and Material Icons) into a searchable library. For those wanting more vibrant vector style icons that can be downloaded as .png, .svg and other workable formats, have a look at the resources below.

Created by Freepik, Flat Icon presents an extensive collection of free and premium icons that can be used throughout a web build. Icons can be searched as individual elements or within packs, the latter proving more useful to provide a unified look and feel. The free icons require attribution in use, as per the licensing agreement, whereas premium icons (paid through a monthly subscription) not only require no attribution or designer credit but allow the user access to the MacOS app as well as the Adobe software extensions to use Flat Icon straight from the desktop.

The Noun Project offers thousands of icons created and submitted by various artists. With loads of different design styles to choose from, users are able to download an icon into either .png or .svg format.

Using various graphic assets can really help toward creating a website with a really unique look and feel, but creating these from the ground up can take hours. There are loads of websites that offer quite extensive collections of both free and premium (paid) graphic assets in a large variety of formats, including fonts, icons, .psd files, vectors, backgrounds, mock ups, textures, patterns and more. Such as:

Viewing a collection of beautiful designs can really help get the creative juices flowing. The following sites are great spaces where designers, developers and collectives are showcasing either prototypes of, or completed web builds, and/or other graphic design projects. Have a look at the following sites for inspiration and, where applicable, consider refining your search by your client’s business or service category to figure out common visual communication trends and patterns.

If you’re using Divi by Elegant Themes, have a look at Divi Theme Examples for Divi-specific inspiration.

Finally, if you’re quite keen to learn a few new skills to add to your web design and development repertoire, check out the following sites for either tutorials or courses. Some sites offer a broad range of courses, some are focused particularly in web related instruct. Some courses are free, others are paid, some are accredited. If you are looking to take on a course of sorts, be sure to research all of the available options to select the best course for your needs.

Use our handy quick guide for quick access to the links listed in the Top 40+ Design Resources for Web Developers post. We recommend either saving or bookmarking the page for a quick reference.

We hope that you’ve enjoyed reading this post and that you’ve stumbled across at least one new resource to assist your next web project.

If you have any queries or comments, please feel free to share them below – we love hearing your feedback!

Thanks for reading!