Modern Web Design Demystified

Lesson 20/37 - Finding a Common Language with Developers


Modern Web Design Demystified


Lesson Info

Finding a Common Language with Developers

So the byproduct of all this is a common language. So now we're in chat, now we're in these documents, now we're meeting in person during hack sessions and during whiteboarding sessions and so it wouldn't help if we were using different words to talk about the same things. So on the left, it's very easy to take a given item that we all understand and call it something different. A designer with a marketing background may call this a call to action. A developer who needs to get this in the browser may be thinking of this as an input method. We're talking about the same things but we're having this conversation where we think there's two elements on the page. It's a button guys, it's the button you know what I mean? Agree upon a common name and convention for things and call it what it is. Meet in the middle. And if it makes sense to begin using, there's real convincing effort that it is an input method and then agree that it's input method and shift but see when you're using the same te...

rms to describe the same thing and then come to consensus around what that thing's called. 'Cause here is where it really makes a whole lot of sense. So on the left is your layers in Photoshop. On the right is the markup in HTML. The words I use here should be the words I use here. That's the way I've always thought about things. This list, linear design wise, matches this list, linear design wise. It's the same thing. But it takes maintaining this open dialogue and it takes something like the component inventory to really dial that in and then you don't have to say, "Oh what's a hero, is that Superman?" Yes it is actually. It's a pig picture of Superman. It's the convention you've come up to describe this big leader header image and it's a shorthand that you've all agreed upon and we're gonna call it that in both places and so we use it there's no misinterpretation. I don't know why this seems so obvious to me and it sort of resonates, again I've shown it and talked about with both designers and developers. It takes, again, some of the guess work out of things. But it takes discipline on your part if you're gonna work in layers in Photoshop land, you have to structure and organize your Photoshop files. They have to have some structure. The other good thing about modeling your Photoshop files like this, they're modules. Sometimes I like to put a button way over here that doesn't really obey the rules of the stack 'cause that's how I know how to do it in Photoshop, I have to start making compromises, I need to make it a component, I need to get this all into like a thingness, it needs to be a thing, it needs to be a block. So I need to train my mental model to understand that this is how things go together, this is how things get assembled. So I find the back and forth play to be rewarding as more and more, I work between both things. And just to add something really quick, how I'll work is it's one thing to say, "Yes get all your layers organized." But at what point right? Because the thing is you're still kind of in play mode at the beginning and it feels, at least for me, when I work that trying to be more aware of the organization is limiting the speed that I need in order to just kind of get through a lot of bad ideas before I can find the good ones. So start at a high level, right? Make three folders, header, body, footer. Just start organizing at the simple level and then when you need to go back and clean things up, then you can kind of even get more granular, throw out the layers you don't need but just kind of think of it in like broad strokes at first and then as things get more final and approved, then it'll be easier to kinda clean up. But don't feel like you have to go through this as part of that discipline right at the beginning, or at least I don't. I look at that more as like when I'm basically ready to go and handing those over but start as organized as you can get just from a high level, it's gonna be a lot easier. Oh yeah, like after at the end of every work session, I have to regroup all my work. Exactly. 'Cause no matter how many groups that I make, they're great. When I draw, I'm drawing. And drawing just means I'm not thinking like that. Andy's right, it's really important, it's after I've, 'cause again you can't exist in both hemispheres at the same time like you're loose or you're sharp, loose, sharp, so let yourself be loose and as you're wrapping up for the day, sort of organize your collections or week or whatever makes sense for you. But you don't have to do it every time. I just wanted to point again, the nesting structure of this. So my group has objects. My organism has molecules and an HTML. That nesting is carried through, so it's not just the names but it's also the nesting and sort of grouping. So the importance again of shorthand, of common language, hero, this a term that MailChimp uses a lot in their UI, it's called a slat. And what's a slat? It's a horizontal list element with featured images, sometimes icons with a button, text, warnings and labels, that's a long name for a thing, you know? So where they came up with this, it's a slat because the analog nomenclature is your building, a house or any sort of structure, you're using slats and so it's this horizontal beam. And so we're heading towards this place of pattern libraries, we're gonna need shorthands for things.

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! 


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.