Bummer! This is just a preview. You need to be signed in with a Pro account to view the entire video.
Reframing Web Design: The Process of Theatre Design41:35 with Luke Murphy-Wearmouth
As web designers, there are lessons we can learn and insights we can gain from stepping outside of the discipline and approaching our design process from a different angle. Over the past year or so Luke has been looking into the processes of other areas of design, picking them apart and drawing parallels to the work of web designers, in the hope that he'll be able to improve his working process. While most people look at closely related disciplines like graphic, motion and print design, Luke took a closer look at the process of theatre design, an area he used to be involved in. What he discovered was that there are clear parallels between set, props, costume, lighting and audio design in the theatre and what we do on the web, and there are things we as web designers can potentially learn from the world of theatre.
[MUSIC]. 0:00 Hi, so, I'm, I'm Luke in case you're in the wrong track. 0:11 I will not be doing any code today. 0:15 You'll not be seeing any code on my slides. 0:18 So if you want to find out more about me or or check out some of my writing or 0:21 other talks then I'm I'm [INAUDIBLE] on Twitter or [INAUDIBLE] 0:26 .com, the details of which will be at the end. 0:30 So [PAUSE] technology isn't my friend today. 0:35 So web design has, I feel it's really grown up in the past ten years. 0:43 I've been in the industry for about ten years professionally. 0:48 And I feel like over the past ten years, 0:52 we've really reached a level of maturity that needs 0:55 the, means that we really need to start looking 0:58 at the way we do things a bit more closely. 1:01 In order that we can kind of shape what we do into more of a discipline. 1:05 And it's something that I think is a, 1:10 a really important part of kind of growing up. 1:13 And the really cool thing, a lot of people kind of see this as slight navel gazing. 1:16 But I think it's a really important part of, of going forward. 1:22 And what's really exciting is that when it comes down to it, it's up to us, as the 1:26 practitioners to actually shape what we're going to be 1:31 doing in the future, which is a really exciting prospect. 1:34 So, just as a bit of finger in the air, how many people here are designers? 1:38 Cool, okay, good. 1:45 That's, that's good, that's good to know. 1:47 You're in the right room. 1:49 So what it comes down to, a lot of this is about to looking at our processes. 1:52 Its about picking them apart, and, and kind of figuring 1:58 out what the right things are and where we can improve. 2:01 And this is, I mean, this is something that has been quite common, 2:05 especially the past two years or so, lots of people are talking about process. 2:08 But what I've found is that most 2:12 people, when they're talking about process, they're 2:13 talking about it in context of the legacy disciplines that we have come from. 2:16 So things like graphic, print, and software design. 2:21 Which is not a bad thing. 2:25 I definitely think that we shouldn't be starting from scratch. 2:28 We should be standing on the shoulders of giants. 2:30 That is a very important thing. 2:33 However, I do think that sometimes we might be able to look a 2:34 bit wider in to other disciplines that we might not think are related. 2:38 See what they do and see if there's anything there 2:42 that can make what we do on the web better. 2:44 So in a previous life I designed for the theater. 2:48 I studied theater and music at university. 2:53 And then spent a few years doing all aspects of theater really, 2:56 but a lot of design for amateur and semi professional productions in Australia. 2:59 And so about a year ago I started to think whether 3:05 there was a correlation between what I used to do in theater 3:07 and what the professionals do in theater, and what we do 3:10 on the Web, and whether I could sort of make any distinctions. 3:13 And it's been a really interesting 12 months of sort of picking it all apart. 3:17 And so I started where I used to love doing the 3:21 thing that I used to love, really love, about theater design. 3:25 Which is the research phase, which is right at 3:29 the beginning before you put any pencil to paper. 3:31 The amount of depth that you'd go 3:34 into, especially when you're talking about context. 3:35 So, really whenever you'd start a project you sit down with the director and the 3:39 rest of the design team and you'd start looking at the context of the play. 3:44 And it usually revolve around three main areas. 3:48 That's your historical context, your 3:51 thematic context, and your technical context. 3:53 So, historical context. 3:57 So, every design that's produced has a historical context. 4:00 And that's not just theater. 4:04 Any design that is produced has a historical context. 4:06 And I mean, this can be a fixed state so it can actually 4:10 be fixed in time, or it could just be a broad, general idea. 4:12 And also, important to note is that, the historical 4:17 context can be something that is derived from the, the 4:20 work, the business, the text itself; or it can be 4:23 something that is kind of placed on top of it. 4:26 So in theater context, the director might have 4:28 a vision for what the historical context is. 4:31 So in theater, you, you kinda use a combination of all 4:34 the different aspects of design to get this historical context across. 4:37 You use everything from set to costume, to 4:40 sound design, to lighting design, to, to kind 4:43 of get across, to establish the era that 4:47 you're trying to kind of experience in the theater. 4:50 And each of these require quite in-depth research to 4:54 make sure that it's done in the most effective way. 4:57 So this can be, say, you know, beautiful use of down-lighting 5:01 and rough textures and dim color palettes to kind of evoke 5:05 a, a nocturnal, dirty, early 20th century London for Sweeney Todd, 5:09 for the most recent production on the West End of Sweeney Todd. 5:13 Which are interesting to note, is not what the original text was. 5:18 The director decided to make it in early 20th century, originally Victorian. 5:20 Side-note. 5:25 Or you know, it could be like, garish user color, and very 5:26 specific fabrics, and bold lines to evoke 1962 Baltimore for Hair Spray. 5:29 And this is something that, you know, we see on the Web as well. 5:36 So in our designs, we use layouts, color palettes, 5:39 typography, motion, and even sometimes audio, to evoke specific eras. 5:43 You know, whether that is specific, like this one, 5:49 which is 1962, clearly, or whether it's more general. 5:52 And it's the research into the right elements, which 5:57 ones to use that can just help us really 6:01 get the feel of an era across as soon 6:04 as somebody, like, you know, during the five second test. 6:06 As soon as somebody gets on the site, they get a real feel for 6:10 what they're, they're experiencing, and the emotions 6:13 that kind of go along with that. 6:16 But also, the, ooh, that's very light. 6:17 For the the research helps us avoid any kind of historical faux 6:20 pas that might happen in, say, type, typography choice or color choice. 6:25 So we want a thematic context. 6:32 So, thematic context is an area that we're probably quite familiar with. 6:34 It's themes. 6:38 But it's probably not something that we are 6:40 overly conscious of with the designs that we do. 6:42 So from a theater point of view, we're talking about things like themes, 6:46 subtext, any messages that the, the director or author wants to get across. 6:49 And when we transfer that concept to the Web, it's a similar idea. 6:54 It's the messages our clients are trying to get across. 6:58 The general feeling they want, the, their intentions. 7:01 And while a lot of us do pay attention 7:05 to these things especially ya know, when you take 7:07 into account things like stakeholder interviews, which give us 7:09 a clear idea of what they're trying to get across. 7:13 It's the level of detail that theater goes into that 7:15 I think is a really interesting thing to look at. 7:19 So for example, for the play Kursk which was at the Young Vic in London, 2009. 7:22 It's about a disaster that happened on a nuclear sub back in 2000. 7:28 So the design team led by a guy called Jim Bosa, who's quite an influential designer. 7:32 They got sign off to actually visit and 7:38 live on a nuclear submarine for a few days. 7:40 They sat down and interviewed the crew to find 7:43 out what life was like, sort of for extended periods. 7:45 They went around, they took measurements. 7:49 They, as I said, they actually stayed there so they got a bit 7:50 of a sense themselves of what life was like on a nuclear sub. 7:53 Even down to the smell. 7:56 Which I said was a mixture of diesel and urine. 7:58 Which is lovely. 8:01 >> [LAUGH] 8:02 >> But all of this kinda of, let's them get inside the context of the show. 8:03 So that the design that they produce is, as evocative 8:07 as possible, as soon as the audience kinda enters the theater. 8:11 Which was clearly effective, cuz they ended up being nominated 8:17 for Eventing Standard Award, which is quite rare for fringe productions. 8:20 So taking that opportunity to like live the subject matter. 8:26 To the intention of what it is that you're designing for. 8:29 You know, we, as I said, we kind of do cover 8:32 this off a little bit with stakeholder interviews and things like that. 8:35 But to have a deeper understanding as a customer, I think is 8:39 quite important, to actually properly experience 8:42 the product if you have the opportunity. 8:44 It gives us that additional level of 8:47 insight that can just make the design better 8:49 and kind of get really into the, the why and the, the feeling of the design. 8:52 So over the pass three years I have attended WEBDEVCONF in Bristol. 8:57 It's a great conference if, if you get a chance to go. 9:04 So I've attended it as a sponsor. 9:07 I've attended it as an attendee and I've attended it as a speaker. 9:09 So this year when I volunteered to help them do the branding, 9:13 that intimate knowledge of, of the organizers, of the conference, of the 9:17 attendees and of the venues just meant that I could take them 9:21 all into consideration when I was coming up with the design theme. 9:25 And kind of the slightly hacky charm of the conference, the 9:29 kind of hacky pulled-together charm of the conference, put me at ease 9:33 with choosing something that wasn't really traditional, which was in this 9:37 case kind of like an eight bit game design kind of thing. 9:41 Where I had to basically throw out a lot of the web design concepts 9:45 that I'm, I'm constantly saying, oh, this is best practice and we must do this. 9:49 Because it really, for me, it really kinda 9:55 captured the essence of the of the conference. 9:58 It was rough around the edges. 10:02 It had a very kind of let's try it and see what breaks kind of approach. 10:03 Which from reports from the the organizers and from the, the people who 10:07 are coming along to it this year seems to have worked quite well. 10:12 So it's kinda living that, living the theme and 10:16 really getting into thematic context, made the design better. 10:18 And then there's the constraints, the, the technical context. 10:22 So before you start any project, any project 10:26 at all, there are always gonna be constraints. 10:28 And within theater the main ones are technical constraints. 10:31 So the space itself you know, whether you have wing space, fly space, 10:34 all that kind of stuff budgetary constraints and time constraints and 10:39 I mean, that's pretty similar to, I mean, technical budgetary and time. 10:44 That sounds pretty similar to a lot of the projects that we do, as well. 10:49 But it's the approach that theater designers take 10:53 to the constraints that I find quite actually inspiring. 10:57 Cuz I don't know about you, but I love 11:01 to bitch and moan about the constraints that I have. 11:03 Time especially, and budget, oh budget is a big one. 11:06 That's, that's a good one. 11:10 But, in the eyes of theater designers, the 11:11 restraints are actually what makes the design better. 11:13 They see it as the framework that they can work within so 11:16 that they can think more creatively and come up simpler, more effective ideas. 11:20 There's a guy called John Driscoll, who, if anybody's seen. 11:26 Has anybody seen Charlie and the Chocolate Factory in the West End? 11:29 Not really a musical crowd here? 11:33 Just checking. 11:35 No, so he, he's designed things like Charlie and 11:36 the Chocolate, Ghost, the musical Enron, big big budget stuff. 11:38 But even he says, he says if you have to scratch your head about it 11:42 because you couldn't do the ultimate scenario, then 11:45 you end up coming up with something better. 11:47 And it's all because of the constraints. 11:49 Something to keep in mind. 11:52 So, that's before you even get into the design, so I, 11:54 I actually started this looking at set design specifically. 12:00 And the first talk I gave on this was all around set design. 12:05 But, I started to look a bit wider at theater design. 12:08 I thought it was, it was a bit more interesting to kind of break it out. 12:11 And, to be honest, I thought that the leap was quite tenuous when I started. 12:13 I mean, there's not really, on the surface, much that they have in common. 12:20 But when you break it out into the various areas 12:24 of theater design, and when I mean theater design, set design, 12:27 costume design, props design, lighting design, and audio design, you 12:30 start to actually see some correlations between the Web and theater. 12:34 So, set design you're talking about building a frame 12:39 for the whole sort of design to live within. 12:42 So it's fairly similar to the way that we look at layout. 12:45 Costume design. 12:48 It's all about dressing the vehicle for, for content to get across. 12:49 So, we could say that's something like content design, 12:54 or more specifically for us, something like typesetting, typography. 12:57 Props design, things to interact with. 13:01 Interaction design. 13:04 Lighting design, I think, is a really interesting one, and 13:06 I'll get into it in a bit more detail in a 13:09 bit, but really, what I can boil it down to 13:11 for us is the way we use color in our work. 13:13 Which I think could be a really powerful thing. 13:16 And then audio design was of course the hardest to marry to what 13:18 we do on the Web so I ended up marrying it to audio design. 13:22 So I thought that kind of made sense. 13:26 And then another thing that I kind of started cropping up that 13:28 I thought was quite interesting.was the fact that within theater you kind of 13:32 design a base layer, you design a base set,,and then you bring in 13:36 elements, take out elements and sort of alter them slightly to create scenes. 13:39 Which is very similar to the way that we do templating on the Web. 13:45 So as I said, been looking at this for 13:50 about a year, been pulling out all the various bits. 13:52 I've got notebooks filled with random thoughts of, of how 13:55 theater design might be able to impact what we do. 14:00 Which amounts to about three or four hours, so do you guys have time for that? 14:03 Is that okay? 14:08 No, okay cool. 14:09 I'll just I'm already about 15 minutes into it 14:10 so I'll just break it down to a few things. 14:12 So beginning with set design. 14:16 So once you've done your initial sketches, the next 14:18 step is to do what's called a white box model. 14:21 Now, a white box model the idea behind it is that it gives you 14:23 an accurate representation of the set, completely 14:27 devoid of any styling, which is very important. 14:31 Keeping the model devoid of color and styling and texture to begin with, and 14:36 lighting to begin with lets you kind of work with the design in its purest form. 14:41 And especially because what you generally do with a 14:48 white box model is you take it to the 14:50 rest of the design team, the production team, and 14:51 you let them figure out what they're going to do. 14:54 In the context of your design. 14:57 It give you an idea, also, from your 15:01 perspective of how things might flow within the space. 15:03 How the content might work within the space. 15:08 So it kind of provides a really nice framework. 15:11 And there's two approaches to doing white-box models. 15:14 There's the sketch model approach, which is the whole idea is 15:18 to get something built as quickly and as dirtily as possible. 15:22 Nothing is to scale, it's using the materials that you can find, my favorite 15:26 National Theater of Scotland, big theater company, 15:30 use cereal boxes for their white box models. 15:33 Quite cool. 15:36 But the idea is just to get the concept 15:37 across as quickly as possible, and as effectively as possible. 15:39 You see this a lot in small productions. 15:42 And then there's measured models. 15:43 Measured models are very exact. 15:45 They're all to scale. 15:47 Exact to scale measurements. 15:49 The textures, the, the materials that they use are as 15:51 close the materials that they intend to use as possible. 15:56 And it's very meticulous. 16:00 And this is, this is usually used for bigger productions, 16:03 things where there's a lot more at stake, big budget productions. 16:06 And these are, you know, really effective for making sure that you're 16:09 not going to make any cock-ups before you actually go and build something. 16:12 So I was thinking about this and really 16:18 this is theater's version of an interactive wireframe. 16:20 The whole concept around building something quickly, efficiently, 16:24 and cheaply to get the working idea of, 16:28 of your design concept across really marries up 16:30 quite nicely with the idea of a white-box model. 16:33 Interactive wireframes, who here uses interactive wireframes? 16:38 Okay, it's quite a few of you. 16:42 That's good, that's good. 16:43 The rest of you, pay attention. 16:44 The other ones, just fall asleep for the next five minutes. 16:46 so, you know, we can also call them interactive prototypes as well. 16:49 But the idea is that you'll, allows you to 16:53 kind of make those key content and you act and 16:56 interaction decisions early without making any decisions about look and 16:59 feel and getting caught up in the look and feel. 17:03 And more importantly, it really helps when you're trying to 17:06 communicate these things to your clients, to the key stakeholders. 17:09 Because keeping it devoid of that styling and the color means that you 17:14 can get those concepts across without getting them hung up on look and feel. 17:18 Cuz I don't know about you, but the amounts 17:24 of times that I've tried to show a concept 17:26 to my client and the first thing they, they 17:27 mention is, oh it's, that's the wrong brand color. 17:29 Thanks, thanks, I knew that. 17:33 Clearly you're paying attention to the right things. 17:36 So they're really effective for that. 17:41 And similar to the white-box models, there's a 17:43 scale that you can take with interactive wireframes. 17:46 You can either take the sketch model approach, and the idea is just to get 17:49 the concept across, build something that is 17:53 very hacky and works, and get it across. 17:55 Doesn't need to be indicative of the final design, but gets the concept across. 17:57 Or, you can go for the measured model approach, where you 18:03 actually really go through and think through, the full design, how 18:07 you're going to want it to, to look and then build 18:12 a prototype that, that can, communicate that effectively to the client. 18:15 So that's set. 18:20 Costume design. 18:21 So with costume, it's foolish to think that you're designing clothes. 18:23 Especially if the production looks like it's 18:28 a simple production, modern day, modern clothes. 18:31 The reason for this is because, when 18:35 you're designing clothes, you're designing for measurements. 18:36 You're designing for people. 18:39 You're designing for curves, hips, shoulders. 18:42 You're designing for a look. 18:45 But when you're designing costume, you're designing for character. 18:47 Which means that you not only have to design the look but you have to design 18:51 the emotional state, you have to convey, you 18:55 can convey an emotional state through the costume. 18:57 You're designing for sadness, for introversion, for inner turmoil or 19:00 conversely, you're designing for effervescence or or extroversion. 19:07 You're designing for the emotional states 19:14 through color, through texture, through pattern. 19:16 And this helps convey things about the character that aren't necessarily, 19:20 sort of, said in the play, aren't explicitly said in the play. 19:25 And not only is this an effective way to establish character, but it's 19:31 really effective to establish change in 19:34 character, which is quite a powerful thing. 19:36 So is anybody here familiar with Waiting for Godot, the play? 19:40 Okay, there's a couple. 19:44 Have you, have you seen Waiting for Godot on stage? 19:45 Brilliant. 19:47 Okay. 19:48 So Waiting for Godot, very seminal text. 19:48 If you haven't heard about it, look it up. 19:51 It's brilliant but there's a character called Potzo. 19:53 And Potzo is kind of like the antagonist of the piece. 19:56 He comes in and he's. 20:00 A pompous and arrogant and he's a cruel man. 20:03 He's got his slave with him. 20:06 And he kind of struts around the stage like he owns it. 20:08 And the costume that they choose for him, so in this production 20:11 this is the Roundhouse Theater production 20:13 on Broadway with John Goodman playing Pozzo. 20:15 They really showed that in, I feel they really showed that in his costume. 20:20 It's very tailored. 20:23 Everything is exact. 20:24 It looks, it, it looks like, you know, the clothes make the man here. 20:26 This is a man who, who can kinda strut about 20:30 the, the stage and not be mistaken for a vagrant. 20:33 But then in the second act, he goes through quite a significant change. 20:36 He comes back and he's blind, and he, he's bemoaning his station in life. 20:42 He's bemoaning his fate. 20:48 He basically becomes a bit of a fool. 20:50 Now his costume doesn't actually change that much, but there are some very 20:54 key things, where they change, they change, they remove some of the elements. 20:57 And they rough some of the others up. 21:02 So things like removing his tie. 21:04 Buttoning up his jacket, but doing it not quite right. 21:06 And even something as simple as turning down the brim of his hat, helps convey 21:10 this change in the character, and it 21:15 helps convey the emotional state of the character. 21:17 And it's very, very powerful. 21:21 So we can take these concepts and we can apply them to how we do typesetting. 21:23 Now, this can be choosing appropriate fonts 21:29 or actually getting into you know the rhythm 21:32 balancing of text all the rest of it because there may [UNKNOWN] we all know. 21:35 What happens when you choose inappropriate fonts, right? 21:41 Like, [LAUGH], it can, it can really mess 21:46 up the message you're trying to get across. 21:49 And it's the power, the power of appropriate font, the power of a typeface. 21:53 Can really, really effect what you're trying to say. 21:59 And actually the research suggests that it's more 22:02 important than a lot of us might think. 22:05 There's a study done by a guy called Kevin Larson at Microsoft, and Dr. Rosalyn 22:08 Picard at MIT, they came to the conclusion that, that good typesetting. 22:13 Interestingly didn't actually make much of 22:20 an effect on comprehension or reading speed. 22:21 however, good topography lead to the 22:25 readers having a better relative subjective duration. 22:27 So they could read for longer. 22:32 And increase their ability to perform well in certain cognitive tasks as well. 22:34 But the very interesting thing is that it actually induced a good mood. 22:39 So, good typesetting makes people happy, which is 22:45 quite cool, and this was a big study. 22:48 So if you're not familiar with tried and 22:52 tested methods of typesetting, because it is..it's a...a... 22:53 Some people see it as a, not very exciting field. 22:58 It is an incredibly, you can, it's a rabbit hole you can get lost. 23:00 It's very in depth and can be quite technical, but, very, very interesting. 23:04 I'd suggest picking up this book which is Elements of Typographic Style. 23:10 It's kind of the bible, and as actually Jason, mentioned in his talk yesterday. 23:14 Rich Russert, down in Brighton has made a web version of it. 23:19 So he's taken the concepts, and looked at 23:23 how we can implement, implement it on the web. 23:25 So I'd definitely recommend looking that up. 23:29 It's a little bit outdated but it's still quite useful. 23:31 however, I'm really interest, I'm also interested in the emotional states 23:35 that can be triggered by playing with some of these rules. 23:39 So not always following the best practices. 23:42 So on a subtle level we can play with things like type and measure and things 23:45 like I'm gonna get the wrong word leading tracking, leading the space between lines. 23:52 That's right, yeah, good. 24:00 so, but we can actually change the emotional 24:03 state of a person when they're reading this. 24:05 And so we can easily see this with things like, handwritten sites. 24:07 Things where they use handwritten fonts. 24:12 So this an art school by Jason Santamaria about sketching. 24:13 But thing that kind of strikes when you first start reading it is. 24:16 Because he's used, well he's actually used his handwriting. 24:20 It's got this really nice familiar kind of sense to it. 24:24 It makes me feel quite at ease. 24:27 And you can see this in brands. 24:30 People like Innocent Smoothies use this quite well, 24:31 where they use playful fonts to kind of 24:34 get the emotional state of the brand across 24:36 to you, the mood of the brand across. 24:39 conversely, you can go to any law firm website or even financial 24:43 institution websites and see the effect of serious type things that, 24:48 you know, the type of type that makes you feel like 24:53 you're in a place where you can trust what you're reading and. 24:56 And, you know, it's all quite serious and quite austere, but these decisions 25:00 are quite you know, you need to be quite conscious of these things. 25:04 When you're designing your sites. 25:09 But one thing that we don't really see much of 25:11 in the web is when people take it to the extreme. 25:13 And I'm really interested in this. 25:17 Cuz I think that there are times when we can 25:21 completely discard best practice like go actively against best practice to 25:24 achieve particular emotional states especially when you're trying to upset 25:29 people or you're trying to make them feel passionately about something. 25:33 It's not necessarily, necessarily in a good way. 25:38 And there are, areas we can look at to kind of get inspiration from this. 25:40 So modern poetry to me kind of plays with this a lot. 25:46 Especially since beat poetry came around. 25:50 The format that they, they put their poems in 25:52 actually, leads the reader on a journey through the poem. 25:55 Trying to evoke certain emotional states. 26:02 They play with things like font size, they 26:04 play with, with very importantly, measure as well. 26:07 So measure is the length of the line. 26:11 To make sure that you kind of, your going in the right flow of the journey. 26:14 And this is something that we could use to great effect on the web. 26:18 We're trying to evoke emotional states. 26:21 Then 26:23 there's lighting design. 26:26 So I mentioned before that I'm really interested in lighting design, 26:27 which is why I haven't focused on a specific part of it. 26:30 Lighting designers can wield some pretty amazing results 26:35 with a very, very small subset of tools. 26:38 [SOUND] 26:40 When it comes down to it, lighting designers use 26:43 two things, which is hue, color, and value, brightness. 26:46 That's it. 26:51 You can get caught up in the, the technology of what they use. 26:52 But when it comes down to it, that is what they use for all of their designs. 26:55 And this can be used to create tone, mood, setting. 27:01 It can be used to create focus. 27:05 Going back to waiting for [UNKNOWN]. 27:09 Many theater designers actually go so far as to say that if you 27:12 have a good lighting design it negates the need for a set designer. 27:15 Slightly contentious statement there. 27:20 But but if anybody seen a, a lot of the productions have 27:22 Waiting For Godo was a blank stage with a tree on it. 27:26 And that's it. 27:30 And the rest of the, the mood, 27:31 ev, everything else is conveyed through lighting. 27:34 And the other cool thing about lighting is you 27:38 can actually use lighting to create paths through a sett. 27:41 You can establish visual rhythm of movement through lighting changes. 27:43 You see it a lot in dance productions. 27:48 Or as I said you can just use it to create an atmosphere, which is quite nice. 27:51 And lighting is also and area where, constraints more 27:57 often than not, useful, as opposed to being a hinderance. 28:00 This is one of the first productions I ever did, where 28:05 I did the lighting design for it, it was, shoestring theatre, like,. 28:09 Our budget was in, i think, double figures. 28:13 And the theater itself only had ten lights. 28:16 Now, is it, sorry, I didn't even check. 28:20 Is anybody here involved in theater? 28:21 Okay, so there's, oh, there's one. 28:24 Brilliant. 28:26 Okay. 28:26 I really hope I haven't put my foot in it at some point. 28:27 Good. 28:30 So the theater had about 10 lights. 28:32 Ts. 28:33 Which is not much. 28:34 I mean most, decent theaters, you'll get a lighting 28:35 board that, well, you get a lighting board that 28:38 has about 20 to 30 channels at least, maybe 28:40 more, and, those channels can have multiple lights on them. 28:42 So ten lights is very, very, minimal. 28:45 But, the good thing about the play that we were doing, or musical, in this case. 28:49 Was that it was a very dark atmospheric musical. 28:52 Which meant that we could use, limited lighting, and just 28:55 use it creatively, to achieve some really good dramatic effects. 28:58 Using things like down lighting to create 29:02 shadows, using back lighting to create beautiful silhouette's. 29:04 And it was actually, the constraints actually made 29:10 the production better because I'm sure that if 29:13 I had a hundred lights at my disposal, I would've wanted to, to use them all. 29:14 So, it's sometimes, it's a an example of 29:19 when sometimes constraints are actually good for you. 29:22 And in the web, there's, some interesting use of these concepts of light and design. 29:27 Using color and brightness to kind of establish 29:33 visual rhythm in a page I think is 29:36 quite interesting or to subtly create movement, throughout 29:38 a page leading users on a particular path. 29:42 Playing with the concepts of lighting, focusing on color and brightness to 29:45 establish tone and setting, moods especially 29:50 when, you know, obviously coupled with 29:54 the research and the context that we were talking about before, can 29:55 really create a great sense and a great feel for the page. 29:59 So this one is a very literal example of using lighting concepts. 30:03 Through a design. 30:09 But I think it's really great, because it creates this visual 30:10 rhythm of the page and really sets a really nice tone. 30:12 Really nice and relaxed tone through using these lighting concepts. 30:15 The brightness. 30:19 Pulling focus to areas. 30:21 But there's also more subtle ways we can use this. 30:24 So who here's on Designer News, has read Designer News before? 30:28 Oh, wow. 30:32 I thought there'd be more. 30:33 Everyone look up Designer News. 30:34 If you're a designer it's a really, really valuable resource for wasting time. 30:36 It's basically like Hacker News. 30:40 Pardon? 30:41 >> Because we need more of it. 30:41 >> Oh, definitely. 30:44 We need more wasting time. 30:45 It's like Hacker News, but for designers. 30:47 Which if nobody knows Hacker News, it's basically a news aggregation site. 30:48 Done by the guys at Layervault. 30:53 Really, Really nice site. 30:54 So I look at this site everyday. 30:56 And when I was looking at it I did notice that they used a really nice subtle use of 30:58 brightness of, of values in their hues to pull focus. 31:02 So, I don't know if it's obvious to you guys but I really like the 31:09 way that basically they've used the same color palette for the header and the body. 31:13 But they've made it so that the middle is 31:17 brighter so, so it pulls focus right to the middle. 31:19 And I think that it works really effectively. 31:21 But then even then it's, there are more subtle uses of it as well. 31:23 So one of the things that they also do is whenever 31:28 you click on a link, and it changes to the visited state. 31:31 It goes to a very light gray, some people might see as a 31:37 bad thing because of readability and all the rest of it but I think 31:40 it's actually made it more effective because what they've done is this is the 31:43 kind of site where you skip down a page, you, you skim the titles. 31:47 And if you've already read an article you probably don't want to 31:51 go back to it so skip over the articles you've already read. 31:54 What they've done is they've made 31:58 your reading experience more effective and faster. 31:59 To get through the page. 32:02 And it's a really subtle use of altering 32:03 color and brightness to achieve an effect like this. 32:06 However, as with anything, these things need 32:10 to be backed up with research and testing. 32:13 As it would be with light and design in the theatre as well. 32:16 Well, maybe not testing so much. 32:19 But research and planning is really important. 32:22 But the thing that I'm excited about 32:24 is the potential, the potential things that could 32:26 come out of, of looking at web 32:29 design through a lightning design kind of mindset. 32:31 And then there's, 32:37 audio design. 32:40 So, audio and the web haven't really been the best of bedfellows. 32:42 I mean, really, the amount of times I've searched 32:47 for that tamp that is playing that irritating noise. 32:52 Has got me to a point where I really, really hate websites that auto-play audio. 32:55 And actually it means I am eternally grateful, 33:02 even though I do work for Microsoft part time, 33:04 I'm eternally grateful to Google for putting that 33:06 little speaker on the tab whenever audio is playing. 33:09 Its, awe, its made my life so much better. 33:11 But in theater, audio design is a very important part of what they do. 33:15 And apart from the obvious of actually being able to hear the actors when a, 33:19 when a production is might there's kind of two ways that they use audio design. 33:24 [COUGH] Which I think is saying we could look at. 33:28 Creating texture and providing feedback. 33:30 [COUGH] So, sound designers use layered sounds. 33:33 To build atmosphere and sort of change it's used a lot in, in changing kind 33:39 of when scenes re changing or emotional states are changing within the characters. 33:46 They use sound design to kind of underscore 33:51 this and make you feel it without even realizing. 33:53 In fact, they say that a mark of a good sound designer. 33:57 is that the audience hasn't noticed that any sound was used. 33:59 It's one of those things where to make it 34:04 as effective as possible is almost to make it invisible. 34:08 This is something that I feel this 34:12 idea of creating texture and creating atmosphere through 34:14 sound is something that we're being a bit rubbish at in technology as a whole. 34:18 And a lot of it comes down to the fact that our sound technology 34:23 hasn't been great in things like laptop speakers and in things like mobile phones. 34:27 so, as an example, has anybody here, did anybody 34:34 here own a Nokia phone, in the early 2000s? 34:38 Yeah, yeah. 34:40 The alarm, on the Nokia phone around 3310, I 34:44 think it was deserves a special circle of hell. 34:48 it, it was, this piercing series of, of beeps, that was 34:53 very, very quiet to begin with, and then all of the 34:57 sudden became too loud to bear, to the point you just 35:00 wanted to pick the phone up and throw it at a wall. 35:02 It's got, it actually got to a point where I 35:05 was hearing the quite beats elsewhere, and getting really anxious. 35:08 It's not, it's not a feeling that you want to wake up to in the morning. 35:13 It's not the right mood that you want to evoke with sound. 35:16 And actually, I mean, iPhone, not that much better, to be honest. 35:19 Let's see if I can get this up here. 35:24 so, one of the original alarm sounds for 35:27 the iPhone before they got their act together. 35:31 Sounded like this. 35:37 See if I can get it to the mic. 35:37 Oh. 35:41 [NOISE] [LAUGH] 35:42 I mean. 35:48 That's not what you want to wake up to in the morning. 35:49 Is it? 35:51 It's not going to put you in the right frame of mind to start the day. 35:51 And a lot of this comes down to, as I said, it's the technology. 35:56 They needed something to cut through noise. 35:58 That had very shitty speakers. 36:00 So they needed something that was piercing. 36:02 The good thing is is that technology has obviously evolved. 36:04 And we're getting to a point where we have. 36:07 bet,better, views and also a better 36:09 understanding of what may be more appropriate. 36:13 So, for example, one of my, my current alarm on my iPhone is this. 36:16 It's just, it's 36:20 just really nice, it's a nice way to wake up in the morning. 36:25 It makes me feel relaxed. 36:27 This is what audio design should be about. 36:29 And, and this is the thing. 36:31 It's, it's something that I'm really interested. 36:34 I think audio design is gonna be one of 36:37 these areas that is going to start getting a 36:38 lot more attention because people are starting to think 36:40 about how we, we use audio in these contexts. 36:42 Thinking about the right context to evoke the right mood. 36:46 And if you're interested in it there is a, dark wood Andrew 36:49 Spooner, who's done a talk called Why did the First Beep Beep. 36:52 I'll put it in, I'm gonna put some talk notes up that I'll share later. 36:56 But you can check that out. 36:59 But it's something that I think we haven't really [INAUDIBLE] for the web yet. 37:01 And the only examples I could find for the web. 37:05 Were generally in digital art. 37:08 Where it was actually just, it was purely to 37:10 evoke mood, but I think it's something that we 37:12 could look a little bit more at, and it's 37:14 something that I am interested in looking at next. 37:15 And then the other, as I said, is feedback. 37:18 So something that you might not 37:21 have noticed that happens with theater designers 37:22 with theater, with sound design, is that quite often the audience is recorded. 37:25 And the reason the audience is recorded is so that they can 37:30 then loop back the sound from the audience back into the auditorium. 37:33 The idea is that it's creating feedback for the audience 37:39 to get a better response, to get a better reaction. 37:43 So the idea being if the audience thinks more people are clapping. 37:46 Then they'll clap a bit louder. 37:50 If the audience is laughing, people will laugh louder. 37:52 It's a really great way of, of providing 37:55 this subtle kind of feedback to the audience. 37:58 and, to be honest, I think the feedback is probably one of 38:01 the areas that we, we are starting to test with audio design. 38:04 The only thing is, is that I think that it's very much 38:08 exclusively in the area of apps at the moment both mobile and web 38:11 apps, so the only sounds that I'm getting through my browser are 38:15 for things like Facebook, for Google, for for Gmail for things like Flack. 38:20 They're web apps. 38:25 And I understand that they make sense 38:27 there because they're trying to mimic the way 38:28 apps work which is kind of, you know, always had some kind, some level of sound. 38:31 But I think that for us building websites this sort of bringing in audio cues 38:36 as well as visual cues to just in case they don't have the speakers turned on. 38:41 But adding the audio parts creates for a bit more an immersive experience and makes 38:46 the experience feel more crafted, which I think is a really really nice thing to do. 38:51 And saying that it's really important to make your designs stand out. 38:57 So, I'm almost done. 39:01 I don't know how much time I've got left or how much time I've done but 39:03 there's one area of theatre that I just wanted to to pull out before 39:08 I go, which I think is kind of pertinent to us as web designers. 39:11 When I was doing the research, one name kept on popping up, and it 39:16 was Jocelyn Herbert, who is a bit of a super star within British theatre. 39:19 She's worked with the likes of Ianesco, Beckett, Laurence Olivier. 39:27 Done a lot of films. 39:31 She's quite good. 39:32 But, a lot of what, she does has been called minimalism. 39:33 But she doesn't see it this way. 39:37 Lindsay Anderson, who's a famous director and writer, said about Jocelyn. 39:40 She doesn't really think there ought to be sets. 39:43 This is not the same as minimalism. 39:47 It simply means that the fewer elements there are on 39:49 the stage, the more perfect each individual object needs to be. 39:52 As Jocelyn herself sees it, what we were there to do was 39:58 to present the play as close as possible to what the author intended. 40:02 To use the minimum of scenery and props, i.e., 40:07 only those that served the actors or the play. 40:09 Nothing that was there for decorative purposes only. 40:13 Unless the text or the style of the play demanded it. 40:16 Which I think is a really interesting concept 40:19 to think about and take to web design. 40:23 [SOUND] 40:25 This is a really kind of, well, slightly brief 40:28 dip into the world of theatre design and web design. 40:31 But the whole point of it is that we should 40:33 be constantly looking at the way that our processes work. 40:36 And I'm really interested in looking at how 40:41 other disciplines kind of factor into this, as well. 40:42 So that's what I'm gonna be focusing on for the next 12 months. 40:45 Because when it comes down to it, it is up to us. 40:50 And I think I won't, Simon Colston put in very, very succinctly with our 40:53 responsibility and our role within the Web when he said, we are the web. 40:59 We are the makers, the explorers, the end users. 41:02 So let's be smart about our decisions, and let's stand on the 41:05 shoulders of those who came before us or who work alongside us. 41:08 To shape a discipline that helps us all work 41:11 with confidence, intelligent experimentation 41:13 and at times, even brilliance. 41:17 Or as Jocelyn said, there seems no right way 41:19 to design a play, perhaps only a right approach. 41:22 It's very nice. 41:26 Thank you very much for listening and coming along [SOUND] 41:28
You need to sign up for Treehouse in order to download course files.Sign up