Check out a free preview of the full Mastering the Design Process course
The "Design Style & Aesthetic" Lesson is part of the full, Mastering the Design Process course featured in this preview video. Here's what you'd learn in this lesson:
Paul discusses introducing a site's aesthetic, defining brand keywords with stakeholder exercises, and creating style tiles. Style tile aesthetics can be tested with semantic differential surveys to determine how well the brand keywords are conveyed to the target audience.
Transcript from the "Design Style & Aesthetic" Lesson
[00:00:00]
>> It's time I believe to address the elephant in the room, which is aesthetics. This is the area that causes all the problems. This is the point where we get into design being subjective and not liking your auntie's curtains. So how do we deal with this one? How do we deal with it?
[00:00:22]
We've done a wire frame, so we've dealt with a lot of the content issues, we've dealt a lot with the structural issues, page flow, whether people spot key elements, all of that we've dealt with. But we need to deal with the aesthetics. Now, if you're lucky then the company you're working for has a brand guidelines all ready in place.
[00:00:45]
He's all ready made those big decisions in terms of aesthetics, in terms of color choices, typography those kinds of things. And if that is where you're at, I highly recommend you do not fight that battle, right? You don't try and change those brand guidelines. It is a big fight and you'll get nowhere and anyway, it's saving you a lot of hustle and a lot of time.
[00:01:09]
I know it's hard to work with a brand identity that maybe you're not fully invested in or you don't believe in, but really you make the most out of the the constraints that are placed upon you. And that is the difference between being a designer and an artist, that you have to work within constraints.
[00:01:27]
So if you've got brand guidelines, really this next bit, you can kinda largely skip over. But for the rest of us, we are in a position where we're faced with having to establish the aesthetics of a website and that includes your colors, your typography, your styling those kinds of things.
[00:01:46]
So if you're in that position, where do you start? How do you begin to address this? Well, naturally, I would say would begin right at the beginning of the project in your discovery phase. In that phase, I would suggest discussing with your client a set of key words they want to represent their brand, right?
[00:02:07]
So, these are words that are used to help define who the company is and what they want to communicate. So these might be words like we want to be seen as professional or friendly or fun or whatever, a set of words that represents the brand. So how do you go about deciding that with the client?
[00:02:33]
Well there are kind of three ways that you can go about, deciding defining the brand and those key words, with your stakeholders. And again, this is a great way of engaging with your stakeholders. It's a great way of getting them on board. So this is definitely worth doing.
[00:02:51]
So your three options are, first of all, what I called the famous person exercise, which is a really simple exercise. It's use ask your various stakeholders if your brand was a famous person, who would that famous person be, okay? And you ask them specifically why, what is it about that famous person?
[00:03:14]
So there are certain reoccurring people that often come up, Obama is one that is often mentioned in American companies. In British companies, there's a there's a celebrity called Stephen Fry who often comes up as well. And it's not so much the name of the person that's important. What's important is what they describe that famous person is bringing, they're charismatic, they're articulate, they're intelligent.
[00:03:47]
Those are the kinds of words that basically you can use to discuss the brand identity. Now that's great and from doing that exercise you will get words that are descriptive of personality unsurprisingly. But sometimes it's useful to get words that are more design focused words. So if you want to go down that route, another exercise you can run is the reception room exercise, where you're asked participants to describe a reception area for their company.
[00:04:22]
What it would look like in their idealized view of it, right? So they would get them to describe things like the furniture, the deck or what musics playing, what's on the walls? Is there someone to greet them, what that person's like, how they they approach you, all of those kinds of characteristics, right?
[00:04:42]
And they will use a lot of adjectives. They will say things like minimalistic furniture or colorful wallpaper or things like that. So write down those words like colorful minimalistic and those can act as brand keywords again. Now, the final way of doing it is to use a brand deck.
[00:05:03]
So there is actually a website that I've got linked to in the slides. Cool brand cards and basically you can either buy a set physical cards or you can do this online and the cards have got lots of different words. And you can get stakeholders to pick different words to kind of help identify what your brand is going to be and how you represent it.
[00:05:24]
Really, which of these methods you use is somewhat abstract, right? Is somewhat up to you and the particular route that you want to go, there is no right or wrong way of doing it. The key however, is to end up with a set of words that you want the design to represent, and everybody is bought into the design needs to represent these keywords.
[00:05:48]
So what that does is it sets a standard by which to confirm whether the design is succeeded or failed. Rather than it being open to people's feelings about it. We've now got a tangible thing that we can measure. Now if you want more information about these different methods and working, I have written an article on building a brand using the web that you might find useful you might want to check that out.
[00:06:14]
So again that's in the slides. So once you've got this set of words, now we need to start kind of interpreting those words I'm in some kind of visual form. And actually one of the great tools that a lot of designers using this regard is something called style times.
[00:06:32]
Instead of designing a whole website, where you might get it wrong or you might have the wrong feel or whatever else, you just produce these mood boards. Basically, which have got examples of typography examples of color imagery that represent whatever those key words are or whatever those brand words are.
[00:06:52]
And you'll probably do a lot of these for different brand words, for different combinations of brand words in order to experiment. They're very quick and easy to create. You literally open up, you can do it in PowerPoint, if you want to do it whatever you want. You just dump in fonts and colors and that kind of thing.
[00:07:10]
And actually, if you really want to engage with your stakeholders, and give them a sense of ownership over the design, then this is a great opportunity to do that. Remember that the reason we want people to feel a sense of ownership is if they feel that they were involved in creating the design, then they're less likely to reject it because it's their own work.
[00:07:34]
And they're also more likely to defend it to others. We also wanna involve the stakeholders at this stage. Because a game was showing them the design evolving, we've shown them some wireframes. We've shown them the style tiles, and then they'll see the final design and it won't come as a surprise, okay?
[00:07:53]
And remember surprises are bad. So whether you wanna do it yourself or whether you wanna get your stakeholders involved, basically what you're doing is, going to Google Images and typing in that particular brand word. So you wanted the design to feel calming. So you typed the word calming into Google Images and see what images it comes out up with.
[00:08:13]
And then you grab the ones you like, and you sell them in your style title, simple as that. You could use a site called Pickler, I think that's how you say it, which is great for finding colors that are associated with different images or feelings. So you can go to that website link in the slide deck and you can type in a particular keyword and it will suggest colors based on that keyword.
[00:08:41]
Brilliant., great, so you've now got a color inspiration. You can drop that into your style tiles. And then there's photography, that's a photography typography even, right where you can go to Google fonts and you can pick some fonts that you feel kind of represent those different feelings that you're going for.
[00:09:01]
And then if you want some stylistic inspiration, you go to a site like Dribble, and you search on your keywords there and see what it comes back with and maybe pick and choose. So you'll end up creating these different style tiles with these different combinations, either yourself as a designer or ideally with some of your stakeholders.
[00:09:22]
So once you've got the style tiles the next stage is to work out which of these is gonna be most appropriate, right? Now, there are many different approaches that you could do here. But my preference is or what the ultimate aim is that you're seeking to show your stakeholders that there is hard evidence supporting your approach rather than it just being based on your opinion as a designer.
[00:09:53]
So we want some testing again at this point, but again, we want to keep it very, very lightweight. So how would you go about testing style tiles or indeed any aesthetic approach you might do a final design mock up and want to use this as well? This is where there is a technique called a semantic differential survey, which I mentioned earlier.
[00:10:18]
And there are kind of different ways you can do it. But, basically what you're doing is you're testing the aesthetics with your target audience to see what they think. And it's done as a survey, right? And you could do this and styled tiles or final design comps or both, if you want to.
[00:10:39]
The way that this survey is worded can vary, but the basic approach is the same. In approach number one, what you'll do is you'll show your target audience the design, okay? And then you'll ask them to rate their impression of the design on a scale. So let's say what would the brand word you want to represent is cashew, right?
[00:11:06]
So you'd have a one to five scale with casual at one end formula at the other, right? So another one might be simple to complex or fun, too serious, and they rate it on that scale. And if it obviously rates towards casual, which is the brand words you want, you know your style toe or your design is heading in the right direction.
[00:11:28]
You're good to go without having to say the dreaded words, what do you think do your stakeholders, right? You've got hard data instead. Now, if that doesn't appeal to you, there is another method, right? If you're sliding scale is potentially, some keywords don't work on a sliding scale, because they don't have an opposite to them.
[00:11:49]
So if you're in that kind of situation then you show the style tile and you ask them to pick from a whole selection of words which ones they feel best represent the brand. And that list of words would be, your brand keywords, would be their opposites, if they've got opposites.
[00:12:07]
And then throw in some other random keywords cuz sometimes somebody will come back and go, I feel that design looks a bit cold. All right, so I'm gonna put the word cold in and see if anyone selects it. So that's another way of doing it. And then the final way of doing it is if it's a very competitive market, and people wanna compare themselves to the competition.
[00:12:27]
Or alternatively, if you've got lots of style tiles and you wanna compare them against one another, you can ask the questions which of the following sites looks most approachable or calming or whatever your keyword is. And then they select from a series of options. But basically it's the same thing.
[00:12:45]
What we're trying to prove is that are designed matches our brand keywords, all right, to provide us with evidence so that this isn't going to become a semantic discussion. Now again, all of those tests can be done with usability hub that I mentioned earlier. There's also another tool called maze which can be used for this.
[00:13:08]
Again, it's very quick to set up, and to run the test and you can get results back in under an hour. The only thing that makes this slightly more trickier than the earlier example I gave of wire frames is that you've got to, in this particular case have the right target audience, right?
[00:13:29]
So when it comes to usability and find ability, unless your audience is has got some kind of cognitive or physical disability, maybe they're more old or maybe they're very young. Basically most of us will struggle with the same things when it comes to usability. However, we will all have radically different opinions about design aesthetics, right?
[00:13:50]
And so you do need the right target audience when it comes to the aesthetic side of things. Now again, usability hub will help recruit people for you, if that's what you need here. But ,to be honest most of the time, I used to just use a mailing list, or used your social media followers, or something like that, to reach out to your target audience.
[00:14:12]
And once you've got those style tiles and once you know your style tiles are all right with your target audience then really, its just a matter bringing it all together, right? It's a matter of bringing those wireframes together, and bringing the aesthetic style tiles together, into a final design.
[00:14:33]
And by this stage, it should be fairly straight forward. Because the stakeholders have been involved in the creation of the style tiles and the wireframes they've seen and been engaged with that process. You've done testing to provide evidence around those things. So you're going to be in a really strong position to produce the final design.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops