Paper: crucial to Web design

At first thought, Web design is a digital job. But as long as I have done this work, I’ve had paper on hand.

In the 90s I’d quickly sketch different ideas for overall design, narrow it in, and then sketch out the plan to create the layout with tables, complete with pixel dimensions for each cell and notations on margins, borders, and padding. I’d annotate the sketch with hexidecimal codes for colors to use. The process placed ink before pixels.

As CSS gained ground and the industry left table-based layouts behind, I sketched fewer details, but usually still rapidly drew thumbnails of page layouts on paper before settling in.

For a time, I thought I could do most of this work with computer programs as my primary tools: Word, Excel, Photoshop, Fireworks, Flash, Dreamweaver, and straight textual coding tools like BBEdit. Later, OmniGraffle joined the toolbox, and I did first-round design digitally.

Ink before pixels again

notebook-sitediagramOver the last six years paper and ink has again become my first tool. Hand-drawn sketches and notes are fast and fluid—far moreso than code or Photoshop.

With a quick sketch in hand, the coding can leapfrog some easy-to-make first mistakes. For instance, last week I needed to create some screens for a 3 page sign up process. I spent about 30 seconds drafting two quick page layouts on paper before I jumped into Photoshop and Dreamweaver to create the graphics and code it up.

By doing the second sketch, I was able to make better use of a design grid and utilize white space more effectively. That’s 30 seconds well-spent, and it means I didn’t have to waste time in Photoshop or with code on a design that had whitespace problems.

Good paper is worth it

When I started my latest job, I asked for some paper to sketch with. I was provided with some cheap cardboard-backed white notepads. Each pad fell apart within a week or two of use, and was better suited to ripping sheets off then holding together. Irritating!

I started to use my own notebooks for work, and just a couple weeks ago purchased a set of Moleskine Volant notebooks. They are softcover notebooks about 5 by 8 1/4 inches, and are well-bound with excellent ruled paper. I think they’re the best notebooks I’ve ever had.

Let’s stop playing Frankenstein

Consider the monster from Mary Shelley’s Frankenstein:

