free WordPress web design resources

Having access to free WordPress web design resources is a real life saver. So much goes into creating and running a quality site, from code and images to background graphics, fonts, icons and other elements. Not to mention the knowledge necessary to put it all together.

Imagine you had to pay for all of that! How ironic would it be to use a free CMS to run your site and then go broke over making it the best it can be? Thankfully, with the amount of free stuff out there, it doesn’t have to be that way.

In this article, we have compiled a boatload of free WordPress web design resources. With their help, you can build an awesome site or improve your existing one and still pay rent on time.

Sounds good? Then let’s get started right away.

Top WordPress web design resources

Learning resources

To run your WordPress site effectively, you need to stay up to date on the latest trends and technology in your industry. To do so, there’s no way around getting educated and doing it continuously. Below you will find a lot of free learning resources for web designers.

Creative Bloq

WordPress web design resources: Creative Bloq

A great web design resource for news, tips, tutorials and more surrounding the topic. You can learn a lot about how large companies use design in their business. They also have a dedicated section for web design. Also, don’t miss their inspiration archive.

Smashing Magazine

smashing magazine

Smashing Magazine is one of the most popular sites on web design and development. Their blog is chock full of tutorials and helpful articles on many topics. If you work with WordPress, don’t miss their WordPress section.

SitePoint

sitepoint

Another collection of helpful articles. Topics range from design and UX to WordPress and entrepreneurship. They even offer a free WordPress theme to base your own on. But we’ve got that also pretty covered here.

CSS-Tricks

css tricks

Great resource for frontend designers. Offers many useful tutorials and best practices for using CSS. They also occasionally talk about business topics and have a library of useful code snippets.

Flat Design & Colors

flat design and colors

A free ebook on UI design by UXPin. Contains lots of information on the use of colors, flat design and more. Also includes many examples and advice on how to stay up to date.

Everything There is to Know About Logo Design

everything there is to know about logo design

Here we have a 25-page ebook with a lot of information on how to create the perfect logo. You will learn a lot about basics, rules, colors, typography and more. The book also contains examples of mistakes to avoid and stories behind famous brand logos.

The Best Web Designs of 2015-2016

the best of web design ebook

Another ebook, this one by Awwwards, which is in itself a great resource for inspiration (more on that further below). Every year they publish a collection with the best web design they could find. This one is 158 pages strong and includes many examples and analyses of why they work.

Tools and apps

Next up are some useful tools, apps and WordPress web design resources for creating stunning websites. Don’t start any project without them.

Google Web Designer

google web designer

This Google service has been around since 2013. It includes tools to create HTML5 websites and ads, JavaScript, CSS and XML files. You can either build them visually via drag and drop or via code interfaces. Works for any screen size.

Marvel

marvel

Marvel is one of the leading prototyping and collaboration tools for designers. You can work together as a team or include clients in the design process. Easily create prototypes for many different devices including version control and the ability to import files from Photoshop and Sketch.

Underscores

underscores

A WordPress starter theme by the nice folks of Automattic. It contains HTML5 templates, minimal CSS and anything you need to get up and running quickly. The theme is meant to give you a head start of a thousand hours.

Zerif Lite

Zerif Lite

One of the most popular free WordPress themes in the market. Built right here in house, at ThemeIsle. Used on over 200,000 websites.

DesignBold

DesignBold

DesignBold offers free powerful design tools for all kinds of images, including Blog Header and Blog Graphics. They have thousands of free editable layouts, and you don’t need any design skill.

Font databases

Typography is super important in web design and has become more so in recent years. How to use it is a science in itself, however, the specific WordPress web design resources below at least tell you where to find them.

Google Fonts

google fonts

Google Fonts is one of the largest libraries of free fonts on the web. It offers over 800 fonts in 135 different languages that are quick to integrate on any site. You can even download them for Photoshop and other tools. Learn more about Google Fonts here.

Adobe Edge Web Fonts

adobe edge web fonts

Another font library, this one by the makers of Photoshop. It has over 500 fonts available and many filter options to find the right one. Once you are settled, getting the font on your site is simple.

DaFont

dafont

Another large font database with different licenses. Download and use any typeface on your computer. To use them on the web, you need to upload the fonts to your site. While not quite as comfortable as other solutions on this list, it’s still worth a look.

Font Squirrel

font squirrel

On this site, you find hand-selected free fonts licensed for commercial use. You can filter them by a multitude of tags, licenses, languages and more. Font Squirrel also offers a beginner’s guide to fonts and font identifier to help you find typefaces from images.

FFonts

ffonts

FFonts offers both free and commercial fonts from many different categories. The usability of the site could be better but there’s still a lot of material.

Urban Fonts

urban fonts

Urban Fonts has free and premium fonts as well as font deals. Search the more than 8,000 free fonts by filters and in several languages.

Stock images and background patterns

Visuals are very important for web design. A picture speaks more than a thousand words as the old adage goes. In the resources below, you can find plenty of free images. For more, check this article.

Unsplash

unsplash

Unsplash offers free, high-resolution stock photos with no attribution required. The images cover many different topics and come in a searchable database. They also have collections for different topics.

Skitterphoto

free wordpress web design resources skitterphoto

Public domain photos that can be used and edited for anything, including commercial purposes. They come ordered by topic and there are also admin picks.

Magdeleine

magdeleine

Hand-picked photos with new new ones added every day. Comes with both public-domain and attribution-required licenses. You can filter by categories, tags and dominant color.

Pexels

