# Steve Schoger   How to Think Like a Visual Designer

Channel: StreamACon Streaming Conferences
Video: https://www.youtube.com/watch?v=hlI6xGfBjkQ
Duration: 29 min
Language: English
Words: 5846
Transcript page: https://viewrankai.com/tools/youtube-transcript/hlI6xGfBjkQ

---

[0:00] hey guys yeah my name is Steve I have a lot to get through in the next 30 minutes I'm just gonna get right into it so the name of my talk is how to think like a visual designer I'm a visual designer and I thought I'd be cool to give a glimpse of my process when designing a website from scratch using already existing content and I'll try my best to explain my process as well and I'll give plenty of tips along the way and hopefully this will give you a few ideas you can take home and apply to your own site so I'm going to be using a

[0:33] real-world example of a site I recently redesigned so we're going to be taking a look at the marketing site 4-tuple tuple is is a remote pairing pair programming tool for Mac it's sort of built around like this idea of a replacement to tools like like screen hero it was acquired and killed by slack and then there's like other pairing tools out there that they're not necessarily designed for developers in mind two-pole was created by my friend my friends Ben Arnstein Joel Sutherland and Spencer Dixon I had to include this photo because it kinda looks like a father-son thing yeah I so they asked me if I can help them redesign their site

[1:15] to better align with their their messaging and in positioning I thought it would make a great case study so to kick things off let's just take a look at our content so then sent me this Google Doc with with all the content they wanted them at new site now I want to emphasize the importance of content first like you need to keep in mind that like content is design you want you want the content to define the layout in elements in the design rather than the other way around like have the design dictate the content and this will make it easier to tell your story and you

[1:44] know guide both yours and your own goals so let's take a look so Ben structured this content understand it is probably going to be like a hero with a call to action if you wanted to include like a demo video that he put together which is great you know he highlights a few key features also not shown here we're like a few testimonials that he found on Twitter so like a lot of common content you'd expect to see on the side like this and so we're gonna try to explore ways to structure this in a more meaningful way now if I were to give all this content

[2:15] to a developer they might design something that looks like this in fact some of you might be thinking yeah that looks pretty good I want to change a thing and yeah there's like a general sense of hierarchy here you know it's using a lot of bootstrap defaults which I see many many developers relying on you know it's a good starting point but it makes everything a little more or less the same you know just notice polishes something maybe a designer would put together so we're gonna see what we can do to bring this to the next level so starting at the top you know Harkey wise this is

[2:48] fine but visually it's not that interesting it doesn't really draw me in or look super trustworthy at this point so I'm gonna get into like styling details in a bit but let's just kind of think about the layout a bit so first explore more than one layered idea one thing I've observed with developer designs is like just over the years they Center everything you know this is just my own provocation of what a dev would do but I see this a lot and you know so the headline Center the subheadings are centered all these features are Center aligned all the testimonials are in like they're all grouped together and

[3:21] centered so I see this happening all the time but you know there's a lot of ways you can structure here you know you could you could left align it you know nothing crazy you can you can add a visual you know there's a and then there's a ton of ways you can position that you can do a side by side treatment you can you can flip it so the headlines on the right and the images on the left and you could stack it so the headlines on top and the visuals on the bottom and you know if you're having a hard time visualizing some of these ideas you can

[3:50] check out I go to land book calm land - book calm for inspiration and you can probably find an example for every one of these ideas and more you know just by quickly skimming through these I was able to find like a layout with you know this side-by-side treatment and and here's a stack version with the title on top of a nice illustration at the bottom and you know you can do the image on the left and you know these are just like you can either do a photography you can do an illustration it's cool collage thing they're going on here and the point I'm trying to emphasize is you

[4:22] know explore more than one idea explore plenty of options and I consider every one of these things when I work on a project like this and and don't over invest either it's it's really easy to explore these ideas with a pen and paper to narrow down your decision-making for this particular design I wanted something a little more abstract so I thought illustrating something would be would be the best way to communicate that so I went ahead into this side-by-side approach and I made this illustration I thought was a nice way to communicate the product you know it's got the two people sharing a screen in different locations indicated by the

[4:55] landmarks and in the night in the day the contrast of the night and day now obviously not everyone can draw you know you can always hire an illustrator you can browse on Gribble for like a style you like and then you know pay illustrator a few hundred dollars probably if you literally have no budget all budget at all definitely check out on draw so it's like MIT license illustrations by James Katharina Lippitt Sooni lipid soon you can even adjust like the colors up on the top top right there and and kind of go along with your own brand so you know if you want to try

