Slashdot Mirror
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)."
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?
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.
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.
Do what you can, with what you have, where you are.
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.
Murphey's fighting Occam, and we're in the stands.
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.
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.
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
Under composition, look for discussions of
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.
Geek 2:
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.
An old-timer with old-timey ideas.
oswd.org (Open-Source Web Design - a lot of templates - all free.