Transcript: Designer versus Developer

by Tim Wright

This is the transcript for The Dirt episode: Designer vs. Developer

Tim: Hello and welcome to episode seven of The Dirt. I’m your host, Tim
Wright and I’m here this week with Mark Grambau. Mark is a Howard
Stern fan very avidly. A 2010 national windsurfing champion, which we can
get into later. And Mark is also a super hip dude and he participates in
Formal Friday here at Fresh Tilled Soil with me. Mark say hello.

Mark: Hello! Hello loyal audience.

Tim: So we’re not here with Steve this week.

Mark: That’s unfortunate. So what’s Steve up to? Where is he?

Tim: You wouldn’t believe me if I told you what happened to Steve last
night.

Mark: Try me. Try me.

Tim: Okay so we had an event last night and Steve was out at one of the
bars and he was getting a little liquored up.

Mark: As he does.

Tim: A cop pulled him aside and they were talking to him. And it was
actually outside of Boston Common near Park St.

Mark: Jeez was he arrested?

Tim: Well no just out of nowhere he got mauled by a wolverine.

Mark: Oh.

Tim: It was just blood all over the streets. So Steve is recovering nicely
and he will hopefully be back with us next week with some great stories to
tell about his wolverine attack.

Mark: And as a public service announcement if you’re around Boston Common,
watch out for the infestation of wolverines.

Tim: Yes. So this week we’re actually going to Q and A each other. Though
the format is a little a different. I’m going to ask Mark some questions
that developers want to know from designers. Maybe some of them are things
that I personally want to know. And some of them are things that I think
that developers are maybe too embarrassed to ask designers. And we’re going
to get it all out.

Mark: Yeah. And I’ve got some questions for Tim as a very accomplished
developer. And I’m only sort of getting started on my curve of
understanding how the hell this stuff works. So Tim’s going to help me
understand how to get there and maybe answers some questions that I wish I
could have asked a few years ago. Tim you want to start us off, you want to
ask me a question? I’m here with all of my sage advice.

Tim: Yeah so as most people know, Mark is the illustrator. He does the
sketches for the show, he has his notebook next to him right now. And he’ll
be drawing the two of us as we’re dressed in our shirts and ties. So my
first question targeted as an illustrator, how do you balance the this
looks real stuff with this looks like a sketch? And I bring that up because
a few years ago I went to Siggraphs, which is a graphs conference. And
there’s a lot of high end graphic organizations there. Like DreamWorks is
there, Pixar is there, Blue Sky Studies was there. And I was sitting in on
this session, I think it was with Blue Skies, and they were talking about
how they did the Poseidon Adventure. Or, I think the re-boot was called
Poseidon. And how they animated all the water and everything. And they can
make things look really real. But when they do kids movies, or when like
Pixar does Up, they have the ability to make them look like real people.
But they actively choose not to. And I was wondering what, like what is the
balance there when you’re doing a sketch? Is it an overall theme when
you’re going into it? Because I know some of the sketches for the show are
more realistic and I think last week I thought was really cool because it
reminded of a Walking Dead comic. Not that we looked like zombies. But
there’s this style in the comic that looked very cool.

Mark: Maybe I aught to draw us as zombies. This is pretty much our
Halloween episode given that it’s going to be coming out a couple of days
before. No, it’s a good question and I’ll try and answer it A from an
illustrative point of view and also within the context of illustration in
the UI and web world. To a point, it’s of cartooning. It’s a question of
abstraction, all right? So whenever you’re drawing a person or a house or a
tree or a brick building. And Tim has this, just dull eyed look on his face
as he’s so happy to be in art class right now.

Tim: It’s very interesting.

Mark: Is it’s a matter of abstraction. And any good abstraction, in this
case of cartooning, requires a good understanding of the fundamental theory
underneath. So your cartoons of a person are going to look a hell of a lot
better if you actually understand anatomy. And you actually understand how
a body works. Same with a building. If you understand how a building really
needs to work structurally, when you abstract it and give it a little style
and style it up, cartoon it up, it’s going to look ten times better and it
will not be jarring. There are some examples of really great illustration I
see used in UIUX. And the best example I’ve got off the top of my head is
the chimp used for Male Chimp. Mr. Von Chimpenstein, or he has some
wonderfully crazy name like that. And he is used to broadcast the
personality of Male Chimp as a company right? And he is, you know, under
the hand of a less skilled illustrator than whoever they had producing this
artwork. He could be completely cheesy right? He could look like some flat,
horrible, boring cartoon. But because A they understand how that chimp
really has to work. They understand how that hat has to work. They
understand the shading, the tone.