The creature is described as being about eight feet (244 centimeters) in height, with translucent yellowish skin that “barely disguised the workings of the vessels and muscles underneath”, watery, glowing eyes, flowing black hair, black lips, and white teeth. (http://en.wikipedia.org/wiki/Frankenstein%27s_monster#Appearance)

I read that phrase describing the skin of the monster, that it “barely disguised the workings of the vessels and muscles underneath.”

My hands have worked on Web pages that were little more than that yellowish skin.

It’s no wonder customers fled in terror.

By now, most of my nameless monsters have died off, thanks to the hyper-life-cycle of the Web, but recently I gained a new perspective of how ungainly, ill-proportioned Web sites are created.

HOW TO MAKE A MONSTER OF A WEB PAGE

If you want to create a monster of a Web page, the trick is quite simple: Work, work, work at it, one page at a time. Write the code, make it work, make sure the forms submit. Whip up some error text, insert some confirmation screens. Check the boxes on your to-do list of functional requirements. Light it up, and let it out onto the world.

But wait…isn’t that how most of us get our jobs done? These days, we like to call this kind of heads down, busy-work “Agile.”

HOW TO STOP PLAYING DR. FRANKENSTEIN

Step away from the keyboard, Doctor.

Pick up a pencil. Draw out the whole process from the point of view of each actor, be it a person or some agent like a search engine robot. Draw pictures using easy graphics, like Garrett’s visual vocabulary palette, and be sure to include every point of contact with an actor.

Having done this recently, it became clear immediately that there was a series of email messages interspersed amongst Web pages, and that those emails were as important as any single Web page.

Also, the timing of those emails was important. For instance, Jim uses a Web page to send an email message to his friend Bob. Jim then sends an instant message to Bob asking if he signed up yet, assuming that Bob did in fact receive that email message and was able to decipher it. Those are two tough assumptions.

Each piece of a larger process overlaps with its adjacent pieces in a series of feedback and feedforward communications. Once we have these communications, these pages, emails and so forth, laid out with balance, proportion, and clear purpose, a more beautiful creation can take hold.

Nurturing and shaping this flow of interactions between people using a system is a great step in putting an end to the monsters we’ve become so good at creating.

Once we’re into this process, we invariably realize there are many more questions to ask, but the point is this: Design processes, not pages.

Perspective: Websites are fleeting.

I was glancing through some files in some webspace I’ve had for a while, and ran across a fairly old portfolio page I had. It listed seven websites that I had worked on around that time.

This was probably about seven years ago, so sometime in 2001 or so.

Not only is there not a trace of my work on any of the sites, only one of them actually even exists anymore. The rest are holding pages from the registrars or host providers.

I had forgotten that I had worked on a couple of them, until I saw the screenshots. Around that time, I had estimated that I had worked on about 100 websites. That’s the last time I tried to keep track. How many are left? How many would I remember?

It doesn’t matter, really. So, as I think about sites that I’m involved with in some way these days, they seem less important to me somehow, when I think that in a few years, they too will be gone.

Here are the screenshots, in memoriam.

Web design of the MSU admissions office viewbook
Web design of the MSU admissions office viewbook
Web design for MSU's Ag Expo
Web design for MSU's Ag Expo
Web design for MSU's Merrilat horse farms
Web design for MSU's Merrilat horse farms
Web design for MSU Detroit College of Law Amicus publication
Web design for MSU Detroit College of Law Amicus publication
Web design for MSU Health Education site
Web design for MSU Health Education site
Web design for stuSource.msu.edu
Web design for stuSource.msu.edu
Web design for University Relations at MSU
Web design for University Relations at MSU

Perspective 2 Studio is hopping!

Screenshot of the Perspective2 Studio web page.
Screenshot of the Perspective2 Studio web page.

This past summer my friend Adam (of Envision Internet Consulting) and I worked with Lynne Brown and Matt Schulert of MediaGraphics, Inc. on a website for an exciting concept of Lynne’s, called Perspective2.

The idea was to create a studio space for the artists and producers in the area, and, wow, has it taken off!

It’s been exciting to see Lynne pull it together. When we first started talking about the website, they had just acquired the building space in Lansing’s Old Town, and she was wrangling with contractors and deadlines, shooting for a Fall 2007 opening.

Well, they built the space and opened their doors, and the few times I’ve stopped in since, there is always something going on. Last time it was a photo shoot. The time before that, a local photographer was preparing to teach a seminar on “Photo Raw” in one studio, while a photo shoot was going on in the other. They’ve had theater companies in for shows, and have recently added a baby grand piano. What fun!

Community is another aspect of the picture. With a space like this that draws creatives in, the community and connections can only grow stronger and more supportive of each other. (Hey, I can be an optimist.) Lansing needs more art, and this is a way to help the local creative sector grow in visibility and viability. Awesome.

So, this to say, if you are a photographer, videographer, need meeting space for a seminar or small conference in Lansing, P2 is pretty cool. Check it out.

Design connections

A couple days ago I stopped into the Com Arts building at Michigan State University to meet a new professor in the journalism program named Karl Gude. [Karl’s blog]

I heard about Karl from my friend and colleague Liz Weber who handed me a clipping from the MSU News Bulletin which explained that Karl had been the Director of Information Graphics at Newsweek, had brought together a conference on information architecture (or info graphics), and was now teaching at MSU.

Regardless, I was excited at the news that someone with such great experience in the information graphics field was so close to home!

I found Karl to be enthusiastic about his work and the field, and he shared with me a couple names and examples of work.

Alright, so why am I hyped about this?

Till now, I think it’s been a gut-level feeling that this a good thing. If I put words to it, it’s because as I’m leading this Web Design Team in ACNS at MSU, I realize more and more that we rely too heavily on words and numbers to communicate important information. So often, that textual information can come alive and communicate so much more effectively if we lay it down as an information graphic. Right now, frankly, we suck at this, but I am determined that we will get better at it.

Restricting search indexing to sections of a web page

If you think about websites as having different page types, with each page type having different sections within it, such as content sections, navigation sections, and footer sections, it becomes apparent that the value of a particular page is defined by the content on the page that is unique to that page. Sections like footers or site-wide navigation systems are repeated on each page, and give no specific extra value to that page.

So, it would be helpful to be able to instruct search engine robots to not index specific areas of the web page. Here’s a wireframe of what I’m thinking.

Wireframe showing regions of a page that should and shouldn't be indexed by search engines.
Wireframe showing regions of a page that should and shouldn't be indexed by search engines.

How? Well, I haven’t found a real solution. Here’s an idea though.

We could extend XHTML with a schema that would include the ability to add attributes to elements like DIVs, ULs, OLs, Ps, and so on.

The attributes could be along these lines:

<div robot-follow=”yes” robot-index=”no”>Stuff you don’t want indexed here</div>

Of course, then the makers of the bots would need to program to heed these attributes.

So, yeah, all-in-all, a fairly impractical idea as nothing is implemented. However, if it were, I would use it on many websites.

New Ph.D. program site at MSU College of Education

A day or so ago, Adam of Envision Internet Consulting released a new website for a graduate program in Education at Michigan State University.

The program is the Curriculum, Teaching, and Educational Policy Ph.D. Program at the MSU College of Education.

The new site took a lot of work and I think it looks great. It also exemplifies many web standards and accessibility practices.

Congratulations to the people at the MSU College of Education and Adam!

(Now if only the main MSU College of Ed website would step up…)

Change in web design is emerging, again

There is a new kid on the block, and her name is “I’ve never designed with a table in my career.” To her, our old ways often seem strange and confining, and it is within this generation that we will most likely see more departures from what design conventions have emerged in the past decade.
Thinking Outside the Grid by Molly E. Holzschlag

I love it. I saw some of that last week with a cool way of creating box widths that varied based on the text zoom in a browser. That’s just the beginning.

Ajax is causing shifts in the model of web-based interactions, and the web design community is beginning to leave the table-mindset behind, despite the fact that many of us haven’t designed a table-based layout in years.

Empty the cup.

Phi, phi, design notes

Just for the sake of me jotting this down somewhere…

Phi (the golden ratio) is approximately equal to 1.6180339887498948482.

phi is the decimal part of that: .6180339887498948482.

When laying out two column widths on a web page, using phi as the percentage of the wider column often provides a nice visual balance.

So, two columns would be set to width: 62% and width: 38%, which together add up to 100%, in order to approximate this ratio.

We’ve used this in the past on a few sites, including Wharton Center. I know we’ve used it to help layout others, but I just can’t think of any other sites right now.