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
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 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
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
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
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
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
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
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 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
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.
Neve
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 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 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
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
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
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 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 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 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
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
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
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
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
A search tool for Flickr. Filter images by license or motif. Also provides help on how to properly attribute images.
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
A great collection of background patterns. Filter by color and use them on website free of charge.
TextureKing
Free stock textures. The majority are rugged, dirt, rust, rock and the likes. Great for grungy projects.
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
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
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
An icon package you are free to download and use. Even includes code snippets to use the icons in different environments.
Flat Icons
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
Free generic icons by Automattic. Click to receive the necessary code. Everything comes in the SVG format.
IconSweets
60 free vector Photoshop icons to use for web, iPhone or iPad.
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
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
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
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
Free brushes, patterns, textures and PSD files. Search by keyword or category. Have a look at the top brushes for inspiration!
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
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
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
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
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’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
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
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
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
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
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
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.
We do every project in WP and we’ve never had any problems or client complaints. I make sure that all our designers make a list of inspirational sites before they build.
Owner –
SlyFox
I realize that not everyone who builds a WordPress site wants or needs to build a plugin but I included it here anyway because it’s such a wonderful wellspring of information
Thank you for this information,
Can you please tell me what is the best plugin to set website design responsive as screen width?
Really amazing blog..I love reading blogs.!!!
This is really amazing and loved reading this blog!! According to me wordpress is the best framework, as we get so many various plug ins. I think it makes the web designing & development process very easy for the programmer as there are many themes to choose from which in turn is very time saving. According to me the wordpress decreases the work load and if you do not have good knowledge of web designing then still you can design the best website with the wordpress!!!
Or start the conversation in our Facebook group for WordPress professionals. Find answers, share tips, and get help from other WordPress experts. Join now (it’s free)!