Product Illustration [Livestream]

0:00[Music]

0:14[Music]

0:30[Laughter]

1:44[Music]

2:02[Music]

2:16[Music]

2:32[Music]

2:49[Music]

3:05[Music]

3:28[Music]

3:45okay hey everyone just back for another livestream today we're gonna be I'm gonna be live-streaming like Charlie Marie she works that convertkit and she recently tweeted out that she's looking for courses or just kind of any help to how to design these styles this like this products illustration style and she's got a few different styles here but I'm gonna kind of focus on the sort of style it's sort of this shrunken simplified UI as you can see here that like stripe is kind of known for doing that I think they kind of popularized that on their home page and you can see it on their other pages as well and yeah

4:42so and I thought because you know Charlie asked and she's in play can work it that will that I'll do it for convert kits dashboard so this is a this is a screenshot of of my dashboard for the refactoring UI mailing list I'm a pretty happy convertkit user so I thought it'd be fun to do this one and I blinked up the emails here so I'm not showing anyone's information there and yeah so I think we'll just get right into it first thing we're gonna do is I'm just gonna turn on my grid here I'm going to create a little bit of a artboard here I'm

5:27gonna start by making a rectangle and I mean I'm just Ahnold this classic 960 grid I'm gonna make about half the size of the page cuz I essentially want it to be like what you'd see here it would be like you get the illustration on one side and then you would get like some text explaining maybe what the feature is that you're looking at on the other side so yeah so I'm gonna create a little bit of an artboard here something that's like force see by like I don't know 320 should suffice I'm gonna get rid of that red still getting used to figma I'm still

6:12learning my keyboard shortcuts and stuff but I'm starting to get the hang of it so yeah so yeah I thought it'd be helpful if I designed this in real time just to see exactly what I'm doing just so you can see that it's not as hard as it seems to create these illustrations like the first thing you need to understand is that we're just making simple shapes like boxes and circles there's really nothing more to it than that so I'm gonna just add some rounded corners to this like maybe like eight pixels and what I'm gonna do is shrink this down actually and so I can see it

6:51side by side as I work on it down here okay so I'm just gonna start on the header and sort of work my way down here I'm going to import my tail and colors library into here I've been using this for producer everything I'm more or less just testing these colors out to make sure that I'm making the right choice there and I'm going to import the shadows as well it might use a few shadows okay so I'm just gonna start by making some rectangles let me change the color that's just looking a bit softer this is our background color so this would be like what's used here so I'm

7:43just gonna use like a like gray these Gray's are a bit saturated with a bit of blue like as you can see on the side here I have my neutral grays I have my cool greys I have my blue Gray's that are getting a bit more saturated than the cool greys and then I don't have my warm gray palette built out yet but it's gonna work the cool Gray's they will start with this 200 and I'm gonna create that top bar I'm gonna duplicate this and just shrink it down make it like I don't know I'm just eyeballing things right now I think that's kind of the way they do it like

8:18one way you could do this is trace it over top but I just want to kind of get a I think tracing it you'll you'll get too caught up in the details and I just want to kind of just recreate it side by side so I'm not getting caught up into like getting every single thing on there because it it's just a smaller version it's a simplified version right and this header is it's a bit saturated so I'm gonna use maybe a dark blue mm maybe a bit darker I guess and I'm not gonna get rid of these rounded corners here and

9:06I'm gonna round this corners bit more give it that I'm getting a call here I'm gonna decline I get room I noticed off here I think that was my count

9:30and I'm gonna make the corner a just ten here okay and I'm gonna start by making the background so it's everything's kind of contained in this white background here and I have a few containers here it's so I'm gonna draw a shape for that draw a rectangle for that

10:01yeah I'll make that white now one thing you got to consider when doing this stuff is that because we're making a mini version of the design like we're working we're designing with pixels and because you can't make anything smaller than a single pixel you have to make up for it using software called a software color to create that contrast that you get with the single pixel it's like when you work with text it's it's like when if I type something here if I type the word text and go into my pixel view here and zoom in you're seeing that like everything kind of some stuff lanes on

10:45the half pixel so it becomes a bit lighter so you kind of thing you do that when you're working with single pixels on this stuff you need to make choose like a lighter color than what you see in the actual design so you can't just work direct you can't just sample the colors from the UI itself so I'm gonna take this and draw a another rectangle for this middle section I hold make it like I don't know 36 pixels high again I just eyeballing it and trying to figure out what's best I'm gonna be shifting things around quite a bit probably because I work on this and this

