Refactoring UI: Laracon AU [Livestream]

0:04okay I'm back here

0:29[Music]

0:38okay how is that now is that better for everyone it's or less of a lag when I move around

0:57open this up on my own my other screen here

1:11okay some people are telling me this is better if I move around a little bit if i zoom in no geez

1:25okay give me a second here to get reorganized what a disaster this morning yeah so I had to lower the resolution I got rid of my FaceCam there and my internet is just worst timing ever it's pretty slow right now like so sorry about the picture quality it's down to 30 frames per second before it was 60 but I'm gonna give this an hour try hopefully stick around and some people are tuning back in so lets I'm gonna just kick off where I was before so like I said I can explore options for redesigning this this macness hero section he was a little more impact and

2:20like I was saying earlier my sort of lazy man way to give this impact is to just put an image on there and before I was kind of browsing unsplash.com and just first pictures of Sydney the Sydney Harbour and I came across this is the one I use last year and I came across this one as well I'm gonna give both the trying and try working with both of them and see where that goes you just rearranged my screen here

3:00so yeah back figma let me know if there's a still legging issues I can kind of see what's going on in my screen below here here's I'm gonna resize this to be the size of the my hero section here and I'm just gonna mask it so it sits behind so it sits in that hero and I'm gonna move it below how do I send back in figma here there's the arrange arrange send back sent to back option command there we go okay so obviously that looks stupid right now because the text is over let the dark taxes or late on this pretty dark image so we're gonna

4:09do a few things to adjust that the first thing we're gonna do is in for text color I'm gonna make it white and of course that didn't help that much either so we need to just because this image has so much going on it's pretty dynamic right now so what I'm gonna do to bring that text up more is apply some image I'm gonna first thing I like to do is kind of bring down the contrast so you can do that in figma on the sidebar here by opening that panel and just bring down just to kind of level everything out a bit so you can play with a few

4:53these things saturation and I think I like to do like this photo is pretty busy there's not really much we can do with the contrast so another thing I like to do and I talked about this in my lair Khan talked recently is just to lower the saturation and and then put a fill well I can I can do this and figure actually I can put a fill layer on top of this image I don't want it to be a gradient I just wanted to be a solid fill and I'm just gonna overlay a just a nice bold color I haven't decided what color I'm going to use for this yet

5:39but I'm just gonna use something like this blue for now and then from there I'm going to change the blending mode to multiply and what that does is it sort of brings that background image through and allows you to see all the details of it but the contrast of that fill there helps it makes it so that text is much more evil now it's still a little bit hard to read so I might choose a darker I might do combination things I might choose darker color I might even reduce the even reduce the opacity of this so you can kind of get the the essence of Australia you know

6:26I'm starting to realize this isn't backward of a photo like I mean you get the you get the Sydney Harbour Bridge but it's really the Opera House that really captures the essence of Sydney so I'm gonna try and get a better photo for that and then choose a different color so I'll browse around for colors in a bit so I'm gonna go back to what other they were just gonna grab here it would be nice if I can find one where the I mean I don't know I'm gonna do with this tech stuff I'm going to Center it or keep it left aligned like this but if I

7:11keep it left aligned like this I would be nice to get the upper house so it's on the right side so I could roll with this one and we download that

7:28and it seems like the best one

7:40that's pretty good one again it's on the other side maybe I'll end up just centering the text that just might be my buddy here's a great one okay so I'm gonna go back into Sigma now and this image I'm gonna replace this image with this one is it and that's obviously quite large right now and a zoom out here

8:22hmm okay that's interesting kind of has that negative space to the text which is nice I'm going to apply that same kind of D saturated treatment with a with a fill there on top oh this is on a gradient and I'm gonna multiply that again now you can do this in encode you can do these like blending modes in code but I always recommend I always recommend doing it in a you know in software like this in figma or in sketch doing this treatment and then exporting the image and then bringing it in because I know the browser support isn't that great for those blending options so this is always

9:14a better way to do it so that looks kind of cool like like again this negative space I have here really helps that text stand out nicely one thing I worry about with this image is the almost having too much focus on the Opera House because I mean like this is kind of just Perlman during a conference in Sydney Australia not this kind of looks like a site for the Opera House so I don't want to spend too much time on this I'm just gonna leave this for now we can explore another image later but then now I'm gonna explore a few color options so I was digging

9:54around for some inspiration I went on I went on dribble earlier and I kind of liked I found I came across this shot I that's how I work I tend to browse on dribble for a while and then I find a bunch of shots I like and then I maybe I like the collar mail just like the layout or something and then I'll just drag and drop the shots onto my my working space so I can kind of reference them later because I don't really use like the bookmarking tools on dribble so I thought this purple and teal was kind of nice [Music] especially the teal I use kind of a

10:33green for the Larrick on site last year this is kind of more like a four screen I guess so I thought something a bit cooler would be now that I visit or Australia I don't know I feel like I can capture the essence of the city a bit better but uh so I'm gonna see what it I'm gonna try working with this kind of teal cyan that's pretty close to what we had last year

11:08anyways thought looks interesting another thing I could do is I could apply a gradient to this I like doing like kind of like these diagonal gratings so it goes from the top corner to the bottom corner and right now it's like a teal this teal to nothing so my general safe call when choosing gradients is is what I'll do what I want to do is sample this tool I used here something like that but if I want to get like an ice cream my general safe call is is just rotating the hue like like no more than 30 degrees so I work with HSL I have the HSL property open here and

