Why my design sucks? I can has better design skills please?

October 31, 2008 4:15 AM

Three part question about "professional-looking" websites.

1. What makes a website look "professional"? It's hard for me - I know it when I see it, but at this point it is something ineffable and I need people more technically competent and with more refined knowledge of aesthetics / layout / design to spell this out.

2. Why does my business website look unprofessional or amateur? I won't link, but it is the "Modern Institute" site recently posted into projects. I want it to say "these people are online professionals", and right now it doesn't.

3. Why does my own judgment seem to change so radically over time? When I first create a new design / layout / color scheme / whatever, I'm all "ooh! it looks so PROFESSIONAL!!! I am design KING!!!". Now when I look at it, weeks or months later I am embarrassed that this is the image my organisation is providing to the Internet, and I feel that it looks like it was made by a 6th grader just learning HTML.

I can't afford professional services, I need to just rely on my own work here... please, help me make this look better? And tips that will help me in the future?

I sincerely thank you in advance for your time in this regard.

posted by Meatbomb to computers & internet (32 answers total)

I'm a freelance web designer, so hopefully my comments will help at least a little. :)

1) To me, a professional-looking website design is one that is easy to navigate, has a clear mission (or at least an about page) and has a clean design, whether that design is simple or extravagant.

2) Frames. Overall, it just has a "dated" feel to it. This may not matter much to you, if you have content that drives people to look past that, but I am sure it will hinder you somewhat. The only real problem, outside of some SEO issues, is that your website doesn't do all that it can at this point. Today's design methods and flexibilities have come light years beyond the designs of late 90s. Essentially, your design just looks older, less polished.

3) It's part of the design growth process. Rome wasn't built in a day, and neither is one's design technique. The things I created two years ago appall me, and they aren't even bad; it is more a matter of I can do better than that today. Don't be hard on yourself. :) If you're truly interested in web design, you will learn as you go, and one day it will just sort of be natural, as will the evolution of it.

For design ideas, troll the web. Check out CSS Import, Unmatched Style and (more overall design-related) Smashing Magazine.
posted by metalheart at 4:25 AM on October 31, 2008

I don't know much about Moodle, but my husband is a teacher and has a site and in trying to help him I felt very hamstrung by the Moodle template and capabilities. Yours isn't any worse than the sites his colleagues have set up, but I think you can make it look great with just a few adjustments.

Like metalheart, I think it does have a dated look. A couple of specifics, which you can take with a grain of salt: I manage our web sites at my job, but I do get to pay people to come up with spiffy designs and navigation.

- Develop a more sophisticated text treatment for the name of your project and import it as a graphic, rather than having the name of your site/project in simple web text across the top. If nothing else, stack the title in two lines so it looks more... deliberate.
- Consider having a large color block across the top (solid or some kind of gradiant) and display the name of your site in white.
- I would suggest a stronger color contrast on your sidebar headers. On my screen, they come across as peach - very subdued, just a shade or two darker than your background, and a bit late-'80s. If you like your green and want to play off it, maybe you could google "web color palattes" to find some schemes that make the design stronger.
- Professional sites have subnavigations. In your case, you could have About Us, Contact, Courses, Links/Resources at minimum. Either run them across the top, under your title bar, or in the left sidebar.
- The text is too large on your Site News. Professional looking sites don't need to use 14-point type (or size 3 or 4) to get my attention.
- The meat of your site - the courses - are buried under the news. If I can't see what I need "above the fold," I'm probably not going to scroll down.

Hope this helps!
posted by Sweetie Darling at 4:43 AM on October 31, 2008 [1 favorite]

Yikes, it's palettes, not palattes. Coffee...
posted by Sweetie Darling at 4:45 AM on October 31, 2008

I assume you mean this site...

My first impression is that it looks very disorganized and unfocused. It's simple details that can make the difference. For instance, the "Site News" block is a shorter width than the "Available Courses" sections directly below. This creates a visual irregularity that gives things a "seat of the pants" feel. This effect is amplified by the use of a different color in the background. Doing so highlights the blocky layout, and it's irregularities.

