Redroot Design Notes

Thinking Inside the Box: Plan Before You Design

Josh Keegan Gross — 2010-01-08T19:20:46+00:00

The blank canvas is equal parts exhilarating and scary as hell for artists. Instead of freezing up or leaping off into the wrong direction, I now start my designs by answering important questions and then limiting the scope of the design. While the artistic itch to follow my gut may feel thwarted, I get the work done and meet my clients' needs faster.

Of course, I wasn't always so deliberate. I think a lot of artists are like I was when it comes to starting a new project: see the blank canvas, get a little twitchy, and then shoot from the hip until the chambers are empty. Then, when the smoke has cleared, wade through the results and try to edit it into something that works. And not until some hours into the editing process would I stop and begin to ask the important questions: What am I doing here? What are we trying to accomplish? How far from "there" are we?

This is designing in a vacuum, and it's like Tourette's for web designers. Whatever comes out, comes out. This process works well for some people and for some projects. Sometimes it worked for me. But more often, I ended up with a design or layout that I liked, but wasn't quite right for the client (or worse, for humans). Since I've begun working with clients, I've realized that I need to be a lot more structured in the beginning. Instead of savagely attacking the blank canvas, I need to start projects by first building a box, and then getting inside.

Building Your Box

Creating structure at the top of the project doesn't feel organic to my artistic sensibilities, but it sure helps. Structure doesn't come naturally for me. Rather, I like to get inspired by something I see, fire up Photoshop, and build a comp for a project that's on deck. But while I'm working this way, my mind is rolling on the design in front of me, and the specifics of the project and the needs of the client are floating in the clouds above. The design drives itself. I may end with something that I really love, but sometimes I will need to spend countless hours hammering away to fit it to the real needs of the project. And sometimes the design just won't work at all, and I need to file it away for another project. The bottom line is that this method, my impulse, is a crapshoot, and can result in wasted hours (re: money). These days, I don't have that kind of time to waste.

So up front, before even thinking about color palettes and layouts, I sit down with the important questions and build a box. The artists in us may cringe at this idea. But web designers, by definition, don't have the kind of creative freedom that other artists might have. We're business folk with a task at hand. I know, I know, but this can be a good thing! One of the benefits of building your box is that you get some direction when you need it most: at the start! The blank canvas isn't as daunting when you are limited to what you can do with it. We're restricting our freedom, but we're also reducing the overwhelming number of design choices we need to make.

The requirements of your project are your source for structure. These requirements must come from the client. Clients don't always know what they want, so you need to ask the right questions, and if the answers don't add up, you need to ask again (in a different way). This begins with either a meeting or a client worksheet, or preferably both.

Layout & Structure

Navigation & content architecture are the first wall of your box. Remember, people visit websites with a goal in mind! Architecture & interface will determine the success of their visit, so this is what you need to be thinking about while you lay out the website. What is the goal of this website? Are we pushing visitors towards a sign-up page? Checkout on an E-commerce site? The physical location of a store and a phone number? Whatever the goal, your navigation and user interface need to make it simple and easy for visitors to get there. A great resource for thinking about these topics is Steve Krug's Don't Make Me Think (you should own this book if you are building websites).

Once you have an idea of what content is important and how you want to group it, you've got the makings of your layout, and the beginnings of your box.

The Design (Images, Illustrations, & Background)

But what about the pretty pictures? Here's where to go when deciding on the look & feel of the website.

Logo

A fine place to root your ideas is in the logo. If part of your work is to design the logo yourself, my advice is to do the logo before you even start to think about the website design. One way is to use the same principles for the website's design as you find in the logo. Hard lines in the logo? Right angles on the content containers. Soft lines in the logo? Rounded corners on the content containers. Big blocky serifs in the logo? Blocky serifs for your headers. Conversely, instead of matching, you can use complements. Spherical logo? Right angles on your content containers may contrast nicely. Whichever you decide, keep the logo's design in mind. This will give you some direction, help you build your box, and also ensure that the website design doesn't clash with the brand.

Mood Cues

Does the client want "modern and professional"? Or "light and fun"? Use these mood cues to determine typography, color palettes, background images, icons and illustrations. All the fluffy artistic stuff we love to do, that makes the site look beautiful, is cued from these prompts, which should come from the client. Some web designers like to use Mood Boards to demo these options to their clients before actually sitting down to design, which can work really well.

Layout & Structure

Since we already have an idea of how the content flows, we can figure out how much room for fluff we have. I say fluff because self-depracating is how I roll, but really, fluff shouldn't be without value. Use icons and illustrations to draw the visitor's attention to important bits. Use fluff to separate content (horizontal rules with ornaments, for example). Use fluff to keep the visitor entertained while finding what they need. But be careful not to overdo it. So, so careful. Too much fluff and you distract and confuse. And then you aren't doing your job, which is to carry the visitor to the goal as quickly and painlessly as possible.

Get to Work

By now you've got all the essentials decided, your box is built, and you've climbed inside to build your website. This can make finishing the product so much easier. When you're shooting from the hip, you get stuck at certain junctures because you haven't considered some aspect. Wait, what font should I use for this header? Do I want gradients on this call-to-action button? No more of that. Everything is in your box with you, and now you just need to put it all together and tweak. Build your box and then build your website.

Topics include: Design

jQuery Basics: Using the Malsup jQuery Cycle Plugin Pager

Josh Keegan Gross — 2009-12-12T06:18:38+00:00

If jQuery is your Javascript Swiss army knife, then the Malsup Jquery Cycle Plugin is your primary blade. Or, at least, the screwdriver. In any case, not the tweezers. Definitely not the tweezers.

