Beginning Website design

Honestly, those people probably have no business designing Jack for the web.

Or it leads them down the garden path on design concepts that have no business being on a website in the first place, and makes them think about just one specific target (desktop screen of a certain size) instead of the ENTIRE POINT OF THE INTERNET AND HTML – targeting MULTIPLE devices, resolutions, and capabilities… which is just part of how one ends up with px metric fonts ‘neccessary’ on everything in absurdly useless sizes, illegible color contrasts, and 1 megabyte page-loads of 30-40 separate files to deliver 2k of plaintext and 3 content images… you see it every day on “design firm” and “personal artsy” pages… when the big success stories of the Internet, well… let’s just say it’s unlikely Amazon, E-Bay or Craigslist used photoshop to make a mockup first.

I second this motion. I started on W3schools and ended up picking up everything (As limited as it might be since there is always room to learn.).
@op:
I usually set things up in a basic frame and built from there. Its quick, effective and it gets the job done that I need to have done :slight_smile:
(I am going to be building a portfolio here soon on the site I am working with)

If a person hasn’t had experience designing for the web before and isn’t sure the capabilities of HTML & CSS, or they need to see the initial design beforehand, they can freely design in Photoshop as they see fit, Especially for those starting out. They don’t necessarily have to use any assets from that design. They need not ‘slice’ up what they want, but having the ability to visualize the design on screen can be of some help to them. It’s prototyping, and it has it’s place.

Which again, I’ve been calling W3Schools webrot for almost a decade now. Possibly one of the worst places to try and learn ANYTHING about writing HTML/CSS.

I disagree. I think it’s a powerful part of the design process to design and set out comps in Photoshop first…while that doesn’t mean that one should slice it up and then use all images to make a website, it helps to give a better idea of what you want to make. Going in blind is never a good idea. In life, in anything, and especially in web design.

Photoshop is absolutely necessary, in my opinion.

The difference between using photoshop and using bad web practices is very different.

~TehYoyo

Hmm - then I guess I must be some kind of genius, because I’ve never used it. :lol:

Just as well we’re all entitled to our own opinions. :slight_smile:

Even though I can’t say for certain a particular site has been through mock-up stage most of the time it is blatantly obvious that a site skipped the stage because those types of sites are without a doubt, mundane, boring, look the same or just plain eyesores. While some may not have a high respect for design in the aesthetic sense people who do can easily pick them out. If people were fine with mundane, boring but useable and accessible sites there would be no need for graphic designers. Interacting with graphic designers who do not understand the technical implications can be frustrating. So I can fully understanding coping out and saying “Photoshop is the Devil” instead of taking the time necessary to provide them with knowledge to create technically sound wire frames without blasting them for using a tool they know well.

My point was really that what suits one person as a work method doesn’t suit another. There some truly awful sites that have been through a mock-up stage, just as there are truly awful sites that haven’t. People are different - each of us has a preferred method of working, according to our gifts and skills. It’s a case of finding the best way for you.

Lose the ‘boring’ and we could only dream… But I will admit I’m much more utilitarian than others; I’d rather have an accessible website I can use than a pretty picture I can’t navigate, read, or use for what a website is for, the exchange of information.

Which is where most of my problem with the “draw a pretty picture in photoshop first” approach really comes from – I’ve rarely if ever seen a page done with that approach that wasn’t too wide for my netbook, uselessly tiny without zooming on my 17" Laptop, broken at 120dpi on my desktop with it’s three 24" displays, and weren’t total bandwidth disasters meaning good luck getting me to visit them on the free bandwidth on my CR-48 or if I’m up at a friends house in Coos County where 33.6 dialup is a good day.

It’s why the very pretty but ultimately useless PSD jockey based sites typically are only found on personal pages for the designers or design firms, small businesses who don’t know any better and were led down the garden path by said designers, or large brick and mortars for whom a web presence is an afterthought… and why the big successes of the Internet I’d find it hard to believe had a PSD as their starting point.

Don’t get me wrong – Photoshop is a great tool – AFTER you have semantic markup of content and a working layout; but slapping together a layout in it first typically results in elements that to be frank, aren’t viable for web deployment if you actually care about having people use the page.

