What you will learn:
- How to get everything in order
- Some fundamental concepts and ideologies of good design
- Conventions commonly used in site design
The Basics
I can see it in your eyes; you want to design something brilliant. You have been waiting this long, and now, you are ready to create the next Taj Mahal . . . at least, its web equivalent. Or maybe you're on the other side, and you are dreading the idea of actually "designing" a website. "Where do I begin," you ask yourself, "what if it doesn't look good." Well for both types, there's hope. The first thing that I would say is, start simple. Some of the most pleasing web designs are the simplest (another example), but done right. So, start simple. The complexity begins to build after the foundation and after you start adding the other, more content-driven, elements.
Note: The following may prove a useful resource: Don't Decorate, Communicate!"
Take, for example, the notion of basic web design. In reality, there's only a handful of layout schemes out there. Most of them follow one of the following:
- 2 Column Layout
- primary column = content
- Secondary column = Navigation, ads, or etc.
- 3 Column Layout
- Primary column = content
- Secondary column A = Navigation, search, ads, etc
- Secondary column B = Ads, secondary content, navigation, etc
From there, you generally have a masthead at the top with some sort of logo followed by the navigation running horizontally just below. That's basically the format that most websites follow—and for good reason; time has proven that it works. What gets interesting is how diverse and inventive some sites can get in their implementation and interpretation of these basic layout rules. In other words, don't be afraid of sticking to what works. Yeah, I know, you want to be unique and make your mark on the world. But the fact of the matter is that what you want as a designer and what a user wants as a surfer, can be two totally different things. Web surfers, you included, have been conditioned to expect a certain experience when they enter any given website. These conventions are there because they have been proven to work. I'm not against breaking them; but if you do, make sure that you have a good reason for doing so, and keep things clear and concise. Your visitors will appreciate this, over supposed "eyecandy" nearly every time. So, let's get on with it.
Organize Yourself
When beginning the design process, the most important thing to remember—is to have a good one. "A good design process" is one that is well thought out, orderly, and concise, thereby, avoiding future pitfalls and backtracking. Inevitably, some of this may still occur, but the more efficient that you become, the faster your creation process will be.
Before you begin, it is always a good idea to write down on a piece of paper what links you will have on your website, particularly on the home page. This will help you organize the page. As you do this, envision how it will look on the page, and how you will structure these links. Think in terms of categories: "will certain links fall under specific categories," for example. This also serves to give you an idea of how many pages you will be creating. Below are a few example lists:
- Art Portfolio
- home
- Commercial Work
- Personal Work
- Traditional
- Digital
- Resume
- About Me (or bio)
- Contact
- Photography
- Home
- Portfolio
- Personal Work
- Commercial
- Weddings
- blog
- Studio Info
- Bio
- Personal Photo Gallery
- Home
- Family
- Vacations
- Random
- Journal
- Contact
Really, you can have anything that you want in this list. For a web gallery, also bear in mind how many thumbnails will be contained on each page, and how best to manage this.
As you build your list, also think in terms of priority. In other words, it may serve you to "prioritize" your links, so that you can give certain visual cues (size, contrast, etc) to your users, as to where to find links to the most important pages, the second most important, and so on. This may also help in giving you design direction, if you are stuck.
Next, you can make what's called a sitemap. This is something that you have actually already started making, as you gather your links. A sitemap, put simply, is a visual key both to how many pages are on your site and where they're located in correlation to other pages. In other words, how they are connected; whether one page links to another, and etc. Your site may be simple enough that you choose to skip this step. But when in doubt, create a sitemap; you'll be glad you did.
Creating Your Masterpiece
Color Scheme
When I'm designing, the next thing that I like to think of is a color scheme. Now, some of this will be covered in "Color Me Happy", but the most important thing to think of is what is the overall color, or "feel," of my site going to be (I usually pick the background color, first, as the main color.) Then from there, choose one or two accent colors to spruce up the site. Your second color may even be nearly as prominant as your primary color, but be careful when going more than three main colors altogether. Don't neglect the effect of monochromatics on a site; to enhance it's "illusion" of having more color. In fact, this might not be a bad way to go in that everything tends to seem "tied" together when you do this. The most common mistake that I have seen with site designs, is that there is a lack of "harmony" most often due to a lack of "color connection."
One thing that has amazed me about studying art, is that it isn't so much about learning how to become a great artist as it is about learning the proper tools needed to make a great piece of art. They are the fundamentals: variety, unity, balance, big-medium-small, The majority of these are found in almost every pieces of art, regardless of subject matter, style, or color. All of them follow the majority of these rules, and when they don't it's for a reason—to tell a story, to convey a certain idea, etc. It's bad art that doesn't have any rules; that goes its own way without any rhyme or reason. That isn't to say that art which breaks these rules is bad art, merely to say that art unaware of these rules tends to be bad, or err on the side of looking "amateurish" or crude.
"Unconnected" Color Scheme
One thing to watch out for is colors that don't "connect" or feel like they are from different families. An example might be using a background of white, a masthead of saturated blue, and a light gray for your navigation. The problem could become that the gray is too neutral or "pale" for the site, and all that it needs is a mild inclusion of the masthead "blue" in its treatment. This does not mean that you make the gray almost blue. It simply means that rather than it being right in between black and white, it begins to lean subtly towards having a slightly blue tint. This will tie it into the masthead and make it feel like it "belongs." The main thing is to use your own discretion. Most people would be surprised to hear that they do have design sense. Case in point, when something looks "bad," you know that it looks bad. While something that looks "good" seems to stand out to us and obtain a general appeal.
The trick is to understanding why something is or isn't working and to act accordingly. If it isn't working, start breaking it down: "Is it the color", "Is it the pattern", "Is it the size of certain objects not harmonizing properly", "Do the shapes go together", "Is it too busy?" Asking yourself these questions can really help find what's missing. Or, if your site is working, now would be a good time to analyze why, and then attempt to emulate some, if not all, of these properties in future designs. One thing that helps me as an artist is to always be looking at great art; the kinds of things that I really like, or really want to emulate. The fact of the matter is, is that on some level, you begin to soak in what you see, and it can start to become part of you. Use this to your advantage. If you want to create a successfully designed website, look at websites that are already doing this. Don't copy it, but allow yourself to soak in good design; I promise that it will have a positive influence on you.
Busy, Busy
Avoid getting too busy with any one, given design element, especially if it is not one of the most important elements or focal points, such as the background. One of the most frequent mistakes that I see being made by new designers is that they get too attached to a particular pattern or element, and then they force the rest of their design to fall into line with it. When it isn't working, be brave enough to let go, and to try something simpler. Better to err on the side of caution, than to go on dizzying your viewers, so that they would rather look promptly away rather than gaze upon the glory of your newly created web masterpiece.
Now, Design it Up
Once you have an idea of the basic structure of your site, and general design direction (color, layout, etc), start sketching out your ideas, and have fun with it. The creative process can be a struggle, but it can also be very rewarding. Remember: if you get stuck, look at others who are doing it successfully and try to emulate what it is that they're doing so successfully.
Then, once you find a design that you like, go ahead and create it using your graphic program of choice. If you have it, I would use Photoshop. Myself, I have used Photoshop, Illustrator, and Flash. If you don't have these more expensive programs on hand, there is a free alternative called, "Gimp," for both mac and pc. It is much like Photoshop, in that it is considered an Image Manipulation tool. For those of you who have used Photoshop before, it even has a special build that was intended to be layed out more like Photoshop. For my examples, I will be using Photoshop, so if you decide to use Gimp, you may have to look up some additional documentation on Gimp in order to use it, but there should be plenty of resources out there for you, so it shouldn't be too hard to translate these skills from Photoshop to the Gimp.
Best Practices
The following are some conventions that you should follow: Conventions are best practices that have been proven to work with time. For example, as discussed above, most sites follow a two or three column layout. Navigation is usually found in the left column, and along the top, content in the middle, and secondary information in the right-most column, such as secondary links, search features, advertising, etc. In the west, we naturally read from left to right, and top to bottom. The layout that I just described falls in line with this behavior. Now you can see why it's used so much. This type of reading is called the Z-scan. In other words, we typically scan the page in a "z" formation. Use this behavior to your advantage.
Another thing to keep in mind is a person's natural laziness. Give them enough "visually" to keep their interest and to quickly convey your message. It is, indeed, true that good web communication is a balancing act between visual communication and bandwidth efficiency. You don't want to overload the download process, but at the same time you don't want to oversimplify your site and make it boring to look at. Or, even worse, give a user nothing but text to stare at. Clean, clear, and concise, with a certain degree of visual incentive is typically the way to go. In other words, you stand a better chance of people "seeing" your website, than reading it. For those of you building a Portfolio site, this shouldn't be too hard to manage. Just be economical in your use of high quality images (photo colage, for example, probably not a good choice.)
That plays into our next topic: the fold. What is the fold? The fold, in relation to a website, is a term that is used to describe the magical point at which a page's content falls below the viewable space on the screen. Your most important information should always be above the fold, as close to the top as possible. Also, you can intentionally creep a portion of the element just above the fold, in order to draw people into scrolling farther down your homepage. Just bear in mind people's laziness. Our tendancy is to click a link rather than scroll through a long page. That is why I personally prefer the minimalist approach by trimming down my pages in partnership with adding more links, in response to a secondary behavior to laziness demonstrated by most of us—we like to "click" things; it tends to keep our attention, but only if it pays off. With this in mind, I like to tone down the bloat on a page by increasing the number of click throughs to find information. When organized in an appropriate way, this can help you more than hurt you.
One thing to note about the fold, is that it is different for different browsers depending on their screen resolution and real estate. So keep the screen size and resolution of your target audience in mind, when you are designing for this.
Another Dimension
The typical screen resolution of an average user used to be 800 X 600, but obviously with changes in common screen resolution and size, this has changed. This was set to the old 800 X 600 resolution of a squarish monitor. Now, especially with laptops, more and more is the trend to have a widescreen monitor with resolution set higher than 800, more like 1024 x 768 or higher. Either way, you may have to do some research. And rather than throwing a bunch of statistics at you as well as other thing to take into account such as the size of browser bars and other things out of your control from browser to browser, I'll just say, "experiment." Just keep in mind your audience, what kind of screen and browser they will most likely be using, and go from there. And above all, design what you're comfortable with. If starting with the 800 X 600 safety net works for you, then go for it. One thing to note is that the current trend for site width seems to be leaning more towards 900 - 1000 pixels across; with width varying (I like it somewhere around 500 - 600px high.)
[Next]
