44 web design freebies to make your life easier

[Rss Bot 1]

In many ways, working in web design in 2019 has never been more challenging. But on the positive side, there have never been so many free resources out there to help you.

There are tons of free design assets on the web you can use to speed up the process of building websites, including free UI kits, free icon sets and free fonts. Plus if you need to learn new skills or improve your existing ones, there are some great books that have been made absolutely free to read.

In this post, we round up some of our favourite freebies for web designers. So we’d recommend you bookmark this page, as you never know when they might come in handy!

On this page you'll find UI kits, followed by free icons, free fonts, and free ebooks. Use the drop-down above to jump straight to a particular section.

UI kits

When it comes to building websites in 2019, there’s absolutely no point in reinventing the wheel again and again. Web designers across the world have been kind enough to share the assets they’ve created for their own projects to make yours easier. So why not take advantage, and save yourself time and energy. Here are some of the best free UI kits to come to our attention recently…

01. Shards

Shards is a lightweight UI kit that's built for performance

Created by DesignRevision, Shards is a free responsive UI toolkit based on Bootstrap 4. Built with performance in mind, it features a modern design system with every component designed from scratch and enhanced with smooth micro-interactions, as well as two pre-built landing pages. It supports both Material and Font Awesome icon packs, and the developers have included the original Sketch and SCSS files in case you want to customise the kit to meet your particular needs.

02. A not so brutalist webkit

Add a bit of brutalism to your designs

Brutalist web design may have had its day as a movement, but many of its notable elements have swiftly become absorbed into mainstream web design. A bit of a brutalist touch is a great way to give a site a modern edge; this brutalist webkit, consisting of 70 free artboards, will help you get the look.

03. UI Components

A great set of charts, graphs and other components

This free UI kit contains a selection of 3D charts, graphs and other UI components created by Balraj Chana. All these components are vector-based and fully editable, so you can easily plug them into your dashboards or mobile app designs.

04. Landing

A set of Sketch and Photoshop components to help you build sites faster

Landing is a free UI kit from LStore Graphics. It’s packed with handcrafted UI components to speed up your website building, for Sketch and Photoshop.

• 14 fabulous tutorials to improve your logo design

05. Visage

This free kit contains more than 70 components for Photoshop across seven categories

Visage is a free UI kit for Adobe Photoshop from Bostan Florin that contains 70+ UI components for building websites. It presents these in seven categories: Blog, E-Commerce, Media, Admin, Forms, Headers and Footers.

06. Chat

Build a chat app with this bespoke UI kit

Chat is a free cross-platform UI kit from InVision app, designed to help you create an elegant chat app. It includes 60 templates, 12 categories and 80 UI components for web, tablet, and mobile.

07. Browser UI Kit

A kit designed to help you create screenshots with a blank browser UI

As the name suggests, Browser UI Kit is a vector UI kit allowing you to easily create website screenshots with a default blank browser UI. Designed by Keir Ansell, it includes Safari, Chrome, Firefox, Opera and Edge.

08. Basiliq

Create beautiful mockups with these hand-crafted vector shapes

Here’s something a little different: Basiliq is a UI kit containing more than 300 hand-crafted vector shapes for Photoshop, which you can use to create beautiful looking mockups. Watch the video on their homepage to see how they all fit together.

09. Prometheus

Create any kind of website with this clean and simple kit

Prometheus is a clean and simple UI kit for creating any type of website, including blogs, online shops, and personal pages. The work of Vid Kraljic Radulovic, it includes more than 150 vector-based design elements in 10 categories.

10. Overlap UI

A minimalist, component-based UI kit built on Bootstrap

Overlap is a modern, minimalist, component-based UI kit that’s aimed at helping you create a clean and stylish website. Built on a 12-column Bootstrap grid system by Vlad Cristea and Raul Taciu, it comes in two file formats: PSD and AI.

11. Flat UI Free

A variety of flat components to build a sleek looking website

Based on Bootstrap 3, Flat UI Free is a free UI kit containing such components as buttons, inputs, button groups, selects, checkboxes, radio-buttons, tags, menus, progress bars and sliders, navigation elements and more.

12. Mac OS UI kit

A UI kit for macOS, designed exclusively for Sketch

Another free download from Keir Ansell, this is a comprehensive and precisely designed macOS UI kit, designed exclusively for Sketch. Each primary UI element is a Sketch Symbol (using the Symbol Override features) to allow for easy editing and reuse.

