The Web Design reference thread (how to start on web design)
57 replies, posted
I used Notepad++ but after finding Sublime in this thread, I think I might switch to it. It looks nicer and doesn't feel cluttered after I'm done writing a page of HTML.
[b]Wireframing[/b]
[url="http://en.wikipedia.org/wiki/Website_wireframe"]Wireframing[/url] is something not covered in this thread yet, and 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.
In terms of design process, Wireframing takes place [b]before mocking up a psd in Photoshop and well before html and css[/b].
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 I 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 I made a lot of changes in Photoshop after I'd finished the wireframe - there's absolutely no reason 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]
[b]Wireframing tools[/b]
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]
[QUOTE=BrettJay;28041273][b]Wireframing[/b]
[url="http://en.wikipedia.org/wiki/Website_wireframe"]Wireframing[/url] is something not covered in this thread yet, and 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.
In terms of design process, Wireframing takes place [b]before mocking up a psd in Photoshop and well before html and css[/b].
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 I 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 I made a lot of changes in Photoshop after I'd finished the wireframe - there's absolutely no reason 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]
[b]Wireframing tools[/b]
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][/QUOTE]
This is awesome, thank you. Gonna read the hell out of it and add to OP when I get back home.
Also what's that nifty Firefox theme?
There we go! We now have the web design part. Naturally, it can be vastly improved, but that's a start. Thanks brettjay for the part about wireframing!
[url]http://translate.google.com/about/intl/en_ALL/tour.html#professional[/url]
Rather useful if your audience is non-english
[QUOTE=Adzter;28056150][url]http://translate.google.com/about/intl/en_ALL/tour.html#professional[/url]
Rather useful if your audience is non-english[/QUOTE]
Keep the nice stuff coming!
Wow, HTML Dog is actually useful compared to W3S, while good for starting off it doesn't cover anywhere near as many tags as HTML dog seems to. Many thanks information thread.
[url=http://developers.facebook.com/docs/reference/plugins/like]Information on making your website have a "like" buttton[/url]
[QUOTE=TerabyteS;28046371]Also what's that nifty Firefox theme?[/QUOTE]
[url="https://addons.mozilla.org/en-us/firefox/addon/naver/"]Naver[/url].
Thanks. Now we gotta keep this thread up by adding and improving its content.
Resources:
The right font and icon choices can make or break your website, heres a list of cool resources.
[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.)
-snip-
[media]http://anyhub.net/file/1QSW-1277437086466.png[/media]
Useful reference sheet for those still learning the ways of html, got one for PHP and CSS if you want them too
[QUOTE=Adzter;28096463][media]http://anyhub.net/file/1QSW-1277437086466.png[/media]
Useful reference sheet for those still learning the ways of html, got one for PHP and CSS if you want them too[/QUOTE]
Sure, post please
[QUOTE=Adzter;28096463]
Useful reference sheet for those still learning the ways of html, got one for [B]PHP[/B] and CSS if you want them too[/QUOTE]
The concept of a programming/scripting language cheat-sheet boggles my mind.
Here's a little neat site I always forgot to use:
[url]http://www.gotapi.com/[/url]
Instead of posting the cheat sheets individually have the whole programming folder i keep them in, cba to sort out c++ and others from HTML, css ect.
[url=http://www.mediafire.com/?rb6qua3ujna1ph7]Mediafire Link[/url]
If someone could remove the images that aren't related to code and re-upload to a faster host that would be great.
[QUOTE=Skorpy;28107515]Here's a little neat site I always forgot to use:
[url]http://www.gotapi.com/[/url][/QUOTE]
Not really useful for beginners considering it doesn't say which tags are depricated
[QUOTE=TechnoBabbleAdz;28164495]Not really useful for beginners considering it doesn't say which tags are depricated[/QUOTE]
That's because it's old.
[QUOTE=TechnoBabbleAdz;28164495]Not really useful for beginners considering it doesn't say which tags are depricated[/QUOTE]
Well that's htmlhelp.com's problem. There's also one from W3.org which is much better.
Instead of posting cheat-sheets for this or that, try posting actually helpful and informative uhh..stuff. It's the difference between being a developer and someone with nothing but a very worn set of ctrl+c/ctrl+v keys.
If I hire you as a web developer, and you can't go for two lines without looking at some reference, then you're in trouble.
(oh right, content)
[B][URL="http://stackoverflow.com/questions/500827/css-tips-which-every-beginning-developer-should-know-about"]CSS tips every beginning developer should know[/URL] - Stack Overflow[/B]
The cheat sheets are images so you can't copy pasta so since you type it out everytime so it makes you remember it.
[url]http://www.mytrashmail.com/anti_spam.aspx[/url]
Basically stop spam bots by filling up their databases with a metric fuckton of fake emails
[IMG]http://i.imgur.com/QRZEI.jpg[/IMG]
sorry about the jpg, it's the only version i could find
Got a HQ version of that somewhere, i'll find it
edit: it was the same image, infact its in the .rar i posted above
[QUOTE=only;28188635][img_thumb]http://i.imgur.com/QRZEI.jpg[/img_thumb]
sorry about the jpg, it's the only version i could find[/QUOTE]
Put your goddamned scripts after the body, sheesh.
[QUOTE=StinkyJoe;28188866]Put your goddamned scripts after the body, sheesh.[/QUOTE]
Actually it should go inside the body just before the </body>
Sorry, you need to Log In to post a reply to this thread.
