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
Code Literacy
So code literacy. This is again, we're not learning how to write code, but we are learning how to read code. So all browsers come with a function called Inspect Element, which we'll dig into in another segment, which allow me to click on any object in the interface and see the associated markup underneath it. Just a general overview, just to get everybody on the same page, you're gonna be looking at HTML and you're gonna be looking at CSS. And they have some specific rules. Again, you don't have to be a maestro in it but you need to understand the mechanics of how it's put together. HTML tags, the good news is HTML was written for anybody to use. Like if you look at programming languages, capital p programming languages, it hurts, it hurts my head. I don't understand. But HTML, it's like a series of nested dolls. It's just here's a container that contains this container, that contains that container. Every container has a start and stop. And what I love about the designers of HTML is I...
understand that metaphor. My head is at the top of my body and my feet are down below. Oh dude, thanks for keeping it like (clicking) crystal, crystal clear for me. Can't mix that up. Although some people will put the header down. But the idea is that at the element level, it's written in such a way, and more and more with HTML five, you have more and more of these elements that are written in such a way that are more semantic, describing how they relate to each other. So again, just to be clear. Starter tag, closing tag, content in between. That's about as much as you need to know about HTML to start, alright? We're gonna add classes to these things. CSS classes work like this: I'm gonna have a name, this is gonna be maybe a component name. This is some of that name space, this would be slacked, right? It's gonna have a property, we'll say that's color. It's gonna have a value. You're, as a designer in the beginning, all you do is you live in value land. This is as you're learning. The developers, you're gonna work with a developer to sort of get the nomenclature around the classes together. But all your editing are gonna be these sort of value blocks and this is what that looks like. Again, CSS Guidelines is a great resource as far as learning CSS statements, how it's put together. And he gives this breakdown. So this is my class name, baz. Here are the properties associated with that class name, so anywhere I put baz on an HTML element, it'll be displayed as a block, background color green, and color red. Again, I was telling Andy I love how they use green and red here. Which are statements you can use in a browser. You're gonna have to get used to seeing hex colors, which I'm sure most of you are familiar with on some level. And again, CSS Guidelines, we'll walk you through a lot of that. The reason we're doing all this stuff is so that we can be just a little bit more informed when we have a conversation and we create a ticket in one of these project management tools. I can no longer tell a developer, I need to change the sidebar from purple to blue, please. (laughing) I need, I feel you need to update the background color of .aside-secondary, which is the class name of that object, to .primary-blue, which is the class name for that color. So and if you can, also give them associated hex colors so you know you're talking about the same thing. Again, we'll take a look at how we get all these values from the browser. So again, things to remember, the days of design and dash are over. We're in a long term relationship, we're goin' steady, with our developers. We can utilize collaborate documents like chat, hack session, white-boarding to stay connected. We're gonna establish a common language of parts that will make for iterative parallel efforts. And then as designers, it's our responsibility to read some code.
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