12:12when I rotate that down like that green is a little but Vibram I go more towards the blue I just kind of choose the side that looks better so that's kind of interesting maybe a little excessive and I'm gonna actually create a few different layers here so I can turn them on and off

12:42how do i they were gay I can just simple that so here is with just the teal there it is with the green so that's just subtle change that's nice kind it's a nice glow CH of it someone is asking what fonts I like using the font right now is just like I think it's just San Francisco yeah so it's just like the system font I just popped it and there's a placeholder it varies I'm gonna start exploring font options right now usually what I do I mean I have a habit of of sort of every time I when I want to set like lamb book

13:36is a site I'd like to go to a lot and just these just got web gallery for browsing some of the nicest sites on the web a land book is kinda has a focus on marketing lamb pages and what I'll do is let me try and find a nice site that is worth digging up so this looks pretty this looks like a nice font my internet is so slow right now so usually when I'm browsing on the web first like inspiration and I come across the site like this I might if I like this font I'm gonna check the dev tools see what fonts being used and this font

14:23is I think it's graphic yeah its graphic this is actually the fault used in the refactoring UI book that we just launched I have this font so it's a nice font but that's how I kind of learn about new fonts that's how I explore new fonts and I said I'd like to go to is I'd open a new tab here fonts in use calm and this is sort of exactly what it what it's what it what it's called it's poncing it's just a gallery fonts in use and I said every now and then some of these fonts are pretty they're pretty avant-garde I guess they're pretty

15:11interesting but I check it our down then I learn about a new few new fonts but I mean over the years of checking this site out and and kind of checking the dev tools see what fonts are using on certain sites I've kind of collected of fonts that are sort of my go-to for things like this one font I like using a lot a lot of people know me for using a lot as Proxima nova now I don't think I'm gonna use it for this site but I will swap it right now and I don't know if we're gonna go for like a bold treatment here an extra bold treatment I

15:41mean I think that's a little too heavy what's another fun I like going to I probably have like five or ten different fonts I like going to I think the font I used last year was trade gothic I made it all caps

16:12um you know what there's a better way of doing that and I'm gonna not Center that and then you can just make it all cops like that okay so I don't know if I'm gonna go with this font either I'm gonna kind of group these together I'm gonna I mean a lot of times I'm really just browsing my list of fonts here until I find something I like I also use like I'm not type get what's a call now they recently cuz they got bought by Adobe they it's just Adobe fonts now now you can only access this if you have a subscription to Adobe now they each be

17:02able you can just anyone can pay like ten bucks a month and have use Typekit or Adobe fonts but now it's just part of the Creative Suite so I pay for that as well I paid for all these damn services and but I still get use out of them every time every now and then someone will send me like a Photoshop file and I'll open it up in Photoshop so I have to make use of it but if I go to Adobe fonts and browse fonts they have all these filters on the left on the left here and I usually just go to like a sans serif font right now I'm looking

17:41for a headline I guess I want just a regular maybe I'm working dense font might be nice oh you're not d railing me at all I was totally going down this path regardless so

18:04newse gothic is the nice font and then google fonts has a similar panel to this so you can kind of filter by like popularity and like kind of the trending fonts so yeah so what font do I want to use for this

18:37no Fon is pretty nice for headlines is din dins a grateful for headlines I don't like it for body copy as much but if I'm going for like a lighter weight oops I already did this that's okay

19:11okay so that's interesting I'm going to increase the size though like fonts are not necessarily transferable so you might need to adjust the the size and weight of it depending on what font you're going from and to so there I had two increases Dean's a pretty small font compared to San Francisco so I didn't crease the size of this kind of sub headline this sub headline is just sort of placeholder text I think I stole it from one of the original lyric on US sites but I did a year and years ago so on we might get rid of this completely you might stay there we'll see how where

19:43this goes so and then so like I said I kind of like this green and purple but I don't know they're kind of they might clash together if I make the button maybe I can make that button purple it all work nicely so this green and it's purple like purple in general is a pretty dark color so you need to make up for it by making it a bit lighter if you're gonna put it on the dark green background like this I mean I think that looks stupid already anyway so I'm probably not even gonna work with this purple even like I mean what I did like if you want to create if

20:35you want to choose two different colors and want the high contrast what I usually just choose like a like a color with just with a higher perceived brightness so yellow is always a safe call for that but then with that I need to I'm just kind of playing around in the picker here this is how I work with color and even when I pick colors by the way it's like right now I'm just kind of messing around but if I find a color like this I might even go ahead and use the Tailwind defaults as my color so I'll just use the the talent default alternative for whatever this teal is

21:22and whatever this purple is so you know I'll do that for this button so I have the the new tail and defaults kind of built in to figma here and these are going to be coming out like live this I think in like two weeks Adams gonna launch this even this orange and then now with that I've really poor contrast with this this text so I'm gonna have to invert this text color to be darker so you can read it on this yellow background and with that I'm not just gonna make it black like what I do is just choose so if I'm working with the tail and colors here I'm using like

22:06a lighter variant for the button background and then what I'll do from there is use one of the darker variants for the text color so I have that color text on the colored background so I'll and so I'm using kind of this orange but when it's like really light like this it looks kind of yellow and then when I gets to a darker color kind of has this red hue to it that looks nice and you know this would be more or less the start starting to look like last year's site with the colors I'm using but I'm just exploring ideas here like I said quantity over