Unfortunately, the green graphic that spans the width of the page (across the top) visually reinforces the irregularity, actually making it look as if the layout is more uneven than it really is.

Not that the green graphic is horrible. But it's really the only color on the page, and it is mortal combat with the beige background. You need to re-vamp the color design of the page. Beige never says "professional". Never.

Those are a couple of quick, obvious things I responded to. Type use needs addressed, too, but that's a bit more involved.
posted by Thorzdad at 4:47 AM on October 31, 2008

You're sort of asking for a quick graphic design degree in the form of an AskMe answer, so this is all going to be pretty scattershot, but there are a couple of simple things that jump out at me:

The layout grid is broken: the gutters between columns are all different sizes, and the block starting with "Available Courses" breaks the visual line you just finished establishing in the sections above it.

I don't understand what the background color and all the hairline borders are for. Remove all the borders on all the boxes, change the page background to the same white as the boxes (or change the boxes to the same tan, either way) and look at it again. Use empty space to define things, not a line, some space, and another line every time. Don't add lines and borders and colors that aren't needed.

Type size seems random, rather than following any natural rules about its importance to the reader. A headline is smaller and less dominant than the content beneath it. A list of items is set in a larger type than its heading. There are bold green words that are not links or headlines, but just seem to be... bold green words in the middle of sentences.

It has no real branding or identifying marks. MetaFilter is an all-text website, for example, but even MeFi has its little corner badge graphic and such rigid use of color and type that you never "forget" you're on MetaFilter.

All this is meant in good faith. I'm a trained designer who's no longer working as one, though I still do boss around a lot of other ones.

posted by rokusan at 4:47 AM on October 31, 2008

As for this part of your question: When I first create a new design / layout / color scheme / whatever, I'm all "ooh! it looks so PROFESSIONAL!!!"... [Later] when I look at it, weeks or months later I am embarrassed."

If it makes you feel better, I have been paid a great deal of money to design things over the years... I have the usual box of silly awards over there somewhere so I know I don't completely suck... and yet I have had the same relationship you describe with most of the work.

I could always do it better if I did it again. Or so my mind tells me. This might be because criticism, even the self kind, is inherently easier than creation. Or it might be because we humans value novelty too highly: familiarity breeds contempt. Or maybe it's something even more basic about the act of creation and the relationship of art and artist.

Whatever it is, I usually console myself with "was it received well at the time?" and "did it deliver effectively?"

If so, it was good, no matter what later-me thinks.
posted by rokusan at 4:55 AM on October 31, 2008 [1 favorite]

The purpose of your site should be front centre. If I navigate to your site, I should be able to answer the question "Why should I bother staying on this site" without clicking any more links or scrolling down. At the moment I can read everything and still not be sure what the site is actually for. YouTube demonstration videos! Of what? Who are David and Tom?

You have lots of elements that don't line up with each other. There are vertical lines in the title graphic, and vertical edges to the main content sections, top right drop down, "available courses" boxes, and five other things at the bottom. NONE of these lines are directly above one another. Draw out a grid for your page and then make sure everything fits in the grid - to the pixel. For example, why does the left edge of the top left box not line up with the left edge of the title graphic?

Your padding is also inconsistent. The padding between left and centre columns is different than between centre and right, different from between title graphic and top of columns, different from vertical padding between boxes on the RHS.
posted by emilyw at 4:58 AM on October 31, 2008

OOPS, SHIT!

Sorry guys, I realize projects linked to the wrong thing...

So, there are two related but different sites connected to our online presence:

1) the Moodle site - I am not so disappointed with that part, and I understand that much of what is wrong with that is the limitations of Moodle... and anyways, it is the most professional-looking section so far :)

2) my home-made, root site (just remove the /learning part) is the one I am mainly referring to. This was hand-baked from scratch in Dreamweaver.

Sorry for the confusion guys, and please do keep the tips coming - this is all very useful to me!
posted by Meatbomb at 5:33 AM on October 31, 2008

The purpose of your site should be front centre. If I navigate to your site, I should be able to answer the question "Why should I bother staying on this site" without clicking any more links or scrolling down. At the moment I can read everything and still not be sure what the site is actually for. YouTube demonstration videos! Of what? Who are David and Tom?

