It seems these days everyone and their mother are making websites, blogging, Twittering, Facebooking, etc. I subscribe to the school of thought that although anyone can make a website, not everyone can make a great website, nor knows how to. There are a lot of tools that allow anyone to create a site, yet not everyone has the design sense — visually or usably, to make a site work well.

not everyone has the design sense — visually or usably, to make a site work well.

There are a few things every web designer should know when creating a site that they want actual people to use. This applies for not just the layout, or navigation, but graphics as well, and it has to do with the number 3 in this installment of Website Design.

The number 3 is important — so important that we as humans rely on it without realizing it. The Christian Faith knows it as the Holy Trinity; artists, designers, photographers know it as the Rule of Thirds; there’s the old saying “Third time’s a charm”, and so on. The example site I’m going to use hit it on the number 3, but when they went to the 4th revision, things didn’t go so well, and I’ll discuss what happened, and what one should avoid whenever working on a web site.

So, things that are important in website design with the number 3:

1: Navigation: Nothing should take more than 3 clicks to get to.

2. Visuals: Stick to the Rule of Thirds. If you don’t know it, Google it.

3. Put your most important and new stuff on the home page, and always keep content fresh. After all, no one returns to the grocery store if they have old fruit, do they?

First, the County of San Diego website, circa 1997. The first website where they gave some thought to the design. The site  did win 4th place for Best of the Web. There are 3 types of viewers the site needed to address: The citizens of the county, the employees of the county, and the businesses who did business with the county, also known as external entities, such as school districts, police agencies, foster programs and so on. In other words, things should be easy to access from the home page for anyone.

and one of the department pages. Not as pretty, but still easy to use and to the point:

Not more than a few years later, the County of San Diego decided it was time for a redesign. Here it is in the second revision of the site, circa 2002. The changes site wide- gray background, shared header that tied all the department sites together, and all the departments used the same left hand navigation menu structure. Information on department pages could be found in 3 clicks or less. The biggest design flaw- the only branding was the header, footer, and left nav. Each department had their own look and feel inside their respective content areas, which I’ll show in the next site design.

Third version of the County site, 2004. It was a new world in the web, new technologies came out, and the County decided to leverage a cool product called Oracle Portal for their home page. This allowed sections of the home page to be dynamically updated, being that each portal on it was it’s own entity.

The portal was user friendly, had a sharp design, services the public users needed to get to were easy to find, and there was always something new to see on the home page. The site won 1st place in the Digital Counties Survey among counties of 500,000 or more.  The site featured links to important things any of the 3 user types needed to get to right away. Need to pay property taxes? I t was there on the home page. Need to get your financial reports for your agency? The login for that was on the home page. Need to get employment info? That was on the home page as well, as well as other very useful info like traffic and weather.  Notice also the Rule of Thirds in the overall design as well as the header.

As cool as that was, departments still got their own look and feel, so branding wasn’t a super top priority:

The site kept this design for quite a while, until 2007 rolled around. The County was ready to move to a new design, something cutting-edge, a fresh look and feel, something better, another award winner. At that time, they had been using Documentum, a document management system, for all County paperwork, records, etc. Documentum had a tool called Web Publisher, that allowed websites to be created without knowing any HTML, or so it advertised itself as such. Everything was templates, all sites would have the same look and feel department to department, branding would finally be in unity. The County would save huge amounts of money by not needing their IT contractor’s web designers or developers, they could get content up right away instead of in a few hours, and so on.

They decided to go with a 3rd party, and expert in Documentum, to help develop the new site. For the design, they decided to let one of their interns create the look and feel, working with content managers from the media department. Needless to say, none of them had any real web design experience. The team (my team) was pretty much left out in the cold on this one. Sure, we had to fix and redo everything the vendor created, but had to stay with the chosen look and feel. Our team of experts weren’t allowed to help on the design, whether visuals or usability. Things that were easy to find on the home page went missing, or were buried 4, 5, 6 clicks away. Also, the home page wouldn’t fit onto a user’s screen without scrolling (at 1920*1200). To see it live, go to http://www.sdcounty.ca.gov.   Try and find property tax payments on the home screen without doing a search.

About a month ago, the customer complained the site was ugly, not easy to use, things were hard to find, they were getting a lot of complaints. They want a new website.

So, what should they do? My suggestion is go back to the team that won them the awards. I do believe they should make the site branded so all departments keep the general look and feel. However, by thinking about the new tech toy instead of usability, they lost something in the process.

EVERYONE knows what a rocket looks like. But if you’re not a  rocket scientist,  you don’t know what makes a rocket truly work.

Earlier I mentioned not everyone has design sense, and basically that although there are plenty of tools to make a website, not everyone is a natural born web designer. If you take a group of folks, put them together in a room and tell them to design a new rocket, who by the way have zero rocket skills, you would end up with something that looks like a rocket — pointy nose, some fins, a round cylindrical shape, and the area where the flames shoot out the bottom. EVERYONE knows what a rocket looks like. But if you’re not a rocket scientist, you don’t know what makes a rocket truly work.

Same goes for websites. Sure, we all know what one looks like. But the average user has no idea what is under the hood, or what it takes to make a very user friendly site. There’s professional designers who know how to design, there’s user experience people who know how people operate and use web sites, there’s information architects who figure out the best way to get from point a to point b, there’s the programmers who do more than work with templates…they make the templates and the rest of the site work based on the designer’s vision, and there’s QA people who test the site end to end to make sure it’s bug free before it’s shown to a customer, or launched to the public.

So, things to remember: Use the Rule of Thirds, make stuff easy to get to in 3 clicks or less, keep content fresh, don’t assume everyone knows good web design, know your audience, and anything else you can think of to make people want to use your site again and again.

Finally, if all else fails, hire a professional. They know what they’re doing.