- 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.