Next page: 12 free icon sets

Everyone loves a good icon, and it can be a lot of fun designing your own. But sometimes you just don’t have the time or budget to do so. Luckily, the web is full of free icon sets to help you out and speed things up. Here are some of our favourites...

13. Social Materia

Grab 34 flat social media icons for free

These free icons from IcoJam are beautifully flat and cover pretty much all the social media platforms you can think of, in all the sizes and file types you're likely to need. If you want even more icons in the same style, the full Materia set, consisting of 3,120 vector icons, is available for just $42.

14. Icons8

iCon8 has 91,000 free icons waiting for you

For a vast set of visually-consistent icons, take a look at the Icons8 collection. It has 91,000 free icons available to download or embed, in PNG and editable SVG format. Most of its icon packs are created in-house so they'll work together nicely, whichever style you need.

15. UXPin icon set

More than 80 icons for web and mobile design

From the makers of UX design platform UXPin comes a diverse and attractive suite of 80+ icons for web and mobile UI design. In addition to PDF and Adobe Illustrators files, there are SVGs, PSDs and PNGs in the mix.

16. Aganè Icons

100 icons themed around signage and wayfinding

Aganè Icons is a free set of 100 icons themed around signage systems and urban graphic systems. This set was created by Danilo de Marco and Giulia Gambino to accompany the Aganè font (see 30).

17. CSS Icon

These icons are pure CSS

CSS Icon is a free icon set made with pure CSS, with no dependencies. There are 152 "grab and go" icons, all created by Wenting Zhang. You can learn more about the project in the video below.

18. Collecticons

A cool collection of crisp and fresh icons

Collecticons is an ever-growing collection of crisp icons (141 at time of writing), which are all free to download. The work of Development Seed, some of the icons were designed/built on top of libraries such as icoMoon by Keyamoon, and others that were made in-house.

19. Mex-icons

This free set contains a selection of bright and colourful Mexican themed icons

These bright and colourful Mexican themed icons are available as .png, .eps & ai files, in both colour and outline format. They’re the work of Texas-based Inkbyte Studios, and free to download for your web design projects.

20. 30 Isometric Icon Set

30 flat isometric icons in various PNG sizes

This free collection includes 30 flat isometric icons in various PNG sizes. Created by Iconshock, they’re all fully editable and customisable in Illustrator.

21. Socialoha! Icons

A whopping bundle of 756 social medial icons

This multi-style set of 756 social media icons comes from Iconshock. These free icons are available as editable Illustrator .ai files, web-ready .svg files, and transparent pngs in several sizes. Note that these icons are free for personal use only.

22. Flat Line UX and Ecommerce icons

Two icons sets covering user experience and ecommerce

Here, Smashing Magazine has brought together two free icon sets crafted by the design team at Ecommerce Website Design. The Flat Line User Experience Icon Set contain 45 icons with a retro discreet feel, while the E-Commerce Linear Icon Set features 38 linear icons depicting the likes of signs, shops, clothes, barcodes and currencies.

23. Animated flat emojis

A diverse set of animated emoji icons

This free icon set features 28 animated emojis that are fully vector-based and can be easily scaled, but can also be used as pre-made GIF-animations in 3 sizes: 32x32, 64x64 and 100x100.

24. Bank and money icons

Free icons themed on business and finance

This free set features 36 flat-style bank and money icons. Created by Vecteezy.com, they include a range of finance-themed pictograms, from credit card to piggy banks.

Next page: 10 free fonts

When it comes to typography, it’s usually a false economy to try to save money on fonts; you’re really better off paying for a professionally-designed font that’s going to make your site sing. Having said that, there are some free fonts out there that are as good as the paid-for ones, so discount a font just because it’s free. Here are some of the most interesting free fonts to have grabbed our attention recently...

25. Merriweather

Merriweather's a great-looking serif designed for readability

Designed to be read comfortably on screens, Merriweather is a font family with a large x height, slightly condensed letterforms, a mild diagonal stress and sturdy serifs. Available in plenty of weights, it's an open-source project led by Massachusetts foundry, Sorkin Type; there's also a sans-serif version, Merriweather Sans.

26. Work Sans

Work Sans is inspired by early Grotesques

Designed by Wei Huang, Work Sans is a type family that's loosely based on early Grotesque fonts, optimised for screen resolutions with simplified features and larger diacritics. It's available in all the weights you'll need from Thin through to a super-heavy Black; there's also a desktop version available at the project's Github page.

