I’m probably the last person who needs to write a blog article equating web design with fashion design, since my own fashion style isn’t exactly “runway” quality. I choose quality looks over trends any day. Who cares if something is “so last season,” if it fits and it looks good? I’m usually not “up” on new trends and don’t care to be.

But I do something similar with my web designs. I like “classic” web-design looks, but for me, “classic” means sometimes reverting back to tables instead of divided layers, and sometimes doing really small graphics in order to help the page load faster. As with my fashion sense, my web-design sense likes simple and fitting designs rather than designing to fit the latest trends.

The two fields are really quite similar, but web design is often seen as something too technical to understand, too detail-oriented and encrypted with strange code. This blog post seeks to show even the newest web designer how to truly “dress your page” as if you were dressing yourself.

The Role of Color in a Web Page

Color on a page, just like color in your outfit, draws attention or deflects it away. A black business suit paired with a white shirt underneath looks clean and trustworthy on both sexes; change that white shirt to a red shirt and you’ve instantly got a different vibe, of ambition and boldness. Wearing a brightly-colored shirt with a neutral-colored pair of slacks draws attention to your upper half and to your face, while wearing the neutral color on top and bright color on the bottom draws attention to your lower half instead.

In general, bright colors attract users’ attention, and muted colors fade into the background; you can use this to your advantage in a web page. Bright colors are best for accentuating new features on your site, such as a new article, a new page, or new functionality. They also infuse freshness into your site, like a fresh change of clothes.

But bright colors can also look too “young” and frivolous for a web page that needs a stable and solid look. Just like brown, deep green, navy, burgundy, black, ivory, and white lend solidarity to your look (and to doctors’ and lawyers’ offices), they can make your page look sufficiently important, sufficiently knowledgeable.

Using color on your site is partly about knowing where color needs to be placed, and which colors to use. If you have a personal site that needs to speak of your personality and your love of life, a selection of two or three bright colors, combined with one or two neutrals, might be just the spice and excitement the page needs. And if you have a business site that needs to maintain its professionalism, for instance, you can use a brighter version of one of the main colors to draw attention to new information without making the page look too colorful to be taken seriously.

Does Texture Matter? Surprisingly, Yes

Just like cotton, silk, and leather feel differently to the wearer, texture also appears on web pages, but not in a tactile sense. But don’t underestimate the subtle power of textures in a webpage.

For example: Ever visited a web site that only had solid blocks of color as its design? No patterns in the background, no patterns in the header or footer–just solid blocks of color? It might have looked neat, but it likely felt a little…bland. No visual interest existed except the play between colors. (Okay, okay, I admit it, my designs are like this more often than not. What can I say, it’s a “safe” way to design.)

Sadly, visually boring sites don’t get visited often because they seem like they’re old news; there’s nothing to set them apart from other sites, nothing to keep users returning. That’s what I struggle with in most of my sites, all in the pursuit of making a design that looks uncluttered and easy to read.

Then there’s the opposite problem: the “pattern overload.” Not only is there a tiling background pattern on the page that’s all zigzaggy, but there’s a pinstripe pattern on the header, and a crosshatched pattern behind the navigation. Add in some curlicues on the Links page and some polka dots on the footer and you have a very confused page. This is visually overwhelming to the user, and it makes it hard to enjoy the content when your eyes are swimming in patterns.

When you have a visually confusing page, users don’t even get to focus on the content because of your design, and it may turn them off from revisiting your page later. Having an interesting page is great, but does absolutely everything have to be sparkly or moving text?

So, how can we as designers use texture well? Do as the fashion designers do–put your most interesting pattern on your smallest feature. Ladies carrying snakeskin purses or wearing plaid shoes is a classic way to introduce pattern, because it’s just a “POP” of pattern rather than an oversized coat or dress screaming its pattern to the skies. Likewise, web designers can use pattern to draw attention to new features, to grace just the tops or sides of their pages, or to float lightly in the background, adding visual interest without overwhelming the content.

Also, if you’re nervous (like me) about using texture in your web page, just do a tone-on-tone pattern based on the background color of your page. Something I could do easily with Crooked Glasses’ background is to do a thin, diagonal pinstripe pattern with a lighter blue-green and a darker blue-green, alternated back and forth. It would be simple, possibly too subtle for most users to pick up on, but it would be just a little hint of pattern. It’s all about experimenting–if you don’t like the effect after all, there’s no harm in trying again!

Bejewel Your Page with Icons

