10 Things Every Web Designer Just Starting Out Should Know

10 Things Every Web Designer Just Starting Out Should Know

There are many aspects of creating a website design. Web designers often have to play multiple roles and be very knowledgeable about building effective and usable site layouts.

Most of the lessons you’ll learn in web design comes from work experience; learning is an iterative process and there is no better way to gain knowledge than to make mistakes (and then and learning from them).

In this article, we discuss 10 essential and general tips that every novice web designer should know.

1. Optimize Web Graphics for Better Page Load Times

Learn how to optimize your web graphics by selecting the proper format and making sure that it’s as small as it can possibly be. Even though people are advancing to broadband connections, there are still quite a few who use dial-up internet connections. Additionally, with the emergence of mobile device technologies that don’t necessarily have broadband-like speeds, having slow page load times due to image file sizes can turn users off.

Here a general rule of thumbs for picking the right file format: images that have solid colors are best saved as PNGs and GIFs, while images with continuous colors (such as photographs) are best saved as JPGs.

There are plenty of tools available at your disposal that will help you further optimize your images and lower their file sizes, check out this list of tools for optimizing your images.

By limiting the number of images you use to the bare minimum, being smart about using images, and reducing file sizes as best as you can, you will significantly cut down page response times of  a web page and improve your web page performance.

2. Keep it Clean and Simple

A good web design is not just one that looks visually appealing, but also one that is user-friendly. A clean and simple web design typically ends up being a high-usability web design that is not confusing to interact with.

By having too many site features and components on a page, you risk the chance of distracting website viewers from the purpose of the website. Make sure each page element has a purpose and ask yourself the following questions:

• Does the design really need this?
• What does this element do and how does it help the user?
• If I remove this element all of a sudden, will most people want it back?
• How does this element tie into the goal, message, and purpose of the site?

Additionally, though it may be super awesome to come up with a new concept or interface design pattern for your website, make sure that the design is still accessible and intuitive to your users. People are accustomed to common interaction patterns, site features, and web interfaces – and if your design is truly unique, make sure it’s not too obscure and puzzling. Be creative, but also keep it simple.

3. Navigation is the Most Important Thing You Will Design

The most essential site feature is the website’s navigation — without it, users are stuck whatever page they happen to land on. With that obvious fact out of the way, we’ll talk about some important points to consider when constructing a navigation scheme.

First, it’s very important to put enough time and a lot of planning on a site’s navigation structure. This is common sense, but it’s still surprising how many web designs take site navigation for granted.

Placement, style, technology (will it use JavaScript or just CSS?), usability, and web accessibility are just some of the things you need to consider when creating the navigation design.

Your navigation design should work without CSS because of text-based browsers. Poke fun of text browsers all you want, but they are still prevalent in many mobile devices. Perhaps more importantly, navigation that works with CSS disabled is accessible (99.99% of the time) via screen readers.

Navigation should be accessible and usable without the need for client-side technologies such as JavaScript or Flash, which users may not have enabled or installed for various reasons such as security or company policy.

It is imperative that you have a good navigation system in place that is located at a highly-visible location. A good navigation is detectable as soon as the web page loads without having to scroll down the web page. This is where keeping it clean and simple plays a major role: a complex and unconventional design can lead to user confusion.

Users must never wonder, even for a split second, ‘Where is the site navigation?’

For sites organized in a hierarchical, multi-level manner, make sure that it is easy to navigate from between parent and child web pages. In addition, it should be easy to reach top-level pages (such as the site’s front page) from any webpage.

The main goal of your site navigation is to allow users to get to their desired content with as few actions and with as little effort on their behalf as possible.

4. Use Fonts Wisely and Methodically

Though there are thousands of fonts out there, you can really only use a handful (at least until CSS3 is fully supported by major browsers). Make it a point to stick to web-safe fonts. If you don’t like web-safe fonts, consider a progressively-enhanced web design that leverages sIFR or Cufon.

Keep font usage consistent. Make sure that headings are visually-different from paragraph text. Use white space, tweak line-height, font-size, and letter-spacing properties to make content pleasant to read and effortlessly scannable.

Perhaps one of the things that web designers often get wrong is font-sizes. Because we want to fit as much text as we can in a web page, we sometimes set font sizes to uncomfortably small sizes. Try to keep font sizes at and above 12px if possible, especially for paragraph text. While many people face no difficulty reading small text sizes, think about older users and persons with low-vision and other types of vision impairment.

5. Understand Color Accessibility

After talking about fonts, we also need to point out the importance of using the right colors.

You  need to consider color contrast of background and foreground colors for readability and for users with low-vision. For instance, black text on white background has a high-contrast, while orange text on red background will make you strain your eyes.

Also, use colors that are accessible to users with particular forms of color-blindness (check out a tool called Vischeck that will help you test for certain types of color-blindness).

Some color combinations work well only when the color is used as a foreground color instead of a background color. Take for example, dark blue text on a pink background versus but pink text on blue background, same colors but different levels of readability and reading comfort. It is important not only to get a good color combination but also to apply it to the right elements on the page.

6. You Need to Know How to Write Code Yourself

With various WYSIWYG editors flooding the market, it has become as simple as 1-2-3 to design a site. However, most of these editors insert unnecessarily code junk, making your HTML structure poorly designed, harder to maintain and update, and causing your file sizes to bloat.

By writing the code yourself, you come out with clean, crisp, and terse code that’s a pleasure to read and maintain; code that you can be proud to call your own.

Knowing how to use a WYSIWYG or an IDE with a visual preview does not excuse you from learning HTML and CSS. You have to know what’s going on in order to create effective, semantic, and highly-optimized web designs.

7. Don’t Forget Search Engine Optimization

