Web Graphic Design for Small Businesses

An anonymous reader writes "I'm a competent geek running a one-man-show for a small business. I do everything IT in this company; servers, email, desktop support, managing Ethernet switches, cash registers, inventory database, and the company website. My boss has asked me to 'punch up' the website to make it more appealing. Although I can hold my own with HTML, PHP and a couple SQL products, graphic design isn't one of my strengths. I'm looking for some advice on how to improve the site without making it overstimulating for the webophobic. It's also important that it conform to ADA accessibility guidelines. In particular, I'm looking for books or tutorial websites that teach the basics of good graphic design — how to make it more appealing without losing the ability to communicate effectively. Also, I would appreciate suggestions for tools to use to make this more efficient (Windows and Linux are both OK)."

Comments

Get someone else

[diskis]

I'm a good geek of all arts. But when I try to dabble in graphical design, I always fail spectacularly.
Get someone with actual talent to do it.

Do really you think you can train a graphical designer to code with a few book and tutorials, and not get out results fitting for thedailywtf?

Re:Get someone else

[diskis]

Oh, and if you decide to try, remember that you most likely are colorblind. All geeks are.
Steal what you can't do yourself.

As I can't color-coordinate my own socks, ready palettes are a godsend :)

http://www.colourlovers.com/

Re:Get someone else

[Lord Apathy]

This is my advice too. I'm good when it comes to technical shit. I can build a computer in my sleep from the parts I have in the box that my feet is propped on. I've coded in just about everything that compiles.

Now you need something on the back end of a webpage and I can do it, no problem. But I find some many geeks like myself have no talent in graphics arts. And that is what you need. A business webpage needs to run good and you sound like you have that covered. But it also needs to look good and be functional.

Hire someone that knows what they are doing.

Re:Get someone else

[ChadAmberg]

Definitely farm it out. Bad graphics will kill a site, and good enough graphics no longer are good enough. Find a skilled professional. And I say this as someone who is absolutely horrible with graphics.
Since the guy is the one IT guy for a small business, I'm pretty sure the website doesn't have hundreds of pages, so it's not like this should be such a huge job and cost thousands.

Re:Get someone else

[Fr33thot]

You can hire all the talent you want, but if you don't better define the need, you'll likely fail. You need to know more about what "Punch it up" means. Beyond that, what other marketing venues are in play and how does the site complement these. Getting local talent, whether a student or a pro will be more effective if you know more about what they are looking for. Tell the boss that the entire marketing approach needs to be considered as a whole.

For ADA compliance, look at contrast, not using color to convey meaning (ex: red items are priority), alt tags on images (reduce your use of images where possible), jump tags to get to (or past) navigation areas, avoid animation. These will get you close to compliance though there are some coding conventions you must adopt. There is plenty of good advice for the google aware to find.

For the artwork, you need to consider color choice first. Get the book Color Harmony ahref=http://www.amazon.com/Color-Harmony-Guide-Creative-Combinations/dp/1564960668rel=url2html-28773http://www.amazon.com/Color-Harmony-Guide-Creative-Combinations/dp/1564960668> to help decide on a scheme that supports the image the business wants to convey. Once the colors are chosen, do not deviate from them frivolously. A portal or a good css design will make these things easier and if you haven't looked there, do. One good use of an art student is to have a nice logo designed. The art of logo design seems easy enough but trust me on this, you'll save headaches later if you get someone who is trained, especially if the business grows.

On tools, Adobe makes the best but there are some great OS alternatives like Gimp, Krita, Inkscape and Xara Xtreme that are nipping at Adobe's heals.

Re:Get someone else

[machineghost]

>>Do really you think you can train a graphical designer to code with a few book
>>and tutorials, and not get out results fitting for thedailywtf?

YES, I really think he can. Why? Because I did it.

Growing up, I had always been the nerdy one in my family (I was programming (in BASIC) at age 10, and haven't stopped since), and my sister was always the artistic one. But a few years ago, we both found ourselves in the same occupation: web designer. I was making web site designs for real estate agents, and she was making them for various organizations at her school.

Her designs were definitely prettier than mine. A lot prettier, which makes sense because she was a graphic design major in college, and I was a ... literature major (code monkey by night). But even so, my designs were pretty good; literally hundreds of real estate agents chose my designs (as opposed to the ones made my predecessors) for their sites. And mine never had the browser-specific issues, long page loads, and other technical issues that my sister's did.

My point in this story is that an artistic bent is important. A lifelong penchant for graphics and design is a real asset in doing any kind of graphic design, whether it's web pages, catalog layouts, or whatever. And if you want to be the best designer in your industry, you'll probably need it. But if you're willing to read books and web articles, you can become an extremely competent web designer, no matter what your background is. All it takes is:

A) learning the basic rules of things like contrast, white-space, maximum line length, etc.
B) learning what your clients want from a website (I found it fairly common that what was considered "good" by any respected designer was the exact opposite of what my intended audience considered "good"; hey, they're not designers either!)
C) making an effort to look at other sites out there and evaluate what is good/bad about their design
D) and finally, being willing to experiment. You aren't going to get added to the CSS Zen Garden with your first attempt. Hell, you're probably not even going to get something usable out of your first 5-10 attempts. But if you stick with it, constantly evaluate what you did right/wrong, and don't stop trying, eventually you'll start making designs both you and your customer can appreciate, and after you make enough "winners" you'll soon find yourself in a comfortable flow of producing quality (if not awe-inspiringly beautiful) designs.

Recommendations:
Web Graphics for Non-Designers (which is really "web design for non-designers") was by far the best book I found for people like us. My copy is from 2002, but there might be a more recent one; even if there isn't, the book is still completely relevant today. If you want to learn all the basic rules, start with this book.

Try other design/usability books; I have several on my shelf that I found useful, and learned a thing or two from, but which aren't really solid enough for me to recommend. Instead, just try going to your local book store (preferably a big one with great selection) and leaf through their web design/usability offerings. Even if you don't buy any of them, just skimming the recommendations and sample designs they offer can be very valuable.

While we're talking about usability, I also strongly recommend Don't Make Me Think. Now, you might be thinking usability and design are two separate things; you'd be wrong. They are two different things, but they're not at all separate; they intertwine with each other in pivotal ways, and if you want to make successful designs you need to consider usability aspects. Don't Make Me Think is like a bible in the usability field, and it's also a relatively quick read (the author does this deliberately to make the book itself more usable).

Books are great, and the two I just named are particularly great, but you'll also want to keep tabs on various web design sites. I have an iGoogle tab filled with RSS feeds from

Re:Get someone else

[NiK0laI]

Could try out Open Source Web Design.

Re:Get someone else

[piojo]

Personally, I think it's nicer to search for a nice CSS/site template. I found one that I really liked for my home page. They are very easy to adapt, and you know what you are doing is legal. (I looked for ones that didn't require me to write anything really tacky at the bottom of the page. "design by [author]" is fine, "design by Free CSS Templates" is not.)

Re:Get someone else

[roadsider]

As a professional web site designer, NO. I don't. Naturally, any creative person worth their salt has their influences and inspirations, but to cut and paste someone else's design and merely change the colors and fonts is outright theft. You want good graphic design? Hire someone with real credentials. There are plenty of young, hungry, fresh-out-of-school designers that'll work for cheap and give you good work. Advertise on Craig's List. Don't think you need to hire someone? Think you can do it just as well? Good. Next time you need an appendectomy, just go to the library and borrow a medical text and try it yourself. I'm sure you'll do fine.

Re:Get someone else

[Re-Pawn]

oswd.org (Open-Source Web Design - a lot of templates - all free.

Re:Get someone else

[davidannis]

You're better off using an open source template. There's a big collection at http://www.oswd.org/

Re:Get someone else

[virgil_disgr4ce]

Honestly, I will never understand why people who identify as {geeks | techies | IT workers | etc} undervalue or often deliberately devalue creativity, as though it's useless, functionless, unimportant. It's true that it's hard and takes practice and work, but that's never stopped us before. If there is one thing I wish I could teach the world, it's that creativity is a good thing, and that it can be learned. But as long as so many people think of it as some kind of impregnable domain of "artists," instead of an ability open to anyone, I won't hold my breath.

:-/

--Tedb0t

Re:Get someone else

[im_thatoneguy]

I'll let you in on a little secret. That's where most graphic designers start too.

Scour the page for a few sites you like. Revisit old sites you've made. Open a bunch of books of design you enjoy and find some inspiration.

Starting from a white canvase is always more difficult than at least finding a pallete that inspires you.

Re:Get someone else

[Fozzyuw]

Hire someone that knows what they are doing.

That's the easiest, but likely most costly, way out. But the original question was "how do I teach myself graphical design, particularly in the context of websites?"

To answer that, I would suggest there's a lot of a) reading and b) practice involved. You don't have to go to school to learn web graphic design, but you do have work hard at learning it. But, taking a course will just make it a lot easier. "Art" stuff is harder to just pickup and do, unlike "tech" stuff. This coming from a guy who was going to go to art school but opted for a Computer Science degree while studying CGI and ending up as a web developer.

Here are some books:

Transcending CSS: The Fine Art of Web Design

An excellent book that expands on CSS techniques as well as gets into how to visualize site design to best markup your website (without tables per say). Later on it will teach you how to look for inspiration in print media (magazines, newspapers, etc) and how to keep a "diary" of design ideas by cutting and pasting different images into a scrap book. It'll also cover different design aspects such as fixed vs liquid layouts, pixel vs em sizing, and get into CSS3 stuff that's coming down the pike (still) with the Advanced Layout Method. This is a must read, but requires some good CSS knowledge.

Bullet Proof Web Design

This book is less about design and more about how HTML/CSS markup to make your design easier to do without getting into table layouts. It'll make your job easier and might give you some design ideas. And since you cannot have one without the other...

Web Standards Solutions

Another excellent web development book. Like "bulletproof" above, it's a very fast read but worth it's weight in gold. Can you find this stuff on the Intranet? Sure, particularly from A List Apart, who's authers regularly post their articles too, but it's worth having a nice colored book for fast reference.

The Zen of CSS Design: Visual Enlightenment for the Web (Voices That Matter)

There's a website for this book, The CSS Zen Garden, that you can use and probably pass over this book (I did, but I'm still interested in adding this one to my collection). This will teach you about how HTML and CSS differ and what can be accomplished by good CSS and semantic HTML. It'll probably also get your inspired as there are a ton of gorgeous examples in the book.

Don't Make Me Think: A Common Sense Approach to Web Usability, 2nd Edition

