Skip to content

Instantly share code, notes, and snippets.

@realph
Last active April 6, 2020 21:47
Show Gist options
  • Save realph/b2f11c22a75e4e8ef002f7e3964a4dc8 to your computer and use it in GitHub Desktop.
Save realph/b2f11c22a75e4e8ef002f7e3964a4dc8 to your computer and use it in GitHub Desktop.
Getting started with interface design

Getting started with interface design

Books

Haven't read it before but it's often heralded as good entry point for designing interfaces.

Heard good things about this book.

Well-regarded bible on UX design. Does what it says on the tin by stressing one of the most important priciples of screen design — never making the user think.

I'd highly recommend giving this one a read. It's full of golden nuggets founded in good/solid/grounded interface design principles. Can't recommend it enough!

Tools

There is a large pool of design tools to choose from, but if there was one tool I'd recommend getting familiar with it would be Figma.

In the last few years it's become the tool to use for interface designers. Why do people love it, you ask? Some years back the popular design tools (mainly Adobe and Sketch) started to plateau, and they also did a good job of convincing designers at the time that the design tool was never going to close the gap between design and engineering, and that handoff, the process where designers "hand-off" finished designs for engineers to implement, would remain a somewhat arduous and painful task forevermore. This went on to spawn a new market of separate handoff tools, but that's another story.

With Sketch and Adobe having taken their eye off the ball, a little tool called Figma came along and it wasn't shy about pushing the envelope, and slowly nudging itself closer to the engineering tools that were responsible for implementing these designs. Yay!

Fast-forward a few years and many innovations later, Figma has dethroned Sketch and become the defacto interface design tool in the industry. It's also platform agnostic (yay!), running on Mac, PC, Linux, and Web. Also this wraps up the the history lesson. Another yay!

--

Figma tutorials

Here are some great tutorials from the Figma team's YouTube channel which should help you get started.

  1. What's Figma
  2. The Basics (playlist)
  3. Components (playlist)

Speaking of YouTube, here's some more videos I found that delve into process and techniques.

Some of these tutorials may be missing some of the most-recent features that have come to Figma in the last 12 months. However they're still a good watch.

Other Resources

The Laws of UX

https://lawsofux.com/

Atomic Design Principles

TLDR: https://bradfrost.com/blog/post/atomic-web-design/

Book: http://atomicdesign.bradfrost.com/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment