Designing "attractive" web-sites?

Hi,

So I make tons of web-sites but they all look ugly as sin. I mean white backgrounds with forms and such. Has anyone figured out a way, even if it looks a little cliche, to create attractive sites? I literally cannot even get the basics of colours right - let alone those little tiny images spread all over to make it look pretty.

For example do you use templates? Or colour wheels of some kind? Or is there any great software I'm not using like Photoshop or Dreamweaver, neither of which I've touched in over ten years?

Basically I have the artistic talents of a rock, so I need to "fake it." Any suggestions?

I am happy to spend a little money if it means I can make visually appealing sites.

Go find a nice style template from somewhere like the Open Source Web Design site and use that as the basis for you site (even if you just take the colour scheme and use your own layout).

Herbie

Dr Herbie said:

Go find a nice style template from somewhere like the Open Source Web Design site and use that as the basis for you site (even if you just take the colour scheme and use your own layout).

 

Herbie

 

Wordpress templates are a plentiful source of inspiration.

As well as looking at the CSS and images, a good thing to do is use Firebug (or a basic DOM inspector) to poke about on other people's sites. See what their font stacks look like, what sizes they've used for different elements. See how they used that 1px wide image to create a bunch of gradients. That sort of thing.

kuler has a ton of color schemes: http://kuler.adobe.com/

also...

keep it simple.

less is more.

if everything is bold, nothing is bold.

empty space is important.

also, if you have photoshop, you can build your whole page (or at least the master page/theme/template) in it, then slice it by guideline and save for web. import the html and "important" image slices into vs and you're all set (don't forget to also include the layered photoshop file for changes down the road).

Use ColourLovers for colour schemes, but often it's something you can do yourself (just make sure your monitor is calibrated, or at least has the right colour temperature first).

Making overall designs isn't too hard, the painful bit is making data-entry forms look good whilst remaining usable. I find that sans-serif fonts are often inappropriate for data-entry. I always aim for large-sized form fields (simply increase the font-size) and that works wonders for usability. Also be sure to lay out your forms consistently. Despite what lots of people say there really is no harm in laying out forms using tables (shock horror)

There's also software like Artisteer that can be used to create templates that look pretty good.

I took two communication design courses and have quite some experience in web design (both good and bad).

My advice would be to list down on a piece of paper the elements you claim are important to show on the page. Then, highlight the most important items within that list. Across several sheets of paper, make some mockups/wireframes based off of that list of what the barebones structure of the page should look like (keep it just lines and simple shapes).

For example, you might have a larger box for the "log in" form, a long rectangle on the side for "sidebar" with some smaller squares for "related links" and "watched items." Find the mockup that realistically represents how you want visitors to view your page. What should they see first, next, last, etc (the big items are eyegrabbers) and how should their eyes travel.

Take this mockup and head over to Photoshop (or Paint). Replace the "boxes" with example content (real content, no lorem ipsum). Find a good font to use. Usually, a serif for body text and nonserif for headers is good, but it does not always have to be that way. You just have to avoid body text fonts that have hard to distinguish letters (like round fonts).

Start with everything the same font size. Let this be the base size for your body text. Then slowly bump up the font size of the headers (and/or decrease font size of nonessential text pieces like copyright items). Note, you might only need to bold the header instead of change its size. Try to keep the different text sizes down to two or three, and make the difference in size very obvious. As an alternative to changing the bolding or font size of an item, you can adjust its margin, pulling it a bit out of the central content to create a grabber.

Once you have typography set, start to play around with color. I like to use Adobe's Kuler for color schemes.

Note: A Black and White site can accomplish what you need, provided you attend to the basics above.

Try to stick to at most two/three colors, unless you have a color scheme that's very bold and differentiated.

Now that you have the paint, start thinking about the trimmings and the moldings. Maybe spice up the borders, change the bullets, box in some items for emphasis, add some background texture, etc. To find inspiration, think of the site's content - if you're selling soil, soil is rough, it crumples, it washes out. A subtle texture for some of the elements could be rough and grainy. The logo can crumple. The background color can wash out.

When I was designing a site for an Indian dance school, my inspiration for the design came from looking at different Indian saris. My color scheme came from the bold and constrasting thread colors, and the edges of the saris with the beautiful trims became the wavy borders of the site.

It's probably not the best idea to go straight to photoshop, unless you're jamie and a page design just pops into your head. Think of design like building a house. First figure out the rooms and how they relate to each other. Then, once all the rooms are there, place the items that belong in each room and adjust those items. Paint the walls appropriately to match those items and to be consistent with the overall feeling of the house. Then figure out molding, carpet color, placement of Mona Lisa, marble vs cement counters, etc.

In summary, start with the basics of dimension and placement of items. Then move onto typography. Follow through with color, and last with decor and imagery.

If you need some additional help, my school published open courseware for one of our communication design classes.