And I do appreciate all criticism, but I want to clarify this. Part of the problem was me sending you guys to the wrong subsite - the online learning / Moodle platform is for teachers that are already committed to working with us, who know why they are there, etc., so I think the "why do I want to be on this website" question isn't so so crucial here. People who end up here have been sent to join our courses, or have already seen an email explaining how to log-in, etc...

So yeah, like I just said the main thing I think sucks is the front portal (the website without the /learning). But all of these suggestions for the Moodle part are also great, and I will be working on incorporating many of these suggestions.
posted by Meatbomb at 5:45 AM on October 31, 2008

Designers can give you an idea of what to change better than I can.

However, I have to tell you that at least the first two photographs on your "Our Directors" page look like they were shot with a five year old cell phone camera and do not exactly bespeak professionalism. There are a few sub par ones on some of the other pages as well.

I also think that nearly all of your text is too big.

One design rule I remember from my newspaper days was Don't trap white space in the middle of the page! It came to mind as soon as I saw the (correct) site.
posted by imjustsaying at 6:00 AM on October 31, 2008

I'd vote for smaller type as well. One important thing: I didn't realize that the bottom row of text in the header was clickable until I was about to leave the site. The text links that are on the page clearly say "I'm a link" so that's what I focused on, thinking that the site was just a simple brochure site about the institute.

You might remove the text links from the home page and put "About" in the header graphic. The "About" page could be the current "About the Institute" and have further text links to the mission, etc. On the home page, maybe in the spot that currently has text links, you could highlight some of the info that's deeper in the site or otherwise give new visitors a sense of what's waiting for them inside.
posted by PatoPata at 6:33 AM on October 31, 2008

I also think that nearly all of your text is too big.

Definitely. I think changing the font size will do wonders. This site actually isn't too far from okay, but the fonts are all wrong. Additionally, the big header looks ridiculous. Try creating a header half of the size.

I think adding a subtle patterned background to the spaces behind your div boxes will help. Also, think of a color scheme--the bright red you're using for emphasis, while visually eye catching, looks a little cheap.
posted by PhoBWanKenobi at 6:38 AM on October 31, 2008

That home page is better than the one linked, mainly because it's less cluttered, but everything I bullet pointed above still applies, I think, other than the broken grid and hairline borders aren't here. The arbitrary type is now red on the home page is red instead of green, but still confusing. The first things I read on your site are "obtain funding for your participation" and "full scholarships". In what? Why? Huh?

Design isn't just colors and pretty graphics. It's also text and how you set it. On that, you're still shoving too much text at the viewer, all with near-the-same level of visual importance, which overloads the eye. People read websites in glances, so text needs chunking and hierarchy if you want to communicate effectively. The first things they notice need to be the most important things, and on in descending order. If they're not in that order, your design is not communicating what you actually want to communicate. It's as if someone walked up and started speaking to you with the words "And the third thing that matters is..."

For example, the "We are..." block is 213 words long but never mentions what you actually do. I'd much rather see a short list of four word "What we do" items, and see them a lot higher and more obviously on the page. The words "Promoting social integration through language learning and teaching" are tucked in the top right corner, and maybe you think that's serving this purpose, but I bet nobody even sees them up there in the dead zone... and even then that's pretty fluffy language. Don't be coy with me. What do you do, you damn website?

So edit hard until you have "We are..." and "We do..." region(s) that are short, brief, concise, and... short. ;)
posted by rokusan at 6:41 AM on October 31, 2008 [1 favorite]

I also think that nearly all of your text is too big.... Additionally, the big header looks ridiculous.

Thirded.
posted by rokusan at 6:41 AM on October 31, 2008 [1 favorite]

Well, the mainpage (without /learning) is much better than the /learning subpage. which has a dated, odd colour scheme that really hurts it, nevermind all the criticisms above.

As for the mainpage: it's looking relatively good. The first thing I notice is that the title looks a little link it is a low-quality jpg or that you used too much antialias on the text when you photoshopped the logo together. This is especially noticeable on the word "Institute," and even moreso on the Ts.