We’re not saying that web developers should take the Photoshop layout and put together a website using only images. Obviously, that’s bad practice. We’re just saying that, in our own opinions, Photoshop is a good tool, even before you have any code down (especially before you have your code down, in my own, humble opinion. We’re not trying (well, I can’t speak for others) to annoy you, insult your design process, or anything like that.

~TehYoyo

Note: Here’s what a design mock-up might look like in my process. Totally serious.

The problem being by the time most everyone I’ve seen use that approach has a page done, it’s a broken inaccessible mess, and that DOES annoy me; and a great many other users. It’s why on the whole the Internet is becoming less and less useful to me as a tool thanks to all the “But I can do it in photoshop” idiocy turning site after site into bloated, slow buggy inaccessible train wrecks. It’s as bad if not WORSE than the endless Javascript for nothing nonsense.

Which is a PERFECT example of what I’m talking about – where’s your CONTENT? Content should dictate layout, NOT the other way around… You’ve got a bunch of colored boxes – ooh, impressive… and completely meaningless… and probably already ‘broken’ and in need of so much revision by the time you plug content into it, you need to throw it out and start over on the layout anyways – at which point all you did was waste time on some goofy picture that has NOTHING to do with a web layout.

To compare, I typically would start out with something like this:
http://www.cutcodedown.com/for_others/simpleBaseline/template.html

Actually, not true – because I’d have the actual content or at the very least a reasonable facsimile of it in there, so I can tell if my layout actually fits the content. If you don’t have the content in there, or at least something remotely resembling the content, what business do you have making a bunch of colored boxes of varying sizes? Even people who work in print know better than that (or at least they used to – given some of the infographic and slide-show asshattery I’ve seen of late… not so much?)

… and the real laugh is, I bet I can swap that layout around and make color/font/other changes many times faster than you could ever do dragging and dropping layers around.

Wait a second…I wouldn’t recommend that at all. In fact, that’s pretty much the opposite of what I would suggest.

To deathshadow60:
I’ve mentioned before that I don’t want to criticize your views(or at least I thought I did). This seems to be evolving into a (well, in my view one-sided) flame war so I think it’s best if we just forget it.

~TehYoyo

Sadly I started there :(. I also joined their forums first. Over there isn’t too bad, they have…Snyder is it? Some really smart web design person, can’t remember who it is, nor can I be bothered to find it out.

You gentlemen are still going on about this? lol W3Schools have halfway decent short tutorials. Google search might be your new best friend to fill in any gaps.

People do things in different ways and in ways that work for them. Just because we don’t all do it the same way doesn’t mean it is any less effective.
DS, I know your thoughts and feeling towards ‘pretty picture’ designs and the usability car crashes that CAN SOMETIMES result from the plan being designed before content added but it doesn’t always happen that way.

IMHO what TehYoyo has there is a wireframe rather than a mockup and has some idea of content that would be included (correct me if I am wrong). It is practically impossible to put together a coherent design without some idea of content and whilst I am not going to get drawn into a flame pit on this, it is possible to PS a rough plan before writing the HTML - just as I would sketch the design roughly on paper after deciding the MAIN areas to be included.

People learn in different ways and shooting them in the @ss with a crossbow for not doing it YOUR way is a bit medieval. Put a cork on your bolts please Jason :slight_smile:

^That is funny.

On topic, I have been learning through books and other things mostly apress stuff. I have been thinking of switching to sitepoints books for a while now. If I ever get the money for it I’m sure I will revamp my library with the latest and the greatest. Including the new books on HTML5 and CSS3. Since I have been curious about it just never really got around to learning it. From what I can tell it keeps most of the XHTML standard intact while adding new more simple things like a set doctype tag instead of a giant link. I’m sure there is more to it then that though. Either way that is the future plans at least.

We all have opinions and they are usually very strong.

Sitepoint is intended to be a place for intelligent and civil discussion. Sometimes a member will become too ‘emotionally charged’ about an idea and, through the anonymity of the forum, state his case very strongly without careful consideration of how the particular words will be interpreted.

I commend you, TehYoyo for taking “the high road” here. But I want to submit that I agree with BOTH PERSPECTIVES.
The Internet, to a hard-core coder like me, is a set of “information” that must be presented in a clear, concise, semantically-sensible manner. I approach all websites from the CONTENT perspective.

On the other hand, unless you are using Lynx as your browser, we cannot ignore the fact that STYLE and APPEARANCE are crucial. This is particularly important when your site is attempting to win-over people (ie Sell something).
A successful website - IMHO - is one with the proper blend of both these ideals.

Now. Can we all “agree to disagree” and put this discussion to bed?

That isn’t really what I was referring to. I was referring to a mock-up that establishes the content of the home page, branding and over all “look and feel” that is to be carried through to all other pages. If a designer were to hand me what you just provided I would just look at them and stare. The mock-up should be exactly what the home page should look like not just merely blocks with no context nor branding. I can do that in my sleep. I’m interested in the home page context + overall look and feel from a mock-up.

Nothing to correct :smiley: The only reason I even had that wireframe (digitally, that is) in the first place was because I stupidly did my sketch in pen :smiley:

I, personally, love the Sitepoint books…all of them (well, except this photography one I’m reading, but that’s because I don’t have a camera :confused: ) and find them very interesting (which is beautiful for a coding book) and informative (which is valuable for a coding book).

That’s what I progress to, eventually.

~TehYoyo

Note: Glad we’ve turned this thread around :smiley:

So glad you posted this. I have only been a member for a few weeks and have already considered leaving due to the number of (IMHO) over-critical comments I have seen. For a noobie like myself it is very discouraging to read these as they only foster divisions between those of us who are learning (but darent ask anything for fear of getting our heads bitten off) and those with the knowledge we aspire to.