How to get started in Web Design?

[cheesywlz]

I've been thinking about getting into web design for a few weeks now, and it looks very interesting, and would definitely help in finding a job.

I just need some help on how to get started, a push in the right direction.

I've only done EXTREMELY basic HTML before, and that doesn't count for anything, so I am an absolute beginner.

I have about 6 months experience with C++, and that's about it.

[b]So what language(s) should I learn first? Which websites will help me out? Are there any good tutorials out there?[/b]

Thanks.

[KmartSqrl]

If you want to learn web [I]design[/I] you should learn your way around Photoshop or another comparable graphics program and learn the fundamentals of good design before you learn any languages.

For this, [url]http://psd.tutsplus.com[/url] has a lot of good tutorials to get you started.

If you want to learn web [I]development[/I] you should learn HTML/CSS first.

For this, [url]http://www.w3schools.com[/url] and [url]http://net.tutsplus.com[/url] have good info and tutorials.

If you want to learn both, which is honestly what I recommend, I would say you ought to start familiarizing yourself with the design side of things and then from there progress on to the development side. Writing decent HTML is easy, good design is a lot harder, and is something that you'll probably have to work a bit harder at. It's good to get a jump on that early since a website with good design and shoddy HTML is going to be a lot more impressive than a website with a shoddy design and clean semantic HTML.

I'd definitely recommend at least some knowledge in both fields, because I've encountered way too many web designers who don't know much about the development side of things, and way too many web developers who don't have an ounce of design sense in their body.

[cheesywlz]

Thanks for the response.

I've got a few more questions:

[b]1. How long have you (assuming you are experienced in this area) been doing web design / development?

2. What is the learning curve like for this type of work? Does it start out hard, and get easier? Or is it always hard with some easy parts?

3. If you learned both development and design, how did you balance learning material from both areas at the same time? Should I try both at once, or get the basics down and move to the next?[/b]

Thanks.

[Uglehs]

[QUOTE=cheesywlz;23804438]Thanks for the response.

I've got a few more questions:

[b]1. How long have you (assuming you are experienced in this area) been doing web design / development?

2. What is the learning curve like for this type of work? Does it start out hard, and get easier? Or is it always hard with some easy parts?

3. If you learned both development and design, how did you balance learning material from both areas at the same time? Should I try both at once, or get the basics down and move to the next?[/b]

Thanks.[/QUOTE]

1. for me about 8 years.
2. Hard but fun first, then when you get better it'll be easy and boring :P.
3. Design is always better to learn before development. I did the mistake and learned php and all the pro languages and didn't learn how to design well with html, so when it came time to make my own products I didn't have a design to my stuff, which pretty much sucks.

[KmartSqrl]

I've been doing it for around 9 years, professionally for around 4 and a half.

It definitely starts out hard, whether or not it stays hard depends on how much you push yourself to do bigger things and on the type of projects you take on. I try to keep challenging myself to keep my skills sharp.

I learned design first, then transitioned in to front-end development (HTML/CSS) and then started doing a bit of back end development (PHP, although now I use Ruby) a few months later.

[QUOTE=Uglehs;23805087]design well with html, so when it came time to make my own products I didn't have a design to my stuff, which pretty much sucks.[/QUOTE]

HTML is front-end development, not design. That's an important distinction to make for someone who is just learning.

[cheesywlz]

Thanks for all the info guys, I've got just a [i]few[/i] more questions.

[b]1. What program(s) should I use for coding? I'm sure I can just use notepad or something, but are there any good ones with syntax highlighting for example?

2. What are some realistic goals I can set? e.g. Be able to make 'x' by 'this date'.

3. What is the best way to go about learning Photoshop? That tutplus site you linked me to was very nice, but there's not really a certain path I can follow with it. (beginner to advanced, etc.) Should I follow a series of tutorials? Or just mess around with different things, and become experienced with it?[/b]

Once again, thanks for all the help, it means a lot.

[editline]04:22PM[/editline]

[QUOTE=KmartSqrl;23810893]I learned design first, then transitioned in to front-end development (HTML/CSS) and then started doing a bit of back end development (PHP, although now I use Ruby) a few months later.[/QUOTE]

What's the difference between HTML / CSS / PHP, anyways? What different tasks / functions do they accomplish?

[game]

[QUOTE=cheesywlz;23811776]Thanks for all the info guys, I've got just a [i]few[/i] more questions.

[b]1. What program(s) should I use for coding? I'm sure I can just use notepad or something, but are there any good ones with syntax highlighting for example?

