Jump to content

Cre8asiteforums Internet Marketing
and Conversion Web Design


Photo

What are the elements of professional looking webdesign?


  • Please log in to reply
22 replies to this topic

#1 Sorvoja

Sorvoja

    Gravity Master Member

  • Members
  • 172 posts

Posted 21 November 2005 - 10:14 AM

I am about to create a web site, and I hope to do so without hiring outside help. It is not that I don't like professional web designers, but I really want to do everything myself. I have created some sites in the past, but non of these has had the design as a priority.

I can spot a website with a pro look when I see it, but I fail to pinpoint exactly what can be done to make a average site look great. It would be nice if someone has a checklist or some pointers.

Thank you.


This is a question I normally would have use a socketpuppet for

#2 DianeV

DianeV

    Honored One Who Served Moderator Alumni

  • Hall Of Fame
  • 7216 posts

Posted 21 November 2005 - 10:52 AM

First of all, no sockpuppet needed. While it may have taken some nerve to ask it, it's the question that gets asked all the time, though not as directly as you've asked it. This is *not* a stupid or silly question; it's one of the big questions. BIG.

I'm guessing plenty of others will want to chime in, so I'll just touch on a few things.

(1) Harmonize your colors. Colors go together (or don't) like musical notes go together (or don't). Just as your design is a pattern, color is a pattern; it needs to hang together, and it does this through harmoniousness ... colors that "go together". That doesn't mean that some colors can't be darker or lighter, or more vivid or more drab; just that they need to go together.

Sometimes a good design just doesn't seem quite right. It may be that the colors need to be harmonized, and that once you do that, it'll all pop together.

I think many people try to "eyeball" the color scheme, but I've found that that can miss the mark. There are many color scheme programs out there; the one I like the most (have only tried a few) is colorschemer.com -- the square one (not the one with the round color palette). This, or tools like it, can spare you spending the rest of your life adjusting colors against each other, any of which may not be quite "right". <grin>

(2) Design for your market. This gets assumed a lot of times but not really addressed. Bottom line: what works for one topic may not seem at all right for another (e.g., music website versus bank website). Have some idea of the sensibilities of your target audience (and that that target audience probably is not "everyone") and address them "in their own language", as it were. I could go on about this, but I think it's best to leave the thinking/designing part to the site designer.

(3) Styles of web design. There have been what, to me, have been distinct styles of design on the Web. Mid- to late-90's, it was the deep, vivid colors of realistically-hand-created images (the best of which may have been Moira's Jewels which, unfortunately, was closed down). Then, following what I surmised to be the influx of big ad agencies to the Web, the bar was raised in quite another way: suddenly we were competing with the beauty (and lengthy history) of print design ... and print designers often have a very keen eye for subtleties that can easily be overlooked. Fortunately for us, they also generally had no concept of ... well, download time. Nor, generally, that the Web doesn't function like paper. Today ... well, things are progressing. But everyone always wants to get better, no?

In my view, the way to improve is to start where you start, and then better it.

#3 earlpearl

earlpearl

    Hall of Fame

  • 1000 Post Club
  • 1340 posts

Posted 21 November 2005 - 10:52 AM

I look forward to this answer. I feel a bit better Sorvoja asked. I'm both tech and design ignorant. I run a business.

The one thing I've learned is that experts seem to have their expertise in very narrow fields. It is good to share experience and help whether as a sockpuppet or not.

Dave

#4 alloemseo

alloemseo

    Ready To Fly Member

  • Members
  • 11 posts

Posted 21 November 2005 - 11:16 AM

ive also found that setting up the functionality of a site to be similar to an already established site in your field can be helpful. that way when users come to your site there's kind of a sense of familiarity with your site, even if its their first time there.

Example:
If your site sells products maybe a similar design to amazon.com

layout wise, this has worked well for me, taking something that works and is familiar to users and adding your own touch to it

id also like to reiterate what DianeV said about colors. you could have the best design/layout in the world but if the colors are not complimentary the site could still look like crap

#5 DianeV

DianeV

    Honored One Who Served Moderator Alumni

  • Hall Of Fame
  • 7216 posts

Posted 21 November 2005 - 11:21 AM

I agree. Not going too far away from the established "reality" of the audience is usually helpful (unless the point is to design something radically different for the sake of being different alone). How far different can you get? Well, to the point where the audience can't figure out what it is or how it works. So, unless you're going for some kind of avant-whatever, stop somewhere before that. <grin>

BTW, alloemseo, love your avatar.

#6 Wit

Wit

    Sonic Boom Member

  • 1000 Post Club
  • 1599 posts

Posted 21 November 2005 - 12:07 PM

About the colours... I've found that anything but white for a background colour often (!) kills a professional look. Unless the font is really small and crisp.

Pix with "jaggies" are also a major put-off. They just scream "geocities" (sorry, no offense intended :))

Just an observation. It's not a 100% correct rule.

#7 sanity

sanity

    Honored One Who Served Moderator Alumni

  • Hall Of Fame
  • 6889 posts

Posted 21 November 2005 - 07:00 PM

