let's see here got this new book don't
get a job make a job we're going to talk
to Jamie van wart who's a designer here
and she's an MFA graduate from Cal arts
incredible designer she's been working
on our website I believe there's some
really good things here that you guys
can see about how we translate
wireframes into visual design stick
around
let me try this again I want you guys to
listen to me yeah I design sandwiches my
name is Jose car yet and I talk about
the design of business
I talk about a lot of stuff my name is
Chris doe and I talk about the business
of design at the center of this
operating systems about understood was
it could you tell me what the show title
is I hate you dude you are watching the
process
hey Jamie I'm ready for you now come on
over girl we're going to take a look at
some layouts not a lot of projects I can
just share with you that haven't
launched yet so one thing I thought I
could share with you is are actually the
redesign of Roman website the blind
website and we're in the middle of
repositioning our company so many of you
guys that know about us would know us as
a motion design centric company that's
what we've been doing for the last 21
years but now we're making this shift
towards working with client direct
there's a lot of clients out there that
aren't in that place where they have the
needs of hiring a full-blown marketing
or advertising agency and I think blind
can serve them well in doing rebrands
doing video related content notice I
didn't say commercial video related
content and digital collateral marketing
email blasts that kind of stuff so let's
take a look Jamie do you have a sitemap
for all this well let's let's do a quick
sketch of the sitemap because it's
important for us to have a sitemap to
look at and how you'd be the first page
you come to and then a primary
navigation the pages that fall under
home would be work yeah I could see it
here work and feed events about
then contact okay we assume so many
Lancer they want to know about the work
right away feed is a large bucket to
contain all our news if PR whatever is
happening that's news related right
and then events we're going down here
because I'm gonna start talking about a
little bit more but things that we're
doing outside of the office lectures
were giving workshops TED Talks anything
and it's not just for me it's for
everybody in the office and then about
is the typical bucket what are we to
find under about um things like our core
values or our services types of projects
we would design like branding versus
services right and people mm-hmm does
the team all right so that would live
under there
all right and then contacts how to get
in contact with us all right so this is
the homepage right let's take a look at
the home page here so walk me so this is
the entire home page as a strip if the
therapy the mobile version oh that's a
mobile version of iOS the desktop okay
let's talk about grid systems real quick
so this is the entire site in theory
right so if you expand the window or
closer it's going to responsively design
re configure itself and so I see four
columns one two three four and so when
you look at the mobile it's cut down to
two or one right mm-hmm and so it's a
number that works and it seems to be
holding up in the mobile part of it what
are we looking at up here what is this
the top section I think we usually refer
to as the hero and in our case we wanted
to go show the work your images from the
work we want to make a strong opening
statement about who we are and what we
do and then for those users who don't
scroll all the way down to this work
section we wanted to give them a way to
jump right to specific types of artwork
and a lot of web terminologies borrowed
from a newspaper editorial layout they
still refer to this as the masthead
that's from a newspaper terminology and
what they consider above the fold so I
think above the fold this product here
right so you're going to see the
featured image so
everything above here is really
important because if somebody hits your
site they don't see what they want to
see if they don't hear what they want to
hear they never go below the fold we're
using a lot of just placeholder images
right because I have been written the
copy right and so you've designed a
framework to accommodate that and these
parts may expand a contract depending on
what we ultimately come up with in terms
of content so I think this is beautiful
it's a full bleed image it's very simple
it's striking and finding the right
image to go there it's important but
more important is the headline the
headline is the thing that's designed to
grab your attention to drive you deeper
into the site if we lose somebody right
here there's no point and so the tension
and then maybe there's some detail that
we need to add it's going to get my
attention and I had to talk about what
it is we'll get into a little bit and so
here what is this talk to me about what
this is um that would be a feature at
work so we would choose we would curate
the projects and provide a grid of
thumbnail images to link to those
projects and what the projects that we
were that we wanted people see so then
we have to tell the developer to create
some kind of sorting system so that we
can tag things as feature but then we
can also change it so maybe it defaults
to chronological but if it's a sign at
number like 1 2 3 4 5 6 7 8 9 10
whatever it is then it will display in
that hierarchy so image number 1 will go
here 2 3 4 right exactly and there's
another link here I see this this is
view all projects right here that's
another way I assume to take you to the
work page mm-hmm so another thing about
user experience design is to give people
multiple ways of finding something
especially if at this point they've had
enough information or they want to dig
deeper it's there you don't have to make
them scroll back up and find things and
then you have an area here which is
commonly referred to in our industry as
a logo quilt like a quilt patch of frame
of fabrics sewn together this is a logo
quilt why would you include a logo quilt
why do companies even include a logo
quilt to begin with the reason why they
do that is because we need to have
validation companies like to work with
other companies that have a proven track
record they also want to know that you
for
with companies like them in their
specific vertical but also on their size
and stature and so if we have worked
with some people like Sony NFL Microsoft
out a Google Electronic Arts that's a
pretty good calling card and you'll
notice that small companies smaller
firms have much smaller companies
represented there and these are actual
real clients we've all worked with so
these are not fake ones where you know
we deliver the mail there and we add
their logo which some companies do and
the problem with doing something like
that is that if they ask you for more
specific details you'll be caught not
telling the truth all right and then we
have featured articles these would be
articles like that we might write or all
right an external source like medium
that might be published there or more
in-depth um articles about like I know
you have a couple about typography
that's right they wouldn't just be you
know a news announcement but they would
go deeper into some topic that we want
to share okay excellent this is a
singular experience and we meet
personally I prefer these kinds of
websites where all the person has to do
is scroll down with their mouse and then
they get the information in tiered
stages so you're telling the story and
you're just telling it kind of one
screen at a time
the important thing at the bottom right
here I want to point this out guys is a
call to action right now presumably we
want them to call us so there probably
needs to be a clear thing like call us
email us and the last little bit here is
give us your email address we'd like to
put you on to email list we're not going
to spam you but we create a little
newsletter it's going to hit your inbox
maybe once or twice a quarter at max and
that's how we can talk to you have a
real conversation with you what other
page
go through a specific flow so if I were
to click on the work link in the
navigation okay um we've got one of the
things that we want to change in the top
now in the top right okay is
distinguishing different types of work
okay okay so um clicking on the work
length would bring up this kind of
secondary navigation kind of got
projects divided into different
categories so um feature projects would
be what we just talked about with this
watcher here where we decide these are
the projects we want right each era
right um the second type of project
would be a case study which we can talk
about in a bit but these are more about
bigger branding projects that would
involve not just a logo but also a
website design an iPhone app maybe
environmental graphics those kind of
things so it's kind of solving you know
more complicated problems right and then
the last up page would just be all
projects okay
um and these would be filterable by
categories this is important because
people that come to your site want to
look at your work they want to find
something very specific music video
commercial branding identity web
theatrical whatever it is that you do so
this allows them to sort the content
specific to their needs you have to keep
in mind user experiences designing for
the users guys so that means giving them
what they want in the fewest number of
steps and so people want to see projects
like the one they're envisioning in
their mind so if you can do that the
least number of steps you're going to do
well for yourself I want to point this
out because these are all just image
based it's hard to see in black and
white like this but you'll see it much
better on the digital version is when
you hover over it doesn't give you some
information so that we don't have to
deal with the layout being cluttered
with a lot of typography I also assume
there you have a dim thing going on
where the image dims down like it gets
darker so that you can read the type
right so those little notes are going to
make for your developer okay yeah and
that might need to change a little bit
on the mobile version since there's no
equivalent of hover but Wright will
address that when we
on this blue screens the one that I'm
most interested in is the case study
because the case study allows us to tell
the story of what it is we did it allows
us to show a lot more of the process
because when you look at something like
this and you're from a client's point of
view you might be thinking well what did
they really do here and it's hard to
tell on commercial you kind of know what
we did while we didn't do and a lot of
people misrepresent what it is that they
do again they design a logo or they did
the development but what we're doing
here a lot of these case studies is
we're showing how we took something from
a strategic point of view due to the
discovery through the discovery we
figure out the messaging the positioning
even sometimes naming figuring out what
identity system looks like who the
customers are and we want to tell a
little bit about that story because
that's where we're heading anyway so the
case studies are more important to me
this is the actual case study page and
comparing it over here to more of a
standard project you can see a couple
key differences the first one is just W
we're establishing this introduction
block so right away we'll talk about who
the client is maybe what categories the
project falls into or which services we
provided for the client and then
immediately after will be a description
about a specific challenge associated
with the project and then how we solved
it in a really succinct way okay
super-hard from AC but it says what
client challenged solution solution or
outcome or outcome okay I like that
here's one thing as designers what we
get to do with type we get to make it
more dense or less dense how do we make
it more dense well we extract more
information than what was given to us so
in this case it's really about having a
block of copy and Jamie was able to
extract like let me pull some things
because I like having chunks of
information I like breaking up this
monolithic structure of one column grid
and I want to have some variation to it
so we have a nice headline a subhead and
we have some detail call-outs kind of
like a caption or a byline that you
would see and then you have another
little bit here a kind of a bullet and
then a body block a body copy and so all
those things make the page interesting
right so instead of
a really long paragraph it's the entire
description of the project we can break
up the text so that the text corresponds
to the image it's paired with so you
always have a context for the images and
the text together it's easier to digest
great so breaking down the information
including large-scale images and having
section breaks like this help to give it
more of an editorial kind of a newspaper
feel it makes the information a lot more
digestible I don't know about you guys
when I see a big block of copy somebody
hasn't edited or some designers and
worked on because the web is not
designed from giant blocks a copy like
this unless you're on The Wall Street
Journal or LA Times or something
watch out for the big blocks of copy all
things considered this is really
beautiful layout I think there's enough
design sensibility in here but without
making it impossible to program for
because there's not a lot of overlapping
images and type that's usually where you
get into a lot of problems all right
beautiful so this is multiple examples
of the system being played out or are
these options for phrase this would be
more of a standard project so okay oh oh
this is the case study yeah this is the
case study so I'm incorporating some
other uses of typography including
caption block quotes or larger pieces of
text and maybe a little more variation
in the use of the grid so the images can
be spaced out and balanced a more
typical project where maybe it's a lot
more images than text would just you
know it would be a constant flow of
images that doesn't have quite as much
variation so this image carousel right
alright we'll try and systemize this a
little bit more these are a little bit
more custom whereas these can fit within
a template or two and we can solve most
of what we need exactly okay great now I
want to talk about specific content I've
been thinking about what are the things
are going to get people to pay attention
so let's brainstorm together okay while
you grab missing dumb grandmas it's okay
the grid the design is impeccable now we
have to think about how can we say
something to draw somebody in and I was
thinking about what it is that we do
what is it as our value proposition
how do we improve the lives of our
customers and how do we make it jobs
easier at home at work and create wins
for that how we do that I'm going to say
I want to do something provocative I'm
gonna say something like you know like
hello we are blind something like that
something very friendly and I'm gonna
say we build bridges so somebody's gonna
look at that say what do you mean you
build bridges I don't mean the bridges
that connect land masses that's typical
we build bridges between strategy
conceived okay hmm
so we know that there are agencies who
come up with strategy and have an
incredible concept but somewhere along
the way there's a gap between strategy
conceived and strategy executed okay so
those are the bridges that we build we
build bridges between and I think this
could work because I if I can do two or
three of these I know that the flows are
to work mm-hmm between brands and what
we build a bridge between brands and
users users I'm gonna I'm gonna just use
the word customer right what else do we
build bridges between
shadows you can see strategy executed so
concept and execution brands and
customers what else can we do
goals I like that Michael you think
goals so you have a goal where's this
results results I like that nice and
then what we want to do is in the body
copy we have to explain what the heck
are we are we talking about right and so
I think that's the framework so do you
imagine that each one of these pairings
would be its own content blog I think so
but it could just be a simple image with
just the key idea and then the meat of
it will be here okay in terms of that so
like I said this part will be flexible
depending on our deck and how we want to
talk to people all right so we could say
something like we build bridges between
strategy conceived and strategy executed
because we all know that coming up with
an idea is not the end of it and this is
where most companies fail and blah blah
blah so we've explained that we we build
bridges between brands and customers we
help you identify who your customers are
what they want and solve those kinds of
things goals and results because we
believe that design should matter in
ways more than just aesthetic value and
what we do gets our clients results so
we're not talking about building bridges
between land masses well even though
there are land masses in my place holder
right right it's just a gap it's a
concept it's not literal right and there
wasn't a bridge either so that's okay
but we're not talking about building
bridges between physical things a lot
ideas goals results all those kinds of
things to connect what we believe is
connecting or something and that's how
we finish it up okay and if you if you
like to see how talked to us okay here's
who we've worked with before and that
kind of stuff here's the thing that a
lot of designers and design companies
don't get they think the work product is
what you sell is not what you sell the
work product is the byproduct the
approach
you take so in this case we need to give
a contextual lens as to what it is that
we're doing and this is an example to
prove what we do is we help companies
particularly their ideas in a visual way
and we're going deeper now doing
strategy so now we have to talk about
that with talk about how we do it and
why it matters we're start to sound
different from the way we used to sound
the way we used to speak was this is
cool there's an Xbox I'm really awesome
and it's really wonderful work and we
partner up with an agency that's all
good but we're finding that now in the
21st century in 2000 X 16 to be relevant
I think is just my opinion to be
relevant you have to be able to offer
other services that position you as a
company that is to be valued for your
ideas and for you thinking there's lots
of ways to get there it's just one way
all right guys I hope you found this
particular episode on looking at a web
design and going a little bit deep I
know we didn't do that much critiquing
but it's because the design was already
solid and Jamie's been working on this
for some time but hope you find it to be
helpful comment below if you liked it
let us know if you want to see more
things like this
till next time see you guys later goofy
ah turn it off now zoom in tight
Oh