Skip to main
Article
Tools for design include a computer, sketchbook, pen and paper

Get Started with Design

Four useful tools & tutorials

So you’d like to start learning design, but the number of tools and tutorials available is overwhelming. Where do you start? I recommend Paper for sketching out UX ideas, Practical Color Theory for Coders to generate color palettes and learn color theory, Choosing the Right Font: A Practical Guide to Typography on the Web as an introduction to typography, and Adobe Experience Design for UX prototyping.

So you’re a developer or you’re brand new to the world of web design, and you’d like to grow your design chops. How do you even begin to sort through the overwhelming assortment of tools and tutorials available? In this guide, I’ll introduce the tools I use daily in my work as a user experience and brand designer for OddBird. I’ll recommend quick and useful tutorials that will get you started designing right away.

Paper sketching tool

When tackling a complex UX design challenge, I start with sketches. My go-to tool is aptly named Paper. Paper, by WeTransfer, is free for iPad and iPhone. Paper is much more basic than tools like Adobe Photoshop and Illustrator. In my experience, a collapsable toolkit with several brush styles, seven colors, and an eraser is all I need to sketch rough drafts of web features. Here are two sample sketches I drew using Paper during the development of the QuarqNet web app.

QuarqNet sketches on Paper

With Paper, I can auto-straighten uneven lines and zoom in for detail work. When drafting logos, I often trace images. Paper lets me upload an image, draw on top of it, and easily delete the image from the background when I’m finished.

Website by Jason Santa Maria

According to typography expert Jason Santa Maria, “If your type is bad, the design fails.” There’s so much to learn in the rich field of typography. To get started, I recommend Choosing the Right Font - A Practical Guide to Typography on the Web by Max Luzuriaga. Max provides an overview of important elements to consider: readability, pairing, and size.

If you have an hour, check out Jason Santa Maria On Web Typography, a talk he presented at Build Conf 2011. Or delve into his book On Web Typography, but be warned – you may get bitten by the typography bug and find yourself regaling your friends about that horrendous typeface pairing on the menu at your favorite restaurant.

If you already know the theory and you’re looking for free, high-quality typography for your web project, here’s a list of my favorite resources. You can also read about the process I use to select typography for a brand identity.

Natalya's color theory decision tree

It’s important for any designer to be able to create pleasing and accessible color palettes. If you write code, Natalya Shelburne’s Sass color functions outlined in Practical Color Theory for People Who Code are an excellent tool for generating a palette that works. If you’re not a developer, this is still a fantastic tutorial in how to think about color for the web. You’ll learn about accessible contrast, using neutral colors, and how to simulate cohesive lighting conditions.

Color can make or break a user’s experience on the web. If you’d like to learn more, here’s an outlined of my process for choosing brand colors including a list of several tools for generating color palettes and testing contrast.

Adobe Experience Design

My new favorite UX design tool, Adobe Experience Design, is still in beta. XD has a built-in tutorial that’s fun, beautiful, and takes less than an hour to complete. I use XD prototypes to flesh out my sketches, and to play with colors, typography, and layout. XD is also an excellent tool for working out how users will flow through the content.

What design tools and tutorials have you found most useful? I’d love to hear your recommendations. Join the conversation on Twitter.

Recent Articles

  1. A dog zooming by the camera, up-close, body twisted and eyes wide as it circles a grass yard
    Article post type

    Zoom, zoom, and zoom

    The three types of browser (and CSS!) magnification

    I’m working on an article about fluid typography, and relative units. But instead, I fell down this rabbit hole – or a cleverly-disguised trap? – trying to understand ‘zoom’ in the browser (not Zoom™️ the software). Since I couldn’t find any up-to-date articles on the subject, I thought I shoul…

    see all Article posts
  2. A rusty anchor hanging with the sea in the background.
    Article post type

    Updates to the Anchor Position Polyfill

    Catching up to the spec

    Our sponsors are supporting the continued development of the CSS Anchor Positioning Polyfill. Here’s a summary of the latest updates.

    see all Article posts
  3. A back hoe on the bank of the Suez, trying to free the Ever Given cargo ship
    Article post type

    Learn Grid Now, Container Queries Can Wait

    Take your time with new CSS, but don’t sleep on the essentials

    Several people have asked recently why container queries aren’t being used more broadly in production. But I think we underestimate the level of legacy browser support that most companies require to re-write a code-base.

    see all Article posts