[5:29] drawing something yourself I found this great tutorial and it was so you know if you're feeling creative give it a try it worked for me like one thing that designers do that feel that I feel like a lot of deaths won't think of is increase the size of empty image to overlap other parts like overlap the text and just the overall page container so like I see devs relying too much on the grid probably you know probably for simplicity they don't want to like you know get into the absolute positioning like required to achieve this but you know it does make things a little bit more interesting and these little

[6:08] details go a long way now this illustration it's it's starting to like you know give this side a little bit more personality but you can't just rely on that to carry your brand there's there's a few lighter important elements you want to think of so one is one it's font choice so you know if you want more of like a formal you know conservative looking go with you can go with a nice Sarah if it's something a little more playful you know with like a rounded farm for like a plain clean looking you know with a nice neutral sans-serif and you know there's a lot of ways about

[6:38] going to discover new fun like the way I mostly discover new fonts is up like I'll take a look at the dev tools I'll learn about like a new font maybe I'll find a site on like land book and take a pic of the dev tools but I don't just stop there once I find that font I'll google it and and then I'll usually that usually take me to the foundry so these are like the companies that design the fonts and usually they have a good catalog of great fonts worth checking out there and I've been doing this for a few years I've collected of a

[7:06] decent collection of fonts that I go back to and here's a few of my personal favorites I'll share these slides afterwards by the way don't like write these down right now if you care to but I'll share them on Twitter or something after this you can review them a few of them are free a few of them are license some of them are really expensive some of them are like with a service like Adobe fonts or something so yeah so yeah like I quite like this font called graphic it's clean clean and generally like quite neutral so it's pretty versatile in that sense now keep in mind

[7:37] that normal fonts are transferable you need mainly to like adjust the weight and size depending like some fonts like the bold weight is really bold when you go to a different file you might need to adjust it like a medium or a semi bold so you know play around with that so this was a bit bigger so I made it a bit smaller yeah so another thing that defines personalities color color is another big factor know most designers they like kind of trust their gut and eyeball the colors that can be pretty messy designers are pretty messy in that sense I personally just rely on tailing colors

[8:12] talans his framework by this guy I know I think he's here it please introduce me if you if you see him around and from there I mean I would just trust my gut from these two like I think but just starting from like a limited set of colors like the chillin colors is a good starting point you know colors like blue needing to go and chill they're all pretty in right now so they're kind of like a safe choice and I know I'm biased cuz I did pick these colors but I think there's like enough but there's enough Ranger thiis right off the divi days I've been using them

[8:47] since we've kind of like nailed these colors down and I haven't really had to deviate from them at all and I would just pick one color than trying to like mix colors up like colors can be pretty tricky to work with so I wouldn't I want to try to complicate it so you know I'm just gonna work with the indigo because that's like the brand color and I'm just gonna use that for like all our call to actions and things so yeah so another personality identifier is corner radius so so like when I say corner I mean like the you know stuff you see around like buttons

[9:17] and inputs and you know a soft radius like this is it's pretty neutral if you're gonna go with a more serious tone you can you can drop the radius altogether go with that sharper look and a more playful tone you can round the corners completely for this I'm just gonna go with like the heavily rounded corner because it's not fully rounded but like heavily rounded so yeah another thing that I often see developers were like too much is is size to create contrasts so you know it does create contrast but designers will often use color and weight as well so you know we can use like a lighter but still

[9:53] accessible great for this subheading yeah you can see that change it's subtle so like I'm using like a tail one nine hundred gray for the headline and then like a seven hundred for the sub headline and then you know we can use weight to put more emphasis on the the inputs of supporting text now one thing I've seen I'm starting to see with developers in more recent years it's like they're starting to grasp that like space is good I'm starting to see that they're consciously using space to you know give their layout more room to breathe so Bravo oh that's good good step in the right direction but

[10:26] sometimes they overlooked space for the individual elements like like buttons and inputs so you know like screen sizes are getting larger so you know we have all this extra space we can utilize so making elements much more clear and easy to find so I'm gonna bump up the overall height of the input there you know just really give that text room the breve and that might look like a bit aggressive but like in context of the rest of the page it feels pretty good and because that elements pretty flat like the input as in it doesn't have any like gradients or shadow shadows you know Locke's death which it's it's a