You cannot talk about web site design without taking into consideration Usability and Steve Krug's book is probably the best thing you can read for you and your visitors. He's a nice guy (I've contacted him via email after reading his book and he kindly responded), his book is funny, short, and chalk full of full color graphical examples. You can also read from Nielson's website Useit.com to get more education on usability but there's a good deal of people who feel Nielson's "requirements" can be taken with a grain of salt.

Re:Get someone else

[morgan_greywolf]

As a former full-time professional graphic designer and current part-time professional freelance graphic designer, I have to agree 1000%.

Any graphic designer who tells you he's never stolen anyone else's design is FULL OF SHIT.

Graphic designers often look to other designs for inspiration. It's not really a big secret. Ever wonder why so many current designs look a lot the same? Duh. There's a whole industry dedicated to printing books and such that exist for no other reason than to provide inspiration.

Of course, any decent designer worth his salt doesn't steal outright. He looks at other designs, borrowing elements here and there and the end result is cohesive whole that doesn't really look a whole lot like any of his inspirations.

A good one...

[Machitis]

One of my favorite that really impacted that way I developed web sites: "Don't Make Me Think" by Steve Krug.

Hire someone

[Lord Apathy]

I have a little bit of advice in this area from experience too. I was the IT department of a small company like that once. I was ask the samething. I can put together a home page but a business page is a whole different bowl of wax. You screw it up and you can lose customers.

My advice would be to scout some of the local talent first. You can find some really good artists and designers out of the local techschools. Most of them will work cheap, a good page might set you back 200 bucks.

Re:Hire someone

[holophrastic]

You guys aren't satisfactory geeks -- I think you've lost your geek roots. There's nothing IT-bound to geekdom. Instead, it's the simple notion of "screw it, I'll just figure it out myself". The entire computer geek world came about from having to learn something that no one else knows.

How can you advise someone capable of learning not to do so? No one's asking to become a professional marketting expert in ten days. The potser is asking to learn over a long period, and to start with something small.

That's certainly doable for someone clearly able to learn.

I seem to recal a book review on slashdot some year or six ago that proposed a web design book for programmers. It described basic colour and layout theory and such. I haven't the foggiest as to when or what, but certainly they do exist.

As a web developer myself -- I do handle both the programming and the design work. I shy away from the serious design work if only because it isn't worth my programming time, but the simple design work is easy and fun. Just sit there with the blank canvas and be patient. Many many iterations is the key. Just talk it out. Think about your design goals, break them down, try them out. It's really just pseudo-code and a paint-brush.

Re:Hire someone

[jeillah]

I think the book you are talking about is "The Principles of Beautiful Web Design" by Jason Beard. It is a decent basic overview of graphic design.

Re:Hire someone

[pgillan]

I suffer from all the same ailments that have been listed previously: no artistic ability, slight colorblindness, etc. I bought this book because it sounded like exactly what I needed. Even after reading through one night (it's not that long), I still feel that way, although I have yet to actually sit down attempt to "build a beautiful site." (I'm also lazy). The section on color palettes alone was almost worth the price of admission, what with the easy to understand color wheels and the definitions of "shade" and "tint".

Re:Hire someone

[merreborn]

How can you advise someone capable of learning not to do so?

Because we suspect that it's at best difficult to teach yourself aesthetic sensibilities. As an above poster mentioned, geeks are prone to being "colorblind" and aesthetically clueless -- I know my wife cringes every time I wear a blue shirt with brown pants.

If you reverse the situation -- say he was a graphic designer, and the boss asked him to write a little code -- you'd see the same sort of response here. Both programming and the arts really take years to get a good base understanding developed. Neither are the sort of thing where you can pick up a book and start producing something decent. You produce crap for years before you get it figured out.

Re:Hire someone

[JeffSh]

You are daft. your post is advocating both positions.

1) do it all yourself
2) but i only am a web developer, i do both the programming AND design work... but you shy away from serious design work. (not only that, but what about the networking, servers, login scripts, domain/ldap management, database management etc? you probably shy away from that too)

The most important skill that I've found in people I work with is that they KNOW THEIR LIMITATIONS and have management that doesn't push them to know everything. For instance, I'd rather pay someone $125 an hour to do a job in 4 hours than waste my entire week on a project I know nothing about. It's irresponsible to the business to waste talents chasing stuff in this manner.

This post is not insightful, it's contradictory. If this guy were a web developer and needed web developing help, your post would make sense, but he's not. He's a network admin doing graphic design. big mistake!

Zen of CSS design?

[CRCulver]

The Zen of CSS Design won great praise when it was released for its call for beautiful and natural graphical interfaces built on top of semantically meaningful and conformant (X)HTML. Perhaps you could take inspiration from that?

Hire a designer

[pjmidnight]

It's easy for engineers to imagine that these types of things are the same as the mathematical equation required for coding. These tasks are more esoteric and require a sensitivity to process and inputs that can't be gleaned from a single information source.

If money is an issue I suggest mining the local college for design students.

Get a professional to do it

[Nexum]

Look, just because you're familiar with HTML, and server technologies doesn't mean that you can extend yourself into graphic design. Ask yourself - would you let a typical graphic designer manage those Ethernet servers, etc. that you currently maintain on your network? No! It works both ways.

Decent graphic design - especially accessibility etc. that your boss wants is a studied art, it will cost you a lot less just to go to the professionals, even if doing it yourself seems like it might save money and time. It won't.

The art of winning battles is knowing which ones to participate in, and which ones to sit out.

Re:Get a professional to do it

[Pulzar]

Ask yourself - would you let a typical graphic designer manage those Ethernet servers, etc. that you currently maintain on your network? No! It works both ways.

That's not a valid argument. To take it to an extreme, you'd never let a chef do brain surgery on you, but you might let a brain surgeon cook you a meal with some help from a cookbook. Just because one profession has little chance of succeeding in another, the opposite does not have to be true.

If the design requirements are small, a capable geek can read some books, look at some design ideas, and probably come up with something worthwhile for a small business web site.

Pay someone else

[TubeSteak]

Contract out to a professional.
You've already got a lot on your plate.

Re:Pay someone else

[mgabrys_sf]

Geez I wish I had mod pts today. That's the biggest and most important argument. Philosophies aside (and I'm a designer and it's the early morning and I'm migrating files and reformatting a computer I'm selling at the moment and would normally be crankier than hell and could flame this to China) the most important consideration is TIME. Would it be worth it for him to put another item on the agenda which could be a timesink and still not come up to par - or could you save time (and a heap of money) using a professional?

The whole point of a service economy whether you're marketing, graphics or IT is getting a specialist who can knock your socks off and use their time to the fullest advantage. I'm getting bummed by the whole 'kitchen sink' fad because it's really not only lowering the bar - but it's really pandering to the jack of all trades master of none crowd. I know enough code so that my designs and templates will hook with the back end effectively and I can make revisions, but I put in big flashing neon when a recruiter or client comes calling because they see all the languages I have listed on my resume that it's not my passion, interest, or the best most effective use of their time to be mucking about with their systems or the back-end more than I should.

I came out of publishing, printing initally on the way to design & advertising - and it always was an advantage to be able to interface with the production directors and speak their language later on in my career and know that my stuff could get on and off the press with minimal fuss (not to mention having a better grasp of really cool things that could be added to the design). I never claimed to be a true dot-head who could read screen angles and see color through the seps exclusively (true side-story - the best color expert on one of the pre-press and high-end publishing campuses I worked with was actually color-blind. But GEEZ could he read film).

