Design for the Rest of Us

00:00:00 design for the rest of us AKA what Willie Wonka can teach us about design um thanks for that great intro Aaron um I am Jack McDade who here uses statamic a couple people heard of it awesome we're not going to talk about that at all but there's a lot of people transistor mail coach McDonald's there's a lot of people who use it if you want to talk about statamic come uh find anyone on the core team here uh everybody but Duncan he couldn't make it and we'd happily talk to you about stat uh who here wishes they were better at

00:00:33 design or uh as Caleb says who wishes they didn't suck at design you suck I made it like 10 minutes ago and I messed it up I have an extra slide in there okay so here's what I want to do I want to um I want to convince you that developers with design skills are a super threat and in fact developers with design and business skills are unstoppable if you can do all parts of those you can launch any project on larvo cloud and um and so we're just going to get into it here today uh earlier this year I launched a course

00:01:11 called radical design um it did pretty well and some of the feedback from that uh was really good and so what I wanted to do was try and take 30 minutes of like seven hours of content and just jam it down your ears as fast as possible and so actually the best way to do that my slides are messed up again I'm sorry all right so what I'm going to do is um is reveal the secret sauce from the course so since we can't cover everything the feedback that was most valuable from from everybody when I talked to them as I gone through the

00:01:45 course is the secret sauce um the secret sauce is in five parts first it's the goal of design we need to define the goal of design so we know what we're actually shooting at there's going to be an obstacle if you decide that you want to actually spend a little bit time as a developer getting better at design you're going to run into an obstacle immediately and we need to cover that before we even get going because we can get past that uh next I need to free your mind and reveal a secret that designers have

00:02:20 I don't know if it's necessarily like on purpose but something that maybe you realize designers do that you didn't think they do then we're going to talk about the process of design and then we're going to look at Willy Wonka and see if he agrees with me okay how's that sound thank you the goal of good Design This is my definition the goal of good design is to create an experience that guides someone willingly with honesty towards a mutually beneficial goal what I mean here is that uh if someone has a product there's searching

00:03:00 for a product they find your website you've communicated what that product does clearly they buy it they're happy with it you made money they're happy with the money they spent transaction completed that's that's the goal that is a good design that got them from uh learning about your company Andor product to the actual finished purchase that's in direct contrast to the goal of evil design which is to create an experience that manipulates someone unwillingly and with deception towards a self serving goal that's

00:03:33 clickbait that's every Instagram I've ever seen for supplements I probably already have and for camera gear I definitely don't need so with that definition in mind if we can agree that that is a good definition and you decide yes I would like to not suck so much at design and Tackle being a little bit more thoughtful like Caleb showed I had to edit a lot of slides he showed everything I was going to do no um the biggest obstacle you're going to run into I'll tell you right now it's not design software because if you can

00:04:07 you figure out vim and Docker I promise you could figure out sketch and figma they are so easy everything's clearly labeled you're literally just drawing boxes putting text in the Box adding a drop shadow it's more the deciding what to put on the screen is the thing that drives you crazy right this is the obstacle it's the fear of putting out bad design if you've ever if you've been in the industry for like 15 20 years and you've never really put your name on a design like hey I built this side project all

00:04:39 by myself and you've and you've never put your name on like that whole package uh it could be really scary to think like well I'm really experienced I shouldn't be uh I shouldn't be putting out bad stuff and I think if we can get over that fear of hyper criticalness uh that's going to free you to do almost anything uh has anyone read the book The obstacle is the way by Ryan holiday like one and a half people this is a really good book I think I only read the first chapter but it made a really good

00:05:18 point and it's um it's that every let me go back every single obstacle is is a potential way to overcome the obstacle itself the obstacle is the way and so I'm looking at this thing this idea this concept of being afraid to put your name on design I'm like what's the benefit here how does that help me move forward and here here it is if you can identify bad design that means you have good taste right people who are bad at design like don't know they're bad at design they make uh yeah they think their

00:05:55 designs are hecking awesome like they make stuff that looks like this and and Power presentations that look like this and they put red and blue on top of green like we all can agree this sucks right everybody okay so if you can tell what good design is and you know what bad design is all we need to do is get what's in your head what you know is good onto the screen okay and I'm going to tell you how I figured out how to do that and how to teach people how to do that and the great thing about the web

