The Web Design reference thread (how to start on web design)

[TerabyteS]

[highlight] TEMPORARY NOTE: MODERATORS, PLEASE EDIT THIS THREAD'S TITLE AND CHANGE "Web Design" TO "Web Design and Development", AND ADD AND "and" IN THE PARENTHESIS[/highlight]

[B]Introduction:[/B]
I really felt the lack of this kind of thread.
This thread is directed to people who want to start up from zero, and to people with experience who want some reference, as well as me. So here it is.

This thread is a community effort: at first I'll post a base of content which should do its job in the beginning of this thread's life. After that, everyone can contribute their content. It can be tutorials, articles, guides, anything useful and easy to learn off. I'll keep expanding OP with this content.

This thread is not the Web Development Questions thread. Though you may instead ask some questions on how "pros" do things, and get help on that. Just remember: no specific development questions, just questions where you ask how something is technically and generally done or achieved, but not code-wise. There's the [url=http://www.facepunch.com/threads/1018536-Web-Development-Questions-That-Don-t-Need-Their-Own-Thread]Web Development Questions thread for that.[/url]

[B]Before we start:[/B] There's a great distinction between Web Design and Web Development. If you read the introduction in each section, it will be easy for you to understand what it is. Please try not to mistake them. The reason why this thread is divided in two section is exactly that: they're different.
Web Design is infact the artistic process which leads to the creation of a mock-up of the Webpage or Website, in tools like Photoshop, Fireworks, Gimp...
Web Development is the art of translating the image (the mock-up) into the final product, the website, which should work in browsers.
That's the distinction. There are many people which specialize in only one of these, but if you like to, you can learn to do both equally. After the first few attempts, and after [B]reading many tutorials[/B] (that's the key really), you'll start to get the grip and finding it very fun.

Remember, learning Web Design/Development is not easy. This thread is intended for people who have a strong will to learn and become a professional. Do not be frustrated when you will see your first results won't be top-notch. Even Picasso's first painting looked ugly, but when you keep practicing you are bound to become a good designers. If you commit a lot, in around 8 months you'll be able to come up with very interesting designs.

[B]One last general note.[/B] When working in this field, and expecially when learning, research is key. Google is your friend. Look at websites, learn what they do and [I]why[/I]. Reading tutorials is not a crime, you don't have to feel bad for it. Reading tutorials is one of the only things that will dispense you real knowledge. Read plenty. Look for those "40+ Tutorials and Web Design Ideas" blog posts you can easily find with a Google Search. They are a great condensed source of ideas and knowledge.

[img]http://dl.dropbox.com/u/2951174/webdesign.png[/img]
[release][B]Introduction to Web Design[/B]
First of all you have to know what [I]Web Design[/I] is, and why it is different from [I]Web Development[/I]. Here is a definition:
[quote]Web Design is a discipline which shares much of its concern with other disciplines in the field of visual arts, and consists in the design and visualization of a product (a web page or website), which is aesthetically pleasant, accessible (to all users, but with special care for persons with disabilities and non-human visitors, namely search-engine spiders), and compatible across a wide range of devices (a growing concern, especially with the current rise in smartphone sales).

While the same can be said of many other fields of graphic design, good website design communicates to the viewer in an efficient manner, taking advantage of the unique aspects of the web and addressing implications inherent to the medium (interactivity, accessibility).

It's important to understand that there is more to good design than just 'looking nice'; it's every bit as important for a design to communicate efficiently with the customer, and 'looking nice' should not in any way disrupt this core goal: pass a message or provide a service to the user - this is an area of special concern to you as a web-designer, because while a leaflet or a poster design will mostly be seen in a similar manner regardless of application, a website may (and will) look dramatically different across various devices, operating systems, displays, browsers (and browser versions). Thus, one of (if not the) greatest challenges you as a web-designer will face is to achieve a solid balance between an attractive design, and one that gets its point across even under less than ideal conditions.[/quote]