Tim: Do you mean like how the hat works sitting on his head or a part of
the overall theme of the drawing?

Mark: Yeah. Both. I mean to say both. Understanding it structurally and
understanding it’s role in character comes together. There is no one magic
special sauce to why Pixar stuff looks good. The best thing I could say, if
I’m just rambling on too much now, the best example is the uncanny valley.
The uncanny valley is a term used to describe most predominantly rendering,
3D rendering of people. Of humans. So if something is really cartoon-y,
looks like a computer. Or, looks like an illustration, you’re totally fine
with it. You can connect with that cartoon. You can look it in the eyes and
trust it and know what it’s saying and understand what it’s saying and feel
connected. And It’s going to get more real and as it gets more real and
more real and more real, you can connect until it gets to this point all of
the sudden where it’s just that one percent off of real. And it just
becomes incredibly creepy. You know, they look dead in the eyes. Something
is just wrong. Because it’s gotten so close, but our brains go wait a
minute, that’s not right. But it’s trying too hard to be right. So and then
when you get to perfect realism you get to actual people on camera. That
creepiness goes away.

Tim: So you have this area of cartoon-y and then you hit a gray area of
creepy and then you jump into realism?

Mark: Exactly. And this is a problem with illustration across the board. Is
managing that uncanny valley.

Tim: So do you decide beforehand that you’re going to make it really
cartoon-y or that you’re going to jump up to the line or that you’re going
to make it a realism? Is that a decision based on the context?

Mark: I would say it’s a contextual decision. Yeah. It’s content. It’s
message. It’s audience. You know, it’s the same way that we do in design.
Again, pulling it back to what we’re doing here as UI designers. A bright,
colorful, rainbow, sunshine look is totally wrong for your secure banking
website. A secure banking website can be happy and can be upbeat, but it
shouldn’t look like Lisa Frank. Because you’re not going to trust it,
right? Context is really key. And there is an appropriate time for really
storing realism and there is an appropriate time… Pixar really did find a
good balance. If you look at their early films. If you look at Toy Story,
for example, their first feature film. And you look at the people there,
they’re on that uncanny valley sometimes. And it’s not because they look
super human, it’s just there are some features there that they were trying
to make look too human and it just looks strange. And they really hit their
stride, they really figured out what they were doing with The Incredibles,
and then after that with Ratatouille and now Up. You know, you’re seeing
movies where they’ve got people. And they’re much more confident in the way
that they do it because they have that perfect balance of realism and
cartoon.

Tim: No I love Up. That’s one of my favorite movies.

Mark: It’s a brilliant film.

Tim: I’m trying to put together the Halloween costume for that old guy.

Mark: Oh perfect.

Tim: I have the grape soda cap with the pin and everything. It’s going to
be adorable.

Mark: Oh, if only everyone at home could see the look on my face. It’s
welling up with tears. This is just, it’s going to be great. I look forward
to that costume. I hope you pull it off.

Tim: Yeah I’m trying to find the cane also. The tennis balls are fine. But
the cane is shockingly expensive.

Mark: Oh I imagine.

Tim: For something that you’re marketing to an elderly man or woman.

Mark: Well I look forward to the costume. That’s going to be a lot of fun.
Let’s try to think, I’ve got questions for you. Would you maybe bounce back
and forth here?

Tim: Yeah. Bring it on.

Mark: All right. So obviously, I’m coming in from the illustration and
design angle. That’s why I’m here, it’s what I do here. And I can build
websites. I’m not the worlds greatest coder, it’s not my strength. But I
understand it. I sort of know the language. I can speak the language. But
for me, I want to move above my level here now. I’m feeling confident with
my HTML, I’m feeling confident with my CSS. My Javascript not great, but I
can read it and I want to learn to grow. And we’ve talked a lot about
responsive design here. And talking about, you know, flexible layouts and
responsive layouts. And for me, I don’t really know where to start. Not
just from a coding angle but the best book to read, the best article.
Should I be using a framework like Bootstrap or foundation? Or is it worth,
you know, the first time reading some how-to’s and trying to build them
myself just to sort of get my feet wet and really understand it? I’m sort
of curious as someone who is accomplished in this field to understand, for
me, what’s the best way to move from my level of competency to move up to
start doing this?

