Web Design for Developers: The Ultimate Resource Guide

Banner that reads "The Ultimate Guide to Web Design for Developers"

Design is often cited by developers as one of the hardest aspects they face in completing a project. When you’re first starting out and picking up freelance projects, your clients might expect you to be a one-stop shop for both their design and development needs. If you have a background or training in design, that’s just fine and dandy.

For the rest of us it can present a whole boatload of problems.

But designing and programming don’t have to be mutually exclusive, and working on both skills at the same time can put you ahead of the game when it comes to finding a job.

This article will provide you with a load of resources you can use to simplify the process of designing your sites and projects. It includes everything from Photoshop tutorials for designing site mockups to courses you can take to deepen your understanding of good design practices.

Now, let’s learn the basics of how to be a good designer so that you can really focus on your code.

General Inspiration

Patterntap

Shot from the Patterntap site, showing how designers have implemented services pages on websites
From the Patterntap website: filtering patterns by “services page” shows the layouts designers have implemented for service pages.

The Patterntap site is dedicated to providing designers with visual inspiration. What’s awesome about this site is that you can filter through specific site elements, such as lists, article layouts, testimonials.

It’s a great way to get ideas for how to organize these elements within your own development projects if you’re someone who (like me) struggles to understand what makes for a good-looking layout.

Dribbble

Screenshot of a few Dribbble site results for the term 'portfolio page'
Searching Dribbble for a term like ‘portfolio page’ can give you ideas for how to put together your own page.

Whether you’re trying to get inspiration for your freeCodeCamp portfolio page, or looking for a simple design to base one of your CSS Daily Images on, Dribbble is the place to look.

Described as ‘show and tell for designers,’ this site is a great place to browse popular designs and even share some of your own.

Color Palettes

Color schemes can make or break a website. It’s one of the first things people notice when they visit your site, and it can impact your visitors’ mood and psychology, the ability of your site to achieve conversions, and overall readability.

The following sites will help you generate awesome color combinations that are sure to impress.

coolors

Palette example from the Coolors website

The Coolors interface allows you to lock onto colors that you like and generate palettes around them, export color palettes as PDFs and image files, filter your palette through a color blindness simulator, and so much more.

If there’s a color I want to base a design around, or I need to create a color scheme around a logo, I’ll use a color picker to get the hex code. Then I’ll paste it into one of the Coolors palette spaces, lock it in place, and press spacebar to generate a complete palette around that color. How easy is that?

Color Hunt

Screenshot of ColorHunt front page, which displays a number of color palettes

Created by designer Gal Shir, Color Hunt features beautiful color palettes that you can use to really make your projects pop. The palettes are user-created and you can filter them based on popularity and date of creation.

Stock ImagesPicture of a laptop open with the Pexels website on the screen

The above sites are perfect for finding high-resolution images you can use for hero images, or for padding your portfolio site with sophisticated, crisp images of creative workspaces, coffee mugs, and whiteboards.

Both offer free high-resolution images that are licensed under Creative Commons Zero. That means you can copy, modify, distribute, and otherwise use these images for any purpose (including commercial)  No permission or attribution needed.

Icons & Things

Developer sitting crosslegged, holding Macbook in lap
A sticker from a vector pack found on the Freebie Supply site

When you’re putting together a portfolio website, it can be nice to throw in some logos and icons that show the frameworks and languages you know.

Or, you might want to include some adorable icons chock-full of mechanical gears, laptop screens overflowing with binary, and programmers hard at work in their home offices.

Whatever your goal, it’ll be easy to find the assets you need using the resources below.

Note: Many of the downloadable assets are in Illustrator/Photoshop format and individual icons may need to be manually separated out of the packs. If you’re looking for good introductory courses on working with Adobe Illustrator and Photoshop, I highly recommend Treehouse (discussed in the Course section of this post).

r/DesignFreebie

This subreddit is a great resource for free typefaces, Photoshop and Illustrator tutorials and assets, icons, website templates, and so much more.

FontAwesome

Font Awesome is an amazing, fully open-source icon collection that was originally designed for use with Bootstrap. You can use CSS to easily style any of your icons. Because they are scalable vector graphics, they look great at any size.

There are 675 icons in Font Awesome 4.7.0, and new icons are released in each version.

Icons8

This site boasts around 35,000 icons. These hardworking designers and coders produce all of their icons in-house, and the time they put into their work really shows. Take a look at all of their fantastic programming icons! Not only are the icons beautifully designed, you can also:

  • Add text, overlays, and backgrounds to any icon
  • Download the icon in any color, size, or format

