post-next -Ted Drake's sketchbook » Museums

Eames film: making of the fiberglass chairs

Ted Drake — Tue, 15 Dec 2009 01:03:03 +0000

There’s a plethora of fascinating films by Charles & Ray Eames. This one illustrates how they created one of their fiberglass shells. I don’t re-post much, but hat tip to Kottke.

Museum Inside Information

Ted Drake — Tue, 18 Apr 2006 03:09:10 +0000

The golden boys and girls of the Museum web site community have put together a new blog to share inside information on what it takes to present a collection online. MuseMatic is a co-ordinated effort between the Museum Computer Network and the American Association of Museum’s Media and Technology Committee. While the design of the blog won’t impress the standardista community, the informaton within should.

Museums and other non-profits have an amazing collection of misfits, psychopaths, and egotistical maniacs. But once you get beyond the marketing departments, you’ll find people who love what they do and have an earnest desire to share their collections, art, history, and culture with anyone and everyone. Museums have been leading the drive towards accessibility, online interactions, user generated content, and doing so with the tiniest of budgets.

So step behind the scenes. Go past the paintings, the skeletons, and the gift shops. Share the lessons learned by some of the largest (Getty) and smallest museums around the world.

New Flickr Images

Ted Drake — Tue, 15 Nov 2005 07:10:17 +0000

When Flickr first began, I was intrigued by the hype and set up an account. After loading a few images, I frankly lost interest. I didn’t like the idea of putting a lot of time and energy uploading my work to someone else’s server. I wanted to work with a photo gallery that could be used by future clients, i.e. museums, who would never put their work on a communal site.

So, my Flickr account sort of sat there, ignored and dusty. Like the souvenir bottle from a short-lived summer vacation.

Now I’m working for Yahoo!, who purchased Flickr earlier in the year. As an employee, I get the super-dooper pro version of Flickr gratis. I wouldn’t dust off the Phoenix references just yet. I pretty much killed the old account. Nope, I’ve got the brand, spankin’ new Yahoo! employee turbo-charged Flickr fiesta foto gallery (lordy that sounds stupid). I’ve already uploaded about 450 images and look out for more.

I know the thumbnails are positioning themselves randomly. Frankly, I’m enjoying the impromptu layouts. Hit refresh for a new selection and new positioning.

post-art

Ted Drake — Thu, 16 Jun 2005 09:29:27 +0000

I am a frustrated web site designer.

In 1996, Creating Killer Web Sites introduced the world to web sites built with artistic merit. While the coding is outdated, this book continues to have a strong impact on my Internet designs.

I don’t want to create pages that are strictly functional. I want to create designs that reflect my personality. I want to create pages that are more than a one-liner statement. I want to create web site designs that are functional AND artistic.

However, I have not been able to translate what I see and want into a web design.

Other art mediums require gestural movements. Line qualities change as pressure is applied to the pencil. Surfaces age and crack and the artist can affect the texture’s sheen, and luminosity. Colors flow organically and rarely do you see a sharp delineation.

But not on the web.

How can a web designer bring texture, history, and gesture into a web design?

Texture

There have been some advances in representing texture. Apple has made the brushed aluminum texture de-rigueur for the non-PC crowd. Shiny, luminescent buttons have been around for years. Emboss, glow, drop shadow, and inner shadow are all tools of the trade to give our web sites dimension.

But as successful as these effects may be, they lack the tactile quality of heavy woolen fabric, an ancient wooden crucifix scarred by years of candle smoke and burrowing insects, the sheen of a bronze sculpture touched by scores of people over the centuries, or the crusted surface of an ancient Buddha after generations of offerings.

Cameron Moll’s series “the Wicked Weathered Look” showed web designers how to give their graphic a weathered look.

While the wicked worn technique utilizes source material that is authentic in its wear, the process is still too exact. You cannot fake randomness. Walt Cotten taught me this difficult lesson when I was his student at SDSU. He would encourage us to close our eyes when we attacked a stone, negative, or assemblage. How can we, as web design artists, allow our designs to age naturally?

Shadows

Drop shadows have also become an indispensable part of web design. The web is inherently a flat medium. Just as a drawing or photograph uses perspective and tonal values to create the illusion of three dimensions, the web designer uses shadows and glows.

In the natural world, there is normally a key light source and multiple fill and accent lights. The savvy designer will remember to use a global light source in Photoshop to avoid graphics that imply multiple key light sources. While this helps, it is rare to see the designer that incorporates the concepts of fill light and the effect of dimensional surfaces.

The tactile surface of a Rodin sculpture, with the impressions of his strong hands will not create the same shadows as the machine-smooth surface of a Brancusi Bird in Flight.

Architects and furniture designers use recessed lines to create shadow lines that separate the various planes of a building or table. An incised line below the tabletop can give it the illusion of floating on legs. Inset windows not only protect the interior from sun but may also give the building a sense of security and solitude within.

Decoration

The Bauhaus rebelled against the elitist, decorative approach to architecture and design in the early 1900′s. Against the backdrop of Victorian, Pre-Raphaelite, and Art Nouveau, the Bauhaus ethics of pure classical lines and lack of ornamentation seemed revolutionary. The Craftsman movement in England and especially the United States also celebrated the simple lines and graceful proportions of handmade objects.

Were these movements a rejection of decoration or decoration for the sake of decoration? Certainly the textiles of both movements incorporated patterns and lines with a nod towards the textures of natural materials.

Andy Clarke recently wrote about creating a set of elements for his latest web site design before actually creating the layout. This allowed him to set the tone of the design before building. Each element was used with care. Often times, the bones of a site are built and decorations are added as jewelry. In today’s bling-obsessed world, this has often resulted in riotous pages that dismay the visitor.

While visiting the Louvre recently, I noticed the decorative elements of ancient paintings and objects. The Greek and Roman frescoes and mosaics use decorative elements to differentiate the various elements. The handwork of a tile setter on the mosaic floor of a bath keeps the design intriguing while not distracting from the central figures. The decorative embellishments in an illuminated manuscript illustrate the page’s contents while offering rest to the weary eye.

So, what are the answers?

I don’t have the answers, hence the first sentence of this essay.

I do, however, have some suggestions and those that are better web designers may have some more practical answers to increasing the visual power of web designs.

Texture

There is no substitute for natural texture. Use photographs of aged copper, the limestone walls of Paris, California beach sand at sunset, the whitewater of a river in Canada, or mineral deposits of a hot water pool in Iceland. Why try to recreate these elements in Fireworks when the real world is just outside.

For years, people have created rubbings of tombs and reliefs as souvenirs. Use this on your web site. Go outside with a piece of paper and pencil, find an interesting texture and capture it by placing the paper against the object and rubbing the backside with the pencil. Scan the paper and you have an authentic texture to work with.

Shadows

Wire frames are used to co-ordinate the layout of a page. Why not use a wire frame to describe the three dimensions of a layout if you plan on using shadows. This would encourage the use of shadow lines, elements that catch a highlight and the scope of the shadow they cast on the surface below.

Objects do not have strong outlines. Light wraps around subjects and shadows blend into the lighter sections of an object. Study Carravaggio’s use of chiaroscuro or Leonardo Da Vinci’s sfumato techniques. Think about using backgrounds that dissolve rather than have outlines.

Study the light coming out of a sconce. There is a distinct play of light between the darker surface and the light reflecting on the wall.

Decorations

Consider the purpose of your decorations. Are they meant to embellish or are they the star of your design. Use found decorations instead of creating them in your favorite imaging software. Appropriate the borders of photographs, prints, mosaics, tombstones, and more.

Usability and Accessibility

I want to create pages that are not accessible. I want to create pages that have texture so thick that the text is obscured in a blur of dried chemicals. I want to explore surfaces that have been etched by years of exposure to wind, rain, and the hands of passersby.

I want these in a web site but know that it would mean creating a web site that cannot be read and this violates my interest in accessibility. A site that offers content, should offer that content to everyone, regardless of ability. I can’t justify the dark, obscured site with low contrast for the visually adept and a bare, unstyled version for those with low eyesight.

Alternate style sheets could give visitors the option of choosing which design works the best for them. For instance Gerhard Richter has two distinct painting styles. His photo realistic, muted paintings of blurry photographs stand in stark contrast to his colorful abstract smears.

As I sit here writing this essay, the sun is dropping lower in the sky. The light is skimming across the Haussmann-era building next door to this coffee shop in Paris. The dentitions under the roof, the faux-columns framing a window with rococo flourishes are capturing bits of light and casting shadows within their crevices. The sun’s position in the sky has brought the surface to life.

I can’t wait to do the same to a web site.

post-inuit

Ted Drake — Fri, 22 Apr 2005 05:17:21 +0000

Last week, at the Museums on the Web conference in Vancouver, I hosted a workshop with Brian Rountree on building museum web sites with web standards. We used the web site for the Inuit Heritage Trust, a small organization that is preserving the Inuit culture, as an example.

During the workshop, we discussed why museums should consider the shift and the steps involved in converting the I.H.T. web site. I’ve just put together a description of this conversion. Please take a look at our first installment on museum web site facelifts.

I haven’t had time to trouble shoot this site in Opera, Safari, and IE Mac. If you see any problems, please feel free to send me a comment.

Let the games begin

post-workshop resources

Ted Drake — Wed, 13 Apr 2005 23:23:00 +0000

This list was put together for people attending our workshop on converting museum web sites to standards-based programming. I hope you find them helpful. Ted -04-21-05

This list of bookmarks will lead you down the yellow brick road of standards-based web design.

Enjoy

Gurus: Eric Meyers; *; SimpleBits; Signal; Mezzo Blue
Coding Examples: list of helpful sites; sort a table = brainjar; Web Development; CSS Frames | Lab | 456 Berea Street; whatever:hover; CSS Layout Resources; Inline Popups: Blakems.com ★; The tag library; IE Doubled Float-Margin Bug – CSS fixes and workarounds; stock.xchng – the leading free stock photography site; search for cms; CSS Rounded Box Generator; Couloir.org: Resizing, Fading Slideshow Demo; mezzoblue § DHTML ’05; LITERARYMOOSE.INFO: CSS Destroy Experiments > Synopsis > Button Bughouse; Picment.com » Journal; CSS/DOM-based Draggable Magnifiers [persistent.info]; The Amazing Rolloverer; BrainJar.com: Experiments in Web Programming; Negative margins for 3 column layout
weekly reads: css Zen Garden: The Beauty in CSS Design; Kaliber10000 { The Designers’ Lunchbox ™ }; A Whole Lotta Nothing; CSS Vault » The Web’s CSS Site; Design by Fire; Digital Web Magazine; sidesh0w.com; webgraphics; What Do I Know; Yellowlane; Accessify.com – all the tools, links and resources you’ll ever need to make your web site accessible.; clagnut – stick around why don’t you; Living Can Kill You – saila.com; OK/Cancel; ongoing; Simon Willison’s Weblog; : : Speak Up : :; SuperfluousBanter: Daily Musings and Commentary; Web Standards Awards; The Weekly Standards; World Wide Web Consortium; Forever Geek :: Nerds are for Dorks; Version 2 » Monthly Redesign Contest; kryogenix.org; QuirksMode Homepage; Accessify Forum: Accessibility Discussion Forums; 456 Berea Street; Front Page – css-discuss; chrispederick.com; all in the — ponderings and code by drew mclellan; Veer: Ideas
Daily Reads: Jeffrey Zeldman Presents The Daily Report; meyerweb.com; asterisk* | D. Keith Robinson’s Web Design Blog.; SimpleBits; Weblog / Blog: Signal vs. Noise (by 37signals); mezzoblue § design, typography, and the web: live from vancouver, b.c., canada; Blog | 1976design.com; The Web Standards Project; Hicksdesign; Photo Matt-Unlucky In Cards; splorp . blog; molly.com; ShaunInman.com; And all that Malarkey; seriocomic :. rhetoric; Web Development News; Search Engine Optimization; Blog Business Summit; Digital Web Magazine; Stopdesign; Airbag — Devaluing the Market.
Forms: XForms Essentials; XForms Tutorial; DHTML Kitchen: Forms with style; Build Accessible Online Forms; Chiba Home; Forms; HTML – Accessible Forms – HTML Dog; W3C DOM – Form error messages; Web Forms; slayeroffice | dynamic date dropdown
Navigation: Son of Suckerfish Dropdowns – HTML Dog Blog – HTML Dog; BrainJar.com: Tabs; buttons | minimal verbosity; Inverted Sliding Doors Tabs | Lab | 456 Berea Street; CSS-based Dropdown w/a twist; Tabbed navigation with “sliding doors”
Accessibility: Accessify.com – Tools and wizards to help make your web site more accessible more easily; HTML – Accessible Links – HTML Dog; colorblind check; And all that Malarkey [Accessibility: On a shoe-string]
Colors and Graphics: fluid shadows.; Color Blender; EasyRGB – Color harmonies, complements and themes.; The Iconfactory: Your Quality Freeware Icons Hub (ware.asp); Introducing sIFR: The Healthy Alternative to Browser Text; wicked worn look; Colors; slayeroffice | tools | color palette creator v1.6; hexadecimal colour calculation; That Wicked Worn Look ~ The Series ~ Authentic Boredom; Nifty Corners; Disjointed rollover images

post-workshop

Ted Drake — Wed, 13 Apr 2005 22:24:51 +0000

We finished our presentation on introducing web standards to museum web sites this morning. We used the s5 slide show from Eric Meyers. It was much nicer than the power point format. I really enjoyed the flexibility and the ability to edit on the fly.

For those interested, here’s the presentation: Standards-based Web Design for Museums. Check back, we will be adding a list of resources very soon.

post-vancouver

Ted Drake — Tue, 12 Apr 2005 00:02:02 +0000

I’m in Vancouver for the Museums on the Web conference. Brian and I will be holding a workshop on how museums can convert their web sites to standards-based design. We will be featuring the conversion of one of the participant’s web sites to standards. I haven’t done the final tweaking, but here’s a sneak peak of the original: and the new.
More to come soon.

post-museum

Ted Drake — Mon, 24 Jan 2005 05:49:15 +0000

I was the web site manager for the San Diego Museum of Art for five years. I learned a lot during that time. I went from a wysiwyg hack using Net Objects Fusion to getting my feet wet with hand-coding, e-mail newsletters, Flash, ASP, and finally took the dive into standards-based programming.

Working for a museum is a great experience. The majority of the people are there because they love what they are doing. They work for less money but tend to get more freedom to explore and learn new techniques and technologies. While at the museum, I had the opportunity to attend numerous conferences on digital asset management, copyright laws, and emerging technologies.

My favorite conference was the Museums on the Web conference. This annual event brought museum web site managers, marketing directors, and curators together from around the world. I was fortunate to present two mini-workshops in the past, E-Mail Newsletters for the Museum and its Visitors in 2002 and Fresh and Interesting Features for any Budget in 2004.

This year, my partner Brian Rountree and I will be presenting a half-day workshop, Standards: the benefits of web standards for you and visitors to your site, at the Museums on the Web conference in Vancouver, Canada. We will be giving an introduction to the history of web design, the tag soup that we are wading through, and the future of standards-based web design. More importantly, we will show how museums will benefit from a conversion to standards-based web design. We are looking forward to this opportunity and encourage any museum web site manager to get their museum to sponsor a trip to this conference. Even if you miss our workshop, gasp, you will find the week well worth your time and money.

Building a standards-based form

Ted Drake — Thu, 30 Dec 2004 01:53:11 +0000

Most web sites will require a form or two. Purchases, weather requests, contact forms, and even “Guess the number of dust bunnies under David’s desk” contests. In the past, forms were set up with the miracle table and that worked just fine. After all, they looked pretty. What more could we want?

How about an accessible form that can be navigated with a keyboard instead of a mouse? How about a form that can be used by the blind? How about a form that allows people to purchase stuff on their cell phones? How about all of this and more in a format that is sooo much easier to build and maintain, not to mention faster download times?

Does this sound impossible? Miraculous? The answer, once again is semantic coding. Let’s go back to the beginning of the HTML history books and look at some simple tags and how they should be used properly.

A form can include one to many inputs. On larger forms, these inputs can be grouped into similar subjects, such as personal information, address information, credit card information, etc. Somehow, we need to label the inputs to give users an idea of what they should tell us. These basic demands are the building blocks of an accessible form.

The Wrapper

Forms use a

tag to group similar inputs. The entire set of inputs can be grouped inside one fieldset and sub groups can be nested within the fieldset, creating one big set of fieldsets. Think of it as a box inside a box inside a box… Or, the form could have one or more fieldsets that are not nested within each other. It all comes down to the subject matter of the inputs.

Here’s a good example of nested fieldsets

Here is an example of non-nested fieldsets

Look at your information and decide if there should be one or multiple fieldsets. Visually, there is a border around the fieldset by default. This border can be removed with style sheets. Avoid using background colors, Internet Explorer will not show them correctly.

Fieldsets have a convenient tag that goes directly after the opening

tag. The legend tag is used for adding a short descriptive header to the fieldset. The default styling features a square box around the text. The border can be removed with the style sheet.



Describe the Form

The Inputs and Labels

To make a form comply with accessibility standards, each input needs a label. Conveniently, there is a label tag. When a visitor sees a form with the label tag,A form isn’t of much use if there are no input fields. These are very easy to work with.

There is a tag to give a label to each input.

These are really cool. The label could go anywhere on the page and it would still be associated with the input field. If someone were to click on the label, it activates the input field, this makes it much easier for someone with limited mobility to activate a check box or radio button. To do this, we add a for=”xxx” attribute to the label and the input gets an id=”xxx”. This tells the label to look for the input with the same value.

Enter your Name

Let’s put together a simple form




Join our mailing list

Your Name





Your E-Mail Address

Pretty simple, huh? The tag will keep the fields from running together. Style sheets can give the form the look desired.

Visit www.picment.com and www.stuffandnonsense.co.uk for more information.