Design

An Artistic Free-for-All

(Step-by-Step Graphics, September–October 1996)

Creating an effective online magazine calls for a collaboration of content, design, and programming.

The fact that it’s been difficult until recently to make money directly from the Web has been frustrating to many and liberating to others. On the non-commercial Web, money is not the reward, but—in the best-case scenario—freedom of expression is. @tlas magazine is based on this principle. The three founders, Olivier Laude, Michael Macrone, and Amy Franceschini, were all attracted to the Web as a forum where they could publish their work without pleasing editors, advertisers, or clients, and the magazine has become a popular site for other artists, a forum where designers, illustrators, multimedia artists, and photographers can admire each other’s work and exchange ideas.

The magazine operates through a combination of casual cooperation and independence. There’s no hierarchy of command with the @tlas staff, just a free-spirited collaboration, with Laude organizing the content, Franceschini laying out the Web pages, and Macrone writing the HTML code.

Based on content

Photojournalist Laude was tired of compromising his work in order to make a living. He saw compromise as an unfortunate fact of life, but he craved a forum where he could publish his work the way he wanted it to be seen, and he knew other artists felt the same way. He had always wanted to produce a print magazine that featured artists in a non-commercial way, and when CD-ROMs became viable, he considered creating a multimedia magazine. But Laude admits that formulating business plans and finding advertisers are not his forte, so the magazine remained a dream until the Web came along. With the Web, he didn’t require outside funding to present original work by photographers, designers, multimedia artists, and illustrators—and @tlas magazine was born.

Laude assembled the @tlas staff, and like everyone else involved with the magazine, from the founders to contributors, he works pro bono. What’s offered instead of money is creative freedom—and a worldwide audience. Every Web site can boast global access in theory. @tlas delivers. In looking through @tlas’ logs, Laude reports there have been visitors from nearly every wired country in the world. In fact, the magazine’s popularity has led to the sort of businesslike complications Laude sought to avoid.

As a site receives more hits, it takes up more bandwidth, and most online services set a limit on how many hits a site can receive before being charged for server space. After only three “issues,” @tlas has outgrown its free-space status, moving from a free space on Macrone’s www.well.com account to a space donated by www.organic. com. Now @tlas is billed for its bandwidth, and the @tlas team is searching for a permanent home. To pay for @tlas’ server space, Laude and his partners are forming a Web design firm to take on outside accounts, and they’re thinking about seeking outside advertisers (advertisers who won’t interfere with the artistic freedom @tlas has come to represent).

@tlas’ direction is evolving too. The first issue (Fall ’95) was presented in a gallery format, with flat work viewed in a sequence organized by artist. With the Winter ’96 edition, the @tlas team moved toward more of a conceptual and editorial presentation, where the content works in concert with the medium of the Web. This means that GIF-animations, Java, and Shockwave will be more prevalent than simple gallery-like exhibitions of work. Laude is taking a different editorial slant as well, including witty stories, games, and corny ASCII art.

Laude’s primary goal as he assembles content is to honor the artist’s wishes. He reviews the work submitted to the magazine and often actively solicits submissions, writes the captions (unless the artist provides them), then scans the artwork that doesn’t arrive in electronic format, numbers their order, and passes them on to Macrone or Franceschini by e-mail.

Designing the interface

Franceschini remembers the days when Laude would regularly visit Post Tools Design, the San Francisco-based multimedia design firm where she works, and discuss his idea for a Web magazine in the hopes of interesting her boss, David Karam, in the project. When it became clear that Karam was too busy, Laude asked Franceschini instead, and although she had never even seen a Web site, she accepted the challenge of designing one. (Karam has since joined the @tlas team, but the signature @tlas look was created by Franceschini.)

There was no flow chart or formal plan for the site. Laude gave Franceschini scans of some of the artists’ work that would be featured and left her on her own to figure out the rest. After experimenting with different grids, she decided that presenting a person’s art was comparable to giving him or her a television show, and she decided to put thumbnails of the work inside shapes reminiscent of a television screen, but with a twist. Instead of mimicking the outline of a TV screen, Franceschini derived graceful curves from the way a number 10 envelope looks when it’s unfolded.

Franceschini often unfolds or deconstructs common objects to find shapes and curves that she likes, and she says she’s more likely to find inspiration at a thrift store, sifting through old stationery or die-cut packaging, than by starting with a fixed idea. Frequently, she finds herself staring at things in an almost trance-like state, thinking about their form or color. She particularly likes subtle, aged colors—tones you might find if you set a book outside or let a photograph discolor in the sun – and those evocative colors showed up on the @tlas site.

Her experience in print and multimedia has given Franceschini strong feelings about interface design, particularly an aversion to buttons. She uses text instead. She feels that many Web designers are moving too far away from text and that icons are usually unsuccessful as navigation devices. Still, she admits she is frustrated that she can’t use small type on screen, and she often finds herself riding the line between making text as small as possible while keeping it readable.

Franceschini uses Illustrator to rough out the arrangement of elements and Photoshop to compose the pages in designing for @tlas. Her working style is improvisational and somewhat chaotic, but the end result is always a clean, easy-to-follow layout. Most of her Photoshop documents have dozens of layers, and she frequently uses Multiply mode to make one layer blend seamlessly into another.

As she works, Franceschini experiments freely, often using the eye icons in Photoshop’s Layers palette to turn layers on and off so she can explore different visual ideas and view the effects. Her Photoshop files are complex and memory intensive, but then it’s not her job to worry about optimizing file sizes for speedy downloads. The collaborative division of responsibility leaves Franceschini free to concentrate on the design and improvise without inhibition as she creates the layout. Macrone handles all the technical considerations and turns Franceschini’s designs into workable Web pages once she turns the files over to him.

Defining the code

When the first beta of the Mosaic Web browser was released almost two years ago, Macrone was (and still is) a subscriber to San Francisco’s renowned online source, The Well (WWW. well.com). At that time, Well discussion groups were buzzing with excitement over the potential of the World Wide Web, and as a free service to its subscribers, The Well offered Web space to anyone interested in using it. Macrone downloaded a copy of MacWeb (a Mac-based shareware browser) and started creating his first site, teaching himself to write HTML by browsing the Web and viewing the sources of Web pages he liked.

In the beginning, Macrone spent a lot of time on the Mosaic home page, studying Web page design tips and learning about HTML tags. It was easy to learn HTML in those days, he says, because there were relatively few tags in existence. When Netscape was released, he immediately recognized the significance of Netscape-initiated alignment and table tags. “Tables were the answer to my alignment frustrations,” Macrone notes. “They offered a grid paradigm, much like visual designers use on a printed page. Without grids, magazine design as we know it today would be impossible. Without grids, decent Web design was nearly impossible as well.”

Macrone uses tables on virtually every page of @tlas to align elements perfectly from one link to another. They are one of the reasons for @tlas” design continuity, and are indispensable to the site’s success.

Macrone was aware that tables were only supported by Netscape when he chose to rely on them heavily. “We made the decision that anybody who is bothering to look at @tlas probably already has Netscape. We used to put a disclaimer on the first page that linked our viewers to the Netscape site so they could download the browser, but stopped. We’re not in the business to sell browser software for Netscape,” he says.

Faced with the decision to design exclusively for Netscape or to make two separate sets of pages, one for Netscape and another for browsers that don’t support alignment and table tags, Macrone decided to go the solo Netscape path on most of the pages. “Anyone who is interested in aesthetics on the Web will have Netscape or at least a compatible browser like Internet Explorer. I hate to exclude those coming on to the Web through AOL, but it’s the choice you have to make. If you want to design something that looks really nice, you’ll have to write off a certain percentage of the audience.”

There are no standard rules to Macrone’s Web authoring methodology when he handles the graphics, just a simple goal: Make the images look as good as they can with the least possible memory. He typically takes Franceschini’s images through many iterations before deciding which version best suits the page it’s intended for. “I make a habit of taking an image and saving it as a GIF. I start at 4-bit (16 colors), then go up to 5-bit (32 colors), all the way to 8-bit (256 colors). Additionally I’ll make several JPEGs of the image as well—in Max, High, Medium, and Low quality. In the end, I insert all these different versions of files into my HTML document and view them in Netscape. This allows me to try all the options, and confidently choose the best quality image with the smallest possible file size.” Macrone insists that it’s impossible to make generalizations about the image quality of different compression levels and that only by testing them in GIF and JPEG format can he find the best solution for any given image.

Macrone avoids background tile patterns (which usually take a long time to load, even on the speediest modems, and can easily clutter a page), and he stays away from transparent images (which often load improperly). He usually chooses solid colored backgrounds (he seems to favor black and white) and uses hexadecimal code to generate the background colors of pages, text, and links.

Macrone notes it’s not as easy today to master HTML as it was when the codes were less extensive, but he insists that the best way to learn is still through exploration. He continues to explore himself, viewing the source of anything and everything on the Web that appeals to him, and he makes it a point to follow usenet groups in order to keep current. (See “Updating HTML skills,” page 87.) He’s also conscientious about writing clean code. “I pay special attention to my own HTML code readability,” Macrone says. “If I were to die tomorrow, someone could pick up and carry on with @tlas pretty easily by studying my source code. I make sure it’s neat and will often use comment tags and underscored lines for separating text. I don’t want to be the only one doing this job forever, so I’d rather not make myself indispensable and trap myself.”

Lynda Weinman explores @tlas magazine’s HTML code in her most recent book, Deconstructing Web Graphics from New Riders Publishing.

– 30 –

First published in Step-by-Step Graphics (September–October 1996)