Site Design - More of a clean -professional look

diek_nf
diek_nf used Ask the Experts™
on
Hi,
I am helping a friend to revamp her site. The site, http://www.back-on-track-physio.com. I am not looking at anything high speed, just more a clean professional look. I need some guidance. I am not certain who created it, but the main issues:
it was not designed to be viewed in 15 inch or less;
the buttons on the left dominate the site, taking away from the content, are clunky;
the frames make the site look clunky; and
the blue is too loud, and doesn't give the polished professional look.

The banner on top, is something I have to work with. It's part of the company logo. I would like to work it into a page that is toned down, color wise. Maybe a pastel blue. I am pretty certain I that I am not going to use frames, and the buttons are going to the trash can.

I realize that the answer may be not as complicated, but whoever decides to help is going to have to put effort in. If more than one person really helps I will gladly increase the points and split the points. I am relearning HTML so please be patient. Thanks,
d


Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Ryan ChongSoftware Team Lead

Commented:
Here is a great site that may give you some ideas and inspirations on how to design a professional and creative website:

http://www.cwd.dk/

Author

Commented:
Ryan,
That is a great start. Did you check out the site I want to fix, what do you think?
d
Ryan ChongSoftware Team Lead
Commented:
From my point of view (no offence), here are my comments:

1. The overall design is not attract me (sorry).
2. The "lens flare" effect on the top header is not good for website display, some web designer will try to avoid to use that effect.
3. For each topics, you can try apply a small image somewhere to represent that topic and make your page feel more interesting and attractive.
3. The footer text is just too small for me to read, despite it's not so important to emphaze it, maybe you can change it with a more soften color.
4. Try make the color of your Topic Title (black) different from its content, you may also use a different font for the Topic Title.
5. Try make the site more professional and interactive by adding CSS and if possible, change the header to Flash version.
6. Personally I like pages with rounder corners borders (just want shown in http://www.cwd.dk/), you may apply that if necessary.

Again, no offence just my personal point of view, hope this helps a bit.
Amazon Web Services

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

This is one of the websites that i'm currently designing...still not completed, but is this the sort of thing that you want to do?

Let me know and i'll give you some guidence.

http://www.skycosta.com/    ...See the first page as a guidence. I'll let you know what to use and learn to archieve these results.



Commented:
This is a question of opinion so here's mine.

A professional design is about clarity and ease of use.

Everything should be crisp in its design so the things like the navigation you have should definitely change.  It's not that they aren't clear in what they say, size takes care of that, it's just the blury effect looks FrontPage like.  I believe that anything that is text should be text and not images unless you are specifically looking for a special font that others won't have and the different font adds value to the site or corporate brand.  A designers whim is rarely added value.  I also think that solid colours like your blue and white are not optimal.  Solid colours can be avoided or used easily enough with well designed borders / dividing lines.

I'm about as pro-CSS as you can get.  Absolutely definitely use CSS.  You can have all sorts of effects and styles with CSS.  Done right you don't need images to achieve professional looking effects.

I'm not a big fan of Flash unless it has major value on the site.  Flash to create non-interactive animated GIF like movie style picture thingies is not huge value, just huge download.  Unless it is extremely cool and never seen before Flash has no value as navigation either.

Always optimise your images.  You may not care about download size but why waste it on the unneccessary!  The quality drop, when done right, is minimal and usually only noticeable by the pedantic designer.

Definitely lose the frames.  On this site it is not needed.  There are ways to devlop that allow for duplicated navigation throughout a site without just leving it as an always tehre frame.  frames make it very difficult to bookmark specific pages within a site.  teh bookmark will usually only be the frameset and therefore only ever your home page.  Very annoying.

Colour choices are important.  Make sure they are colours that are easily read.  The blue and teh green of the logo should be very easy to work with so that you have a consistant look and feel throughout and sticking with the corporate colours.  With the right background colour you could easily apply the colours to different headings and content to help distiguish what's what.

Finally, develop to the standards and check your result on multiple browsers (primarily IE and Firefox).  Correct standards code, reasonable CSS, a little thought into what you are doing, and checking cross-browser support can make the lamest of sites turn into a very professional result.  And especially with correct standards and decent CSS, size won't matter.  It should be able to be flexible no matter the screen size or users vision quality.

Author

Commented:
Roger so far.

I am going hold off on anything high speed/flashy for now. I am doing this as a favour and I am just looking for a simple yet sharp page. I am going to have to track down an example. Like anything my friend has the last say on the design

Ryan,
I am not taking any offence because someone else built this site, and I agree it is essentially u g l y. I did not design it.
Commented:
I see your point. I notice you can't get back to the home page! Everyones comments have been good.

Design is frequently in the eye of the beholder and fittness for intended purpose. For me less is more, but most popular sites use a more is good philosophy (check out Yahoo or Netscape).

Sit down with your friend and findout
*  What the puropse of the site is: advertising, customer relations, lending credibility to her practice.
*  What are the reasons a customer would go to the site?
*  What questions to they want answered?
    I'll bet phone number, hours, location, "do you do this", and payment arrangments like insurance.
*  Then list the 10 most import things the site needs to convey including tone.  
*  What are her favorite colors and what colors are common in the industry.
    Personally, I would find earth tones more appealling.
Based on the answers to these questions, you can come up with better content and that will lead to your design

Take a look at

A couple of sites to look at for their design
http://www.ender-design.com/rg/index.html
http://www.hooverwebdesign.com/website/templates/home671

to test color ideas
http://wellstyled.com/tools/colorscheme2/index-en.html

Author

Commented:
Just a side note, this exchange may take a few days. I am doing this in my spare time, I work full time.

We are definitly going in the right direction.

Thanks.
d
Ryan ChongSoftware Team Lead

Commented:
; )
Some small, subtle things that lots of people miss:
1. Antialiasing (fuzzing the edges of fonts) doesn't look good on the web. If you use CSS-based buttons, you don't have to worry about this, but don't antialias the font. Right now everything on the front page is antialiased.

2. Use a sans-serif font like Verdana or Arial, not Times New Roman.

3. Sharper-focused photos, if you can get them. Also ones that complement the color-scheme help.

4. Keep It Simple, Stupid! Don't complicate the design with needless gadgets if they're not needed.

Author

Commented:
I appreciate the help. I hope no one is annoyed at the point spread. Thanks,
d

Commented:
Thanks for the grade! There's no problem with the point spread; it's all about helping and learning.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial