1. Remember the Rule of Thirds.

Ever wonder why TheGridSystem.org is a 12-grid layout? It’s no accident that 12 is a multiple of three.

For a couple of thousand years, the Rule of Thirds, or the Golden Ratio for you mathematically-inclined folks, has worked an aesthetic guideline which states that a given visual space (your web site layout) should be divided horizontally and vertically into thirds, and that important design elements should be placed along the dividing lines, or at their intersections. This, the rule says, provides the most visually appealing layout. Both left- and right-brained figures throughout history, from Euclid to Rothko, have utilized this rule to create ingenious observations and works of art.

The Rule of Thirds is often tagged as the lazy man’s way to lay things out, but that’s really because of its simplicity and universality. In short, the rule works.

Web layouts are a bit trickier since the monitor size and screen resolution on everyone’s individual computers is a variable that the designer cannot control; however, if you stick with non-fluid layouts to constrain the horizontal space of your design, or use percentages in your CSS (a bit trickier, especially if non-scalable images are involved), the Rule of Thirds can provide you with focal points and design layouts that web users find easy to visually digest. Another popular method of utilizing the Rule is to design an “impact area” (often dominated by a “hero graphic”) that is divided in thirds aesthetically and is designed to be the primary focal point for the page. As the user scrolls down, simple 1/3 ratio columns for the text or remaining content can be used. Columns work well in vertically variable workspaces.

2. KISS all those pretty fonts goodbye.

Remember that annoying acronym we all learned in school? Just in case you’ve been living on a deserted island for the last decade or so, KISS stands for “Keep It Simple, Stupid.” And that’s precisely the best way to use type fonts.

I’m not saying you can’t indulge in unique, hand-created typography, or that you can’t mix typefaces, ever. But it must be done with care and artistry. Adding in that really cool font you downloaded for free from the link your nephew in HTML class sent you may not be your best bet for communicating your client’s message.

In fact, communicating your client’s message is the goal of the web site you’re designing. If that message isn’t already contained in the design of the typeface you want to use, skip the typeface and go neutral. Something like Helvetica Bold works incredibly well to get messages across (which is why we’ve seen such a resurgence of it in the self-publishing & blogging trends). The type font does not interfere with the actual words. You have something like 1/gazillionth of a second to get your message across to the web user, so do it the fastest, clearest possible way. If that isn’t with a fancy font that says it all for you, then say it with words, and make the words concise and easy to absorb.

I like to use no more than three fonts (excluding any fancy or unduplicatable logo fonts) in my designs: one main graphic font, one secondary graphic font, and one web-safe HTML font. Save the pretty stuff for non-text graphics.

3. Don’t give up.

Sounds like touchy-feely pandering, right? Well, it’s true.

These days, Photoshop, CSS, and your own artistic talents can pretty much do anything with a layout. Anything you want. If you have an idea in your head that’s just not translating onto a sketch pad or a monitor, keep at it.

Sometimes we all get a little bit too reliant on filters and effects, and when the desired outcome isn’t met with a drop-shadow or a gradient, it’s tempting to settle for “good enough.” Don’t do it. Nobody ever won a design award by settling. No client was ever thrilled to pay for a design that was settled on. And no web user has ever been wowed by “good enough.” If that brush stroke isn’t working for you like it should, go old school: get out your ink, brushes, and watercolor paper and draw precisely the stroke you need. If that typeface just isn’t quite right, pull it into Illustrator and tweak the anchor points until it is. If you think the paper effect you’ve made isn’t convincing, grab a real piece of paper and tear the edges, fold the corners, crumple the middle until it is.

There are also plentiful tutorials and resources on the web for just about any specific effect you’re trying to achieve. Do a Google search and see what you come up with. At worst, you’ll slightly expand your knowledge. At best, you’ll learn skills and tricks that will make your web layouts really shine.

And if all else fails, get up, and take a walk around your neighborhood. Fresh air is a great re-motivator, and inspiration is all around us, all the time.

—

Stephanie Long is an artist and designer with over a decade of web-specific experience currently lending her talents as Creative Director at WebSight Design. She believes that listening to the client is the key to a successful project, and that listening to yourself is the key to a happy life. And she actually likes deadlines — go figure. Stephanie recently got a Twitter account and now feels much younger.

Like this post? You might like this one, too: Design Is Not A Pretty Picture

Three Tips To A Successful Web Site Design is a post from: WebSight Design, Inc. company blog. With headquarters in the San Francisco bay area, WebSight Design, Inc. has been providing world class web engineering, creative design and hosting solutions since 1995. WebSight Design

Dylan Dog is the world’s only private investigator of the undead with his business card clearly reading “investigator of the paranormal: no pulse, no problem”.

The movie adaptation of Tiziano Sclavi’s Dylan Dog, titled Dead Of Night, is opening this year.  “Dead of Night” is a gothic thriller based upon one of the world’s bestselling series of graphic novels, “Dylan Dog,” and is set in the European-feel backstreets of New Orleans, a city with a long and storied history with regards to the supernatural.

Staring Brandon Routh (Superman) as Dylan Dog, the world’s only private investigator of the undead.  While he knows all of their underworld secrets and rivalries, Dylan is increasingly convinced that, like any normal person, the less he has to do with the undead and their myriad problems, the better. However, a missing artifact, a beautiful heiress and a brutal murder conspire to drag him back into the dark world of the undead.

