Finding a Common Language with Developers
Lesson 20 from: Modern Web Design DemystifiedAndy Pratt, Jesse Arnold
Finding a Common Language with Developers
Lesson 20 from: Modern Web Design DemystifiedAndy Pratt, Jesse Arnold
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
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 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.
Jesah Segal
From A to Z, this class methodically covers everything you need to know to create a website from scratch. Great class. The teachers are great too.
Student Work
Related Classes
Branding