Tim: Okay. I feel like I should have been taking notes like Mitt Romney
sitting at the debate the whole time. No, I think that’s a good question.
The apprentices here were actually going through their whole program. And
we got to the first coding exercise. And they were very strong, or they
thought they were very strong in HTML. And we brought up this form
challenge for them. That is the first thing that I always bring somebody…
Someone that’s ready for the next step in mark up and CSS and then front
end development and whatnot. I have them build out a form. Because when you
start building out a form you think about the accessibility of the form.
You master generally everything that you need to. Everything that is really
difficult. Like the whole internet is content, links, and forms. And once
you master that stuff, it’s all downhill. Downhill is the good thing right?
It’s not uphill. But like you’re not like at the peak and then you’re just
plummeting to your death. I never know what term to use there.

Mark: You’ve learned the core set of things you need to do to be able to
build on them.

Tim: Yeah. That’s the hard stuff. And getting a strong base in progressive
enhancement and constantly reminding yourself of that. Keeping your
structure and your presentation and your behavior separate is always
critically important. Especially when you start moving on to the more
advanced topics. Like responsive design and when you start to move into
Javascript and J Query. You move into J Query it’s very, very easy to
ignore progressive enhancement. And actually I have a smashing article
coming out soon about the first step of progressive enhancement is keeping
your style separate from your structure. And I would say that the second
step is making sure that you’re not writing code that is injecting style
into your structure. Which is extremely common. But for resources, next
step resources, I think the book Part Stuff is really great. Ethan’s book
on responsive design. Luke’s book on Mobile First. Those are all really
great.

Mark: Well no that’s a really good answer and I appreciate it.

Tim: For bootstrap stuff, I think…

Mark: Yeah I’m curious about that. Because for me, yeah….

Tim: First learning, bootstrap is great for the end product. If you want to
make sure your end product is really strong, there’s Twitter bootstrap and
HTML5 boiler plate are both really good options. I think if you’re coming
at it from a front end development perspective, I think bootstrap is not
the way to go. I would say that boiler plate is more along the lines. Boot
strap is, I kind of see that as back end developers who don’t want to do
front end code. But they want their code to be clean. And they want high
levels of interaction. They don’t want to do any design or anything. I
worked with a really great back end developer and API developer maybe a
year ago. And he built this very elaborate admin interface for an
application we were building. And he used bootstrap for the whole thing and
I didn’t need to touch anything. And I’m, you know, a lot more lenient with
admin interfaces where you control your audience. But it was a way for him
to get that up really quickly. And if I need to jump into it, it wasn’t a
mess. Like it’s easy to clean up. But from a front end perspective, if
you’re looking for the end product to be good, I would say probably use
boiler plate. But then again, you’re probably not going to learn as much
jumping into boiler plate as you would using it, like looking into it and
breaking it down.

Mark: Sure.

Tim: And then you going in line by line. What does this line do, what does
this line do, what does this line do? Yeah. So I would use boiler plate
until you get up to speed. Until you learn like the guts of boiler plate
and normalize CSS and the reset files. You use that stuff until you fully
understand what you’re doing. And then you start breaking it down.

Mark: All right. That sounds good. And that’s nice for me. The way that I
got into web design and web development in the first place was using a base
install of WordPress. Or no, earlier than that. Using something like a
rapid weaver… Some of these very graphical drag and drop things. And then
trying to modify it one line at a time. Change this in the CSS, change
that. Because when I first got in, I had no idea where to start. I mean,
this is like really early on. I didn’t know what any of these acronyms
meant for HTML, CSS, JS, you know. And it’s that change a line at a time.
And now to sort of, I went through the whole game of all right now I really
understand it. Build something completely from scratch and now I’m sort of
looking to do… Not to go back to that original way but it’s a nice way.
Now that I understand things better, now I can really break something
advanced down and understand it better and then build my own thing.