00:06:30 is even if you put out objectively bad design it's really easy to change if it's really that bad just hire someone and like have them replace it for you um but if you come back later and you improve your skill set you can just update it people look back at old versions of things with Nostalgia right like anyone larl 4 or earlier like a those days were really fun I mean they're better now but like that was fun too all right moving on you need to free your mind there's this thing there's this thing that designers

00:07:07 do that helps them be good designers that most people aren't aware of um it's the secret to designing website first you just draw some boxes and then you draw the rest of the damn website that's the end of my talk think we're good um no it's this most designers don't design everything in their designs like I am if you told me to draw something it would look like I drew it with my left foot it is terrible I'm a bad illustrator I'm not good at uh animation and motion really there's a lot of things I'm not good at and how do I

00:07:45 compensate for that just use asset libraries does anyone know what an asset library is besides I mean really Caleb showed us an asset library for user interface but for like marketing design anyone heard of creative Market or invit elements these sites are full of hundreds of thousands of design elements from textures and icons and uh illustrations uh to templates and Photoshop filters and all sorts of really cool things that can make you look like a super pro designer and we've all used this stuff like it's it's canva

00:08:16 but it's it's pulled apart into like little pieces that you can use however you want and designers most designers use asset libraries all the time I don't think I've launched anything in the last 20 years that didn't use something from an asset Library here I'll give you an example here's a tiger on invado elements right um it's a 3D object you get to rotate these and then um export a transparent PNG well that looks pretty cool now I can put it on a cool background and everything looks pretty awesome so I just slap that

00:08:45 on my homepage and that's my website I've got a few other items on there as well and I mean it's it's my head shot some text and I think it looks pretty cool it's about due for a redesign but that's what designers do we just keep redesigning stuff It's the final composition is the thing that matters if you're worried about not being original because you didn't hand make every single thing on your design you need to let that go because all that matters is the final composition is that unique have you not blatantly ripped off

00:09:17 like a screenshot from someone else's website no okay you've done it uh author William Ralph in has been quoted as saying what is originality it's just undetected plagiarism I mean that's what AI is doing why can't we do it but like selectively all right if you buy into the premise let me teach you the radical design process these are the steps that you can follow to teach yourself how to design you don't need my entire course if you actually do these three steps uh it works like I've given a bulleted list

00:09:57 to somebody and they went and like updated a design they did and it looked phenomenal I'm like dudee you're you're better than me this is awesome okay and let me tell you the the first step in the process is not open up your design app you don't start with a blank slate you don't start from a position of scarcity okay you need to build up abundance here are the three phases number one gather Gathering is something that you can start right now if you even remotely interested in becoming a little

00:10:30 bit better at design start taking screenshots of anything and photos of anything that inspires you if you like one of my slides take a picture save it become a digital hoarder save everything throw everything into one giant massive inspiration folder that's so messy keep it messy find as much inspiration in real life as you can because the more times and the more elements and things that you can take from the real world the less you're actually stealing from competition and other things that people

00:11:02 have seen before you're bringing an infusion of fresh ideas from The Real World so keep that folder messy and here's why if you're starting on a project and you're like I need to design something I I saw this book cover or something that's really cool I could probably do a design kind of based on that and then you have to go look for it and then you start like finding all these other ideas that you totally forgot about and things that are cool and you start mashing up and remixing like a DJ and you start to have all

00:11:30 these different ideas combining into something that you wouldn't have made otherwise don't over organize this don't create a bunch of subfolders just keep a big messy folder on my desktop your desktop let's do a little experiment so this is what something I do every time I encounter a bookshelf I'm at the library or if I'm at uh like a bookstore I will stand in front of uh the shelf and I will just look at all the books kind of like abstractly and wait for one of them to pop out can you do this for like 5

00:12:01 Seconds stare at the screen and pick a book what do you think which one did you pick is it this one anybody raise your hand like 60% of the people that's pretty good uh that book stood out not because it's like amazingly designed it's because in the category of sports everything's really colorful in this case and it's black and white it's really important that you look at the landscape of where your design is going to live so you can decide how you want to stand out against that in a different category this book might blend in like

00:12:39 everything else so it's not necessarily the design itself that made it pop up it was the contrast to what's around it you want to do one more just for fun take a look give it five seconds what book did you pick that one raise your hands everybody 40% okay there's a lot more choices again I think that looks cool but I don't say like well now I need to design everything that looks like that no I just think that's an interesting exercise that you can do uh and take a picture of it anything that stands out