11:29container it kind of takes up like you know three-quarters of the page you can do these you can do multiplication here I'm gonna make this like a more even number I'm gonna make this for 20

11:50it's just the OCD in me I always have to work with even numbers on these things and you can work with you cannot like do division get something like I don't know to buy this my for yeah I don't want it three quarters so that and there's my general structure there and I'm gonna go ahead and start designing this header area I'm gonna make that a bit smaller

12:28we have 230 people watching well thanks for tuning in guys and I want to get rid of that next video

12:49so I'm gonna start by like I said we like stripe they put the actual logos on stuff but I'm not gonna bother doing that like with text one thing that you have to keep in mind is that instead of typing like real world's words you're just going you're typing that you're drawing in rectangles to replace the text cuz you just want to capture the essence of what what where text goes but they still include the logos I'm not gonna ball or downloading the convertkit logo I'm just gonna draw a white circle where the logo would go and I'll make that white and I got to make these top

13:33links so there's five up there and one's a bit brighter I'll make it like I don't know two pixels high I think that should suffice and I'm just gonna work with my fixed palate here all my tail and colors here that I've imported so because I'm using this dark blue for the header here I'm just gonna choose a lighter blue for this selected state one seems too light maybe maybe I'll choose a gray actually because Grey's like I said they're bit saturated yeah that seems to look right and

14:32how about much do I want between I guess like 20 pixels in between each in figma you can like adjust the you can just the nod your mount which is kind of nice I'm just doing 10 pixels for like so when you hold shift and use the arrow keys that's like your nudge when you're nudging like something over you can adjust the nudge in figma which was pretty cool I just have it set to 8 but then I was just so used to using 10 pixels when I worked on sketch and it was driving me nuts so I went back to 10

15:16between there now this selected say it's a bit lighter so I'm gonna use a lighter gray something like that yeah even later than that maybe the great thing about working with a fixed palette like this is you know instead of just aimlessly picking something from the color picker you know if something looks too light make it like you can just nudge it up one take the cool the next step up and try to a bit darker and if it gets too dark you can just nudge it one down and make it a bit lighter so yeah instead of like if you're just aimlessly picking on the color palette you're like you're

15:58gonna end up with more colors and you probably should have because you'll end up with two clubs that are really close to each other and when you could just really just replace that with one color so that makes it a bit simpler okay now at the top there's this kind of Avatar and this little help button so I'm going to draw that's as a square and that is slightly darker than the the background so I'm going to choose the darker blue here I already have the darkest blue so I guess I'll make this background like yeah that's fine I mean I'm just using the Tailwind defaults I might if I was like I've

16:44actually cared I'd probably make another pallet for what I'm doing right now but I just want to emphasize that just you know try to work with a fixed pallet and then but so make that make the choose those colors upfront before you start it's a good habit the same goes for UI design okay I'm gonna add a border to this because there's a border all around that it's kind of like a box shadow I like to avoid the Box shadows on this stuff I don't want to give it like any depth because again it's just a smaller version but like I said I'm just gonna give it a really light border around

17:26going around it so I just stroke here and I'll just use like my background gray is I think 200 so I'm gonna make my border 300 and if I want to kind of convey thee that there's a little bit of depth there I can just make it off kind of a flat shadow so I'll add an effect here I'm gonna add a drop shadow and I'm gonna get rid of the blur completely and I'm just gonna offset like by one pixel and I'm just gonna sample the color I'm using for that border right there and that gives it a little bit more depth right so I'm gonna make this a I'm gonna

18:18create a new style here it's gonna call it flat shadow and I'm gonna apply to these guys so they have the same oh they need to have that that board let's stroke as well 300 okay and okay let's draw this top part now now this top now's or the secondary now we should say oh I need to make the active State for this so there's a little red bar at the top so I'm gonna actually duplicate this and choose a really soft red you know something I think even like one pit not too pixels is fine I draw a border here

19:19and this is gonna be the same as the border I'm using everywhere else and so I have an active state and then I have another button um so I'm just gonna use this same right as I'm using here I'm gonna duplicate that and then I have the bottom border

19:55I don't I'll make this space like 20 pixels I guess it's a pretty big space at the top there and I'll make this bottle since the floor is a bit thinner I'll make it a bit darker maybe you'll make this a bit lighter and it's a bit wider than that text so I'm gonna make this a bit wider okay and I'm going to do this other link here I'm gonna make that at grey so again using a lighter grey then the the current yeah I think that's fine actually okay maybe make that bit

