If you’re a developer that’s ever been pressed to complete a project on your own, or with a small team, you’ll know the anxiety that comes with making design decisions for a project that doesn’t have art direction or UI design support. Especially for Armies of One, this request can feel overwhelming if your strength is in coding. This week Aaron and Michael share advice, tips, and tools that can help you close the gap and make safe, smart design choices.
Followup Resources
- 21 unique places to find web design inspiration
- Adobe Color
- Beginner design tips for developers with no design background.
- Behance Web Design gallery
- ColorBox
- Design For Developers
- Designing for developers
- Design Principles for Developers: Processes and CSS Tips for Better Web Design
- Design tips all developers should keep in mind
- Design tips for developers
- Flaticon
- FontAwesome
- How to Approach Design for Developers
- Material Design Icons
- The Noun Project
- Top Ten Front-End Design Rules For Developers
- Syntax: Design Tips for Developers
Transcript
The following is a machine-generated transcript of this episode. It will contain errors until it has been reviewed and edited, and we apologize for the difficulty that may cause for screen readers. Do you want to help us speed up our transcribing process? Consider sponsoring an episode.
Hey, everybody, welcome to the Drunken UX podcast. You’re listening to episode number 101. This is design advice for developers and I am your host, Michael Fienen.
I’m your other other hosts Michael… err Aaron. How you doing? Michael?
I was the one who was pre gaming before this. So are you okay, Sir?
I haven’t been pre gaming. I just had a brain fart.
I was pre gaming. I’m not gonna lie. I’m taking this episode to heart as far as drunken UX goes. So we’ll have some fun with this. Hey, welcome to the end of the the end of the season. We got three more episodes coming up after this. We hope you’re enjoying the show. Keep tuned in. And I I don’t know.
Well, if you know, you should come and tell us at Twitter or facebook.com/dragon UX, or instagram.com/dragon UX podcast. And come talk with us at Dragon UX comm slash discord. The new place you can find us which we kind of talked about on the last episode is dragging you x.com/support which will redirect you to our Patreon. And amazingly, we’ve got some backers already don’t wait. You can tell them
I do have backers. That is because we are super awesome at what we do. I want to give a shout out to Lance Romanov and Brendan sparks. You guys are awesome. Thanks for backing the show and helping make everything possible. That is money that is going towards our automated transcripts. Right now. If you look at our Patreon, we do have several goals set up there. The first one getting to our benchmark for the automated transcripts and then working towards our eventual goal of getting fully manual transcript is edited by an actual human who knows what words mean. opposed to a machine,
but it’s not not me clearly.
The new transcripts are already better. So I’m happy with that as it is and we will continue to make improvements. So yes, if you’re enjoying the show, if you’re excited about what we’re doing and you want to help us at all, you can donate whatever you’re comfortable with, whether that’s $1 Whether that’s $5 Whether that’s $20 You know, I don’t set rules on that and Patreon lets you put in whatever number you want to so go do that.
If you do it, let me be clear that you get special stuff one of those special things is extended interviews we will be pushing one of those out every couple of weeks that go back through not just season four but I think the end of season three I forget that it was episode 79 I think was the first one and we’ll be releasing extended cuts of all of our interviews from episodes from that point up until current at which point we will start releasing them in time with current episodes obviously that we will eventually catch up with with ourselves there and then there will also be other things you get stickers and coasters and things like that for backing us and we will be adding additional stuff as things change.
Aaron my boy yeah. Oh you didn’t you said you didn’t pregame but I know you didn’t have a drink over there. So what do we what do we got?
I have an actual honest to goodness adult beverage it is just a vodka tonic though. It is basic. It has a little bit of roses wine juice in it. And I use I think this is Canada Dry tonic with vodka vodka hmm it’s not fancy but it’s like a I think my personal the way I make it myself I would say
I I’m I’m going through my shell with some of my new stuff and I’m I broke out tonight the Glenmorangie next door. This is one of my favorite scotches. This is a glenmoor genie in the bottle. Let me see the bottle. There’s nothing real fancy about the ball. It’s a plain old Glenmorangie bottle for the most part. Glen Glenmorangie is a highland Scotch so you get that sort of like grassy sort of bass note to it. It is the nectar Dior is finished in salt turn casks so I’ll turn wine and it gives it sort of this really bright, like white grape. I want to use the word sparkle but sparkle isn’t the flavor.
But there’s there is this sort of distinct like sweet wine layer to it like if you if you had like a Scotto type of wine or something like that. Like there’s a very bright note that sits on top of this that is very sweet and very crunchy a toffee. Very, like crunchy toffee type of brightness on top of it. Easily one of my favorite scotches. I like Glenmorangie anyway, I love their high end stuff. I love the 18. I love the Cygnet. I love their standard 10. The Nectar Dior is one of three that they do that is out of a one of them’s the La Santa. And I can’t remember the other one off the top my head, but they’re all like specialty like they’re done 10 years standard.
And then they finished two years in different types of wine casks. Tonight, absolutely want to one we’re talking about design advice for developers. Now, what we are talking about is literally like, I am a developer, and maybe I’m an army of one. Or maybe I work somewhere that just doesn’t have a design department. And I’ve been asked to build a site and make it look nice. And I got hired to code. I don’t know how to do this. I do want to give credit to those that came before us. West boss over at syntax, they did a great episode on this. It was episode number 68. If you want to go back and listen to theirs as well, it was designed tips for designers was their episode.
And of course they are out of this world knowledgeable on all of this stuff. So by all means, if you like what we have to say go listen to their show and love what they have to say. And then come back and listen us some more. And then come back and listen to some more. Yeah, because we’re fun. We’re fun and flirty with each other via cues. i I want to talk about this, especially from my where I’m sitting my standpoint, my point. Because I have joked so many times about how I’m not a designer, I’m a bad designer, I’m a coder, I write stuff. I like code. And but yet I build sites and I build sites for myself. And so you know, how do I solve those problems? How do I how do I get into that?
I could we unpack for a moment, what it means to say, I’m not a designer, like what what do we mean when we say designer in that sentence? What do we what do we actually saying? What are you saying? Have we? Yeah, yeah, um, because
you, let’s be fair, right? Like you’re a Ruby developer, you consider yourself a back end developer? Yes,
I would say that, like the 95% of the work I do on a given day is like back end coding. Yes, yes. But like, I’ve done graphic design, like I’m not a stranger to InDesign, or like digital art, or like I used Park express many many years ago yet to have were dongle plugged into the keyboard. And
I was I remember cork Express from college.
Yeah, I I’ve done logo design. I do like, like painting and stuff for fun. Like, I am not a stranger to art. I would say that my expertise is not in design, like in that I guess I mean, I’m not someone where I would feel comfortable selling my services as like designing something visually aesthetic or something like that. It’s not a an area that I stay current with in the way that I would with like UX or accessibility or back end technology or like, you know, basic site security, that kind of stuff. I try to read up on those things as they current, I wouldn’t say that I’m doing that with whatever’s current design trends.
So I guess that’s kind of what I mean, what is it for you? What does being a designer mean?
Yeah, so I like the fact that you mentioned like accessibility, right? Because when I think about things like design, I don’t think about stuff like accessibility, because accessibility just tells me what to do. It gives me a spec. Basically, now we’ve talked about how accessibility is not a checklist, and all of that, but even the stuff that’s subjective about accessibility is still stuff that, hey, it’s telling me what to do. So as long as I do what it’s telling me, um, I can work with that.
accessible it is more about like function than than aesthetics right
at the end. So I work very well with that. Like, I love having like just a thing that says, here’s the things to practice and how you figure it out, and how you know, if you’re compliant and all of this. I have built over my life mini sites, let’s, let’s say, I, however, do not have your background, I am not an art person at all. My wife is an art person. And we’ve had many conversations about how I have no aesthetic sense of like looking at a painting and I can respect like, I can look at a good painting and say that’s a good painting. Right? And then I can look at a famous painting. I’m gonna phrase it that way and say that’s garbage. Because I can’t do that.
Like yeah, like I don’t I don’t get it. I don’t think that way. I don’t think abstractly. I’m good at photography. I like the idea of like, visual composition in the moment for some reason I’m okay at. Yeah, but only through a lens. Sure, because there’s something very yeah, there’s something very concrete about photography. I’m taking a real picture of her real thing, right? And so it’s giving me a baseline to operate from once I’m ready to edit. We’ll talk about that actual concept here. As far as it applies to web design here in a bit.
I often hear from people like, oh, I can’t draw, or I’m not an artist. And it sounds the same as like when someone says they can’t do math, or they can’t, right. Ryan, I always, I’m sure to correct people. Like, I think what you mean is you’re just not practiced. It’s, it’s not like some of us are just born. With full knowledge of how to do this. It’s, it’s a function of how much time you put into it. And I think the same thing goes with design. And it’s perfectly valid to say, design isn’t important enough to me to put the time in, to be better at it.
If you want to be just good enough, like if you want to have, you know, like a basic level of competency, like, what’s the what’s the minimal amount of effort you can put in to to not look like shit? Is that kind of what we’re talking about tonight?
Can I say yes, but yes. Can I start with a story? Let’s start with an allegory of sorts of the farmer and the chef. The farmer goes out day and night plows, the fields, plants, the seeds, weeds, the the rose, harvests the grain, packs it up, ships it off, he knows his trade. Well, he grows bountiful harvests every year, of all kinds of fruits and vegetables and grains, and then and manner and sort. The chef walks into his kitchen every day, and purchases, all kinds of the finest food all all across the seas. And they know all the different ways to cut and cook and arrange and plate and present this food to people and one is not the other.
But the chef deals directly with the things the farmer grows, and the farmer consumes things that the chef may cook. There they both deal in food at the end of the day, they’re both in the food game, right? The farmer may not be a good cook, though. And the chef may not be able to grow anything. But the difference? Is that what you just said, right? Yeah, so a chef might not be able to go out and plow a field and plant acres upon acres of a crop. But we could probably teach the chef how to grow a window garden with some herbs. And the farmer while the farmer may not be able to produce a molecular guests, gastronomic creation of your lore.
But I bet we can teach them how to make a decent steak and potatoes. Like, there, there is an overlap of gray area where both are capable of operating without deep knowledge of the others territory. And what really differs is the ceiling each has for the others area of expertise,
I think to to relate that back to the point I was making, I think if the farmer gave up, if both of them, you know, farmed, and shift, booked shift, I’m not sure their word is until say age 30. Right? And then they decided, okay, we’re going to switch switch professions. And they both put in another 10 years in each other’s professions. I would say that, while maybe the farmer as Chef might not be quite as good as the chef wasn’t because the chef started with that first. And vice versa, the chef may not be quite as good as the farmer was at first. I bet they both be at similar levels of competency. It’s just like how much time and energy and effort do you want to put into learning a craft?
But just because you asked them to change seats, doesn’t mean they can change their passion? Sure. Oh, that too. Yeah. Because that matters. being passionate about something can dramatically affect your ability to learn, retain and execute on certain things. If you aren’t passionate about football, and you sit down to watch a chiefs game with me, I can I can teach you every rule of that game and explain everything that’s going on and all the things and that’s not going to make you care and you’re not going to next week, you’re going to sit down with me again. And I’m going to tell you the same stuff over because you’re not going to retain and Abel didn’t matter to you.
I think and and to be clear, it is totally valid. If you’re like design doesn’t interest me. And it is totally valid. If you’re a designer and you’re like I really don’t get into coding. Yeah, it’s it’s cool. Like there’s no like one of them is not better than the other, like practically speaking.
And then what I what I hope you get from this conversation is sort of this idea of Yeah, that’s not my thing. I don’t love it. But I need to be able to At least execute in that gray area, I need to be able to cook my steak and potatoes, I need to be able to grow the window box. And that doesn’t take a lot of effort. And there are a lot of, let’s call them. I don’t want to call them shortcuts. But they are kind of shortcuts. They’re crutches that’s maybe let’s use that word they’re crushes that will help you and you can lean on them.
And there’s nothing wrong with that everybody leans on those crutches. There are three areas that really come to mind for me, the first of which is colors. And picking a color palette for most people usually happens pretty early in their process and thinking about, you know, what are your brand’s colors? What are your products, colors? What colors evoke the emotions that you want to evoke? certain colors mean certain things?
I think those questions that you’re asking right now, like I completely agree with them. And there are questions we should be asking initially. I don’t think everyone knows that even asked them though. I think that designer, deciding on a color palette isn’t something that I think is intuitive to a lot of us, especially people in the backend, that that’s something that you would want to decide on first, we just sort of start working and get to a point where we need color, and then like, oh, shit, well, I guess I’ll use this color here. This seems like something I’ve seen before,
throw, throw a dart and see how it lands. And that’s fine too. Like if you if you’re working on something that sort of a blank slate. And you have the opportunity to just pick colors, because you don’t have anything to go off of like, if you’re building something like if you’re working somewhere that sells a product, you can always steal colors from the product, as you know, an inspiration or something like that. But if you’re trying to come up with like a palette, because frequently, even if you’re using something as a basis for a color, you may need accent colors and background colors and things like that, to help augment this.
Putting that palette together can be kind of a pain in the butt. There are two tools I’m going to throw out here at you that I really like for this that work well for me and help aid in this process. One is colorbox.io, which is a very straightforward tool. You go there, it’s got a deal where you can add colors to a pallet, and they will build out things like color ramps for you.
But what is it? What’s a color? What’s a color ramp?
So a color ramp is something where like if I picked, you know, blue, like a good strong blue, what it would do is give me ratios of that blue as a and I may get this wrong, I believe right? Is it the luminance, I think is the right technical phrase for the the saturation of it. It’s not opacity, but it’s like it gives you a wrap over like, like 10 or I think is it 10 or 11. Like levels of strength of that color. Got it. So from a super light version of that color to a super dark version of that color, I believe, is the is the phrase I want to use there.
And it will also show you like contrast ratios. So yeah, that’s nice. Yeah, so which versions of those color combinations work against black and white for color contrast, and which means accessibility purposes.
I I like I mean, these things are neat. And they’re like, it seems like useful information. But the the hue, like this is approaching it from like HSL a Hue Saturation and Lightness. And, but like web is typically like, you know, like an RGB basis, right? Which is supposed to focus on a hue alone. So this I’m looking at hue it has started and I’m adjusting the sliders around and it’s doing some wacky shit. It’s neat. Like, I like the colors, it’s coming up with like, holy shit, man.
So this tool, though, is nice for that because it does the math for you. It does the color math for you. So that if you’re thinking about well, this is the color I want as the basis and so I want to have like a light version of that and a dark version of that for like accents and highlights and shadows. This solves that problem a little bit by giving you the mathematically equivalent steps away from that color, right. The other one that I’ve used is Adobe’s color tool, previously KU L E R, that stylized spelling, but now it’s just color the Oh Melton Okay, color.adobe.com This is probably my this is cool.
This is this is a nice tool i i for developing a color scheme, I’m just looking at it right now. This is great, you have like different color harmony schemes where you like you choose one up front, and then it helps you establish the theme from that. So I think it’s hard when you’re picking a color scheme because you have to find colors that like work together, visually work together, right? And there’s some rules about doing that. But if you don’t work with them constantly, they’re not easy to remember. This is cool,
though. Yeah, so you can pick from like it, you start with the color wheel, pick a color that works for you. And then you can click through, and there’s all different types of what they call harmony rules. So you start with analogous, which means they’re all and I’m gonna, I’m going to use these words wrong. And I’m afraid to even like try to say this, because again, I’m not a design person, that if you were to draw a radius out from the center of the color wheel, these would be colors that are evenly spaced within about a 45 degree angle at the same radius of luminance, basically, that’s roughly correct.
Is that roughly correct, you can go monochromatic, which keeps them all along the same radius, you can go try add, which gives you at every What is it 120 degrees, you can color at every 120 degrees. Complementary colors. This is then colors at along a diameter of somewhere along the diameter equidistant from the center, split complementary, double split complementary square compound shades, you’ve got all of these different deals, and what they do is they are using math to give you a color combination. And usually they’re pretty darn good.
Like when you see them, you get a palette of five colors that you can work with, then what you can do is you can take those five colors, go over to Color box, and build ramps out of them. Unknown Speaker Mm hmm.
So you could turn five colors into 50 colors.
Yeah, yeah. And you could also just take the five colors and throw them in your palette on your Sass sheet. And then I mean, depending on how you set up your Sass already, it might just work. If you have your lights and darks and everything set up.
Here’s what I want to ask you is have you ever used the extract theme? Unknown Speaker No. Oh,
oh, sir. If you go, if you go to the Adobe Color tool, and you upload an image into the extract three theme panel, it will build a color palette based on an image. Unknown Speaker Oh, that’s actually really good, right? Yeah.
So like it cool. If you have some visual imagery you’re building around, or let’s say you have a product, right? If you’ve got some kind of product that you need to build a landing page for, and you have a picture of that product, you could put it in here and use it to pick colors from that product to generate a color palette for you. It’s fantastic. This is it’s it’s pretty impressive. I use this recently, as I’m kind of working out the color palette to use for the ethics website. I’ve got a photo in the masthead. And I’m using that photo to generate the color palette that’s used to the through the rest of that site. The grays and the Pink’s that are in there come from that photo.
I took a picture of some, some cinnamon buns that I put it into there. And it made a palette and the palettes actually like pretty spot on death. Yeah, I had, I had to drag though there was one green from the spatula in the background. And I just I moved that off and pick the different color but looks really quality.
This is like it as far as crutches go. I love this. Oh, I love this deeply. And the same way you can actually develop gradients, it’s got a gradient tool that will do the same thing. You upload an image and it will pick colors along a spectrum of the same color for you. And they’ve got an accessibility tool that you can just go in and check is color A and color B Do they have enough contrast with each other.
But the thing that I like about tools like this is that you whatever your experience with art, this will show you a color palette, and you can look at it and instantly think yes, this works or like No, it doesn’t feel right. And you can make adjustments to it until you find one that feels right to you whether or not you know why. And and then it gives you the numbers that you can use to put that into your thing. And that’s a decision that’s done. You don’t have to think about anymore. I love this.
It’s decision paralysis. Right, we have an infinite number effectively of colors to choose from. And so if I’m trying to pick a five color palette for something, and looking at like your cinnamon, right here, it’s like, I would have a hard time picking colors out of that cinnamon bun photo and feel like these are the ones that are right. Right. There’s a certain, I guess, authority that comes from like a tool that Adobe made. That is like, these are the colors we are picking. And I’m like, You know what? I think that’s good. I think it looks right.
And I’m going to trust your algorithm. And it’s, it’s not like that’s one of those things like it helps break that sort of inability to say, Well, I’m picking these colors. And I don’t know if I can justify my color choices. But
and even if even if it gets you like, 80% of the way there, you can probably pick something you can probably tweak the rest. Yes, what they gave you to start with, like you said,
it picked a green to go in with that, and you didn’t like the green, so you just adjusted it to not have the green and the green.
It wasn’t it didn’t look bad. Like it wasn’t a bad color. But it’s just, I wanted it to be different. Yeah, I changed it. Yeah.
Beyond colors, we can talk about typography. Yes, typography is a huge part of the web. Because we consume the web in three ways, audio, video, and text, I my advice is a don’t over rely on them, it is really easy to go to a free font site and find all kinds of fancy fonts and want to use them all. And that becomes a speed problem for your website, it becomes a size problem for your website to have tons and tons of fonts. And it’s just too much. It’s okay to have a web font or two. But if you start pushing into three or more, you need to ask yourself how how do these fonts serve the design at that point.
And so it’s it’s a cautionary tale. But I do like font as a stand in for some design. Because it can be interesting, it can be visually appealing, it can draw attention to something using it in the masthead or on a call to action or something like that can get people’s eye and make up for the fact that you don’t know maybe what to do there. Otherwise, you don’t have a fancy logo or you don’t have a really like high detailed SVG of some kind of illustration. And there are a million fonts out there. So maybe you can find a font that will help tell the story of the site that you’re wanting
to build. The fonts are like a palette for words, like, you know, you’re choosing to, if you’re going to paint a picture, or, you know, to make an image of some kind, you’re choosing colors for that, and your font choices sort of the same thing and like it taints the experience of how the reader might respond to reading the text.
And, and you you want to make sure to keep it readable. There are tons of fonts out there that are very, shall we say artistic in nature. And they’re please terrible. Don’t
use a script font for body copy.
Body copies should always be nice and plain. Basic. That doesn’t mean don’t use a web font for them. Oh no,
no, you can tell it is about fun. But like just use something that’s easy to read.
Simple. Always keep simple sans serif in mind for body fonts, maybe a nice elegant Sarah for headers and things like that. Or vice versa. Okay, so dialed scripting. Yeah,
that goes into my my hands. This is something that I learned, like in an actual graphic design class in college, many, many years ago. So I’m going to oversimplify it. Because we’re talking like this is for people who aren’t designers by training. So if you’re a designer by training, I apologize for the ridiculousness but so you have a sarafan which is a font that has the little like flags with little flourishes on the on the tips of all the letters. You have Sans Serif fonts that be like an Arial Times New Roman is a serif font Arial is a sans serif does not have the tariffs on it. And we have
collibra I think is the Colibri the replacement for Ariel
Okay, okay. Or like for Donna? I think that was a Windows one, right? Or Helvetica is a Sans era vedika um, so and then there’s like, I’ll call them novelty fonts. These are ones that like where each letter has character to it. Like maybe there is one that’s a block letters, but it has like snow on them, where it looks like it the letters are bleeding Do you want to use novelty fonts as little as possible, these are like accents only, as are words that it’s okay to spend a little time reading, but not body copy. And then choose either serif or sans serif. For a block of text, whether it’s a heading, or body copy or something. And use one font for serif and one for sans serif.
At most, like pick one for each. Don’t, don’t choose multiple Sans Serif fonts, you’re going to get clashes, it’s going to be like wearing a blue and a slightly different blue. At the same time, it’s gonna look weird. Yeah. But you can get good font contrast easily with for example, having a serif font in your heading. And then sans serif in the body copy, or vice versa. whatever looks good to you, if you want to use one Sansar font for both the heading and the body copy, that’s fine, just use the same font, or make them if you if you must use two different Ceren, sans serif fonts, or sarafan. Make them look obviously different, like really, really different.
I like your use of the term novelty font. That works. That works extremely well. With the current design collateral we use for drunken UX, like on our social images and album cover. I use a novelty font for that. That is fun. That is a great example of me using the font to make up for my lack of design skills. And it worked. Okay, for a while. I want to do better than that now.
Sure. It’s visually interesting. It’s it’s effective. I mean, it’s it was a great choice. Um, I just wouldn’t use it for the body copy.
Yeah. Oh, yeah. Yeah, exactly. Yeah, we could imagine trying to read an entire paragraph of text and stencil thought that that would work.
Sure. What is your bounce rate go way up. That’s how you get your bounce rate go up
tools. Adobe also has their fonts tool, though, you do have to have a Creative Cloud license to use it. If you don’t have a Creative Cloud license. Google fonts is one option. And another option is font squirrel. I don’t know if people still use font squirrel, but I used the heck out of it years ago. And I know they’re still around. And they have like royalty free open license web fonts that you can go use. And cool. Dig through and find something that matches you know the style that you want. So go go check all of those out. Now let’s talk design.
The actual design, like encompassing of anything artistic. Most of the time, you’re going to need icons of some kind. And I don’t want to design icons. I don’t. I’m not again, I’m not good at that. I don’t understand going into InDesign and creating SVG. That’s not that’s just not my bag. Yo, am I allowed to say that? And I feel like I’m way too old to say something like that.
Or you can say it ironically, right?
Okay. I have my skateboards in the closet, my music band shirts in the laundry. I’m sorry. Fanta awesome, is a great resource, though, for lots of like icons of all different types. It’s a paid service, they do have a free tier with a ton of stuff that
the free tier has a free feature many times and it has pretty much all of the basic uses the checkboxes, the circles, the squares, a lot of like functional icons, kind of basic emoji, monochromatic emoji.
A similar tool is the noun project. I like that one a lot. Two noun project is very cool. Yeah, same deal. They have a free tier, but they also have paid tears, if you’re so inclined. The 40 bucks a year, if you are a professional web dev, you get a lot for that 40 bucks, that can really get in and fill a lot of gaps. And if you are working at an organization, it’s even better because it can help take care of so if they don’t want to pay, you know, $60,000 a year for designer, then how about spend 40 bucks each year on the noun project and get a noun pro subscription and be able to have access to all of this stuff.
And the way to you know, change size, color, all of this kind of stuff. Definitely
has definitely has a material design. Oh, yes. That has material icons. Yes. I using them on an app that I’m building right now. I may switch to a different library, but I’ve I’ve had good luck with it. So far. They have quite a lot of options and it’s relatively easy to use.
Yes. Yeah. though. That’s, that’s a great call out. Especially because again, we’ll talk about this in just a second there also familiar to people. Yeah, that’s another big pro. That’s one of the reasons fontawesome as well. fontawesome is out there so much. A lot of their stuff is very like readily apparent to people.
You can do stuff like overlaying two different icons with each other. Like if you want to make if you want to have like like a picture of a man with a suitcase, you have it inside of a circle with a no symbol through it. You can take like two or three different icons and overlay them onto each other. And the site shows you how to do that. It’s really easy to do. Very flexible.
That’s a cool, I’ve not done that. That’s a cool idea, though. Yeah, remix, remix baby. Layout wise thinking like, the whole site and how you’re going to do that. One piece of advice I will give you is go find yourself an opinionated framework. Yeah, an opinionated framework can help fill in with their design choices for things that you may not be ready to tackle. So you just brought material icons, right? Material design, is a design system, you can go download, will get all their CSS, and they have made design choices for their framework, so that when you start using it, your site is going to naturally want to follow some of those choices they have made.
These are things like spacing, or how does a menu letting sighs Yeah, headings are what? When you have like a list, how far apart are the list items?
What are your warm options look like? Yeah, how to labels and
input fields fit together. I 100%. Back this, honestly, when I make a new site, like the app in the building right now, for fun. I go when I find a template that fits that I find a template whose markup looks. I want to say cleanliness. But I feel like that’s the wrong word of simplicity, I guess simplicity would be better, that I feel comfortable with, because I’m going to be writing a lot of it manually probably. And I just like I don’t know, I like clean looking HTML, like I find that the source code is looks more aesthetically pleasing, right?
It doesn’t have a million divs and spans. So that’s a personal choice. But I but I find an existing template and then I just extend it. That’s because that’s just easier for me, I would rather spend my time on other parts of the process.
Right, right, as most developers would. So this makes those choices for you change some colors, change some sizes or whatever, set the variables you’re good to go. US W DS is another one of these right? The United States Web Design System. This is we’ve mentioned this before on the show, it’s it’s the official design system of governmental websites, that’s also freely available for you to use. And they have made a lot of these choices.
It’s quite good. And it has accessibility baked in right from the beginning. Right? If you if you aren’t, if you’re designing something, it’s like basic functionality, you just need it to look clean and easy to consume. Us. WGS is awesome. Now.
Will it look like other sites designed with it? Yes, absolutely. But that’s probably not your biggest concern at that point. Like,
it’s not a bad thing.
Right? It makes it look nice. It looks nice. We’re and I we have a very specific call out to reinforce this. One thing authorized. It’s not a design system or framework, but it is a template library. I’m going to mention. I’ve recommended this to people many, many times. It’s HTML five up, and I’m looking at some this is a tough shit.
Oh my god, this is my new favorite thing. I love this holy crap, man. This is this is like looking at the WordPress theme library. But but it’s like not for WordPress, this
this is built by AJ. And dude, I would love to give you credit for your last name. And I pulled you up as I’m talking about this. And your Twitter is just AJ lkn. So but AJ has created this and it released these templates under a Creative Commons license. They are vanilla, HTML and CSS. They are available under Creative Commons. There are a lot of them, what 1819 Something like that, that you can go in and download. And all of these make for great like starting points where you can go in there and edit them clean them up, change colors, use parts of it or not parts of it. But this is been like a really nice starting point.
I’ve used it for sites, I’ve recommended it to a lot of people. If you’re doing a static like site generator type setup, something like this is fantastic because it can make up all of the basis of your templates. And it doesn’t need WordPress crap. It doesn’t need Django it doesn’t need any kind of Joomla stuff or or Adobe web experience or experience engine or whatever it’s called. That’s I got all of those, right?
This is exactly the kind of thing that I would start with. You take the one that looks the closest to what you want. And then you just modify it. It’s like when I had that the color palette thing like you know, like you get to 80% of the way there and then you just tweak it to get it The rest of the way. And that’s even if you have very little design experience, if you can find your way around some CSS and HTML, then it’d be good to slap
a coat of paint on it. It’s the same house, but it’s a different color. Now.
You can fit 15 million websites in this template.
The same goes for all the other ones, right, like Bootstrap. Foundation.
I added it to the rest. Does that count? Yeah, absolutely fit here. Okay,
yeah, it’s got design choices that have been made in it. Yeah. Unknown Speaker It’s any
kind, anything you do, wireframe wise, can help lead to design inspiration, because you’re still dealing in space, you’re still dealing in layout. I,
he’s been in favor of
AI. That’s fair, man, that’s totally fair. This
is, this is like way back to the early 2000s. Or maybe even before I was just when I worked at some jobs. Previously, I would just, my boss had asked me to run for office supplies. And they just gave me some legal pads. I use graph paper, sometimes I did a I helped out on a site recently. And my partner was doing a site that she’s making for a whole thing, that you’re struggling with the layout, and I just got a piece of paper out and I was like, sketching out, you know, some things just with pen and paper.
And I don’t know, I find that when you’re dealing with like a 10,000 foot view of layout, sometimes it’s easier to just be able to just move your hand on a page and have it make the shapes you want. It very
much changes your headspace, right, like getting away from the monitor, there’s there is something very visceral about that process.
Right? It’s the very such a small amount of translation between idea and then like seeing what it looks like. You don’t have to worry about an interface, you have a stylus, and you have a page. And that’s
it. But all design starts with that sort of basic prototyping wireframing. Draw where you want things and see where you go. Because here’s the thing, from wireframes, you can always get into minimalism. If you’re not good in design, if you’re not like great at creating graphics, and all of that minimalism is still design. And sticking to a simple grid with basic boxes and things like that, that is still design, you are still making something that is visually appealing. There’s a there’s a quote from an article over at top tall, that it says if you don’t know what you’re doing, do less.
I love that, which is a brilliant variant on our freight favorite phrase of do less better. And so if if you’re feeling overwhelmed by design concepts and decision making and figuring out colors or objects, then keep it simple, do less think wireframe and work up from there. I did that with the drunken UX redesign. And I layered one extra sort of piece on top of that, which was geometry. Geometry is very simple. geometry can be done with polygons in CSS. And so what you’re going to end up seeing with this redesign is a lot of design design decisions that come from the fact that I know math, and I’m comfortable in math. And I said if I know math, I can do geometry. And geometry is also design. Sure.
I like the if you don’t know what you’re doing, do less. design decisions can be exciting if you take risks and be bold. And you know, it’s good to like you push yourself out of your comfort zone a little bit by making a decision to use geometry as part of the theme. That’s great. And being a little bit uncomfortable with some choices you’re making, I think is a fantastic thing to do. But like, no, no, you’re no, no your space. Like if you’re if you’re the farmer cooking thing, probably not going to like make some kind of elaborate six course meal. But maybe like you try cooking your steak slightly differently. Maybe you try like a fancy dessert or something
or be careful about being bold that everybody everybody’s got that friend that likes some bizarre food, or goes to the Thai restaurant and gets it Thai spicy. You know, like, like, everybody’s got that person in their life. And it’s like, just because you like all the ketchup on your steak or all the salt on your pasta or all the spice in your soup. Doesn’t mean everybody else will resist some of those urges. If you’re not comfortable as a designer, boldness is kind of your enemy a little bit and you should think about it like keep those bumpers up on the bowling alley for a little bit.
Okay, you know, like, let’s actually get really comfortable throwing that ball down. down the lane, before we take them down and get crazy and throw a ball across, you know, to other people’s lanes. This but this is, while I can tell you funny little anecdotes and metaphors for this. This is Jacobs law in action. Yeah, this is if you’re not comfortable with the design, it’s, it’s always going to be best to stick to things that your users are familiar with things that are tried and true. And that won’t push them away. Because Oh, it’s too salty. Oh, it’s whatever. That’s,
that’s one of the reasons why I like those pre made templates, because it’s just a lot of decisions already made, fortunes are made. And then you can add the spice that you want to it. And you know, and the little flourishes and things and just to kind of make it your own.
This also makes it important to make the point of whatever you’re building, and whatever you’re designing, get your feedback really early. Don’t make the whole cake, and then have somebody try it. And find out the batter first. Yeah, taste the batter first, like check in a couple times with folks see how they are reacting to these things you’re making.
My process, when I’m sort of brainstorming ideas is like if I’m doing a logo or something, I’ll start off and I’ll make 10 on a 10 different ones. Usually like, well, like you, anybody can just be like, I’ve got three ideas, right, I’ve got a small handful of ideas, I’ll just draw them out. But if you push yourself, like at least twice as far as that, whatever you can think of easily, you know, double it, if you can get to three to five, do another three to five. And those are the ones are actually pushing yourself to really, that’s
a space like that, that’s a nice mentality.
And then cut down, get rid of two thirds of them, look at them with someone else, you know, set it down for an hour, come back to it and be like, Okay, two thirds of these have to go. So you choose, you know, six of them will say six or seven. And you just strike them out. And it’ll probably be obvious for a few of them. But you’re also going to have to, you know, murder your darlings, as we’ve talked about before. And then take those remaining three or four, and then do two or three variants of each one of them.
And be prepared for the feedback. You said, you said murder your darlings. Be prepared for people to hate the one that you love. Yeah, that may be the one that that that may be the one that’s a little too salty.
But do do two or three variations of each of those ones that remain. And then usually by that point, you’ll have a pretty good literacy about what it is like you’ll kind of you’ll circle around what you’re actually wanting to get at. And after that second pass, do the same thing, you know, eliminate two thirds of them. And then from the remaining ones, you should have a few that are actually like you can run by some people get a few people’s opinions about which one they like best. But that’s that’s like that’s an iterative process that I’ve used a number of times, and I’m trying to like explore, like a creative endeavor or like thing.
I’ll wrap up this part of the conversation just to give you some inspiration ideas, because again, like Jacobs law, and like be wearing the bold, look at what other folks have done. Dribble, I think is still a great place to go and just look around and type in what you’re looking for what you’re trying to build, and get some you know, inspiration from what other people have done. Behance has a very similar tool I’ll have linked in the show notes. Again, where you can go and look at web design, look at different techniques, look at how people have tackled the same challenges that you’re looking to tackle that can answer a lot of questions for you.
And give you a sense of how do I make this thing in a way that other people will react positively to the this the generic version of this is go look at other things like you, if you’re going to build a site for a video game that you play, well go look at other sites for games that are similar to it. Go look and other people who have tackled this problem and see what they’re doing and how they’ve found success, because that’s gonna tell you a lot that you can
use. I’m sure you remember this having worked in higher ed, but just because everyone else is doing something doesn’t always make it.
True. That’s fair. Girls under trees, girls under trees, carousels, carousels all Yeah, no, that’s fair. Because there is a there is a lot of follow the leader mentality and that doesn’t necessarily end well. But generally speaking
points of inspiration though, yeah, you can usually
trust a lot of that.
I think it’s good to look at it. I think for doing for inspiration points like to look at something and say, I like this or I think this would fit with what I’m trying to do. Rather than looking at it as what should I be doing? Like don’t let other people’s work dictate what you’re doing, but use it just to sort of get ideas about what’s possible.
Yeah, the, the one piece of advice I really want to give is, get away from the computer, go to a museum, go to a park, go walk around some of the buildings in your downtown, go, just be around things in space. Look at the shirts people are wearing, look at the colors they’re using on the front of a house, look at the shapes they’re cutting bushes into, there’s a lot of inspiration that you can draw from the world around you. And there’s a lot of world.
If you are, if you’re lucky enough to live in an area with like some parks and even better like woods or something, or you can go hiking, the natural world is a really great place to kind of let your mind wander. And you’ll notice like colors, and shapes and minds and other things. And those can be good points of inspiration to integrate into whatever design choices you’re making.
Let’s wrap this up with one quick run through. So there’s an article over at CSS tricks by Andrew Spencer. It he wrote this up as design principles for developers. And he focused on three concepts that are pretty close to what we just talked about. He broke them down as color space and typography. It’s okay, if you’re like this, if you’re a developer trying to figure out how to think about design, this is a great way to approach it. Because that encompasses most of the stuff that you will do.
The reason I want to run through these real fast is because of how they align to the laws of UX. Okay, I thought it was funny, I thought it was interesting. And I thought maybe it would give a some rationale to kind of ground what we’re talking about in the maybe help make it more concrete. So color. When we think about color. And we talked about the Adobe Color tool, and the color palettes that you can create with it. Why do we create color palettes?
Oh, because we want to have different colors, but we want them to feel like part of a whole
part of a whole the law of similarity. The human eye tends to perceive similar elements in a design as a complete picture, shape or group, even if those elements elements are separated. Color is one of the ways that we can apply similarity to things. So headings may all be a similar color, the backgrounds of a key takeaway block might be a similar color buttons might be a similar color, we make these things similar to or we make these things the same color to draw similarity.
Color is one a piece of information that we can use to learn how to interact with something. So like in interaction design, if you know if you’ve learned that, like a green button is like advancing and like a gray or red button is retreating or backing out, then you can make use of that to help you know if you may have one form that has the buttons look a certain way and use the colors in those way, then, on a different form that may be laid out differently, the user can know that subconsciously the look. Okay, before I went forward by clicking on a green thing, here’s a green thing. That’s probably what to click on to go forwards.
Let’s talk space, we’ve got three that we can rely on here. Law of common region, elements tend to be perceived into groups if they are sharing an area with a clearly defined boundary. Law of Proximity. Objects that are near or proximate to each other tend to be grouped together. And the Vaughn, rest restore God Vaughn restore effect, also known as the isolation effect, predicts that when multiple similar objects are present, the one that differs from the rest is most likely to be remember. That’s neat. So what does all this have to do with space? whitespace and negative space is also design.
You should resist the temptation to fill up negative space with content. And this is something the web at large, I would say probably two thirds of the web sucks at this. They they fill up negative space with ads, they fill it up with imagery. They try to cram so much stuff into there. I really love sites like medium, or sites that have similar minimalist layouts where it’s basically just the text because it’s so much easier to read. You can you can read through the page without distraction That’s a great app
whitespace is a huge design tool. And you can convey an an enormous amount of information about the thing you’re building based on how you group things, how you put them together in space, how you combine them with borders, or shadows, anything like that. space can be a powerful, powerful conveyor of information.
There was, I was giving some UX feedback to Polly work, the site we talked about on the last episode, they have, they have, like some kind of internal jargon that they use to describe some of their things. It’s, it’s their theme, it’s cool, like, you know, that’s just the choices they made. But there was a couple of buttons that the the meaning of the buttons wasn’t always intuitive. And they would put it far away from the part of the page that it affected. And one of the pieces of feedback I had was that this button that says it’s affecting this area, you should move that button down to this area, because then the possibilities of what that button could do are like heavily constrained.
And so I would look at that button being near this one zone. And I might think, like, oh, well, this button probably does something here. What are the possible reasons that it could do. And then again, going back to the Gulf of execution, like it keeps it narrows it significantly, that having it way up in the nav bar at the top, where it could be any number of things now,
last one’s typography. And this one’s the aesthetic usability effect. Users often perceive aesthetically pleasing design as design that’s more usable when we were talking about fonts. And I said, that’s interesting. Don’t Don’t use too many fonts. And don’t overload yourself with novelty fonts. If it’s not aesthetically pleasing, it doesn’t matter how good everything else is, if it’s ugly, people will perceive it as being less usable.
Mm hmm. That’s it. I hadn’t considered about that. But it’s a good point, though. I wonder, I wonder why that is, do we perceive that as something as aesthetically pleasing, it’s had more thoughtfulness put into it. And so it’s, like, we expect it to be easier to use, like there’s less disorder. So we expect it to be more welcoming. You should want your site to be consumable. Like it’s not a rejection of you as a person. Absolutely. Like you, you are not your website, right. Like your thoughts that you’re putting into there are what people want to see. And you should give you should not make the presentation of your thoughts. Be a barrier to engaging with your
thoughts. To keep your thoughts in mind, sit back, take a second break, maybe even a Five second break. And we’ll be right back. If you enjoyed tonight’s episode, and we really hope that you have, be sure to check us out on Twitter or Facebook at slash drunken UX. If you’re on Instagram, we’re slash drunken UX podcast. And if you ever want to chat with us, by golly, come see us on Discord. It’s drunken ux.com/discord That’ll drop you right in there. And you’ll be the first to hear anything. You can ask us questions. You can chat with us. Because I live on Discord.
Yeah, yeah. Like, legitimately, I would like to know, what sorts of things are getting in your way. But thank you all for listening. And, you know, check out the Patreon. It’s a new thing. You don’t have to subscribe. But like, if having like accessible transcripts and things, something it’s important to you like that’s what we’re putting the money towards. And it would be really awesome. If you want to subscribe and help out with that. So it’s cool.
No, no, that’s it. It really reminds me to have like how important a the show is made for you guys. I enjoy making it I enjoy talking about this stuff and educating folks and sharing what we know and what we’ve learned over. I just had this conversation like I’m now getting ready to go to into about 26 years worth of building websites. And it’s one thing to talk to folks on Twitter and or Facebook or things and answer these questions and build these relationships. But now that we have the Patreon set up and people can come and and show their support, it gives us another channel to really learn how to keep our personas close and our users closer. Bye bye