I agree with PatoPata about not knowing that those links were clickable.
posted by flibbertigibbet at 6:45 AM on October 31, 2008

I actually like the top level page. It isn't too far off from what I'd consider "professional". Warning: I'm not a designer, but I've been trying to bone up on it lately. The usual recommendation of The Non-Designer's Design Book applies here. It helps to see design as an iterative process, and a process of applying some well-defined rules, rather than some kind of mysterious thing.

I see a few things I would consider changing. First, the slogan, language, and "Home" links feel disconnected from the rest of the page. I would bring them back over toward the rest, and fit the entire page into a fixed width, having the right edge of the slogan line up with the right edge of the content.

Second, according to Robin Williams (the author, not the actor), you're being a wimp. Your color scheme lacks contrast. The logo area has high contrast, which is interesting and pleasing, but the color scheme of the page itself is rather bland. Choose colors with more contrast, and don't be a wimp. :)

Third, I think the typesetting could be improved a little. I'm not a big fan of the logo font, but that's a personal decision. However, another rule of the Non-Designer's book is to use alignment and proximity to convey relationships. Right now, the kerning on the logo (space between letters) is actually greater than the space between the logo and the navigation links. It ends up looking confusing. I would tighten up the kerning (space between letters) on the logo images, and give the navigation links a little space to breathe. If you want to go to the next level for the navigation links, give the impression that they are "tabs". You don't have to go all out, you can simply highlight the currently selected link with an underline or a different color than the rest. (And the top navigation links shouldn't change to a "visited" color after I've seen them, they should always be their primary color.)

There are a few things that give an impression of first-generation web design. FIrst, it appears you're using the default hyperlink color, with the default style of underlining it. When working on your color scheme (and not being a wimp), come up with a more fitting color for links in your text. Second, the white boxes of text could use some kind of visual treatment to set them off from the rest. You don't have to go with rounded corners or anything, because there's nothing wrong with the very angular/square design you've got. However, a slight hint of a shadow or thin line to separate them from the rest of the space might help. Finally, again, play with fonts a little more. The body of the page is a single font in a single size, and this includes titles and navigation links as well as blocks of text. To help the user focus his/her attention more quickly, use fonts to show the relative importance of the various text areas.
posted by knave at 6:47 AM on October 31, 2008

Developing an eye for design is something that (from personal experience) doesn't come at all easily. I've been through the same cycle of 'looks cool' / 'looks shit' with my own sites over the years; the fact that your older work looks so terrible now means you ARE developing an appreciation for what works in design.

What seems to be the case with really good web design is that something that looks clean, simple, elegant and effortless is in reality the sum of a mind-boggling array of tiny details. Designers I know will agonize over a single pixel's difference in line spacing or the size of a bullet point.

Whenever you're working on a design, you need to constantly step back and try to see it afresh with a critical eye. A lot of it is just letting your eyes wander over the design and seeing what 'trips them up'. Another approach of designers I know is that they'll be constantly asking others what they think; it can be incredibly useful to identify a few people whose judgement you trust, and run your designs past them as you work.
posted by le morte de bea arthur at 6:48 AM on October 31, 2008

I'm not a designer, but I've picked up a few things. One thing I've learned is that, as a non-designer, it's important to keep it simple. Strip away as much designy stuff as you can, and only add it back judiciously, and with a plan. A plan means things like: using a grid, making all your placed images the same size (or a few set sizes) with the same margins, being extremely cautious in the use of color, etc. Mind you, I'm speaking as a non-designer. I look at websites that manage to layer on graphical and informational complexity without overloading the reader, and I just sigh. I can't do that, so I work within my limitations.

Things that I think would make TMI look more spiffy: A better logo. A different typeface (Helvetica). Smaller type, especially for the headings. No white boxes in the middle of a colored background. A navbar that is more visually distinct, and perhaps with all links in boxes of equal width (this can be surprisingly time-consuming to get right). A fixed-width layout.

You're already using CSS, so work on a copy of your page, and start with a blank CSS file. Start adding rules and see how it goes.
posted by adamrice at 6:49 AM on October 31, 2008

where are the links?
posted by mary8nne at 7:07 AM on October 31, 2008