22:42quality at this point and then I might mess around the colors later on but I was hoping just to share a few ideas here today another thing I'm gonna do is just these button corners this input corner they like they look it looks pretty sharp so I'm gonna round that a little bit this looks a bit fuzzy for me so I'm gonna zoom in I'm gonna round the corners on this so I'd do that in increments of 8 that's a little bit more fun and this is just like a place or a thing for now eventually this would be like when tickets are available to buy to those be

23:28replaced with just a button or something like that maybe more information I do have kind of a hierarchy already with this with this headline but I'm gonna tone down this text a bit maybe what I'll do here is I'll replace this background fill I'll just use tit like the tail won't do you fault for that so I guess this would be the closest thing to it hmm how do I adjust the like I said I'm still struggling with getting familiar with figma but how do i how do i change the blending mode when i have a style like a shared style applied to this cuz before so what I'm gonna do I'm gonna

24:45cheat a little bit I'm gonna just kind of sample my color over here it's a bit darker then I'm gonna get rid of this I'm gonna just sample then I have it for reference later and then I'm gonna apply the blending mode oh god what's that that awful green

25:20it's not possible to edit a blending mode with a style okay good to know good to know um maybe I'll get a bit lighter still experimenting with these toe and default collars to see if there if you know if there was the right fit this is kind of what we're laying it on right now but like I mean this is it's like opportunities like this that allow me to play around with them and see if they work great and I'm gonna geez I want to apply the fill there to this image not too

26:09and then multiply and I can reduce the opacity of this a bit more I'm certain ever got this font choice it's just a little I think I want something a bit fatter it's just hard to read on that background mm-hmm maybe we'll just go with the system default for now love it or hate it I mean I kind of like it I like I really like it for like the bold I really like the bold version of San Francisco what's going on here

26:59this F text

27:09and this is the text I want to use the display for this so in the browser it captures the display font by default but in when I have the downloaded version I have to like adjust it manually and then I'm going to change this text color and the same way I did with the button on this yellow background I'm gonna just use like the lighter version of this particular hue so if I open up the color palettes I'll go to my teal that's probably not accessible whatsoever that's almost too light and not you know what I'm gonna go to the darker version of this any day

28:05it's most tied to dark that's bold

28:17okay okay there's there's one idea again quantity or quality let's try a few things here I mean I'm not gonna do this but like I said I might I might replace with this with an illustration later on that I draw I mean not everyone can draw so a great resource to check out that I always remind people of is this site called on draw it's by an illustrator her name is Katerina what's four oh there's her name Katerina I can't pronounce that last I'm sorry Katerina limp it hurt Katerina but it's a great resource so it's like it's in the same way as unsplash it's kind of like royalty free illustrations

29:15that you can use for your marketing site and she's a really talented illustrator I doubt there's anything like Australia specific in this collection how do I search here here we go let's just see we got here no results so yeah but she does have like some very specific stuff to like he was a very like specific level view illustration that's pretty cool but they're also quite generic in a way that you can use them for pretty much any kind of marketing Hero site like if you go back to this land book they all kind of have that style right they all have that what's a good example like even

29:58like this right here has that illustration on the right here so you kind of do that headline illustration combo for the hero

30:12what else leaving this site kind of the illustration it's different style but it still has that kind of headline illustration combos so it's always worth checking out this site I'm drawed I'm draw at CEO I think I said it was calm before but I guess stood with a photograph for this for now and I might mess with the colors later this is I might mess with the font later and I might mess with a photograph later so maybe let's let's try another option here so I try to make a habit of instead of like if I haven't already i doing in top of this it's just like duplicating

31:03it and bring it over to a new artboard and experimenting it from there so I'm gonna browse around on on I mean another way I can handle this image and creating a nice contrast with the text is kind of just making it like half the page like I did that on on hero patterns so this is a site I made it's all like free patterns you can use for your for your backgrounds and I kind of did this split view thing and that's kind of a nice way to like put a nice image on the on the right here and then put your text on a white background to

31:54give that contrast that you need so that might work better for this so I'm gonna I'm gonna try that so in order to do that I need to get rid of that layer I'm gonna invert this text color to be

32:19just like a cool dre for now I'll mess with that in a bit same with this logo actually

32:33and what I'm gonna do actually I love this idea this is gonna allow me to oh let me put this into this isn't in an art board so I'm gonna put this into a frame so it's on a white background geez again just getting the hang of figma here and you know what this allows me to put emphasis on that opera house before I just capture the city a bit better than what I had before what I'm gonna do is let's let's actually apply that fill again I can even now when I hold this up later on I might cut again I might do this like split thing where it's like

33:27taking up one half of the page and the the banner the banner is taking that the text is taking up the other half of the page right now I just have this one like a 1440 width so I'll figure that out later that's features to use problem and I mean I'm just the other cool effect is I could just kind of rotate this so it kind of goes along with the text right now now I'm gonna move this over so that's an interesting idea mix a little bit look a bit more edgy and I want a little more contrast between this headline and this kind of subtitle

34:22description more than what I'm just getting with the size I'm gonna make this the the sub headline a nice just a lighter gray maybe kind of like the third one down I might be a light add too much let's play around here no I like what I had maybe even just this actually I'll keep the the dates and stuff the same and I can't see this input anymore because it's on a white background so I'm gonna make this input a very soft gray just to help it and I'm gonna add just a subtle to pixel stroke to it with just even a slider gray so I'm always using these cool Gray's right

35:15here that are out of the tail and palette there's a fine line between like when you use these Gray's is like giving enough contrast so it's like it stands out a bit more against the white background but then also giving it enough so it doesn't look just not too much where it looks disabled right and I think that's where this subtle border helps I'm gonna make that a bit darker