All they ask is that you add a link to their site on any page where you use their icons.

Freebie Supply

Freebie Supply is a catalog of free design resources curated by a small team of creatives. If you’re looking to jazz up your web project with great icons and vector images, you’ll probably get the most use out of are the Free Vector and Free PSD Icon pages.

However, if you want to practice your HTML/CSS skills, browse the Free PSD Website Templates and try to recreate some of the designs for your own portfolio.

Articles

How to not suck at design, a 5 minute guide for the non-designer.

7 Rules for Creating Gorgeous UI (Part 1) || (Part 2)

10 Useful Google Font Combinations for Your Next Site

48 Excellent Tutorials for Designing Websites in Photoshop

Books

The Non-Designer’s Design Book by Robin Williams

This book is often used in college-level Intro to Design courses and for good reason. Knowing how to implement these very basic principles can make your projects shine.

The book is a thorough introduction to some of the most important concepts of design: proximity, alignment, repetition, and contrast. Not only will you get a good idea of how to implement these designs in your sites, you’ll be presented with a great deal of examples of design faux pas and how to correct them.

Don’t Make Me Think by Steve Krug

Steve Krug’s book is a classic, no-nonsense treatise on web design and usability. Web design expert Jeffrey Zeldman insists that “after reading it over a couple of hours and putting its ideas to work for the past five years, I can say it has done more to improve my abilities as a Web designer than any other book.” (Emphasis mine.)

Krug’s countless nuggets of insight will have you nodding your head and ascribing to his advice to keep it simple. The book is chock-full of simple but powerful thoughts like:

The fact that the people who built the site didn’t care enough to make things obvious — and easy — can erode our confidence in the site and the organization behind it.

And this:

Another needless source of question marks over people’s heads is links and buttons that aren’t obviously clickable. As a user, I should never have to devote a millisecond of thought to whether things are clickable — or not.

Overall, it’s a great reference book that you’ll constantly be turning to for guidance.

Courses

Code School – Fundamentals of Design

We all know Code School (which is a Pluralsight company) has awesome content. Their quirky course jingles are an adorable introduction to the subject matter, and their quizzes and challenges let you test your understanding of their educational videos.Screenshot from Codeschool's typography video

Code School has two great design courses for you to check out:

Fundamentals of Design —You’ll learn how to really improve the look of your sites with this class. This course has three levels: typography, colors, and layout. Only the typography level in this series is free, but you can gain a lot from just that one class.

The Elements of Web Design — Like the other course, only the first level is free. The focus of this course is on designing user-centered, mobile-friendly sites. You will also learn about organizing your content and navigation.

HackDesign

HackDesign is a free design course with resources curated from some of the best designers out there. It features 50 lessons on everything from designing with whitespace and grids to responsive web typography. It’s kind of like what The Odin Project is for web development.

All you need to do is provide your email address and create an account, and you can have complete access to the Hack Design curriculum.

Treehouse

Treehouse logo

Treehouse is the only paid resource I subscribe to. The reason is that their basic membership is extremely affordable, and the content is fantastic. I use it 1000 times more than the Lynda subscription leftover from my undergrad days.

Some of the design courses that will be invaluable to developers include:

  • Design Foundations
  • Photoshop Foundations
  • Creating Wireframe and Photoshop Mockups
  • Web Typography
  • Adobe Illustrator for Web Design
  • And so many more…
Screenshot from a Treehouse video on optimizing web images and graphics in Photoshop
Screenshot from a Treehouse video on optimizing web images and graphics in Photoshop

If you’re just starting out and trying to get freelance jobs for your portfolio, especially as a front-end developer, it can be difficult to pitch to a client without a professional-looking mockup. Clients might also want you to use their assets, and you’ll need to know how to optimize them for the web.

That’s where Treehouse has your back. Their courses are video-based and completely up-to-date. And if you’re on the fence, you can always give them a try with a free trial.

Tuts+ Design School for Developers

This is a great (free) article series on web design specifically catered to developers. It has helpful tutorials on creating color schemes, working with brand and design guidelines, improving layout with rhythm and grids, and so much more.


I hope this article can help some of you web developers out there with the ever-confounding problem of design! Let me know what some of your favorite resources are!

Note: Links to Amazon and Treehouse are affiliate links, but rest assured that I stand behind these recommendations 110%. Your purchases help to fund my coding (and coffee) habits. 🙂

Published by lupe

I'm a web developer at an awesome web design agency in PDX. I'm passionate about learning, playing, tinkering, and blogging about everything from coding to DIY experimentations.

Join the Conversation

3 Comments

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: