Careers in Web Design

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