[11:03] nice visual cue to make something appear more clickable and it brings more attention to it but even with flat design you can have a little bit of depth so one thing to keep in mind that in general lighter elements tend to feel closer in darker elements I feel more a little more further away so if you wanna make something feel a little more inset on a light background like this you can make it a subtle off-white be careful there's like a fine line between looking disabled and looking clickable for day so I'm just using like tailwind 100 for the gray there so it's like a nice subtle gray

[11:37] there so and then I use like a 300 for like the the border just you to define it a bit more now if you have a headline that like breaks up nicely like this one you can you know you can add color to half of it it's just a nice way to put emphasis on key words and incorporate the brand color to it these are just some of the little details that designers are thinking of so just trying to find opportunities to add small like non-offensive hits hints of personality and you know nothing too in-your-face okay let's take a look at the demo video I've seen developer sites do this where

[12:10] it's like basically fill the entire page width container so you can click it and watch it in line it certainly stands out but you know if it's not super important it really prevents anything else from standing out and this is just an hour piece of supporting content so you know stop relying on size and positioning to create your hierarchy you know you can always use space and color to create like a nice contrast and so I'm gonna explore a few ways of how we can do that with this video so so we're gonna reduce the size of the video and you know that's a bit aggressive but you know I

[12:41] don't want to watch the video in line at that size so I'm you know I was thinking make it more of like an embeddable video make it more of like a visual element you can click and they would open into a mortal so to do that we first need to make it look more like a click target instead of like an embedded video so the first thing I did was I grabbed a screen shot of band like a nice screen shot spend some time doing this if you're gonna do something like this spend some time because it's surprisingly hard to find like a single frame and a video

[13:08] where the face doesn't look stupid and since this is a click target you know it might be helpful to give it the same rounded corner treatment we use on on the buttons it's a nice subtle visual cue it's great for consistency yeah we removed all those playing options that was a nice visual cue to make a little clickable so we can add a more like stylized play icon you can get something like this from like you know any icon set like I'm sure fun awesome has something like that and you know I can I put in the corner there so I'm not like blocking Ben's personable face I mean it

[13:45] still manages to look clickable and then just to give it a little bit more depth I added a box shadow to it I just use like tail and default shadows like I can go into the anatomy of a of a box shadow but I had to cut stuff to keep it within a half-hour so just use the Kaelin defaults so yeah now that reduces a lot of vertical space but now we've all this horizontal space so one thing I think it's important for for designers to understand is that high curry doesn't need to be like a top to bottom approach to work you can associate these elements we'll take a

[14:17] left or right approach just a better and you know just a better associate them you can you can contain them so like I mentioned earlier use like a combination of size and space and color too to create a balance in your design and so since we reduce the size it de-emphasized it a bit we can use like a bold color to just elevate a little bit more so you know just to bring more I can use like that dark indigo color for the car brain color just to bring it out a bit more I always see the Daleks too because you know we invert the text you

[14:49] know you may notice the secondary text it's it's a little D emphasized using using size and color now I already mentioned that like using color to reduce contrast it's a good thing I had talked about that in the headline and we use the lighter grade there and that made sense because it was on a white background but now we're on a colored background right I'm great text it's always looks a bit off on a colored background you need to consider that we're trying to achieve is reduced contrast and that you want it the text to look closer to the background color not gray so in order to do that you can

[15:20] sample the background color and just adjust the saturation and lightness until it looks right so this is an HSB picker it's what you get for like with like you know dev tools or graphical editing tools and I would just drag the picker to the top left corner and and the end result looks something like this yeah so it's a subtle change but it makes a big difference and you know Dylan already considers this I just use a lighter color so um so let's looking interesting no I always like to find opportunities to overlap elements just to give the page a little more depth so I find this is a great opportunity

[15:54] because it's so narrow so you can offset the video image with negative margins and yeah and you know that box shadows nice it makes it look much more clickable and yeah that we've made it we made a little bit tighter now so I'm gonna make the font a bit smaller you know you don't need to like supersize the every title to make it clear that it's a title I think the proximity alone does the job of associating with the video and that's a title for the video so we can make that a bit smaller then let's just see what that looks like in line with the rest of our designs so

[16:22] it's coming along now let's move down to you know it kind of breaks up the page nicely q as you scroll beyond the fold so let's move on to the features section so when it comes to organizing features like this it's I see this too often and that's like you know pictures organized in like three or four columns you know depending on the amount of features there it was for some they usually have like a font awesome icon blowing up like way more than its intended size and again everything centered like so you know there's not necessarily anything wrong with this but you know I'll share