27. Cornera

A unique font for eye-catching designs

Cornera is a unique font that can be used in eye catching designs, logos and short bursts of text. Created by Gatis Vilaks of Wild One Design, it’s free for both personal and commercial use.

28. Hamurz

Get the hipster look with Hamurz

Hamurz is a hipster-style retro typeface with rough edges and rounded shapes. Created by Bagus Budiyanto, it’s free for both personal and commercial use.

29. Fina

A thin, fine, modern font

Fina is a thin, fine, modern font that’s free for personal and commercial use. It was designed by Yai Salinas exclusively for DesignHooks and is free for both personal and commercial use.

30. Fibon Sans

A sans-serif that’s well suited for any display and text use

Fibon Sans is a transitional sans-serif type family in six weights. It’s a balanced, low contrast, geometric, highly legible typeface that’s very well suited for any display and text use. Created by Valerio Dell'Edera, it’s free for personal and commercial use.

31. L-7 Stencil

Fragmented lettering makes this stencil font really stand out

This sans-serif, stencil-style font uses fragmented lettering and rounded terminals to make real impact. Created by Luis Calzadilla, L-7 Stencil is free for personal and commercial use.

32. Shkoder 1989

A 1990s-inspired font for both print and digital

Shkoder 1989 is a techy and sporty font, inspired by the 1990s. Combining two weights, it was designed by Julian Hoxhaj and Ana Hoxha and is free for both personal and commercial use.

33. Norwester

This geometric font would look great in header designs

This condensed geometric sans serif comes with uppercase and small caps, and would look great in header designs. Created by Jamie Wilson, Norwester is free for both personal and commercial use.

34. Aganè

A geometric sans that’s optimised for web use

Designed by Danilo De Marco, Aganè is a free font that’s ideal for use in the production of user interfaces. The available weights are light, regular, bold and extra bold, and it’s free for personal and commercial use.

Next page: 8 free ebooks

When it comes to learning web design, there’s nothing better than sitting back with a good book. But that doesn’t necessarily mean you have to invest in the physical printed edition. There are a ton of great books available online to read for free; here are some of our top picks.

35. A Guide to HTML5 and CSS3

Learn the basics of web development with this free book

Authored by technical writer, web developer and programmer Ashley Menhennett, this free book covers the basics of web development and it’s a good starting point whether you wish to build websites, HTML5 mobile apps or games.

36. Speaking JavaScript

This free book offers a way to learn JavaScript quickly and properly

This book has been written for programmers by a programmer, one Dr. Axel Rauschmayer. Speaking JavaScript is ideal for those who want to learn JavaScript quickly and properly, as well as JavaScript programmers who want to deepen their skills and/or look up specific topics.

37. Pocket Guide to Writing SVG

Get started with SVG by reading this free book

This guide provides designers and developers with the basic knowledge needed to get started with SVG. It will help you better understand its overall syntax and behaviour through clear examples, and quick descriptions of properties and attributes.

38. PHP: The right way

An easy-to-read reference for PHP coding standards

Written by Phil Sturgeon and Josh Lockhart, PHP: The Right Way is a regularly updated, easy-to-read, quick reference for popular PHP coding standards, links to authoritative tutorials around the web, and what the contributors consider to be best practices at the present time.

39. Web Design for the Human Eye

A practical guide to UI and visual design

Get to grips with UI design with this free ebook from the team at UXPin. It distills topics including UI design, interaction design and visual design into practical design advice.

40. Pixel Precision Handbook

UsTwo share their advice on digital design

This 214-page guide to digital design comes from leading web design studio studio UsTwo. Currently on volume 3, this latest version includes advice on how to get both sides working together more effectively, plus design techniques to ease the transition from pixels to code.

41. Web Design Trends 2019

This free book showcases the best web design techniques

This recent release by the makers of UXPin looks at the very latest trends in web design, and includes plenty of examples showcasing the best web design techniques, dozens of visual case studies, and best practices from the top tech companies.

42. Resilient Web Design

Leading web designer Jeremy Keith looks back into the history of web design

Web designers are mostly occupied by the here and now. But this free book by Jeremy Keith instead takes a look back, in an attempt to combine the most resilient ideas from the history of web design into an approach for building the websites of the future, In short, then, less a handbook and more a history book.

View the full article