00:13:13 to you like that if you're at a bus stop and you're looking at an ad or you're watching my favorite thing is like title credits for movies or like end credits those like that's a totally separate company and production company that makes those that unrelated to the actual movie and they these people work really hard and there's a lot of really creative things that they're doing doing if you design something that looked like the title credit sequence from like an a24 indie movie I don't think anyone's

00:13:36 ever get to notice but if you want to find inspiration online uh my favorite place to do that is onepage love it's a curated site by Rob hope and there's a lot of really great creative original designs it's not the same like um stripe or linear knockoff over and over again there's a lot of really unique stuff on the site so uh again as much real life ins ation as you can but if you need to go somewhere try one page love not dribble dribble is cool it's a great place to show Works in progress but like

00:14:06 dribble is not really full of designs that have actually been out in the real world and been like battle hardened and tried and true stuff that's actually working like from companies that are making money that's a good place to say they must be doing something right okay that's phase one gather you can start right now phase two is experiment uh this is something you can do I recommend like every day um if you can start um start doing experiments every day it's like exercise for your design muscles each experiment is an

00:14:42 opportunity for you to get a little bit better at design and the best way to do that is to do copy work okay copy work is literally taking something that you've seen like another website I really recommend if you're doing web design take a website a really simple one that you know and and open up sketch or figma and copy it like pixel for Pixel top to bottom start with the nav bar do high like do it exact even take a screenshot of it and like overlay it like set the opacity like 50% and copy it all the way to the

00:15:15 bottom or until you feel like you run out of time like 15 20 30 minutes a day is all you need and this is going to teach you a lot of things that you're not aware of like oh like why is the font always wider it's the same height but it's like wider oh it's character spacing I shrink that up and okay that actually does look better I like that oh the line height is not one or 1.5 like 1.37 looks better for some reason there's like when it comes to design I know like developers want to do like have magic numbers like it needs to

00:15:47 round out to two or four or five 10 like in real design stuff sometimes it's one or three or seven is the right number that extra pixel makes a big difference so copy work is something that will let you get better and find all those little details and if you can't do something like you're not sure how it works that's an opportunity to either Google for it watch a YouTube video or skip it replace it with something else musicians and artists have done this for thousands of years if you learn a musical instrument what's the first

00:16:14 thing you do play a song you didn't write you didn't I'm not asking you to like compose a concerto or a power ballad on the first time you pick up your instrument same thing for artists they draw you're tracing you're copying works from other people this is the process of learning a creative skill it's not cheating it's just learning so if you do one experiment per day 15 minutes in 30 days I promise you if you look at that first experiment to the last one it's going to be a huge difference you can do this with the

00:16:47 website another thing I like to do is uh like just one of the the bits of inspiration I found from The Real World like uh it's often for me book covers or like t-shirt designs I'll just see if I can recreate that so I'll like pull a piece up and I'll just make something that's close like I don't know what font that is like I'll find a similar font and make something similar it's just layers and building them up and picking them apart I'll give you an example I found this book at the bookstore Kings

00:17:12 of cocaine I don't know anything about it but I think the cover looks pretty sweet it's a cool font great colors and so I came home and made the Florida man Diaries it's the inside the amazing true story of the man who threw 42 inches of live alligator through a fast food drive-through window which is a true story it's Florida man uh there's the book based on the movie the men that Stare at Goats are actually the movies based on the book like that looks pretty cool actually that kind of looks like a website to me

00:17:41 looks like a hero header and then there's like the content underneath it so I just made like a quick version that looks sort of like that I'm not going to use it for anything but I'm just going to go through the process of exercising and like all right let like that ragged Edge let me kind of draw out that ragged Edge and like figure out how to match those colors so so it does that and now I have this in my back pocket as a little style kit that I've already played around with I don't know when I'm

00:18:05 going to use it maybe someday maybe never I'll give you another one uh I'll play around I'll I'll just explore invado elements and they have all these amazing like um product mockup templates so if you have an image like a JPEG I mean I'm sure most of you people probably there's websites that do this too um but you place your own design on an object and mock it up this is really great for like sending joke products to your friends um so I found this milk packaging and I play this game with my wife sometimes