[url=http://www.facepunch.com/threads/1059435-The-Web-Design-reference-thread-(how-to-start-on-web-design)?p=28026186&viewfull=1#post28026186]Read another definition by BrettJay, experienced Designer and Developer[/url]

Let's now clarify the steps you have to take to design a page
[list]
[*]Sketching on paper (optional)
[*]Wireframing (optional, but suggested)
[*]Full mock-up in Photoshop or similar tools
[/list]

[B]Sketching on paper[/B]
Let's start with this one. Remember it's optional, and it might not be needed for people who have a good fantasy and can make up a good plan in their mind. It doesn't need too much of an explanation really. Just get a piece of paper, a pencil and an eraser. After you have those three, go look on Google or similar for some pages that would fullfill a similar purpose to the one you're looking for (example: If you would like to make a video sharing website, search for "video sharing" on Google. If you're going to make a portfolio, search for "artist portfolio" or "designer portfolio"), and you will find many interesting examples you can get inspired from. Now, a general rule of thumb: it's okay to copy some things, just don't downright make a clone of what you see. It's a good idea to find elements that you like in every page and then try and blend them together in one single design.

If you want to be cool, you can use [url=http://www.uistencils.com/products/browser-sketch-pad]this[/url]:
[img_thumb]http://cdn.shopify.com/s/files/1/0042/9602/products/Browser_Pad-2.jpg?1295974617[/img_thumb]

After you've got your inspiration, it's time to start drawing. Websites are usually made by a header and a content section which contains a sidebar, all of this centered and around 1000 px wide. Naturally, you can't represent pixels on paper, so just make a rectangle with an approximate size. You don't naturally have to strictly follow this scheme. Remember, fantasy is good and variation is even better.

After you've got your rectangle, you can start drawing a cool title for your website, adding a navigation bar, a sidebar, and some text and titles. Remember, don't get carried by the details, keep it simple.
When you're done with the first design, stop and look at it. Check the balance of the page, the way you've aligned elements, the consistency of dimensions and shapes. Write down your notes to the side of the same sheet of paper.

After you've noted down the problematic things, it's time to point out what's good to keep. Do as you did before, and note down what you think looks good in the design.

When you're done with this process, it's time to get a blank sheet of paper and draw the same layout from scratch, while keeping the good things and changing the bad things. Maybe, before starting the 2nd pass, have a look at some more websites that could inspire you.

Repeat this process until you are satisfied with your design. If done well, 3 passes can be enough, but don't feel bad if you get to the 5th pass and you're not sure yet. The most passes you do, the better result you'll get.

Now, one last thing. After you've got your final pass, have a look at all the previous passes. See if you've done anything wrong or if you'd like to restore an element from a previous pass that maybe got removed. If you find anything like this, then do another pass with the things you'd like to recover. If not, then that's your finished result.

[b]Wireframing[/b]
[url="http://en.wikipedia.org/wiki/Website_wireframe"]Wireframing[/url] is something which a lot of people don't do. A Wireframe is basically a very rough outline of the structure of the page; usually monochrome and without any superfluous styling. The purpose of which is to consider the layout of information on a page, and how efficiently a composition communicates, without the incessant worry of trying to pick out just that perfect sky blue colour for the background.

Here's a visual example:
[img_thumb]http://upload.wikimedia.org/wikipedia/commons/4/47/Profilewireframe.png[/img_thumb]

In terms of design process, Wireframing is the intermediate step [b]between sketching and mocking up in Photoshop[/b]. Naturally, if you decided to skip the sketching part, this is gonna be the first time you're designing your page so you'll have to do something similar to what you would have done while sketching, by looking at many pages that could inspire you.

Wireframing isn't always necessary; it depends largely on the job, and people that think working in Photoshop is overkill are going to think drawing up a wireframe before making a PSD comp before diving into html and css is even more 'pointless'.

Wireframes can vary in appearance, some prefer to use a sketchy sort of hand-drawn look; here's one BrettJay has prepared for the Garry's Mod blog. As you can see, it bears little resemblance to the final product, but the structure itself is fairly similar. Of course, design is iterative, and he made a lot of changes in Photoshop after he'd finished the wireframe - there's absolutely no reason why you [i]can't[/i] make changes once you've left the wireframe stage, it will most likely always happen.

[img_thumb]http://brettjones.me/misc/wireframe_garrysmod.png[/img_thumb]

[u]Wireframing tools[/u]
Wireframes can be made in the same programs that your final comps are made; I prefer Illustrator because working with vector shapes is much more intuitive than pushing pixels in Photoshop. There are also many specific tools which are built for wireframing.

[list]
[*][url="https://gomockingbird.com/mockingbird/"]Mockingbird[/url] (Web) - Online, HTML5 wireframing tool.
[*][url="http://www.hotgloo.com/"]Hotgloo[/url] (Web) - Another rather slick wireframing tool.
[*][url="https://pidoco.com/"]pidoco[/url] (Web) - Another popular wireframing tool, used by the Mozilla foundation.
[*][url="http://balsamiq.com/products/mockups"]Balsamiq Mockups[/url] (PC, Mac, Linux) - Cross platform software and web wireframing tool. Eww comic sans, etc, but aesthetics aren't the priority here.
[*][url="http://creately.com/"]Creately[/url] (Web, PC, Mac, Linux) - Another wireframing tool, also does flowcharts and other useful data visualizations.
[*][url="http://www.justinmind.com/"]Justinmind[/url] (PC, Mac) - Another desktop wireframing tool.
[*][url="http://www.omnigroup.com/products/omnigraffle/"]OmniGraffle[/url] (Mac only) - The ever popular OmniGraffle can be used for wireframes. Plenty of templates and UI libraries exist.
[/list]

[B]Final mock-up[/B]
This is the final stage before starting to code your page in HTML and CSS. It consists into designing the looks of your page, exactly the same as how it will look when it will be finished and published as HTML and CSS.
If you've got a sketch or a wireframe, you can follow those, and start adding the details like the colors or the gradients.
As always, get inspired before you start. You can use [url=kuler.adobe.com]Kuler[/url] to find a color scheme you like, and have a look at [url=http://dribbble.com/]Dribble[/url] for some cool designs and graphical elements that would fit your layout. Finally, have a look at [url=http://webdesign.tutsplus.com/]WebDesignTuts+[/url] because it provides many tutorials that help you take this step. [B][url=http://webdesign.tutsplus.com/tutorials/design-a-warm-cheerful-website-interface-in-adobe-photoshop/]This tutorial is an example of what you're looking for.[/url][/B]. If it's your first time, I recommend you follow it to get an ideas of the techniques behind the design.

Lastly, you can use the 960 grid system, which is basically a 960 pixel wide template, divided in 12, 16 or 24 parts that will help you align your titles, your content and your sidebar with even spacing. [B][url=960.gs]Try it out[/url][/B]

After you've got all those tools, you've decided your color scheme and the layout of your page, it's time to get artsy. Just put it down, in the nicest-looking way possible, and when you're done, have a look at it. Like in the sketching part, you will find something off and something good. Start making adjustments, possibly saving files with a different name every time you do a big change, and start to get things right. While you're at it, you can post WIP screenshot in the [B][url=http://www.facepunch.com/threads/1056099-What-are-you-working-on-v4]WAYWO[/url][/B] to get feedback. The feedback other people will give you is not to be considered heavily, but may give you some views that you didn't have before.

This is an example of the kind of result you want to get with your mock up:
[img_thumb]http://dl.dropbox.com/u/2951174/psresult.png[/img_thumb]
As you can see, everything is divided into layers and groups, and you've got your nice design of your page which resembles what it will look in its final browser version. After you've got that, it's just a matter of translating it into HTML, by keeping the same look, and you're done!

When you're done and you're happy with your design, it's time to get Web-Developin'!
[/release]

[img]http://dl.dropbox.com/u/2951174/webdev.png[/img]
[release][B]Introduction to Web Development[/B]
[B]Web Development is a discipline which consist into "programming" the actual content of a website:[/B]

A website is made of a [B]Front-End[/B] and a [B]Back-End[/B]. What are these?
[B]Front-End:[/B] the pages the users browsing your website will see. The layouts, the naming schemes, the graphical elements. Everything here is achieved using HTML, CSS and Javascript.
[B]Back-End:[/B] the underlying system behind your site. It's what makes it work, what allows for it to present content to the users. Databases are the data containers, and PHP (or Ruby, or even Python) is the language you use to "code" your website and make it handle the data it can find in the database to the end-user.

Non-interactive websites (static HTML pages) do not really need a Back-End of any sort, since you're the one editing and administrating them. When the content starts to get more procedural and heavy to control and administrate, that's when the tools I've described above come into play.

Take [url=www.wordpress.org]WordPress[/url] for example. It is what is called a [I]Content Management System[/I], or CMS. It allows you to create blogs, using custom (or pre) made themes to decide the way your website displays. It will use PHP and the databases provided by your website to administrate all of the content you will write using its built-in Admin Panel.

[B]The languages[/B]
The first step to learn Web Development is learning about the languages used to accomplish it.
The most basic language is [url=http://en.wikipedia.org/wiki/Html]HTML[/url], and it's what makes everything work: it is what presents the content of the webpages. The text, the titles, the links are described with HTML [I]Markup[/I]. The content presented with HTML is not visually styled. It's just plain text and images.

Then comes [url=http://en.wikipedia.org/wiki/CSS]CSS[/url]. CSS is the language that lets you add visual style to your pages. It will allow you to specify how every tag, class or ID in your page will look. You can set colors, background-images, borders and much much more.
To experience the powers of CSS, you can try the [url=http://www.csszengarden.com/]CSS Zen Garden[/url]. It is always the same HTML Markup, but changing the CSS will change how the entire page looks and feels completely.

[url=http://en.wikipedia.org/wiki/JavaScript]JavaScript[/url] is the language that will handle dynamic content in your web pages. Moving elements are achieved using JavaScript. JavaScript will also allow for continuous server-client communication with [url=http://en.wikipedia.org/wiki/AJAX]AJAX[/url], which allows to create chats like FaceBook's or even auto-updating pages.

Lastly, come the languages that allow you to provide interactive server-side content. Server-side means that the language you will use will only exist on the server: the end-user will just recieve an HTML page, but that page will be created interactively every time by the language.
The most known example of this kind of language is [url=http://en.wikipedia.org/wiki/PHP]PHP[/url]. Other languages exist that allow you to do the same things. For example [url=http://en.wikipedia.org/wiki/Ruby]Ruby[/url], or [url=http://en.wikipedia.org/wiki/Python]Python[/url]. Differently from PHP, these two languages aren't explicitly made for web development. In fact, you will need to use some libraries or extensions to allow yourself to do web development with them.

If you want to learn more about the server-side languages, please refer to [url=http://www.facepunch.com/threads/1040942-The-Big-Fat-Thread-of-Knowledge%E2%84%A2]The Big Fat Thread of Knowledge™[/url]. This thread will not discuss these techniques in particular.

[B]The tools[/B]
There exist many tools to do Web Development.
In all honesty you can even use Notepad to code a FaceBook clone, but the difference between using notepad and a professional tool will be that the professional tool will ease your work by 10 times.

The best tool are obviously the ones you have to pay for. The [url=http://www.adobe.com/products/creativesuite/design/]Adobe Creative Suite Design Premium[/url] is a great toolkit, and includes tools like Photoshop, Illustrator, Fireworks and DreamWeaver, which all are tools that work together to get a great result in terms of Web Design and Development.
I'd like to focus on DreamWeaver. It is a Web Development toolkit which allows for easy management of your website and lets you edit many languages, like JavaScript and PHP, as well as obviously HTML and CSS. The interface is very well planned, and the ease of access is incredible.

Then come the free alternatives:
[list]
[*][url=http://www.aptana.com/]Aptana[/url]: very similar to DreamWeaver, but lacks some features like easy previews and syntax highlighting for PHP and JavaScript, the reason why I personally switched to DreamWeaver.
[*][url=http://notepad-plus-plus.org/]Notepad++[/url]: very basic editor. Does not do automatic code completion, it will only highlight syntax.
[*][url=http://www.sublimetext.com/]Sublime-Text[/url]: Similar to Notepad++, but includes a few more interesting features.[/list]

For testing your web pages locally without owning a domain and a server, you can use [url=http://www.apachefriends.org/en/xampp.html]XAMPP[/url]. It will transform your computer in a PHP server and allow you to preview your pages by connecting to [url]http://localhost[/url] . Just remember that nobody else will be able to access that environment.

After you're done building your website, you will need to upload it to your domain. That's where a FTP program comes into play. The best one is undoubtably [url=http://filezilla-project.org/]Filezilla[/url]. These tools, once connected to a server of which you know the FTP address and your username and password to log into, allow you to see the entire contents of the server, and to upload new things as well as update what's there, or delete it. By uploading your files from the local folders on your PC to the servers, you make them publicly accessible through a browser.[/release]

[img]http://dl.dropbox.com/u/2951174/tools.png[/img]
[release]
[B]WYSIWYG (not recommended to learn Web Development):[/B]
[list][*][url=http://tryit.adobe.com/uk/cs5/dreamweaver/?sdid=GQICR&]Dreamweaver[/url][*][url=http://www.seamonkey-project.org/]Seamonkey[/url][*][url=http://webdesign.about.com/od/windowshtmleditors/tp/windows-wysiwyg-editors.htm]Top 10 Windows WYSIWYG editors[/url][/list]

[B]Text Editors:[/B]
[list][*][url=http://www.aptana.com/]Aptana[/url] (similar to DreamWeaver but lacks some features including WYSIWYG)[*][url=http://www.sublimetext.com/]Sublime Text[/url][*][url=http://notepad-plus-plus.org/]Notepad++[/url][/list]

[B]Graphical Design:[/B]
[list][*][url=http://www.adobe.com/products/fireworks/]Adobe Illustrator[/url][*][url=http://www.adobe.com/products/fireworks/]Adobe Fireworks[/url][*][url=http://tryit.adobe.com/uk/photoshopfamily/?sdid=IBFIW]Adobe Photoshop[/url][*][url=http://www.gimp.org/]GIMP[/url][*][url=http://www.paint.net/]Paint.net[/url][/list]

[B]Web Development:[/B]
[list][*][url=http://www.cssportal.com/css3-rounded-corner/]CSS3 Rounded Corner Generator[/url], allows you to make rounded corners on the fly and gives you the code[*][url=http://westciv.com/tools/shadows/]Text-Shadow generator[/url], similar to the above, allows you to visually design your text-shadows.[*][url=http://www.gotapi.com/html]GotApi[/url], reference for HTML tags[/list]

[b]Icons[/b]
[list]
[*][url=http://www.famfamfam.com/lab/icons/silk/]Silk by Famfamfam[/url]
[*][url=http://glyphish.com/]Glyphish[/url]
[*][url=http://p.yusukekamiyamane.com/]Fugue[/url]
[*][url=http://wefunction.com/2008/07/function-free-icon-set/]Function[/url]
[*][url=http://sekkyumu.deviantart.com/gallery/#/d11jfh4]Developpers[/url]
[/list]

[b]Fonts[/b]
[list]
[*][url=http://code.google.com/webfonts]Google Font Directory[/url]
[*][url=http://neatfonts.com/]Neatfonts[/url]
[*][url=http://new.myfonts.com/]Myfonts[/url]
[/list]
(make sure you look into the copyrighting for some typefaces.)

[B]FTP tools:[/B]
[list][url=http://smallvoid.com/article/winnt-web-network-place.html]Windows explorer[/url][*][url=http://filezilla-project.org/]Filezilla (recommended)[/url][*][url=http://www.net2ftp.com/]Net2FTP[/url] Web based FTP client[/list]

[B]Tutorials:[/B]
[list][url=http://www.w3schools.com/html/default.asp]HTML[/url] (w3s, might be an oudtaded resource)[*][url=http://www.w3schools.com/css/default.asp]CSS[/url] (w3s, might be an oudtaded resource)[*][url=http://www.w3schools.com/jquery/default.asp]Jquery[/url] (w3s, might be an oudtaded resource)[*][url=http://htmldog.com/]Html Dog[/url][*][url="http://webdesign.tutsplus.com/]WebDesignTuts+[/url], a great source of knowledge about web design and development[*][url=http://net.tutsplus.com/]NetTuts+[/url], similar to WebDesignTuts+ but more about the Development part[*][url=http://psd.tutsplus.com/]PsdTuts+[/url], great tutorials about photoshop. Not strictly Web Design related.[*][url=http://webdesign.tutsplus.com/sessions/web-design-theory/]Web Design Theory[/url] (WebDesignTuts+)[/list]

[B]DNS providers:[/B]
[list][*][url=http://www.123-reg.co.uk/]123-Reg[/url][*][url=http://www.godaddy.com/]GoDaddy[/url][*][url=http://www.co.cc/]Co.cc[/url][/list]

[B]Free web hosting:[/B]
[list][*][url=http://www.zymic.com]Zymic[/url][*][url=http://www.hostwebsitesfree.com/]Host websites free/Keep alive hosting[/url][/list]

[B]Visually astounding websites to take as examples:[/B]
[list][*][url=http://esbueno.noahstokes.com/]Es Bueno[/url], Noah Strokes's blog. Great design, great title. Hard to get it out of your mind.
[*][url=http://anyhub.net]Anyhub[/url], a minimal file uploader. Nice example of a smart and easy interface, which does just what it needs to do.[/list]

[B]Other:[/B]
[list][*][url=http://kuler.adobe.com/#]Kuler[/url] Helps you pick nice design colours[*][url=http://www.google.com/recaptcha/]reCaptcha[/url], protection against spambots and general internet monsters[*][url=http://www.google.com/recaptcha/mailhide/]reCaptcha mail hide[/url], should protect your e-mail against spam bots.[*][url=http://www.google.com/analytics/]Google Analytics[/url], helps you with graphs and statistics about the visitors of your website. Includes in-depth important details like visitor's OS, screen size, browser used...[*][url=http://translate.google.com/about/intl/en_ALL/tour.html#professional]Professional Google Translate[/url], a toolkit based around Google Translate that will help you translate your pages fast and easily[*][url=http://developers.facebook.com/docs/reference/plugins/like]Add a Facebook Like button to your website[/url][/list]

[media]http://anyhub.net/file/1QSW-1277437086466.png[/media]
Useful reference sheet for those who are still learning the ways of HTML.

[/release]

[highlight]This thread does not end here. Much content will be added as time passes. Your contribution is very important![/highlight]
Please don't comment negatively over this interruption. The thread will be completed soon.
If you can, start contributing beginner tutorials and guides about everything regarding web design.

[StinkyJoe]

Not to shit on your parade or anything, but we sort of already have [b][url=http://www.facepunch.com/threads/1040942-The-Big-Fat-Thread-of-Knowledge%E2%84%A2]The Big Fat Thread of Knowledge[/url][/b], and while there wasn't anything grossly wrong in what you said, I think it starts people off on a bad foot - Web Development/Web Design is so much more than just knowing HTML and CSS, or having a good IDE.

Since this is a community effort, I'm sure we can all build on what you started, regardless - I hope you don't take what I said in a negative light, and appreciate the time you took.

[BrettJay]

I have to agree with StinkyJoe. Your post gives solid advice, for front-end web development. Before creating an educational thread on web design, you should have probably understood the distinction between front end development (html and css) and design (which has much more in common with other visual arts disciplines and not so much in common with markup or programming).

Still, it's great to have contributers in the web development section; like StinkyJoe, I hope I don't sound too harsh or discourage you from contributing to the community in the future, because I [i]do[/i] appreciate your efforts, but just understand what you described as design is development, and perpetuating the misconception isn't a great way to educate new users.

If you're wondering why I have such a strong opinionated view on this, as a designer, I feel design and its importance in the web realm is often marginalised because of the nature of the web, what with most web applications and websites being built by developers/programmers, and people confusing design with front end development and all.

[TerabyteS]

[QUOTE=StinkyJoe;28025636]Not to shit on your parade or anything, but we sort of already have [b][url=http://www.facepunch.com/threads/1040942-The-Big-Fat-Thread-of-Knowledge%E2%84%A2]The Big Fat Thread of Knowledge[/url][/b], and while there wasn't anything grossly wrong in what you said, I think it starts people off on a bad foot - Web Development/Web Design is so much more than just knowing HTML and CSS, or having a good IDE.

Since this is a community effort, I'm sure we can all build on what you started, regardless - I hope you don't take what I said in a negative light, and appreciate the time you took.[/QUOTE]

I thought about that too, but I noticed that the big fat thread of knowledge is more centered over deeply technical and advanced knowledge and doesn't focus on basic things, which I'm trying to address here.

[QUOTE=BrettJay;28025753]I have to agree with StinkyJoe. Your post gives solid advice, for front-end web development. Before you create an educational thread on web design, you should have probably made sure you understood the distinctions between front end development (html and css) and web design (which has much more in common with other visual arts disciplines and not so much in common with markup or programming, although understandably a design ends up being comprised of html and css). It's a bit disheartening because apparently [url="http://www.facepunch.com/threads/969888-What-are-you-working-on-v3?p=27540736&viewfull=1#post27540736"]no matter how many times I rant and reiterate[/url], people are still confusing the two :smith:

Still, it's great to have contributers in the web development section, I hope I don't sound too harsh or discourage you from contributing to the community in the future, because your efforts are appreciated.[/QUOTE]

I'm sorry if I have mistaken anything and anything in OP can be corrected. I am not myself a true experienced web developer, but I wanted to sort of push the community to put efforts together and create a good place for basic knowledge.

[StinkyJoe]

[quote=TerabyteS;28025869]
I thought about that too, but I noticed that the big fat thread of knowledge is more centered over deeply technical and advanced knowledge and doesn't focus on basic things, which I'm trying to address here.
[/quote]

Good point, this section does need a topic geared towards absolute newbies.

[QUOTE=TerabyteS;28025869]
I'm sorry if I have mistaken anything and anything in OP can be corrected. I am not myself a true experienced web developer, but I wanted to sort of push the community to put efforts together and create a good place for basic knowledge.[/QUOTE]

Trying to teach others is really a great way to learn - it surely helped me tremendously - we just have to be careful as to not make things worse by sending beginners off in the wrong direction, which is something that unfortunately seems to be the norm in this industry.

I'm a bit busy right now, but I'll contribute to this thread as soon as I have a chance, and hopefully others will do the same.

[TerabyteS]

BrettJay, after reading your post I tried to correct the definition of [I]Web Design[/I] from what I have learned from what you said.

If it still isn't good enough, do feel free to propose your own definition, which would sure do a great job.

[landocalrissian]

You could add this to the OP:
Tools:

WYSIWYG (NOT RECCOMENDED TO LEARN WEB DESIGN)
[url=http://tryit.adobe.com/uk/cs5/dreamweaver/?sdid=GQICR&]Dreamweaver[/url]
[url=http://www.seamonkey-project.org/]Seamonkey[/url]
[url=http://webdesign.about.com/od/windowshtmleditors/tp/windows-wysiwyg-editors.htm]Top 10 Windows WYSIWYG editors[/url]

Text Editors
[url=http://www.sublimetext.com/]Sublime[/url]
[url=http://notepad-plus-plus.org/]Notepad++[/url]

Graphics Design:
[url=http://www.adobe.com/products/fireworks/]Adobe Fireworks[/url]
[url=http://tryit.adobe.com/uk/photoshopfamily/?sdid=IBFIW]Adobe Photoshop[/url]
[url=http://www.gimp.org/]GIMP[/url]
[url=http://www.paint.net/]Paint.net[/url]

FTP tools:
[url=http://smallvoid.com/article/winnt-web-network-place.html]Windows explorer[/url]
[url=http://filezilla-project.org/]Filezilla[/url]
[url=http://www.net2ftp.com/]Net2FTP[/url] Web based FTP client

Tutorials:
[url=http://www.w3schools.com/html/default.asp]HTML[/url]
[url=http://www.w3schools.com/css/default.asp]CSS[/url]
[url=http://www.w3schools.com/jquery/default.asp]Jquery[/url]
*note* Aparently the above is outdated:
[url=http://redirectingat.com/?id=629X1198&xs=1&url=http%3A%2F%2Fhtmldog.com%2F&sref=http%3A%2F%2Fwww.facepunch.com%2Fthreads%2F1059435-The-Web-Design-reference-thread-(how-to-start-on-web-design)%3Fp%3D28026072%23post28026072]Html Dog[/url]

DNS providers
[url=http://www.123-reg.co.uk/]123-Reg[/url]
[url=http://www.godaddy.com/]GoDaddy[/url]
[url=http://www.co.cc/]Co.cc[/url]

Free web hosting:
[url=http://www.zymic.com]Zymic[/url]
[url=http://www.hostwebsitesfree.com/]Host websites free/Keep alive hosting[/url]

Other:
[url=http://kuler.adobe.com/#]Kuler[/url] Helps you pick nice design colours

[StinkyJoe]

[QUOTE=Adzter;28025991]stuff[/QUOTE]

Regular notepad really isn't a good tool for web-development - best case scenario, it slows you down.

W3School also isn't a good source, it's grossly outdaded and frequently incorrect - try [B][URL="http://htmldog.com/"]HTML Dog[/URL][/B] instead. (HTML and CSS).

PHP really [B]has no place in this thread at this point[/B], nor should it be showcased as the only available option. Web-developers shouldn't get a free pass from learning good practices, lower-level concepts, and other important aspects of development.

Your section on Graphic Design includes tools - this would be equivalent to posting links to brushes if someone asked me about painting - yes, knowing and understanding the available tools is great, and necessary, but the things we teach here should be agnostic to that: [B]UX/UI design, good practices, color and shape theory, just to name a few.[/B].

[landocalrissian]

[QUOTE=StinkyJoe;28026072]stuff to fix[/QUOTE]

Fix'd

[BrettJay]

[QUOTE=TerabyteS;28025983]BrettJay, after reading your post I tried to correct the definition of [I]Web Design[/I] from what I have learned from what you said.

If it still isn't good enough, do feel free to propose your own definition, which would sure do a great job.[/QUOTE]

Your revised definition is a lot better.

The way I see it, web design is a lot like graphic/print design, but - as with any specific discipline - there are implications and considerations specific to it. When you're designing for the web for instance, you have to consider interactivity and accessibility (how well people with disabilities can access information on your site), while graphic/print design has its own considerations (colour profiling, page size/bleed, etc).

I think that web designers should ideally be able to convert their designs to html and css (since it comes with the territory of working with the web), but the important thing to remember is that not all web designers actually know html and css. [b]That doesn't mean they're not web designers, it means they're not web developers[/b]. Anyone familiar with html and css can convert a beautiful psd into html and css, but not necessarily can someone familiar with html and css create that comp in the first place.

[TerabyteS]

[QUOTE=Adzter;28025991]list[/QUOTE]

Thank you very much, wonderful contribution. I've edited it a little and included it in OP. It will act as a final section for general links to tutorials and resources.

Thanks to StinkyJoe and BrettJay too for your help. I'm trying to keep up with you to get rid of all the potentially incorrect things I might have written in OP.

[editline]13th February 2011[/editline]

[QUOTE=BrettJay;28026186]Your revised definition is a lot better.

The way I see it, web design is a lot like graphic/print design, but - as with any specific discipline - there are implications and considerations specific to it. When you're designing for the web for instance, you have to consider interactivity and accessibility (how well people with disabilities can access information on your site), while graphic/print design has its own considerations (colour profiling, page size/bleed, etc).

I think that web designers should ideally be able to convert their designs to html and css (since it comes with the territory of working with the web), but the important thing to remember is that not all web designers actually know html and css. [b]That doesn't mean they're not web designers, it means they're not web developers[/b]. Anyone familiar with html and css can convert a beautiful psd into html and css, but not necessarily can someone familiar with html and css create that comp in the first place.[/QUOTE]

Thank you very much. Added this to OP.

[editline]13th February 2011[/editline]

I really need to find a way to give better separation to content since it's really already getting hard to read. I'd like to focus on finding a way to set the Web Design and Web Development sections each on their own.

[BrettJay]

[QUOTE=TerabyteS;28026240]I'm trying to keep up with you to get rid of all the potentially incorrect things I might have written in OP.[/QUOTE]

There's nothing absolutely incorrect in the OP; it's more just the title of this thread is about web design when in actuality a lot of it refers to development (without clarification for beginners). This thread could work well as an introduction to web design [b]and[/b] front end development, as long as the OP makes the distinctions between the two clear.

Technicalities are a bitch :v:

[editline]addendum[/editline]

The OP is doing a good job distinguishing web design from front- and back-end development. Great work on the timely clarification. I'll contribute to this thread when I have the time.

[TerabyteS]

[QUOTE=BrettJay;28026300]There's nothing absolutely incorrect in the OP; it's more just the title of this thread is about web design when in actuality a lot of it refers to development (without clarification for beginners). This thread could work well as an introduction to web design [b]and[/b] front end development, as long as the OP makes the distinctions between the two clear.

Technicalities are a bitch :v:

[editline]addendum[/editline]

The OP now does a good job distinguishing web design from front- and back-end development. Great work on the timely clarification. I'll contribute to this thread when I have the time.[/QUOTE]

Thank you very much, and yeah I just realized it lacks an introduction which distinguishes between Development and Design, adding that next.

[landocalrissian]

Slight mistake in OP, check the "Graphical design" list and you'll see it

[StinkyJoe]

I'm revising the definition of Web Design you placed up there - BrettJay, care to lend me a hand? I'm trying to keep it short, but still feel like it's missing something.

[quote]Web Design is a discipline which shares many of the same concerns other disciplines in the field of visual arts deal with, and consists in the creation of a product (a web page, website), which is artistically pleasant, accessible (to all users, but with special care for persons with disabilities and non-human visitors, namely search-engine spiders), and compatible across a wide range of devices (a growing concern, especially with the current rise in smartphone sales). [/quote]

[BrettJay]

[list]
[*]Prioritize the design applications above text editors, tools (having those two seems redundant, by the way), and WYSIWYG tools, as those are all front-end development, when design applications is much more immediately applicable to web design.
[*]Add Adobe Illustrator to the list :)
[/list]

[editline]Hello (Stinky)Joe[/editline]
[QUOTE=StinkyJoe;28026402]I'm revising the definition of Web Design you placed up there - BrettJay, care to lend me a hand? I'm trying to keep it short, but still feel like it's missing something.[/QUOTE]

That looks pretty good to me, much more concise than my attempt. Vague statement time.

I'd add that the aim with design (in general, not just web), in contrast with traditional art, is that design aims to facilitates communication (While art is more free to be interpreted and not solely commercial). A design's success hinges not on how glossy or web 2.0 a button is but how successfully the composition communicates to the visitor. As such, design relies on content, design without content is merely decoration. Design decisions shouldn't simply be made because something 'looks cool', but rather, on the proviso that it helps facilitate communication with the audience - sounds rather vague and hokey, what i mean to say is that decisions should usually be made based on design principles (contrast, visual hierarchy, colour, balance, alignment, negative spacing, variance, rhythm, flow, etc.) rather than 'this looks boring' or 'this looks cool'.

See if you can translate some of that into a more concise statement, and I'll see if I can think of anything else to add :v:

[TerabyteS]

[QUOTE=BrettJay;28026431][list]
[*]Prioritize the design applications above text editors, tools (having those two seems redundant, by the way), and WYSIWYG tools, as those are all front-end development, when design applications is much more immediately applicable to web design.
[*]Add Adobe Illustrator to the list :)
[/list]

[editline]Hello (Stinky)Joe[/editline]

That looks pretty good to me, much more concise than my attempt.

I'd add that the aim with design (in general, not just web), in direct contrast with traditional art, is that design aims to facilitates communication. A design's success hinges not on how glossy or web 2.0 a button is but how successfully the composition communicates to the visitor. Whilst design is visual, a lot of it is symbolic; design decisions shouldn't simply be made because something 'looks cool', but rather, on the proviso that it helps facilitate communication with the audience..

There, translate that into a more concise statement, and I'll see if I can think of anything else :v:[/QUOTE]

Tried to merge both yours and Stinky's into one. What do you think?

[StinkyJoe]

[QUOTE=BrettJay;28026431]
See if you can translate some of that into a more concise statement, and I'll see if I can think of anything else to add :v:[/QUOTE]

Oh god this thing's getting huge (shush, you.)

[quote]Web Design is a discipline which shares many of its concerns with other disciplines in the field of visual arts, and consists in the creation of a product (a web page, website), which is artistically pleasant, accessible (to all users, but with special care for persons with disabilities and non-human visitors, namely search-engine spiders), and compatible across a wide range of devices (a growing concern, especially with the current rise in smartphone sales).

While the same can be said of many other fields of graphic design, a good website design must focus essentially on the information it was made to convey - having 'nice looking' elements is completely secondary, and should not in any way disrupt the core goal: to send a message or provide a service to the user - this is an area of special concern to you as a web-designer, because while a leaflet or a poster design will mostly be seen in a similar manner regardless of application, a website may (and will) look dramatically different across various devices, operating systems, displays and browsers (and browser versions).[/quote]

[BrettJay]

[QUOTE=TerabyteS;28026528]Tried to merge both yours and Stinky's into one. What do you think?[/QUOTE]

Yeah, good job summarizing it.

[editline]We meet again, StinkyJoe[/editline]
[QUOTE=StinkyJoe;28026539]Oh god this thing's getting huge (shush, you.)[/QUOTE]

Haha, not nearly as huge as my original paragraph, you and TerabyteS are doing a great job of translating my rambling statements. I blame university and their essay word limits forcing me to adapt my writing style.

[QUOTE]While the same can be said of many other fields of graphic design, a good website design must focus essentially on the information it was made to convey - having 'nice looking' elements is completely secondary, and should not in any way disrupt the core goal: to send a message or provide a service to the user[/QUOTE]

I'm kind of contradicting myself saying this, but there's no reason a design can't both communicate efficiently and look good at the same time. I think the better way I could have put it is that there's important goals beyond 'looking pretty' that designers need to consider; aesthetics aren't necessarily secondary to communication, but making sure that your design communicates efficiently is every bit as important as the aesthetics, and because design is so visual, sometimes people lose sight of this (I know I sometimes do).

I just made a critical passing comment about web 2.0 conventions because I'm cynical like that :v:

[StinkyJoe]

Fixed my dumb-assed Portuguese spelling in my previous post. Anything to add?

[editline]13th February 2011[/editline]

Wait, now I fixed it.

[editline]13th February 2011[/editline]

This time's fo' real.

[editline]13th February 2011[/editline]

BrettJay, taking your last post into account:

[quote]Web Design is a discipline which shares much of its concern with other disciplines in the field of visual arts, and consists in the creation of a product (a web page, website), which is artistically pleasant, accessible (to all users, but with special care for persons with disabilities and non-human visitors, namely search-engine spiders), and compatible across a wide range of devices (a growing concern, especially with the current rise in smartphone sales).

While the same can be said of many other fields of graphic design, a good website design must focus essentially on the information it was made to convey - having 'nice looking' elements is completely secondary, and should not in any way disrupt the core goal: pass a message or provide a service to the user - this is an area of special concern to you as a web-designer, because while a leaflet or a poster design will mostly be seen in a similar manner regardless of application, a website may (and will) look dramatically different across various devices, operating systems, displays, browsers (and browser versions). Thus, one of (if not [B]the[/B]) greatest challenges you as a web-designer will face is to achieve a solid balance between an attractive design, and one that gets its point across even under less than ideal conditions.[/quote]Thoughts? You're free to chop it up and provide your own edits if you're up for it.

[editline]13th February 2011[/editline]

[QUOTE=BrettJay;28026553]I just made a critical passing comment about web 2.0 conventions because I'm cynical like that :v:[/QUOTE]

You just need some more [B]AJAX[/B] in your [B]HTML5 WEB 3.0 CLOUD[/B]

[TerabyteS]

Blended StinkyJoe's text in OP, added some images to emphatize the separation between Design and Development

[editline]13th February 2011[/editline]

We now need to fill the Design section but for now I'll leave that up to someone who is more experienced than me. Brett? iFaux? Stinky?

[StinkyJoe]

[QUOTE=TerabyteS;28026894]Blended StinkyJoe's text in OP, added some images to emphatize the separation between Design and Development

[editline]13th February 2011[/editline]

We now need to fill the Design section but for now I'll leave that up to someone who is more experienced than me. Brett? iFaux? Stinky?[/QUOTE]

It's starting to shape up nicely - you've just earned a tool!

I'm going to grab a coffee and take care of some business, but I'll be around to help tackle the rest of the topic soon. (or maybe tomorrow - not sure if I'll be home before 2 am)

[BrettJay]

[QUOTE=StinkyJoe;28026675]BrettJay, taking your last post into account:

Thoughts? You're free to chop it up and provide your own edits if you're up for it.[/QUOTE]

Great work; I've slightly re-worded the definition (I wish I could do better but words are failing me today). Main things I wanted to clarify a bit is that being aesthetically pleasing and communicating aren't necessarily mutually exclusive, I'll concede communication is more important, but I think both go hand in hand with good design. I also clarified that the difference between web design and other forms of design are the inherent advantages and considerations that come with the medium; the original statement "While the same can be said of many other fields of graphic design, a good website design must focus essentially on the information it was made to convey[...]" almost made it sound like other fields of graphic design [i]aren't[/i] concerned with focusing on the message they're trying to communicate, [i]while[/i] web design is.

[QUOTE]Web Design is a discipline which shares much of its concern with other disciplines in the field of visual arts, and consists in the creation of a product (a web page or website), which is aesthetically pleasant, accessible (to all users, but with special care for persons with disabilities and non-human visitors, namely search-engine spiders), and compatible across a wide range of devices (a growing concern, especially with the current rise in smartphone sales).

While the same can be said of many other fields of graphic design, good website design communicates to the viewer in an efficient manner, taking advantage of the unique aspects of the web and addressing implications inherent to the medium (interactivity, accessibility).

It's important to understand that there is more to good design than just 'looking nice'; it's every bit as important for a design to communicate efficiently with the customer, and 'looking nice' should not in any way disrupt this core goal: pass a message or provide a service to the user - this is an area of special concern to you as a web-designer, because while a leaflet or a poster design will mostly be seen in a similar manner regardless of application, a website may (and will) look dramatically different across various devices, operating systems, displays, browsers (and browser versions). Thus, one of (if not the) greatest challenges you as a web-designer will face is to achieve a solid balance between an attractive design, and one that gets its point across even under less than ideal conditions.[/QUOTE]

[editline]11:23[/editline]
I think it's safe to say this thread has already been very educational; if nothing else, that I'm particularly anal about the definition of design :v:

[TerabyteS]

[QUOTE=BrettJay;28027255]I think it's safe to say this thread has already been very educational; if nothing else, that I'm particularly anal about the definition of design :v:[/QUOTE]

Don't worry, your anality is respected.

[landocalrissian]

[url=http://www.google.com/recaptcha/mailhide/]This[/url] is pretty useful for making sure that spammers don't get a hold of your email

[TerabyteS]

[QUOTE=Adzter;28027342][url=http://www.google.com/recaptcha/mailhide/]This[/url] is pretty useful for making sure that spammers don't get a hold of your email[/QUOTE]
Good one, it's in.

[landocalrissian]

[url=http://www.cssportal.com/css3-rounded-corner/]Usefull for learning how CSS3 rounded corners work[/url]
[url=http://westciv.com/tools/shadows/]Usefull for learning how CSS3 text shadows work[/url]
I'm on a roll today

[TerabyteS]

[QUOTE=Adzter;28027593][url=http://www.cssportal.com/css3-rounded-corner/]Usefull for learning how CSS3 rounded corners work[/url]
[url=http://westciv.com/tools/shadows/]Usefull for learning how CSS3 text shadows work[/url]
I'm on a roll today[/QUOTE]

Hey Developers! Look at your CSS, now back to mine, now back at your CSS, now back to mine. Sadly, it isn't mine. But if you stopped using CSS2, it could look like mine!

[cas97]

This CSS3 is now DIAMONDS!

[TerabyteS]

[QUOTE=cas97;28030732]This CSS3 is now DIAMONDS![/QUOTE]

I'm on a div.