Tim: Yeah. There’s ways you can use something like boiler plate where it’s
really just something that you can plug in the pieces to and you can
certainly do that. But I will say that, you know, if someone is building a
portfolio out if you’re going in and looking for that job where you’re
going to be designing and coding. Or if you’re trying to lean more towards
coding. If you present that in a portfolio, you can tell that someone used
boiler plate. You really can. Like it comes down to every line. Like when
I’m interviewing someone for a front end position, I’ll look through and if
they’re using boiler plate, I will go line by line and ask them what each
of these things do to make sure that they’re not just using it to get the
end product. That they actually know what went into it. And when you’re
linking up J Query and I think in boiler plate… It used to, I don’t know
if it’s still there. But it would do a detect for the J Query object. And
if it wasn’t there, it would do something where it would check if the
Google CDN was up. And it would fall back to a local copy. And it’s just
something that you paste in there. And it’s actually Javascript embedded in
the document, which I don’t much care for. I don’t use that method. But a
lot of people just use it by default because it’s in the boiler plate. And
if I see it in there I’ll ask them why are you using this? And usually they
can explain, oh it’s to check if the Google CDN is available and if it’s
available use it, if not fall back to this other thing. And what people
don’t really do is test that to see if it works. Like turn off your
internet connection and wait the 30 seconds it takes for that to fail. So
it falls back to a local version of J Query and it’s a terrible user
experience. And it comes to a point where if you’re going to trust a
service being up, it should probably be the Google CDN. It’s okay. And if
you’re building with progressive enhancement in mind and the Google CDN is
down, it doesn’t matter. Because you built your site in a responsible way.

Mark: That’s great.

Tim: So there are just little things like that that you go step by step
through the boiler plate and learn them individually.

Mark: And that’s a really nice parallel to this point in this conversation
about illustration and realism and cartooning and whatnot. When it comes
down to it, the best way to make anything is, even if you’re going to go
off and do your own thing, an abstract is to understand the core system
that’s making it work. So I think that’s a neat little parallel.

Tim: Excellent. Did that answer your question?

Mark: Yeah, no it did. It gives me some good places to go. Yeah, yeah,
yeah.

Tim: Okay. So my next question for Mark. Something I fell into at my, not
last job, but the job before that. I was working at Boston University. And
I would do a design here and there. It was still primarily front end dev.
But every once in a while I would do a design. And I was working with the
creative director. And he made a comment that I lean on design trends. I
think I was putting a ribbon, like one of those wrap around ribbons on the
design. And I wasn’t sure… because I don’t have the fundamental
background in design. I have a graphic design specialization. But they
don’t teach you the whole real guts. Like I went in and learned color
theory. But back, back, way, way back in the day I didn’t learn about grids
or anything like that. Or what specifically makes good design. I did a
project on Mondrian. Did that.

Mark: Which is actually a really nice place to start for a lot of things.
For color theory, for balance, for grids. But that is a good question. So
you’re asking about….

Tim: So yeah I don’t think I even got to the question yet. Like how do you
prevent from being trapped in a design trend and when do you identify it as
a trend and when is it good? I know how to do it in development, but not
necessarily in design. Like textures, is that a trend, or gradients a trend
or the ribbon or the skeuomorphism. How do you not get trapped in those
trends and identify them?

Mark: To a point it’s probably similar to what you think about when you’re
looking for development trends. The question, again, you know coming full
circle. It comes to context. So are you adding something because it
specifically adds to the message you’re trying to do? To the story you’re
trying to communicate? Are you doing it because hey I saw this. Even if
it’s in the back of your head. It’s not I saw this here and I’m going to
reproduce it. Your brain has been seeing so many little grainy background
textures, you’re like oh yeah that’s the right way to go that makes it
looks nice. And you’ve got people in your office sending around links. Hey
check out this, hey check out this. This is a cool new site! And you’re
starting to see all of these things that everyone says are cool and it goes
into your brain subconsciously like you know, I’m going to reproduce this.
The best thing I can say is to really take a hard look at what you’re doing
at does it actually communicate? Does it actually fit to what you’re doing?
So something like the grain in the background look and the idea of text
that’s a little bit darker than it’s background. And has that little white
drop shadow along the bottom to make it look like it’s embossed, to make it
look like it’s depressed in.

Tim: See that’s like all over the place.

Mark: It’s all over the place.

Tim: And I really like the way it looks.

Mark: It’s gorgeous!

Tim: But I can’t tell if it’s a trend.

Mark: Right.

Tim: Or if it’s actually a good thing.

Mark: Well it’s gorgeous. And what it comes down to is it’s not one way or
the other. It’s not necessarily just because a thing is a trend doesn’t
make it good or bad. What it comes down to is that probably started with
someone trying to say hey we’ve been working for so many years to make
things as slim as humanly possible right? You know, the aesthetic for six
or so years ago with a lot of 37 signals stuff, the base camp and whatnot.
That’s very stripped down, no images. Because we’re worried about delivery
something quickly and lean. And then all of the sudden bandwidth starts
growing. Cable is that much more deployed. Fiber optics, 3G now LTE
connections are that much bigger. And we start feeling comfortable hey we
can throw in some more graphics. We can make something look pretty and the
code lets us put in actual typography. And as we get all these
capabilities, we say hey why not add all this great texture back? And to a
point, it’s skeuomorphic without even necessarily going into what the
current real use of the work skeuomorphism means. But just the idea of I
don’t want this to look flat. I want it to look relate-able. I want it to
look real. All right. And if you’re trying to sell a very high class
product or a high end product or an expensive product, having something
feel tactile can really help deliver on that right? Because you can feel
the value like you can in your hands with a really nicely made product that
you can actually put in your hands. And so that’s, I think, where a lot of
these trends came from. To add to some of these nice, soft gradients. Very
subtle drop shadows. It’s not about big and glossy, it’s about quality and
nice and evoking something that exists in the real world. And what you can
say to yourself is, is this ribbon actually going across? So for the ribbon
example, you’ll say putting a nice big ribbon that goes across and then
wraps around the edge. What you’re trying to accomplish there, most likely,
is you want something to stand out right? It’s a big headline and you want
it to be big. And you’re going to do a nice big ribbon and do all this
gloss on it. Well, that’s not, you realize, the only way to make something
big and stand out. Does your product have anything to do with ribbons
physically? I mean do they actually speak to anything you’re talking about?

Tim: I feel like I could connect anything to anything.

Mark: Yeah. But you know, if you realize you’re jumping through a few too
many hoops to justify it. Versus well why not get rid of that ribbon and
just make the text large and a high contrast color so it pops off the
background? Or keep it the same size but a bolder weight. Or to choose a
font, perhaps, a typeface that evokes what you’re trying to say. When you
start stepping back from your design you get out of this bubble of hey cool
I want to add this. And you start looking at really functionally what does
this actually say about what I’m trying to communicate? The rose colored
glasses can sort of come off and you realize… You have to get brutal with
yourself. You have to be your own harshest critic and say does this apply,
does it not?

Tim: Yeah. I think the ribbon that I… I actually did end up with ribbon.
But…

Mark: And I’m not trashing the ribbon. Believe me, I’m sure it could look
great.

Tim: It looked okay. But it was actually a compromise. The ribbon was a
compromise from where I started. Which was this gaudy stitching thing. Like
the ribbon had stitching and grain in it. And we compromised with this very
clean red ribbon that kind of folded around the content. It was kind of
neat, turned out pretty well.

Mark: Yeah. This is really, it leads us into a conversation about
skeuomorphism. Which I think we could really spend a whole show on. Because
I know a lot of people… There’s a lot of backlash in our industry right
now against Apple who historically has this beautiful hardware design and
often very sleek software. But they’re saying oh well look at the calender
app and look at the address book app and all of this corinthian leather.
You know, and how ridiculous it is. And to a point, A it’s nothing new.
Apple’s been doing this for a very long time. For a very long time. But the
backlash is to go towards something like what Windows has been doing. Where
it’s formally called metro now what new design aesthetic or something.

Tim: Yeah did they get sued for metro?

Mark: Yeah it’s a whole thing.

Tim: I’m still gonna call it metro.

Mark: But my point that I often argue is, I don’t think skeuomorphism is
right or wrong. I think there are scenarios where bringing in a physicality
absolutely makes sense. You know, evoking something from another world
makes sense. And times where it’s just gratuitous. And I think we can
dedicate a whole show to it.

Tim: Another world

Mark: Another world. Yeah. Designs from another planet. I think we can
spend a whole show on that. I think we aught to. So I hope I answered your
question there.

Tim: You did.

Mark: Yeah. What I would like to ask you is, so when you’re designing
something. Or, when you’re getting ready to code something. You’ve been
working, you’ve got the wire frames, we know exactly where we’re going,
we’ve got the whole project set up. And you sit down at your keyboard. And
you say okay. It’s time to build a working prototype. It’s time to build
the actual site. I’m curious about where you start. We touched a little bit
on HTML 5 boiler plates and foundation and bootstrap and whatnot. But I’m
curious of you, now that you’re at the level that you’re at. When you sit
down…

Tim: I’m at a really high level.

Mark: You’re at a very high level. Tim has like a Mars Attacks brain. I’ve
been very kind not to draw it. But he’s just got this, he’s very
intelligent.

Tim: I have a blog.

Mark: So I’m curious where you start. Do you have a template that you sort
of built out? Do you have some snippets of code that you fill into auto-
populate? Do you start with just an HTML shell and they you jump into CSS?
I’m curious what that process is for an accomplished developer to start, as
opposed to someone like me who’s saying where do I start? And I sort of
poke around a few times until something starts happening.

Tim: So, not to be that guy but it depends on the project.

Mark: Of course. This whole podcast should just be called context. This
whole episode. It’s just context.

Tim: A lot of times it actually depends on the time line for the project
also. So, my coding actually tends to start before the design is finished.
And often times I will be almost entirely finished with development by the
time I get the PSD’s. Which freaks people out. So if it’s a tight time
line, which it often is, sometimes I’ll start with just layout. Layout
modules. Well, even before that I guess. I don’t start with the boiler
plate. I have a snippet en coda. That’s just a bunch of base HTML that I
use. It’s basically a boiler plate that I built. If I’m using a pre-
processor like SAS I’ll load in probably normalize CSS as a SAS import. And
then I’ll just start going from there. A lot of times I actually work from
the top of the page to the bottom. It’s nice if you can get a holistic view
of the site so you can start building components. But often times with
tight time-lines you can’t necessarily do that. You have to kind of guess.
You can see that I’m looking at an internal page and there’s a sidebar and
there are three components in the sidebar and they’re very similar and you
can start building out those components with the assumption that they’re
going to be similar on the rest of the site. And I did that just to keep
the project moving so I’m not sitting on my hands while everything is being
designed out. From there, it depends on what system it’s going into. Often
times here we’ll hand off static files. We’ll hand off static HTML, CSS and
Javascript. And then back end develop a plug it in. If it’s going into
Wordpress, I do find it easier to build the static files first also. And
then just dump it into a WordPress loop or post file and then plug in the
variables. So you have everything tested out. And it’s easier to not have
to bounce back and forth on the server while you’re doing your testing.
What else do I do? I said something in the beginning.

Mark: You dance.

Tim: I dance. I do a fidgety dance while I’m waiting for the design to get
finished. I get very antsy, which is partially why. Well, the wire frames.
So sometimes I start doing the layout before the designs are done. And if I
get the wire frames, you can build out the basic blocks of the site. And
what that helps me do, if I can do the layout when the wire frames come,
and get a little bit ahead and then start putting in the design piece by
piece as the design comes in. It allows me a little bit extra time at the
end usually. Whether we quoted for a project or not, it allows me to
tighten up some of the things that I would normally not have time to
tighten up on a tight time line. And maybe add some interesting
interactions to it. When we were working on Credit.com, which was an
extremely tight time line, I found myself with maybe an hour to spare. And
I went in and I, I don’t know, I mean it’s going to be impossible to
describe on a podcast. And again, using hand gestures. Episode seven still
with hand gestures. There’s this pie chart on Credit.com that will spin
after it loads. And that was just a little thing that oh I have a little
bit of extra time, let me make this little UX touch to make it really pop.
And it’s nice to have some extra time. So that’s why I try to manage my
time a little… I front load my time.

Mark: That’s actually sort of a nice perspective. It’s a bit of a… To a
point it’s progressive enhancement as part of your work structure right? So
you’re starting with the very basic grid that everyone’s going to need no
matter what. Even when you strip away the CSS or the basic [???] you’ve got
the structure there. You’re layering and layering and layering. And so
you’re not dependent on waiting for a PSD to come through because you
already understand the structure. And then having that allotment at the end
to say well, you know, for the five browsers who can handle it or the
whatever percent, you can add on those little touches and really build in
that way. I think that’s a nice way to think about it. And I’m glad to hear
your answer, it’s very illuminating.

Tim: Yeah it really is a progressive enhancement approach. Because I do all
the HTML before I add any CSS to it. And it keeps me in that mindset of
this is pure structure.

Mark: Right. And it helps to not blur the line there between the two.

Tim: Right. And then when I’m building the CSS. You know when I’m building
the HTML I have the CSS in mind. And when I’m building the CSS I have the
Javascript in mind. So I can start adding in some classes to hook in with
my Javascript.

Mark: All right. Sounds good. I think we’ve probably got time for one more
question.

Tim: One more question? Okay. One more.

Mark: We’ll probably edit this down because we’ve rambled a few times.

Tim: And I have actually a rebuttal question. Very similar for Mark. So
you’ve done your research on a project, and you sit down on your computer
or sketch book or what have you a blank canvas. What do you do?

Mark: Where do I start as a designer? For me, I like gathering… Taking
that research, for example. Sometimes you’re looking at a competitive
product, a competitive site. Or maybe you’re looking at, for a purely
illustrative thing I’ll do… Let’s say I’m going a caricature of a
politician. Like I’m trying to get a likeness. I like to gather all that
together in what’s traditionally a mood board. You get all of your visual
inspiration together. And this can actually really help with communicating
to a client as well. Because you’ve taken the visual ques that you’re
thinking and instead of showing someone a fully realized design the first
thing they see is more direction that you’re intending to go. I will build
a wire frame, build a light wire frame. Sometimes I’ll even start that
pencil on paper. And that allows you to jump around really quickly. I will
often start in black and white no matter the project. Whether we’re talking
about an illustration, a portrait, if we’re talking about a full fledged
website design.

Tim: I noticed you’re using blue pencil.

Mark: I use a blue pencil. Which actually yeah. To a point it’s a similar
thing. I draw in a blue pencil so that I can sketch my heart’s delight and
then when I’m feeling I want to do something a little more formal or final
on top of it, I can draw with black ink on top and when I scan, I can
artificially take out the blue pencil or red pencil or whatever I choose to
you. Because I can just grab that color channel and drop it. And to a point
it’s the same idea. You build the… Progressive enhancement. You build the
structure underneath in black and white. And black and white helps you see
contrast in your design. If you’re leaning too much on color, like we
talked about accessibility. If you’re leaning too much on color, you’re
potentially damaging your design. Black and white goes very far to help
build your structure. Build your layout, understand your negative space. So
I’ll jump in to often an illustrator file because it moves a little quicker
than photo shop. And I will move on paper and I will sketch this stuff out.
And I will slowly but surely start adding the layers, much like an under
painting.

Tim: This is actually really interesting. I had no idea that the two ends
of the spectrum followed similar processes.

Mark: Yeah. Me either. This is a lovely little discovery that we’re having.

Tim: I”m so glad Steve got mauled by that wolverine.

Mark: Yeah you know. Maybe we should try and put some aggressive wildlife
near him more often. I mean we didn’t plant for wolverine. No, this is a
nice sort of serendipitous discovery obviously. That we keep trying to ask
each other interesting questions and we keep realizing that our answers are
oh just like you just said. But you know, with pencils. So that’s what I
say. Build up an under painting from below. If you’re doing a painting out
our window here, I would do from back to front in simple shapes and black
and white and start adding color, start adding detail as you go and that’s
how a design is sort of… That’s how a building comes along.

Tim: Excellent. Well I think that was… I really liked that show actually.
And for those folks that don’t know, we’re learning rudimentary sign
language so we can communicate. And I’m getting the signal that we need to
wrap it up.

Mark: The signal is just me making a screaming face and throwing my arms
above my head and throwing things at Tim.

Tim: Very rudimentary sign language.

Mark: Yeah. You know. We’re learning. If you found this to be a little too
self-indulgent, maybe you want to ask us some questions instead of us
asking each other some questions. Please reach out to us on Twitter. We
have the handle @TheDirtShow and we would love to get your questions. Or
comment on the blog.

Tim: I will do a whole show about user questions.

Mark: Yeah. Because as you can see, we’re running… It’s a little inside
baseball here. So we would love to field some of your questions.

Tim: But yeah. I guess that will do it for this week. Episode seven. And
we’ll try to do better next time, thanks for listening.

About Fresh Tilled Soil

Fresh Tilled Soil is a Boston-based user interface and experience design firm focused on human centered digital design