2. What are some realistic goals I can set? e.g. Be able to make 'x' by 'this date'.

3. What is the best way to go about learning Photoshop? That tutplus site you linked me to was very nice, but there's not really a certain path I can follow with it. (beginner to advanced, etc.) Should I follow a series of tutorials? Or just mess around with different things, and become experienced with it?[/b]

Once again, thanks for all the help, it means a lot.

[editline]04:22PM[/editline]

What's the difference between HTML / CSS / PHP, anyways? What different tasks / functions do they accomplish?[/QUOTE]

[url=http://en.wikipedia.org/wiki/HTML]HTML[/url]
[quote]HTML, which stands for HyperText Markup Language, is the predominant markup language for web pages. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. It allows images and objects to be embedded and can be used to create interactive forms. It is written in the form of HTML elements consisting of "tags" surrounded by angle brackets within the web page content. It can embed scripts in languages such as JavaScript which affect the behavior of HTML webpages. HTML can also be used to include Cascading Style Sheets (CSS) to define the appearance and layout of text and other material. The W3C, maintainer of both HTML and CSS standards, encourages the use of CSS over explicit presentational markup.[/quote]
[url=http://en.wikipedia.org/wiki/Cascading_Style_Sheets]CSS[/url]
[quote]Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including SVG and XUL.[/quote]
[url=http://en.wikipedia.org/wiki/PHP]PHP[/url]
[quote]PHP: Hypertext Preprocessor is a widely used, general-purpose scripting language that was originally designed for web development to produce dynamic web pages. For this purpose, PHP code is embedded into the HTML source document and interpreted by a web server with a PHP processor module, which generates the web page document. As a general-purpose programming language, PHP code is processed by an interpreter application in command-line mode performing desired operating system operations and producing program output on its standard output channel. It may also function as a graphical application. PHP is available as a processor for most modern web servers and as standalone interpreter on most operating systems and computing platforms.[/quote]

[cheesywlz]

[QUOTE=game;23811938][url=http://en.wikipedia.org/wiki/HTML]HTML[/url]

[url=http://en.wikipedia.org/wiki/Cascading_Style_Sheets]CSS[/url]

[url=http://en.wikipedia.org/wiki/PHP]PHP[/url][/QUOTE]

Thanks for the information, that clears it up very nicely.

[Uglehs]

i use Notepad++, really nice for alot of different languages.

[alphaspida]

What about javascript?

[UberMouse]

[QUOTE=cheesywlz;23811776]Thanks for all the info guys, I've got just a [i]few[/i] more questions.

[b]1. What program(s) should I use for coding? I'm sure I can just use notepad or something, but are there any good ones with syntax highlighting for example?[/b]
[/QUOTE]
Check out Jetbrains PHP storm I love it. Not free but you get about 45-60 day trial.

And if you're going to learn Javascript (Which I recommend if you're going to be doing the website layouts) then take a look at [url]www.jquery.com[/url] it's a Javascript framework that makes life a lot easier.

[torekk]

[QUOTE=cheesywlz;23811776]3. What is the best way to go about learning Photoshop? That tutplus site you linked me to was very nice, but there's not really a certain path I can follow with it. (beginner to advanced, etc.) Should I follow a series of tutorials? Or just mess around with different things, and become experienced with it?[/b][/QUOTE]
Well, when I began in 2006, I just messed around and learned how the filters work and all that stuff, then I followed tutorials, but only to the half or even less, just until I got a inspiration and started doing my own stuff.

I can also suggest you [url]www.tutorialhero.com[/url], a useful site which is basically a collection of tutorials, for almost everything.

Also I'd suggest you focus on learning several things, like typography(REALLY useful in webdesign) and color patterns(just because red and yellow make orange doesn't mean it looks good).

[SCopE5000]

I've been designing for about 6 years.

[MUFC2007]

This is an example of a good thread, especially in terms of questioning.

[CorpseRida]

I'm about to start my third semester of college for Web Design and I'd also like to throw in a question.

HTML was the language I worked with first, of course. I have tinkered with a few other languages including CSS and Java, but didn't get much out of them. What should I work with since I'm still in the beginning stages?

[Crhem van der B]

Web Design or Web Development?

[KmartSqrl]

[QUOTE=Crhem van der B;23923081]Web Design or Web Development?[/QUOTE]

Read thread. We clarified this in the first post (well I did)

[cheesywlz]

I appreciate all the responses, guys. It's really made the introduction into this sort of work much easier. :smile:

[FpsGlock]

if you wanna start on the design I'm starting on the development mabey we could work together? Add me on steam if you want to.

[SnakeFace]

[QUOTE=FpsGlock;23925934]if you wanna start on the design I'm starting on the development mabey we could work together? Add me on steam if you want to.[/QUOTE]

You'll never be a good web designer unless you can do both.

[KmartSqrl]

[QUOTE=SnakeFace;23926172]You'll never be a good web designer unless you can do both.[/QUOTE]

You'd be surprised. It's actually pretty rare to find someone who can do both well in the professional world.

A lot of the work I do is contract work through larger design firms, and I'm constantly being told that the fact I am good at so many different pieces of the web design puzzle is really rare and valuable.

[FpsGlock]

I think that if I can get really good at development I won't need to design because I'm so fucking pro at development :D. Anyways People can do things better and faster as a team. People will fight if both are doing design or both are doing development because 1 has a idea he/she thinks is good and the other doesn't like it etc. Then trying to put the things together is a total clutterfuck.<<Personal Experience

[editline]11:40PM[/editline]

Anyways I'll learn design later if I need to.

[Crhem van der B]

[QUOTE=KmartSqrl;23923866]Read thread. We clarified this in the first post (well I did)[/QUOTE]

I was respoding to CorpseRida post...

[KmartSqrl]

[QUOTE=Crhem van der B;23926912]I was respoding to CorpseRida post...[/QUOTE]

Whoops

[UberMouse]

[QUOTE=FpsGlock;23926488]I think that if I can get really good at development I won't need to design because I'm so fucking pro at development :D. Anyways People can do things better and faster as a team. People will fight if both are doing design or both are doing development because 1 has a idea he/she thinks is good and the other doesn't like it etc. Then trying to put the things together is a total clutterfuck.<<Personal Experience

[editline]11:40PM[/editline]

Anyways I'll learn design later if I need to.[/QUOTE]
Yea that is true. I can do design but I'm not really that good at it, Unless you give me a nice ole picture of the design exactly how you want it I'm pretty bad at making up my own stuff. I can do Javascript and stuff though, but I wouldn't completely classify that as design.

[Crhem van der B]

Creating the HTML/CSS from a psd file isn't design, but actual web development.

[andersonmat]

Think of it what you will, but I consider the HTML and CSS both part of the design. Javascript as well as any back end scripting is what I would consider development -- which is what I prefer.

[FpsGlock]

Ubermouse if we could be more alike in that...

I can't figure out a good design to save my life.

[KmartSqrl]

[QUOTE=andersonmat;23939766]Think of it what you will, but I consider the HTML and CSS both part of the design. Javascript as well as any back end scripting is what I would consider development -- which is what I prefer.[/QUOTE]

This isn't really an objective thing. HTML and CSS are front-end development. That's just what they are. Sure, you can design in-browser (which I recommend against in most situations) but that just means you're doing the design and the front-end development at the same time.

[BrettJay]

[QUOTE=andersonmat;23939766]Think of it what you will, but I consider the HTML and CSS both part of the design. Javascript as well as any back end scripting is what I would consider development -- which is what I prefer.[/QUOTE]

I'm not sure why you're splitting up HTML and CSS from JavaScript; HTML is the structural markup of your page, whilst CSS is all the presentational markup and JavaScript interactivity - the three work together in modern webpages.

Languages such as php which interface with databases are [b]backend development[/b]; it is the behind-the-scenes work that the end user rarely sees, hence the name, it's the behind-the-scenes engine that powers the website.

The aesthetics are handled with HTML markup and CSS, which is considered [b]front end development[/b], because the user does see and interact with this. Coding != design, and [url="http://www.facepunch.com/showthread.php?p=23911822#post23911822"]knowledge of HTML and CSS won't make a person automatically understand design principles[/url], or be able to utilise these to design a nice site.

Knowledge of design principles and design conventions - things like visual hierarchy, contrast, and focal point - are things that CSS and HTML cannot teach you. Working with front-end languages like HTML and CSS, you'll get an eye for good design, and you'll be able to describe what looks good, but not necessarily why it looks good (at least, not according to design theory). Web design is like graphic design - they're both visual mediums - the only difference is that web designers cannot upload a finished jpg (or tif/eps/etc.) to the internet, which gives rise to the job of front end developers.

I apologise if I'm coming off elitist, but really, design is a vast enough area for someone to study on its own without lumping it in with front-end development, and I by no means consider myself an expert.