OntheWebIT – Website Design Blog & Directory Content Disclaimer This Content is Generated from RSS Feeds, if your content is featured and you would like to be removed, please Contact Us With your website address and name of site you wish to be removed from. Tech Shop Offers
40 web design freebies to make your life easier
In many ways, working in web design in 2017 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.
When it comes to building websites in 2017, 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. UI 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.
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.
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.
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.
05. Browser UI Kit
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.
Here’s something a little different: 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.
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.
08. Overlap UI
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.
09. Flat UI Free
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.
10. Mac OS UI kit
Another free download from Keir Ansell, this is a comprehensive and precisely designed UI kit for macOS, 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: 10 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…
11. UXPin icon set
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.
12. Aganè Icons
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).
13. CSS Icon
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.
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.
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.
This free collection includes 30 flat isometric icons in various PNG sizes. Created by Iconshock, they’re all fully editable and customisable in Illustrator.
17. Socialoha! 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.
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.
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: 32×32, 64×64 and 100×100.
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 design 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…
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.
Born is a serif humanist font from Carlos Detoro. Free to download, Born Regular includes a total of 262 glyphs, including upper-case, lower-case, alternative glyphs, ligatures, numerals, symbols and punctuation marks. It’s free for both personal and commercial use.
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.
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.
25. Fibon Sans
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.
26. L-7 Stencil
This sans-serif, stencil-style font uses fragmented lettering and rounded terminals to make real impact. Created by Luis Calzadilla, it’s free for personal and commercial use.
27. Aaron Grotesque
Aron Grotesque is a geometric sans that’s been optimised as a web font. It includes OpenType Ligatures feature with some old style ligatures and basic mathematical glyphs. It’s free to use in return for a social media share.
28. Shkoder 1989
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.
This condensed geometric sans serif comes with uppercase and small caps, and would look great in header designs. Created by Jamie Wilson, it’s free for both personal and commercial 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: 10 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.
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.
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.
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.
35. The UX Reader
The designers at MailChimp love to show their work, and so this ebook is a collection of the most popular articles from their UX Newsletter, along with some exclusive content.
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.
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.
38. Data + Design
Data + Design is a simple introduction to preparing and visualising information. Crafted by more than 50 volunteers from 14 countries around the globe, this free book is a collaboration between Infoactive and the Donald W. Reynolds Journalism Institute.
This recent release by the makers of UXPin looks at the very latest trends in web design. It includes 61 examples showcasing the best web design techniques, dozens of visual case studies, and best practices from the top tech companies.
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.
This Content is Generated from RSS Feeds, if your content is featured and you would like to be removed, please Contact Us With your website address and name of site you wish to be removed from.