10 Jan 2012

Blog: Web design essentials

I guess that, in a way, I can be called a junior web designer, as I really started designing a few years ago, but I have something that most web designers don’t have, and that’s coding experience. I’ve seen and coded hundreds of sites, and I’ve seen some designs that made me want to just quit, because of either their structural problems, or their color palettes, and everything in between. Web designing is a pretty complex thing in reality. Some people scoff at it, saying that anyone can design a site, but those people are usually wrong, and usually end up designing a very clunky and confusing interface. One that I probably coded with a disgusted expression on my face.

So, here, I compiled a list to help some people gain the essentials and stop repeating the same mistakes over and over again.

Get the right tools for the job: web design

A lot of people don’t understand just how clunky designing on Illustrator really is when it’s ported on the web. Some clients have sent me illustrator files to work with, and the lines are always blurry, the shapes are too big, and it’s just not… optimal. Sure, the page will look great once printed on a 20×20 foot wall, but when you make it smaller, to make it fit in a browser window, it usually ends up looking… heavy-handed and unrefined.

InDesign is another tool some people use some times for designing websites, and I don’t think it’s the right tool for the job either. The fact is, InDesign is for magazine layouts, and the like. So, the page size is static. How many sites have you visited adhere to a strict height? That’s my main concern for InDesign, beyond the fact that using backgrounds in it is clunky, and sometimes, it’s just easier to make a background in Photoshop, save it in print resolution, and then use it in InDesign for printed works.

In the past, I’ve designed on PaintShop Pro, and now use Photoshop for all web design. It’s simply the better tool to do the job. You just have more options, more of everything to be able to create a great website.

Think size

When designing for the web, you have to remember that the browser window has a definite size, and that for a number of years, the most common resolution has been 1024×768. The trend is slowly changing to a bigger screen resolution, but since 1024 is the smallest of the top 3 resolutions in 2011, it’s best to keep it small than to make your user scroll horizontally (if it’s not in the concept of the site). When designing, keep in mind that 1024×768 is the physical resolution of the screen, you need to take into account the scroll bars, address bars etc., so it’s actually more like 990 or so in width, and the height is completely dependent on the browser. Don’t forget to count your shadows in that size. I’ve seen many sites that fit into a 1024 window perfectly, but the extra width of the shadow makes the window scroll horizontally, which can be annoying to the end user.

Of course, there are some awesome websites that use the horizontal space, but it’s their design concept. It’s not just a 5 pixel scroll. It’s on purpose. What’s the purpose of scrolling 10 pixels to see a shadow?

So, know your sizes, and think about either using a grid, or put guides on your new design as soon as you start. I usually work with a 2000×1000 canvas at first, putting the guides to show me how much space I should use.

You can follow the 960 grid system, or stray from it. It’s up to you, but if you use a grid, stick to it. Don’t just put the grid, then completely ignore it. It’s just common sense. The grid just helps align things, and even in horizontal layouts, you’ll need a grid to keep things looking organized.

Colors

Colors are the most difficult thing to get right if you don’t know what you’re doing. You have to think about the harmony of the site, and choose colors that will work with each other. And, also choose accordingly to the site needs. Red and green, for instance, go well together, but they’re seasonal colors, so if you don’t have a site about Christmas, I suggest chucking the idea out. There are tons of sites online that will generate a color palette from your starting colors. Use them and tweak the palette a bit to make it your own.

  • Light vs. dark background

    This ties in with the target audience of the site, but not just that. Dark backgrounds on a website can be incredibly classy, especially if you use a subtle texture or gradient effect. The issue is that it’s easy to forget that sometimes, a dark site can be downright morose, and can have a low contrast, which makes reading harder for some people. Remember that adding some touches of color on a dark site is essential and that the line-height and size of the text needs to be bigger than on a light site most of the time.

    Light backgrounds sometimes offer another type of challenge. People tend to want to fill out every bit of whitespace, which just results in an uber-cluttered mess. Keep it airy, and make sure that the color used for the content and the links is different/contrasted enough to be able to be read. Use the whitespace to your advantage!

  • Solid colors vs gradients vs texture

    Color Banding

    This really depends on the site, but I tend to use a lot of subtle gradients, as they can add so much to a site’s depth. Solid colors on top of solid colors can make a design just looks absolutely one-dimensional. Gradients change the way the site’s accents are perceived, but keep it subtle. Please don’t use rainbow-like gradients and watch out for color banding.

    Textures can make a site simply beautiful to look at. A subtle texture can completely change the look of a site. Adding some noise, for instance, to a solid background can give it depth and a sort of feel, kind of like the matte smoothness of the old ipod minis’ finish.

    Using textures can be tricky though, so don’t overdo it. As always, keep things simple and classy unless you’re specifically looking for something more grungy in nature.

  • Contrast

    This is one of the most important things to think about. If you can manage to make the elements you want to put an accent on really stand out, then, you’ve won the game. It’s pretty much that simple.

    Just remember to ask yourself these questions:

    • Can the text be read without any strain?
    • Do they links and headings stand out?
    • Are any of the colors too harsh on the eyes?
    • Are the colors used for the project on track with the subject matter of the site? Is there harmony?
    • If there are buttons, are they visible and do they have an impact? Are your eyes drawn to them instantly?

Structure

This is a personal preference of course, but, I find ‘simpler’ designs to be the most efficient and the prettier to look at. Some people try to put every single bit of content possible in the homepage, and that’s usually a bad idea, so streamline your thoughts and design.

  • Think of the fold, but don’t overdo it

    The fold, as used in newspapers, is the content seen by the user without having to scroll (like when you fold a newspaper in two). The myth is that people won’t scroll under the fold and that all important info should be placed there. That’s not exactly true though, hence the word myth.

    Some elements do indeed need to be placed above the fold, but it’s more of a clarity issue. Structurally, the logo and the navigation should be placed above the fold, along with any contact info and register/sign-up buttons, but as long as everything makes sense and is organized in a well thought-out way, people won’t have a problem with scrolling.

  • Rethink your navigation!

    If someone visits your site and gets confused with a very elaborate yet heavy navigation, they probably won’t stay on the site. Make the navigation clear, give it space to breathe and set it apart from the rest of the site’s content. The main site’s navigation should be able to be spotted on the first glance to be effective.

Marketing reflexes

It’s a widely-known fact that most people scan websites in a F-shaped pattern. But, you can break this habit a bit with a couple of simple things, such as putting bullet-points and headings with a left margin in the content (since the alignment is different, our attention will be draw to it), putting images and visually-compelling graphics in the sidebar, as our attention will be brought to “shiny” things, etc.

  • Know your target audience

    Who’s the target audience of the site? Is it teens, or executives? If it’s a corporate site, it should be somewhat sober. You have to think before jumping into the design as to what it’s for, and who it’s for. Don’t forget, the website design is your image on the web. It’s like the first impression. If you’re offering a serious service, and your site looks childish, no one’s gonna hire you.

Most of these tips are pretty logical, but I’ve seen some horrors over the years, and I hope this can help out some.

Share it!

Leave a Reply

Connect with Facebook