A good designer should always remember to keep the basics of SEO in mind when designing a site. For example, structuring web content so that important text are represented as headings (i.e. page title and logo). This is where learning how to code properly comes in handy. Knowing correct, semantic, and standards-based HTML/CSS – you will quickly realize that divs are better than tables for web layouts not only for accurate representation of site content, but also for search engine rankings; you will also know that CSS background text image replacement is a good idea.

8. Understand that People are Impatient

People on an average spend only a few seconds before deciding whether they want to read more or navigate away to another site. Therefore, you as a web designer have to device a way for encouraging users to choose the former option within those precious seconds.

Know that not many visitors will scroll down to view the entire contents of the page if what they see at the top does not interest them. Remember to keep your important elements on the top where they are easily visible, but also do not overcrowd the top half of the page which can intimidate users and turn them off from reading further down the page. Consider the top half of a web design a selling point: be a salesman, make people buy into the notion that they want to see what else is on your site.

9. Learn About (and Be Aware of) Browser Quirks

One of the things you must know as a web designer is that your work operates in a finicky and unpredictable environment: web browsers. It’s not enough that your designs work on a few web browsers, they need to work in as many browsing situations as you can possibly afford. Before production – test your prototypes using tools like Browsershots.

10. Make Designs that are Flexible and Maintainable

A good web designer makes sure that the site can easily be updated or modified in the future. Designing websites that are malleable and easy to maintain is a sign of a great web designer. Make your work as modular as possible by separating style from structure.

Know that our industry is dynamic and still young – things change in a very short amount of time. Keeping this thought in mind will promote the creation of flexible web designs.

(Via Six Revisions.)

(Via Ian Scott.)

Does Google Have A Golden Rule?

As a full-time webmaster and site owner, figuring out just what Google wants has been the most challenging aspect of running an online business. For many webmasters Google is the eight ton elephant in the room and you only have two options: upset the elephant and get trampled or quickly find out what it likes to consume and try to feed it.

In order to keep Google fed, webmasters have to jump through more than one set of hoops. When it comes to getting top rankings in Google’s Index or SERPs, there are 200 of these hoops or ranking factors. And if you want to play in Google’s ballpark, you have to try and master the majority of them.

For years, frustrated webmasters have been guessing and searching for these ranking factors. Asking what does Google want? How does Google rank pages and keywords? How does Google want you to build your site?

Ten years ago it wouldn’t have mattered what Google thought of your site for it wasn’t even in the picture, but now when it comes to online search, Google is king of the hill. And as we all know, kings get whatever they want.

Besides, any webmaster worth his salt, knows Google is what counts when it comes to organic traffic – you can achieve #1 spots for a keyword in all three top search engines (Yahoo and MSN being the other two light-weight contenders) but Google will simply deliver the most traffic to your site.

Google doesn’t as yet have a monopoly on web search, but it’s getting close to 70% of U.S. traffic and in some countries it’s up over 90%. But it’s not only the search numbers which makes Google king – it is the prestige and power of the Google brand name. Google has truly permeated into popular culture and the public psyche like no other brand name in history.

Google brings respect and trust into the equation. Web users respect and trust Google to give them a quality answer to their question. That’s why it was rather ironic, that for years webmasters have been asking Google about their ranking system, their algorithm, their practices… for years Google remained for the most part silent. This was mainly to keep at bay, those who would like to “game” the system in order to get high rankings within Google.

Until now that is, maybe it’s just me but doesn’t it appear that Google is suddenly opening up about its whole ranking procedures and what they expect from webmasters. Maybe the answers have always been there, we just couldn’t find them. However, a more likely scenario is that someone high up within Google made the decision to be more transparent when it comes to webmasters and how much they would tell them.

In recent Webmaster live chats, Googlers Matt Cutts, Maile Ohye, among others… have been honestly answering questions about what Google requires webmasters to do regarding their sites. These are Q&A sessions dealing with the “burning questions” webmasters have had for years concerning Google and what Google wants. Do a search in Google for “Google Webmaster Help | Google Groups” if you want to find these sessions.

Since I run several modest sites on webmaster tools and Internet marketing I am approached by more than a few people who want me to help them build their online site or business. One of the major issues that always comes up somewhere in the process (usually phrased in different ways) is this question:

What does Google want? What does Google expect of my site? How do I get ranked high in Google?

Mainly because my chief goal is to help these webmasters understand Google better in order to build a profitable site; I have struggled and puzzled over this question for years.

What is Google’s Golden Rule?

Many experts believe it is related to relevancy – the key to getting high rankings is how relevant your content is to the question being asked? Maybe so, but in order to explain it to a would-be webmaster, I had to find the words that would most appropriately sum up Google’s prime directive?

After you go through all the SEO checkmarks, take into account the quality and uniqueness of your content, factor in the credibility and authority of your site and backlinks, and factor in the relevancy issue… this was the simple Google Golden Rule I came up with:

“Always think of your visitor first when creating any content for your site.”

This may or may not be what Google is expecting but all indications are pointing in the direction of the “visitor’s experience” and how good you or your content make that experience? Google is serving up a product, it wants the user of their product to be happy with the results. If they’re happy, Google is happy. And if everyone’s happy then the kingdom grows.

Still anything as simple and as complicated as getting top rankings in Google can’t be boiled down to a single catch phrase. You must do your homework and a good starting point would be to thoroughly read Google’s Webmaster Guidelines. Studying and listening to the latest Google webmaster chats may also prove beneficial and helpful.

However, there are still those 200 hoops you have to jump through and you must be extremely careful of how you build your site if you’re trying to please Google. Listen when the king speaks. Observe his rules. Be on your guard, and it helps to become just a little paranoid. And always, always remember, an elephant never forgets.

By Titus Hoskins