00:18:33 like what would be the weirdest version of this product and what would be the weirdest kind of milk anybody what's the weirdest kind of milk you can think of yak yak milk that's pretty good Yak milk is good hippo milk is interesting I I think horse milk is really funny because it's so close to cow you wouldn't think you would just go one step over and think it's funny do anyone want a glass of nice ice cold HSE milk I send this to people I get laughs like designing for my friends is like so much more fun sometimes than designing

00:19:03 for the internet because I have a built-in audience I know what makes my friends laugh and it's it's a really easy audience to like just play around with your skills here is um a copy work that I did just for this uh talk uh wimp dcf.com I'm like off caffeine right now and so I'm looking for like what's really good decaf and I found this site someone tweeted it recently and I'm like that's a really simple website but that looks good it's just a couple of text layers and like a nice product image shot

00:19:33 that's very simple so I recreated it rethink milk it's the it's the underdog of milk has sucked for far too long so milk is redefining milk from the Hooves up I mean I can't launch that but it made me laugh and now I got to share with you guys so like that was a fun 30 minutes doing that I also learned about squirk by digging through the site has anyone heard of a squirkle yes 1 2 3 3 I mean I've seen the shape but I didn't know it had a name it's like you know when you do border radius and you make a

00:20:06 nice rounded shape if you took that and just kind of went and like sort of blew the edges out just a little bit so it curved that's a squirkle there's like a CSS library that helps you make squirkle and I'm like oh my God I need to put squirk in everything I didn't know I've been doing this for a long time you're learning stuff by picking apart other sides like look this is like 12 layers I every single person here if I gave you sketch in an hour and like that product mockup you could make this it's not that

00:20:35 hard and save everything save every single experiment you ever make because you never know when you might need the source material for another project but I will give you one pro tip uh label where you get your experiments from um this may or may not been from personal experience but I did a copy work on a site that had some really cool topography got to the bottom saved it it put it away a couple years later I was digging through I need to do a redesign whoa this is really cool why didn't I launch this I don't even need to change

00:21:06 anything I'm just going to like launch it because I like swapped out the content and then I got an email like three weeks later hey you totally like stole our website like oh this is hypothetical he said you totally stole that guy's website and uh I was like oh my God I I know what happened obviously we roll it back redesign it it's all everything was fine but from then on I like put the the URL of the site I'm doing copy work from and like the top layer of the file and then everything's fine all right that's phase two

00:21:39 experiment phase three this is unleash this is where you take all of the inspiration that you've collected you have a library of experiments that you've done you've searched around in invado elements or whatever asset Library you'd like there's so many I've got some links I'll um I'll tweet out later um for different places if you're interested it's also all in my design course um but D once you've done all that it's time to combine it and Tackle whoa tackle okay don't I'm not going to look down

00:22:12 so this is where you go offline it's time to do a real project this is where you need to stop consuming content get off social media stop looking for more inspiration go offline and say I've got everything I need to to take a concept through to completion because what happens if like when you're you're doing a design concept and you you like the idea or your head like I think this is going to be cool and you get halfway and you're like I thought this was going to be cooler and then you get stuck and so you

00:22:43 start shaving some Yaks and you open up Twitter or Mastadon or threads or wherever you post these days and and see someone else launch a product you're like oh my God that looks so good why didn't I think of that my stuff is terrible whoa that's going to throw you off you're going to get derailed like a bad mic might do and so stay off stay offline for the duration of a design concept if you spend enough time and you go this is definitely not going anywhere it's okay to come out of your writer's cabin if

00:23:18 you will okay so that's how you start this phase then you've got a project right maybe it's a personal site or a sass you're trying to launch on the side um you need to know that you're who you're why and you're what your audience what you're selling what you want them to do or why why they would care and what you want them to do on the website put that on a sticky note throw it on your monitor and then write your content content comes before design design should take your content and lift it up on a pedestal in a way

00:23:53 that highlights it as opposed to using a template where you have boxes that you wedge your content content into sometimes that ends up being the same exact layout that's okay and sometimes you come up with a really great idea if you look at every paragraph As a unique item that you can can style so all you really need to start is a headline maybe an intro blurb you know a little subheading a call to action and a pitch your story like the three to five paragraphs of content or a bulleted list of things that are important to your

00:24:21 audience if you have that you have enough to start dive into that inspiration folder and then you start stealing you go into your inspiration and you can steal one thing from every project usually okay you can start steal the layout or the color palette or the fonts or a single element but you cannot steal all of them and in fact elements has an aster on it it's better to find a similar element on a design um like an asset Library than to actually take something that someone hand designed don't do that but take

00:24:57 inspiration from that but you can pick a layout pick any website pick a layout if you change the color the font and the content and then your content doesn't kind of work and then it sort of reshapes the thing you're like oh this is kind of bigger by the time you're done it's not the same website just keep iterating on it until it's something unique um Austin clean has this great book Austin Cleon it's called steal like an artist and he shows you the difference between good theft and bad theft good theft honors the source

00:25:26 material it's a study it's not a skim steal from many places spread it around instead of stealing from one place David Bo has been quoted as saying the only art I'll ever study is stuff that I can steal from and so when you you're taking something quote stolen when you bring your own personality and interest to that design it changes it it changes it fundamentally I'm really into 80s and '90s stuff I like Willy Wonka I like Cool Runnings I have all these things that I like and when I put them in my

00:25:57 sight and then that changes the color it comes at the end it comes out with something original because it's the final composition is the thing that matters it's not cheating until it's done until it's released with your name on it and if you're still stuck for ideas make garbage this is the best trick if you're staring at that screen you're like man I thought steps one and two would get me somewhere and now I'm looking at this blank slate and I can't do anything make the worst possible version of the thing that you're

00:26:25 thinking of making like do red on green and and make it terrible and then all you got to do is like well I can fix that one thing and I can fix that one thing and it gets a lot better from there you iterate this is how I iterate whenever I get stuck and I'm like I don't know if I like it I duplicate the artboard and I just try something else and I keep going so my my sketch files are like really long they just head all the way over to the right and by the end they just keep getting taller and taller and taller and

00:26:52 then that last version is usually the thing that I launch I don't know if you believe this premise if if you think that is too simple that I should have showed you like how to move elements around on a page I'm sorry but this is the people who have taken my design course said this is the most valuable information that they've been able to take from the course most of them and but you don't have to take my word for it let's look at really Wonka real quick I have a few seconds we'll go through this real quick

00:27:16 I promise what did Willy Wonka do Willy Wonka went offline he closed that factory nobody knews what he was doing in there he gathered from around the world he went to Loompa Land by the way and he collected a bunch of friends and some crazy ingredients he experimented endlessly he made lots of different things things maybe he never shipped he just sent like the same nine four candy bars around the world and he had this like in his Factory that was like all for himself he created stuff just for himself like this ridiculous vehicle

00:27:53 that made everyone else covered in foam actually I think he was covered in foam too he let his imagination run wild he showed his Works in progress and at the end he didn't care what people thought of him he shared it with the world and then guided Charlie towards a mutually beneficial goal that kid got a free candy or chocolate shop it's pretty awesome I submit that the world needs more Willy Wonka needs more originality people willing to take some risks put yourself out there do something that may

00:28:26 be bad get some feedback and iterate on on it but if you want to take this a little bit further uh you can check out my course radical design uh I go into a lot of depth it's seven and a half hours of content it's really goofy it's a lot of fun uh and today only you can use the code Wonka to get 50% off if you want uh after today LaRon 2024 that's going to be 25% for a while radicales course.com and uh yeah there you go was that better than the Wonka the Glasgow Wonka EXP a little bit okay this this was incredible I remember

00:29:11 seeing this well done good job question have you seen the Gene Wilder documentary yet no but I I while doing this I saw that there was one I'm like I don't have time but I want very good this will surprise everyone I cried through it that's very shocking um so question about radical design seems awesome to go wild when you're doing your own thing how does how do you constrain this for client work it's almost like someone fed you that answer that was the question you have to do the answer the question yes uh that is a

00:29:39 good question uh the way to do that honestly get to know your client get to know who you're doing design work for if you end up doing design work for somebody as paid work get into their mind figure out what they like understand their goals the who the what and the why if you do that just it just do your best to channel that energy and like the the things that you can follow the same steps like steel and you know a layout and a font and whatever and then the things that change it are the things

00:30:06 that they care about find ways to incorporate those items into the design love it ladies and gentlemen Willie Wonka