I always am quick to point out when a client is bogging themselves down timewise when they go outside of my usual skillset. Sure I could learn advance scripting for building new libraries to hook into - but is it really worth their time? And by worth I mean money.

Punch up

[kylben]

My boss has asked me to 'punch up' the website to make it more appealing.

Sounds like the project has already failed, then.

Seriously, start by asking questions, not offering answers. And I mean to him, not to slashdot. What is it the site is meant to communicate? What services does it provide? What values should it express? Why does he think it is not appealing now? Who is the audience? What are their values and expectations? Why are you worrying about this on Sunday?

People that do this are called graphic artists for a reason, and art is communication and it has a vocabulary. Start with what you want to communicate and how it can/should be communicated, then find colors, shapes, symbols and relationships that express that.

Get a professional if you can, he's the one that knows to ask those questions, and how to execute the answers he discovers.

Use a theme for a website engine

[rgm3]

Your best bet here is to start with a system like Wordpress, Joomla, or Drupal and theme it. You can start with one that has the basic layout you like and modify according to your GIMP skill level. Usually all the accessibility work is done for you with this approach.

Re:Use a theme for a website engine

[Ugot2BkidNme]

Do you truly believe that Joomla Drupal or Wordpress Templates are generally accessible? Seriously?

I build Accessible websites for a living and I am telling you flat out it is a lot more difficult to validate and have good accessible design. Almost all Templates you will find use tables even those that do not still the CMS's and modules generally put out bad or table formated output. Traveling down this path is a very bad way to go.

This can be a very daunting task. But you can do it.

Start by picking a DocType that works for you. then produce all the content you want in valid html format. identify different sections and enclose them in Div's assign classes to like content and assign ID's to sections that will not be repeated.

Once you have the content displaying in the way that makes sense in markup. You can begin to style it either pick an existing templeting system or create your via includes. Now this is where things get a bit more difficult you need to determine how you want the content to display.

From this point on you can begin to do design your website accordingly. Remember Javascript is not completely bad but any nice helpful things you do with javascript should have corresponding non javascript ways of doing things. Like adding buttons in noscript tags for onchange events. Also adding targets to window popups and be sure to add onkeypress="this.click()" to all links as well. You can modify css via javascript to make things display and not display but remember to set the defaults via javascript at the point of window.onload this way with no javascript the user will still see the content that you wish them to see just not in the fashion that might not be optimal.

Two other quick tips to remember: Do not specify a size of your website via pixel it should be done via em or percentages. Take into account that the user can and will change the default size of their font's you must account for this.

Mimicry

[Anonymous Coward]

1: Find a site that has the usability level (and pretty interface) that you're after.

2: Mimic (with all the copyright-infringing energy you can muster) their their site layout.

3: Find a local college art student, and have him/her make some replacement graphics for you.
 
