Click to call

Hello again!

In this post you’ll learn about 10 web design resources that you might need if you’re dabbling in web design.

1. Color Scheme Designer

What It Is: It’s all about web colors!

When To Use It: When you need to find the right colors for your webpage.

Why It’s Cool: You can see triad, tetrad, analogic and compliment colors (no I don’t know what analogic means). It also shows you light and dark page examples with the colors on the page. Pretty nifty!

Screen Shot 2013-09-11 at 3.46.26 PM2.

What It Is: An easy to use tool for wireframing.

When To Use It: Before you begin to actually design the pages. Always easier to design when you know what exactly what your client wants.

Why It’s Cool: The free version allows you to create full-page wireframes and creates external URL’s so that you can show your clients exactly what you have while being able to edit what you already have.

Screen Shot 2013-09-11 at 3.53.27 PM3. CSS Filter Effects

What It Is: When you want to add webkit filters to an image on your website. If you don’t know what a webkit filter is, this resource will also be a great learning tool.

When To Use It: When you are looking to add some cool effects to your websites portfolio section or to any images on your site.

Why It’s Cool: This page does a really good job of simply showing what is possible as far as webkit filters are concerned. Mixing and matching filters is fun and easy!

Screen Shot 2013-09-11 at 3.57.14 PM4. Icons DB

What It is: A database (go figure) of free web icons that can be downloaded in 4 different file types and in pretty much any color!

When To Use It: When you’re tired of paying for icons or need to find icon images that are larger than usual.

Why It’s Cool: You can enter a custom hex color that is then applied to every single icon they have in their database. You can also download the files in various sizes, from 16×16 up to 512×512.

Screen Shot 2013-09-11 at 4.05.07 PM5. WordPress Help Sheet

What It Is: This is an image of WordPress php snippets.

When To Use It: This themeforest wordpress themes are something that you can customize on  an existing theme or building your own.

Why It’s Cool: Having all of the code snippets right at your fingertips is massively helpful when your other option is referencing a file or using a plugin.

Screen Shot 2013-09-11 at 4.10.16 PM6. Buttons

What It Is: A downloadable CSS button library with class references (if that doesn’t make sense to you, this isn’t the resource for you)

When To Use It: When you want some easily accessible well-built buttons on your website.

Why It’s Cool: These buttons are already built! Just download the CSS from the page and throw it into you style.css folder and begin referencing the different classes.

Screen Shot 2013-09-11 at 4.13.36 PM7. What Font

What It Is: A Google Chrome Extension that will identify what fonts are being used on a webpage.

When To Use It: When you are curious what cool fonts are being used on your favorite sites!

Why It’s Cool: Simple and easy to use and shows you the exact font family, font size and line height that is being used on the page.

Screen Shot 2013-09-11 at 4.24.16 PM8.

What It Is: A really easy to use place hold image service.

When To Use It: When you are building out pages that don’t have images quite yet.

Why It’s Cool: You can change the dimensions of the image by changing the URL of the page. For example to create a 350×150 image you would enter×150. It’s that easy.

Screen Shot 2013-09-11 at 4.31.54 PM9. Eye Dropper

What It Is: Another Google Chrome Extension that will show you the exact color of items on a web page.

When To Use It: When you need to replicate a color you see on another web page or when you find a color you really like.

Why It’s Cool: The extension is easy to access and stores your all the colors you pick. It also has a built-in color picker in case you need to customize a color.

Screen Shot 2013-09-11 at 4.36.46 PM10. Corporate Ipsum

What It Is: A hilarious alternative to the website dummy copy lorem ipsum. It uses corporate buzz words instead of latin to fill in copy on a page.

When To Use It: When you are designing the layout of a page and have yet to receive copy from a client.

Why It’s Cool: This is a humorous alternative to the industry standard. Some of the phrases are really great. Here is an example!

“Efficiently reinvent parallel information via one-to-one networks. Enthusiastically e-enable value-added “outside the box” thinking without enterprise core competencies. Competently enhance interdependent networks before impactful process improvements. Enthusiastically deploy wireless resources.”

There you have it party people. 10 resources to help you out when you’re designing a website. Just remember to build it on WordPress 🙂

Caleb out…