Hello everyone.
This is Web Design for Non-Designers.
Extend a warm welcome
to our speaker, Tracy Osborn.
[applause]
(Tracy Osborn)
Hello.
All right, there we go.
So, hi. I'm Tracy.
First slide, this happens
every conference I'm at.
I'm actually @limedaring on Tracy;
just getting ahead of it this time.
People think I'm lime darling,
and I think that's hilarious.
And I have that Twitter account,
but I am lime daring.
And later on I'll be tweeting out
link to the slides,
and some links
that I mention in this talk.
So a little bit about me.
About seven years ago,
long story short,
seven years ago
I taught myself how to code.
I launched an initial version
of this website called WeddingLovely,
and seven years later
it turned into a startup.
I went through 500 Startups.
And spoke about it a couple PyCons ago
if anyone was here for that,
which was pretty awesome.
And now I'm the developer relations --
I work in developer relations
at DreamFactory which is really awesome.
This happened literally
like a month and a half ago,
so this is very new to me.
But this talk is really --
this whole part about design,
I was a designer.
I went to school at Cal Poly
San Luis Obispo for graphic design.
And like I said,
I taught myself how to code.
And I wrote these couple books
called Hello Web App,
which is like, super awesome.
It came out -- really cool --
so by the way, if you want to teach
or learn about Django web app
development, these are my books.
So I wrote about how to do design --
excuse me, how to do development
for non-developers,
but then it occurred to me that there
isn't really a good resource out there
designed for non-designers, and that's
really where this talk comes from.
It's going to be my third book
and it's not written yet,
but I'm using this talk as a way
to kind of figure out
what's going to go
in this future book.
When I talk about design --
the world of design is so gigantic.
There's user experience design
and visual design,
and interaction design,
and people who do UI;
they have all of these specialties.
It's kind of super overwhelming.
When I say design,
I really just wanted --
Design is really
just making an interface,
whatever you're trying to design.
By design I mean just making
an interface that works well.
Because, even if you're not
a designer and you don't think
you're going to become "a designer,"
you still will probably in your lifetime
have to design something like a home page
for your project that you built.
You know, something like this
or this, or Node.js.
You know, all of these are fairly simple
and they can be done by people
who are not specifically designers.
And, this is my biggest pet peeve
when it comes to design.
I'm not going to talk about things
like the golden ratio.
It drives me absolutely batty
whenever it's an introduction to design,
and they go over, like, "Here's
a golden ratio", and I'm like, "Arghhh."
That does not need to be
in a beginner talk.
And I won't go over
parts of typography,
which is also my pet peeve.
That shouldn't go in a beginner talk.
It's super fascinating to figure out
all the pieces and parts of a letter,
but that's not beginning design.
Really this is just for anyone
who will be building a website
or building a home page for an app
or building a form
or building a little widget.
How can you make that,
whatever you're designing,
look a little better
and perform a little better?
So, first,
let's talk about clutter.
My favorite example
for the ultimate cluttery website
is of course GoDaddy of yore.
[laughs]
This is the faster way
to better looking designs.
I'm kind of going
into the visual part first,
not user experience.
So just speaking about visuals,
fastest way to a better design
is to cut down on clutter.
So to illustrate this,
I made this little widget.
Now, not saying y'all are gonna be
building something like this,
but it's a good example as we go
through some design principles,
apply it to this widget,
and see how it improves.
So the first principle we're going
to talk about is the grid.
We probably all have heard
about the grid.
Adding a grid to design is
essentially just lining things up.
Pixel differences
are definitely noticed,
like when something
is two pixels off.
There's always that story
about the designer
and developer that work together.
Designer gives the developer
the perfect mockup,
and the developer implements it,
and the designer's like,
"Ah, everything is up and down
and a little bit off."
And the developer's like,
"It doesn't matter,
"it's only two pixels."
But those little pixels --
if it's just something that's just
two pixels off from a grid,
it's one of those kind of things
that's unconsciously noticed,
and it adds to the sense
of clutter in the design.
So you can implement a grid
to whatever you're designing by scratch,
but I recommend to take advantage
of systems like Bootstrap
which have a grid system
already built in.
There's no sense in doing something
completely from scratch
when you can use something
that helps you out and gives you --
that essentially
bootstraps your design.
So, back to this little widget,
if we just line things up,
if we just take the columns of contents
and header and the form and the button,
and just give them
even margins around the edges,
you can see that it's
already a little bit cleaner.
So the next principle is color.
So to go into the overarching
color principles
which you read in all these
beginner design books,
they usually say, "You got to keep
your colors complementary."
They don't really explain
about what that means.
Use mostly neutral colors;
use one bright color to make things pop.
There's a lot of good resources out there
like this article on Smashing Magazine
which I'll tweet later,
which really goes into color.
In school, I took a whole quarter
on color theory.
And that's ridiculous,
and I don't recommend anyone
to do something like that when --
if you don't want to become
a full-fledged designer,
you can just take advantage
of shortcuts like COLOURlovers.
I use COLOURlovers
for anything I design.
There is no way I'm going to build
a color palette from scratch.
Because in COLOURlovers you can go in --
people can submit palettes,
and then other people can vote on
whether they love that palette.
And then you can go in and search
by most-loved palettes of all time,
and get these color palettes
which are pretty much guaranteed
to have complementary colors,
and usually you can see ones
that have like a pop color.
It's just a great shortcut,
and you can scroll through
all the color palettes on COLOURlovers
and find something that works for you.
Like, my website WeddingLovely
is purples and pinks.
COLOURlovers; it was
one of the palettes I found there.
My books are oranges and yellows,
a pop of green -- also COLOURlovers.
So back to this little widget,
which is kind of like black
and kind of contrasting greens.
I grabbed a color palette
and applied it to the widget,
and it's a little overly colorful,
but it does work a little bit
better than it was before.
And one thing I want to point out --
it's not really going to show up
in the slides --
but you, you know, the color palettes
from COLOURlovers are not set in stone.
The red of the button
is a darker red
than the one
in the color palette in the top.
So feel free to play with them,
lighten things, darken things,
but it's a great shortcut
to give yourself,
you know,
a jumpstart into building design
and doing a nice-looking color palette
without starting from scratch.
Next principle: fonts.
So again, with the principles,
people usually say,
keep the number of fonts low
because lots of different fonts
in design
can be a sign of clutter.
Use fancy/display fonts
sparingly -- excuse me.
And that's -- a good example
of all those fonts
are the ultimate example
of clutter --
are these display fonts I used
in the background here.
So clean fonts also reduce
the feeling of clutter in designs.
And then if you want to add
more differentiation in your designs,
when it comes to typography,
you can then explore with italics,
and bolding, and transforms --
like making something uppercase --
to differentiate stuff.
But as a shortcut,
this is also what I use.
Because you can go to Google Fonts
and try to pick out your fonts
and get completely overwhelmed
by the hundreds of fonts
scrolling through, and it's really,
I don't know, completely overwhelming.
So there's resources out there
like Beautiful Web Type
where people choose --
well, they pick out
the really beautiful
Google Fonts that are out there,
Google web fonts that are free to use,
and they display them in this website
so you can see how they look
on a real website.
There's other sites like Typewolf,
which again, you know,
curated collection
of the 30 best Google Fonts.
So this is a great way to -- if you're
choosing a font for your design
and you get overwhelmed by how many
different types of fonts are out there,
just go find these resources
where people chose their favorites,
and you can see it kind of narrows
choice, makes it easier to choose,
and it's easier to find something
that you think looks professional.
So, back to the widget.
And then we added --
this is two different fonts.
It's a serif font and sans serif font.
Essentially means, serif font
has little flanges on all the letters.
But just two different fonts,
and there's differentiation in here.
Like there's italics
on the headline, the form,
the button has uppercase,
it's a little spaced out.
But it's only two different fonts
and they work really well together.
So the little widget here
is looking a little cleaner.
Last but not least: white space.
White space is the ultimate
clutter reducer.
I always laugh at, like,
Hacker News, because --
I mean, I read it all the time,
but it's a pretty cluttery design.
All this text all smashed up
against each other.
And a lot of designers
also feel the same way.
So fairly often there'll be
a Hacker News post saying,
"I redesigned Hacker News."
And it's something like this,
or like this,
and all of them
are always more white space.
It's like designers
look at Hacker News
and like, "Oh my god,
it needs white space."
The white space
can really help a design
even if you have
a super cluttery design
that has to stay cluttered,
like a newspaper homepage.
So the before is on the left
and the after is on the right.
One further thing that New York Times did
was that they reduced clutter
by reducing the number
of colors on the site.
So, instead of the headlines
being blue, they're black.
But one of the biggest things they did
to make their homepage look less cluttery
was just to simply add more space
in between the columns of text.
And just like,
adding just a tiny bit more space
allows the design to breathe more,
just look a little bit more open,
a little less cluttery,
even though they still have a ton of text
and a lot of items on their homepage.
And white space is definitely
a huge trend right now.
I went on to one of these
design collection sites
and I took a random screenshot,
and at every single one of these
is acres of white space.
It's not saying you have to do
something like this,
but it's kind of handy that it's
the current web design trend
going on right now, too.
But it's not just a good thing to do
just for like, you know --
make it look nicer.
It can drastically affect
your conversion rates as well.
So in this example, the two tables --
there's the links
underneath the orange buttons
that you can see in the left one.
That was taken out, which added
a little more white space
in between these two tables.
And because the person did that
and they did a test,
saw a 20% improvement in engagement,
5% boost in products added to the cart,
and a 33% improvement in customers
continuing through their purchase.
So white space
not only just looks nicer,
it does affect how much money
your site can make
and your conversion rates overall.
Back to the little widget,
and we just add some more white space.
The things I did here: I added
some more space around the edges,
kind of beefed up the margins
around the edge.
I also normalized the spacing
in between the elements,
so between the headline
and the content,
content and the form,
form and the button.
I also added
a little bit more white space
in the form of line height
in between the lines of text
in the content
so it doesn't smush all together.
And the headline also has
a little bit more space added as well.
So when it comes to clutter,
and it comes to visual design,
the things to remember is just
to reduce visual clutter
by keeping the number
of fonts and colors low,
adding white space,
and lining things up.
Aiming for a clean design,
which, again,
is one of those big trends
going on right now,
is one of the fastest ways
and easiest ways
to have a less cluttery
and more professional looking design.
But we can't talk
about design without, like --
We can talk about how the design looks,
but really the most important thing
about design is how it works.
So whenever you're designing
something, try to figure out
what the most important action is
on your design,
and try to make that action
or whatever the person
on your design needs to do,
make it easy for them to do it.
This is why buttons CTAs,
button call-to-actions
are usually a brighter color
so they can stand out,
and so someone doesn't lose
the button; catches the eye.
Someone knows that this is
the primary action of this form.
So for the website that I built
for Hello Web App,
I had a little bit
of a design challenge
on the homepage
where I had two buttons.
But the main one that I want people
to look at and see and hopefully click
is the "get the books" button,
which is why it's bright green.
Now if you go to other websites,
this website is a very subdued
color palette,
it's very dark gray and blues,
but the action button
is bright blue in the middle.
It doesn't just have to be a homepage
and a button on a homepage.
The Wealthfront Engineering blog --
you can argue that the reason
why they have this blog is to attract
engineers to join their company.
So as they write about engineering,
hopefully someone comes to their website,
goes, "Hey, these people are pretty cool,"
and then the sidebar, it says,
"Hey, interested in what you have
to see here? Apply for a job."
And that's the reason why
that widget is bright green,
so it doesn't get lost
and it's eye-catching.
So essentially,
pay attention to your goals.
There's so much more I can say
about user experience.
But the main thing is
just to pay attention to your goals.
Make sure that whatever action
you want your users to take,
make sure it's easy for them take it.
I don't really go
into usability testing here,
but a great way to test
the experience of your website
is just simply to sit down with someone
and have them run through it.
It's kind of hard to do that
because then the person can find
some things that are wrong,
and then nitpick, criticize your design.
But if you can remember that it's
for the good of the design,
the good of what you're designing,
making sure someone else
looks at your design,
tests it out,
it's a great way to run
a quick usability test,
and make sure your goals
and what your actions
you want your users to do --
that those actions
are easy to find and use.
So, to go back into clutter
a little bit,
I want to talk
a little bit about content.
So when it comes to running
content for websites,
a lot of people tend
to write way too much.
Now, you've seen the "about" page
on someone's website
where they're telling you
their entire life story
and, like, paragraphs
and paragraphs and paragraphs.
No one reads that; maybe someone
will read it, maybe their mom.
But usually people on the Internet,
they really skim.
And big paragraphs on a website
or a landing page are a sign of clutter.
They're kind of intimidating.
So, when it comes to content,
less really is more.
Big paragraphs are a sign of clutter,
and break into bullets if you can.
Try to shorten your sentences,
make smaller paragraphs.
If you can't do that,
one of the easiest ways
to break something out
is to break into bullets like this.
So on the left, it's kind of
a big paragraph, it's hard to read.
And just by adding some bullets,
makes it a little easier to jump
between the important sections,
because those bullets give the eye
a bit of a landing place.
But we can increase the readability
of this by adding some bolding.
So when someone sees this paragraph
of content, they can read --
very quickly see the bolded sections,
and the bolded sections highlight
the most important part
of that paragraph.
If someone is skimming --
makes it easy for them
to see what's there
and if they see something they're
interested in reading further,
then they can stop skimming
and read the paragraph in full.
But, like I said, white space
is the ultimate clutter reducer,
and this is a great place to add
more white space if you can,
by adding a little bit of space
in between those bullets.
Makes it super skimmable.
So, I love Read the Docs.
I just spoke at Write the Docs;
Eric Holscher is a friend of mine.
And I was prepping for this talk,
and I was thinking about
ultimate clickable CTAs,
and I was looking at this like,
"Everything is gray."
So the button on the homepage
is, on hover, bright green.
So whenever you have a website,
and this is what I would recommend to him
if he asked my opinion,
which he hasn't yet.
I'm just talking about it on stage.
[laughter]
I would say, "Hey, this is something
that would be really easy to test here,
"to see if more people search the docs
if that button was a brighter color."
But we can test other things,
because I just talked about content.
And that content
is really quite lovely.
You know, "What is this place,"
that paragraph of content.
This is not as pretty,
but if it was broken up,
I would argue
that this is worth testing.
By breaking up that content,
the paragraph of text, into bullets,
adding some bolding to, again, highlight
the important parts of the sentences.
I also -- that headline saying
"What is this place?"
I answer that question
right at the top so that people --
you know, a little bit quicker
to see the important information.
So again, not as pretty, but this is
something when it was like usability --
you lack something,
like little improvements
to this web page
that I would recommend.
But we can't just talk about content
without talking about headlines.
So when it comes to headlines,
it's often really tempting
to write headlines
and introductions to web pages
as whatever you're designing for,
what is it doing,
but it is important
to remember that it's --
you should be writing
for your reader in mind.
I think, whatever you're designing,
what benefits you'll be giving
to that reader.
And also of course, keep it short
and use natural, friendly language
because you don't want to talk
like a machine;
you want to talk like a human.
So for example, this is
technically what my book is about.
It is an introduction to building
web apps using Python and Django.
But this is what the homepage says:
it's "Learn how to build a web app."
It's a lot easier for readers
and for people coming to my website
to see how this website,
how my books might benefit them.
Now you can argue that I could
probably update this and test it,
but this is lightyears ahead of that.
And changes like this
also can improve your bottom line.
This article goes over
how a simple headline change
improves conversions by 52.8%,
and all they did was took their headline
and talked more about the benefits
to the reader rather than the details
of what something did.
So we're not done with the widget.
You notice that the headline here --
"Download my book on learning
"how to program Django" --
that's kind of like, "Ehh."
What if we updated that to say,
"Hey, learn how to make web apps"?
The button at the bottom,
as well as the form --
I also -- everything I updated,
the content too.
The content is shorter.
The field, instead of just
"email address" --
a little more human by saying,
"add your email here".
The button is a little more actionable;
"download" is still an action verb,
but "send me free info" kind of gives
a little bit more information
to the person looking at this widget.
They're like, "Ooh, free."
So during this,
we've gone from this widget,
to this, by applying
small, little changes.
Principles, applying it here.
You can kind of see how this can make
a cleaner, more usable design.
Quick sidenote about images and imagery
because we've been really only talking
about text and color and whatnot.
In terms of some image principles,
some guidelines,
you can accomplish a lot
with just type and screenshots,
which is why
earlier versions of this talk,
I actually didn't talk about images.
Stock photos, there's a lot
of stock photo websites out there,
and a lot of them look like stock photos
where the person's like:
[poses]
Someone coming to your website --
and you want to have
a photo of someone on there,
they can immediately see
it's a stock photo,
and it's kind of like, "Ehh."
And then photos are also hard
because you have to pay attention
to the file size.
On my website for my book,
I had that gigantic image,
and that was something
I had to optimize a lot
to make sure my website
wasn't horrifically hard to download.
Little, little like design updates
can really make a homepage sing.
These little icons here
on the Stripes website
are really quite lovely.
So, designers are gonna yell at me.
If you're looking for
custom icons for your site,
I am totally okay
with anyone going to Fiverr
or crowdSPRING and just seeing
if there's a designer out there,
for not a lot of money,
can build something for you.
Because I totally understand
building websites,
not having a lot of money
to hire a professional designer,
and I think this
is a great way to get imagery --
custom imagery for your site,
without paying a lot of money.
There's a lot of free resources
out there that are really great too.
So if you really want a giant banner --
this is actually unsplash.com;
the name of it kind of got lost there.
But Unsplash has really lovely,
big images
that are free to use and download.
There's also PhotoPin which allows you
to search for Creative Commons imagery.
And little designs, even if you can work
with a local designer or an illustrator.
This is my friend's website.
He worked with an illustrator
to build these adorable illustrations
on their homepage,
which kind of takes their homepage,
makes it look a little more special
than just, you know,
screenshot and text.
So one thing I want to emphasize
that if you're designing,
you don't have to be original.
One of the things I tell people
is that if you're sitting down
to do this design and you start
with a blank piece of paper,
and you start from scratch,
it's a lot like trying to program
without the use of Stack Overflow;
it's near impossible.
I use inspiration -- I don't copy,
but I'm heavily inspired
by so many different sources
for anything I design.
So, "A Book Apart"
heavily inspired my books.
And there's a lot of sites out there
you can use to pull in inspiration.
Just find things --
find sites that inspire you
or things that you want to emulate,
and use them in your own designs.
So this is siteInspire,
and Unmatched Style, and CSSMania.
There are so many different websites
out there to just showcase good design.
So when you find a design you like,
you can kind of pick out the things
you think are working well
and that's something
that's going to help you
train your design eye.
So for Slack's homepage here --
I mean kind of just figure out,
okay, why does this look so nice?
One of things they're doing is adding
those little squiggles in their headline.
That's something you don't really see,
so that kind of stands out.
They have lots of white space.
Their form has a darker background
which catches the eye
and they have that bright green
"create a team" link.
They have their text,
they have bolding,
strategic bolding
for the important parts.
There's lots of things
you can go through
and figure out
what Slack is doing well,
and as you find things
you think are working well,
try to figure out what is working well,
and that'll help train your design eye.
Because, it is totally okay --
Picasso says, "Good artists copy,
great artists steal."
Banksy comes along, says, "Bad artists
imitate, great artists steal."
There's full-on books about
how you can steal like an artist.
Like, this is a thing:
all of the artists,
we just, like,
get inspired by others.
So don't try to design from scratch;
find things that inspire you.
Last but not least, I want to give
a quick overview of a design process
just to show how I work.
So if you're sitting down
and get an assignment
or you want to build a homepage,
first thing you have to do is go out,
find the inspiration,
and sketch your ideas.
And this is my actual Feedly reader
where I can just go through
these top design websites,
scroll through until I find things
I think will be relevant,
and I can save them
and pick out everything I like.
I usually sketch them, and FYI,
my sketches don't look like this.
This person is totally showing off.
Like, it bothers me
to see sketches like this;
I'm like,
"That's not how it usually looks."
My sketches are just
squiggles and boxes.
It's just a way for me
to remember important parts.
Things that I like
or lay out ideas I like.
These are the sketches
for that Hello Web App homepage.
And then next thing,
in terms of mocking it up,
you can go straight to HTML
if you're building something,
but mockup stage is a really great way
to see something as it might look
and have the ability really quickly,
the ability to move things around.
So this is one of
my husband's projects.
This is not a pixel-perfect mockup;
this was just an idea
of what the content should look like.
Decided that, instead of a paragraph,
again, to use bullets.
It allowed us to figure out,
okay, we'll have a big form,
we'll have the form
just going down this column,
we'll have these two links.
You can use a lot of different --
you don't have to make something
that looks like a full-on website.
Just mock up where
your content is going to go.
Sometimes I do do full-on
designy mockups,
but really it's kind of like
just doing a wireframe is good enough
just so you can see your content
and see how people will use
your website,
or whatever you're designing.
And there's a lot of difference
services out there like Balsamiq
for wireframes
that are really great.
You can use anything;
you can use GIMP, Illustrator,
Sketch, Balsamiq, anything,
whatever system works for you.
Create your boxes
and lines and text.
Makes it a little bit easier
than just jumping straight into HTML.
Makes it easier
to move things around.
And then build it, of course,
which is a whole other presentation.
My thought process every time
I sit down to design is this.
Every single time.
I feel like every time I sit down
and I start sketching,
it's just, like,
this awful, awful experience,
like, "Oh my god,
I'm a terrible designer."
And I assure you
that if you sit down and design
and this is your thought process,
this does not mean
you're a bad designer;
it simply means you are a designer.
So this is only the starting point.
When you're working on building
whatever you need to build,
remember to reduce visual clutter.
You can do that by keeping
the number of fonts and colors low,
adding white space,
lining things up,
making sure your content
is short and easy to skim.
Make sure that your goal
is easy to find and use.
Keep your content simple,
friendly, and to the point.
And definitely practice,
practice, practice.
Because the more you work on design,
the more things that you design,
the easier it will get.
So like I said,
I'm doing a book on this.
hellowebapp.com/web-design
will get to a form that is --
I'll send only information
about this book,
hopefully when it comes out,
when I start writing it.
Otherwise, thank you very much.
[applause]