Art students generally work pretty cheap on art/design projects - mostly due to the lack of employment opportunities directly relating to their choice of major. Design jobs that bolster the resume are almost always welcomed. Besides, most of us will tolerate a few gaudy graphics if the site layout works well (i.e. we can find what we're looking for quickly).

Use a template or buy the design + CSS

[markholmberg]

I would build the site on some simple CMS like CMS Made Simple, http://www.cmsmadesimple.org/ Then, I would add a ready-made CSS template from a site like http://www.oswd.org/ Also, you could just suggest to your boss that you buy the design along with the CSS. There are tons of freelance designers on the web with excellent references available. Our company has bought some amazing designs for as little as 200$. Try a site like http://www.elance.com/ for starters.

Unify your online presence and Marketing programs.

[mikelieman]

Websites are MARKETING tools, and must be part of a unified Marketing Strategy.

You want a Marketing Pro, who can deliver the rain, handling the "Vision", while you can concentrate on the implementation.

Art Institute

[hotsauce]

Absolutely. Get someone from the local Art Institute of $yourCity to look at your current glossy brochures and do it. Grahpic design is as far from programming as grahpics are from the mechanics of the printing press.

And yeah, she'll probably be a she :) That's the bonus, you'll get to work with a creative, and see how the other half live (gender- and professionally-wise). Then actually follow through with what she designs for you, don't just cringe at the large grahpics and crazy layout.

Re:Art Institute

[dgagley]

Local Art institutes do not teach reality in graphics. Especially graphics that does not clog the band width. I have to re create designers work for print and online on a monthly basis. You can seek design help but you my need to alter it to work at a clean and understandable form. Try some small web design firm that is willing to help on side projects. You may also be able to share codding projects with them and make some side money as well.

Re:Art Institute

[macurmudgeon]

No. No. No. No. No.

I've worked with a number of both pro graphic designers aand students. If they don't understand how web pages are built, then they will not create a modern and attractive web page. Period. Graphic designers don't understand how a web page is constructed anf so will either build a page that is very dumbed down or doesn't translate well to the web. I've worked collaboratively with some good print designers but have not found one who really understands web page design and I've worked with some real pros.

As for doing it yourself, the chances is that if you can't now you would need lots of study to learn how. Either hire a good *WEB* designer who's work you like and who can build accessible, compliant, etc. pages or use a CMS. Joomla, Wordpress and Drupal all have lots of good quality themes available that at worst can be bought for less than $100. There are a number of decent free ones.

Re:Art Institute

[oliderid]

I've worked with a number of both pro graphic designers aand students. If they don't understand how web pages are built,

I second that. You need a web designer (or a designer with web experience) otherwise:
1. They will use shiny fonts...It will work on their PC, but of course those exotics fonts won't be installed on the surfer PC.
2. Pixel != DPI (you will find yourself with a web page width: 123345px)
3. Impossible layout (things that look beautiful but you cannot translate into HTML)
4. Layout with no flexibility (don't understand that a web page content may change)
5. Content mixed with graphics (If you use FLASH no real problem...But with HTML...)
6. Scroll down layout (big headers! beautiful ones...But the content remain invisible until you scroll down)
7 Etc.

But it certainly doesn't mean that a non designer should make the layout. It will be probably technically perfect but it will be usually plain ugly too.

Re:Art Institute

[spooje]

As I teach a web design class at the Cleveland Institute of Art, I know what you're saying is nonesense. There are plenty of "Institute of Art" schools who teach web design to n00bs based on good industry practice.

You just need to check out the class before hand and talk to the instructor. Part of the problem the institutes have is that the pay is low compaired to doing actual design for the same amount of hours. If you want a class that's about clean and usable design tell the school, they always take potential student feedback into consideration when creating new classes and filling teaching positions.

Re:Art Institute

[gregmac]

You forgot to add that they will do the entire design in Photoshop and then just slice up the image into a giant table. The page will be huge and inaccessable.

This is where someone good at HTML/CSS comes in. The catch is that they have to realize they suck at graphic design, and not try to do any changes - just take the photoshop stuff, and turn it into proper HTML/CSS and chop up the images appropriately.

I sort of see this area as a gradient, that goes from "programmer" to "web developer" to "web designer" to "graphic designer".

At one end, you have programmers that don't understand web technology, who make pages that require explicitly clicking on a "Submit" button instead of being able to press enter in a search box, do POSTs where a POST should not be required, stupid use of URL parameters, sensitive data in cookies, etc. On the other far end, you have graphic designers who don't understand the web at all, and you end up with something ranging from a print brochure migrated to the web, to a site designed entirely in flash for no good reason other than "the transition effects are cool".

Towards the middle, you have programmers that understand web technology, but can't design worth a crap. You can identify these people as the ones that back up their claims that they know how to design websites by saying they know HTML and Photoshop. When they design a site, you get an ugly, but functional site.

You also have the web designers, who came from a graphic design background but maybe understand some HTML. Some of them are the types you just take the nicely-designed-in Photoshop page from and turn it into HTML/CSS, and others know how to do that properly on their own. In my experience most of these people don't try to program at all, but if they do it's the sort of thing that ends up on the dailywtf.

I've also met a couple of people that are very good at both web design and development. Both came from the graphic design side and then learned how to program. I think these people are few and far between, though - even though I'm sure there's a great many people that claim to be here.

Agreed-hire an artist

[LinDVD]

I just got back from an Adobe Flash 3D (Papervision 3d) training approximately one week ago, and there were many designers who attended. There were also some coders, but all the larger companies hire full blown artists. For example, Starbucks currently has two artists who create the concepts, and then they have two Actionscript/PHP coders who translate the artists' vision, and they have a back end coder for database stuff and other heavy-logic items. If an artistic element is a requirement, you really should outsource/hire someone who actually has a true art background (with experience in visual design), because artists just think in very different ways than coders do, and most people can't bridge the gaps. Sure, you can make something that could be pretty good, but it will never have the actual "feel" of an art project.

One more thing-80% of the audience had MacBook pro's. Why? The majority of people felt that the workflow was more intuitive/refined than what Microsoft Windows has to offer.

Open Source Web Design

[CodeBuster]

You might want to take a look at Open Source Web Design, even if they do not have exactly what you want their templates will give you a good starting point for your layout and design.

A Contrarian View

[Phoenix666]

Good design is not black magic. There are rules and conventions just like there are for any other discipline. There are also trends and fashions like there are for any other discipline. You can learn them, if you want.

There are sites that serve as reference points for design professionals; There are many, but this is one: http://www.webdesignfromscratch.com/current-style.cfm

So look through the galleries of what design professionals themselves consider exemplary, then shamelessly copy; after all, that's exactly what design professionals do--they're constantly stealing from each other.

Beyond that, you only require finicky, anal attention to detail. If things don't look evenly spaced, measure it with the ruler tools. If the font renders fuzzy, use a better one. But chances are, if you're in I.T. you already possess the fine attention to detail required.

In sum, it's a different way of thinking, but not impossible or even that difficult to acquire. Fair warning, though, if you start wearing those glasses you may suddenly find yourself remarking how that women's shoes don't go with her outfit, or the stitching on his jacket is clumsy, or that the lines on the new Mazda give you an angular, cramped impression.

Re:A Contrarian View

[Bluesman]

Fair warning, though, if you start wearing those glasses you may suddenly find yourself remarking how that women's shoes don't go with her outfit. . .

Or how Steve Jobs is the hottest guy on the face of the earth, because he's a technical AND artistic genius. I mean, just LOOK at how well the Mac works and how beautiful it is!

CSS Zen Garden

[Xelios]

The CSS Zen Garden is a great place to get some ideas. No book will teach you creativity, you can learn some general rules or tips and tricks but good design ultimately comes down to experience. The best advice, in my opinion, is to keep it simple and clean. Most visitors will appreciate a clean, easy to navigate site more than fancy flash graphics or a Photoshop jungle.

Seriously don't...

[emilng]

Copying someone's site design is bad policy in general.
I think the many people who either give the advice to copy or copy another site themselves risk ending up on this site:
http://pirated-sites.com/

I graduated with a BFA and took my share of communication design courses.
I worked hard the past 7 years learning to be a competent developer so I've been on both sides of the boat.
It's just bad to have some douchebag steal the site design it actually took a design degree and years of experience to create.
Geek translation: It's like someone putting GPL code in closed source software.
You 're familiar with the geek outrage when that happens.
Well that's the same outrage that designers feel when you steal a site design.

Re:Seriously don't...

[Mr. Slippery]

Well that's the same outrage that designers feel when you steal a site design.

Excuse me? How in the world do you "steal" something as abstract as a site design?

It sounds sounds like Apple's ludicrous "look and feel" lawsuits.

"OMG! You thief! You used a three-column layout, a sans-serif font for headers, a menu across the top, and a gradient for a background! You stole my design!"

useful points

[Doctor Crumb]

I've muddled through over the years, mostly by looking at what actual graphic designers have done and trying to learn their techniques. A few things to remember:

* a boring design is better than an ugly one. Don't try too hard.
* learn about negative space, colour theory, and usability. There's generally math behind them that you can learn and use.
* go find some attractive sites, try to figure out 2 or 3 elements that you like, and try to copy them.
* don't be afraid to rip off other sites; generally by the time you're done tweaking, your design won't look anything like the original. (Just don't steal their actual images or code)
* HTML naturally leads to boxy layouts; that's okay! Don't mangle your HTML trying to avoid it; you can de-boxify with CSS and images.
* find an artist friend and get them to critique your design; a few offhand comments from them can save you days!
* most of the neat effects on the web these days are clever images (3-column layouts, reflection effects, rounded corners), and most of the rest are clever CSS.
* you *can* get the same level of quality as a professional designer, it will just take you 100x as long.
* http://www.alistapart.com/
* http://www.csszengarden.com/

That said, you probably don't want to be learning this stuff on the job while your servers catch on fire. It will be better for all involved if your boss hires someone who is already a talented designer; even an amateur designer will probably be faster than you. Design is definitely a time-money tradeoff; professional designers charge a lot because they do good work quickly. If you really want to learn this stuff, you probably don't want to do it under a deadline.

Re:Get a web designer

[ScrewMaster]

Green text on black background is the only way to go!

Nah, that's old school. Amber on a black background is what you want.

Good book

[theeddie55]

I was pretty much in the same situation until somebody recommended to me "The Principles of Beautiful Web Design" By Jason Beaird http://www.amazon.com/Principles-Beautiful-Web-Design/dp/0975841963/ref=pd_bbs_sr_1?ie=UTF8&s=books&qid=1202658998&sr=8-1 since then I've done several websites and got several contracts from people who've seen those sites. The book assumes you know stuff like HTML and CSS and just covers things like layout, color schemes and graphics.

HTML is *NOT* Art

[RobotRunAmok]

I run into this misunderstanding all the time, on both sides (geek and suit).

There is nothing about being a "geek" or knowing HTML, CSS, or javascript that magically grants someone designer chops. It's like expecting the guy who sets type and runs the printing press to be a novelist or journalist, or expecting the chemist who mixes the paint to also be a canvas artist.

This misunderstanding was prevalent back when the web was "new" (circa '94-95), but it's inexcusable today. In any case, it's a lot easier to teach HTML and CSS to a legitimate designer, than design to an HTML jockey.

If the work of a real designer or design firm is simply not in the budget (which is crazy talk, because there are firms online that grind this stuff out now for chump change), than find some CSS book with a CD full of templates that grant license to modify. But please, for the sake of art, sanity, and all that's holy, keep IT out of web design!

Please note: Code is *not* poetry, and HTML is not code...

Re:HTML is *NOT* Art

[mysticgoat]

While parent post is not untrue, it comes across as a self-serving piece written by a graphics designer who needs to convince the world that he has much value to add to someone else's web site engineering. I don't know that is the case, but that is the appearance the words convey.

Graphics design is not all about Mysterious Talent: there are some basic rules that can be learned and applied by anyone. Conforming to these rules will add "punch" to your web pages, whether you understand the reasons for them or not. Use of them will not of itself get you any artistic awards, but since they can be translated into your daily work with CSS on layout and color, they can be applied without increasing your operating expenses. Which appears to be what the boss wants. It seems very unlikely that the boss is going to add the cost of a contract with a graphics design artist to the company's overhead. The goal is clear: take what has been done and make it better. Don't throw it away and reconstruct with someone else's template. Grow what's already done into a more pleasing form.

Google for "color theory" and "graphic composition": those are the two basic fields you need to look at.

Under color theory, look for discussions of

• the color wheel,
• monochromatic color schemes,
• tinted, shaded, and muddied colors (going toward browns or earth colors)
• complementary colors,
• use of contrasting colors,
• color temperature (warm colors vs cool colors)
• You'll come across other terms as you go through this material: check them out too

Under composition, look for discussions of

• basics of visual perception (how the eye scans an image) and how to guide that
• rule of thirds
• golden rectangles
• use of circles
• use of intersecting diagonals
• active and passive shapes
• check out the other terms you stumble upon as you go through this list

What you probably want to do is to find some formula that will work for the web site, can be applied throughout it (helps with "branding" by providing the user with a constant, reliable theme), and can be followed pretty much as a recipe (without you needing to remember what the rules are or why this set of details works). A $20 set of watercolors, or even a box of crayons, can help in exploring and gathering comments on initial drafts of the presentation. The end result will probably be mostly CSS snippets you can treat as black boxes.

Another excellent resource is an artist supply store that caters to newbies and hobbyists: it will have books on beginning watercolor or acrylic painting that will go over this material, and it should have a clerk or two who are helpful.

Re:Get a web designer

[emilng]

I found this study that found that green text on a yellow background is the easiest to read:
http://hubel.sfasu.edu/research/AHNCUR.html

They only tested for dark colors on light background and not light colors on dark background so I wonder if it really is the case that green on black is the best or if other color combinations are actually better. I know this doesn't have anything to bear on the aesthetic appearance of a website, but I thought it was interesting. I mean look at Jacob Nielson's site and how ugly a supposed usability expert's site is.

In the auto industry...

[clintp]

I've run into this a few times and it's easy to explain:

In the auto industry there are mechanics, powertrain engineers, and those guys that design bodies and interiors. (No bias from me at all!) You wouldn't want the guy picking paint colors and fabrics for the interiors to design your exhaust manifold; by the same token you don't want the guy who does the casting flow calculations for the engine block figuring out what the front grill should look like. These are not only different professions, but different kinds of professions.

Keep your nose out of the design business, please. If you're a good programmer or admin guy, you don't know much about marketing and have lousy taste. Admitting it is the first step.

Look at sites that showcase good design...

[foniksonik]

http://www.unmatchedstyle.com/

http://www.stylegala.com/

http://www.thefwa.com/ http://www.csszengarden.com/

http://www.styletheweb.com/

These are all good directories of good web design you can get 'inspiration' from

Get Frequent Feedback

[Frightened_Turtle]

Push back a little on your boss. Have him scratch out some rough sketches of what he thinks he wants to see. The problem with artistic endeavors is that everyone is a critic. If you put in the extra effort to try and come up with some nice artwork, only to find your boss doesn't like it, you will become bogged down and eventually burn out. You need your client —your boss —to give you some artistic direction on what he wants. By engaging him like this, he'll be a little more aware of the amount of effort it is going to take you — a confessed non-artist —to "pretty things up".

Someone already beat me to suggesting CSS Zen Garden. That's a very inspirational site for anyone who wants to blend esthetically pleasing with advanced technically functional. Being familiar with HTML, SQL, and PHP, adding CSS to the quiver will open up a new level of creative possibilities. My favorite approach was adding subtle variations depending on the season or holiday —even local changes to the weather. I would have the PHP output a slight variation in the colors of certain elements with inline CSS, depending on certain conditions laid out in the rules table I created in MySQL.

You can do some very effective decorative touches using just CSS and minimal graphics elements. If nothing else, it will certainly increase the speed at which your site loads. Eric Meyers offers some simple (and not so simple) examples of what you can accomplish with just CSS. His Complex Spiral demonstration is one of my favorites and was what really inspired me years ago to learn more about CSS.

Definitely go to different web sites and look at the way they look and use that as inspiration for what you would like to accomplish. But as I stated in the opening, each revision, bring back to your boss and get his input. The more you involve him (her?), the more you are likely to end up with something that he wants, and the less work you will have to do.

Comment removed

[account_deleted]

Comment removed based on user account deletion

Re:Creative is not a noun

[Anonymous Coward]

As a designer in the creative industry, I have no problem being called a 'creative'. In fact it's how we refer to ourselves and what separates us from the 'suits'. You're the first person I've ever heard of that had a problem with it.

Good web design is when you can look at a site and not notice the design at all. It's simply effective and cohesive and requires no extra thought or deduction on the part of the visitor.

Re:Unify your online presence and Marketing progra

[MrMarket]

You want a Marketing Pro, who can deliver the rain, handling the "Vision", while you can concentrate on the implementation.

Okay... who let in the PHB?

I wouldn't suggest CSS Zen Garden here

[Anonymous Brave Guy]

The CSS Zen Garden is a great place to get some ideas.

I respectfully disagree. CSS Zen Garden is a fascinating showcase of what is possible, but it's perhaps also a perfect example of "just because we can do something, that doesn't mean we should do it". The person asking this question is talking about a small business web site, not a personal blog-for-fun. Many of the tricks used in CSS Zen Garden entries, clever and attractive as they may be, are exactly the sort of thing you don't want in a usable, accessible, search-engine-friendly web site for a professional organisation.

You can't just learn good design overnight, and good taste certainly plays its part in producing an effective web site. However, there are some big ways to go wrong, and if you can just avoid those then you'll probably already have a better web site than a lot of your competitors. If the asker wants to learn a bit about graphic design, the good news is there are plenty of web sites that do teach the basic principles.

If you like to browse the web and find your own ideas and patterns, you could start by searching for some common topics like:

• balance
• alignment
• contrast
• white space
• optical centre
• typography
• colour theory

There's no one authoritative set, but you'll find the same themes come up time and again. Most of these will hopefully seem like they're just common sense once you've read them, too, though of course you might not have thought of them until they were pointed out.

If you prefer a more structured approach, you'll probably do fine just searching for "graphic design principles", reading a few of the all-in-one tutorials, and then following some links for more detailed information on the key topics you find mentioned repeatedly.

I would recommend looking up some basic material on usability as well. The prettiest design in the world isn't going to help visitors to find the information they want and/or to make purchases if your information architecture and site navigation are poor. I'd also suggest reading up on the basics of search engine optimisation, because prettifying your site in a way that makes it harder for search engines to scan will cost you presumably valuable page hits. These sorts of issues are why CSS Zen Garden is exactly the wrong place to look for inspiration if you're trying to make an effective web site, even though it's a great place to look if you just want to make a pretty web site.

Design Examples, Test, Who's The Decider?

[ngr8]

Good sources for design by example:

http://www.edwardtufte.com/
how to present quantitative information and get to the essence: less is more.

http://www.garrreynolds.com/
many examples on messages and negative space

http://www.websitesthatsuck.com/
intelligent checklists of what to do and stunningly great what not to do examples. Excellent walk through for "the boss" who might really, really, want to have that musical gif with the dog playing the banjo on the first page along side the waving flag/support our troops light show...

Test: Consider too how customers, et.al.,will access the site.

Make the dog food, eat the dog food. If the users are coming through a network jinking like a moth in flight from a bat, that big ass wonderful "thing" may well and truly blow chunks. Demo on the LAN, or on the desktop: bad thing. What's the implementation environment?

If users are urban with high capacity networks, fatter images etc. can be less of a problem. But if you're trying to reach, say, people "on the road" or in dial up land, test with their environments. I recall one rule of thumb that suggested that 4 seconds is about the design budget for the first page to show up.

In turn, consider also testing with at least a couple of current and backlevel browsers to catch major pains.

Go for basic function/message first. Avoid the scripting etc. until the site is stabilized and (most)people smile.

Is it to support the operations of your business as well as communicate to your customers and partners? The ops/innards pieces, to me at least, are very different in terms of look, function, and feel. Separate these requirements from the messaging; creeping functionality kills.

Who Is The Decider?

Who is writing content? Who is editing content?

Frame up a few questions such as "who should we look like vis a vis competition, which customers and prospects are of interest, what's our brand, etc." If you get a glazed look go for the neat gif mailboxes and spinning blinkenlights and declare a victory. If the idea of integrated messaging and corporate (organizational) image are not big in the culture, well shucks, I'd go for beige on beige.

You don't need a graphic designer...

[slim]

... you need a web design geek.

A graphic designer knows all about fonts and colour and layout, and could design you a beautiful logo, or ad, or book layout. But they won't know about usability, accessibility, browser independence, standards compliance, performance. This is how people end up with sites where every page is an image (or worse, a chopped up image, reassembled in a table).

A typical IT geek knows about code and protocols, probably knows a well designed web site when he sees one, but often doesn't have the inclination to design something new and visually beautiful. I used to be pretty good at art and design at school, but now I class myself in this group -- if I pick two colours for a page, they'll either look hideous together, or conventional and dull.

WHEREAS - a Web design geek doesn't necessarily understand the subtleties of protocols, nor necessarily have the best programming skills. But they'll know HTML and CSS inside out, and they'll have a passion for all those important webby things the graphic designer would neglect. They'll be full of attractive layout ideas, but will stay within the bounds of what CSS can do efficiently.

You can still be involved. If there's dynamic content, you pick the CMS, you code up any new logic that's needed (learned RoR yet? Now's an opportunity!). Work with your Web design geek to agree on div classes they can write their CSS around.

Webpages aren't (usually) artwork.

[fireboy1919]

There is nothing about being a "geek" or knowing HTML, CSS, or javascript that magically grants someone designer chops.

And there's one other *extremely important* fact that I've learned: there's nothing that being a graphic designer learns that magically grants them webpage design chops.

If the web was run by graphics designers, all the pages would be extremely pretty. Most would be stored as individual flash files, but some of the less important text would just be as represented as images. No text would actually be stored as text, and each page would contain roughly a sentence or two worth of actual text. To find anything meaningful would require somewhere in the neighborhood of eight clicks.

  In other words, they can make the web fluffy. Today, the place of the graphic artist is starting to be more and more just devoted to logos, banners, and advertisements - like they were before the web (mostly because the web used to be just those things for a lot of companies, and is now becoming a lot more than that). The usability people are taking up the task of writing pages, and those people are very much geeks. They're the ones who make new kinds of widgets that work the way that they do for desktop apps - with things like autocomplete, AJAX, unified designs, usage of CSS, etc, standard layout and standard widget usage. These are pretty much always two different groups. Usability people fight to make things look and work naturally, while graphic artists fight to make their pages stand out and work different from everyone else's. So you aren't likely to be both.

So if I were in your position (and I actually am in my company), I'd focus on cognitive science usability studies and take my ideas of how to make things nicer from that. People who actually try to get information out of your site will appreciate it...whereas they mostly won't care much what it looks like for more than the first three seconds or so (for most companies, anyway. If you happen to sell something that's main feature is it's prettiness, then you might consider making a pretty site more important than one that you can find out about your business from).

Try Blueprint

[jaaron]

My first recommendation would be to try Blueprint -- a set of reasonable CSS styles that make building grid-based layouts much easier. It's open source, designed by some great people and actively supported.

If you're looking for full designs, try Open Source Web Designs. There are also other free template sites out there, so search around.

Re:Unify your online presence and Marketing progra

[symbolic]

I'd advise extra care if using this approach. Marketing people are not usability experts, and users do NOT want to be sucker-punched with marketing drivel every time they visit your site. You may get their attention the first time with a slick home page, but if the implementation makes it too cumbersome to actually use the site, you can bet they'll probably never come back. It's too easy to go somewhere else.

Re:Unify your online presence and Marketing progra

[Anonymous Brave Guy]

It wasn't a PHB, it was a Marketing Pro®... :-)

Re:Unify your online presence and Marketing progra

[caffeinemessiah]

Geek 1:

I'm a good geek of all arts. But when I try to dabble in graphical design, I always fail spectacularly. Get someone with actual talent to do it.

Geek 2:

You want a Marketing Pro, who can deliver the rain, handling the "Vision", while you can concentrate on the implementation

And they're both absolutely right. I would suggest starting with a free template and modifying the CSS / graphics. That saves you the initial legwork of choosing a design layout, colors, etc. Here are some sites with some really awesome templates and liberal licensing (CC for most I think): Free CSS Templates.org and Open source web design.

-1, Wrong: "Creative" is a noun

[langelgjm]

Actually, according to the OED, "creative" is a noun, with the following senses:

1. The creative faculty; creative work; (Advertising) creative material produced for an advertising campaign, such as the copy, design, or artwork.

2. A creative person, a person whose job involves creative work; (Advertising) a person who carries out creative work on an advertising campaign, esp. a copywriter, art director, or designer.

An example of the second sense dates to 1938.

And now I will write on the whiteboard

[StreetStealth]

"I will always preview my HTML at /." 200 times.

Re:Unify your online presence and Marketing progra

[Nefarious Wheel]

I'd advise extra care if using this approach. Marketing people are not usability experts

Whups (ding) Thank you for playing.

Good marketing people are usability experts. Advertising people aren't. Best not to confuse the two.

The distinction is fairly simple; Advertising people try to sell things by annoying you, marketing people try to sell things that don't annoy you. The latter defines a niche, the former tries to cram you into it. Seriously. Advertising sells, marketing determines what will sell before the advertiser even sees it.

Other than that quibble, you're pretty much on target. Too much shiny on the site is lame, but good artwork is imperative. Remember this is the foyer of your company's premises to a lot of people, and people read "cheap" into a company really quickly on that first impression. I'd no more design the letterhead of a company than I'd let an un-ticketed outsider play with our DC's air conditioning.

Ok so maybe it's not always necessary

[mstahl]

Most of my work where we had to worry about this was online annual reports, which MUST be accessible (by law) to anyone who asks for them. That being the "public" in "publicly-traded corporation", but yeah. I remember having to jump through so many hoops on [super large global corporation]'s annual report that I finally broke down and told them that when they find the one blind investor they have, call me, I'll go to his/her house and explain it to them if they want, 'cause that would've been easier.

Also, finally last year I got a chance to speak to a real live blind person about this, and they confirmed pretty much what you just said. Blind people, in general, can't really use the web without assistance. When I asked him about that super-neat braille terminal Whistler uses in Sneakers, he seemed dubious about it at best :(.

Re:Unify your online presence and Marketing progra

[largesnike]

Player's Handbook?

Re:Unify your online presence and Marketing progra

[mdavids]

Websites are communication tools, not marketing tools. By all means make them look and feel nice (and consistent with your branding), but treat your users with respect. They chose to visit your site, so don't treat them like they're just passing through while waiting for "America's Biggest Celebrity Dancing Loser" to start. You don't need to grab their attention; you've got their attention. Now give them what they came for.