35:50not that so I want something like that I guess all right you know what I can do is oops I got rid of the fill there look with the lightest gray no for the second light it's great what does that look like not too dark oh I had the wrong grade selected there that's all right actually mm-hmm maybe a tattoo dark actually one thing I hate about well it's annoying me the stigma is I have to every time I open the palette I just scroll back down toward time I created a new pile new swatch but that's it seems a bit tedious yeah you're gonna be able to rewatch this

36:38later

36:45um and I'm gonna stick with this softer gray and how big is this maybe make the logo bigger and put it on the right just like this like this I maybe agree it could be a bit bigger I mean this is just a layer below but there's actually no logo for Larrick on a you I almost don't want to put too much emphasis on it like I want the I mean this title is more or less the logo this is just there so you have the brand representation what do I think of Sigma we're sketched so far I'm liking it I think performance wise I like Figment much better and

37:34there's a lot more cool features in figma there's a lot of like little things about figma that are I I figure they're they're kind of working on the one thing I was like basically one of picking colors and I want to change the color of this headline let's say I'll open this and then I'll choose a color so I'll just go to the color I'm using but then it'll close it's like and I guess you can drag this around but every time I open like a new every time I click on a new text target it closes so I have to like reopen it and sometimes I

38:15just want to like leave it open right there the other little thing is just like yeah like little things that like I have to scroll to get to the next color another thing is that like when I am picking like what I'm picking a color or something like let's say I select this input right here and change the stroke of it let's say and pick the color sketch is smart in the way that it like figma kind of keeps these these this frame that is this selection frame around it when I'm picking a color where like figma does that and the sketch does it like gets rid of that what it knows

39:02I'm picking a color so it kind of gets rid of that distraction so just little things like that in figma that are kind of bugging me but for the most part like uh I like it very much and it's it's actually free for like single users that you have to start paying when you introduce a team but for someone like me I can just use this for free in the browser so and I know sketch it's got a ton of funding and they're gonna be I think they're they kind of talked about in their newsletter how they want to create an in-browser experience like this so I don't know what that means

39:33entirely but yeah okay so here's another cool idea I'm gonna sit on this for a bit I'm gonna change the color of this logo maybe I can make this logo the same as our our teal here mm mm not looks stupid maybe just the soft gray like I said I won't put too much emphasis on it because again it's not the official like there's no lyric on a u logo so I'm gonna leave this like that for now I want to move on to another section I've been talking about this hero for probably what half hour now so let's explore a few options for this the

40:20speaker section so I kind of have a rough layout here this is by no means what I plan to wear I plan to take it layout wise it's gonna create another artboard below this

40:39and I'm gonna just create a little bit of a layout here I dread I'm gonna use columns I like just working in columns of 12 and I'm going to just constrain it in a bit and I'm just using like 12 columns with a width of 80 and a gutter of 20 this is by no means how it's gonna be like when I when it gets cold up I just kind of use it as a general guide when I'm designing in figma figma needs a shortcut to toggle selection outlines yeah I mean maybe there is maybe I just don't know it yet to be honest like I said I'm just still

41:27getting familiar with this tool and I'm gonna copy and paste this over here

41:39I guess this has all the different grid than what I what's look layout here twelve columns eighty pixels maybe I made it whatever I'm gonna line this to the grid a bit better

41:59and these are the lists the speakers from last year's these including myself and but I don't think any of us are gonna be there again this year maybe Matt but I don't know I know Adam and Taylor aren't going there this year maybe it'll change her mind I don't speak for them by the lake Adam's birthday today so if you follow on Twitter wish on a happy birthday so for this section so this is one layout idea let's looks more like layout ideas before we too carried away with like the style and stuff of this section another layout idea I could I could do I need to

42:50keep in mind that eventually there's gonna be like those give me like 12 speakers listed here or however many Michael decides to go with and I could like one thing that's nice about this current layout is that it's nice and constrained I just taught you a lot of vertical space but maybe we can try something different just in the way this is just maybe that they're not in circles or something right so the way I make circles in figma cuz I want to be I don't want to like whenever circle is just a circle I can't add it like what I'll do is just hold it like a square

43:33and turn the corner radius up to like 100 so it looks like a circle but then I can if I want to edit it later I can't just make it why isn't that working oh because it was just still so if I want to make it more of like a rounded square I can just adjust these parameters here

44:00and I can make this a bit bigger maybe maybe make it more of a rectangle even let's make this photo of Taylor a bit bigger and that will give me a little more like let's say I wanted to add a bio or something here that gives me a little bit room a little bit more room there to work with I was looking at a few other conference sites just to get some inspiration earlier like he was a few nice ones this is the Facebook conference they have this is the framer one framers are another tool kind of like sketching figma it's an our competitor in that market there's so

44:35many tools like this coming out nowadays and when I see a nice one epic epic Curren is a nice that was having like the nicest sights this is a conference room by a guy named Dan petit he's kind of a big influencer in the design community he's got the nicest sights I'm not sure if he does these maybe like where he hires a guy any kind displays a creative director role but every time a new epic car inside comes out it's always like the sexiest thing on the Internet but yeah he kind of did these larger images sort of the stack treatment for for the speakers so I could explore

45:15something like that I mean but again like like lyrical might have like 12 speakers where looks like there's only like like six here six here right now so it's not taking up that much vertical space what other conference sites are so looking at maybe it was on dribble I was looking at him there's a good one I saw so I'm moving around so much right now it's probably quite a bit of a lag for you guys still there was that huh I don't remember but this gives me a little bit more room to add like a bye or something what else can we do here so it's a bit

