I slowly and painstakingly finished a revision of my proposal for a website banner to enter in a school contest. The winning banner is to replace one there now, which has a winter theme. We were supposed to provide a spring theme, which I failed to do, but I like it anyway. It does incorporate several other suggestions from our instructor, the commenter who signed herself Gigi-Mo in a critique of my first effort.

reistrup-banner1a2
preferred proposed design

The banner is built around several photos:

1. A shot I took of the Chesapeake Bay Bridge looking toward the Eastern Shore of Maryland. I used a rougher tracing of this in my initial effort.
2. A shot I took of a sailboat during a race.
3. Three shots of seagulls downloaded from a photo-sharing site called Stock Exchange, which classmate Mark P. told us about. The fourth seagull, the one closest to the bridge, was in the original photo although I didn’t spot it until I enlarged the shot to trace it.

The tracing was done in Adobe Illustrator, another part of Adobe Creative Suite 4, because I find the program more intuitive than the Adobe Fireworks software we were using to create our banners. Then I imported each drawing into the banner, placed them and colored them white. The other colors in the banner I picked using an Adobe utility called Kuler, provided to help coordinate colors on web pages and protect us tyros from dumb mistakes. Kuler can be a bit formalistic, in my opinion, but rules are rules. I used the “triad” method, allowing me to pick across the color spectrum, so I could get not only blue and green but also a sandy color to line the Bay. I added some texture for the Bay itself with a pattern called Goo Blue. And in lieu of the delicate latticework that would be needed to represent the girders under the near end of the bridge, I stripped in a tweedy weave pattern called Berber. Finally I chose Jagger FF as the type font for the words “My AACC” and placed them in white in the upper right, sort of like clouds.

I took the original bridge photo on a visit to Sandy Point State Park in Anne Arundel County with my brother-in-law Erik Wolhowe, who as a civil engineer with the Minnesota Department of Transportation is always ready to look at bridges. (It happens he was assigned to supervise rebuilding of that old bridge that collapsed into the Mississippi River in 2007, and they brought the project in on time and under budget.) The original photo was taken at about 9:30 in the morning when there was a flock of seagulls clustered along the shoreline for a post-breakfast chat. That was too much detail for this effort, so I settled for a single gull strutting along the sand.

The only change I made to my second banner proposal, at our instructor’s suggestion, was to tame down some of the clashing colors.

Another assignment in Fireworks for the week was far more frustrating for me, though. I kept trying to produce those “rollover” buttons you see on web pages, which change color when you roll a mouse over them. I finally finished the project on perhaps my sixth try, but I have trouble getting rid of mistakes I make in Fireworks, and they are immortalized when you click on the URL. Of course nobody in his right mind would label all buttons “Contact” and stack them on top of each other. Mine were supposed to read, from left to right, “Home,” “About,” “Info,” “Products” and “Contact,” but nothing happened when I pressed shift/alt/mouse in the approved method for duplicating buttons, so I tried a series of workarounds, which appeared to work in Dreamweaver but didn’t carry over to the college website.

In our assigned reading, the article saying what is “above the fold” isn’t the only thing that matters reminded me of some lessons learned designing newspaper front pages, which is where the expression comes from. The first point is that these layouts must change not only every day but between editions. Headlines like “Mideast Peace Hopes Rise (or Fade)” or “Brazil — Land of Promise” may work in mockups, but not out on the streets or in the stores. Those of us who got the chance to lay out page one were taught that what was above the fold was important principally for street sales, which were crucial for raising average circulation even if they were only a small slice of the total, and that a design that grabbed readers would sell more papers — a few thousand in big cities. The Toronto Star had a roster of editors who rotated into the post, and there were a few basis precepts when I worked there in the 1970s before the advent of offset presses that allowed us to use color more frequently. The most important and significant news of the day was to get the “black line,” a multi-column headline over a story stripped either down the right-hand side of the page like an American paper or down the left like a British paper (this Canadian paper gave us both options). A second critical element was the most interesting story of the day, which got the “red line,” so called because the headline was printed in red ink separately from the rest of the page. This story and headline were stripped across the top of the page, above the newspaper’s nameplate. (By the way, it was important to give readers the gist of the story on the front page rather than leading them inside with some windy anecdotal lede.) The third crucial element above the fold was a multi-column photo, which could stand alone or accompany a story but whose content had to be immediately discernible to readers. The editor-in-chief told us that changing any or all three of these elements between editions could boost circulation for that day by thousands. I never laid out the front page of the Washington Post, but I remember the executive editor’s saying that running a banner line about a Redskins game over the nameplate the following Monday would raise street sales by several thousand, even though by the time the paper appeared all the readers surely knew the outcome. These examples may be dated, but the principle remains: What goes above the fold can grab readers (or browsers). But whether they will become subscribers (or regular browsers) depends more heavily on the rest of the content.

The article on making websites attractive provided useful tips, which I hope to use while working on my project. So did the article on web design tactics. But the article that really struck a responsive chord was by Joshua Porter, who among other things wrote that design is different from art — which is about personal expression — because it is about being used by people. “Technology serves humans. Humans do not serve technology,” he said. Right.

–J.V. Reistrup

Advertisements