or, the "how to think like a designer" part.
designers and developers have a lot in common when you think about it: they’re both lazy at heart 😜. they both want to “Keep It Simple, Stupid” (KISS) and are obsessed about details like tabs vs. spaces (or, for designers, px vs em, hah). knowing this, you will make your designers infinitely happy if you not only pay attention to the general guidelines they are giving you but also the minute details that make your app come alive.
to do the aforementioned collaboration effectively, start with a styleguide, which is effectively a contract between design and development. it includes things like: color palettes, fonts, widgets (buttons, menus, etc.), and iconography.
here are some recommended tools:
this is an important, yet so-overlooked-it’s-not-even-funny area in web development. at the very least, you shouldn’t be doing silly things like using <span> tags where you should be using <button> or <a> tags. but there’s so much more to a11y than just using the correct HTML elements, like: adding ARIA attributes to your tags, making sure color contrast is correct, placing elements in a certain tab order, and the list goes on and on.
there’s so much to cover in this area such that it wouldn’t all fit in this guide. it is my hope that eventually at least UI toolkits (mentioned in a section below) will become robust enough for the average developer so that at least the widgets are adherent to the guidelines — we’re almost there in that regard. here are some must-read guides on learning the in’s and out’s:
programmatically, there are a couple libraries that you can use to get an automated assessment of your website:
anecdotally, at my previous company, a tool was designed internally to display a11y information on every webpage (so that it wasn’t just hidden in the DevTools). that’s how important this is!
finally, if you’re on a Mac be sure to check out the VoiceOver Utility to get a real-world sense of how your app is feeling when navigating via keyboard (although i think it only works on Safari, sadly).
somewhat in the same vein as a11y is providing access to your site to the people around the world that don’t necessarily speak the same language that you do. there’s a lot that goes into i18n, not just translating words, but also the way numbers are formatted, dates, relative dates and pluralization.
the recommended library here is react-intl.
today’s devices are part of a Cambrian explosion of which the variety is astounding. as such, you need to make your UI’s adaptable if you are to survive in this new world. most of this involves using CSS media queries (example: @media (min-width: 600px)) to gate certain CSS to only apply when a smaller device is being used. learn more here.
in your CSS you should tend to avoid boxes that have a set size (with px) and use percentages or em values. the newer vw or vh properties which are relative to screen size can also be helpful here.
your layouts should have the capability to flow vertically when the width is constrained. in effect, the columns of your website should stack on top of each other instead of next to each other.
take into consideration that your users are on handheld devices and they will have to strain their eyes more.
in addition to making it easier to click around your app, you’ll also hopefully save some bandwidth which is more constrained when the user is on the go.
in the top left of Chrome DevTools, next to the Inspect element icon is a button that lets you see how your site is responsive to different mobile device widths. learn it. love it.
oof, there is a lot going on here that it can make the head spin. you’ll hear related technologies under the umbrella term of web components, including: Custom Elements, <template>, Shadow DOM, and ES modules.
web components are a way to create reusable components that are encapsulated in the DOM. cross-browser support is almost here but not quite yet so this technology is still a bit bleeding edge. because of all the ups and downs in this area historically, i’m almost ready to recommend going this route vs. more vanilla widgets.
i think i’m in love with the idea of web components. but for some reason they keep failing to gain traction in the community. i would take the “assess” stance on Web Components: they might be poised to still be the dominant way to write components in the future but we’re still not there yet.
MUI is a great React library to get you going with a UI toolkit straight out of the box. an alternative library that has good traction is Mantine.
a good custom font (i.e. from Google Fonts) can add a lot of flavor to your site. that being said, system fonts are still a great choice, too, and much faster! the choice is yours. that being said though, you should use still probably use the system font stack regardless to avoid invisible text while the custom fonts are loading.
Google Fonts. a wonderful set of great fonts that are free to use! here are some inspirational font choices via Google Fonts to get you thinking about how to choose one.
by defaulting to a system font you gain speed and a look for your site that matches the user’s operating system. here’s how to implement it:
body {font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen","Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;}code {font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;}
for the human eye, reading a wide swath of text is tricky. an ideal width of 45–75 characters can be achieved thusly:
p {width: clamp(45ch, 50%, 75ch);}/* or */p {font-size: clamp(1.5rem, 5vw, 3rem);}
MUI has a great set of icons that are easily included into your app. you can find a meta search of all icon sets across the web here and here.
alternatively, Nerd Fonts is a great one-stop font combining Font Awesome, Octicons, Material Design, and many more. however, it can be more difficult to include into your app — it’s not as simple as an import statement.
Doodle Ipsum is a fun set of illustrations you can use as well. unDraw can also be used for some quick illustrations.
react-spring is a great little library that gets you a smooth spring-like animation effect. (i used to use Rebound JS to good effect on Dropbox Paper for its menus and toolbars — react-spring is its spiritual successor.)
Animate.css is another great library that will get you a lot of animations for free out of the box. (by the way, as recommended for most third-party libraries i mention in this guide, it’s good to grab what you need not the whole library wholesale since that can increase your app’s bundle size by a thousand little cuts. but, of course, be sure to leave the code’s original license in!)
more libraries of interest:
it’s worth familiarizing yourself with how designers work these days and the tools they have at their disposal. this will help you collaborate more effectively and make sure details don’t get lost in translation when coded-up.
building a product in a vacuum won’t really work — you need to try it out in the real world! check out the UX Collective to understand how to approach this process holistically and unbiased.