46:12tedious to like just do that for the same thing so I'm just gonna duplicate Taylor's head like six times

46:26I mean so we had a toggle on and off the grid let's see here what was the control for that shift option question mark shift shift control question McManus and view grid is controlled G okay never got a panel okay I could even add like right now I just have Taylor's Twitter handle and it would link to that I could replace I kind of put these aside for later I could put some social media icons in there I mean I don't even know what Taylor tells probably only on Facebook I think he's got a nick an Instagram account if you wanted to put that there that's another option where's my cursor

47:32there it is

47:37um what else can I do I've kind of just like this treatment I have already let's try another one where I do a more of a stack treatment so I'm going to open this up a bit

47:59I have a bad habit if you're not talking directly into my mic I always talk a little bit because my business my calmest and right now it's a little bit away from where I'm positioned looking at my monitor I could set it as a component yeah I could do that again still getting familiar with figma it would be way more efficient but I'm still kind of getting from there like learning how to make components in Sigma I mean I even had a bad habit of doing that when I worked in sketch of not making components because I usually work on like simple like components and stuff

48:38they make a lot of sense for like big sites that you're using a lot of the styles but like a lot of projects I work on are just like simple marketing pages like this right and I might duplicate this and I already know how powerful the components are in figma like if I make the put all these in an image I may be able to round the corners on all of them I don't know perhaps I just have to get familiar with that any tips concerning HSL in figma I mean the figure was pretty it seems like the best tool for HSL because they actually have like an

49:12HS picker built right in a lot of tools even like the browser like chrome dev tools they support HSL but they they show it on a HSB picker so an HSB picker the difference is is that like HSB is a hue saturation brightness so I guess we don't want to toggle between this HSL you'll see the difference it'd just be like you'll get white in the top corner here and you'll get the most saturated version of that color 100% at a hundred percent brightness where HSL you're gonna get the most saturated color by at 50% lightness so you can see the white takes up the entire bar at the top so

50:00figma seems like the best tool for that so it actually has an h2 picker I don't think I've seen this anywhere else and yeah you can just I usually just drag my cursor around till I find a color I like but you can just toggle parameters on below here that's what your if that's what you like to do so I'm going to maybe try this more of the stack treatment move all this down now if I were to follow my grid layout here making these take up a lot of space those are pretty big so I'm gonna reduce the size to like maybe like I don't know

51:00like even like half the size of that the grid space I have there and just using quite a bit of padding around it and then I can align this Center align that let's give this a his name a bitter better like a bit bolder and make it a bit bolder here if someoneís Center this continent its text and again align it centered

51:38and another thing I like to do is like a lot of marketing sites do this like when I'm working on a marketing page I like to like rotate the backgrounds as you scroll so if you go to like I like these land book examples you apply see it everywhere I'll just try to find a good example here it's one like a nice simple one I mean even this one is good so what they do is they have this big blue header I just scroll down into different feature sections they kind of have this off-white background and then they have this overlapping video and then it goes

52:16to a white background and then as you scroll you get another big blue background it's a lot another feature so it's gonna rotate the background sometimes you can put a full photo like this so I like to do that on a lot of marketing sites and that just kind of keeps it more interesting so what I might do is I have this hero section I'll have that kind of green and white split you know I might do is make the the background of this instead of making it white I'm gonna make him an off-white maybe I don't know I might regret this and then I'm gonna go back to making

52:59this a white I guess I don't have like a white style here

53:15that creates that contrast that I wanted I might do something like that maybe and then I'll make the speaker section I might make it I'll try not to things here I've seen you be spending a lot of time on this layout that I don't know what I want to do with yet for the sake of simplicity I'm gonna work with this one I'm currently using and I'm going to get rid of was the shortcut for that again it was controlled gee I might decide to make this like a dark background I'm working with these cool greys I'm like yeah it seems a little bit something like that again invert the

54:03text

54:09heck this could be where anywhere I introduced that nobody nice this is nice about this process I have going on here I can just stack these now

54:22now I'm shows a way to get rid of these little labels here that but for now it's fine I got a general idea of how it looks so not really a big fan of that color this is right maybe I could try working with that purple I had in that one shot earlier and now that I'm not worrying about this background contrast with the text I can even make this a bit lighter it's quite vibrant

54:54and let's see what this purple looks like let's see what the Patel and purples look like yeah do you like the purple though just don't like with the green it's a nice purple

55:22we want to change this green to be like a purple now let's do it

55:33and maybe I'll make this

55:42I think that looks better already what do you guys think

55:54let's uh give this the same so I have two versions of San Francisco there's San Francisco tax and I ask the folks SF so he's a display version of that mmm I'm gonna make that bolder

56:22when it for font sizes I usually work with the Tailwind default scale so it more or less has increments of twelve one unit like once you get to larger sizes so it goes like you know at the smallest sizes it works in increments like to so it's like you know it's 12 14 16 18 20 in the 24 30 36 48 so I usually just work with that scale heavy okay it's okay now I don't know what speakers Michael has for Larrick on this year like I said this is just last year's so he's probably gonna want a button or something to like if you want to submit

57:12a talk so I'm thinking I might put that over on on the right here but I don't want just like floating there so what I'm gonna do is just add a bottom border to this I know there's like a border shape you can use but I always just make it with the with the rectangle tool and make it like a got to pixel rectangle I don't know why it's just I think I've always just done that and I'm gonna use just a softer gray from the background so I think this background has like it's like the second darkest gray so I'll use the one below that in just a very subtle