White space and crisp, clear images certainly go along way to making a site look professional.

Colour schemes, as Diane pointed out, are also really important - I too am a huge fan of ColorSchemer. A member also posted a link to a site that showed colour trends which was really useful but I just can't find the link. I'll keep digging.

Other considerations include a professional looking logo, consistent clear navgation and relevant calls to action.

Designing for your audience is really important. For example I love the use of white space in a design but if I was designing for the Harley Davidson type prospect I'd opt for something more suitable for them.

Finally as alloemseo suggested looking at other leading sites in your industry is always a good idea.

#8 sanity

sanity

    Honored One Who Served Moderator Alumni

  • Hall Of Fame
  • 6889 posts

Posted 21 November 2005 - 07:01 PM

Oh, and avoid a flaming logo! :)

#9 AbleReach

AbleReach

    Peacekeeper Administrator

  • Admin - Top Level
  • 6457 posts

Posted 21 November 2005 - 07:16 PM

Predictable, easily understood navigation goes a long way for me.
If main navigation links move around from page to page, I do not expect the company behind the site to be professional.

I'd also add that less is more, except for where clear copy is concerned.
Leave white space between clusters of information.
Use words specific to your topic.
Spellcheck and grammarcheck.
If you serve a specific area, say so. For example, don't be one of those sites that say "we're Acme products, the best for all your steam cleening needs," without substantiating "best" (voted best by xyz,) saying what you "cleen," where you do it, etc.

Elizabeth

p.s.
ditto re flaming logo
also - be careful with clip art - you may not even need it.

#10 brandall

brandall

    Ready To Fly Member

  • Members
  • 35 posts

Posted 22 November 2005 - 01:50 AM

Everything mentioned above is a good idea. But ultimately, what makes a "professional" design are not it's elements, but its whole, if you will.

Great web design combines well matched and pleasing color schemes, with intuitive information architecture, a layout that flows and naturally and drives the eye to where it should go next and most importly, that has some type of theme or consistent structure that holds everything together.

In my experince, it is not something that a single person picks up the skills to create quickly, but all of the tips above are a very good start. I'd also recommend reading a good beginner/intermediate web usability book like "don't make me think" and study some sites that you think are well designed. See if you can identify what about them really works. All the best designers I've worked with pull a great deal from others.

#11 randfish

randfish

    Hall of Fame

  • Members
  • 937 posts

Posted 22 November 2005 - 02:11 AM

Bruce - good call. The Krug book is my favorite, too.

I still feel like we haven't gotten to the heart of the matter. Maybe it's that professional vs. unprofessional design is so hard to describe. It's like pornography - you know it when you see it.

Does anyone have any examples of a site that points out good design vs. bad - that would make for a great resource link to point people to as I try to explain this concept at least twice a week to would-be webmasters who send me emails.

#12 jrothra

jrothra

    Ready To Fly Member

  • Members
  • 41 posts

Posted 22 November 2005 - 02:32 AM

I did a G search for "guitar stores" (I play guitar) and these were the top four results:

1. http://www.guitarcenter.com/
On Nov. 21, the largest image and main focus of the site for this guitar store was a keyboard. Hmmm... I play guitar and I'm looking for a good guitar store... so I check out this one and see keyboards? Not what I want. Also, the site for me is information overload. Too much cluttered info on one site.

2. http://www.guitarcenter.com/locations/
Just a subdirectory of #1.

3. http://www.rockcityn...itarstores.html
This looks like a cheaply done basic site that is hard to read, sloppy, and... well... you can tell it's NOT professional.

4. http://www.virtualgu...re.bizland.com/
Same analysis as #3

