UI Swipe

Intro

Tracing.
Copywork.
Why not UI work too?

‍Tracing my favorite cartoons and comics is how I developed the mechanics in my hand for drawing (shout out to Goku’s hair).

This made attempting larger original works easier. People thought I had a natural knack for art and drawing (and maybe I do, but that’s beside the point).

‍Copywork is the same principle but applied to the practice of writing. The idea is: you look at someone else’s work, and painstakingly copy each word, along the way noticing sentence structures and word usage.

Why not do this with UI?

Steps

01

Find yourself some UI that just dazzles you on Dribbble, Awwwards, or Behance (or Instagram for that matter)

02

Make a folder of your references. Pick the top 10 favorites and drop them into your design tool of choice (I enjoy Figma these days).

03

Size your canvas up to the exact size of the sample UI. The purpose here is to make an exact replica manually. Start copying. Find the font, strokes, colors, and replicate the effects. Use found assets where you can for things like photos, icons, and fonts.

04

Reflect on the layout. Call out what you see. Be scientific in your method. Break it all down into pieces.

Conclusion

A user interface is all about what the user can do and how to do it.

A mentor of mine @Sara Gonzales once told me that part of solving interaction problems is like having access to a "mental library of patterns."

If you are new to UI design in general this exercise will help you develop your mental library. It is also an excellent way to study new styles and trends and stay fresh with your aesthetics.
‍
User Interface deliverables are increasingly outsourced to agencies and offshore designers for price and convenience.
‍
In the near future, we might even be ditching Figma for something like usegalileo.ai

Still, an interface, is a hypothesis. And hypotheses evolve.
‍
Designers like engineers, must be able to look at a design and have an idea of how it was made.

So, become a tasteful, studious thief.

And steal everything. iOS, Material design, take it all.

"If you think a man draws the type of hands that you want to draw, steal ‘em. Take those hands." - Jack Kirby, Artist

And who can forget:
"Good artists borrow; great artists steal." - attributed to Pablo Picasso

References

Check back later for examples! - JJ 3/7/23

Resources

Steal like an artist

A superb resource on this mentality as a learning mechanism.

Buy on Amazon

UI Clone

Intro

Associated Professional Skills

Suggested time

Materials needed

Steps

01

02

03

04

Conclusion

References

Resources