Professional means refined and polished. It's about starting with something and then continually improving it to a point where it works for the majority of people. You have the elements there but it hasn't been through that process.

* The font looks too big which is why we're doing so much scrolling.
* Design: The left column looks empty, the "Promoting ..." line at the top isn't balanced equally for me, and the language options are just sort of hanging out over there on the right, on their own. I'd put the whole thing in a 800 or 775px width table to solve the last two (some jiggering required for the language links if you do this).
* Information architecture: why does the TESOL link change the left column menu while the others don't? It's a nice feature and that'd make that left column more useful.
* Permanence: hard to define, but what I mean is why would I trust this site? Everyone establishes criteria for this but the broadest ones seem to be having a submenu in tiny print at the bottom with some legal links too and the refining process I mentioned above.

Don't Make Me Think by Steve Krug is a great book if you haven't picked it up yet. I hate the title though.

Lastly, regarding your 3rd point, this is the creative process. I'm a technical person by profession but I write a lot on my own time and see the same thing. I'll write something up and think it's great, then look at it a month later and see a ton of mistakes. I've learnt two things from this.

First, all those little thoughts you get when creating something, that usually go along the "Nah, they'll never notice that" lines... they will. Pay attention to them. Secondly, I embargo everything for a month before posting online. It gives me time to forget about the content so I *can* focus on the grammar and the like. Just put it aside when you're finished. Wait a night or two, then look at it. You won't be as invested in it then and can see the problems you missed while creating it.

At first the process is hard but the second phase educates you on what to look for during the first phase the next time around.

By the way, that's absolutely one of the better "unprofessional" sites I've seen. So I also think you're being too hard on yourself. :-)
posted by jwells at 7:12 AM on October 31, 2008

I just came across this link after reading this ask.me, so I figured I'd come back and post it:

Improving Yourself As A Designer
posted by backwards guitar at 7:46 AM on October 31, 2008

Things I would change if this were handed to me for a redesign:

Look-and-feel, which is not as bad as you think it is:
* Logo is way, way, way, WAY too big. Like about 400% too big. If you really want to hit the user with a big logo on the homepage, okay, but revert to a smaller version on subsequent pages.
* Tagline ("Promoting social integration" etc) wrap oddly on the right; really only looks good at certain page widths. Differing content width on each page causes this to jump around to different wrappings as the user goes from page to page.
* Lazy font choices throughout. Which is better than bad font choices by far, but the whole page is sans-serif, sans-serif, sans-serif, and not always the same sans-serif. Mix it up a little.
* If you're going for a clean, minimalist approach, that's great, but it means you really have to sweat the details, and be more careful about whitespace and aligning text; right now it just sort of looks like you're throwing elements in wherever there's room for them. The header area is particularly bad: the tagline doesn't align with the logo which doesn't align with the page title and crowds much too closely to the main navigation links below it. Total do-over.
* Lots of flat solid color -- ok, but a little dull. Consider for example putting a hairline border around the white text blocks that is just slightly darker than the color background around it; that will sharpen up the edges of the blocks without looking like a border. (Don't overdo this, or it'll start to compete with the text if it looks like a border, but a subtle edge or even a very faint dropshadow can make a huge difference.)
* "Website designed and maintained by" Remove this footer. It's unnecessary and unprofessional looking; just a few steps away from "Hit Ctrl-D to bookmark this page now!"
* I'm going to disagree with many people about the font size; I've done a lot of distance-learning websites and one of the most common user complaints was that they wanted the fonts larger -- a lot of myopic professors really appreciate being able to read the site without adjusting the font size. Smaller fonts may look more designer-y, but in this case usability trumps appearance.

Architecture and usability: this is where most of your problems are.