20:52okay what else do we have here we have the days we have a filter and then we have like a calendar picker thing okay and these days are just like a subtle gray box I'll choose something late like that

21:19and the same goes for this filter and

21:31sorry I'm moving around so much I just got out like reference what I'm doing

21:40tune into the comments here see if there's not any questions if you're just tuning in you're asking what I'm building I'm building this like product illustration this the style of illustration that you see on the stripes website it was kind of requested by Charlie who works at convertkit she kind of asked how to design these illustrations and so I'm designing Kerber kits dashboard right now I'm gonna break this I'm gonna make that a white background right yeah and then add a stroke to that it's just subtle border I hate that have to scroll down every this is driving me nuts and figma have just scroll down to like where I was

22:31every single time I opened this panel up what I'm just going back to the same spot every time okay now I get to design the fun stuff these this graph here so it's really just a bunch of rectangles so we're gonna design a bunch of rectangles I can make it like I guess I'll start with like an 8 pixel bar it's the last 30 days so I'd sign 30 of them

23:10I think I'll make it like four pixels in between each I mean I'm just guessing right now 1 2 3 4 5 6 7 8 9 10 duplicate that again okay there's 30 and I'm gonna make those green and the tail and greens are a bit more vibrant than the Alex have tree pretty close so that's good and I'm gonna make all these different heights so you know this is a little attention to detail you can kind of consider is that there's a little bit of a dip every weekend so this is a Saturday and Sunday and then five days go by and then there's another dip and there's another

24:21dip so we'll keep that in mind and then you know there's some peak moments this is what a if I do like a hot tip on Twitter this is what our conversion looks look like we get all we could have quite a few more signups on the day I tweet I like a hot tip or something so I'm going to just kind of make these numbers up I can even just work in like increments of 10 and the weekend shows up so it takes a dip there

24:59and the Monday it goes up again we got there it's a bit tedious but you know takes time to do things right

25:23and that weekend comes again

25:32and let's make this our our tip day and the day after our tip day and it's smaller and smaller maybe goes up on the Thursday back down once again on the Friday and then the weekend comes okay that's good now there's also these like really subtle background borders here so I'll add those as well I'll just duplicate this line how do they do that here so okay there's a little bit of space between the top and there is four total

26:30and I guess I'll just push these guys down

26:38okay and I'm gonna push this all down a bit actually so anything on the side here nope just a bottom border and I got these little numbers here so I'm gonna make boxes for those to represent those so I'll just duplicate this guy oops Bulls my mind how powerful Sigma is like the performances is way better than sketch was and it's a it's in the browser is it blows my mind how how efficient I can do things on here okay and I'll make those a bit darker I'll use a dark grey like that

27:40and we got the bottom numbered we have the dates right here so oh there's also another role because it takes it yeah so I got a design like the bottom of that as well so I'm gonna move this down so there's five bars here what just one two five six two

28:14and [Music]

28:24okay little bit of space there's a bit of space between there in the bottom so I'll make this like a nice even height of 170 I guess that's too much 164 is fine

28:51okay yeah so I got does design these bottom little notches here where these are unsubscribers I guess okay and

29:14something that's a bit darker than that line oh that lines a bit darker than the others so I'm gonna make this like a grey 600 or like yeah it's fine

29:43so these ones now are not as big they're not as noticeable oopsie

30:06again very tedious but all necessary

30:16I'm just shifting it by a few pixels each time so there's a little bit of variation all I do is hold down command and then use the arrows to nudge to shift them by a pixel each time okay looks pretty good next I guess it'll draw a line that kind of goes around I mean know what this represents to be honest yeah I have no idea what that means but it's there let's draw it so I'm gonna use the this pen tool I'm so used to pressing V to do it cuz I was the the lucky which keyboard shortcut for sketch but now it's P which pisses me off a bit because

31:00all my shortcuts were on the bottom left of the keyboard and now after they go up to the top right for the P but maybe that's just me being lazy oops

31:20oops oops what am I doing here I need to get used to this pen tool and I want it on top so I can see what the hell I'm doing

31:37okay pen tool I just wanted the center of each

31:54I'm just kind of guessing where the center is what I think I'm getting it right every time

32:32the territory

32:40Jesus how many are there okay two left okay that looks good let's make that a lighter color let's choose a just keep with our cool grace that we've been using everywhere else something like that something like that that's fine okay come on along here coming along let's take a look at these stripe ones I mean the yeah they try to avoid any kind of gradients they keep it pretty flat all around even like you can see if i zoom in here like their idea of a shot it's kind of like what I'm doing where they just use a solid flat shadow underneath they don't do any kind of gradient or

33:34blur radius to it so yeah so yeah we're gonna do the same thing well we've been doing the same things so yeah okay the top parts done let's do this kind of our summary bar I guess this is call our lifetime totals that's essentially just taking this piece of text and then we got these bigger numbers and labels are a bit smaller so I'll keep using the same thing for the labels and then using a bigger thing for the numbers

34:23oops nothing much bigger and just a bit darker I'll choose like cool gray 700 I guess looks too dark 600 yeah it's good yeah

34:55um how many things are there one two three four okay I'm gonna give it a bit more space there

35:07damnit damnit there we go

35:21that's better and then there's a border between these two things so I'll draw that in

35:43look at this guy and I think it's the same thing at the end yet so it's just usually like a double digit number unless it's a good day

35:59and I'm just eyeballing like I said this before I'm just want to emphasize I'm just kind of eyeballing the the space between everything just kind of I have to guess every time and if it looks off I just do it again and until it does look right yeah like I don't want to like overthink this stuff because it is just a smaller version no one's going to be looking at these details but yeah okay let's next draw the subscribers list so I'll recycle this border here and we got a title here and a little bit of a drop down not gonna ball or draw on the drop-down arrows but I'll recycle

36:47this what is this it's like the bulk actions button it's the same style as as the calendar picker so I'll recycle that there I'll recycle this right here just some reusing some styles here for some consistency and we got a table here so we have a smaller thing for the headers I'm just gonna recycle this guy let's add more pixel to it so it's centered or maybe decrease it by pixel that's better

37:33and what does we have here and then sort of the scribers on the side it's long an email with space for long emails and then we have another row for the date and the status and then I'm just going to duplicate this a bunch of times okay duplicate this a bunch of times

38:03that's good and then Jesus just like that it's like isin't doing that okay first I'm just gonna select all that and I think I just like that there we go I'm just gonna make this a lighter color because it does have a different treatment than the headers the headers are bit bolder and they have that like lowercase treatment so they stand out a bit more I guess I'll draw in these circles for avatars I'm not gonna bother drawing in the check boxes even though this rarely like a real photo that goes in there it's always just this like default avatar

38:59and because the avatar is mostly blue but something like the whole space they'll just choose like a light blue for that I like a light blue circle something like I mean that's fine maybe a bit darker yeah let's go with darker ok next we have this side better on the right here there's sort of a border containing everything you know I'll draw those right now let's just duplicate this guy and draw it along the edge here uh yep yep and put no one on the edge here this one goes all the way down the side okay let's draw that search and that's a bit that's what the same size

40:05is this if you that's a bit too small yeah whatever it's good and this is what the same color it's a bit lighter in the background so I'm gonna make this a gray oops that's my stroke I'm gonna make this a great 200 I think because the background is no that's the background it's 200 second make this 100 and then I'll make another one for the button and the buttons a bit lighter so I'm just gonna make that white

40:55there's a border dividing this in the button

41:11so everything's roughly in the right place let's use this make this button now hey let's make it like I don't know 14 pixels high you kind of see they rounded the bottom right corner but could everything else square so we'll consider that Mike I guess it's just like a branding thing it's part of their brand so make that up eight pixels a little bit aggressive so I got like four pixels and I'll make this like a light red I want that stroke done go away stroke maybe that's too late red four hundred weight ooh go okay I guess I'll put just

42:13and I'm not gonna make this white because again you're kind of getting that so you want the smaller version of it so I'm gonna make it just a softer version of the background red as if like the background is kind of showing through a little bit me so maybe like a red 300 maybe 200 let's go with 200 and then at the bottom here we just have more subscribe or say all our segments here so that's using the same style as this so I'm just going to duplicate that

43:04and then we have some segments I don't know what's really below that this is a bit darker so I'll make it a cool gray 600 I guess and there's a little icon beside it so I'll just represent that with like a small circle like a four pixel circle it'll make that the same color as the text it's beside and then I think below that on the real UI it's just a list so I'll make this like a grey that's fine okay there you have it a mini UI a mini convertkit UI now let's take this a step further let's uh let's add a let's move this away and let's

44:06make our background a different color because if you looked at the examples that Charlie was saying like they have like these little graphics behind it and in this case they kind of have the UI popping out a little bit so that's kind of cool so let's let's explore a few ideas like that just to make this a bit more interesting so the first thing I'm gonna do is make the background gray like a so there's a little bit of contrast so it pops off in the background maybe like a grave 400 maybe a gray 300 sure and I'm gonna add a shout-out to this so I'll just pull up

