Whether you build a site or an app you need to use some resources in your design process: images or fonts, background patterns or color suggestions. Maybe you’re stuck in a rut and need some inspiration?
In this article I’ll show you the best free resources to use in your next design. These are the resources I use everyday and I decided to compile them and create this ultimate list of free resources and share it with you.
All the resources are indexed for quick access on GitHub, without descriptions or associated pictures.
Updated on 6 September 2015 with new resources added in: Typography, Favicons, Placeholder Text, Site optimization, Inspiration.
Updated on 1 December 2015 with new resources added in: Free stock videos, Pattern libraries, Placeholder Text, Color Pallets, Typography, Inspiration.
Updated on 7 May 2019Β with new resources added in: Pikwizard.
Web designer’s ultimate list of free resources index
- 131. Free stock photos
- 72. Placeholder images
- 33. Image compression services
- 64. Free stock videos
- 35. Pattern libraries
- 116. Color Pallets
- 157. Typography
- 77.1 Free fonts
- 87.2 Font Utilities
- 188. Font Icons and Font icons generators
- 158.1 Font Icons
- 38.2 Font Icon Generators
- 79. Placeholder text
- 310. Favicons
- 911. Site optimization
- 1112. Inspiration
1. Free stock photos
Let’s take a look at some of the best free stock photos sites.
Picjumbo
Picjumbo has a great assortment of searchable pictures. You can even check how the picture would look on your site with some overlay text or buttons by selecting the “test drive” option.
The pictures included in the Business category are perfect for your site’s hero/banner area.
The site is easily searchable, pictures are categorized and are free for commercial and personal use.
Pixabay
Pixabay not only includes really high-quality photos, but also vectors and illustrations. The submitted pictures are curated by the site admins, so you can be sure that the quality is high.
You can use the photos freely, as they are released under CC0 – Public Domain license.
LibreShot
LibreShot is an easy to use site that features really great images. It even has a really interesting Macro category. The best part? All the pictures are released under Creative Commons Zero, so you can use them everywhere.
StockSnap
StockSnap has a nice collection of really high-quality pictures. They are released under Creative Commons Zero license and you can search or sort the images by: Date, Trending, Views, Downloads or Favorites. If you’re a web designer and you need background pictures for the Hero or Testimonial sections of your site, you must check StockSnap.
Pexels
Pexels currently has over 2700 pictures on their site, all released under the CC0 license. They publish daily 10 new images hand-picked from free image sources like Unsplash, Gratisography, Little Visuals so you can be sure that you’ll only find high-quality pictures.
IsoRepublic
IsoRepublic is a site founded by designer and photographer Tom Eversley. The site is easily searchable and the photos are organized under categories. If you’re after really high-quality Urban or Architecture pictures this is the site for you. You can also find some amazing pictures under the Textures categories, really useful if you need a background image in your designs.
Designer Pics
DesignerPics is created by web designer & developer Jeshu John. The featured images are top-notch and free to use for personal or commercial projects.
Realistic Shots
Realistic Shots has some amazing pictures released under a CC0 license in the following categories: Startup, Nature, People, Travel, Architecture.
SplitShire
SplitShire offers a selection of super high-quality photos ready to use in your next personal or commercial project.
FoodiesFeed
FoodiesFeed features free food related images and illustrations. If you’re building a restaurant theme, this is the perfect site for photos. The only problem is that after you browse the images, you’ll get really hungry π
Unsplash
Unsplash is one of the first free stock photos sites and is well-known for its high-quality pictures ranging from technology to nature. The images are free to use and they publish 10 new pictures every 10 days.
Gratisography
Gratisography is a well known site with free and beautiful pictures. The pictures from the Whimsical category are really interesting and expressive.
Pikwizard
Pikwizard has a huge collection of over 100.000 high quality free images and over 20.000 exclusive images.
Images are added daily, making Pikwizard worth mentioning.
User Inter Faces
A collection of user faces to use in your projects: admin section, testimonial area, etc. The users in the Authorized category gave their consent to be used on live websites. If you need some names for the faces, you can use UI Names.
2. Placeholder Images
Using a placeholder image service speed-up your workflow considerably: you won’t have to edit or crop the pictures anymore, instead you’ll add the image URL directly to img
source attribute.
Usually, the URL look something like this: placeholder.com/width/height. Some services may serve you a gray scale picture if you add g in front of the width: placeholder.com/g/width/height
LoremPixel
LoremPixel is one of the first placeholder services. It has 13 categories to choose from and can serve color or gray scale pictures. You can even add a custom text to be displayed on the image. If you don’t specify a certain picture to be shown, the images that will be displayed will be randomized.
1 2 3 4 5 6 |
<!-- Displays a random 400x200 image --> <img src="http://www.lorempixel.com/400/200" alt="" /> <!-- Displays a random 400x200 image from the cats category with a custom text --> <img src="http://www.lorempixel.com/400/200/cats/Meow" alt="" /> |
LoremPicsum
If you want some nice placeholder images from popular cartoons, then you have to use LoremPicsum. The image categories are: Finding Nemo, Futurama, RIO, The Simpsons and UP.
1 2 |
<!-- Displays the second picture in the Futurama category --> <img src="http://lorempicsum.com/futurama/700/400/2" alt=""> |
Unsplash.it
Unsplash.it is a really awesome service that generates placeholders using pictures from Unsplash. This means that the images will always be top-notch. The instructions to generate the placeholder images are very clear and you can simply copy them from the main page.
PlaceIMG
PlaceIMG offers images for layout purposes only and fall under Creative Common Licenses. While the license is a little confusing, the images are great and the site is really easy to use.
1 2 3 4 5 6 7 8 |
<!-- Generates a 350x250 image --> <img src="https://placeimg.com/350/250/any"> <!-- Display a grayscale image from the nature category --> <img src="https://placeimg.com/640/480/nature/grayscale"> <!-- Display a sepia image from the architecture category --> <img src="https://placeimg.com/640/480/arch/sepia"> |
PlaceKitten
The internet is for cats, so it was only normal that a placeholder service dedicated to our favorite furry friend to exist.
PLACEHOLD.IT
Placehold.it doesn’t display photos, instead uses grey placeholders.
1 2 3 4 5 6 7 8 |
<!- Default usage --> <img src="http://placehold.it/350x150"> <!-- A square image --> <img src="http://placehold.it/350"> <!-- Let's add some text --> <img src="http://placehold.it/350x250&text=This is a test"> |
For example, this placehold.it/350x250&text=This is a test
wil generate this:
3. Image compression services
After you decided what pictures to use in your design or article, you have to optimize them and decrease the file size to decrease loading time and save bandwidth. You can do this in an image editing software or you can use an online image optimization service. You just have to upload the image and the site will quickly reduce the file size without losing too much image quality. You can barely see the difference between the original photo and the processed one.
To test the compression size, I used the Sand Dunes photo from IsoRepublic.
The original photo is a 4.94 MB JPG and has a resolution of 4000×2666.
TinyPNG
Despite the name, TinyPNG supports both PNG and JPG files. The really cool thing is that it supports and preserves transparent PNGs.
One thing to notice is that the compression is lossy and you would be able to see the differences between the original and compressed file.
The user interface is extremely simple and efficient, the file size limit is 5 MB and you can upload up to 20 images at a time, but after compression you have to download them individually.
In our compression test, TinyPNG performed exemplary: from 4.94 MB to 1.58 MB. At normal resolution, you can barely notice any difference, but if you zoom in you can see some small image pixelation.
CompressJPG
CompressJPG has a simple drag & drop interface. You can adjust the compression settings and you can download the images individually or in a ZIP archive.
Our test image was compressed to 2.52 MB using the default settings.
Compressor
Compressor supports 4 file formats: JPEG, PNG, GIF and SVG and the file size limit is 10 MB.
The test image was compressed to 2.54 MB using the lossy compression.
My favorite online image compression service is TinyPNG. It has a simple interface and the best compression rate. However, it only supports JPEGs and PNGs and you can’t adjust the settings.
CompressJPG allows you to adjust the settings and see the chamges in real time and you can download all the pictures in a zip file.
Compressor supports 4 file types, has a 10 MB image size limit (more than enough) and you can download your photo to Dropbox or local hard drive. The only downside is that you can only upload one picture at a time.
4. Free stock videos
One popular trend is to display and auto play a video in the Hero/Banner area of your site. If you don’t have your own video, you can use one from the sites mentioned bellow.
Coverr
Coverr is the new kid on the block, but already boasts an impressive collection of really useful videos. All the videos are released under CC0 – Public domain and they release 7 new videos every Monday. The site is easy to use, all the videos are categorized and you even get code snippets to easily add the video to your web project.
Life of Vids
Life of Vids has footage videos, loops and clips free of any any copyright restrictions. To use a video, you have to visit their Vimeo account and download it from there.
Pexels Videos
Pexels Videos has a large library of CC0 videos. You can use the videos any way you want and attribution is not necessary.
Videvo
Videvo has a large library of over 3000 videos. The license used is Creative Commons 3 and to download the videos you have to register for a free account or login with Facebook/Google+/Yahoo.
Distill
Distill is currently in Beta, so the site is a little buggy. The videos are free for personal and commercial use and 10 new videos are released every 10 days.
vidsplay
Vidsplay offers a large collection of royalty-free stock videos ready to be used in your next project. You can search for videos, but the videos are not categorized, so you’ll not be able to browse specific categories.
5. Pattern libraries
Luckily we’ve moved past the era of Web 2.0 design with harsh gradient backgrounds and glossy buttons. But some subtle textures can add interest to your site or app if they are used tastefully.
Subtle Patterns
Subtle Patterns has one of the most popular pattern libraries. The site is curated Atle Mo and all the resources are released under a CC BY-SA 3.0 license. This means you can use the textures in your personal or commercial projects, but you have to give credit.
Place Pattern
Place Pattern could also be filed under the Placeholder images category. It generates unique patterns for your design, some patterns are really subtle, while are others are really “in tour face”.
The Amazing Pattern Library
The Amazing Pattern Library currently has over 50 patterns ready to use. The patterns are interesting, some are subtle, others are more bold, suitable for an infographic or an illustrative site or project.
6. Color Pallets
Color Pallets are really useful if you’re tired of the same colors that you’re using and you need some new color inspiration.
Flat UI Colors
Flat UI Colors is one of the most popular color pallets sites. It only has 20 colors, but you can be sure that they look good together. I’m sure you’ve seen some of the colors suggested here used on numerous websites.
Material Palette
Material Design is a popular design trend nowadays and if you need some color suggestions for you next Material Design inspired app, this site is perfect. You start by selecting 2 of the 19 colors and then an 8 color pallete is generated. Really cool and useful!
Color-hex
Color-hex allows you to select colors from an already established color pallete or create your own. Select a color and all the color information, tints, related colors will be shown. It even generates some CSS3 examples for you to use.
Adobe Color CC
If you don’t want to open you Photoshop and use the Adobe Kuler plugin, you can use an online version. Adobe Color CC is a powerful app, yet simple to use: simply drag the sliders to your favorite colors and see the suggested colors that go well with your selections or browse other user created pallets.
Paletton
Palleton is an online app somehow similar to Adobe Color CC. You can select your color from the colored circle and your color pallete is generated. What I find really useful are the tools at your disposal: you have presets, numerous preview options, a lot of examples with your generated colors – ranging from full site layouts to animations and artworks and a really useful Vision Simulation mode. This mode allows you to simulate color blindness, to desaturate the colors or to view the results in a 256 color legacy mode.
If you want to test the color pallete and plan for accessibility, this web application is heavily recommended.
0 to 255
0 to 255 generates darker and lighter colors based on a selected color.
UI Gradients
UI gradients has a nice library of color gradients that you can immediately use in your design since the CSS gradient color is provided.
Gradients.io
A collection of 20 nice and modern gradients are ready to be used in your next site!
BrandColors
Ever wondered what colors a specific brand uses? This site contains an exhaustive list of all the major brands and the colors associated with them.
Pictaculous
Pictaculous is an amazing web app by the awesome folks at MailChimp that generates a color palette from a picture. This is really useful if a client sends you a picture that they want to use on the site. You can simply use Pictaculous to extract the main colors from the picture and then build the site using the generated colors.
You even have Kuler (Adobe Color) and ColourLovers palette suggestions based on the picture colors and you can download the palette as an Adobe Swatch file.
7. Typography
Typography is one of the most important aspects in design. If your fonts are properly matched and readable, the user will enjoy using your site or application.
To increase the readability of your text, don’t forget to set the proper line-height. To calculate the line height, you can use this formula: font size * 1.5. For example, if you have a 16 pixel (1 em) font-size, your line height will be 24 pixels (1.5 em).
Another aspect to take in consideration is the text line length. You don’t want it to be too short or too long as this would be too tiring for eyes. Try to use around 50 – 80 characters per line.
Fonts are generally categorized in:
- serif – According to Wikipedia, a serif is a small line attached to the end of a stroke in a letter or symbol. In print, serif fonts are generally preferred because it’s believed to increase the legibility of the text. Examples: Times New Roman, Bitter, Droid Sans
- sans-serif – These are fonts without serifs, without the small lines at the end of the letter. On the web, sans-serif fonts are generally used for content. Examples: Arial, Helvetica, Source Sans Pro
- script – Script fonts mimic handwriting. Because they use letter decoration to add interest and mimic handwriting they are better suited for headings. Examples: Pacifico, Handlee, Satisfy
7.1 Free fonts
After this short introduction, let’s take a look at some free font resources.
Google Fonts
Google fonts is one of the most popular free font library on the web. You can directly download the font or include it on your site using Google’s CDN. It’s really easy to choose a font, since you can test it, sort the fonts by various criteria or see some font pairing suggestions.
Font Squirrel
Font Squirrel is another popular site that has an impressive library of free fonts. The site is really easy to use, you can search or browse categories or “test-drive” fonts.
Font Space
Font Space
Font Space has an impressive collection of over 27 000 free fonts. Some fonts look amazing, while others look a little rough around the edges. Don’t forget to always check the license to see if the fonts you choose are free for commercial use.
Font Fabric
The available fonts are gorgeous and you can really see that authors put good effort in creating them.
Da Font
Da font has a huge library of over 28 000 fonts. Be sure to check the license, as some fonts are only available for personal use. Luckily, you can sort by many criteria, including the license type.
1001 Fonts
1001 Fonts has over 7500 fonts and over 4000 fonts for commercial use. Before you download a font be sure to check the license to see the if you have to credit the author!
7.2 Font Utilities
We’ll take a quick look at some useful font utilities like: font pairing and size suggestions sites. Using these resources will guarantee that your fonts will look great.
Font Pair
Font Pair shows pairing suggestions using fonts from Google.
Beautiful Web Type
You can use this site for some really cool font pairing suggestions using Google Fonts. The examples presentation is really cool and interesting.
Google Fonts Typography
You can see some font pairings in action and read Tales from Aesop’s Fables. Good stuff.
Type genius
Enter a font and Type genius will show pairing suggestions and display real-life websites that use the same font pairing.
Typewolf
Typewolf is an awesome resource created by designer Jeremiah Shoaf. His goal is to create the best web-typography resource on the net and I think he achieved it. You can find comprehensive lists about font pairing suggestions, in-depth guides and read blog entries about typography.
The Art Of Mixing Typefaces Google Fonts Edition
A really useful article and infographic about Google fonts pairing that features 20 fonts and the suggested matches.
TypeSource
>
Tobias Ahlin created this list of 11 font pairings. The suggested fonts are free for use, since they are Google Fonts.
Type Scale
If you’re not sure what size your heading and copy fonts should have, then Type Scale is the site for you. After you finish tweaking the font options, you can easily download a custom CSS snippet that contains the rules for body and heading typography.
What the Font!
Sometimes you find a really nice font and you want to use it too. But you don’t know the name of the font. Enter What the Font! Upload an image of the font and this cool site will find the closest font matches.
8. Font Icons and Font icons generators
The main advantage of using font icons instead of classic image icons is that you can easily style them with CSS. If you want to change the size, color or add some shadows, you can do that with CSS and you won’t have to fire up your image editing software and adjust the image icon settings there.
To use them in your projects, you simply have to load the icon font’s CSS file:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<head> <!-- load the font CSS file --> <link rel="stylesheet" href="path/to/icon-font/css/icon-font.css"> <!-- You can also use a CDN --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> </head> <body> <!-- To use the font, include it in an i or span tag --> <i class="icon class"></i> <span class="icon class"></span> <!-- Font Awesome example --> <i class="fa fa-camera-retro"></i> <span class="fa fa-camera-retro"></span> </body> |
8.1 Font Icons
Now let’s take a look at the best free font icons around the web.
Font Awesome
Font Awesome is the most popular icon font site. It has 585 icons, ranging from general purpose icons to specialized ones, like medical icons.
You can download the icons or include them on your site via CDN.
Octicons
The 178 Octicons are created by the awesome folks at GitHub. If you’re building an UI, you might want to take a look at this icon set, since they are primarily created for this purpose.
Foundation Icon Fonts
You don’t have to use Foundation Framework if you want to use these icons on your site. They currently have a collection of 283 elegant and high-quality icons to include in your next project.
Ionicons
The 528 Ionicons are created for the Ionic Framework, but you can use them freely in your projects. You can download them or include them via CDN.
Open Iconic
Open Iconic has 233 open source icons. You can get them in a variety of file formats: from SVGs and PNGs to TTF and EOT.
Payment Webfont
If you need to add an icon of a payment system, Payment Webfont is the way to go. You have 34 glyphs to choose from.
Themify Icons
Themify Icons offers you 320 font icons, 100% free. The icons are very cool and modern, since they are inspired by the iOS7 look.
Linea Iconset
Linea Iconset has an impressive collection of over 730 outline icons. If you want a modern “ghost-like” look for your next project, take a look at this awesome resource. The license is Creative Commons Attribution 4.0.
Web Hosting Hub Glyphs
WebHostingHub Glyphs has a huge collection of 2075 icons. You can easily find an icon for your taste by searching of visiting the icon categories. License is CC3.
Map Icons
Map Icons has an impressive collection of over 140 icons licensed under CC3. They are ideally used to indicate places on maps: restaurants, subways, bars, leisure activities etc.
PW Drawn Icon Font
PW Drawn Icon Font has a collection of 90 icons that look like they were drawn by hand. You can use them in you personal or commercial projects.
Weather Icons
Weather Icons provides us with 189 icons ready to use in your weather-related projects.
Flat Icon
Flat Icon is the largest database of free vector fonts. The site offers flexibility in choosing you preferred icon format: fonts, PNGs, SVGs, PSDs. THe license used is free license with attribution. You can use the icons, but you have to give credit.
Modern UI Icons
1259 icons are ready to use in your next projects. The web font version is released under MIT license and contains a smaller selection of icons, but you can easily convert the SVG icons to fonts using Font icons generators.
Material Design Icons
Material Design Icons has an impressive collection of over 1200 icons licensed under the SIL Open Font License 1.1, so you can use them in both personal and commercial projects. The icons are inspired by the Material Design trend (hence the name) and new icons are added regularly by the community.
8.2 Font Icon Generators
If you have your own icons that you want to convert into an icon font, you can use some really useful online apps. Upload an SVG icon and it will be converted to a font icon.
Maybe you only want a few icons out of an icon library, or you want icons from different libraries, for example 3 icons from Font Awesome, 1 from Octicons and 5 icons from Foundation icons. You can combine them in one font that only has 9 icons, instead of installing 3 different font libraries.
All these tasks can easily and quickly be solved by using Font Icons Generators.
Fontello
You can create you own custom font icon by uploading an SVG file or you can browse the collection of ready – made icon fonts and select the ones you need to use. This is a very practical solution, since you’ll only download the icons that you need in your project, not the entire icon collection.
Fontastic
To create your icon font from a custom SVG or to choose fonts from an impressive library, you have to create a free account. After you login, you’ll be creating font icons in no time. The UI is great and really easy to use, so you won’t have any problems creating font icons from the many available free or premium font icon libraries.
You can even host your generated icons in the cloud with the free service provided. This service has a limit of 5000 page views/month. A pretty good number, especially if you’re just starting out.
Icomoon App
Icomoon app is another font generator service. The free Icomoon icons are really great, and you have 490 icons to choose from. If you need more icons, you can add other free or premium icon sets.
One really cool thing that sets Icomoon app apart is that you can save your icon fonts as SVGs and PNGs, not just as fonts.
9. Placeholder text
Content is king, but you’ll very rarely have some meaningful text ready for your site. Clients don’t provide content, so you’ll have to use some dummy text instead.
Lipsum
Lorem Ipsum is the industry placeholder standard. It’s a passage taken from a piece of very old Latin literature.
Not Lorem Ipsum
Not Lorem Ipsum provides placeholder text for over 40 industries. It provides realistic placeholder text for a main page and a sub-page.
Check this real example, taken from the App development example section:
This app does everything you could possibly want it to do and not only that, it is beautifully designed and extremely intuitive to use. Download it from the App Store for FREE if you donβt mind some adverts popping up or if you prefer an ad-free experience then you can down load the ad-free version for 99p.
If you want to add some realism to your mock-ups, Not Lorem Ipsum is the obvious choice.
Fillerama
Fillerama offers you quotes from the scripts of popular movies and TV series: Arrested Development, Doctor Who, Dexter, Futurama, Monty Python, The Simpsons, Star Wars and Lorem Ipsum. At least, the Lorem Ispum passage is not that common.
Fillerati
Fillerati provides content from classical works by famous authors like: Lewis Carroll, Jack London, Jules Verne or H.G Welles.
Picksum Ipsum
Picksum Ipsum generates quotes and lines from your favorite Hollywood legends: Clint Eastwood, Michael Caine, Jim Carrey, Morgan Freeman, Johnny Depp or Christopher Walken.
Corporate Ipsum
Corporate Ipsum is the ideal placeholder text to use in your next corporate project, thanks to the business buzzwords used: synergy, clicks-and-mortar solutions, revolutionary ROI.
UI Names
Sometimes you need a list of names to add to your site sections, like testimonial or admin sections. You can easily generate names from 46 countries and add them to your apps.
10. Favicons
Favicon is usually the most neglected component of your website. Without one, your site will be difficult to bookmark, the favicon won’t appear in your browser tab and you’ll get a lot of File not Found 404 errors.
Generally, the site logo is used as a favicon. The minimal size is 16×16 pixel icon, but 32×32 px or bigger are also common. One favicon.ico file can contain more than one icon: 16px, 32px versions are usually grouped together.
To add a favicon to your site, you have to add the following code in the head
section of your site:
1 |
<link rel="icon" type="image/x-icon" href="favicon.ico"> |
Favicon.cc
If you don’t want to use an editing software to create your favicon, you can use this online generator. Yo can either create you icon or import it and save it as a .ico file.
Real Favicon Generator
Real Favicon Generator is an awesome tool that creates favicons for all the possible devices and resolutions. You have to submit a square picture, minimum 70×70 pixels and your favicons will be generated. You can even test how your site’s favicon appears on various devices by using the favicon checker.
I always use this awesome site to create and test my favicons.
Audreyr’s Favicon cheat sheet
Audreyr’s Favicon cheat sheet is one of the best and comprehensive information source about favicons on the web. Be sure to read it before creating your next site icon!
11. Site optimization
After you’ve completed your new website project, it’s time to test it for speed, optimization and device compatibility.
For a website, speed is crucial. Studies show that if your site has a high loading time, your potential visitors will lose interest and leave the page. Also, a fast response time, will place you higher in Google results page.
Mobile users currently represent over 50% of the online market, so you have to be sure that your site is responsive and looks good on various devices.
Google Page Speed Insights
Enter your web address and Google will display a list of suggestions to improve your site. Some are easy to implement, while some are more difficult, depending on your skill level or technology you use to power your website.
Pingdom Tools
Test you site with Pingdom Tools and find out its performance. You can see a detailed report about speed, resources and general performance. They even have suggestions to improve the performance.
GT Metrix
WebPage Test
WebPage Test is another online site tester that goes really in depth with site analysis.
Gift of Speed
Gift of Speed can test your site speed and also has additional tools to test various aspects, like image delivery test, a checker for broken links, etc. Read the guides to dramatically boost your site performance.
Responsinator
Responsinator is a useful app that tests your site on various devices and screen resolutions.
Responsive Design Checker
Am I Responsive?
Browser Shots
Enter your site address and Browser Shots will take screenshots of your site on various browsers, operating systems and resolutions. A really useful tool to check the design consistency on various platforms. The only small downside is that the process takes some minutes, since you have to wait for the process queue to finish.
12. Inspiration
If you need some inspiration for your next project, visit this sites and find the latest trend!
Dribbble
Dribbble is the go-to place for quality design and inspiration. You will find the coolest designs here, from beautiful websites, awesome UIs to inspiring vector art.
Behance
You can post your portfolio on Behance and receive valuable feedback or job opportunities. Browse other designers portfolios and be inspired by their work.
Site Inspire
Site Inspire showcases well designed sites. If you have a great site design you can submit it and if it’s good enough, they’ll publish it.
Land Book
Land Book features the best landing pages around the web.
One Page Love
Get some inspiration for your next one page site design!
Flat DSGN
Flat design is still a popular trend and this site features the best flat sites.
Awwwards
Awwwards is one of the most important inspiration and design critique sites. They organize yearly conferences and prize-giving ceremonies. You can submit your website and can vote for site of the day.
Material Up
Material Up showcases the best apps and sites that use Material Design. You can also read article about material design here.
Call To Idea
Call To Idea has a nice collection of specific design elements to inspire you: footers, forms, 404 pages, about pages and more.
Header Love
The header/hero area is the first section your visitors will see when browsing your site. If you need some inspiration or just want to see the latest header design trends, just visit headerlove.com
Very Nice Sites
Very nice sites, as the name suggests, features a collection of nice site designs curated by Max Min.
Brief Generator
Brief Generator is a different inspiration source. Instead of a list of awesome sites, it generates a design brief for you to follow when building design for practice.
Conclusion
A big thank you goes to the creators of these awesome free resources. Thanks to them, the webdesign community is a better place.
I hope you’ll enjoy the resources I compiled for you. If you liked this list, don’t forget to spread the word and share it with others.
it is very helpful, love it, thanks π
Glad you find it helpful.
You could also add http://www.colourlovers.com/palettes
Thank you for your suggestion, we’ll definitely take it under consideration.
Awesome! thanks for making a helpful list π
Most welcome!
Thanks for helpful resources list π
Nice collection, thanks! I’ve another one that i’ve been using that you could add, http://useyourinterface.com
Thanks! I’ll use this site as inspiration for future tutorials!
Very interesting selection of content.
Thanks for writing about Coverr, we appreciate it π
Coverr is really awesome and useful, so it was only right to add it to this list.
thx a lot for sharing this useful resources!!
You’re welcome. Glad I could help.
Hi Gabriel, Awesome List Man! If possible, please include our new startup http://www.sketchjar.com in your list. Would appreciate your help!
We add two images everyday which are handpicked by us.
Hey, thanks for the appreciation!
While your selection of pictures is very nice indeed, I couldn’t help but notice that most of them are not high resolution, therefore they wouldn’t work as a banner for example.
This is a wonderful list. Thank you for taking the time to put it together!
I would also recommend http://www.moqups.com. I’m not sure it really fits any of your categories, but it’s a browser-based wireframing tool that I have used numerous times.
This was a great read with all those lovely images.
Great beat ! I wish to apprentice while you amend your web site, how can i
subscribe for a blog web site? The account aided me a appropriate deal.
I have been a little bit familiar of this your broadcast offered bright transparent concept