Professinally done but not well designed: http://www.mguitar.com/
Here's a site I think is designed by a professional, but I don't like the 'intro' page idea unless you have various countries (see #1 -- Ibanez -- below). Intro pages seem cheap and old fashioned in my view. Just give me some content, not a pick with "click here to enter the 'real' site."

NOW... for some sites I think are high quality sites that sell guitars:
1. http://www.ibanez.com/
I chose my country of USA to see this site: http://www.ibanez.com/splash/

2. http://www.takamine.com/
3. http://www.fender.com/

#13 travis

travis

    Sonic Boom Member

  • 1000 Post Club
  • 1532 posts

Posted 22 November 2005 - 03:54 AM

White space was the first thing that sprang to mind.

But then I looked at the Fender website, and now its black space. Either way, the site is clean and crisp. No confusion about what they do.

Same with Gibson. Here is my guitar -> http://www.gibson.com/Products/

(you know you are in the big time when you have a 'Family of Brands' )

Good quality photography can really help as we can see in the example above. They sell nice guitars with gold plated string tuners and Mother-of-Pearl inlays. Its a guitar most customers will drool over anyway, so the photography really helps inspire the customer.

As far as layout goes, people are starting to get accustomed to

(a) the logo being a link to the home page.
(B) every section and image on the home page being a button.
© easy to find contact details

Its not just the look though. Primarily, you need to implement the business plan of the company properly online and making things real simple for the target audience to achieve their objectives.

These are actually two great looking websites that did not quite follow through with the real business objective - To get the person in Perth to ring the dealer in Perth.

Fender.com

Got through to www.fender.com.au , but it was much lower quality. It is a good example of why the company should brand its website all the same across the globe. Its a bit of a letdown after visiting the global site. Its an example of why consistent branding is so important.

You have the customer on the end of the fishing hook, and the same logo and feel should have followed my online journey all the way from the global site to Perth.

Gibson.com

Gibson actually did not have an Australian website at all.

#14 Adrian

Adrian

    Honored One Who Served Moderator Alumni

  • Invited Users For Labs
  • 5779 posts

Posted 22 November 2005 - 05:08 AM

I think a professional design is as much about knowing what to leave out, as what to put in.
One of the hallmarks of amateur 'geocities' style design is the number of flashy/movey things included on a site for the 'ooh cool, look at that' factor. When actually it's only remotely cool the first time anyone see's it. After that it can be an annoyance.

Not to say a site shouldn't be fun and must be full of corporate blue, that comes down to your target audience and what the site is trying to do.

If you can properly justify the elements on a page, then they probably deserve to be there. If you struggle to justify it, maybe you need to consider if it should be there?

#15 sanity

sanity

    Honored One Who Served Moderator Alumni

  • Hall Of Fame
  • 6889 posts

Posted 22 November 2005 - 05:18 PM

Primarily, you need to implement the business plan of the company properly online and making things real simple for the target audience to achieve their objectives.

Bingo Travis. Monkey press button, Monkey get banaana.

Professional includes ensuring the prospect achieves their desired aims with a minimum of fuss.

#16 AbleReach

AbleReach

    Peacekeeper Administrator

  • Admin - Top Level
  • 6457 posts

Posted 22 November 2005 - 08:20 PM

How could web design be flow charted?

Business plan -->
usability & SEO (as a pair) -->
graphic feel and presentation of USP (as a pair) -->
user testing and client check-in -->

Or you may end up starting with
Business customer's needs/interests -->
something tastefully viral

Where is a design most likely to skip the skids and miss professionalism?

Elizabeth

#17 rossio

rossio

    Gravity Master Member

  • Members
  • 146 posts

Posted 22 November 2005 - 11:09 PM

seth godins 'big red fez' is a pretty fun and useful read for this. well its probably more usability and design - but it reminds you to put customer at #1 along the whole design process.

#18 cre8pc

cre8pc

    Dream Catcher Forums Founder

  • Admin - Top Level
  • 13362 posts

Posted 23 November 2005 - 01:59 PM

This article, with a list of design principles, might be applied to web design or at least provide some food for thought/inspiration:

The Principles of Universal Design

For example, here's one:

PRINCIPLE TWO: Flexibility in Use

The design accommodates a wide range of individual preferences and abilities.



#19 bragadocchio

bragadocchio

    Honored One Who Served Moderator Alumni

  • Hall Of Fame
  • 15634 posts

Posted 23 November 2005 - 02:36 PM

There's an excellent set of tutorials here from one of our members:

http://www.webdesignfromscratch.com/

#20 loki

loki

    Gravity Master Member

  • Members
  • 156 posts

Posted 23 November 2005 - 03:40 PM

usability.

#21 brandall

brandall

    Ready To Fly Member

  • Members
  • 35 posts

Posted 24 November 2005 - 10:13 AM

Unfortunately, even a great deal of "professional" web design drop the ball when it comes to usability.

A great web site accomplishes:
- Meeting the business objectives by appealing to the user's motivations
- Meeting the user's needs, expectations

A great web site has consistent messaging, a consistent look and feel and consistent navigation, reenforced throughout the site.

#22 Black_Knight

Black_Knight

    Honored One Who Served Moderator Alumni

  • Hall Of Fame
  • 9339 posts

Posted 24 November 2005 - 02:51 PM

Actually, I think Loki has an excellent point - the best in practical/professional design is something that is usable, with just enough style to suit the taste of the audience.

What is good design?

Look at a knife and fork. Chances are that the fork you usually eat with has 4 tines. Fewer tines mean the fork applies more pressure to 'spear' things, but also provides less traction for the thing to stay impaled. So a traditional carving fork, which you want to easily withdraw has 2 tines. Some forks have handles that show immense crafting detail, but by and large the 'business end' of the fork is pure usability and function.

Knives vary a lot more. Blade shape and length, serations, and that's still just 'general purpose' table knives. There's a lot of thought and time has gone into the development of cutlery to make it comfortable in the hand and easy to use. That is what good design is all about.

The real way to judge design isn't in how it looks, but in how it performs its function. Something pretty but unusable may end up as an ornament, but it is a failure of design.

#23 netessentials

netessentials

    Ready To Fly Member

  • Members
  • 21 posts

Posted 30 November 2005 - 06:14 PM

Don't go too far with the depth of the design. More is not better. Clear, and pleasing to the eye. Get to the point.... not too much motion or flashy stuff. That's for kids. Make it for adults in mind.



RSS Feed

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users