Thesis Laboratory header image  Menu

25 Of My Favorite Resources for Web Design Content & Tuts

Design plays a definite part in the success of many websites. Let’s face it, unless you are writing material as good as Seth Godin, the look of your website is going to help determine whether your readers, customers, etc. stick around or hit the dust.

I am a huge stickler about the design of my projects. Sometimes more-so than I would like to be. If I don’t have all my colors, transparencies, borders, graphics, etc. exactly how I like them, I edit & preview & edit & preview & so on.

Since the fore-mentioned tendency of mine is rather counterproductive, I like to use some of the resources you find below to make my life a little easier.

My hopes are that you can take away some value from these places the same way I have and get bumping on your next project.

That being said, lets get into the web design resources, tutorials & freebies that I often use.

Free Graphics & PSD Files for Web Design

PSD Images and Files

Graphics are important because they are often the most visually stimulating part of design (next to video). Using crappy graphics with off-color backgrounds or poor spacial arrangement won’t cut it.

Grab countless graphics & elements for web design at some of these spots:

FreePik

FreePik is more of a search engine than an actual provider of graphics. It’s one of the best hubs on the internet for finding all types of graphics.

Vecteezy & Brusheezy

These are two awesome sources for Photoshop goodies. Vecteezy offers great free vectors and Brusheezy offers tons of different Photoshop brushes, patterns, styles & more.

Deviantart

Deviantart is one of the top image & design communities on the internet. They offer free, premium, & showcase content in every design area imaginable.

FreePSDFiles

FreePSDFiles is exactly what the name states; A place to download free Photoshop files to us in your work. There are numerous categories on this site as well ranging from logos to backgrounds & everything in-between.

Iconfinder

Iconfinder is a great spot to grab free & licensed icon sets for your design or development work. No matter what you need, you’ll find it here. Grab your social media icons, interface elements & much more for FREE!

Dribbble

Dribbble is a community of web designers, graphic designers, illustrators, icon artists, typographers, logo designers, and other creative types that show their work, process, and current projects.

LogoInstant

LogoInstant is a free graphics source that specializes in logo designs. No matter what type of website you are creating you can likely find a suitable logo to build off from here.

Dryicons

This is a really cool source for graphics because they allow you to download tons of stuff for free and also offer the option to purchase different licenses for content. Dryicons is definitely worth a look.


Spots for CSS, HTML & Javascript Tutorials

CSS HTML Javascript Tutorials

Whether or not you are a developer you will undoubtedly have to deal with some form of coding if you are building websites.

The best part is that many times you don’t even have to write much code yourself, you can use a template of someone else’s code.

Here are some of the places I frequent when doing customizations of CSS, HTML or Javascript:

CSS-tricks

This site is really a all-in-one package. CSS-Tricks provides a brilliant blog, forum, galleries, videos, code snippets and tons more all for to make you a better designer.

The Icon Deposit

Another great spot for design tutorials, graphics & freebies, The Icon Deposit offers a community based design platform. You can add your own work or check out the work of other members too.

Smashing Magazine

Covering everything from coding & design to mobile & graphics, Smashing Magazine is truly a complete resource for web workers. You will find no shortage of material from this website so be sure to check it out.

Line 25

Loaded with tutorials and inspiration, Line 25 is a Web Design blog that has been providing excellent material since 2009. I have found tons of inspiration at this site so hopefully you can too!

Codrops

Possibly my favorite tutorial resource is Codrops by Tympanus. They have SO MANY valuable CSS3 & HTML5 tuts here and offer them all for free! Be sure to give them a look.

Design Modo

Design, coding, tutorials, inspiration and more is what you will find on Design Modo. One of my favorite sections on this site is the WordPress section because I do most my development on WordPress.

Speckyboy Magazine

One of my favorite design resources is definitely Speckyboy Design Magazine. I have used so many tutorials from this website while creating content for my design projects & I know you will find it useful.

The Code Player

At The Code Player you can learn HTML5, CSS3, Javascript and more with video style walkthroughs showing cool stuff being created from scratch.

Web Design Ledger

A little different than the previous two spots, Web Design Ledger is a blog that offers info about the best spots to get free stuff & learn/use code with tutorials.

1st Web Designer

1st Web Designer is an excellent website for all things web design. Whether you’re looking for tutorials, WordPress content, inspiration, coding or a bunch of cool freebies, this is your spot.


Online Tools for Web Designers & Developers

Web Design Tools and Resources

The Net offers some really great tools for designers to create content easily. Things like buttons, gradients, patterns, backgrounds, shadows & more can be created easily with tools & transferred to your projects by simply copy & paste.

Below are a few spots that provide tools for CSS3, HTML, Javascript & other development.

Button Maker – CSS3 Designer

Easily create buttons to use on any website with this nifty CSS3 button creator. Choose the background, border, text & color settings and additionally set :active, :hover & other states as well. This tool comes from CSS3 Designer.

Code Pen

CodePen is an HTML, CSS, and JavaScript code editor right in your browser with instant previews of the code you see and write. It’s great for showing off your work and seeing what amazing things other people are doing with the web. It’s also great for troubleshooting problems and getting critique.

CSS3 Click Chart

I think CSS3 Click Chart offers one of the most complete CSS3 tools around. You can automatically create almost any CSS3 effect and see exactly how it will look then grab the code. There are common & advanced features included.

JS Fiddle

This is one of the coolest tools around. At JS Fiddle you simply enter the HTML, CSS & JS code you have and you can automatically see the result in front of you. Great for testing & developing new code & designs. A similar resource is JS Bin.

Dirty Markup

Having clean code is very important to successful web development. After editing code you can often be left with unformatted, ugly lines and Dirty Markup helps get rid of these. Simply enter your CSS, HTML or JS code, choose a few settings and automatically have your code beautified.


Other Resources for Web Design & Web Development

In addition to the free resources mentioned above, there are lots of premium marketplaces & businesses dedicated to providing premium content to us web workers.

Envato Marketplace

The Envato marketplace, which is made up of CodeCanyonThemeForestGraphicRiver,AudioJungle3DOceanPhotoDuneVideoHive & ActiveDen is one of the most complete resources for web developers on the internet.

Affiliate Marketplaces

Some other spots you can find valuable design/develop/marketing content is on different affiliate networks. Places like ClickbankCommission Junction and Share-a-Salecontain a plethora of material in all the categories we have talked about.

I hope you enjoyed this post and it helps you along the way in your journey.

If you know of some other valuable resources that I haven’t mentioned (and I know there are A LOT), don’t hesitate to leave a comment and share with others.

Thesis Lab is Built Using the Thesis Framework

Thesis 2.1+ Framework

Thesis Framework by DIYThemes provides the ultimate platform for building websites with WordPress.

Create virtually any style & layout you desire easily & effectively.

View Our Skins & Boxes

0 comments… add one

Leave a Comment