mstefan said:

There's also software like Artisteer that can be used to create templates that look pretty good.

I had a look at the sample screenshots, they look just like your standard free templates you can get from anywhere, complete with stock photos of "businessmen and women" in various poses. Cringeworthy.

W3bbo said:

mstefan said:

*snip*

I had a look at the sample screenshots, they look just like your standard free templates you can get from anywhere, complete with stock photos of "businessmen and women" in various poses. Cringeworthy.

Actually, the idea is that you create your own templates; they have some stock configurations that you can use as a foundation, but it's really more of a "template creation tool" rather than a "website creation tool". The idea is that you create your basic template layout (colors, page structure, sidebar, menu, etc.) and then you can publish it in a variety of different formats. So, for example, if you were using Joomla! and WordPress on your site, you could use that as a way to create a template that would work and look the same for both.  From what I can tell, it's primarily geared towards people don't have much in the way of artistic or design skills, couldn't use Photoshop if someone put a gun to their heads, but know to use Word (its interface is very Office 2007-ish with ribbons and such).

As far as being "cringeworthy", I guess that's a matter of personal taste. The vast majority of the stuff I see out there on template sites, both paid and free, tends range from hideous to outdated. You're always going to get better results if you have the skills and time to assemble what you need yourself.

mstefan said:

W3bbo said:

*snip*

Actually, the idea is that you create your own templates; they have some stock configurations that you can use as a foundation, but it's really more of a "template creation tool" rather than a "website creation tool". The idea is that you create your basic template layout (colors, page structure, sidebar, menu, etc.) and then you can publish it in a variety of different formats. So, for example, if you were using Joomla! and WordPress on your site, you could use that as a way to create a template that would work and look the same for both.  From what I can tell, it's primarily geared towards people don't have much in the way of artistic or design skills, couldn't use Photoshop if someone put a gun to their heads, but know to use Word (its interface is very Office 2007-ish with ribbons and such).

 

As far as being "cringeworthy", I guess that's a matter of personal taste. The vast majority of the stuff I see out there on template sites, both paid and free, tends range from hideous to outdated. You're always going to get better results if you have the skills and time to assemble what you need yourself.

Aye.

However, of course, software like this lowers the entry barrier for being a "web designer" so we'll continue to be told that "my 12 yearold nephew can make websites too you know" when we hand in our 4-figure invoices to clients.

W3bbo said:

mstefan said:

*snip*

Aye.

 

However, of course, software like this lowers the entry barrier for being a "web designer" so we'll continue to be told that "my 12 yearold nephew can make websites too you know" when we hand in our 4-figure invoices to clients.

If, as a web designer, you can't provide a tangible benefit over an automated tool or a technically-savvy twelve-year-old, perhaps you shouldn't be handing over 4-figure invoices to clients.

My prefered option, pay someone to do it.  I despise working with html/css these days.  The 'ajax' programming side of things fine, just not the mark-up.

PerfectPhase said:

My prefered option, pay someone to do it.  I despise working with html/css these days.  The 'ajax' programming side of things fine, just not the mark-up.

You can't do good AJAX without being intimate with the markup, they're one and the same.

W3bbo said:

PerfectPhase said:

*snip*

You can't do good AJAX without being intimate with the markup, they're one and the same.

Didn't say I couldn't do it, just that I don't like it.

Thanks everyone. I still have a lot of links to look over, this thread has been very constructive and helpful. Thanks  MasterPie for your experience.

ManipUni said:

Thanks everyone. I still have a lot of links to look over, this thread has been very constructive and helpful. Thanks  MasterPie for your experience.

"this thread has been very constructive and helpful."

Hmm, we need to work on that then.

Manip: you're an awful designer and your designs make Windows Vista look good. Your last website looked like it was churned out of FrontPage 2000 and makes web-browsers crash because they can't face showing the end-user how ugly the site is. You make Damien Hirst look like an inspired, original thinker. You're pathetic. Design sense is something you acquire over extended periods of time and not picked up in an evening by reading a forum thread. I'll bet you smell and/or are gay paedo too.

W3bbo said:

ManipUni said:

*snip*

"this thread has been very constructive and helpful."

 

Hmm, we need to work on that then.

 

Manip: you're an awful designer and your designs make Windows Vista look good. Your last website looked like it was churned out of FrontPage 2000 and makes web-browsers crash because they can't face showing the end-user how ugly the site is. You make Damien Hirst look like an inspired, original thinker. You're pathetic. Design sense is something you acquire over extended periods of time and not picked up in an evening by reading a forum thread. I'll bet you smell and/or are gay paedo too.

Do Manip's sites all end up listed at WebSitesThatSuck.com?

Herbie

PS: -1 to W3bbo for use of 'gay' as a pejorative.

PPS: change 'gay' to 'a paedo' and you're probably going to get away with it