[16:53] with you like what it does on how a designer might approach this and sort of explain my thinking so first of all don't blow up the icons when you work with icon packs they all they're all have this like intended but all in Tenafly can an app experience like more often you see them next to like small text or like a navigation element so what I'm trying to say is they lock a lot of details like a traditional marketing icon will have and they don't really look that great when they're blown up like three four times their intended size so I'm not saying don't use these for this purpose just maybe

[17:23] make them a bit smaller something like forty pixels max should suffice another thing designers would do align text with readability lines so you know center alignment might be great for like headlines or like short blocks of text that once but for something like that's more than two or three lines I would always left-aligned it now we already talked about like reducing contrast I think this is a good example because it's hard to see project it looks great on my Retina screen but but just making the the the supporting text a bit lighter than the headlines to make the headlines pop a bit more also the icons you know

[18:05] I'm using a phone off some icons here I don't want to poopoo on phone awesome like there but they are overused by developers because they're free they're sort of the go-to set you just feel like packs worth checking out a few them re own some of them are like yeah so no Mario and some of them are more like recommended by designers I think they're great some like and some of them are like better suited for like marketing sites like this so I ended up going with my own my own sets it's publicly available it's part of the refactoring UI complete package it's it's sort of fun because

[18:34] they have this duotone treatment so you can you can pick two shades from your palette and and apply that to your design so yep so I use those for this and you know just with these four changes that we make this section it's already starting to look like something like a designer would design so let's explore a few more options like with this layout sort of like we did with the hero just try to restructure this a bit so um if content lends itself to it try to break it up into like a few sections by finding like related grouping so for example when I was working on this I

[19:06] noticed that like a lot of these features were like more like performance and tech related and then some of them were like workflow and experience related so I encouraged been to like revisit the content a bit out a bit more some additional description text to go with the additional like section me up here but also like switch of the layout right so let's take a look at this first section and see how we can structure this but instead of using digits like three columns so first we can stack the features and you know like is this room to be creative with and and here we can

[19:39] use like visual elements like we've already talked about so I've talked about using like maybe like a photo or like an illustration or you know you can have a screenshot from from your product that highlights specific features alternatively you can use like optional contents so I think testimonials are great for that you know they're great to fill spaces like this and if you don't have one they're easy to get by asking an existing customer fortunately you have a few here that we've already talked about someone's gonna route the first one by a dime on the top left there now I'm just gonna plop this in here that looks stupid but

[20:10] it's you know it's in the middle this nicely polish new design so let's try to be creative with that so first like you know you can still get rid of all the Twitter styling and we'll come back to Twitter in a bit but like let's get rid of all that Twitter styling so it's more consistent with everywhere else so I've already you know so I'm gonna change the font so it's it's the same font we're using everywhere else and I've already talked about you know giving elements more space so we're gonna do the same thing here same goes for font size so you know we're gonna bump the font size

[20:45] episode it's something more proportionate to everything else I'm using the same font size as like that supporting text in the in the top left there and I always like to italicize quotes I find has like more of a conversational tone and since this is a quote we can can add some quotes to it and I always like to get creative with like quotation marks so you know try to make them like a visual element so using like size and in color and and just position to make it a little more unambiguous and and I'm excited me this one a bit larger and is kind of tucked

[21:19] behind the top there and you know it looks nice and um you have a great folder to work with use it this is a photo of out and give it a talk mix them look a little more authoritative and reputable and I'm just got his name back so we you know we had that Twitter styling there before so we removed that once we replaced the photos so I'm gonna add the name back for the bottom there and just replace the his Twitter with it with just his title and if the Testament comes from someone who's like represents like a organization include that it has a nice logo and then I'm gonna add the

[21:57] Twitter box so you know you can click actually see this like this source that came from to make it look like it's legit so yeah I still looks like a Twitter like a tweet but you know it's just style with the rest of the page okay um so now we can see how it looks at the rest of the page it's coming along now now one thing a lot of designers will do with with marketing pages like this is they'll switch up the background so it's just a great way to make the page a little bit more interesting as you scroll so the idea is to like alternate

[22:27] between like like a white a light gray a dark gray maybe your brand color so since we've already used the white in the hero and we use the Indigo on that one ribbon with the with the video we can use like an off-white in this section and you notice for a cleaner look we're gonna replace that border around the testimony with a with a box shadow again just using tail and defaults for that it makes it pop a little bit more it looks a bit cleaner just a great way to add distinction to something without like adding a border and yeah and and now that we have some

