Chapter 2: The Basics of Site (Re)Design
"It's also important to realize that in the world of design, one person's masterpiece is another person's terrible design."
"Try to understand what your clients think they want from the site you are designing."
"Make sure you understand the real purpose of the site and that you have a feel for the intended audience."
"Once you have the requirements together, start sketching as you discover more. Sketch with paper and pen/pencil"
"Many developers say that clients don't know what they want. I'd say that they just don't know how to tell you."
"You should almost never come to the table with only one design."
"Some requests might not seem all that clear or reasonable. Don't feel overwhelmed when clients say they want the site to look more fun. Having heard this one myself many times, I can only say that you'll accomplish this one by brute force, trial and error, and a little luck. If you accomplish the rest of these requirements, then you'll be in good shape."
"Even worse is when the client asks you to create something exactly like an established site, except different...It might seem like a bad idea at first, but a comment like this is one that you should quietly ignore. Follow good design principles and solicit constant feedback from your clients, and these kinds of requests should work themselves out."
"If you break the requirements into logical steps, they might look like this:
- Sketch some basic designs and get one approved
- Select colors
- Select fonts
- Implement the basic design in Photoshop
- Create images for the banner, buttons, and other elements
- Create an HTML and CSS template
- Test your designs for compatibility and accessibility"
"You've probably noticed that websites tend to have many things in common. Most have a header region that displays the site's name or logo. Many sites also have their main content region divided into columns, and at least one of those columns is often used as a sidebar region that might contain navigation elements or additional information. It's also likely that the site has a navigation bar either across the top of the page of along the left side. Finally, you can usually find a footer region that contains copyright information and maybe some additional links."
"Come up with at least three designs for your clients on every project. Provide a simple, conservative design; a complex design; and a design that aims for the middle, something mostly conservative that also has some splashes of flair."
"When your clients come to you asking for a new site design, get them to do some of the legwork for you. Ask them to identify a few websites they like. Get them to tell you what they like about them."
"I once heard a great presentation from Robert Martin about how writing software was like writing a book. You'll do a first draft and then a few revisions, refactoring until you get it just right, and that's your final draft. Design is kind of like that, except that after you go through all those stages, your client will see it and tell you that he hates it."
Chapter 3: Choosing Colors
"Colors can make or break your application depending on how you use them and blend them together. They evoke emotions and draw attention to important details. This is one of the most important chapters in this book because it helps you build the foundation of a great-looking site."
"You have a lot of things to think about when working with colors. You have to think about the shade of the color, the amount of color, and how the color looks along side other colors. You also need to think about how the color might be interpreted by your audience."
"When people talk about an object's color, they are referring to the hue."
"Saturation is the amount of color in an image. A saturated color is vibrant, whereas a desaturated color looks dull and gray. If you reduce the saturation, you make colors look washed out. In some cases, this is a good thing because it takes the edge off some otherwise harsh or shocking colors."
"Altering the brightness of a color can make the overall appearance of the colors darker or lighter."
"There is a fundamental difference between the way color works on paper or in nature, where light is reflected, and the way color works on a screen, where it is projected. On your screen, the color mixing is additive; in print, it is subtractive."
"When you're working with paints, crayons, and markers, you deal with the primary colors of yellow, blue, and red. You start with all of the colors of light mixed together *white), and filter out what you don't want to get the color you are looking for."
"A banana doesn't actually have any color. It doesn't have any light energy to produce color. Instead, a banana appears to be yellow because it reflects all the light waves that cause us to see yellow, while absorbing all the other waves."
"Computer screens display colors using the additive color system. The primary colors you've grown up with are replaced by red, green, and blue. These colors are mixed together and projected, creating the light."
"The context of a color can greatly influence how it appears in your application. Even if you technically pick the correct colors, you might have to make additional adjustments to make them look right."
"When choosing colors for your application, it's important to think about the various responses your choices might trigger. Using red or blue improperly could trigger an undesired response or could even create confusion."
"Your choice of color influences your users' perspectives, and simply applying a different color scheme to a website complete changes the user experience."
Warm Colors
"As the name suggests, warm colors make you think of warmth, sunlight, and heat. Some people believe you feel warmer if you look at these colors."
"Red is a strong color that can stand for love, joy, happiness, and romance. It can also represent lust, anger, war, an emergency, or danger. Its use in applications is almost always to show a warning or an error message. Red attracts a user's eyes immediately."
"It's hard for a user to focus on yellow, but the color can evoke feelings of intelligence and happiness when used correctly. Many applications use some sort of yellow fade effect to let you know the action you just took was successful."
"Orange can be cheerful like yellow, but it can also be arrogant and superior, depending on the amount of red."
Cool Colors
"Cool colors have a cooling or calming effect on people. They're comforting, and you can use them to tone down a site."
"Blue can be calming, soothing, and cool. It has a tendency to make users relax when it's desaturated. However, as the shades of blue get darker, they can cause feelings of sadness or depression."
"People tend to associate green with nature, hope, health, and responsiveness. However, if used incorrectly, green can also trigger feelings of envy...in addition to envy, green can evoke feelings of greed, guilt, and disorder. Certain shades of green allow the eyes to rest, which can have a soothing effect on your users. The wrong mixture of choices can make your users feel sick or disgusted."
"Purple is one of those odd colors that doesn't appear in nature very often. You might see it in the petals of flowers, but you see it mostly in things that people create. Purple is often associated with royalty and mysticism, mainly because it was extremely difficult to produce in ancient times. Purple is a mixture of red and blue, which means you get some of the attributes of each color. Light purple is often associated with nature, peace, tranquility, and spirituality. Dark purple can evoke feelings of depression. Large amounts of purple can be difficult on the eyes."
Neutral Colors
"Black, white, silver, gray, beige, and brown are unifying colors. They help bridge the gap between cool and warm colors. When used as background colors, they help other colors stand out."
"Black can represent prestige and elegance, and it can be pretty powerful if used in the right context. However, black is also associated with mourning, death, despair, and brooding. When you use black in a design, you must target your audience carefully."
"White evokes feelings of purity and perfection. It's a perfect color for a clean website. Too much white can be boring and sterile, but it makes every other color stand out that much more."
"Brown can stimulate hunger, health, and simplicity. On the other hand, some people observe brown to be a dirty color, and it can evoke feelings of uncleanliness, which is definitely not something you want for your site."
"Beige makes people relax. It is a conservative color that borrows from brown and white. It's a great choice for a background because it can be calming, and will allow other colors to stand out well."
"This color seldom evokes an emotion, but when it does, it's usually associated with feelings of gloom, mourning,
