Designing a Site the Right Way - Articles

[Sega]

Yikes! What a brilliant read! Can I incorporate wireframe design in this somewhere? Does anybody have any information on the golden design rule. I read something a while back about the proportions. I can certainly see how this would save an enormous amount of time. Most of my time was wasted fiddling about in the graphics software package, which again is only a static image.

[bo5ton]

You should let the content of dictate the structure of your page, which also includes the HTML that you use.

Before you start on HTML/CSS you should have a clear layout and content structure in place so that your design is built around that structure/layout.

Also, when you mentioned design, you forgot about user interaction design. That is why web sites are different from print, when it comes to design.

However ‘web design’ has changed the meaning of ‘design’ as it now contains not only planning, but also things like production, post production and more.

Like I said here, the definition of design with regards to the web now contains many different elements, planning, production, post-production and this is also where I would include interaction design.

That's where Photoshop fails. You can't interact with a PSD.

Very true. But Interaction design should be in your mind when you start planning the site. It should be in your mind in the early stages, when you are planning the structure, layout, technology and so on. You should not be 'designing' the interaction while coding in HTML/CSS... But again, with the definition of 'design' being so broad in web design, interaction design (along with layout and structure design and more) and continues when you are building the site.

Likewise, why is Photoshop better for doing a visual design? Some of us are just as fast creating markup and styling it as we are creating it in PSD (if not more, since it's much easier to change multiple global elements in HTML/CSS quickly). Personally, when I did my "Photoshop" designs, I always used Fireworks. I'm pretty quick with all three. There is nothing that inherently stops HTML from being a means of comping stuff up. Look at SVG, an image format that looks like HTML. HTML/CSS can do that too. =p

Photoshop isn't better for doing a visual design. I never claimed it to be the case, nor has anyone in this thread. However, having said that, I don't approve of it nor do I disapprove. Designers are free to use whichever method they wish when designing their web sites. If the site works (valid HTML/CSS, fast download/low bandwidth, looks good in all browsers, fulfills the brief) then I don't believe I should question that designer's methods. Imagine eating a delicious cake, then asking how it was made. They tell you that it was cooked over an open fire instead of in an oven. If it's delicious would you question their method?

(Btw, if you eat a slice of six hours at 800 degree cake and don't die... you need new taste buds. =p)

I would never eat such a cake! You would be able to tell by all the charcoal! Not to mentioned their burnt down house!

[samanime]

Why is it okay to have interaction design in your mind, but not visual design?

In my opinion, visual design is the easiest to imagine. Interaction design needs to be interacted with and tested. That's why there are some many interaction design train wrecks out there, because people thought they were good ideas, but the implementation and execution was horrid.

By using HTML and CSS from the start, you can go through several iterations, actually testing them, to find the exact right fit.

In my opinion, this is the hierarchy of importance for a website:
general user interaction
accessibility (a.k.a., user interaction for special situations)
semantics
visual

That's not to say visual isn't important. It definitely is. But I'd always take something ugly that works great over something beautiful that is barely usable.

[bo5ton]

Why is it okay to have interaction design in your mind, but not visual design?

Who said that?

Ok, maybe I'm not being clear. Let's work this out. I think we agree on many things but we're getting our lines crossed somewhere.

Web design: Creating a website from beginning to end - from ideas, concepts, planning, production, post-production to advertising (and more).

Includes: content, images, text, links, videos, etc depending on the site.

Made up of: structure, layout, html, css, user interaction, accessibility, semantics, visual design.

Things that are important: structure, layout, html, css, user interaction, accessibility, semantics, visual design (not in any order as it can depend on the brief).

Things you should have in mind before you even get on the computer (paper and pencil in hand): structure, layout, html, css, user interaction, accessibility, semantics, visual design.

Things you should have in mind while creating your masterpiece: structure, layout, html, css, user interaction, accessibility, semantics, visual design.

Things you can continue to adjust and enhance over time after completion: structure, layout, html, css, user interaction, accessibility, semantics, visual design.

How you get to that endpoint: Up to the designer.

I think the easier question might be, what is the wrong way to design a site.

[samanime]

Okay, I think I can agree with that.

The wrong way is pixel-perfect PSDs. =p

If you are using a Photoshop file as a guide, that is one thing. However, pixel-perfect PSDs are literally impossible. A PSD is a static, fixed width image, while we have to develop for many different resolutions and devices. That's something PSD can't hope to similar. Likewise, Photoshop and browsers are different. Even something as simple as a font (like Arial) looks wildly different in Phtoshop then it does in a real browser (this, by the way, is way up there on my list of why I want to do it the way I've been suggesting).

Now, if you use Photoshop to play with ideas and get a general feel, share ideas, etc., I think that's acceptable.

And using graphic tools (like Photoshop) to make images to enhance your website is also completely fine.

[bo5ton]

Agreed.

I'll take this a bit further. Consider a client wanting several (let's say 4) potential fully fledged mock-ups for their new site. Would you build each mock-up in the browser, including the assets you've created. Not to mention designing for different sized resolutions. How do we get our clients to understand that Photoshop isn't a browser?

[deathshadow60]

I'll take this a bit further. Consider a client wanting several (let's say 4) potential fully fledged mock-ups for their new site. Would you build each mock-up in the browser, including the assets you've created. Not to mention designing for different sized resolutions. How do we get our clients to understand that Photoshop isn't a browser?

Since they'd all use the same markup +/- 5%, reducing the workload and how long it takes to develop? Since you can say EXACTLY the widths and fonts that would actually appear on a real page? Since you could show and test for multiple widths and have the resolution switches on the fly?

Since apart from the creative process writing the markup assuming you have actual content for it shouldn't take more than 20 minutes? The CSS for each likely taking LESS time than you'd spend screwing around with layers in some goofy paint program?

That you could use all the different browser engines and capabilities to educate and uplift the client making both of your lives easier and work better towards a mutual understanding?

Though the real question to ask any client is "what do you want on the page for CONTENT" -- if they can't give you a straight answer, and just want "something pretty" it might be time to explain they shouldn't even have a website in the first place; though that is EXACTLY the crowd the 'lets sleaze out a pretty picture in photoshop and call it web design" folks cater to.

You want to explain the web isn't photoshop to them, show up with a desktop resolution laptop, a nettop and a tablet... take the "pretty picture" and show it on each of them. Starting from a static picture is most always a train wreck of concepts not viable for web deployment; so just show them how/where it fails. That's all you need to do -- explain "Computer screens come in a multitude of sizes, resolutions and capabilities. The Operating systems across computers have different rendering capabilities and habits -- so designing a pretty fixed sized picture of a website does nothing to help address what the Internet is FOR. Delivering content in a device neutral fashion. Do you want flashy cutesy stuff that's useless to visitors and can prevent you from having return visits, or do you want to promote your product and disseminate your information?"

Appeal to their Business 101 training -- where repeat business is as important if not MORE important than first time; since word of mouth from happy visitors is often worth a billion times more than walk-ins you never see again. Help them dial in REALISTIC expectations by taking the time to not only explain that you consider making some goofy picture of a website a waste of time, but also explain WHY!

This whole idiocy of drawing a pretty picture first has been crapping all over websites resulting in buggy broken inaccessible train-wrecks of websites for too blasted long, and is a contributing factor to why I find the Internet as a whole is less useful today than it was a decade ago. Everyone is just running around dumping shellac on their manure, resulting in pages that while very pretty...

... are still just piles of dung. Doesn't matter how pretty it is if it's useless or inaccessible to visitors! ...and in my experience that's 99% of websites built with the "pretty picture" or "layout first" mentality. It paints the designer or developer into the corner with fixed size elements that have no business even being on a website in the first place.

[Lil_Kins0]

The truth is this, am impressed with this debate as it has got me up on my toes. Its helped me as an upcoming web developer.
I can make out from the whole stuff, that is; content first, then html coding, add layout with css befor image. Now how do you successfully seal up the whole design issue when you're not a graphic designer? Isn't it gona be kin3a difficult?

[deathshadow60]

The truth is this, am impressed with this debate as it has got me up on my toes. Its helped me as an upcoming web developer.
I can make out from the whole stuff, that is; content first, then html coding, add layout with css befor image. Now how do you successfully seal up the whole design issue when you're not a graphic designer? Isn't it gona be kin3a difficult?

If you focus on keeping it clean, simple and clear, "graphic design" means jack. Something I say a awful lot to people is look at the big successes of the Internet; they have content of value and are not a graphical "tour de force" -- Amazon, eBay, Craigslist, Slashdot, Google, Facebook, mySpace -- look at those pages, do you really think they have a staff of photoshop jockeys sitting around arguing about how 5% lossy jpeg encoding adds 'unacceptable levels of artifacting' or how the line-height in firefox is ending up 1px shorter than in every other browser? Of course not!

They have content of value people want -- presented in a clean and simple manner. It's something the art f... art f... folks never quite grasp is that people visit websites for the CONTENT, NOT the goofy graphics you hang on the content that drags page loading time to a crawl, forces it into crappy fixed widths that are useless to many visitors, and on the whole ends up making it painfully obvious the developers if asked go: "accessibility, what's that?"

Which again is why you only usually see that type of idiocy on designers personal websites, cutesy little personal home pages, small businesses led down the garden path by "ooh, shiny", and traditional brick and mortars for whom a web presence is an afterthought and expense, instead of a revenue generating investment.

You take the time to explain that to a prospect, who knows, they might actually grasp the concepts. Being able to point at the biggest successes on the Internet as examples helps a lot too. "Content of value people will want" -- you can't provide substance then all you have is the flash; and again that's just shellac on a pile. No matter how much you polish it, it's still a bug excrement encrusted turd.

But of course, telling people the thing they put themselves ten to twenty years in debt to learn at a school, then blew a few grand on software to do is actually meaningless bloat making the pages less useful... well... isn't all that popular an opinion... Nobody wants to hear that -- so they'll fight the facts tooth and nail making up all sorts of crazy nonsense to justify their broken, buggy, half-assed methodologies.

Lately it seems people are so obsessed with the looks they're willing to sacrifice everything else... to the point that again, sure, they're very pretty.

... but ultimately useless/pointless and a waste of money and bandwidth for the client. Which of course is another place you can ALWAYS bring a client around to your side with; appeal to their wallet.

[Lil_Kins0]

WoW. DS that was a long and explainatory post. I buy your idea and i try as much as possible to stick to it. Yeah, i think i've observed that; those popular sites making wave in the internet have little to know graphics. Cause i wont call that of facebook one, looks like a text, enclosed in a div and styled with css and yet on of the internet giant. I haven't visited craiglist that much but i observed or recall that the site is so simple to navigate through, the design looks like it was done in the 19th century.

[samanime]

Since they'd all use the same markup +/- 5%, reducing the workload and how long it takes to develop? Since you can say EXACTLY the widths and fonts that would actually appear on a real page? Since you could show and test for multiple widths and have the resolution switches on the fly?

Since apart from the creative process writing the markup assuming you have actual content for it shouldn't take more than 20 minutes? The CSS for each likely taking LESS time than you'd spend screwing around with layers in some goofy paint program?

I'm 100% with DS on this one. However, I will caveat it by saying that I'm a fast coder, so it's just as quick. If your HTML/CSS skills are weak, then a graphics program may be faster (though you could also spend the time improving your HTML/CSS skills).

However, I also want to stress that I'm not concerned about doing things quick. I'm concerned with doing them right.

[bo5ton]

If you focus on keeping it clean, simple and clear, "graphic design" means jack. Something I say a awful lot to people is look at the big successes of the Internet; they have content of value and are not a graphical "tour de force" -- Amazon, eBay, Craigslist, Slashdot, Google, Facebook, mySpace -- look at those pages, do you really think they have a staff of photoshop jockeys sitting around arguing about how 5% lossy jpeg encoding adds 'unacceptable levels of artifacting' or how the line-height in firefox is ending up 1px shorter than in every other browser? Of course not!

They have content of value people want -- presented in a clean and simple manner. It's something the art f... art f... folks never quite grasp is that people visit websites for the CONTENT, NOT the goofy graphics you hang on the content that drags page loading time to a crawl, forces it into crappy fixed widths that are useless to many visitors, and on the whole ends up making it painfully obvious the developers if asked go: "accessibility, what's that?"

Which again is why you only usually see that type of idiocy on designers personal websites, cutesy little personal home pages, small businesses led down the garden path by "ooh, shiny", and traditional brick and mortars for whom a web presence is an afterthought and expense, instead of a revenue generating investment.

You take the time to explain that to a prospect, who knows, they might actually grasp the concepts. Being able to point at the biggest successes on the Internet as examples helps a lot too. "Content of value people will want" -- you can't provide substance then all you have is the flash; and again that's just shellac on a pile. No matter how much you polish it, it's still a bug excrement encrusted turd.

But of course, telling people the thing they put themselves ten to twenty years in debt to learn at a school, then blew a few grand on software to do is actually meaningless bloat making the pages less useful... well... isn't all that popular an opinion... Nobody wants to hear that -- so they'll fight the facts tooth and nail making up all sorts of crazy nonsense to justify their broken, buggy, half-assed methodologies.

Lately it seems people are so obsessed with the looks they're willing to sacrifice everything else... to the point that again, sure, they're very pretty.

... but ultimately useless/pointless and a waste of money and bandwidth for the client. Which of course is another place you can ALWAYS bring a client around to your side with; appeal to their wallet.

I agree. But you can't measure the success of amazon and ebay and the rest to the fact that their design is simple. Their content and concept are above and beyond that of say, your typical small business, so the visual design of their site doesn't need to be spectacular. I don't think mySpace is a good example either - I haven't used it for a long time, but way back when, it used to be a markup nightmare, takes ages to load and be very slow. But that was quite a while ago and I've avoided it since.

Anyway, the fact remains that your arguments are accurate. Skipping Photoshop altogether saves time and produces better working examples for your client. While your client may not understand why you won't create a photoshop mockup for their site to begin with, they won't care once they see the results in the browser. This method also helps those developers who are hopeless at Photoshop.

Graphic design doesn't mean "jack". Go to amazon, eBay, facebook: turn off css & images and then tell me graphic design means "jack". No matter how simple a site may be, graphic design is an important part of it. Minimalism is a type of design.
Providing a small business with a "pretty" website that has functionality and incorporates their content well is going to land you the job more often that if you were to deliver the concept of the same functional/content driven site without any visual design(or ugly websites).

Clients can be stubborn. And if they want Photoshop mock ups so bad, as a last resort, I will give it to them. But I will charge them extra and let them know i'm going to charge extra, before I start. I guess I'm just lucky that I can do both ways.

One area I do have trouble is with clients that I don't meet face to face. How does one "watermark" a working website in the browser?

[deathshadow60]

Clients can be stubborn. And if they want Photoshop mock ups so bad, as a last resort, I will give it to them. But I will charge them extra and let them know i'm going to charge extra, before I start. I guess I'm just lucky that I can do both ways.

Or cheat -- screencap and save as PSD -- like the average client would ever know.

[bo5ton]

So True!