* The liquid layout is causing you a lot of problems in the header area; it falls apart if the user's window isn't set very wide. Part of this is because you're crowding too much into that space, but if you're going to do a liquid layout you need to build your HTML so that it can handle linewrapping in a too-small window.
* Don't put the page title on the right hand side of the page inside the header. It's invisible there, just reads as clutter.
* Too many main navigation links. "Home" doesn't need to be there; the logo should link to the homepage (with alt text for 508 people.) "Partners" should be part of "About Us". The difference between "Courses" and "eLearning" is unclear. TESOL appears to be another course. If you want to highlight a piece of content, do it in the homepage body text, not by messing around with the site navigation.
* This is really important: you made some very awkward compromises with that left-hand navbar. Sometimes it contains generic navigation to 'about us' etc; sometimes it contains subnavigation for the current main section of the site, and the generic navigation goes away; sometimes it just contains an address. If you're going to use this space for subnavigation, use it consistently; if some sections of the site don't have subnavigation, then that's a great candidate for merging in with some other main section. Seriously, this is the single biggest problem with the site right now; if you only fix one thing this should be it.
*Worse yet: if you dig even deeper into some of those subsections, the subnavigation goes away again and is replaced by the generic navigation. (Example: Teaching Tips -> What's Your Name?) Bad designer! No donut!
* When the user is on a subsidiary page, you need to give them some indication of where they are. If I'm sitting on that "What's your name?" page I can't see what section or subsection of the site i'm currently in. This can be a crumbtrail, or just highlight the current section in the nav and subnav (after you fix the disappearing subnav, of course.)
posted by ook at 7:55 AM on October 31, 2008

knave mentions Robin William's design principles from The Non-Designer's Design Book, and that would be an excellent place to start. In short, you need to redesign the CRAP into your page. This link goes to a PowerPoint presentation that rips off -- err, is inspired by William's book. And here's another one, which I think is slightly better.
posted by maudlin at 7:59 AM on October 31, 2008

(Note that the links I have don't include any stunning, professionally finished web sites, but just shows relatively simple material and gives you practice on recognizing the basics.)
posted by maudlin at 8:00 AM on October 31, 2008

Part of the problem is whether or not you've spent time learning design; not merely if something looks good, but how to get it to look good.

And like photography (rule of thirds, proper lighting), you have to make bad stuff too (some stuff good, some stuff bad.)

A book that seemed to help me, was the Non-Designer's Design Book. The C.R.A.P. principle (Contrast, Repetition, Alignment and Proximity) really helped me approach design with some process in mind (like, for example, how the rule of thirds helped me with photography.)
posted by filmgeek at 8:06 AM on October 31, 2008

One thing that I notice with your two different pages is that the top bar isn't the same. You want to use the same logo on every page for consistency. I'd echo the suggestions about making the logo smaller and everything that's been said here.

Another good resource for you to check out is the Web Style Guide by Patrick Lynch and Sarah Horton. It's a really good resource. You might also want to look at Jakob Nielsen's Alerbox, especially the posts Usability 101: Introduction to Usability and Top 10 Mistakes in Web Design.

You should really consider running a few cheap usability tests (two links), either now or later, to help you decide how to redesign the site. Like others have said, it's not all about colors and pictures and general slickness - it's about the information architecture of the site and how usable it is.
posted by k8lin at 9:00 AM on October 31, 2008

These are all excellent tips people, I really appreciate the massive reading list and practical ideas you have shared. I am not marking anything best yet, as I want to keep this honeypot open as long as possible.

I hope people won't mind when I mark almost all of these as "best answer"... the advice I am getting here is invaluable, and will form the basis of a major redesign of the site eventually.

Very very mega muchos gracias to all of you!
posted by Meatbomb at 9:58 AM on October 31, 2008

1. There is no one thing. A site looks professional when it looks well-designed, and there are a million little things that go into a good design.Well-balanced color schemes, good typography, intuitive navigation, cross-browser compatibility, appropriate (and restrained) use of images and Flash, and a billion other things—each one, done right, adds up to a professional-looking site.
2. Your site doesn't look that bad—but, yeah, it doesn't look that great.
   • I see that you're using a fluid-width layout, which takes away a lot of your control over proportion, and tends to make your site look like a utilitarian site for an open-source project. (I don't know why, but open source guys just love fluid-width layouts.) A matter of personal preference, perhaps, but I really don't think I've ever seen a fluid-width layout that looks professional.
   • The color and typography are a little haphazard. The beige/manila background reads as dated or Microsoft Word-ish to me. The large text at the top of the page is arbitrary, and I see red, blue, and green text mixed in with the black—too crowded and busy. Stick to a few basic colors, and consider setting a bigger line-height on your body text so it has room to breathe.
   • Learn to use em-dashes and en-dashes (and other glyphs such as ×, −, and ÷) appropriately. It can go a long way toward making your text copy look more professional. Same goes for many other aspects of typographical style: picking (and sticking to) a convention for rendering the titles of publications, for example (usually italics), dates, even little decisions like whether you're going to spell "email" as "email", "e-mail", or "E-mail". Basically, come up with a style guide (even if it's only a mental one) and stick to it.
   • There's not much in the way of visual interest on the page, especially at the top where it needs to grab the user immediately. A graphical logo (even a simple one) would be a big help here.