44:56my tail and shout is here and I'll use like an extra large shadow okay and let's group that and so you can make these additional graphics a few different ways like I can just add like a circle behind this right that's like I don't know foreigner to 80 pixels high so it's kind of like overlapping the corner here and I'll make that just a darker gray compared to the background so I'm on let me get like a gray 400 I guess and I can design like maybe I can do I did this on the refactoring UI homepage we designed these little graphics to showcase all the different things that come with the

45:48packages so I have this big circle and I have this kind of like triangle II dotted triangle thing here that goes in the corners so I could be something like that you could take a hero pattern so if you guys don't know what hero patterns is this is a project I did a few years ago it's basically a bunch of SVG background patterns you can use so you can like you can export the like something like this where is it Bank no it's called bank note so like this would be good and you can just download the SVG the unstyled SVG and then make that it's like a

46:28circle or something that would kind of cool I know Basecamp I was really excited to see this they use hero patterns on their on their website we're gonna see it you can see like one in the background there maybe in their pricing section I don't know they're all throughout the site I've seen them a few times but they kind of do that give it that treatment I've seen it before I already know where it is I think I saw it like on a testimonial or something it doesn't matter either way that's like one idea you could do I'm gonna do this little thing that I did for the refactoring UI

47:14site so basically it's just a bunch of squares so one two three four five six seven eight nine ten I'm gonna do like a ten by ten and then six seven eight nine ten okay I'll make those all the same color make it a bit darker then and then I'm just gonna slowly remove half them to make it a triangle

47:57oops okay and then I'm gonna group that and I can overlay it over here and maybe add another one here and I can flip it maybe you're gonna keep flipping it right there so it's kind of cool that adds a little bit of interest to it another thing you can do is I'm gonna take a screen a real screenshot from my convertkit I'm gonna do it on my other screen here my other monitor because it's it has a higher resolution so I'll take a screenshot of this number here and I'll first of all make it smaller

48:56and I'll put a circle around this

49:06something like that maybe maybe yeah that's fine I guess maybe a bit smaller and I'm gonna mask this so it's cropped out like a circle and then I'm gonna add underneath it's a bit smaller actually

49:34cool basically you really want to have just like maybe if you want to like highlight a feature you could kind of crop this out and put it over top and make it look like it's being magnified what I'm gonna do here is add an effect this I'm gonna add an inner shadow and I'm just gonna get rid of the offset it just a bit be little bit like two pixels one pixels fine bring the add the opacity to like 10% I should suffice and then I'm gonna put another one around it

50:38and I'll make this white and I'll apply a buckshot to it same one that we're using on the on the UI itself so like a large box shadow maybe it was extra large so it kind of looks like it's magnifying that feature so that's kind of cool I'm gonna I'm gonna group these to cool and yeah you can just plop this on your site and you know when you put it aside and then you'd probably have a feature here like some text outlining like what we're looking at here and yeah so I helpful hope I hope that was helpful I hope that wasn't too boring for you I thought like I said I thought

51:32it'd be helpful to show how I do it in real time just to see that it's not as hard as a as it appears to be again you're just designing a bunch of boxes and maybe some rounded boxes and and just kind of eyeballing everything until it you know the spacing looks right so it takes time it takes practice to to do something to get these results I think the first time I did this it wasn't as good and but once you do it again and again you'll get the hang of it so I'm just gonna tune into the the chat here to see if there's any questions

52:15um colors from tail and yet there are colors from tail one that I was using I'm just kind of I've been testing him up for the past few weeks okay no major questions how do you get the tail and colors and shadow presets in figma by how did i do i did by handy i wasn't i just didn't I didn't just import it like I copied all the colors I think was Adam who did it to be honest the first time but basically yeah I just I had the colors I actually made the I picked the colors out in fig was so they're already in figma and if I want

53:06to save this as a a shirt style I could just open up this panel here and add it and make it a new style and there's a way of nesting it so if I do red slash like 900 it would get saved with my other Reds so yeah as long as you have like that slash in between that kind of groups them together so that's how you do it so I did it all manually it was a bit tedious can it be shared I'll look into that and if it can be I will share it for sure and I will share this graphic - I'll put

53:44it on Dropbox you know I'll share I'll tweet it out so you can grab it there and if you work a convertkit you can use it you feel free to use it on your website if you want I mean I'm not gonna use it for anything else so yeah okay so I'm gonna sign off now so everyone enjoyed the rest of their day