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 UXprototyping.
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 rightaway.
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 webapp.
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’mfinished.
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 favoriterestaurant.
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 brandidentity.
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 lightingconditions.
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
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 thecontent.
What design tools and tutorials have you found most useful? I’d love to
hear your recommendations. Join the conversation on Twitter.
Learn how to leverage Web Platform Tests to ensure your polyfills are implementing upcoming browser features correctly, including how to generate a comprehensive report of failing/passing tests on each change.
OddBird sponsored Python Web Conference 2023 and sent me to attend. In this article I showcase my favorite talks and activities from this excellent online event, including a list of useful resources for web application security, introductions to new PaaS providers, and a comparison of the most popular Python web frameworks.