Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Creating and maintaining the design of a great web experience is the job of a web designer. In this video, we look at what the role of a web designer is, what they make, and how you can become one.
The web today is a far cry from what was originally proposed in the late 80s.
0:00
An original webpage consisted of only text,
0:03
and there was essentially no design involved.
0:06
But the web we know today has evolved into something much more.
0:09
Websites now aren't just pages on a global network.
0:12
They're complete experiences with rich and engaging content.
0:16
It's a fair assumption to say
0:19
that we're spending increasing amounts of time on the web,
0:21
and this number can only go up in the future.
0:24
Creating and maintaining the design of a great web experience
0:26
is a task handled by a web designer.
0:31
Web design is a vast topic that encompasses
0:33
many different skills and disciplines
0:36
in a fast-paced and constantly changing environment.
0:38
As a web designer you need to have knowledge of topics
0:41
ranging from color theory, typography, and user interaction on the design side
0:44
as well as HTML, CSS, and JavaScript on the technology side.
0:49
And that's just the tip of the iceberg.
0:53
You will also have to keep up with methodologies
0:56
that are a part of this trade—
0:58
things like responsive web design.
1:00
Now while this might seem daunting
1:02
web design is a very engaging, interesting, and rewarding field.
1:03
Now sometimes you might see this position listed as a front-end designer
1:07
or even a user-experience or user-interaction designer.
1:11
The tasks vary from position to position,
1:15
but they all encompass the same set of skills.
1:17
To get an idea of what it is like to start out in web design
1:20
let's talk to some of our teachers in the field.
1:24
[How did you get started in web design?]
1:26
Well I got started in web design by just making a personal homepage.
1:29
I was 11 years old, and I think I was using FrontPage at the time.
1:36
And I just posted all sorts of things that I was interested in at the time—
1:44
mostly video games.
1:49
From there I progressed to actually hand coding HTML and CSS.
1:51
I think I moved onto Dreamweaver at some point
1:58
and eventually just started using a text editor.
2:01
And then—at some point—I started learning back-end coding
2:04
so I started learning PHP—I think around the time I was graduating high school
2:10
or going into college.
2:16
And I just taught myself out of books from the college library.
2:18
Then I moved on to Ruby on Rails—
2:25
got an internship and—kind of just—
2:29
progressed from there in the professional world.
2:33
Well the way I got started in web design was at an early age.
2:36
My dad was a programmer, and my mom was a graphic designer.
2:41
So I—kind of—just always had the programs and the software
2:44
available to me to use.
2:48
And they—kind of—introduced it to me at a young age.
2:50
I didn't really start coding, though, until I was about 12 or 13
2:54
when there was a big diary boom—like the online diaries.
2:59
So like for Zenga and BloopDiary I would create custom layouts and stuff like that.
3:04
Well I got started in the industry around high school.
3:11
My parents came to me and they were like,
3:16
"You know all this stuff that you're doing in your free time
3:17
as a web designer—you know you can make a career out of that, right?"
3:20
And I was kind of surprised, or I just didn't know that
3:23
that was something that I could actually pursue as a career.
3:26
So I enrolled at the Art Institute of Tampa
3:28
and went to school for my Bachelor's degree,
3:32
and I ended up meeting my professor my sophomore year,
3:35
and he hired me.
3:39
I don't really think I had a beginning point of when I got started in design.
3:40
It was more of a transition.
3:45
I've done fine arts pretty much my whole life—
3:50
from painting, drawing, illustrating, creating stuff, sculptures.
3:52
And then when I originally went to college, I went for athletic fitness
3:57
because everybody thought it would be a good idea for me to go for art
4:00
and I didn't listen to them.
4:03
And then I did about 2 years of that,
4:05
and anatomy and physiology just wasn't working out for me.
4:07
So that's when I made the transition, and I got a degree in fine arts
4:10
and then transitioned that into a degree in multimedia design.
4:15
[What was your first experience like?]
4:20
I think—it was definitely a big shock the first time I worked in the industry
4:23
because unlike school where they give you a lot of perfect scenarios to work with
4:28
the perfect client, the perfect—you know—set up,
4:34
the perfect project—you get to do whatever you want—
4:37
it was a big shock to work for an agency where
4:39
you have clients and real-life work to do and on a timeline,
4:43
and you have a brand to work with.
4:50
So I think the shock of just having to track my time and
4:51
design not just for myself but for other people was the biggest shock for me.
4:57
My first professional experience actually programming websites
5:03
was in an internship that I got through my university.
5:09
It was actually Jim that convinced me that I should work at a company
5:14
rather than just trying to freelance.
5:18
At the time I was in college,
5:20
and it was a time where lots of big websites were popping up
5:22
like Facebook and YouTube, and I just naively thought
5:27
I was going to just make a website just like that
5:33
and retire a billionaire at age 30
5:35
and not really have anything to worry about.
5:38
Of course that didn't really pan out for me.
5:41
I did get an internship at a healthcare consulting firm,
5:45
and that turned out to be a really valuable experience for me.
5:50
I was programming PHP.
5:54
[What was your first work or project?]
5:56
Basically what the company did was they sent out
5:59
surveys to patients that were being discharged from hospitals
6:02
and then the patients would send those back—
6:08
this was all through the mail—
6:11
and we would write software that would process all of that data
6:12
and then deliver it back to the healthcare professionals
6:18
in the form of all types of graphs and interesting reports.
6:21
When I first started I was kind of an apprentice designer
6:26
so I would do a lot of the little stuff that my professor—my boss—
6:30
didn't have time to do
6:36
So I would make buttons and little call to actions and stuff like that.
6:37
A couple of the first clients I worked with was Outback
6:42
and some financial companies—a lot of healthcare companies and stuff like that.
6:45
And then the next step up was actually taking on entire projects on my own
6:50
so I would be responsible for the whole design of the email campaign
6:55
or the whole design of the website or whatever.
6:59
My first experience with designing in the industry
7:02
was with an agency called Infamous Graphics
7:06
also the Level Agency in Albany, New York.
7:09
At the time I was getting my Bachelor's degree,
7:13
and I had my Associate's in fine arts
7:16
and was basically helping out with print—large-format print and small-format print
7:19
and some logo design work.
7:25
[What skills do you need to work in the web design industry?]
7:29
I think the skills I needed to break into the web industry were
7:32
first the technical skills—
7:37
so I definitely needed to know HTML and CSS,
7:39
which I had a pretty firm grasp on at the time.
7:43
And, for me and my particular case,
7:46
it was really good to know a back-end language.
7:49
This was before Ruby on Rails started getting popular,
7:53
and PHP was the big back-end language at the time.
7:57
So I knew PHP—I built my own website in PHP
8:02
and it was actually a flyer board for my college.
8:10
So I was looking around campus and saw all of these paper flyer boards,
8:14
and I thought I could make a digital replacement for that.
8:19
And about 8 weeks after I launched, Facebook Marketplace came out
8:23
and basically crushed any hope of that idea succeeding.
8:28
But the good news is it helped me get a job—
8:33
I had something that I could actually show to an employer.
8:37
So not only did I have the skills, but I also had something in my portfolio
8:41
that I could use to actually demonstrate that I had those skills.
8:46
And the last thing—I think—was just having good oral communication skills.
8:50
When I worked in a group in high school or in college
8:55
I was usually the person that would—kind of—lead the group,
8:59
or pick up any slack, or take extra initiative,
9:03
or what have you, and that ended up being pretty valuable
9:07
in a job interview situation.
9:12
First and foremost you need to be a problem solver.
9:16
So you need to be able to recognize a problem and then offer a solution.
9:18
As far as technical skills go from a print standpoint,
9:22
Photoshop and Illustrator, both Raster and Vector Images.
9:27
And from a technical standpoint on web,
9:31
your basic HTML, CSS, and anything further than that
9:34
will definitely help you improve in the industry.
9:40
Color theory—aesthetics, being able to recognize good design from bad design
9:43
and appropriate design
9:48
are huge—are key to being a good designer.
9:51
I think that the most important thing as a designer
9:56
to break into the industry is good typography.
10:00
I was actually just having lunch with my old boss—my professor—
10:04
and he mentioned that the one thing that made me stand out from the other people
10:09
was my attention to typography.
10:12
So I didn't necessarily know the coding languages
10:14
or some of the other stuff could use a little bit of work,
10:17
but he saw that the kerning and the letting
10:20
and my treatment to type was good
10:22
so any good designer—the foundation to me is typography
10:24
and everything else can be taught.
10:28
Some of those things—to keep on moving up
10:30
you would need to learn some front-end languages
10:32
like HTML and CSS.
10:34
It really just depends on what kind of route you want to take—
10:36
whether it's a front-end developer route or a user interface designer.
10:40
But to me, typography is everything.
10:44
As a front-end designer the most important skill set
10:47
is probably just completely understanding typography
10:50
and hierarchy and color theory
10:54
and just being able to take content and break it up into a layout
10:56
that delivers the content the best.
11:01
And for a front-end developer it's so important to understand
11:04
those things like hierarchy, but it's more about the technologies
11:07
like HTML and CSS and the code and everything.
11:13
Typically places don't have—don't have a position for a user-experience designer,
11:15
but if they do that person would have to know how to create personas
11:22
and how to do user testing.
11:27
They would work closely with the designers and with the marketers
11:30
and bridge that gap for the client.
11:34
[How hard was it to learn these skills?]
11:36
You know—it's actually shocking how easy it is.
11:40
Web designers and developers are smart
11:43
but we're certainly not curing cancer or smashing atoms.
11:47
This is something that really anybody can learn how to do.
11:52
I think it's very much a skill that can be picked up just by practicing
11:57
just like art or music or any of the other applied arts.
12:03
I view web design and development as not necessarily a science
12:09
in terms of computer science.
12:15
I think it's the application of those tools.
12:17
So it's actually pretty easy
12:21
if you're willing to put in the time and effort to learn the skill.
12:24
Learning the technical skills of web design isn't as hard as you think it is.
12:28
The HTML and CSS—once you understand the format
12:34
and the layout of the languages
12:40
the rest of it comes naturally.
12:42
I personally feel that learning aesthetics and understanding good design
12:44
is a little bit harder for some people.
12:51
Personally I come from a design background so it wasn't that hard.
12:53
It transpires across the plane pretty much for everything
12:57
in the design world, but if you are coming from a DIV background
13:01
or don't understand design that well,
13:06
it might be a little bit harder for you to understand than it will—
13:10
HTML and CSS programming language.
13:13
Learning design skills I feel is more about
13:16
opening yourself up to good design and knowing what is good design,
13:22
understanding aesthetics—why things look good and why they are apprpriate
13:26
in certain environments.
13:32
Following designers in the industry that are successful
13:36
allowing them to almost mentor you but not directly
13:39
but show you good design.
13:43
And then it just catches on.
13:46
Like once you understand it and once you are able to critique work
13:48
and critique it solidly, it comes very easily.
13:52
What I feel is good design is a solid mixture
13:57
of the art and the content merging together
14:02
creating a seamless experience for the viewer.
14:07
[How do you keep up with the pace of the industry?]
14:11
I don't keep up with industry news in very traditional ways.
14:14
So—for example—I don't really read a whole lot of blogs.
14:19
I don't subscribe to RSS feeds.
14:23
I don't listen to a ton of podcasts.
14:26
Most of the news that I get is from social media.
14:30
So people I follow on Twitter and people I'm friends with on Facebook
14:34
will post articles, and I find that that's a really good way
14:39
to get a very relevant filter on the world.
14:44
Those people are people I trust,
14:47
and they usually bring the best articles to the surface.
14:51
So when somebody like Chris Coyier or Paul Irish
14:56
tweets an article, I'll definitely go ahead and read that.
15:02
Or if they say that, "You should really listen to this episode of this podcast."
15:06
I'll go ahead and tune in.
15:11
And even if I don't have time right then,
15:13
I'll save the article for later whether it's just by emailing it to myself
15:15
or using a tool like Instapaper,
15:20
and then I'll go back later on and actually go through those articles.
15:23
But I find that social media is actually a pretty good filter on the world.
15:28
It tends to just get you the most relevant things the fastest
15:34
rather than going through a popular blog or an RSS feed
15:40
and having to look through and find the relevant information for yourself.
15:44
It's very difficult to keep up with the pace of the industry
15:49
because things are changing all the time.
15:52
Luckily I—kind of—have a job where our job is to stay up on top of things
15:54
and to research, but I remember working at an agency
16:00
and just going to networking events all the time—
16:04
sharing what you know with other people,
16:07
following blogs and reading books,
16:10
just dedicating time each week to stay on top of that kind of stuff
16:14
because it will age you quickly if you don't.
16:18
So keeping up with the pace of the industry is very important
16:21
even nowadays because we have this while device-era going on
16:27
and everything is constantly changing.
16:32
So reading the latest blog posts of popular design blogs,
16:34
following professional designers on Twitter
16:39
and checking out their work and seeing what they're doing
16:44
is really important.
16:48
Hopefully those answers gave you a little insight
16:51
into what it is like starting out as a web designer
16:53
or thinking about starting out.
16:56
But for all that work you put in what are the rewards?
16:58
Well as a new entrant to this industry
17:01
you're looking at starting salaries of around $30,000 to $40,000.
17:03
On the high end with experience, a grasp of all the necessary technologies,
17:07
and the ability to lead teams,
17:11
you can earn upwards of $100,000.
17:13
Web design is—as the name states—design-oriented.
17:16
So if you have a background in art or design
17:20
and want to break into the tech industry,
17:22
this could be the career path for you.
17:24
Now art school isn't a prerequisite,
17:26
but the job is designing websites
17:29
so to reiterate what our teachers said
17:31
you should have a sound understanding of topics like
17:33
color theory, typography, design patterns, and aesthetics.
17:36
You should also know how to use software packages like
17:40
Adobe Photoshop and Illustrator.
17:43
If this is what you're looking to start out with then don't worry.
17:45
We've got all the resources you need right here at Treehouse.
17:48
You need to sign up for Treehouse in order to download course files.
Sign up