Season 2
|
Episode 5
Mastering the pillars of great visual design
Anthony Hobday
Interface Design Expert
Aug 24, 2023
Aug 24, 2023
|
38:47
38:47
music by Dennis
About this Episode
Anthony Hobday, a self-taught interface designer, became an expert by obsessively studying the works of top designers around the world 🌎
Now he is dedicated to bridging the knowledge gap for fellow self-taught designers by sharing every step of his design process.
In this episode, we go deep into the core visual pillars of layout, typography, and color.
Anthony also highlights simple yet effective techniques everyday designers can make to elevate their visual design skills and add that final layer of polish ✨
Deep Dives
Get every episode
Free lessons from the top designers 👇
Fonz Morris
Lead monetization designer @ Netflix
Mia Blume
Past leader @ Pinterest, Square
Jorn van Dijk
CEO @ Framer
Femke
Design lead @ Gusto
Kenny Chen
UX lead @ Google
Join 6K+ designers
HC
HC
HC
HC
Deep Dives
Get every episode
Free lessons from 👇
Fonz Morris
Lead designer @ Netflix
Mia Blume
Past leader @ Pinterest, Square
Femke
Design lead @ Gusto
Kenny Chen
UX lead @ Google
Join 6K+ designers
HC
HC
HC
Transcript chapters
Elements of a quality layout
[00:00:00] Ridd: What are the patterns or techniques that you notice that make you think, Oh, wow, that's, that's a good layout or this, this designer knows what they're doing.
[00:00:10] Anthony: I think often people don't really zoom out and look at a page as a whole
[00:00:13] Anthony: What I like to do sometimes because I take these full length screenshots And so I often see them quite zoomed out because I see the whole screenshot fit into my monitor size. And at that level, you start to notice that some websites put some effort into having sort of an overall plan for the layout of the page from a zoomed out level. When I do zoom out see the oh wait this website designers had essentially a plan for the layout of the whole page at a page level not just okay Here's the next section.
[00:00:40] Anthony: I think that really helps to Set a goal in terms of what you want the layout to be and then follow that
[00:00:45] Anthony: so I think that's one good way you can kick start your layout is say what's the general shape? I want this to be and it could even be that you draw a shape on a piece of paper and say Let's just follow this layout.
[00:00:55] Anthony: Ideally the shape you choose has something to do with the concept you're [00:01:00] Designing the website for
[00:01:02] Ridd: Can you, can you share a little bit more about that? What do you, what does it mean to. Have the shape you choose tie back to the overarching concept or the product or the page that you're building.
[00:01:12] Anthony: Maybe you're designing a website that's for surfers or something, you know, surfboards. And if you had your landing page, follow this sort of undulating wave shape.
[00:01:20] Anthony: And that kind of reinforces the idea of water and the natural sort of, uh, concepts behind what you're selling. Whereas if it was really sort of blocky. And maybe just one column, you're not really reinforcing that sense, even subconsciously. So I don't know if that makes sense, but I think those are the sorts of things you can bring in to take it to an even higher level than perhaps other designers are capable of.
[00:01:45] Anthony: So that's sort of a broad view.
[00:01:48] Anthony: There are some things on a sort of more specific level that always stand out to me and one of them is, which I rarely see, but if you take uh, Let's say three or four [00:02:00] columns of content and you just vary the height at which they start. You get this very organic way to sort of start that section of content and it's more visually exciting, right?
[00:02:11] Anthony: So it's such a simple technique. But just by doing that you're setting yourself apart from other websites that keep it very orderly because that's the way that you know HTML CSS want to be they want to be very orderly box like you do something just a little simple technique to offset those boxes essentially Then it really helps.
[00:02:30] Anthony: I think that's maybe part of the reason that the the bento style layout is quite popular
[00:02:34] Anthony: Not necessarily organic because it's still very boxy, but it's a very interesting thing to look at, even though you're still using boxes, because you've got all these sort of alleyways running between them.
[00:02:43] Anthony: They have different sizes on different rows, different columns. so anything you do like that to add more visual interest always jumps out at me.
[00:02:49] Anthony: I guess it relates to that page level intentionality. Because, especially landing pages you get this sense of a story that you're going through, right, where it's, it's starting you off and you're telling a story [00:03:00] beginning, middle and end.
[00:03:01] Anthony: And so if you're putting large elements at the top of the page and the bottom of the page that echo each other in some way, even if it's two halves of a circle. You know, in the background or something, then you're essentially bookending that story and it gives you this nice sense of sort of finality, even if you don't really appreciate it in the moment.
[00:03:18] Ridd: I think maybe I've understated the value in looking at this kind of zoomed out screenshot of the page. Because this is where you start to notice these patterns and being able to connect ideas back and forth. And, man, 99% of the time that we're inspecting these websites and looking for inspiration, we're kind of only viewing it one viewport at a time.
[00:03:37] Ridd: So that's an interesting technique, even from a... Studying standpoint that I just wanted to call attention to because I don't actually hear a lot of people doing that
[00:03:46] Anthony: It is good from a studying standpoint. I think the last thing that comes to mind is, sometimes people put constraints on themselves and, uh, those constraints will make the design more difficult, but anyone who attempts that sort of constraint and really pushes the creativity, they can end up with [00:04:00] something that feels special just because it looks unlike anything else you'll see on the web.
Elements of a quality layout
[00:00:00] Ridd: What are the patterns or techniques that you notice that make you think, Oh, wow, that's, that's a good layout or this, this designer knows what they're doing.
[00:00:10] Anthony: I think often people don't really zoom out and look at a page as a whole
[00:00:13] Anthony: What I like to do sometimes because I take these full length screenshots And so I often see them quite zoomed out because I see the whole screenshot fit into my monitor size. And at that level, you start to notice that some websites put some effort into having sort of an overall plan for the layout of the page from a zoomed out level. When I do zoom out see the oh wait this website designers had essentially a plan for the layout of the whole page at a page level not just okay Here's the next section.
[00:00:40] Anthony: I think that really helps to Set a goal in terms of what you want the layout to be and then follow that
[00:00:45] Anthony: so I think that's one good way you can kick start your layout is say what's the general shape? I want this to be and it could even be that you draw a shape on a piece of paper and say Let's just follow this layout.
[00:00:55] Anthony: Ideally the shape you choose has something to do with the concept you're [00:01:00] Designing the website for
[00:01:02] Ridd: Can you, can you share a little bit more about that? What do you, what does it mean to. Have the shape you choose tie back to the overarching concept or the product or the page that you're building.
[00:01:12] Anthony: Maybe you're designing a website that's for surfers or something, you know, surfboards. And if you had your landing page, follow this sort of undulating wave shape.
[00:01:20] Anthony: And that kind of reinforces the idea of water and the natural sort of, uh, concepts behind what you're selling. Whereas if it was really sort of blocky. And maybe just one column, you're not really reinforcing that sense, even subconsciously. So I don't know if that makes sense, but I think those are the sorts of things you can bring in to take it to an even higher level than perhaps other designers are capable of.
[00:01:45] Anthony: So that's sort of a broad view.
[00:01:48] Anthony: There are some things on a sort of more specific level that always stand out to me and one of them is, which I rarely see, but if you take uh, Let's say three or four [00:02:00] columns of content and you just vary the height at which they start. You get this very organic way to sort of start that section of content and it's more visually exciting, right?
[00:02:11] Anthony: So it's such a simple technique. But just by doing that you're setting yourself apart from other websites that keep it very orderly because that's the way that you know HTML CSS want to be they want to be very orderly box like you do something just a little simple technique to offset those boxes essentially Then it really helps.
[00:02:30] Anthony: I think that's maybe part of the reason that the the bento style layout is quite popular
[00:02:34] Anthony: Not necessarily organic because it's still very boxy, but it's a very interesting thing to look at, even though you're still using boxes, because you've got all these sort of alleyways running between them.
[00:02:43] Anthony: They have different sizes on different rows, different columns. so anything you do like that to add more visual interest always jumps out at me.
[00:02:49] Anthony: I guess it relates to that page level intentionality. Because, especially landing pages you get this sense of a story that you're going through, right, where it's, it's starting you off and you're telling a story [00:03:00] beginning, middle and end.
[00:03:01] Anthony: And so if you're putting large elements at the top of the page and the bottom of the page that echo each other in some way, even if it's two halves of a circle. You know, in the background or something, then you're essentially bookending that story and it gives you this nice sense of sort of finality, even if you don't really appreciate it in the moment.
[00:03:18] Ridd: I think maybe I've understated the value in looking at this kind of zoomed out screenshot of the page. Because this is where you start to notice these patterns and being able to connect ideas back and forth. And, man, 99% of the time that we're inspecting these websites and looking for inspiration, we're kind of only viewing it one viewport at a time.
[00:03:37] Ridd: So that's an interesting technique, even from a... Studying standpoint that I just wanted to call attention to because I don't actually hear a lot of people doing that
[00:03:46] Anthony: It is good from a studying standpoint. I think the last thing that comes to mind is, sometimes people put constraints on themselves and, uh, those constraints will make the design more difficult, but anyone who attempts that sort of constraint and really pushes the creativity, they can end up with [00:04:00] something that feels special just because it looks unlike anything else you'll see on the web.
Mistakes designers commonly make in layout design
[00:04:04] Ridd: On the flip side. Are there shortcomings or even mistakes that you see designers commonly make when it comes to layout?
[00:04:12] Anthony: I mean, there's simple stuff that I see in a lot of new designers, like, uh, alignment and grouping. And so, if anyone's listening to this and they're new to design, then, um, I think avoiding those is always a good thing.
[00:04:25] Anthony: On a more complicated side, I often see that... High density in an interface or website Leads to visual confusion.
[00:04:32] Anthony: I think people want to pack as much as they can in I see this on application interfaces I see it on websites People get so invested in the design. They enjoy the process so much They want to communicate so many different things that they pack so many things into one view and That always feels like a problem to me because if you Look at a website or an application interface and you can't find your bearings. That's a huge problem.
[00:04:57] Anthony: Having said that, I think density is fine. [00:05:00] Some applications need density. It's just, it's, more skillful sort of task to add density and keep it so that you can find your place in interface.
[00:05:09] Anthony: I think more people, until they get to that level of skill, should avoid that, essentially. Um, dense interfaces. Because I'm not saying that dense interfaces can't be well designed. It's just, you're making your job much harder. And so maybe pull back on what you want to communicate. Try harder to actually communicate more with less.
Mistakes designers commonly make in layout design
[00:04:04] Ridd: On the flip side. Are there shortcomings or even mistakes that you see designers commonly make when it comes to layout?
[00:04:12] Anthony: I mean, there's simple stuff that I see in a lot of new designers, like, uh, alignment and grouping. And so, if anyone's listening to this and they're new to design, then, um, I think avoiding those is always a good thing.
[00:04:25] Anthony: On a more complicated side, I often see that... High density in an interface or website Leads to visual confusion.
[00:04:32] Anthony: I think people want to pack as much as they can in I see this on application interfaces I see it on websites People get so invested in the design. They enjoy the process so much They want to communicate so many different things that they pack so many things into one view and That always feels like a problem to me because if you Look at a website or an application interface and you can't find your bearings. That's a huge problem.
[00:04:57] Anthony: Having said that, I think density is fine. [00:05:00] Some applications need density. It's just, it's, more skillful sort of task to add density and keep it so that you can find your place in interface.
[00:05:09] Anthony: I think more people, until they get to that level of skill, should avoid that, essentially. Um, dense interfaces. Because I'm not saying that dense interfaces can't be well designed. It's just, you're making your job much harder. And so maybe pull back on what you want to communicate. Try harder to actually communicate more with less.
Typography rules followed by good designers
[00:05:25] Ridd: I'd like to switch to typography now. And I'm wondering what are some of the typography rules that you see good designers frequently following that maybe don't get explicitly talked about as much.
[00:05:40] Anthony: Dann Petty released a course at one point and spent a long time talking about widows
[00:05:45] Anthony: widows are when you've got some text that wraps onto more than one line, there's a word that gets its own line, basically and, uh, essentially it looks bad, right? It's something you can avoid by editing text, maybe not at every breakpoint, but you can give yourself a better chance, you know, by tweaking [00:06:00] it, checking the breakpoints, that sort of thing. Ever since I watched that video, I've been so aware of it, and, it's kind of a simple one you can avoid to just make text feel more balanced.
[00:06:09] Anthony: Although I know that the CSS spec has now included a balanced text option, which makes a lot of that designer doesn't need to worry about it so much.
[00:06:17] Anthony: The other thing comes to mind is um, bulleted lists.
[00:06:20] Anthony: I see people talking about things like hanging punctuation a lot. And I understand if you're just putting quotes around something and you have the quote marks hanging outside the margin. That means that the text lines up really nicely. But in my mind that text is part of a body text whereas a bulleted list, let's say you have some body text and you're saying And these are the five reasons we need to do this.
[00:06:41] Anthony: And then you have the numbered list below that. Some people say that you should hang the numbers on the bulleted list outside the margin, so that each of the five points also lines up with your body text. I'm actually not a fan of that because, just the bulleted [00:07:00] list is its own sort of self contained entity.
[00:07:02] Anthony: And so what I like to do is actually keep that indentation and shift the numbers over so that they are left aligned with the main body text. Just because I, I sort of like the visual break that the bulleted list represents. And um, I always feel like things hanging outside the margins feel a bit not neat to me.
[00:07:23] Anthony: If that makes sense.
[00:07:24] Anthony: I think one of the reasons that putting quote marks outside the margins is because the quote mark doesn't take up as much vertical height as a character, right? And so it creates this awkward little gap, visual gap, if you have it within the margins. But actually, if you have numbered, a numbered list, for example, then those numbers are full height.
[00:07:41] Anthony: And so it feels a bit stranger to have them hanging outside when having them indented sort of won't create the same, uh, same sort of visual gap. Anyway, you were going to say.
[00:07:51] Ridd: I like the differentiation. I hadn't, because that's what I do. I take the quote marks. I put them outside of the margin, but bulleted lists I [00:08:00] would leave inside. And I never really understood why I thought that looked better, but that logic makes a lot of sense to me. And it's funny that you'd bring up this bulleted list idea because it was something that I was dealing with. For my personal site, actually, back in the day, and it just never really looked right, and ultimately what I ended up doing was thinking about the bulleted list in a separate container and actually adding a border left and further indenting and kind of leaning into this separation, but then by putting the border on the left, it still kind of kept that strong left alignment through the page.
[00:08:35] Ridd: And I ended up liking it, but it kind of felt like throwing in the towel a little bit because I couldn't quite get the bullet points to just feel balanced on the page. So it's a good, it's a good call out.
Typography rules followed by good designers
[00:05:25] Ridd: I'd like to switch to typography now. And I'm wondering what are some of the typography rules that you see good designers frequently following that maybe don't get explicitly talked about as much.
[00:05:40] Anthony: Dann Petty released a course at one point and spent a long time talking about widows
[00:05:45] Anthony: widows are when you've got some text that wraps onto more than one line, there's a word that gets its own line, basically and, uh, essentially it looks bad, right? It's something you can avoid by editing text, maybe not at every breakpoint, but you can give yourself a better chance, you know, by tweaking [00:06:00] it, checking the breakpoints, that sort of thing. Ever since I watched that video, I've been so aware of it, and, it's kind of a simple one you can avoid to just make text feel more balanced.
[00:06:09] Anthony: Although I know that the CSS spec has now included a balanced text option, which makes a lot of that designer doesn't need to worry about it so much.
[00:06:17] Anthony: The other thing comes to mind is um, bulleted lists.
[00:06:20] Anthony: I see people talking about things like hanging punctuation a lot. And I understand if you're just putting quotes around something and you have the quote marks hanging outside the margin. That means that the text lines up really nicely. But in my mind that text is part of a body text whereas a bulleted list, let's say you have some body text and you're saying And these are the five reasons we need to do this.
[00:06:41] Anthony: And then you have the numbered list below that. Some people say that you should hang the numbers on the bulleted list outside the margin, so that each of the five points also lines up with your body text. I'm actually not a fan of that because, just the bulleted [00:07:00] list is its own sort of self contained entity.
[00:07:02] Anthony: And so what I like to do is actually keep that indentation and shift the numbers over so that they are left aligned with the main body text. Just because I, I sort of like the visual break that the bulleted list represents. And um, I always feel like things hanging outside the margins feel a bit not neat to me.
[00:07:23] Anthony: If that makes sense.
[00:07:24] Anthony: I think one of the reasons that putting quote marks outside the margins is because the quote mark doesn't take up as much vertical height as a character, right? And so it creates this awkward little gap, visual gap, if you have it within the margins. But actually, if you have numbered, a numbered list, for example, then those numbers are full height.
[00:07:41] Anthony: And so it feels a bit stranger to have them hanging outside when having them indented sort of won't create the same, uh, same sort of visual gap. Anyway, you were going to say.
[00:07:51] Ridd: I like the differentiation. I hadn't, because that's what I do. I take the quote marks. I put them outside of the margin, but bulleted lists I [00:08:00] would leave inside. And I never really understood why I thought that looked better, but that logic makes a lot of sense to me. And it's funny that you'd bring up this bulleted list idea because it was something that I was dealing with. For my personal site, actually, back in the day, and it just never really looked right, and ultimately what I ended up doing was thinking about the bulleted list in a separate container and actually adding a border left and further indenting and kind of leaning into this separation, but then by putting the border on the left, it still kind of kept that strong left alignment through the page.
[00:08:35] Ridd: And I ended up liking it, but it kind of felt like throwing in the towel a little bit because I couldn't quite get the bullet points to just feel balanced on the page. So it's a good, it's a good call out.
How to grow in font pairings
[00:08:48] Ridd: One of my biggest sources of imposter syndrome is font pairings and just not feeling confident enough to break from the norm and really try different [00:09:00] creative pairings. And so I feel like I. Maybe more so than other designers, or maybe everyone feels like this. I'm not sure. I feel like I choose conservative pairings.
[00:09:09] Ridd: And so I'd love to hear a little bit about how you think about it. If you're starting a new project, how do you think about font pairings and how have you trained your eye over time to improve your ability to just say, you know what, this looks good.
[00:09:25] Anthony: Yeah, so I, I tend to think about this and a lot of other visual design stuff, especially as the, all the methods I'd use as part of either easy mode or hard mode. And so easy mode is much easier to sort of pick up overnight and okay, I can use this method next time. And hard mode is, you know, several years of really hard work.
[00:09:44] Anthony: I'll start with easy mode , um, easy mode is generally to copy experts, and that's true for a lot of stuff, but it's definitely true for font pairings, because some people put so much time into this, and if we don't listen to them, then we're doing ourselves a disservice.
[00:09:57] Anthony: And so, what I mean by copy experts, for example, [00:10:00] is if you look for good examples of font pairings and just copy those that designer doesn't own that typeface combination, they happen to have discovered a good one, or they copied it from someone else.
[00:10:10] Anthony: But if you look at enough examples of good font pairing, then I think you, you can find one that really works for you and that you think really does fit your design. And then it won't be such a big sort of travesty that you steal it because actually you found the right one for you. So one website I really love, which I started posting again because it had a bit of a hiatus, is TypeWolf.
[00:10:32] Anthony: And so TypeWolf will send out an email, I think I get it once a week.
[00:10:36] Anthony: And they'll list, uh, maybe five or six websites they've found with great typography. And they also list the typefaces used on those websites, where you can buy them from and everything. And so just going through that TypeWolf email every week is a great source of good typography for me.
[00:10:54] Anthony: And so often if you focus on one foundry, one designer, you can find two typefaces they [00:11:00] designed that are supposed to work really well together. And so you don't have to put a lot of thought into, okay, how do I pair these two things? Because someone else has already put that thought in and said, I'm going to design a great sans serif and a great serif typeface.
[00:11:11] Anthony: That are designed to work well together, and so they've skipped all of the hard work for you. And so if you just even find a, type foundry that you really love, sells a lot of things, they'll probably, offer you good pairings out of the box, essentially. so if you, if you want a great font pairing the next day, essentially, that's a way you can do it.
[00:11:27] Anthony: And then we get onto hard mode, which is essentially, like, a lot of visual design stuff, is to immerse yourself. In, in typefaces, fonts, pairing, and everything. And so, we talked about those good examples before from Typewolf. If you actually study those in a lot more depth, rather than just trust that they're good, if you zoom in, and start to look at all the characters and how they compare, take the A from the, let's say it's a display title face, and then the A from the body typeface they've got, and if you really compare each of those same characters and start to think about why they work [00:12:00] together what similarities do they have, what contrasts do they have, if you do that over, let's say, a hundred pairings, I think you're going to start to see a lot of patterns at work that you can take to any typeface, like, Oh, I found this great body text.
[00:12:13] Anthony: Now I know what I should be looking for to pair that with a great serif for the display typeface
How to grow in font pairings
[00:08:48] Ridd: One of my biggest sources of imposter syndrome is font pairings and just not feeling confident enough to break from the norm and really try different [00:09:00] creative pairings. And so I feel like I. Maybe more so than other designers, or maybe everyone feels like this. I'm not sure. I feel like I choose conservative pairings.
[00:09:09] Ridd: And so I'd love to hear a little bit about how you think about it. If you're starting a new project, how do you think about font pairings and how have you trained your eye over time to improve your ability to just say, you know what, this looks good.
[00:09:25] Anthony: Yeah, so I, I tend to think about this and a lot of other visual design stuff, especially as the, all the methods I'd use as part of either easy mode or hard mode. And so easy mode is much easier to sort of pick up overnight and okay, I can use this method next time. And hard mode is, you know, several years of really hard work.
[00:09:44] Anthony: I'll start with easy mode , um, easy mode is generally to copy experts, and that's true for a lot of stuff, but it's definitely true for font pairings, because some people put so much time into this, and if we don't listen to them, then we're doing ourselves a disservice.
[00:09:57] Anthony: And so, what I mean by copy experts, for example, [00:10:00] is if you look for good examples of font pairings and just copy those that designer doesn't own that typeface combination, they happen to have discovered a good one, or they copied it from someone else.
[00:10:10] Anthony: But if you look at enough examples of good font pairing, then I think you, you can find one that really works for you and that you think really does fit your design. And then it won't be such a big sort of travesty that you steal it because actually you found the right one for you. So one website I really love, which I started posting again because it had a bit of a hiatus, is TypeWolf.
[00:10:32] Anthony: And so TypeWolf will send out an email, I think I get it once a week.
[00:10:36] Anthony: And they'll list, uh, maybe five or six websites they've found with great typography. And they also list the typefaces used on those websites, where you can buy them from and everything. And so just going through that TypeWolf email every week is a great source of good typography for me.
[00:10:54] Anthony: And so often if you focus on one foundry, one designer, you can find two typefaces they [00:11:00] designed that are supposed to work really well together. And so you don't have to put a lot of thought into, okay, how do I pair these two things? Because someone else has already put that thought in and said, I'm going to design a great sans serif and a great serif typeface.
[00:11:11] Anthony: That are designed to work well together, and so they've skipped all of the hard work for you. And so if you just even find a, type foundry that you really love, sells a lot of things, they'll probably, offer you good pairings out of the box, essentially. so if you, if you want a great font pairing the next day, essentially, that's a way you can do it.
[00:11:27] Anthony: And then we get onto hard mode, which is essentially, like, a lot of visual design stuff, is to immerse yourself. In, in typefaces, fonts, pairing, and everything. And so, we talked about those good examples before from Typewolf. If you actually study those in a lot more depth, rather than just trust that they're good, if you zoom in, and start to look at all the characters and how they compare, take the A from the, let's say it's a display title face, and then the A from the body typeface they've got, and if you really compare each of those same characters and start to think about why they work [00:12:00] together what similarities do they have, what contrasts do they have, if you do that over, let's say, a hundred pairings, I think you're going to start to see a lot of patterns at work that you can take to any typeface, like, Oh, I found this great body text.
[00:12:13] Anthony: Now I know what I should be looking for to pair that with a great serif for the display typeface
Visual rules surrounding color
[00:12:21] Ridd: you talk a lot about this difference between explicit rules and more tacit or implicit visual design rules and outside of like basic color accessibility requirements, in my opinion, color is kind of this visual pillar that has the least amount of explicitly defined visual rules that designers can follow.
[00:12:43] Ridd: And so what I'd love to learn about is what are some of the. More tacit pieces of knowledge that you've accumulated over the years as it relates to color.
[00:12:55] Anthony: Yeah, so a, a big one that I learned from this sort of random book I picked up about [00:13:00] visual design outside of interfaces. So if you've got a color palette that's got, you know, 10 different colors, and you've got, um, colors that are all sort of vying for the same space in terms of perceived brightness, they're much more likely to clash with each other and not look good. And so one thing I've learned to do is I'm putting together a palette with, let's say, four or five colors.
[00:13:19] Anthony: I'm going to want to change the brightness on each of them so that they look like they're different brightnesses. Another one is that I, I learned years ago never to use flat black.
[00:13:30] Anthony: And also I avoid flat white if I can.
[00:13:33] Anthony: White's okay because it's the brightest color. You often will get something that feels like bright white in nature just because there might be a lot of sunshine on it, for example. I, uh, try to avoid flat white as well. Blue is always good because blue is just so versatile. We see it in the sky, you know, it's a color that everyone can sort of Agree on And so I realized early on that if you use blue, you're pretty much safe
[00:13:56] Anthony: so you often see These sort of corporate websites use a dark blue just [00:14:00] because it is some color, right? They're not Extremely dull, but it's sort of the dullest color you can choose in some ways
[00:14:09] Anthony: On the opposite side of that is that yellow is basically a nightmare if you try to mix yellow with white For example, you're going to have a terrible time and it's usually because yellow is the sort of the the brightest, and so Making yellow work with other bright colors It's going to feel like they're clashing a lot of the time, so I try to avoid it.
[00:14:27] Anthony: And dark yellow is basically brown and so, just yellow as a whole, the brighter versions and the darker versions, they're hard to work with. If I'm looking for a sort of yellowy colour, I'll actually move it more towards orange, because you've still got the brown at the darker end, but um, lighter yellow is a bit warmer, it's a bit less bright
[00:14:45] Anthony: the last thing that comes to mind is more of a sort of color strategy, like the approach you use for, especially an interface. You get colors that are connotative and colors that are denotive, and connotative colors are there because they have some association with some meaning, [00:15:00] right? Culture has decided that red means danger. And so red is a connotative color in terms of its associations with things like danger and blood and warning. Then denotive colors are things that you as the designer have the sort of meaning you've placed on those colors. And so a classic example is red means delete. So Red is used as its denoted color in the interface to mean this is what this sort of color relates to. And I generally found that if you want to use color in an expressive way, you should try to focus either on connotative color or denotative color and not try to mix the two. I basically try to avoid that situation as much as possible. And as much as possible I try to stick to denotive colours because then colour becomes this really useful practical tool rather than something sort of wishy washy that you have to hope that the audience understands and picks up on.
Visual rules surrounding color
[00:12:21] Ridd: you talk a lot about this difference between explicit rules and more tacit or implicit visual design rules and outside of like basic color accessibility requirements, in my opinion, color is kind of this visual pillar that has the least amount of explicitly defined visual rules that designers can follow.
[00:12:43] Ridd: And so what I'd love to learn about is what are some of the. More tacit pieces of knowledge that you've accumulated over the years as it relates to color.
[00:12:55] Anthony: Yeah, so a, a big one that I learned from this sort of random book I picked up about [00:13:00] visual design outside of interfaces. So if you've got a color palette that's got, you know, 10 different colors, and you've got, um, colors that are all sort of vying for the same space in terms of perceived brightness, they're much more likely to clash with each other and not look good. And so one thing I've learned to do is I'm putting together a palette with, let's say, four or five colors.
[00:13:19] Anthony: I'm going to want to change the brightness on each of them so that they look like they're different brightnesses. Another one is that I, I learned years ago never to use flat black.
[00:13:30] Anthony: And also I avoid flat white if I can.
[00:13:33] Anthony: White's okay because it's the brightest color. You often will get something that feels like bright white in nature just because there might be a lot of sunshine on it, for example. I, uh, try to avoid flat white as well. Blue is always good because blue is just so versatile. We see it in the sky, you know, it's a color that everyone can sort of Agree on And so I realized early on that if you use blue, you're pretty much safe
[00:13:56] Anthony: so you often see These sort of corporate websites use a dark blue just [00:14:00] because it is some color, right? They're not Extremely dull, but it's sort of the dullest color you can choose in some ways
[00:14:09] Anthony: On the opposite side of that is that yellow is basically a nightmare if you try to mix yellow with white For example, you're going to have a terrible time and it's usually because yellow is the sort of the the brightest, and so Making yellow work with other bright colors It's going to feel like they're clashing a lot of the time, so I try to avoid it.
[00:14:27] Anthony: And dark yellow is basically brown and so, just yellow as a whole, the brighter versions and the darker versions, they're hard to work with. If I'm looking for a sort of yellowy colour, I'll actually move it more towards orange, because you've still got the brown at the darker end, but um, lighter yellow is a bit warmer, it's a bit less bright
[00:14:45] Anthony: the last thing that comes to mind is more of a sort of color strategy, like the approach you use for, especially an interface. You get colors that are connotative and colors that are denotive, and connotative colors are there because they have some association with some meaning, [00:15:00] right? Culture has decided that red means danger. And so red is a connotative color in terms of its associations with things like danger and blood and warning. Then denotive colors are things that you as the designer have the sort of meaning you've placed on those colors. And so a classic example is red means delete. So Red is used as its denoted color in the interface to mean this is what this sort of color relates to. And I generally found that if you want to use color in an expressive way, you should try to focus either on connotative color or denotative color and not try to mix the two. I basically try to avoid that situation as much as possible. And as much as possible I try to stick to denotive colours because then colour becomes this really useful practical tool rather than something sort of wishy washy that you have to hope that the audience understands and picks up on.
Visual techniques to consider for the designer's tool belt
[00:15:51] Ridd: What are some of the visual techniques that you've most recently added to your own personal tool belt?[00:16:00]
[00:16:00] Anthony: I see things on websites where someone will intentionally lay out elements on the page, so they create a shape that points you towards the next section but then some designers are taking it to the next level where they're using those visual sprinkles to create this broader shape, for example an arrow, but it's like a very subtle sort of arrow shape, leading your eye to the next thing, and so they're relying on them both for visual interest and To sort of guide your eye downwards.
[00:16:23] Anthony: I really enjoy that sort of two pronged approach you're doing more with less
[00:16:28] Anthony: another one I've really enjoyed, uh, let's call them stepped background transitions.
[00:16:32] Anthony: And so often we see either an immediate background transition or quite a gentle background transition. Let's say you're going from black to white. Often you'll have this sort of dark mode section, then a light mode section. And one thing I really enjoy is to make the transition between those two colors a bit more of a star of the show, and you don't do that with a subtle sort of gradient fade, but you do it with these stepped increases or decreases of brightness.
[00:16:57] Anthony: And so I've seen this done vertically, where you have [00:17:00] these bands of black, like a, let's say it's going from black to white, you have these bands of essentially gray that are getting lighter and lighter. And then I've seen it actually done horizontally as well, where someone's taken, let's say a strip across the website, and they've cut that into blocks that get horizontally brighter until you get to the white.
[00:17:17] Anthony: And so it's this really nice technique because it draws your attention to the transition in a way that still feels quite nicely transitioning, if that makes sense. And so it feels a bit more intentional, it shows that you're putting some love into every small detail of the website, where most people would just have this immediate sort of color switch.
[00:17:35] Ridd: I really like when sites have a white background and you feel that you're on a white background and then all of a sudden you're looking at white cards, but they have an increased contrast on the background and all of a sudden the background is like this softer. And you don't actually know when it changed.
[00:17:54] Ridd: You only recognize it because all of a sudden that contrast has been introduced. I, [00:18:00] it's, it's somewhat similar. I like how you're actually saying like, how can you take that idea, but almost make it the star of the show instead of something that happened behind the scenes almost, and I'm definitely gonna have to look out for that more in the wild now.
[00:18:18] Anthony: Yeah. 'cause it feels like you can either make something super subtle like you're saying, or make it the star of the show. It feels like the problems really come in the middle of that spectrum where you're saying this, this is gonna be noticeable enough that people actually pay attention to it. But I haven't put much thought into it.
[00:18:30] Anthony: That's sort of the worst of both worlds. You either want to people to notice it and it to be. Really intentional, or for people not to notice it, but to have that same effect. And I've been in situations where I've been scrolling down a website, and I thought the background was white. And like you're saying, it started out white, but by the end it was this very subtle grey.
[00:18:49] Anthony: And I knew that because I was seeing this pure white field, let's say, on top of the footer. And that's always a pleasant surprise for me as a designer. I'm sure some people don't even notice, but it's a nice [00:19:00] technique.
[00:19:01] Anthony: One that I saw on Twitter that really sort of blew my mind, because I hadn't even thought about it, was Someone pointed out that if you have an object or an element with, let's say, two different background colours, you could try to find a shade of grey as a border for that container that has good contrast with both.
[00:19:17] Anthony: But generally, one of those background colours is going to be lighter than the other, and so the grey you find, or the black you find, whatever, that has good contrast with one colour, might have contrast that's too high with the other one. And so they pointed out, if you basically take a 10% opacity black border, Then you'll have good contrast with both colors, because suddenly it's see through, it's letting through some of the color, but it's just making them darker.
[00:19:41] Ridd: If you have just a single color with a transparent border, that's not that hard to code. I am a huge fan of transparent borders. I think that it's
[00:19:51] Anthony: Um,
[00:19:51] Ridd: pretty easy for us to like get inspired on Twitter and then throw some like radial gradient border at a developer. And they're just like, this is not how this [00:20:00] works.
[00:20:00] Ridd: Like you're, you need to, you need to help me think through this a little bit more. Um, but definitely a big fan of, of the transparent borders. I find myself using that a lot.
Visual techniques to consider for the designer's tool belt
[00:15:51] Ridd: What are some of the visual techniques that you've most recently added to your own personal tool belt?[00:16:00]
[00:16:00] Anthony: I see things on websites where someone will intentionally lay out elements on the page, so they create a shape that points you towards the next section but then some designers are taking it to the next level where they're using those visual sprinkles to create this broader shape, for example an arrow, but it's like a very subtle sort of arrow shape, leading your eye to the next thing, and so they're relying on them both for visual interest and To sort of guide your eye downwards.
[00:16:23] Anthony: I really enjoy that sort of two pronged approach you're doing more with less
[00:16:28] Anthony: another one I've really enjoyed, uh, let's call them stepped background transitions.
[00:16:32] Anthony: And so often we see either an immediate background transition or quite a gentle background transition. Let's say you're going from black to white. Often you'll have this sort of dark mode section, then a light mode section. And one thing I really enjoy is to make the transition between those two colors a bit more of a star of the show, and you don't do that with a subtle sort of gradient fade, but you do it with these stepped increases or decreases of brightness.
[00:16:57] Anthony: And so I've seen this done vertically, where you have [00:17:00] these bands of black, like a, let's say it's going from black to white, you have these bands of essentially gray that are getting lighter and lighter. And then I've seen it actually done horizontally as well, where someone's taken, let's say a strip across the website, and they've cut that into blocks that get horizontally brighter until you get to the white.
[00:17:17] Anthony: And so it's this really nice technique because it draws your attention to the transition in a way that still feels quite nicely transitioning, if that makes sense. And so it feels a bit more intentional, it shows that you're putting some love into every small detail of the website, where most people would just have this immediate sort of color switch.
[00:17:35] Ridd: I really like when sites have a white background and you feel that you're on a white background and then all of a sudden you're looking at white cards, but they have an increased contrast on the background and all of a sudden the background is like this softer. And you don't actually know when it changed.
[00:17:54] Ridd: You only recognize it because all of a sudden that contrast has been introduced. I, [00:18:00] it's, it's somewhat similar. I like how you're actually saying like, how can you take that idea, but almost make it the star of the show instead of something that happened behind the scenes almost, and I'm definitely gonna have to look out for that more in the wild now.
[00:18:18] Anthony: Yeah. 'cause it feels like you can either make something super subtle like you're saying, or make it the star of the show. It feels like the problems really come in the middle of that spectrum where you're saying this, this is gonna be noticeable enough that people actually pay attention to it. But I haven't put much thought into it.
[00:18:30] Anthony: That's sort of the worst of both worlds. You either want to people to notice it and it to be. Really intentional, or for people not to notice it, but to have that same effect. And I've been in situations where I've been scrolling down a website, and I thought the background was white. And like you're saying, it started out white, but by the end it was this very subtle grey.
[00:18:49] Anthony: And I knew that because I was seeing this pure white field, let's say, on top of the footer. And that's always a pleasant surprise for me as a designer. I'm sure some people don't even notice, but it's a nice [00:19:00] technique.
[00:19:01] Anthony: One that I saw on Twitter that really sort of blew my mind, because I hadn't even thought about it, was Someone pointed out that if you have an object or an element with, let's say, two different background colours, you could try to find a shade of grey as a border for that container that has good contrast with both.
[00:19:17] Anthony: But generally, one of those background colours is going to be lighter than the other, and so the grey you find, or the black you find, whatever, that has good contrast with one colour, might have contrast that's too high with the other one. And so they pointed out, if you basically take a 10% opacity black border, Then you'll have good contrast with both colors, because suddenly it's see through, it's letting through some of the color, but it's just making them darker.
[00:19:41] Ridd: If you have just a single color with a transparent border, that's not that hard to code. I am a huge fan of transparent borders. I think that it's
[00:19:51] Anthony: Um,
[00:19:51] Ridd: pretty easy for us to like get inspired on Twitter and then throw some like radial gradient border at a developer. And they're just like, this is not how this [00:20:00] works.
[00:20:00] Ridd: Like you're, you need to, you need to help me think through this a little bit more. Um, but definitely a big fan of, of the transparent borders. I find myself using that a lot.
How to incorporate gradient easing
[00:20:07] Anthony: Another one that I think I learned from Twitter was gradient easing. Once someone introduced gradient easing to my life, I realized that all other gradients look awful. But let's say you have a gradient that goes from... Um, if you just have those two gradient stops on either end in your design software and you're letting the design software choose how the black fades to white, you're going to end up with quite a sharp line at the center point.
[00:20:34] Anthony: And so some people go far enough with gradient easing that they put, you know, let's say eight gradient stops in there and they manually tweak them. So that transition from black to white is visually extremely smooth. And you don't notice the point at which it switches. And, um, I think I like it because it's so much extra effort.
[00:20:53] Anthony: Uh, that if you really want to put that effort in, and you've got the time, and you've got the sort of political support from the people around you, then you can do, and [00:21:00] that's one of the ways you can go even further with your visual design, to make your gradients, in a completely unnoticeable way, that much more visually pleasing.
[00:21:08] Ridd: I remember where I was when I first read, I believe it was Eric Kennedy. He was the first person that I saw to share this, the gradient easing idea. And he had this really nice visual that maybe we'll even link to in the show notes where Almost any gradient, if it's only two stops, it's basically going to pass through this muddy Brown Valley at all times.
[00:21:31] Ridd: And so all you're really doing with the easing is creating this circumventing path around that muddy. Brown valley. And as soon as I saw that image, I was like, man, that makes so much sense. And putting the side by side and seeing how much more vibrant this gradient with, you know, six or eight different color stops versus just the two was again, though, it's comes down to, do you have that kind of relationship with your product team and your developers?
[00:21:57] Ridd: Like, are you just going to piss people off by [00:22:00] having eight different stops and all of these different hex codes in your gradient, sometimes that's a little hard
[00:22:05] Anthony: Yeah, you need some understanding. And yeah, that's why I was focused on just black and white gradients, because if you start introducing color, then suddenly you're sort of playing with the whole color wheel. That becomes probably even more time. So yeah, you could do it on brightness. You can also do it on hue and maybe you're introducing 1 or 2% extra enjoyment into the gradient, if that makes sense.
[00:22:25] Anthony: But you're taking probably 200% the amount of time you would have taken to just choose two colours, or two brightness points or whatever, and just go with it.
[00:22:34] Ridd: Well, it reminds me of something that you said on your website, where you said good designers don't stop when they're happy. They stop when it's perfect. And this would be an example of that in my opinion, but I'm kind of wondering, like, what would you say to someone who doesn't feel like they have the political support like that?
[00:22:51] Ridd: And, They don't have the buy in internally to pursue that level of perfection and really getting that like [00:23:00] final two to 3% in these gradients as an example. Do you have any advice for someone in that situation? Or maybe you've even felt yourself in that situation in the past.
[00:23:09] Anthony: One way I think about it is that you want to essentially find your local maximum. And so, whatever you're working on, there are some things that you can't really... do because you know you don't have the time, you don't have the resources, whatever but there's probably always something slightly more that you can do with the developers you have, or that work with with the tools you have at your disposal, with the time you have, with the assets you can use and everything.
[00:23:32] Anthony: There's probably always something like this gradient easing that is actually purely up to the designer as long as you can get the developers building it to agree to it. The things within your power. You can really focus on them and say, for what I am designing this is the best possible version, even if I'm not allowed to design something different. And so I always like to believe optimistically that there is a way to improve what you are actually working on, rather than trying to work on something different.
How to incorporate gradient easing
[00:20:07] Anthony: Another one that I think I learned from Twitter was gradient easing. Once someone introduced gradient easing to my life, I realized that all other gradients look awful. But let's say you have a gradient that goes from... Um, if you just have those two gradient stops on either end in your design software and you're letting the design software choose how the black fades to white, you're going to end up with quite a sharp line at the center point.
[00:20:34] Anthony: And so some people go far enough with gradient easing that they put, you know, let's say eight gradient stops in there and they manually tweak them. So that transition from black to white is visually extremely smooth. And you don't notice the point at which it switches. And, um, I think I like it because it's so much extra effort.
[00:20:53] Anthony: Uh, that if you really want to put that effort in, and you've got the time, and you've got the sort of political support from the people around you, then you can do, and [00:21:00] that's one of the ways you can go even further with your visual design, to make your gradients, in a completely unnoticeable way, that much more visually pleasing.
[00:21:08] Ridd: I remember where I was when I first read, I believe it was Eric Kennedy. He was the first person that I saw to share this, the gradient easing idea. And he had this really nice visual that maybe we'll even link to in the show notes where Almost any gradient, if it's only two stops, it's basically going to pass through this muddy Brown Valley at all times.
[00:21:31] Ridd: And so all you're really doing with the easing is creating this circumventing path around that muddy. Brown valley. And as soon as I saw that image, I was like, man, that makes so much sense. And putting the side by side and seeing how much more vibrant this gradient with, you know, six or eight different color stops versus just the two was again, though, it's comes down to, do you have that kind of relationship with your product team and your developers?
[00:21:57] Ridd: Like, are you just going to piss people off by [00:22:00] having eight different stops and all of these different hex codes in your gradient, sometimes that's a little hard
[00:22:05] Anthony: Yeah, you need some understanding. And yeah, that's why I was focused on just black and white gradients, because if you start introducing color, then suddenly you're sort of playing with the whole color wheel. That becomes probably even more time. So yeah, you could do it on brightness. You can also do it on hue and maybe you're introducing 1 or 2% extra enjoyment into the gradient, if that makes sense.
[00:22:25] Anthony: But you're taking probably 200% the amount of time you would have taken to just choose two colours, or two brightness points or whatever, and just go with it.
[00:22:34] Ridd: Well, it reminds me of something that you said on your website, where you said good designers don't stop when they're happy. They stop when it's perfect. And this would be an example of that in my opinion, but I'm kind of wondering, like, what would you say to someone who doesn't feel like they have the political support like that?
[00:22:51] Ridd: And, They don't have the buy in internally to pursue that level of perfection and really getting that like [00:23:00] final two to 3% in these gradients as an example. Do you have any advice for someone in that situation? Or maybe you've even felt yourself in that situation in the past.
[00:23:09] Anthony: One way I think about it is that you want to essentially find your local maximum. And so, whatever you're working on, there are some things that you can't really... do because you know you don't have the time, you don't have the resources, whatever but there's probably always something slightly more that you can do with the developers you have, or that work with with the tools you have at your disposal, with the time you have, with the assets you can use and everything.
[00:23:32] Anthony: There's probably always something like this gradient easing that is actually purely up to the designer as long as you can get the developers building it to agree to it. The things within your power. You can really focus on them and say, for what I am designing this is the best possible version, even if I'm not allowed to design something different. And so I always like to believe optimistically that there is a way to improve what you are actually working on, rather than trying to work on something different.
How to think about "breaking" visual design rules
[00:23:59] Ridd: Another [00:24:00] thing you said in your website that really resonated with me is you said, if you want to make your mark on visual design, do it with the confident knowledge of the rules that you have broken. And that kind of made me
[00:24:11] Ridd: curious,
[00:24:13] Anthony: Hmm
[00:24:13] Ridd: what visual design rules do you find yourself most often breaking?
[00:24:21] Anthony: First of all, I'm loving these quotes because they sound great to me and I don't remember saying them at all. So you know more
[00:24:26] Ridd: I wrote down like 10 of them, like, not
[00:24:30] Ridd: even for this conversation. I just wrote them down and stuffed them in my journal. And I was like, I'm coming back to these later.
[00:24:36] Anthony: Yeah, I don't remember saying any of this, but I'm glad I did because it sounds good. Um, so I think the way I think about rules is that visual design, especially is essentially rules all the way down. And so it's weird for me to think about breaking rules in that way, because I don't think I actually break any rules.
[00:24:54] Anthony: I think I ignore one rule and follow another. And so instead, I'll probably tell you some things that I [00:25:00] do that are often going against the norm because I suspect the norm is like the. People following the most sort of common rules, if that makes sense. Um, so one thing I really love, which I sort of touched on when we talk about color is I love to use as few colors as possible.
[00:25:16] Anthony: And I think people get excited, especially because they get access to these big color palettes with 10 different shades or 10 different hues. And then each hue has, you know, 20 shades or whatever. And what I like to do instead is I like to use like, uh, A black, a white, and just one color. And if you do that, and if you can stick with it, then the color you're using has so much more impact that your website or your interface is immediately more impactful, more bold.
[00:25:41] Anthony: It's much more striking. Whereas actually introducing more color is making the visual style softer in many ways because you've got so many different sort of visually appealing things clashing with each other. They sort of average out to something relatively bland. Whereas if you just use black, white, and one color, even if it's blue.[00:26:00]
[00:26:00] Anthony: Uh, especially if you do things like use hard corners, then you're sort of avoiding some of the things that people most often do, but you're making a much more impactful design. And I really enjoy seeing that in the world because you know that the person who designed it has given themselves these constraints, worked with them, they've done some more creative things with it.
[00:26:16] Anthony: And so, uh, that's one thing I really enjoy is not more but less. Uh, I think it's too easy to use more overall. And, um, I guess along similar lines is I try to constrain myself in quite extreme ways. And so I already talked about this with the, the one column layout. And I've actually spent some time studying the idea of just using one column and how you could sort of, what patterns are available to you if you only use one column that still make the website, whatever it is, visually interesting.
[00:26:44] Anthony: And so that's sort of really arbitrary, but also extreme constraint, I think. It doesn't only make you a better designer because it forces you to think more creatively, but it, like I say, it makes for a more interesting design in the end, assuming you put the time in that you would have into a more complicated [00:27:00] layout, for example.
[00:27:01] Anthony: Just because you're doing something that people won't often see, and so you're just standing out purely on the basis of unusualness, which is not a word, but I hope you get the point.
How to think about "breaking" visual design rules
[00:23:59] Ridd: Another [00:24:00] thing you said in your website that really resonated with me is you said, if you want to make your mark on visual design, do it with the confident knowledge of the rules that you have broken. And that kind of made me
[00:24:11] Ridd: curious,
[00:24:13] Anthony: Hmm
[00:24:13] Ridd: what visual design rules do you find yourself most often breaking?
[00:24:21] Anthony: First of all, I'm loving these quotes because they sound great to me and I don't remember saying them at all. So you know more
[00:24:26] Ridd: I wrote down like 10 of them, like, not
[00:24:30] Ridd: even for this conversation. I just wrote them down and stuffed them in my journal. And I was like, I'm coming back to these later.
[00:24:36] Anthony: Yeah, I don't remember saying any of this, but I'm glad I did because it sounds good. Um, so I think the way I think about rules is that visual design, especially is essentially rules all the way down. And so it's weird for me to think about breaking rules in that way, because I don't think I actually break any rules.
[00:24:54] Anthony: I think I ignore one rule and follow another. And so instead, I'll probably tell you some things that I [00:25:00] do that are often going against the norm because I suspect the norm is like the. People following the most sort of common rules, if that makes sense. Um, so one thing I really love, which I sort of touched on when we talk about color is I love to use as few colors as possible.
[00:25:16] Anthony: And I think people get excited, especially because they get access to these big color palettes with 10 different shades or 10 different hues. And then each hue has, you know, 20 shades or whatever. And what I like to do instead is I like to use like, uh, A black, a white, and just one color. And if you do that, and if you can stick with it, then the color you're using has so much more impact that your website or your interface is immediately more impactful, more bold.
[00:25:41] Anthony: It's much more striking. Whereas actually introducing more color is making the visual style softer in many ways because you've got so many different sort of visually appealing things clashing with each other. They sort of average out to something relatively bland. Whereas if you just use black, white, and one color, even if it's blue.[00:26:00]
[00:26:00] Anthony: Uh, especially if you do things like use hard corners, then you're sort of avoiding some of the things that people most often do, but you're making a much more impactful design. And I really enjoy seeing that in the world because you know that the person who designed it has given themselves these constraints, worked with them, they've done some more creative things with it.
[00:26:16] Anthony: And so, uh, that's one thing I really enjoy is not more but less. Uh, I think it's too easy to use more overall. And, um, I guess along similar lines is I try to constrain myself in quite extreme ways. And so I already talked about this with the, the one column layout. And I've actually spent some time studying the idea of just using one column and how you could sort of, what patterns are available to you if you only use one column that still make the website, whatever it is, visually interesting.
[00:26:44] Anthony: And so that's sort of really arbitrary, but also extreme constraint, I think. It doesn't only make you a better designer because it forces you to think more creatively, but it, like I say, it makes for a more interesting design in the end, assuming you put the time in that you would have into a more complicated [00:27:00] layout, for example.
[00:27:01] Anthony: Just because you're doing something that people won't often see, and so you're just standing out purely on the basis of unusualness, which is not a word, but I hope you get the point.
Building a personal website
[00:27:14] Ridd: Did you give yourself constraints like that for your own personal site? Like, how did you come about the design that ultimately was your website and how does that like reflect your own personal style and maybe like how that is involved over time?
[00:27:34] Anthony: I've always admired people who have basically text only websites as designers because clearly they've made it so far in their career that they don't need to show that they're a good visual designer anymore. So that was one reason I picked that up because I thought... Now is the time. I could probably rely on my Twitter following to get me a job. I've not tested that. Uh, I'm hoping it's true one day. But I just got sick of trying to make my website look better and better.
[00:27:58] Anthony: And I wanted to build the website [00:28:00] I wanted to build. Partly because I write them from scratch with HTML CSS. They're all completely static. There's no CMS. I do it all by uploading files to a FTP server. And, uh, that's because I really enjoy that sense of, again, it's quite an extreme constraint, but I really enjoy that sense of being in full control.
[00:28:17] Anthony: And it also helps me learn HTML, CSS. And so mainly the thing there was I wanted to take it even further than some people who have text only websites and use column and only one typeface size, even though I do use more than one typeface weight because I needed something to differentiate the headings apart from the, I put heading tags in there in front of each heading. And so I needed some, something so that people could quickly scan down a page and get a sense of the structure, but I definitely took it too far on purpose.
[00:28:49] Ridd: You mentioned learning HTML, CSS as giving you an understanding of the materials. Your designs are ultimately going to be built with. Can you unpack that a little bit more? Like in what ways does having that [00:29:00] knowledge change how you ultimately will create these visual designs and what you actually ship at the end of the day?
[00:29:10] Anthony: Yeah, so hopefully I annoy developers less because I have a better understanding of what they're working with. I can imagine a furniture designer learning a lot about how wood works In terms of the grain I'm essentially saying is that if you learn what the people you're working with are working with, then you're going to have a better working relationship. And so I've always seen value in knowing some HTML and CSS, even though I don't think it's necessary for designers to have to learn how to code.
[00:29:37] Anthony: But on top of that, just getting a sense of how the web especially is constructed in terms of the block model, the box model, means that You can start to think about how to sort of construct visual designs in a more systematic way. And that both makes it easier to design something that will eventually be successful, [00:30:00] uh, makes it easier to design something that will be flexible on the modern web with different, you know, breakpoints and everything.
[00:30:06] Anthony: And so knowing all these things really affects how you put the visual design together in the first place. Which is a good thing. Actually, there's a sort of flip side to that in which... I've realized that knowing more about the materials I'm working with is probably constraining me in some ways that maybe isn't ideal.
[00:30:22] Anthony: And so I generally avoid certain visual design approaches just because I know, oh wait, this will be really hard to code. I don't want to annoy the people I work with. So I'm going to keep it relatively simple in this way. And so I think if you can understand the material you're working with in HTML and CSS, but also still retain that sense of, I should push the boundaries, and then check with the developers whether they're happy with it, I think that's the sort of best of all worlds.
Building a personal website
[00:27:14] Ridd: Did you give yourself constraints like that for your own personal site? Like, how did you come about the design that ultimately was your website and how does that like reflect your own personal style and maybe like how that is involved over time?
[00:27:34] Anthony: I've always admired people who have basically text only websites as designers because clearly they've made it so far in their career that they don't need to show that they're a good visual designer anymore. So that was one reason I picked that up because I thought... Now is the time. I could probably rely on my Twitter following to get me a job. I've not tested that. Uh, I'm hoping it's true one day. But I just got sick of trying to make my website look better and better.
[00:27:58] Anthony: And I wanted to build the website [00:28:00] I wanted to build. Partly because I write them from scratch with HTML CSS. They're all completely static. There's no CMS. I do it all by uploading files to a FTP server. And, uh, that's because I really enjoy that sense of, again, it's quite an extreme constraint, but I really enjoy that sense of being in full control.
[00:28:17] Anthony: And it also helps me learn HTML, CSS. And so mainly the thing there was I wanted to take it even further than some people who have text only websites and use column and only one typeface size, even though I do use more than one typeface weight because I needed something to differentiate the headings apart from the, I put heading tags in there in front of each heading. And so I needed some, something so that people could quickly scan down a page and get a sense of the structure, but I definitely took it too far on purpose.
[00:28:49] Ridd: You mentioned learning HTML, CSS as giving you an understanding of the materials. Your designs are ultimately going to be built with. Can you unpack that a little bit more? Like in what ways does having that [00:29:00] knowledge change how you ultimately will create these visual designs and what you actually ship at the end of the day?
[00:29:10] Anthony: Yeah, so hopefully I annoy developers less because I have a better understanding of what they're working with. I can imagine a furniture designer learning a lot about how wood works In terms of the grain I'm essentially saying is that if you learn what the people you're working with are working with, then you're going to have a better working relationship. And so I've always seen value in knowing some HTML and CSS, even though I don't think it's necessary for designers to have to learn how to code.
[00:29:37] Anthony: But on top of that, just getting a sense of how the web especially is constructed in terms of the block model, the box model, means that You can start to think about how to sort of construct visual designs in a more systematic way. And that both makes it easier to design something that will eventually be successful, [00:30:00] uh, makes it easier to design something that will be flexible on the modern web with different, you know, breakpoints and everything.
[00:30:06] Anthony: And so knowing all these things really affects how you put the visual design together in the first place. Which is a good thing. Actually, there's a sort of flip side to that in which... I've realized that knowing more about the materials I'm working with is probably constraining me in some ways that maybe isn't ideal.
[00:30:22] Anthony: And so I generally avoid certain visual design approaches just because I know, oh wait, this will be really hard to code. I don't want to annoy the people I work with. So I'm going to keep it relatively simple in this way. And so I think if you can understand the material you're working with in HTML and CSS, but also still retain that sense of, I should push the boundaries, and then check with the developers whether they're happy with it, I think that's the sort of best of all worlds.
Becoming an expert as a self-taught designer
[00:30:47] Ridd: We've talked a lot about all these different skills that you bring to the table, whether it's these like visual principles, HTML, CSS. Understanding what makes a good user experience. And I'd like to kind of zoom out [00:31:00] and rewind a little bit, because something that I admire about you is you, you bring all this knowledge to the table, but you're a self taught designer.
[00:31:07] Ridd: You don't have this formal design background. And so what I'd love to learn a little bit more about is where did visual design fit into the broader learning journey that you had to go on to get where you are today?
[00:31:25] Anthony: I basically joined a software company not being interested in design in general, and they gave me a chance to design some features or some changes to that software. Uh, which is extremely lucky for me. And, uh, and so I took it on and I realized I really enjoyed it. And at that point I started buying books and didn't stop. So I read whatever design books I get my hands on and I learned a lot from those. But I quickly realized that I wanted to make my designs look better And I couldn't find many books about good visual design.
[00:31:52] Anthony: I think that's mainly because visual designers have so much of this tacit implicit knowledge, and it's actually really hard to write that stuff down [00:32:00] and So they're sort of relying on their intuition a lot more on how things feel and that's valid. But if you want to learn that from scratch, especially if you are sort of very rural focused like I am, then the lack of good books about visual design is, uh, well to me it was extremely annoying. I started learning everything I could from anywhere I could about visual design, and that's what led me to start writing this stuff down. 'cause I thought there's this huge gap. Not necessarily a commercial gap, although it is, but there's this huge gap in the sort of knowledge market in terms of people who want to learn this and don't realize that one of the ways they could do it is just look at good visual design for years, right?
[00:32:35] Anthony: If they want to do it by explicit learning, there's not much for them. And so that annoyed me. And so I started learning as much as I could. And, um, yeah, ironically, not ironically, but that sort of led me to this very rule based approach to visual design, which is quite unique. I realized. In terms of how people learn and talk about visual design.
[00:32:56] Anthony: So I'm quite glad for all that anger I felt at the start of my career.
Becoming an expert as a self-taught designer
[00:30:47] Ridd: We've talked a lot about all these different skills that you bring to the table, whether it's these like visual principles, HTML, CSS. Understanding what makes a good user experience. And I'd like to kind of zoom out [00:31:00] and rewind a little bit, because something that I admire about you is you, you bring all this knowledge to the table, but you're a self taught designer.
[00:31:07] Ridd: You don't have this formal design background. And so what I'd love to learn a little bit more about is where did visual design fit into the broader learning journey that you had to go on to get where you are today?
[00:31:25] Anthony: I basically joined a software company not being interested in design in general, and they gave me a chance to design some features or some changes to that software. Uh, which is extremely lucky for me. And, uh, and so I took it on and I realized I really enjoyed it. And at that point I started buying books and didn't stop. So I read whatever design books I get my hands on and I learned a lot from those. But I quickly realized that I wanted to make my designs look better And I couldn't find many books about good visual design.
[00:31:52] Anthony: I think that's mainly because visual designers have so much of this tacit implicit knowledge, and it's actually really hard to write that stuff down [00:32:00] and So they're sort of relying on their intuition a lot more on how things feel and that's valid. But if you want to learn that from scratch, especially if you are sort of very rural focused like I am, then the lack of good books about visual design is, uh, well to me it was extremely annoying. I started learning everything I could from anywhere I could about visual design, and that's what led me to start writing this stuff down. 'cause I thought there's this huge gap. Not necessarily a commercial gap, although it is, but there's this huge gap in the sort of knowledge market in terms of people who want to learn this and don't realize that one of the ways they could do it is just look at good visual design for years, right?
[00:32:35] Anthony: If they want to do it by explicit learning, there's not much for them. And so that annoyed me. And so I started learning as much as I could. And, um, yeah, ironically, not ironically, but that sort of led me to this very rule based approach to visual design, which is quite unique. I realized. In terms of how people learn and talk about visual design.
[00:32:56] Anthony: So I'm quite glad for all that anger I felt at the start of my career.
Deep Dives
Get every episode
Free lessons from the top designers 👇
Fonz Morris
Lead monetization designer @ Netflix
Mia Blume
Past leader @ Pinterest, Square
Jorn van Dijk
CEO @ Framer
Femke
Design lead @ Gusto
Kenny Chen
UX lead @ Google
Join 6K+ designers
HC
HC
HC
HC
Ⓒ Dive 2023