As I’ve mentioned in a previous post, icons are great, but they can easily overwhelm a page, just like too much jewelry can literally and visually overwhelm a person wearing it. Too many bangles, rings, necklaces, earrings, ankle bracelets, belts, chains, and toe rings, and you end up looking like you robbed a jewelry store but forgot a bag to carry your loot in. Similarly, web pages with too many icons on them look busy and hard to read–who wants to hover over each of those icons trying to figure out what to click on?

One way web designers can display icons is to be selective about which icons they display. If you’ve got a link to every single social profile you’ve ever owned, that’s great, but you may not want to display them all on the main page. Such a list might be better if it was sorted into various categories and listed on a separate page instead. If you absolutely need to display some on the front page, have just a small, “most-important” icon list there, and then link to another page with more of them.

Also, you can arrange icons into a graphic shape (triangle, circle, diamond, or star pattern, for instance), and display them that way. (You could either make them all into one image and use an image map to do the links, or you could position them all using CSS–I much prefer the image map, though, since it’s static and won’t change with the different padding and margin “interpretations” between browsers. Looking at you, IE and Firefox. XD)

Whatever you do, be sure that at the end of your design process, your icons decorate but don’t over-decorate your page. You want your users to make sense of them, after all. And you might even remove an icon before you publish your page, just like moms used to teach their daughters to take off one item of jewelry before leaving the house.

Styling Your Webpage’s “Hair” — The Header

The header of a page is the first thing to load, and it’s the first impression of our site that users get. Yet, users don’t spend much time looking at the header while they’re on our site–they’re focusing more often on the content. It’s the same way with hairstyles–our hair makes an instant, initial impression on someone, and then that impression fades into the background as the person gets to know us better.

Hairstylists and web designers both spend a lot of time on making their creations give off a positive statement, and yet not too strong a statement that it is distracting. They also both work to make their designs memorable (though I’m not sure those crazy beehive ‘do’s should be that memorable). We as designers should work to make our headers just like good hairstyles–framing our content (the “face” of our site) rather than getting in the way.

To do this, we make headers that clearly state our site name and subject matter, but do it in a cool way (either through images or text). Whatever else your header has to offer (navigation, affiliate buttons, announcements, etc.), make that clear, as well, but don’t crowd it with information. Leave most of the information to your content area and sidebar(s) instead, and keep your header styled but not over-styled. Too many colors and too much text in your header is like too much hairspray and too many hairpins–it ends up being a mess atop what could be great content if people could get past the top of the page!

Fitting Your Footer Into Great Styles

Footers, like shoes, come in all sizes, all colors, all styles…and all heights. Some shoes are laughable because of the height of the heel; some websites’ footers are laughable because they seem to want to cram all the site’s information into a 300-pixel-tall space across the bottom of the page.

Now, I don’t have a footer fetish, but I like to see a well-designed end to a web page. I used to never pay attention to it, and I still style mine very simply, but I like to see what other people do with the footers on their web pages. A page without anything concrete at the bottom of the page to “anchor” it to its site feels a little naked, or unprotected–not even a “Back to Top” link? Sad!

Now, if it looks like an encyclopedia entry is included in the footer, it looks way too complicated for most users to mess with. If, instead, there is some author info and maybe a few pictures (or info feeds from other sites), it looks tidy while still being informative. If you can, try to avoid large blocks of text in your footer, and instead do a bulleted list or just provide a few links to pertinent information. Other content, like icons, thumbnails of relevant pictures, social media connections, or even comment boxes can be great in a footer.

Also, if a footer is jammed with colors and patterns that have nothing to do with the rest of the site, I’m often confused–“wait, what site am I visiting again?” You don’t want to confuse your users with a footer that doesn’t seem to match, even if all you’re putting in it is a couple of links. You want to make sure your footer blends in with the rest of the design.

A fashion example would be wearing red shoes with blue jeans, a green shirt, and a gold bracelet or watch–the shoes don’t match anything else in the outfit, so it looks strange. Instead, if you echoed the gold color of the jewelry in your shoe color, it looks a lot more cohesive. Echoing one of the colors of your site in the footer or one of the patterns from another part of the design pulls it all together without making the header and footer complete copies of each other.

Summary

Styling your web pages is not as difficult as some guides make it out to be–in fact, much of our graphic design skills are skills we practice every day when we stand in front of the closet piecing together an outfit. While it’s nice to stay informed on trends, really simple guidelines are about all you need to make a page look like a supermodel clothed in CSS.