[23:00] differentiation with this in this next section here it sounds repetitive so I'm just gonna keep the section as it is and it just breaks the page up nicely now so let's move on to the testimonial section so first I'm just gonna isolate and you know we've already used that testimony from Adams so now we've got like a nice even number to work with I find it's always easier to work with multiples and let's apply the same styling as the the testimonial above so it's the same same everything you know I can't get a photo for all these testimonials so I kept the Twitter avatar there so it's kind of

[23:35] like a mini version of the above testimonial now yeah we have all these different heights because all the testimonies have like our different lengths so you know so instead of letting this happen you want to control the shape and size so you know you can use a combination of like flexbox using like flexbox columns influx grow - so to give them like the same height by this site will be the site is live so you can actually look at the code for this if you want see how it's all done it's all coded until in - so you don't look at the CSS you can just look at the HTML

[24:12] and these borders they tend to make the design look pretty busy so I'm gonna reduce that by just removing the containers and putting them - like a nice quadrant with a single border but looks a bit cleaner and you know there it is with the rest of the designs so it's coming along no I've already talked about like rotating the background so you know I use like a cycle between like a white and indigo I like gray and a white so I can probably come back to the Indigo so I'm gonna do that here now the Indigo I've been using it's it's it's pretty dark I've considered it a

[24:42] dark UI there's a few things you want to consider with that so there's sort of misconception that like dark UI is just like the inverted version of the light UI now there's not a significant amount of like background elements in the example we're using so I'm gonna take a look at another example that I recently shared on Twitter but just to illustrate my point a bit more and explain a bit more so here we have a light UI which is relatively flat and if if you remove a lot of the visual cues like the gradients in the box shadows it looks yeah so it looks pretty flat so um as I

[25:18] mentioned earlier you have to cheap depth with flat design like you want like light objects they tend to feel like closer to us or darker objects feel a little bit further away so in the example here like the the bottom part is our lightest and the top part is our darkest and of course you have like a bunch of other visual elements like the borders and the in the inputs just to give it that more of a perceived depth and so you know the common mistake I see is you invert everything so our lives becomes darkest and our darkest becomes the lightest right but you need to keep

[25:49] in mind that like with dark you eyes you want to use the same visual cues as we have with like light you eyes so what you want to do is you want the lightest background element it still needs to be the lightest element on the dark UI and the darkest still needs to be the darkest so if we take a look at the UI we're working on the only background element is the border so to give it this same visual cue as the light version we need to make it darker right but so that's how it works for for background elements but for foreground elements like type and iconography that's where

[26:20] you do want to invert everything so you know just at least have like higher contrast on the dark background so if you take a look at our light UI so here you can see that the text it's it's the darkest in the visual like the Twitter icon and the Block in the quote there they're a bit more subtle in the background so to invert that we need to make the text the lightest in the icons just a bit lighter than the background itself so that's what that looks like on the dark UI and lastly these avatars there's a little bit of you know we can't control like

[26:53] user uploaded images so there's a little bit of classroom with like the colors of the avatars in the background coloring and you don't know how it's going to look on whatever background color are you using so to prevent the clashing there's a few ways to work around this but like I would just add like a simple like whiteboard just to separate it just so there's not clashing colors and with the background so something like that would would do okay last thing is the the footer section there's not really much going on here but I always like to end on a dark footer it just kind of

[27:23] gives you a nice sense of completion now it's always fun to like sort of compare the before and after I know I kind of had a made-up example to see what developers do but it's always fun to compare so here's where we started and in here's where we landed so yeah in the site's live so you can like take a look at the code now and see how it was all implemented it's too full pair with tuple comm I think yeah pair with tuple comm tuple dot app okay tupled app thanks Adam so yeah if you joined the talk I found it useful Adam and I just launched a

[28:05] book called refactoring UI it's slowed with practical tips just like the ones I shared today and a lot more so you can check that out and thank you if you have any questions come find me in the hall

[28:27] you

---

About this transcript
Read from YouTube's own caption track and laid out by ViewRank AI (https://viewrankai.com).
ViewRank AI finds the videos already beating a creator's own average on Instagram, TikTok and YouTube Shorts, transcribes them from the audio itself in more than 60 languages, and turns what worked into new ideas and scripts.
Free transcript tools, no account needed: https://viewrankai.com/tools
How to read any video this way: https://viewrankai.com/llms.txt