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/
http://www.edwardtufte.com/tufte/
Edward Tufte has great ideas on graphic design in general. Most are not specifically directed at web graphics, but some of the topics in his Ask E.T Forum cover this. He responds to problems that include how to format a list properly, how much information to put on one screen, and the design of forms intended for user input.
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.
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).
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.
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 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".
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.
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.
Whew! This water sure is cold!
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.
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:
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.
If you disagree, post your argument. (-1, Overrated) isn't your personal censorship tool for views you don't like.
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.
Verizon: Latin for "poor rural service".
... 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.
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.
"Anyone who [rips a CD] is probably engaging in copyright infringement." - David O. Carson
oswd.org (Open-Source Web Design - a lot of templates - all free.
You're better off using an open source template. There's a big collection at http://www.oswd.org/
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:
"The past was erased, the erasure was forgotten, the lie became truth." ~1984 George Orwell
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.
My blog