How to Become a Web Designer in 2015 | Design Careers


– Hey, everybody, this is
graphic designer Roberto Blake of robertoblake.com helping you create
something awesome today. So, in today’s video, I’m
gonna talk about how you become a web designer in 2015,
how it’s changed since I got started in web design
about, what, 17 years ago when I was like 14 years old, and what you need to know today to succeed as a web designer, whether
that be as a freelancer or working at an in-house company or working at an ad agency. One of the big questions
that always comes up is do you need to learn HTML
code to be a web designer? And the short answer is yes and no. And I say that to say this, you can design websites
without learning HTML coding, but it’s not recommended,
and just because you can code doesn’t necessarily mean you can design. It requires both things. Part of the process of web design actually still requires some pen and paper because you have to plan these things out. You have to know a lot
of things when you wanna get started as a web designer. One of the first things is, what is the website gonna be about. When you’re taking on
a web design project, just like any other
graphic design project, you need to start with a client brief. Too many people, whether
it’s designers or whether it’s more technical people,
want to jump into the computer and not deal with human beings first and deal with pen and paper. Pen and paper is still part of the process and there’s a reason for that. You need to organize your
ideas, you need to have a hierarchy for the
website, you need to know how many pages it’s going
to be, you need to determine do those pages have different layouts and are there templates
that need to be developed for specific parts of the
website, different types of content that are gonna be on there. What media types are
gonna be on the website? Is it gonna have a lot of images? Is it gonna have a lot of video? Is there gonna be an audio component? Is there gonna be a blog? Is this an e-commerce website
that needs to move products and if so, what are we
doing in terms of, like, taking credit card payments, PayPal? All of these things are important and they need to be decided
before you even think about touching a keyboard and mouse. So, people ignore the
planning stages of a website and people don’t know what to
necessarily ask the clients. You needs to ask the clients
a lot of specific questions if you’re going to be
designing websites for clients, and if it’s a project team,
you gotta make sure you have a brief from your supervisor
and you gotta know, well, who’s supplying the content? Are you creating the images? Are the clients or your
employer going to supply you with the images? As for the copy of the website,
the text that’s gonna go in each of these web pages,
who’s supplying that? Are you responsible for the copywriting? Or is the copywriting
gonna be provided to you, and if so, I recommend requesting
it be in a Word document sent to you in an email as an
attachment so that you have the ability to just
copy and paste it out of the Word document, you
have it to to where you can strip out any formatting,
and you have a documented timeline of the fact
that it was sent to you. So, those are important things. If there are pictures, you
need to know if they’re gonna be delivered to you digitally or are you gonna have to scan them? If it’s gonna be stock
photos, you need to figure out who has the rights to them. So there’s things that have
nothing to do with coding, nothing to do with visual
design, color theory, CSS, PHP, Word Press, any of that stuff
that people take for granted as web designers to begin with. They don’t know how to plan a website. The other thing is you need to
understand how websites work. You need to understand that
websites require a domain name. When you go to a dot.com,
it’s a domain name and you get that from
a company like GoDaddy or Bluehost or 1&1, and
you don’t actually own it. You’re more or less leasing
it and you have to renew it every year and there’s a cost to that. It might be $5.99, it might
be $9.99, it might be $14.99, you know, it just depends
on what your deal is and what your arrangement
with your hosting company is. The other part of that is, the web hosting is where the content and
where your website sits. So you think of a web server as a house or an apartment that you’re renting, your files are the
furniture that fill it up. The files and the content,
they belong to you, just like your furniture. But you don’t own the web server. You don’t own the property, if you will. You’re just occupying it. So you have to pay that monthly fee and that’s what web hosting is. And again, that might be $2.99, it might be $1.99, it might $5.99, it might be $59.99 if you
have a dedicated server. So you need to think about
these things and you need to understand what the
aspects of a website are, what the technology that backs
it is, and you need to have a grasp of those before you
even think about touching a computer and trying to code
a website or use a program like Adobe Muse or Dreamweaver
or WordPress to build one. So, let’s talk about the software you need to operate, run, and manage a website. Now, we talked about HTML code. HTML code is how websites
are traditionally built. But there are other editors
called WYSIWYG editors, or what you see is what you get, and coders and programmers
hate these applications, because in their mind,
real web designers code. I firmly disagree with that. Coders code. Designers design. And you might be able to
code and build a website, but you might not be
able to design your way out of a paper bag, because
you might be able to make this great, robust,
functional website that is ugly as sin, that can’t
sell your client’s product and can’t accomplish
your employer’s goals, so that doesn’t make you a designer, that makes you someone
who built a website. And that’s not a dig at coders. Like I said, I’ve been coding
since I was 14 years old. I coded in Notepad. That’s why I know what I’m
talking about when I say that. There are people who style
themselves as web designers who can’t design. Now, there are designers who can design who don’t know any technical
things and can’t code, but at the end of the day,
people are more interested in how a website looks and
presents and whether it accomplishes getting someone
to want to buy the product, and then if it doesn’t work,
then they get frustrated. But they will never get
that far to figure out that the button they’re
clicking doesn’t work if they look at the
website, it’s ugly as sin, and they leave in under five seconds. And that’s kind of the conflict
between coders and designers sometimes if they’re not
someone like me who is both. And I think it’s important to be both. Is it difficult? Yes. Does it take more time and
energy and training? Yes. But at the end of the day, you
need to be able to accomplish well placed, aesthetic,
visually appealing design that can sell a product,
service, get people engaged, get people interested, and
then it actually needs to work under the hood and do
what it’s supposed to. And then on top of that, you
probably are gonna have to learn how to market and promote this thing because if no one sees it, then who cares. But that’s another
conversation and that goes into search engine optimization,
how to rank in Google, which I will cover in other videos. But circling back for a moment to tools. So, the tool that I prefer
to use for hand coding and visual coding in split
mode is Adobe Dreamweaver. I think Adobe Dreamweaver is great because it helps you organize your files, set up a test server environment,
if you know how to do that kind of thing, you can see the code, but you can also see what
it’s creating in real time, you can get a feel for
whether colors and fonts are working well and whether
you need to change them, you can do that with a client
sitting over your shoulder or a supervisor sitting over
your shoulder and make changes in real time without
having to upload anything, and I think it’s great
from that point of view. I also think that the
way it visually works with color coding and
some of the short cuts are just gonna be better
for productivity and speed. I love the CSS editor
for doing certain things. And I just think it’s faster. It’s a lot easier on my eyes
than a lot of the applications that hardcore programmers like to use. So, that’s what I prefer. Now, that’s if you’re doing hand coding or a little bit of WYSIWYG. If you wanna do straight
up WYSIWYG, what you see is what you get, no coding,
you can use something like Adobe Muse, and you can
actually visually draw out what a website looks like. And the thing I like about
this is, like I said, pen and paper first. So you could sketch the
layout of a website, just like you would if you
were doing a traditional print advertisement, and then can
create that in Adobe Muse, based on what you drew as a sketch. This is great when you’re
working at an ad agency, because a lot of agency types, creative directors and art directors, a lot of them are a bit
older and old school, and they don’t want some
complicated explanation as to why you can’t do something in code. For them, why can’t you
move it an inch to the left? Why can’t it be perfectly centered? Why can’t it be this, why can’t it– They want to design websites
and they want you to design websites they way
that they designed print ads using something like Adobe InDesign. So, Adobe Muse is the perfect for solution for the ad agency world
if you’re doing a website that’s under 20 pages and doesn’t require a blog or anything like that. So it’s the perfect solution for that. Now, if you’re gonna do
something more robust and you need a blog and
you need e-commerce, then I would suggest
something like WordPress, which is a content management system. If you’re doing e-commerce,
maybe use OpenCart, osCommerce, different things like that. I’ll have to do a whole ‘nother video on e-commerce platforms and what
the best solutions are there, so make sure you subscribe and stay tuned to get that video from me. So, again, those are
your three basic types of web building applications. You have HTML, hand coding editors, and hybrid editors that do both, you have WYSIWYG or visual
design applications, and then you have content
management systems, which function like WordPress and Joomla! and these are pretty simple
to use once their installed and updating and adding
pages is as simiple as updating a Facebook page. So that’s why a lot of
people enjoy that platform. For managing and uploading
things to a website, you wanna use an FTP program, which is called a file
transfer protocol program, and that’s just a
complicated way of saying that we take if off your
computer on your desktop and we put it onto the website. It is literally that simple. If you’re using a Mac, then you might be using
Fetch or Cyberduck. I prefer to use FileZilla
for both Windows and Mac. If you’re on Windows, I recommend WinSCP, it’s a great tool. There’s also browser-based
ones you can use like FireFTP. So those are some FTP programs that you should definitely look at using. Working on websites
often means working with graphics as well, and some
basic programs you can use for graphics for your website,
whether that’s banner ads and background images and so
on, are obviously Photoshop, which I prefer to use,
Photoshop Elements if you can’t afford that or don’t want to
go to the subscription model, you could also use Corel Photo Editor, you can use PaintShop Pro, you can use GIMP, which is free, you can use painter.net, there’s
just a lot of applications that you can use for that, and, again, links to all these things will
be in the description below, so make sure you’re checking that out. So let’s talk about how you can learn to become a web designer today. When I learned how to
become a web designer, we didn’t have Google, unfortunately, and we didn’t have YouTube. We had to use webmonkey.com and learn the basic principles there. I also learned by disassembling
existing websites, modifying things in the code,
and seeing what happened. And this was, again,
something I was having to do in a challenging way using
Notepad back in the day. Now we have a lot more
applications like I talked about, you have free editors, you have Composer, which is a good free editor
for HTML, and, again, you have things like Adobe Dreamweaver and so on to be able
to do this, Notepad++. So, again, you don’t have to use Notepad like I did way back when. Experimenting, disassembling
existing websites, using books and using
websites like webmonkey.com were really the only way that someone not going to school for
it, and it was still rarely being offered in college at the time, this is back in the
late 90’s, early 2000’s, that was the only way to
really learn web design. Today you have things like
Codeacademy, Khan Academy, Learning Tree, you have
Lynda, Udemy, YouTube, you have blogs like mine, you
have all these different ways that you can learn about
web design and HTML code, and I think that that’s great and I think you should
take advantage of that. Yes, you can go to college
to learn web design, but, again, the value of that
might be a mixed bag of nuts because, again, you’re seeing
the trouble that people are having with going to college,
taking out student loans, the job market being what it
is, a degree not being enough to get a job anymore,
so if you wanna to avoid some of those things and you
wanna get real world skills, you can do it on your own, you
just have to be disciplined enough to do it, and remember,
there are kids and teenagers doing this every day, and
even years ago as a teenager, I was able to do it and within
a summer I was at a point to where I was actually
starting to get paid for building websites for people locally. So, just keep in mind,
this is something you can teach yourself, you
don’t have to pay for it. But if you do wanna pay,
it’s cheaper to try to do it through something like
lynda.com or Udemy or Skillshare or any number of online
learning sites, to try it first at a lower price point than
paying hundreds of dollars for a college course, so
just try and give that a shot before you go to that traditional model. I’ll have some recommended
books in description below that you can use to try
and learn HTML coding and the principles of web design as well. So, some other things you need
to know if you’re gonna be a web designer in 2015,
aside from the tools that we talked about, learning
things like WordPress, as far as content management systems, you might wanna pick up things
like jQuery, JavaScript, and a little bit of PHP as well. Having these under your belt
will help you as a web designer because you’ll have more
flexibility, you’ll be able to do more complicated tasks, and
you won’t be restricted by the limitations of just doing
front end work, you’ll be able to do some more complex and
advanced things as well. I also think you should look at learning some visual design skills
in terms of typography, so that you can lay out
your websites in a way where the text is readable and pays
attention to visual hierarchy, I think you should learn
the gestalt principles of graphic design, which
I’ll cover in other videos, and I think you should
learn visual editing and photo retouching so
that you can make banner ads and make really impressive-looking
websites that don’t rely on basic colors, shapes, and text alone to be visually interesting
so you can draw people in and have an effective
website for your customers, your employers, your
clients, what have you. It goes without saying
today, you wanna learn about SCO search optimization, get
people to go to a website, and how to rank in Google. I’ll have other videos covering that. If you have questions,
you can leave them in the comment section below
and I’ll try and answer them, but, again, I’ll cover
that in other videos. Well, I hope you guys enjoyed this video on how you become a web designer in 2015. Again, I’ll answer any
questions you still have in the comment section below. Like this video if like it,
don’t forget to subscribe. Let me know what other
videos on web design you want me to cover. As always, you guys, thanks
so much for watching, and don’t forget, create
something awesome today.

100 Comments

Add a Comment

Your email address will not be published. Required fields are marked *