58:01background and then I'm gonna add like it might just be like a text link

58:15I'll make it like and there might be like a button that says submit talk I don't know how Michael wants to do this a talk like this might link to another page where we go to an email or something like that we'll figure that out later and because it's a link I want to give a link color but because we're on a dark I'm not like the link color might use this purple but I can use the same purple because we're on a dark background I need to use like a lighter bearing of that purple so it has a nice contrast to it yeah a few

58:57people are asking if it's gonna be available for replay yeah it will be I'll post it right after I'm done here I think it automatically posts

59:11that looks stupid I was have an idea my head and then I try it and it's just a horrible idea so it's setup of making it a text color what I'm gonna do is make it I'll make it white and I'm gonna make it a bit smaller and I'll just contain it and like a soft button now I just want to keep like a secondary treatment a lot of folks for like secondary treatments what they'll do is it'll give it like an outline and that's fine like it looks clean it's subtle so maybe something like that maybe a bit more and that's fine that looks interesting like it does look like a

1:00:18button now and maybe I'll round the corners a bit oops I'm gonna do there we go but another treatment that I like to do that all kind of also has that subtle like secondary button treatment is just giving it a softer background color so I'm gonna go with something a bit softer that's almost too bright bit softer than the current background just so enough slight slight text is still you know bold not a bit so there's like a semi bold I like the bold let's roll with it

1:01:17so I'm pretty messy in figma and sketch like it and when I smile I might coldest later on or someone else my code lon I might have to hand it out to someone else to code I might clean up usually if I'm working with someone like Adam like ladies and and get something close to what I'm doing here but I I just like to get the idea as quick as possible in figma and and clean it up later in code so that's a nice button treatment to submit a talk another thing is like these images they kind of clash with each other because they all have like

1:01:56like my photos this black and white photo so look the two of us have these black and white photos and the rest of these guys have these colored photos and then like there's even like the difference of like these are like portrait shots where Simon here is in the water which is cool but like there's just all these different treatments so just to kind of balance things out a bit I like to desaturate all the images so the just just a bit more cohesion between them so how do I do that in figma I bet I have to do that like individually I do it no I can't do that

1:02:43looks like multiple so again same with the background photo I did is just reduce the saturation and

1:03:01why am I using Figment nowadays I explained it earlier but yeah I'm just a native Mac app but those guys at figma are probably pretty smart and so I'm just gonna dig much fry right now and and you know I went I'm still like even if I fully adopt figma I'm still gonna like continue paying for sketch I think like I'm happy to give them my money like they make a great tool and I'm I'm excited to see what they continue to deliver but I'm kind of going back and forth between the two right now like you can even import the your sketch files into figma quite easily but I still find

1:03:42myself opening sketch every now and then I use both tools but

1:03:53so like I said that kind of desaturating the images they kind of makes them look a little more cohesive I can even do the same treatment I did with this background making purple I think that'd be like maybe a little bit too heavy another cool tool that's worth checking out what what's the name is escaping me right now shape Factory duotone by shape Factory so similar to like how I created that that background color like layered that that fill on top of the background name of that desaturate backer image to give it that kind of blue that purple overlay you can give it a similar treatment on this tool called duotone

1:04:46and here you can search on splash images on splash images directly in this tool so that was the photo site I was sharing earlier and you can just pick two colors and what it does is it kind of uses the one color for the highlight or have this purple thing going on so I could be something like that it this is and you can do this in Adobe in Photoshop it's it's called gradient by using a gradient map but this is just a great little website for that and they so you can upload your own image too but if I find like my Australia image so here's the one I'm using and if

1:05:32I want to give it that I mean that already looks pretty cool if I want to give it like that maybe something more cyan I mean I'm just messing around here I mean this is always a cool tool this is a cold treatment you can apply to your images to give just to give you some more contrast but I'm just gonna roll with what I have right now okay how long have you been talking for about an hour now so I want to move on to another section let me give these a different link style

1:06:19maybe the purple will work on this like something lighter yeah that works let's see if I have a good tail and alternate for that oh yeah unless we got here go lighter nah I was good purple 300 let me make sure that's accessible how do I just get this hex code love to edit the master okay well he's going to draw our shape and make it that purple and then John this is so tedious so the here's another thing I like just a way like these come from like these colors that I have from the tail and defaults that I have in bed like they're the shared styles that are brought in to

1:07:32figma but I just want to copy this hex code right now and I can't figure out a easy way to do that like I can't go I might I don't plan on editing it I just want to kind of well maybe I do want to edit it but in order to do that I have to break the style oh well I can do that I guess but anyways I want to see if this is accessible so this tool called contrast it's like a menu bar app and what I do is I'll put in the hex code for the foreground color and then the background color and it tells me if it's

1:08:07successful so yes that's very accessible so we're all good there

1:08:17okay next section we're gonna work on is this schedule section so what I'm gonna do is just duplicate this a little bit of a slow for me right there I'm gonna get rid of this

1:08:51and I'm going to back to like rotating the background or changing the background up as I I might do like a purple background now like a full purple background and put the schedule on that let me just make sure that this purple is accessible with white cuz I'm gonna be using white text on this probably yeah sure is so let's roll with it maybe the darker version is better let's just see no that's a little too dark yeah I'll keep what I have there I mean that's how I kind of pick colors like I said I go to the tailing colors and if one looks too dark I try the one above

1:09:43and it's just too dark I'll go back to the lighter one and obviously you can always customize them if you if you just can't find quite the right color you're looking for but

