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?
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/
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 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.
Blazing Spiders
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
A fool throws a stone into a well and a thousand sages can not remove it.
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.
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.
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.
... 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.
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.
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.
Who said Freedom was Fair?
Could try out Open Source Web Design.
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.