The Design Center / DT&G / Web Design & Review / Learning about Web Design  

You never know what's going to turn up in the Design CAFE, from illustrator questions to dealing with cranky clients. This particular thread was quite interesting, and really kind of shows the change in web design attitude over the past few years. I thought it would be nice to share it with all those not subscribed...

Learning more about Web Design

The following was read on the Design Cafe list in July of 2004. The thread is assembled in order of posts. Some of the wording has been edited for presentation, and author referrals have been included as in the original posts.

Someone asked...

Does anyone know good resources to use when wanting to learn more about webdesign, such as how to make good web graphics and design etc..

Start out with your goals.

Do you want to become a paid web designer or be able to do it in a pinch or are you only wanting to put something up for yourself. That will let you know how deep to go. There are more internet web design things out there than you can shake a stick at or I guess in our case run a mouse over ;-).
      First check out the Design Bookshelf's WEB Department, the CSS Bibliography, Flash Bibliography, and Web Design Bibliography. There are tons of books and tutorials but you have to pick one eventually.
      My choice: HTML for the World Wide Web, Visual Quick Start Guide by Elizabeth Castro.
      I was advised that no matter how much you rely on a program that does everything you really need to learn html anyway.
      The most interesting aspect of this to me has been the work I've seen that uses CSS [Cascading Style Sheets] See CSSzengarden.com to see what I mean. Also... Webmonkey.com, and Alistapart.com. Flash and all those type things are down the road.
      Wade on in..... we're all learning together so it would seem.

Creativity?

Oh I know how to do html code understand all the tags and what does what.. is actually having a design conception which is mind boggling. As I say I am always more technical than creative unfortunately. I am really hoping to train myself creatively ..

showcase

Macromedia has a showcase section with websites and interactives. Once you're on the Showcase page, you can view the featured sites and also view sites by product. Good luck!

As for design conceptions...

there are different schools of thought on what good design is and most of them have some valid points but I would steer clear of just taking someone's advice and ignoring everyone else.
      Somewhere between readability and eye candy is a happy world where a site can be both informative and nice to look at. On the web there are many examples of things that are great to look at but don't score well on the content side of things. So the design concept has to be something more than catchy and looks good. The engineering of the content and navigation is as much a part of the problem to solve as how it looks visually.
      There are some stellar sites with amazing programming but not all of them will bring you back time and again because of the content. Here are a couple of sites I think succeed at being Good looking, informative and easy to navigate: Hicks Design and House Industries
      Hope this will provide a little insight,

Software does not a designer make

Now... just take a deep breath and think about this: who is pushing "good design" and why. The Macromedia has a showcase section is good reference material. However be careful to separate DESIGN from the software. Macromedia loves to show "good design" done with Macromedia. So does GoLive. However, in reality, Macromedia has nothing to do with the DESIGN. It's only the software. Chances are, if it's a well designed site, it's going to be a well designed site because of the DESIGNER and NOT the software.
      It's software marketing hype. There's also some of the most awful crap you've ever seen done in Macromedia. But for some reason they don't show those web sites. (grin)

To get started, read Ani Phyo's Seven-Step User-Centered Information-Design Process, from her book Return on Design: Smarter Web Design That Works by Ani Phyo (New Riders)

Consider information structure with JoAnn Hackos' Creating an Information Model, from her book Content Management for Dynamic Web Delivery. You will begin getting the picture of a larger 'realm' of web design requirements.

Listen to what Ilise Benun says in her chat about today's design challenges -- "How, or how not to design -- you'll see the pitfalls many web designers succumb to. Ilise's book "Designing Web Sites for Every Audience" (HOW DESIGN Books, 2003) brings home the reality that here's a fine line between a "well Designed" web site and an "over Designed" web site... neither being necessarily good or bad.

And at the end of the day, the bottom line is the final judge.

Not necessarily hype...

True, the Macromedia showcase is software marketing, but I wouldn't necessarily say HYPE...
      It's showing what talented designers can do with the tool. Being a seasoned web designer that dabbles in Flash now and then, I find that site to be very helpful AND educational - it helps gain ideas of what "new" things can be done with the software in the hands of an experienced designer, and what I can incorporate or glean inspiration from for my own work.
      For the novice, they might get the impression that just buying Flash or Dreamweaver will generate fabulous sites - in which case you're point is reinforced - it's the DESIGNER, not the SOFTWARE that makes a good design...
      But for designers who use the software the Macromedia Showcase is a very helpful guide. Plus, you can't design an interactive flashed interface with GoLive or Photoshop, so the SOFTWARE does play a role in the design, in this case.
      (highpoint solutions)

facilitates functionality

Actually... It doesn't play a role in the design; it facilitates functionality. Technically speaking, the design is still independent of the mechanisms driving the functionality.
      You know, semantics. :)

Grids, tables and such...

I rely upon grids, just like in DTP work. My table structure is the grid and I slice my images appropriately. Almost all HTML starts in Photoshop as a mockup. I'll use Dreamweaver or GoLive to get the initial layout done quickly and chase down any bugs. Then I move into a text editor like Homesite or BBEdit. That's where I'll do all additional structures, tweaking, and pages once a template is established. For CSS I do it by hand and use an application called TopStyle (there's no Mac equivalent of this app that I know of, hopefully someone has a lead on one).
      A while back I wrote about the differences between RGB and CMYK. I wasn't meaning color modes, but the difference in the worlds between interactive media (RGB) and traditional print (CMYK). It's like switching for a Mac to a PC. There's really no difference. You've got menu's, a mouse, icons, text, basically the same apps - it just requires a slight shift in how you think about the PC. But you really do nothing different. (Being a pre OSX Macintosh expert and using PCs I feel quite comfortable saying it really doesn't matter what you use. Modern OSs offer the stability and tools to let you work competently, regardless of Mac, Windows, Linux, or other. Yes, Mac does have nice color management tools.)
      It all comes down to medium and the subtleties involved in understanding how the medium works. The skills you use to make a page layout for print are the same you use for making a web page. How you think about it is different though. It's a stretch that many professional designers don't make extremely well. I can honestly say my page layout skills suck compared to 5 years ago. What I do in minutes now completely stymies many of the Desk Top Publishers I know. But my print skills have suffered.

Stacked parts, connected boxes

One thing that might help and a place for you to start
      First, think of the web page as a set of parts stacked in a series of connected boxes. Visualize your graphic elements all having to be cut up into rows and columns. You might as well, because you literally will with tables.
      Second, think of the web page as a tool. This is the difference between making a printed page, and printing a box. The paper you pick up and read. The box you pick up, carry, open, put things into, reseal, reopen, and store for later use.
      Can you see the difference? Where you place things on that box is going to change depending on how you expect people to interact with it. If you've ever done package design I think you may understand this already. The same is true with a web page. People can't pick it up, but they will in fact interact with it. You need to change how you position and lay things out according to use.
      I guess what I'm trying to get at is the Zen of RGB medium. You have to change your perception, and accordingly, how you do things. The skills you'll use are much the same you use now.
      Clear as mud? ;)
      In the previous post, The seven steps listed is similar to the processes we use developing TravelNow.com, hotels.com, and other IAC properties. I think the ideas presented are fairly high end though, and a bit of overkill for a small site or for someone beginning. I still feel that it's an excellent thing to read to become familiar with some important concepts. And certainly if you plan to develop sites commercially.
      Thanks for providing a great resource!

Tables?

Do I take it from this that you use tables for layout? I know that it's a great way to start, but it's not semantically correct, and makes life hell if you have to repurpose the site to be seen in PDA's, mobile phones etc.
      I'm not knocking anyone who uses tables for layout (unless I'm taking over the design and maintenance of the site, in which case you'd better watch out), and sometimes I'd dearly like to create a site with tables (as using CSS for layout quite often leads to me using vast arrays of swearwords), but it's something I feel strongly about and I force myself to use CSS for layout.
      As designers, we are after all, problem solvers; and using CSS for layout gives you plenty of problems - but all have been solvable. I don't want to turn this thread into a tub-thumping session for web standards, but if someone is learning how to create websites from scratch, then I feel that avoiding all usage of tables for layout is the best and most futureproof -- in terms of employability.
      Also, I often start by using a pencil and paper too, long before I use photoshop or fireworks for comps.
      Have you tried CSSEdit (Mac) or Style Master? (Win) While neither are as quite as good as TopStyle, they are quite close. You could always use Virtual PC to run TopStyle on a mac - that's what I do (until I got my G5, goshdarnit).
      However I cannot agree with the previous comment:
      "I can honestly say my page layout skills suck compared to 5 years ago. What I do in minutes now completely stymies many of the Desk Top Publishers I know. But my print skills have suffered."
      I'd say the opposite. It's certainly made me appreciate print design more :-)

I'd like to recommend a couple of books if I can: Taking Your Talent To The Web and Designing With Web Standards by Jeffrey Zeldman. The first is a must-read for anyone coming to web design from a print background.
      (Sequential Design)

standards compliant pages

First, I agree. You're right. But... I continue to press for standards compliant pages. We've had three redesigns in the three years I've been here and I still can't get compliant HTML from the site. I promise it's not because it isn't written that way when I supply it to development. The last html I turned in did use tables, but only minimally, and they were labeled correctly for section 508 compliance and read correctly in a text only client. Most of the positioning and page elements were all done with CCS 1 compliant code. The pages were XHTML 1.0 Strict compliant also.
      But two things screwed it up. Legacy code, and Netscape 4.0 does not handle CSS 1.0 correctly. When I showed them how it gracefully degraded into well-formatted text they were horrified. We are pushed for increasingly more graphically rich pages and expected to maintain compliant pages for Netscape 4.7 as well as most current web browsers.
      Tables are by no means a bad thing. Any device that is HTML 3 compatible will handle tables correctly. If a device cannot handle tables correctly (or if implemented poorly) then yes, they can and do cause problems. Anyone browsing the web is going to have this problem though. Right or wrong, good or bad, it's fact -- and a fact people will be stuck with for decades. Not using tables doesn't fix the semantic problem. I've seen pages that use CSS only for positioning still screw up semantically because of div and span order.
      Wireless/mobile devices are completely off the screen for development at this time for my company. Just like compliant HTML, I try, but ultimately I can't control it. Sure, I could take a stand and quit my 60K+ a year job with excellent health benefits. But my three kids (with one on the way) have grown fond of food and shelter. I have strong doubts that I could find anything that would offer more than 50% of what I make now in this region.
      I've gotten in plenty of hot water for preaching and fighting for correctly formed pages that are forward compliant, but the reality is that I do what I'm told.
      If you want best practices your comments are 100% on, but the concept of cutting things into rows and columns is still very valid, even if using CSS for positioning. All of your elements still form blocks. It's true for page layout (using a grid), and even more so for the DOM of HTML.
      Using this technique of visualizing elements as pieces has seemed to help many students understand how objects can be positioned on a web page. I sometimes have them print what they plan to use, text and images, then cut those into pieces and assemble them just like old-fashioned paste up. J Then I have them make a table and turn the borders on. Then they see how the boxes hold the objects. Sometimes even placing the paper against the screen to see how it fits. It's funny to watch people that were completely lost to the concept suddenly get clue, and grasp how they can makes things go where they want it to.
      Also, tables are much more simple for beginners to understand in my experience. Try making a three-column layout using CSS that reflows to the page width, but still keeps all elements on the same row regardless of page width. Takes three cells in a table, but a lot of ticks to do the same with divs.
      [quote] Also, I often start by using a pencil and paper too, long before I use photoshop or fireworks for comps. [end quote]
      Ah, you've caught me in one of my worst traps. I badgered my students to sketch, sketch, sketch those concepts BEFORE they ever set foot into an application, but I have to admit I seldom sketch. Sketching your concepts is the right way to do it. Thank you for re-reminding me of the correct practice I'm afraid many of us fail to follow.
      Anything by Zeldman has a big OK from me. One of the reasons I push alistapart.com on here. He's an icon of the industry in my mind.

