The One Stop Design Resource Shop

Web design can be overwhelming. When you consider all of the different elements that have to come together to make a decent one, it can be nerve rattling. Luckily I’ve compiled a list of web design resources that covers most aspects of design from icons to color palettes. Let’s take a look.

Images

Images are usually the first thing we see when we visit a website these days, so picking one that sends the correct message for your project or website is important. Here are a few resources that will get you on your way to finding that perfect hero image.

https://i2.wp.com/www.telegraph.co.uk/content/dam/Travel/galleries/travel/activityandadventure/The-worlds-most-beautiful-mountains/mountains-Kirkjufe_3374110a-large.jpg

Hero Images

The first image resource on the list is aptly named. heroimages.com is exactly what the name implies: a large collection of high resolution hero images for use in design projects. The downside to this collection is most of the images are not free, but there are some royalty free images on the website.

Pixabay

Pixabay is fantastic because all of the images are guaranteed to be copyright free. They have everything from large hero images to illustrations and even vector graphics. Their customizable search makes it easy to find exactly what you’re looking for.

Unsplash

Unsplash is another great resource for high resolution royalty free images. They are also royalty free and there are a lot of great high quality images in their collections. The collections themselves are fantastic inspiration for design. With groups like “faith” and “urban folk” it’s easy to get some inspiration or direction for a particular project.

Icons

Icons are more important than ever thanks to the rise in device and mobile usage. Finding good icons or even creating icons for your project can be cumbersome especially if time is a constraint. Below are some great resources for icon collections as well as embedding icons.

Image result for icons

The Noun Project

The Noun Project is an excellent collection of really well done icons. Again the downside, like Hero Images, is that each download costs 1.99, but is creative commons past that. There is a monthly plan that allows for unlimited downloads at a low cost, so if you find yourself doing a lot of user interface development it may be worth your whiel.

Endless Icons

Endless Icons is an excellent free icon library. While it isn’t fancy it covers almost every base in terms of the types of icons featured on the site.

Typicons

Now this is really cool: Typicons is a collection of 336 pixel perfect vector icons embedded in a web font. They are ready to use on any website or native application by adding their mini CSS to your code. I need to dig into this resource further but if it works like it should this is a really neat and powerful resource for any designer.

Vectors

If your design projects relies on scalability and clean graphics, utilizing vectors is a must. Creating vectors from scratch can be time consuming. Here are some great resources for finding free vectors and even finding established logos in a vector format.

https://parachutedesign.ca/wp-content/uploads/2016/02/svg-new-website-design-graphic-standard.png

Free Vintage Vectors

Free Vintage Vectors is exactly what it’s name implies: a collection of high quality vintage and rustic looking vector icons. Seeing as rustic is kind of in right now. This is a great resource for things like that zero waste hiking boot logo you’re working on.

BrandEPS

BrandEPS is a great design resource for when you need a specific company logo and you need it scalable. BrandEPS is an online library of company logos in an SVG format. Tired of waiting on that art director to get the logo to you? Check and see if it’s already on BrandEPS.

Vector.me

Vector.me is a search engine with a database of over 280,000 free vectors so they will probably have something close to what you are looking for on any project. They have a large database of tags to help narrow your search and all vectors are absolutely free.

 

Color

Color is one of the most important things designers deal with and one of the most difficult. Finding just the right color palette for any project can be daunting. Use these resources to help you pick the perfect and appropriate colors for your design project.

Image result for color

Adobe Color CC

Adobe Color is always my first stop when I am contemplating colors for a project. The ability to create color themes and send them directly to my Adobe library has become a crucial part of my workflow. I recommend that all designers familiarize themselves with this process because it is a fantastic tool for not only creating color palettes but alos utilizing them in your projects.

Check My Colours

Check My Colours is an awesome resource for making sure your website or project is accessible as possible. Their website will check a website and let you know if it provides sufficient color contrast when viewed by someone who is color blind. If you are a designer that strives for accessibility, utilize Check My Colours often.

Color by Hailpixel

Color by Hailpixel is a unique way to browse and pick colors for a project. You can slide your mouse up and down or left and right to control things like hue and saturation. As you move the mouse you get the web value for the specific color. Click to lock a color in and continue to build a custom palette.

Layout

Layout can be another overwhelming aspect of design but with all of the available resources out there it doesn’t have to be. Check out the layout resources listed below to get an idea about just some of the available and mostly free layout tools on the web.

Image result for layout web design resources

1200px.com

1200px.com is a great website that offers a flexible 1200 px grid system in a variety of formats. You can even generate a variable grid system on the fly and download the CSS file. If you are designing interfaces from scratch this is a great place to start.

Responsive Grid System

The Responsive Grid System is a really cool website and system for creating a fluid column system for responsive design. You simply select your number of columns and set the margins and the website does the rest. It generates the necessary HTML and CSS to make your site a fluid responsive site.

Skeleton

Skeleton is another great responsive design tool for smaller projects. It only styles a handful of standard HTML elements and includes a grid. It uses a 12 column 960 px fluid grid that shrinks accordingly. This is a great layout tool for clean simple interface projects.

 


 

These are just a few of many, many available design resources on the web. These tools should help get the inspirational wheels turning so that you can put together a stunning responsive design, but go out and see what else you can find. Are there any design resources out there that you can’t live without? Let me know in the comments!

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s