pexels

Even more free stock photos, all of which are licensed as CC0, meaning you can use them at will. Search the database by query or use the categories. The images are great quality, highly recommended!

NegativeSpace

negativespace

Offers images that are completely free to use for both personal and commercial purposes. They have many different categories and motifs and the site itself is also quite beautiful.

Compfight

compfight

A search tool for Flickr. Filter images by license or motif. Also provides help on how to properly attribute images.

MyStock.Photos

mystock.photos

Great, natural stock images made available under CC0. What’s great about this site is that all photos come from a small team of passionate photographers. It’s a closed directory – no outside submissions allowed. This means that you’ll find images here that are not available elsewhere on the web.

Pattern8

pattern8

A great collection of background patterns. Filter by color and use them on website free of charge.

TextureKing

textureking

Free stock textures. The majority are rugged, dirt, rust, rock and the likes. Great for grungy projects.

Patternico

patternico

Create your own background textures from Font Awesome icons. Drag and drop icons, pick their color, transparency level and size. Then modify. When you are satisfied, simply download.

Lost and Taken

lost and taken

More stock patterns and textures. Again, many different categories but also downloadable packs by topic. It doesn’t say anything about licenses, so I’m guessing “free” just means that.

Icons

Especially with the many social networks today, you need a lot of icons for websites. Whatever your project is, one of these should have what you are looking for. Here are some cool WordPress web design resources when it comes to icons.

DryIcons

dryicons

Offers more than 6,700 vectors and icons that you are free to use with attribution. Other licenses are also available and the range of icons is very wide.

Evil Icons

evil icons

An icon package you are free to download and use. Even includes code snippets to use the icons in different environments.

Flat Icons

flat icons web design resources

More then 2,500 royalty-free icons. Choose what you want, customize at need, then download. Comes with many different categories and also has a free pack of social icons for download.

Genericons

genericons

Free generic icons by Automattic. Click to receive the necessary code. Everything comes in the SVG format.

IconSweets

iconsweets

60 free vector Photoshop icons to use for web, iPhone or iPad.

Fontello

fontello

Icon font generator that lets you create your own icon or use one of the many provided on the site. Everything is completely free.

Flaticon

flaticon

Offers free vector icon packs for many different purposes. Attribution is required unless you use the premium plan starting at $7.50/month.

Font Awesome

font awesome

Scalable vector icons as font. Completely free and customizable via CSS. Super awesome!

Brush and vector libraries

For creating website concepts, it’s important to have the right tools. To that end, here are some Photoshop brushes and vector art.

BrushLovers

brushlovers

Offers a huge number of Photoshop brushes, gradients and styles. Most of them are free for both personal and commercial projects and cover many different categories. With an account you can even save your favorites.

Brusheezy

brusheezy

Free brushes, patterns, textures and PSD files. Search by keyword or category. Have a look at the top brushes for inspiration!

Vecteezy

vecteezy

The same site as Brusheezy only for vectors. Icons, patterns and vector art with both free and premium licenses. You can even edit them on the site.

Color palettes and color pickers

Picking the right colors for a WordPress project is not always easy. Thankfully, there are tools out there to help you out.

Material Palette

material palette

This site helps you create Google’s Material Design look. Pick two colors to get a palette and download it for free in many different formats. Also offers icons and color gradings.

flatuicolorpicker

flatuicolorpicker

A similar tool as the one above, this one specially made for flat design. Great color inspiration, complete with hex and RGB values. You can also limit yourself to one color palette.

Flat UI Colors

flatuicolors

Again, a tool not unlike the one before, however, when you click on a color here, you automatically copy its hex code to your clipboard.

Paletton

paletton

A very useful color wheel. Simply pick a base color and it will create a color palette for you. Several color schemes available: adjacent, triad, tetrad or freestyle. You can also export it at the touch of a button.

Adobe Color Wheel

adobe color wheel

Adobe’s color wheel works in similar fashion and has more color schemes available. It also offers several palettes at once that you can fine tune to your needs.

Inspiration

Everyone can have a dry spell in the inspiration department. Luckily, you have plenty of sources to draw from to get your creative juices flowing.

Awwwards

awwwards

This site collects the latest and greatest in website design. People submit their sites and others can vote on them. The site also showcases special stuff in different categories and gives out awards to developers.

Behance

free web design resources behance

Behance is a site where designers can post their portfolio. Has web design as a single category but the other entries are also worth a look.

Dribbble

dribbble

Show and tell for designers with a focus on web, icons and mobile design. Also lets you interact with others. Sure to get you out of a slump.

One Page Love

one page love

A showcase dedicated to one-page websites. Has inspiration from many categories – from e-commerce to wedding. You can also search by style. Don’t forget to check out their blog posts and ebooks!

UI Parade

ui parade

Loads of inspiration for those working on user interfaces. Has whole interfaces and single elements like buttons, animations and more. Try the switch on the upper left to change the site design instantly.

siteInspire

wordpress web design resources site inspire

Another inspiration resource with websites from allover the world. This one will keep you busy for days.

Final thoughts

Having free WordPress web design resources at hand makes a lot of things easier. It helps you create quality work without breaking the bank – that’s the beauty of the Internet.

The article above will give you loads of things to incorporate in your workflow. Learning resources, tools, apps, fonts, stock images, color palettes – it’s all there. And that’s just the tip of the iceberg. There’s a lot more to discover.

Do you know any free WordPress web design resources you can recommend to the rest of us? Please let us know in the comments section below.