hi. this is a concept that many of us are already doing it intentionally, and some of us might not realize how much the art of stealing plays into our learning process.
this is a design-leaning talk - daily because my main focus is design, but i do believe that these higher concepts also apply to development.
what are we striving for when we create?
We want what we create to be unique. and when I say that, i mean
original. We want to have the spark that connects us to a unique reality. something special. but most importantly, we want it to be memorable.
this is what makes it good. a brand is designed well if it’s memorable and lasting. this concept goes for other mediums as well. a song that you love to hear, a book that you read, a meal that you enjoyed, an art piece that moved you. memory gives us meaning. As creators - how do we get to this place of originality, uniqueness, and memorable presence?
we steal. that might sound terrible, but if you think about learning from a higher level: we acquire knowledge over the course of our career and then build upon it for our betterment.
Erika hall from mule said “we’re all imposters (so be a good one!)” - think about it. when we design and build upon WordPress, we are essentially stealing from this collective source - we’re not building something unique form scratch - we are all building our creations upon the shoulders of others.
does this make us thieves? yes. we are all thieves. Practically everything we make is derivative of something. this is not a bad thing - it’s all about how we go about it. “Copying is wrong when it is pretending to be original”
Just in case i’m not clear - I’m not telling you to take the new york times and slap your logo on it…
- that would be wrong. but what I am saying is that, we can look towards others, what already works and is already memorable. and utilize established concepts.
Be careful because sometimes derivations on a concept might not be far-enough to be considered original. Like the Robin Thicke / Blurred lines controversy - their song Blurred lines was similar to marvin gay’s “Got to Give it up” - and at one point in an interview they said that they were trying to have a “marvin gay give it up feel” - because of this, Marvin Gay’s family was awarded 7.4million dollars in a settlement. Sometimes when you steal, it can be too close. there’s a certain amount of derivation that is needed in order for it to be considered original. however, Jay-z was sued by an egyptian flute player for sampling his flute in “big pimping” and the court threw out the case. Even though we’re riding this fine line of appropriation, our end goal here is to learn.
Becoming a thief is opening up yourself to learn. with the goal to build upon established information and then push the boundaries of creativity, technology, and innovation. This is an incredible way to learn and grow. and we all do it even if we don't know it.
what are the steps to becoming a thief? but what i really mean is
steps to becoming better at your craft. (it’s real simple, but takes a lot of work)
step one: dissect established brands and designs.
Step Two: Copy what you love
Step three: adapt and improve. alright lets break it down.
back to step one: dissect established brands and designs. this is a very research heavy part of the art of stealing. Start by looking up some of the big guns. look at agency portfolios. find their latest work and see what they are doing. CRASH COURSE:
look through all industries. for instance, spartswear. here’s nike, and lets compare it to..
and then compare to underarmor. it’s practically the same site. note the elements that are similar. big imagery with call to actions right on the home page rather than straight to a grid shopping cart. why might this be? they’re formulating a lifestyle, a story - rather than just pushing their products.
lets switch industries to say publishing. here is the atlantic
the marshall project
bloomberg - note the trend of reverse type on dark dense background - this trend is creeping its way into publishing.
We need to also Look at individual Brands as well as industry trends (and then steal ideas from each other.)
logodesignlove.com has an incredible list of links to different brand style guides from major companies. it even includes the us web design standards.
it’s a guide to create consistency across the federal government
it’s a super nice style guide. it lays out all the elements of their design. elements, and use cases. Design has so much to do with systems and logic. Just perusing other company’s style guide, we can learn so much
Uber’s brand guidelines is also linked. it’s a beautiful page that showcases consistent ui elements. i highly suggest you go and browse these brand guideline documents. they are so interesting! a great tool to help you dissect other design is
whatfont. the whatfont chrome extension is key in figuring out fonts on a page. It will help you gather all kinds of type information for you to steal later.
what are we going to do with all this information that we’re getting?
we’re going to compile it into a visual bank. get crazy organized to help your brain. make lists, make collections, take notes. if you look at these brands and write down in words what makes it successful, you might find something powerful or trends you never thought existed. think about font and color combinations, spacing, functionality and tone, user experience.
a lot of people compile in different ways. some people use pinterest to help organize what they’re learning about. they create boards, and you really can find a lot of cool stuff by looking through it.
invision has a great board feature that lets you easily create mood boards and collections that might inform a design that you’re working on. this might even convert into a style tile for your next project.
here’s an unclose shot of calendar inspiration area. its a great way to organize all the information that you’re stealing ideas from.
there are a TON of inspiration websites out there. here’s one of my favorite just based upon how they separate out by element and trend. lovelyui.com - They have a “ghost buttons” section where they’re showcasing the use of the that trendy thin outline white button.
- explore and compile. keep doing it - trends come and go! you want to continue to inform yourself of what’s out there. When we do this, we develop what is called…
design intelligence. this is the foundation and the groundwork for stealing and making it your own. even if you’re a developer, I encourage you to look around and start to craft your own design intellegence. It’ll help you have a deeper understanding of what you’re building. so what’s next?
Step Two: Copy what you love - after developing our design intelligence, we’ve overloaded ourselves with so much rich information. so many ideas, executions, concepts, layouts, button styles, etc that we’re overwhelmed by it all. to make sense of it- what’s next is to pick out what you love. - what struck you - and copy it
What I really mean is to copy what works. because you’ll find that what you love about a design, is really a design that works.
lets be thieves and copy.
this reminds me of when I was in art school - we had an ongoing assignment to keep a sketchbook where we literally copy master drawings in order to learn. So in a rare showing, I pulled out my masters sketchbook circa 2001. the tree on the right is mine, pulled out from the pencil drawing on the left. Through continuing practice and copying, you train your hand to become better, your spacial awareness becomes more acute. with drawing, its a bit like music where you need to keep practicing and keep training your eye and your muscle memory.
we all know that picasso’s art was original and unique and unprecedented an the time, but he did build on the shoulders of others, like monet. what are some things we can steal?
We should steal learned behaviors. there are so many that we all need to steal, but i’m just going to touch on a few. The first is the fact that we’re all finally learning that there is no Pagefold.
you can literally scroll forever. There is no page fold anymore. so scroll on! scroll forever! Design your sites with the thought that scrolling is commonplace and a learned behavior.
or just scroll as far as I want you to until I make you hit load more. Either way, scrolling is a common learned behavior that we all steal.
another learned behavior is skimming. this demands the pullquote. in the magazine world, it is considered a point of entry - Emphasize pull quotes and photo captions as points of entry. it’s the quickest way to add value to your content, bringing people into your stories and giving them ways to skim. I encourage you to embrace learned behaviors such as some
what is a micro-interaction?
Microinteractions are single product moments that have one main task. it could be pull-to-refresh, double tap to like on instagram, or the little dots that show you that someone is typing in imessage. these are all microinteractions. steal them. in fact, I stole these videos off vine to show you.
here’s the basics of a micro interaction. A Trigger initiates the micro interaction. The Rules determine what happens, while Feedback lets people know what’s happening. Loops and Modes determine the meta-rules of the micro interaction. - check out Dan Saffer has to say on micro interactions.com
known behavior micro interactions are really important to steal. we’re slowly collectively as humans, developing a micro-interaction vocabulary especially with the introduction of swipes and gestures. it’s important to try to utilize any already known behaviors before pushing the limit with your own new concepts. What i think is interesting about the pull to refresh is that twitter copyrighted it - but allowed it to become an industry standard.
so now we’ve dissected and copied existing designs - whats next?
Step three: adapt and improve - this is the key secret. We want to build upon the foundation that we’ve been given. We want what we build to become original and memorable.
I love this, this quote might sound sneaky at first, but if you think about it - it makes complete sense. If we want a design to be unique, original, and memorable - We use other sources as the backbone to expound upon and in the end, we’re hiding the obvious in plain site. this is key to innovation.
a great example of this in action is material design.
material design is a design language developed by google that is a perfect example of stealing. Google took the principles of flat design and gave it a reality to sit in through dimension and shadow. If you’re a designer, you might remember (or even use) the long shadow trend.
this design trend popped up as as response to the flat movement. the flat trend got so flat, the response on that called for dimension. So people started giving long shadows to things.
ts eliot said: …
…in my opinion, long shadow started going down the defacing route.
next thing you know everything was getting a long shadow.
and then the shadows got longer and longer.. luckily this trend did not keep going. material design came to the rescue.
material design to tamed the shadows! it gave us the dimension and root in reality that we were craving with flat design.
material design is all about hierarchy and motion. Think what we just said about micro interactions - material design incorporates this principle - and a great thing about this is that google encourages you to steal it.
if you want to see some more examples of material design in the wild check out this showcase.. materialup.com
while preparing for this talk I stumbled upon a material design framework
I’ve never used this, but it seems interesting to check out.
so to Recap:
step one: dissect established brands and designs.
Step Two: Copy what you love
Step three: adapt and improve. these are all great methods - But I had to add a step 4
Step 4: collaborate. Up until now, we’ve been discussing pushing our creative limits, stealing & imitating, but we have yet to discuss the role of collaboration in all of this. Collaboration is the next step.
share your designs, be honest, work together to make something better. - buy designs from others in places like creative market to push certain parts of your work or to save you time- it’s smart to purchase an incredible icon set instead of building your own from scratch if it works for you - feedback, collaboration, and constructive criticism on your work is key to pushing innovation. But what is really near and dear to my heart is:
share with others! this makes our industry thrive! make an icon set and put it up for free download. or get on github - this makes more sense when it comes to programming than it does to designs. but put up your front end code. your micro-interactions. Think about the previously mentioned “materialize”, the material design framework that is free. just think for a second how many resources you’ve utilized that is free (cough WordPress) and think about how you can give back as well.
in the end, I want to close with: Steal this Talk - share it - give it - take it. lets all become thieves together.
Range, a Design and Development Agency specializing in high quality design and WordPress development. You can find me on twitter and my slides on slideshare will be up after this talk. so if you don’t get all the links