3. Probably because you are getting better. Your kindergarten crayon drawings would probably look like crap to you now, too.

Disclaimer: I'm by no means a great designer. I half-ass my way through it, too. But I've learned a lot by reading, reading, reading. A List Apart is an excellent resource—bridging, as it does, the technical world of code and standards, and the aesthetic world of design and typography.

Google "grid-based layouts" for some good reading.
posted by greenie2600 at 10:15 AM on October 31, 2008

Hey, you've inspired me to write an article on general design tips that I've had knocking around in my brain for a while. I'll post the link here once I've posted it to my blog.
posted by greenie2600 at 10:32 AM on October 31, 2008

Big, Important Thing #1: Font choice is very, very, very important. Don't just grab the first sans-serif in the drop-down. Pay for a good one if you have to. (And please don't stretch them digitally.)

Thing #2: The blue, underlined links are very 1993. Are you just using the default? CSS Style Sheets are easy to figure out, even for beginners. There's really no excuse for not using them.

#3: The black/white/pistachio doesn't really work. Instead of white, try going with a lighter version of the same green.

#4: It's not necessary to put the word "home" on the home page. It's usually pretty obvious to visitors that that's where they are.

#5: Don't fear photography.

Finally, there are thousands of sites for educational institutions out there, and they're all basically the same. Don't kill yourself trying to come up with something exciting and new; just look at those other sites and copy them.
posted by Sys Rq at 4:35 PM on November 1, 2008

This is "resolved" only insofar as I have read your comments carefully, followed links, and taken notes. I intend to post again here once the redesign is complete, but I imagine that won't be super soon...

Again, thanks all of you for your time and attention in this matter, this has been an extremely useful starting point for me.
posted by Meatbomb at 5:29 AM on November 5, 2008

Hello again, guys. Your advice here was really helpful, and because so many of you favorited this I thought it would be good to follow up and summarize the changes I have made, thanks to all of your useful comments.

It is still not at 100%, but the main grunt work is completed. I know I need more, and more professional, imagery on the site as it is still very text-dense. Still need to hunt and kill css / xhtml to make it strictly compliant. Still lots to do, but it looks like I want it to now, hooray!

I am sure in 6 months I will ask "why does this look so unprofessional?", but such is life...

So, here is a sample from the old style page design.
Here is the new design.

Things I did:

• Fixed width, centered
• much smaller logo, linked to front page
• logo in Helvetica and lovingly tweaked... Helvetica makes shit look 175% more professional if you ask me!
• tried to make the main menu a little more obvious, and used a css model (thanks Stu Nicholls) to try to make the menu a little more crisp and snazzy and professional looking
• the nested list menu forced me to rethink the logic of all the pages... still not completely sure it is done right, but it was a helpful exercise
• a much more concise home page, spelling out what the site is about more clearly than before
• added search, and grouped the search, menu, and language select tightly together in top right, to keep site navigation in one obvious place
• added a "breadcrumb" above the main content and below the header to further aid in navigation
• did away with the side menus, which were inconsistent across pages
• used border to give the main content area a very slight 3d / drop shadow effect
• made a more professional footer, with legal, copyright, etc., instead of the old hokey one

Again, thanks very much to all of you, it was your detailed feedback that allowed me to pull this off!
posted by Meatbomb at 1:33 PM on February 3, 2009