Skip to main content

Modern Web Design Demystified

Lesson 3 of 37

The Designer as Co-Creators

Andy Pratt, Jesse Arnold

Modern Web Design Demystified

Andy Pratt, Jesse Arnold

Starting under


Get access to this class +2000 more taught by the world's top experts

  • 24/7 access via desktop, mobile, or TV
  • New classes added every month
  • Download lessons for offline viewing
  • Exclusive content for subscribers

Lesson Info

3. The Designer as Co-Creators


  Class Trailer
Now Playing
1 Class Introduction Duration:09:10
2 The Design Flow Basics Duration:18:27
3 The Designer as Co-Creators Duration:06:48
4 Get to Know Your Material Duration:17:07
6 Mobile First: Working Small Duration:09:46
9 Prioritize Your Users Duration:39:42
11 Intro to Scrum Duration:04:24
12 User Stories & Epics Duration:35:53
13 Content Basics Duration:27:40
14 Defining the Visual Language Duration:22:31
15 Starting with Type Duration:35:31
16 Starting with Grids Duration:15:40
17 Gutcheck & The Product Brief Duration:22:03
18 Working With Developers Duration:12:33
19 Communicating with Developers Duration:16:25
21 Code Literacy Duration:04:37
22 Sitemap & Wireframe Basics Duration:33:48
23 Prototyping Basics Duration:12:02
24 HTML Prototypes Duration:13:28
26 Developer Lingo Duration:07:23
28 Designing for Performance Duration:18:19
29 Progressive Enhancements Duration:07:00
31 Workflow Examples Duration:20:25
33 Alternative Workflow Duration:23:04
34 Alternative Workflow Part 2 Duration:21:52
35 Tech Requirements Duration:21:53
36 Retrofitting an Existing Site Duration:12:15

Lesson Info

The Designer as Co-Creators

So I just wanted to make a couple kind of quick final points before we move on. And these are the types of things that we want you guys to consider as you look at a lot of the stuff that we're gonna be talking about. Kind of keep these in the back of your minds. So the first is that if we think of the design process, the webdesign process. It's really kind of like this mobile. You kind of have all this stuff teetering and it's trying to kind of keep everything in balance. You know, we have budget and timeline, which are just these factors that are reality. You have kind of client expectations. They bring on their own expectations. They have their own goals, which could be business, creative, technology, content. You have your users. What are the user's needs? What are their wants? Can you support them and how do you prioritize them and how do you understand what they really are? And then of course, you have technology requirements and technology restrictions. You just have to be aware ...

of those. So if we kind of think of this as a way to frame everything you're doing, it creates a very kind of specific lens that you need to look through anything that you're designing and you can't just kind of keep it to yourself. One of the big things I think that's different between say webdesign is how we are co-creating. When I would do say a brochure for a client long ago or even a logo or something like that, it was a much more internal process. Now, of course, it involved the client and there was a lot of collaboration that would go back and forth, but the reality is that it was much more of this kind of little back and forth process and it didn't kind of represent the orchestration that happens in kind of experience when you are creating a website or an interactive experience. So it's much more kind of about this co-creation and what we wanna do is kind of show you how to make that happen. Now with that co-creation comes collaboration and so I think everything is really looking for ways to make it about collaboration and not documentation. And this also kind of represents that shift from waterfall where you really needed to document everything because you had to kind of get that final approval before it would go into that next phase and look for new ways just to have conversations with your client, to create dialogue. The product itself is the website. It's not gonna be these kind of fancy artifacts. And that very much leads to this thinking which is choose the right level of fidelity for the right type of communication. So often as a designer, I want to make things look good. But sometimes speed is more efficient than making it look good. And as a designer, that can be a really hard pill to swallow. But keep in mind that the end goal here is the website. It's not going to be all these beautiful artifacts that you're creating that are likely gonna be outdated very quickly. There's one thing that hopefully won't be out of date and that's gonna be what's in the browser. So the browser is the product. That's the canvas that we are essentially trying to build on top of. So no matter what kind of process you use, no matter what your skillset is, what we wanna make sure is that you guys internally are kind of looking for ways that you're comfortable with to get to a browser as quick as possible. Now for Jessie, that means something different than say the way I would do it. But we have the same type of goal, which is to kind of figure out how to get into the browser as quick as possible. And the other thing that's really important is we just wanna be clear that there's really no one way to do this. This is kind of like a couple of our ideas. This is how we work. This is how we've had success. You know, the tools, the technology, the techniques, they're all gonna evolve. They're all moving very fast. But that doesn't kind of mean that sets up this one kind of way that you have to do things. There's two kind of factors that are really important as to why there's no one way to do this. The first is gonna be your own team. What are their skillsets? How do you kind of work with each other to figure out? It's not like if you were to go to a company, everyone's gonna get fired because they saw some new speech that's some type of new way to work. Like let's get rid of our team and let's just start over. That's not gonna happen. The reality is, you're gonna have to work within the team and the skillset that you have. Of course that can evolve over time and that's something that I think as passionate people you're gonna look to do, but that doesn't mean that you don't have to kind of really consider that. And then the other side, of course, is just your clients. So your clients are gonna have their own culture. They're gonna have their own kind of process in the way they work. And so it's gonna be really important to understand what are their needs. It'd be one thing to say, you know what, we're just not gonna do Photoshop comps, as an example. But they may have a need for something like that. They may need to have some type of representation of the experience because they need to sell things up to their stakeholders. Your clients often have people above them that they need to kind of show what's going on and the progress that's being made. So you should always be trying to push them and educate them, but there is that balance between education and really understanding kind of their culture and their process so you can make sure you're setting them up for success, which is gonna set you up for success. I actually have a couple questions coming in from the chatroom and maybe you, Andy, can help me answer this. Does this class require any webdesign knowledge at all? Let's see, so I would say ideally you have a little bit. I think what we're gonna try to do is show you based on your knowledge as a designer, the types of things that you need to learn in order to kind of make sure that you're dovetailing with the right team. So you're not gonna need to learn how to code. That's gonna be kind of the big question and that'll be something that we'll address. We're not gonna teach you how to code. We're also not gonna teach you how to say use Photoshop, but what we do want you to do is kind of start to develop a little of that empathy for your team. So I think you don't need to have any web experience, but hopefully you're gonna have a little more confidence to try to take on some of those jobs and kind of find the right fit for you. It would be naive not to walk into a web production environment and not understand that that's where it's going. Exactly. It's learning just enough so you can have more informed conversations.

Class Description

Online web design is not just about choosing fonts, colors, and layouts. The days of throwing a static visual comp over the wall are ending. Designers are now encouraged to work side by side with clients and developers. In Modern Web Design Demystified you’ll learn how to communicate with developers and collaborate with your clients in order to design websites that function as well as they look. You’ll learn about: 

  • The fundamentals of responsive web design
  • Working with Clients to identify and prioritize goals
  • How to communicate with Developers
  • Best practices for project workflow
In this online web design course, Andy and Jesse will share real world case studies to help you understand exactly what goes into creating and launching a website from the ground up. They’ll tell you about the tools they use and offer tips on working with everyone from the coder to the client.

High-quality web design is complex, but it gives businesses and orgs the opportunity to really connect with their users. Learn the ins and outs of the entire web design workflow process in the Modern Web Design Demystified course.

Bonus materials include: 
  • Sample Dev Tickets
  • Responsive HTML Wireframes
  • HTML Pattern Library
  • Sample High Resolution Visual Comps
  • and more! 



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.


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.