1:09:56bring this over here so layout wise I have this I have the day stocked in previous years like another way I can kind of rearrange this interview is uh freshly first I'm gonna just make all this text white another kind of layout I can explore but I've done for like other lyric on sites is is let me just like I have the each day has its own column for like part of the day so like it's like the morning to lunch and then on the right was like the lunch till till the end of the day another way I can approach it is doing this where I have a

1:10:54I'll call them for day one in a column for date - um another approach I can take is is duplicate this again is have let's group this starting to get messy is

1:11:25we can have a single column for both spread everything out a bit we make this really tall but I don't know let's explore it here

1:11:46and we can use our day 1 of a title right here day 2 it kind of has this like title on the left and the schedule on the right and I can spread this out a bit more now so there's another idea kind of like this I think I saw in the epic current site I really like the way you did the schedule here it's like kind of this make a look a bit more interesting I might Jack that just a bit oops I accidentally made a rectangle there and then I'm also gonna probably separate this these with borders how much space is in between each of these

1:13:05and got that bit smaller and I'm gonna make this border color just a lighter variant of the background color maybe that's too bright closer to that nope I mean that looks all right and I'm just gonna just to associate these a bit better

1:13:52oops

1:14:09cool not associates the speaker and the time a bit better obviously these aren't aligned right now but that's I mean I'm just trying to get these ideas out this also leaves it open for like if if Michaels gonna add talk descriptions to this he can do so and I'm just gonna copy and paste this

1:14:45hmm

1:14:51so yeah

1:14:57looks pretty clean like I said I explore that maybe doing something like

1:15:13I'm gonna rip it off too bad but it was pretty I'm gonna try it whatever doesn't hurt to try like it's nothing what's too crazy original idea in the world I'm just gonna and make that like quite large right 96 and then I might just lower the opacity on this I mean there's me putting in like zero effort whatsoever to try and get that treatment they did the oh one to see make it look a little bit more bolder maybe make it bigger maybe this doesn't work at all me it's just weird idea for me to try it but it does really fill up that left side much

1:16:18better and they do the same over here

1:16:31so I mean that's kind of doing it's almost like too much of a ripoff I'm gonna like get rid of this

1:16:43I mean just another idea like I said it might not me to make the final cut but you know I think it's a pretty cool treatment to explore I don't know even how to do that in code personally but again features use problem

1:17:10and then I don't know no I'm not gonna do that I feel like almost like this border can extend the entire width

1:17:27and make that like whatever my page width is like nine that's like 10 20 1040 something like that and then what font did I use for what font size that I used for this heading 36 and it's heavy

1:17:59kind of like the 48 and I might do the same for over here as well might be a bit aggressive just trying ideas here trying ideas okay so there is an idea for the schedule

1:18:28they're to go

1:18:47why does that go away as soon as it connects with that there we go [Music]

1:19:06so again none of this might may not see the final product but I just want to explore and share a few ideas that I might be taking and just kind of share my process here my messy process I'm gonna make this font maybe a bit bolder maybe I'll have the actual date like whatever date it was if I go to Larrick on let's just say it's October 18th

1:19:57Thursday October 19 okay

1:20:16and so that really takes up a lot of of the both the horizontal space takes up a lot of vertical space but not as much as you'd think now one thing is that Michael doesn't have any of the speaker's lined up or maybe has a few but we might need to design a blank state for this one option is just if he has like a bit of a schedule figured out he could just put in to be announced to be announced a bunch of times I was looking at Facebook's conference site and the way they do their schedule is more of this this chart and I thought that would be

1:20:56kind of a cool way to treat like a blank state because it's like he probably has a rough idea of what the day looks like just not what the individual set where the into individual sessions fit so if we just kind of did a registration section here and then filled this slot was set it's just a nice visual way to show the day at a glance of what it looks like and just kind of you can put that in as a placeholder before you have any speakers booked so I might do something like that later on what are sections we have here the let me zoom out so the venue section and the

1:21:39sponsors section

1:21:45now this is pretty tight in here I might i probably space this out a bit more but again I usually do some code after the fact I'm just trying to get there's some good ideas that I probably got changed the font later too so going back to our patterns like just like rotating the background or switching up the background color is I'm gonna the hell

1:22:32this time I could make it a white background let's say or even like an off-white background and info about the venue

1:22:51so the venue is called Monkey Bar let me grab the venue image this is the one I use last year I think this is just taken from I think Michael sent me a bunch of you know why don't I do now I'm just gonna do this for now for the sake of being efficient is what later on I'll probably take images from last year's conference and put them in this section that would look way better I should kind of thought of that ahead of time now it's this kind of boring looking a one way to kind of liven it up a bit is so another thing you could do I'm like

1:23:37using different color too and switching it up as I scroll another thing I could do is put a like a background pattern on there so I can use like one of those hero patterns this top logger if he's pretty popular but even just something as simple as like this graph paper some silly ones on here that like like this food one it's just someone requested that and I made it some of them are still yeah I wouldn't like personally use a lot of them but some of them are pretty cool like I like just using the simple ones like the like the banknote here and like the diagonal lines like

1:24:17some of these are okay but I would applied one of the back and maybe plop one of those on the background here another thing I saw on one of the dribble shots is this like when you're working with images adding like just a bit of like in this dribble shot they kind of added this a little bit of texture it's kind of like this fake textured drop shadow kind of thing going on we sort of did this on the refactoring UI book site kind of having these little SVG graphics just kind of throughout the page to just make it a bit more interesting add some visual interest I did it with these

