Welcome to Modern Web Design Demystification with Andy Pratt and Jesse Arnold. I'm your host Vanessa for today's course, and if you aren't familiar with Andy and Jesse, both have been creating award-winning interactive products and media. They're here today on CreativeLive to teach us the ins and outs of Modern Web Design. Let's give 'em a huge CreativeLive welcome on stage, Andy and Jesse. (applause) Hey.
How we doing this morning?
There you go.
What are we going to be covering? What is this course about?
Yeah, that's a really good question. Basically what we want to do is, we want to take some of, maybe some of the myths around Modern Web Design since there's a lot to learn and a lot going on, and kind of dispel a lot of that stuff, and basically talk about how we communicate with our clients and how a designer is just one piece in the chain of how a website gets made.
Awesome, so I know you have a lot of material to cover, I'm gonna go ahead and take ...
a seat, and let you guys take it away.
So, all right, well thanks everyone for joining us, appreciate all the time you're committing, and thank you out there to all of us joining us live via the Interweb. So, you know, we're really excited to be here to kind of talk about how to simplify the process, and how as a designer, you can kind of figure out the workflow that's right for you to work with your clients and your developers. Now, there's no question, that as designers, you're going to have the opportunity to create an interactive experience or a website in your career, however, it could be a little intimidating if this is new to you. So what we want to do is just quickly talk a little bit about the class, you know, what are we gonna be doing? What are we not going to be doing? This is a question that I see a lot. You know, I'm new to web design and I just want to ask for some advice about the best way to get started, and, you know, you're gonna kind of see that whether it's talking to students, whether it's kind of reading forums, this happens over and over again, it's very intimidating to kind of have this, you know, new, giant, kind of industry, that's moving very, very fast, how do we keep up with it? You know, how do you kinda understand that there's different skill sets and where do you fit within the entire picture? So let's talk a little bit about what we're gonna explore. The first thing we're gonna do is we're gonna talk a bit about just some basics about responsive web design. So we want to give you guys kind of a vocabulary and some of the key concepts, so you guys can build a foundation and kind of take your websites to the next level. Something that's really crucial in this is how to collaborate with your clients, right. This is something that, you know, I remember just in design school, I was so focused on techniques and skills, and there's this whole other kind of thing that you need to figure out how to develop, which is how do you kind of tease out the right information? You know, how do you make sure that what you're designing is what your client needs, and it's meeting their goals, and it's meeting the users that we're targeting for? Something that you might be a little more comfortable with is how do we establish the visual language? And with this it's gonna be a little less about kind of learning Photoshop, right, but what we want to do is kind of give you some lightweight tools and tricks so you can kind of make sure that when you do kind of get into your design phase, that you're able to really make sure that you're headed in the right direction. And of course, websites, there's so much about the features and the functionality, so how does that get captured? You know, how do you kind of take something that's, you know, pretty high level, like goals, and translate them into very specific and granular features and functionality? You know they always say, content is king, and certainly with so many of the experiences, you're gonna find that if you don't have great content than it doesn't really matter what you design, it's really gonna kinda live up to the expectations of your users. So what we want to do is talk a little bit about just fundamentals about content. And then we also want to talk about typography and grids. Now again, as designers, this should be something that's very familiar and hopefully a passion for many of you, but, you know, as we kind of move into more of the web design medium, there's some new things to kind of consider, and there's some new opportunities to take advantage of and there's some real, kind of, considerations, on how say your typography and grid need to be considered in order to make a very effective experience. So, what are some of the things that we're not gonna explore? So, the first is, market validation. So, Jesse and I, we are not gonna tell you if your product or your client's product is a good idea or not (laughing). We're not gonna be able to tell you if there's a spot for it, if it will be successful, that is definitely kind of outside the scope of this class, but that doesn't mean it's any less important. We're also not really gonna be diving into brand strategy. So, you know, talking about how to create mission, vision, and values, value proposition, brand architecture. All those things might be something that's already within your skill set, and so this would be a great way to kinda dovetail that type of knowledge into creating a touch point, like a website, but we're not gonna really be talking too much about the strategy. It doesn't mean that we're not gonna be talking about certain elements that would go into, say your brand language, or how to identify kind of the interface personality of your experience. And I mentioned a little earlier that we're gonna be talking a little bit about content, but we're gonna be pretty light on content strategy. Again, these are things that are still very important and we will touch on them a little bit, but it's really kind of best to consider as like the tip of the iceberg. And the other thing that we're not gonna dive too much into is user research. So this doesn't devalue the importance that user research plays in making sure that your website kind of meets the needs of your users, and hopefully kind of creates that engaging experience, but it is kind of something that although we will talk a little bit about that's really also outside of the scope of this class. So, you know, when Jesse and I were trying to come up with this class, we realized that one of the things we need to do, is figure out how do we kind of string all of this stuff together. So what we did is we created a kind of fake project that we're gonna talk through a little bit, and within that fake project, we've created a bunch of different materials to help kinda illustrate some of the things that we're talking about. Some of the concepts, and some of the deliverables that we want you guys to be aware of, that you know, kind of show a more modern workflow. So if we go through these really quick. The first one, Product Brief. So, you know, one of the things that we'll do, is we will create this thing called a Product Brief, some people might call it a Creative Brief, it's a little bit different but we started to create one for our kind of project here, so you can kind of see the types of things that we put into our Product Brief. We've also created a document that shows some example Dev Tickets, and this will be something that we'll kind of get into a little bit later, but as we're kind of thinking about how to translate and capture the features and functionalities, there's some best practices on how you want to kind of communicate that information to your developer. So we've created this document that's gonna show some examples of how to do it and also ones that are bad. We've also created a Sample Sitemap and Wireframes. This is might be a deliverable that you're a little more familiar with, but this is also something that's going to be really kind of key and shows how we're thinking to start to prioritize certain types of content and help kind of identify the hierarchy. With that, we were able to take some of the Wireframes and turn them into Responsive HTL Wireframes. So now all of a sudden you're in kind of a browser and you can kind of see how those static wireframes can come to life in a browser. We also then created a Pattern Library, which is something that we're gonna dive into a lot later, and, you know, by the end of this, you're gonna be like, oh my God, that's awesome, a Pattern Library. Right now, it's not gonna mean anything, and that's okay, we'll get there (giggles). We also created an HTML Style Tile, also what does that mean? Oh man, you're gonna learn about that. We've created an HTML Homepage for this which is kind of the example you see here, so you can kind of see how we took all this and built this example page, so you can kind of see, look underneath the hood, so when you want to dive into code and kind of look at how we structured things, you can kind of do that. We've also supplied some the Visual Comps from the Photoshop files so you can kind of see how we laid it out, and how we organized our files, and then Jesse and I, you know spent, whew, days coming up with this resource list, just figuring out, what are all the things that we want you guys to know, and we've given you about three years worth of material to kind of figure it out and dive into that's presented in a nice handy PDF, so (giggles).