considering usability

There are huge differences when considering usability though - standard rules and conventions of Web design are very important. For example, on a printed ad or poster, you may typically expect to find the company logo in the bottom right. VERY VERY rarely will you see the company logo positioned there on a web site.
      Why? Because first of all, screen sizes differ and the top left is where everyone will see the logo. Second, it loads first (most of the time). Thirdly, users EXPECT it there - it's standard convention. The reason it's standard is that it has proven over time to work best there, not just because that's the way it's always been.
      When getting serious about Web design, I recommend the books "Don't Make Me Think" by Steve Krug and "Homepage Usability" by Jakob Nielsen.
      So yes, grids work well - placement can differ. Remember what may look pretty as something you'll hold in your hands may not work on the web that well, since you don't always see the whole piece all at once like you do with printed projects.

Agreeing to agree...

I think we're both coming from the same angle, so any long reply on my part will be superfluous.

RE: gracefully degraded into well-formatted text
      Ooh, my condolences. I completely sympathise, Bryan, sometimes it's like banging your head against a brick wall. Repeatedly.

RE: Tables are by no means a bad thing. Any device that is HTML 3 compatible will handle tables correctly.
      No, tables aren't a bad thing. For tabular data. For everything else, they're semantically incorrect. But I do take your point. I also take your point about some CSS pages not being semantically correct.

RE: Wireless/mobile devices
      Fair point. Some clients only care about the here and now, and no matter how many times you tell them that a little bit of investment now will save them money later down the line, they don't care. I recently 'fired' a client because they didn't want to move from a tables and slices site to a CSS-based layout. To be honest, it wasn't the only reason (they were pretty poor with paying their invoices too), but I was really tired of wading through a tag soup when they wanted changes (I didn't create the site - I was brought in when their original development company went bust), and then having to tweak spacer.gif's until my eyes bled.

RE: I've gotten in plenty of hot water for preaching and fighting for correctly formed pages that are forward compliant,
      No, I quite agree. Please don't get me wrong. Just like in page layout for print, Grids are key for web design. I'm never without my dog-eared copy of Grid Systems in Graphic Design (J. Muller-Brockmann) :-)

RE: Using this technique of visualizing elements as pieces has seemed to help many students understand how objects can be positioned on a web page. Then I have them make a table and turn the borders on. Then they see how the boxes hold the objects.
      I don't see how this differs from using CSS-P. You just have to explain that divs are empty boxes, and that using the grid to work out your positioning is pretty much the same as using a table if a little more convoluted. This stuff isn't really hard, it's just more long-winded.

RE: tables are much more simple for beginners to understand in my experience.
      OK. I get this, and indeed, I learned to build web pages using tables. But doing what you suggest is possible, and I think that, in the long run, it would be better for beginners to get their heads around this at the beginning, rather than having to reinvent the wheel.
      The trouble is that over the years, we as print designers who have turned to web design to supplement our incomes and skills base, have moved everybody away from the fact that HTML is a markup language, and not a Quark substitute. Tables for layout are a horrible kludge, but one that we have to keep in our arsenal because of our client base.

Bottom line:

When expanding your creativity in web design, several considerations become clear:

Regards

fred showker
      Fred Showker, Editor / Publisher of Web Design and Review

Get a Formal Critique or Site Makeover If you were disappointed that no one reviewed your site... or you would just like to get a check-up to see how you or your designer is doing, then consider getting a Formal Web Site Critique or Site Makeover

Participate in your Design Center

Lots of fun and information for all... don't forget, any community is only as good as the participation of its members. We invite your tips, tricks, comments, suggestions and camaraderie.