WebSight Design was proud to create the official movie site for this movie.  Because this movie has such a following, our web design team worked doubley hard to create a design that would live up to the movie and the comic.  We wanted to make sure that this site was the only place you needed to go to find pictures, exclusive videos and trailers for the upcoming Dead of Night Movie.

Have you ever wondered if the person next to you was really part of your world? is a post from: WebSight Design, Inc. company blog. With headquarters in the San Francisco bay area, WebSight Design, Inc. has been providing world class web engineering, creative design and hosting solutions since 1995. WebSight Design

Along with their custom design, WebSight Design also designed a custom newsletter that is attached to their contact list managed from the administrator.  The content on the site has added social networking features that let users share the articles across dozens of networking platforms.

Founded by Deborah Santana in 2008, she created a non-profit to serve the needs of women because she believes the balance of power in the world still lies in the hands of men, often bypassing the skills, intelligence, compassion, love and grace of the female gender. She want to support women as leaders, and as owners of our futures and to encourage women to grow in whatever ways bring happiness and peace.

DoALittle.org is a post from: WebSight Design, Inc. company blog. With headquarters in the San Francisco bay area, WebSight Design, Inc. has been providing world class web engineering, creative design and hosting solutions since 1995. WebSight Design

In 1996, Macromedia released a product named Macromedia Flash.  This was a vector based animation platform that allowed web designers to create animations using tools provided by Macromedia.  This resulted in smaller files with cleaner animations.  The major drawback to this was it required a browser plugin to view and most of the internet wasn’t on board with this yet.

Now days, there are better options then animated gifs when it comes to adding features to your site.  With the new advances in HTML and JavaScript, major browsers vendors are investing huge efforts in improving JavaScript engines in their browsers.  With all of this new attention to JavaScript dozens of frameworks, have popped up as tools for web developers to use.  Common frameworks include jQuery and jQuery UI, YUI, Prototype and Scriptaculous, and the Dojo toolkit.

When it comes to deciding between JavaScript based features and Flash based features in your site there are many different advantages and disadvantages you need to weigh.  JavaScript has several distinct advantages over Flash, first it no plugin is needed because it uses open Web technologies like Document Object Model, HTML and CSS.  Secondly, it is much easier to make animations that are accessible and 508 compliant and JavaScript is also viewable on many mobile devices, unlike Flash applications.

Although, jQuery/ JavaScript cannot be used for all animations, when it comes to certain types there are things that jQuery just can’t do.  It cannot handle 3D animation, audio/video players or fine user controlled animation.  When using JQuery you are also at the mercy of user end controls such as disabling JavaScript in a browser and resized text.

Is it in the budget?

When considering whether to use a jQuery or Flash based solution you are also going to want to look at the development and maintenance hours versus what the features are that you are looking for in your project.

JQuery can be used for almost all modules for a standard website, including scrolling images for the banner and photo galleries, interactive menus, form validation, and pop-ups and tool tips.  Because most of these tools are available as JavaScript frameworks this can end up keeping the development costs of your site down.  All of these features can be integrated with the CMS and dynamically updateable. Changes to the design of jQuery features most front end designers can handle and this will lower any maintenance costs you may incur.

A Flash application encapsulates all the code in the application itself.  First, this means creating the application require the use a specialized Flash developer, but this can be to your advantage if you are looking for features to your site such as audio/video player or 3D animation.  If you are looking to have complex multi-media in your project, you are going to have a higher development cost.  Changes and updates to Flash content can be executed via updateable XML files, but if you want to change the design of the application you will need to use a Flash developer with can cost more in maintenance hours.

What this decision really comes down to is asking yourself what are the features that you need.  Much of the “flash” in Flash can be mimicked at a lower cost with jQuery, but if your site is multi-media heavy; your best option would be to go with the Flash application for the ease of the end user and yourself.

Flash vs jQuery – Is it in the budget? is a post from: WebSight Design, Inc. company blog. With headquarters in the San Francisco bay area, WebSight Design, Inc. has been providing world class web engineering, creative design and hosting solutions since 1995. WebSight Design

The best indicator of successful usability is a clear understanding of the web site’s target audience. For example, the audience of our rock musician clients want multimedia. They want to download audio tracks, play videos, see large photos, and actively participate in the web experience on a fan level. A fan will most likely have multimedia plugins on his or her computer, and if not, will eagerly download them to be able to access enhanced content.

The audience of our real estate clients, however, want to find information, and find it quickly. They aren’t interested in lingering through a Flash animation that stands as a hurdle to the information they’re after. And while photos of properties are necessary, waiting for them to load, having to navigate a sea of thumbnails, or having too-small images will turn a potential homebuyer into a frustrated web user. The real estate agent or company won’t get that user’s phone call.

The tough part is finding the balance between easily giving base-line visitors what they want, and not boring (therefore, alienating) more sophisticated web users. Luckily, that just happens to be our specialty. With design that’s focused on both visual impact and usability, WebSight Design creates a custom-tailored user experience, based on your target audience.

Usability: Know Your Target Audience is a post from: WebSight Design, Inc. company blog. With headquarters in the San Francisco bay area, WebSight Design, Inc. has been providing world class web engineering, creative design and hosting solutions since 1995. WebSight Design