Web Design for Developers: The Ultimate Resource Guide

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

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.

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.

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?

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 Images

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

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).

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.

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 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.

Books

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.

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

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.

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 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 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

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.

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. 🙂

Amazon Associates Disclosure

Lupe Camacho is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to Amazon.com.

Patched together with and plenty of

%d bloggers like this:

We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.Ok