Lessons
Day 1
1Class Introduction
09:10 2The Design Flow Basics
18:27 3The Designer as Co-Creators
06:48 4Get to Know Your Material
17:07 5Responsive Vocab: Floats, Flows, & Images
11:58 6Mobile First: Working Small
09:46 7Future Friendly: Embrace Unpredictability
14:17Collaborating with Your Clients
13:52 9Prioritize Your Users
39:42 10Best Practices for Defining Success
08:58 11Intro to Scrum
04:24 12User Stories & Epics
35:53 13Content Basics
27:40 14Defining the Visual Language
22:31 15Starting with Type
35:31 16Starting with Grids
15:40 17Gutcheck & The Product Brief
22:03 18Working With Developers
12:33 19Communicating with Developers
16:25 20Finding a Common Language with Developers
06:28 21Code Literacy
04:37 22Sitemap & Wireframe Basics
33:48 23Prototyping Basics
12:02 24HTML Prototypes
13:28 25Code Literacy & Developer Tools
11:46 26Developer Lingo
07:23 27Interface Personality & Behavior Galleries
17:27 28Designing for Performance
18:19 29Progressive Enhancements
07:00 30Designing a System: Discovery to Pattern Library
12:25 31Workflow Examples
20:25 32Applying the Style Guide to the Pattern Library
09:08 33Alternative Workflow
23:04 34Alternative Workflow Part 2
21:52 35Tech Requirements
21:53 36Retrofitting an Existing Site
12:15 37Project Cupcake: Building a Site from Scratch
24:08Day 2
Lesson Info
Class Introduction
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. Hey. How we doing this morning? Really good. 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. Sure. Thank you. 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).
Class Materials
Bonus Materials with RSVP
Bonus Materials with Purchase
Ratings and Reviews
CityGirl
I've already taken several web design classes, but there were still some details that I found confusing. Andy and Jesse did a great job of explaining things like; programming languages and how they interact to form the structure of a site, work flow responsibilities between team members and the blurry lines between them; and agile methodologies applied to work flow. They used case studies to illustrate how this all happens, where variations crop up, and how to address them. If you're new to web design, or just want to understand the functions of other team members, this is a great real world look at the whole process. I haven't found this in any other class, either on-line or local. Andy and Jesse are both very experienced working designers with current knowledge. They're very responsive to questions and seem to really enjoy teaching. Having two instructors is a great benefit because you get double the perspective, knowledge, etc.
Junko Bridston
I worked with Andy when he was a Creative Director at Funny Garbage, a design studio in New York City. I found him to be knowledgeable, articulate, and lovely to work with. I learned so much from him at the beginning of my career. In response to a previous comment: it seems silly to dismiss this class because Andy wears t-shirts with his blazers. If you think leaders only wear suits and ties, then maybe this class isn't for you. But if you want to learn from someone with loads of experience and a friendly manner, I really recommend it. You won’t be disappointed.
user-3d865b
I was looking for a class that would not only address the web design basics but also their place and function as part of a workflow. This class did not disappoint and Andy's and Jesse's engaging presentation style made it easy for me to follow along during the 2-day live session. By using real life examples, the presenters provide plenty of tips and strategies how to best work with clients and developers alike — the many, often intangible ingredients that go beyond technical expertise and can make or break a project. Highly recommended.
Student Work
Related Classes
Branding