On the surface, the Cycle Plugin is useful for image slideshows, but with a fistful of options, you can achieve almost any kind of cycle effect. Take a look at the Effects Browser to see demos of each. Granted, a lot of these effects are cheesy, the web equivalent of the star wipe (thankfully, star wipe not actually included in the effects list). And the animation can have that javascript stiffness to it. However, if you want to avoid Flash (as I usually do) and you want to get creative, the Cycle Plugin has the capability to do some pretty crafty stuff with a minimum of javascript knowledge. Not that we aren’t well read up on our javascript (we all own Jeremy Keith’s book on Javascript basics of course). We’re just efficient, right?

Getting Started

Crafty aside, I’m going to focus on the essentials for this article: the pager.

First things first, we’ll need the jQuery library linked to the page we’re working on, so inside your HTML head drop in your link. Now we’ll add the jQuery Cycle Plugin. Because we’re using the Pager option, we’ll use the full version (that’s the .js file that includes the word “all”). So download your copy and pop “jquery.cycle.all.min.js” into your js folder, then add in the link to your :

Build your Slideshow

Next let’s get those slideshow images into your markup. The way the Cycle Plugin works, all you need to do is create a container element and then fill it with your slideshow elements. We’ll build the container as a

element, give it a unique ID, and then inside that

we’ll add a list of tags, each one representing a “slide”.

Next we’ll build a container element for our pager navigation. These will be the links to each individual slide. Here, we only need to create the container

, and the Cycle Plugin will generate the anchor tags and stick them into the container for us.

Almost there. Now we need to hook up our slideshow container to the Cycle Plugin. To do so, we need to add some jQuery code into our page. You can drop this in about anywhere, but make it easy on yourself and do it in the underneath your other js links. The very first line of this code tells the script to wait for the DOM to load before running, so we don’t need to worry about its placement in the document.

So this bit tells the Cycle Plugin that the #slideshow

is our slideshow container and that we are using the pager feature on the pager navigation container #pager. This is also where we set the options for the slideshow. The default behavior is to auto advance, but if you don’t want the slideshow running constantly (and I find it a little distracting myself), you can turn it off by setting timeout to 0. You can also choose your snazzy cycle effects here with the fx option. I’ve gone with one of the milder options, fade.

Now load up your page and your slideshow and pager should be working.

The Cycle Plugin does us the favor of adding the class activeSlide to the current anchor. This way, we can highlight the current link by giving it a unique style:

.activeSlide { 
    color: ff0000;
}

The first time I set this up, I got a funny error where the image mysteriously shrank when the cycle began. The problem was that I had not explicitly declared a size for the images. You can do this either within the HTML tags or within the stylesheet. The Cycle Plugin doesn’t like it when your images don’t have a size. For example, if your images are all 300 x 400 pixels, just add this bit of CSS:

#slideshow img {
width: 400px;
height: 300px;
}

Here's the demo of what we've got so far.

Graceful Degradation

Okay, fantastic, the pager is working like a charm. But what if your user has javascript turned off? Well they’re going to see some ugliness. Yes, they’re probably used to it by now (you may say to yourself), cruising around without javascript and whatnot, but that doesn’t make it right! So let’s employ some graceful degradation, and have it looking good for everyone. Accessibility counts, after all.

So flip off the javascript and reload the demo page. Woops. The pager is gone, and all of your images are showing! Like showing up for a first date without your clothes. Not good.

Hide Your Shame

First thing’s first: let’s make sure all of those images aren’t showing when javascript is off. Because the Cycle Plugin uses javascript to hide all of the images that aren’t active with some inline style, we need to do the same thing manually within our CSS. Dive back into the HTML markup and add a class to all of the image tags which follow the first and call it something like hidden. Then, in your stylesheet, add a selector for hidden and give it a display: none. Now, only your first image will show when the javascript is off.

HTML:

CSS:

img.hidden {
display: none;
}

We do this step first because, if you’re feeling lazy and don’t really mind if folks can’t see the rest of the images in your cycle, you could stop here and things would look fine. Visitors with javascript turned off won’t be able to see any images beyond the first, but at least your page won’t look like a hot mess.

Bring Back the Pager

But let’s do better. Notice that the pager navigation has disappeared when the javascript is off. Using javascript, the Cycle Plugin adds in the anchors for the pager navigation when the page loads, so no javascript means no navigation links. Big problem for users who want to see more than the first image! With a little more effort, we can keep the pager navigation and show all of our images.

First, add the pager navigation anchors to your HTML markup. Use the actual paths in your tags. Give each anchor a unique class like noscript. You’ll see why. Yes, this is definitely more work intensive, but please no whining.

Next, using jQuery, remove your manually added navigation anchors. We can stick this into our bit of jQuery right above the intialization of the .cycle method. If javascript is turned on, then this code will remove all of the anchors that have the class noscript from the DOM. This is the power of jQuery--only one easily understood line of code to accomplish this task, and not even a long one! We remove our manually created pager anchors so that the Cycle Plugin can then re-add those anchors and use them to operate the slideshow.

$(".noscript").remove();

Here's the final example. Try turning javascript off and reloading the page to see how it works. So this will at least offer non-javascript users the chance to see our full slideshow, one click & back button at a time. Not the best for usability, but If you really love your non-javascript users and want to give them a slideshow built on HTML & CSS alone, you can check out this Net-Tuts+ tutorial I found while working on this topic—seems neato, though haven’t tried it myself.

And that’s it. Go forth and cycle while degrading gracefully. Poke around the Cycle Plugin demos to learn even more about what you can do with this lovely plugin.

Topics include: HTML/CSS, jQuery