1:25:03these images I made just to kind of support the image a bit better so I could do something like that here

1:25:19another thing I could do it's me a little bit tedious I'm gonna try and wrap up in the next 15 minutes I'm gonna go to Google Maps and then go just look at Australia I don't know how to type and I'm gonna take a I'm gonna take a screenshot of this

1:26:03so if he was one like a nice way to create like a nice-looking map without actually using a map is now I'm gonna do now is kind of I just showed you I'm gonna make like a bunch of dots bear with me here

1:26:41I'm gonna zoom in on this a little bit I guess by these a bit more actually bear with me here

1:27:06it's a little bit tedious

1:27:14I'm taller this now

1:27:20let's make it a bit more

1:27:29okay there's a lot of dots

1:27:41I'm gonna duplicate that a bunch of times and I'm going to sounds like my wife's home

1:27:59I'm going to remove the dots and I'm going to kind of trace the the map here

1:28:13it's a bit tedious but the results are always pretty cool

1:28:38keep back dot right there quite genius

1:29:01let's go all the dots that don't cover the map

1:29:25and now I have sort of edgy looking

1:29:51I agree that might need some more small dots for this I mean I just want more or less one to show efficiently how to do this technique

1:30:09my little girl sounds fussy right now and there I have this cool little again yeah like someone in the comments said it might look better if there's more dots fully agree but this is a nice little like little like I could plop it anywhere here maybe even in the hero nah I think you like it with the the venue info makes the most sense there's a lot of dots

1:31:00um and I'm gonna just make that those like a light gray a cool gray maybe a bit darker than that ah bugger

1:31:25and then push it to the background maybe I'll like great was the way to go let your gray I just want subtle so I might put more dots in there and include New Zealand as well but there's a quick way you can just make a quick map like that actually looking map it's just kind of texture it's not really you know it doesn't need representing anything really it's just kind of a nice little nice background texture to add and you know I can be fun and I'm just experimenting here I don't know if I'm gonna keep this but like just doing subtle little things like this to make

1:32:20it just bring a little more interest to the image itself but once again I'm gonna replace this image with like images from the conference last year and let's change this to the display font let's make it heavy like we do everywhere else and what size the font that I use there 48 yeah okay that's cool I guess I think I would give this more interesting treatment I'm gonna move on to the next section for now I want to wrap up pretty soon it's almost 1:00 o'clock time to get some lunch so next section is the kind of the sponsor footer section footers always like making them dark so I'm gonna use

1:33:20the same kind of background color I used for the speaker section so like that and when I work with with like like logos like this that all have like a different size like these are all nice-looking logos I grabbed when they all have a different like size and purport they're all have different portions I always like to contain them the way I have them contained here like in some kind of box like I was what site was out looking at I think it was this one this is just conference I just kind of found it on dribble or something and we need just when you don't container like you just

1:34:05plop them on the page it just looks like pretty clothes cluttered by containing them it kind of bounce things out makes them look all like the same relative size and it gives them a a quite a bit more room to breathe between each other so I was like the containing me something like this whether it's this or you giving them them like each giving each thing its own subtle background I mean this is fine I'm just gonna roll with this for now give it some rounded corners maybe let's give it a subtle

1:34:50off-white background and [Music]

1:35:08and change the font this is right need to make a shared style I guess this sort of makes sense because I'm using this in multiple places and let's give this a just a subtle off-white text color maybe a little bit more that's pretty good and then I mean maybe I'll connect the footer to this section like I was looking at the epic ER and say they have the do something kind of similar they kind of contain all the stuff here and then they have all their legal jargon at the bottom so they it kind of just acts as a footer maybe later I'll do something like that but for now I think

1:35:56this is just I'm just gonna leave it like that and yeah I mean this is just a starting point that's all I wanted to kind of get done today I think there's still a lot of work that needs to spend I mean I could spend hours on this so this I think is pretty okay for an hour and a half of work and yeah if you've any thoughts feedback if you don't like it share comments and can you explain the advantage of using different sections of the webpage as separate artboards that's just something I did this time I normally actually have them on one artboard but I kind of for the

1:36:43sake of keeping things simple for this this live stream I designed one section at a time and then just stacked them on top so basically if I decide to go a different direction with the speaker's I can pull this out and plop this one in this one looks stupid obviously but I can plop that one in and same width goes for all the other sections and I thought that was a interesting idea but this is the first time I've ever done that so a little new workflow discovery okay so I'm gonna wrap up now yeah I think that's okay it's a good starting point a lot more work to get done so I'm

1:37:31gonna sign off so thanks for tuning in guys and I hope to do this like once a week for the next few weeks maybe bi-weekly I'm speaking at smashing conference in like a month and their whole shtick is that they don't allow you to they want to kind of make it so you can't use the speaker's can't use slides and it's all a kind of live designing and that makes me incredibly nervous so I'm kind of using this as an opportunity to share my ideas with you guys but also just kind of practice speaking out loud and articulating my thoughts in a interesting way so I hope

1:38:11this has been useful and feel free to leave some comments shoot me a note on Twitter and I have a few things lined up for the next few weeks but eventually if you guys have your own designs that you want some design feedback on I can take a look at them and I'll start incorporating those into this live stream kind of like what I was doing earlier with the refactoring UI videos they're also user submitted designs so I'm not gonna open that up right now like I said I'm if you lined up but I'll I'll tweet something out in the next few weeks about doing user submitted designs

1:38:51cool so thanks again guys I'm gonna sign off here I'm gonna figure out how to do that okay take care