Archive for the ‘The Web and Design’ Category

I’m Buying an Apple iPad. This Will Change Things.

Wednesday, January 27th, 2010

People that say that the iPad is just a big iPod/iPhone are missing the point.

This will change things. A lot.

This device is certainly cool. I won’t be buying this because it is cool, but because it will make every other computer I have a more useful and productive tool.

I’ve got an iPhone, 2 labtops (PCs), a desktop (also PC), and an xbox, if you want to count that as a computer. I don’t need an iPad. Everything the iPad will do can be done on one of my other devices.

For most of those things, however, my iPhone is either too small, or my labtop is needlessly big and clumsy. Checking email, posting to twitter, quick updates to my blogs, facebook, reading RSS feeds, commenting on other blogs are a touch difficult on the iPhone because of its size, and while my labtop is powerful enough to do all of this easily, it is not very portable.

This tablet will be my “casual” computing device. I will use it to check email, read twitter and my RSS feed, download pdfs, and browse the internet. The size is big enough not to be an eye sore, like the iPhone, but small and portable enough that I can lounge about at my coffee table, or sit in bed. I have a feeling that for all of these casual computing and internet tasks, this tablet will be the baby bear device: not too big, not too small, but just right.

The beauty is my other devices will be free to do what they do best.

My iPhone will still be a phone, ipod, and on-the-go internet device. I’ll be able to post to twitter, update foursquare, and check my email on the bus, walking to work, or at a party (lame, yes, but important when you launch new product for sale that day).

My labtops will be movable work stations, and I’ll be able to use them for what they do best, writing code, creating written content, and editing audio media. My desktop will be my primary media storage device, and image and video editor.

The biggest challenge for me is that computers do too much. When I am writing a blog post, I am working on a machine that also connects me to email, RSS, my music, twitter, can be used to update the code of my websites, can create audio media, and on and on and on. Even when I don’t have these applications fired up, the fact that email is just a mouse click away is a distraction when I am editing an article.

My hope, and faith, is that this tablet will create a hardware separation between these applications. Right now, my computers are be-all, do-all devices. They do everything, and it’s too much for me. When I am working at my labtop that I use for everything, it becomes harder to focus on one thing.

When I am working on my computer, I don’t think about doing my dishes, folding my laundry, or reading a book. There is a hardware separation between those activities that helps me keep these separated in my mind.

(Sure, it may be funny to think of labtop and a dish sponge as separate hardware, but it works for me)

I don’t have a hardware separation between twitter and Notepad++. Interacting on twitter and writing PHP code for my WordPress installation are pretty different tasks, as different as checking email and doing dishes are. Having one machine that does both keeps me a little distracted from either, even when I’m not consciously aware of it. I may not know that this happens, but I feel that this happens.

I imagine that I will use this tablet when I want to quickly check my email, or post on twitter, read some articles, or something else that has to do with social interaction, contact, and media consumption.

I’ll fire up my labtop when I want to write code, or write a blog post/email newsletter, or edit images or a podcast or something. My computer will be a content creation device again, and I will (hopefully) be able to break the distractions in this process caused by content consumption.

My other computers will once again be tools for primarily getting work done.

I could probably write another 500 to 1000 words about how this tablet will change how media is consumed, blah blah blah, and it probably will. This will have an impact on the arts, media, and all sorts of stuff.

Ultimately, however, having a separate device that mixes the best of how an iPhone accesses the internet with the best of how a labtop access the internet is going to make me more productive.

That alone is what sold me on this device.

What do you think? Is this device the future? Are you going to get one? Why or why not? Leave me a comment, let’s discuss.

Web Art: Some Examples

Saturday, September 12th, 2009

In previous posts, I have brainstormed on certain qualities that may help to define what is unique about art created for the.  Keep in mind, when I say “web art”, I don’t mean art done in traditional mediums and merely displayed or distributed using the internet, I mean artwork that is created to use the internet as the medium to make the artwork.

Past posts in this series have talked about what web art may be, and some of the qualities that define it.  You can check out these previous posts here:

In this post I am going to discuss a couple of examples of honest to goodness web art, so that you can get an idea of what exactly I have been talking about.  These examples each show at least some of the qualities of web art that I discussed previously.

Piano Etudes

First up as an example is Piano Etudes by Jason Freeman.  The artist composed and performed these Piano Etude (short pieces of music for piano), but then went a step further.  The recorded music was broken up into little pieces, and the user can arrange these pieces however he would like, creating his own arrangement.  The user gets to work with short pieces of music created by the artist, and the result is a collaboration between the artist and the user.

This collaboration is a little different than the usual artist collaboration, where two artists work in tandem to create a finished work.  In this collaboration, one artist creates the building blocks that can be used, and the user assembles them.  In this way, the user becomes an artist themselves, as he plays an integral part in creating a finished piece of music. 

Here is an example of Piano Etude 1 arranged by composer, friend, and frequent blog commenter Tiven.

These Etudes incorporate non-linearity in an interesting way, and also relies on user interaction.  This type of project is unique to computers, and to the internet.  This type of experience cannot be created with traditional media.

Web Yarns

Alan Bigelow makes interactive stories.  You can find them at WebYarns.com.  Each one of these requires the user to guide themselves through the story, which is presented with words, images, and sound.  The path through his stories are often non-linear, the user must determine the path through the story.  The artist does not have total control over the experience, and lets interaction by the user play a large role in the unfolding experience of this work of art.  

I was particularly drawn to Because You Asked, perhaps because of my affinity for self-portraits.  I suggest clicking on the link before reading more, because I will be talking about the specifics of the piece of art.  The final multimedia portrait that is created as the user navigates the work of art is pre-determined, but the path, and the experience while that final product is created is up to the user.  The start point and the end point are set, the time and order in which each of the phrases that make up the portrait is up to the user.  Some aspects of the progression of time are left up to the user to determine, such as when certain phrases are revealed, but other aspects of time, primarily how long it takes for the final image to emerge, are part of the programming.

= = = = = = = = = = =

As I find new works of web art that I find interesting, I will post them here, and discuss them.

Coming up next, I’ll wrap up this series, and in particular discuss the relationship between programming and creativity that is a unique part of web art.

Vote for OnlyTheValiant.com!

Tuesday, September 1st, 2009

This post is a quick break from all of the posts talking about Web Art, I’ll return you to that regularly scheduled programming tomorrow.

I submitted one of my websites, OnlyTheValiant.com, into a WordPress design contest over on FresheVenture.com. Please take a few seconds to vote for my site.

I love to design websites using WordPress, because it is a very flexible and adaptable framework to build sites off of. It isn’t perfect for everything, but it is fantastic for a lot of things. I’ve spent quite a while really understanding how WordPress works, and put a lot of that knowledge to use with OnlyTheValiant.com.

I’m very proud of that site, I think it has a clean layout and effectively promotes the most important content on the site. I spent a lot of time working to make sure the sight had all of the information it needed, and also wasn’t cluttered.

CLICK HERE to vote for the website

After you click, scroll down the page till you see OnlyTheValiant, check the button right next to it, and click on VOTE.

It takes less than a minute, and is a great way to support my design work. Thank you!

If you are interested in more of my thoughts on the design of OTV, I wrote up some of my thoughts on my personal blog. The design of my personal blog is incomplete (ie. non-existant), but the content is there: OTV Design Considerations.

Qualities of web art: Variety in Time and Presentation

Monday, August 31st, 2009

In this series of posts I am discussing the web as an art form, and what exactly that might mean. Feel free to check out the previous posts in this series:

In this post, I will be continuing to discuss particular aspects of the internet that may help show how web art can be different than any other artistic medium.

Time can be partially controlled (or not controlled)

Building on all of the previous aspects mentioned, time can be controlled, or not controlled in a work of web art. In video and music , time is controlled. Things are experienced in a sequence, and that sequence is determined by the artist. In other traditional mediums such as paint or sculpture, time is not controlled, and the viewer can experience the work of art for as little time or for as long a time as she likes.

With web art, time can be controlled, and further, it can be controlled either by the artist or by the viewer. With programming, an artist can force something to happen after a specific amount of time, or this can be left up to the viewer to decide when to move the mouse or type on the keyboard to make something happen.

When I go to a museum, I can spend 5 minutes looking at a painting by Mark Rothko, or spend 3 minutes looking at a dozen paintings by Piet Mondrian. In this traditional example, I , as the user, have the control over the amount of time that I spend looking at each piece.

With web art, the amount of time that the user has to experience and interact with any particular part of a work of art can be controlled, limited, or be given a minimum amount.

A piece of interactive web art, for example, could give the user a few seconds to interact with it and give an instruction before it executes a default instruction, it may not allow the user to proceed until giving an instruction, or it may require the viewer to examine and experience one particular aspect of a work of art before it allows or forces the viewer to move on to another part of the piece of art.

The ability for the artist to control time, or to hand off that control to the viewer, is particular to art on the web.

Presentation varies from viewer to viewer

What browser are you using to view this website?

If you are using Internet Explorer, things might not look quite right. This site looks downright wrong in Internet Explorer 6.

If you are using Safari, the site probably appears a little smaller than in Firefox, and the colors are a little brighter.

Is your browser maximized, taking up the entire computer screen, or is it a window? How big is your screen, for that matter?

A website is a different experience for me on my large, 24” desktop monitor than it is on the small, 14” labtop screen I am writing this on right now.

The computer a person uses to view a website, the browser they use, and how they use it all contribute to the user experience of the website, and therefor, the art itself.

The implication of this is that the art may not be the same each time it is viewed, due entirely to the hardware that is used to view and display the art. Further, it is possible to program something on the web to behave differently if different browsers are used to view it. This kind of variety removes some of the definitive qualities of a work of art, since the experience of viewing it can be changed based on what and how the viewer chooses to experience it with.

Coming Up Next

In the final post in this series, I will wrap all of this up, and see what it all means, and maybe even see some examples of what I have been talking about.

Qualities of Web Art: User Interaction

Friday, August 28th, 2009

In this series of posts I am discussing the web as an art form, and what exactly that might mean. Feel free to check out the previous posts in this series:

In this and the next couple posts, I will be continuing to discuss particular aspects of the internet that may help show how web art can be different than any other artistic medium.

Users interact with a website, and therefore, the Art

At the most basic level, user interaction has been part of the web from the beginning. Even the earliest web pages required the user to input URLs, and click on links to navigate. Any piece of web art is going to rely on user interaction to at least this degree.

User interaction has taken on a whole new meaning with newer web sites and applications, dubbed as a whole as Web 2.0. Websites and features are much more interactive than they were in the past, as web programming has allowed programmers to write code for much richer and interactive sites.

User interaction can take on a new level with web art, where in the viewer can have a fundamental role in creating the art and its presentation.

Referring back to the programming nature of web art, the user has two roles he can take with respect to the art: he can supply data to the program, and he can give instructions to the program.

Supplying data into a program can be as simple as entering a word into a text field, the user’s name, for instance. The program can then store and manipulate the data. It can use it then, right away, or it might store it away for use later on in the experience. The ability to store and hold on to data is fairly unique to programming, though fundamentally it works like Mad Libs.

With Mad Libs, the user is prompted to enter nouns, verbs, adjectives, etc. When the user is done randomly generating these words, a story is created, using these words to fill preassigned places in the text. Hilarity ensues.

Programs have the ability to do this, but to a much greater degree. Data can be entered, stored, manipulated, and outputted. All along the way, any number of things can be done with this bit of data. This is again one of those things where the options are so vast, that it is nearly impossible to describe just what is possible.

The second fundamental role the user takes is to supply instructions to the program. The actual action is very simple, and usually consists of clicking on links or buttons, and scrolling with the mouse. The results of these actions are up to the program to determine.

At the heart of instruction is choice, and that is what the web site is fundamentally getting from the user. When ever an instruction is made, a choice is made. After a choice is made by a user, the experience is guided, to at least some degree, by the user. This choice is at the heart of interaction.

When the user is given this ability to decide what the work of art will do, the artist loses some control over the final work of art. Taken to the most extreme degree, the work of art could end up as just a set of tools that allows the user to create the art themselves.

An implication of this is that every instance of the work of art may be a collaboration between the artist and the viewer. One work of art can take on many meanings based on the input and direction the user gives the program.

Taken to an even greater extreme, since a program can by nature store information, the choices and input that one viewer makes can be stored and carried on to the next viewer. The art can continually evolve and change as each viewer gives their own input and instructions.

A virtual canvas where everybody has the opportunity to paint one mark on the canvas, which is then saved and built upon by the next viewer is an example of how this may function.

Coming Next:

In the next post, I will discuss two more aspects of web art, control of time, and user variation.

Qualities of Web Art: Non-Linearity

Thursday, August 27th, 2009

In this series of posts I am discussing the web as an art form, and what exactly that might mean. Feel free to check out the previous posts in this series:

In this and the next couple posts, I will be discussing particular aspects of the internet that may help show how web art can be different than any other artistic medium.

Webart can be nonlinear

Most traditional artistic mediums are linear. The viewers experience of them progresses in a specific order. Music and video are examples of this. Music is listened to note by note, and video is viewed frame by frame. You do not experience these separate pieces out of order. Poetry and Prose are the same. The viewer may experience them faster or slower based on their preference, but they are meant to be experienced in order.

Painting and illustration are even less linear, since they do not change over time. The experience of them is more of a point than a line, though the viewer gets to decide how long they will view the work of art for.

Sculpture is the only traditional medium that is non-linear, since the viewer can walk around it, and experience it from many different angles, and get many different views of it. The viewer gets to decide how to walk around it, where to look, and when. There is no “proper” way to look at a sculpture.

Another defining characteristic of the web – and it builds off of the previous characteristic of connections – is that of nonlinearity. A work of art on the web that does consist of connections and user interaction (which I will get to next) allows the user to experience the work of art in many different orders.

For instance, if a website consists of five unique images that are meant to be looked at sequentially, but allows the user to decide on the sequence, there are 120 permutations of the viewing order. It is possible that each of these permutations may give the user a different experience of the art.

I am reminded of the Choose Your Own Adventure books I read when I was a kid, at the end of each page, a choice was presented to the reader of what to do next. If you wish to take the door on the right, skip to page 23. If you would like to take the door on the left, skip to page 40.

A work of web art can present itself in a similar way, and the user can choose to navigate the work of art in whichever way he chooses.

There is are a couple interesting ramifications of this, one is that it is possible to create a work of non-linear art that neither has a beginning or an end (as opposed to a poem or a symphony), and it is also possible to create art in which the viewer does not see the entirety of what is available.

The lack of a beginning and an end is another way that a work of webart is less of a “thing”, and more of an experience. An experience cannot be hung on a wall like a painting, and the meaning of an experience is never complete. A piece of music has a beginning and an end, and while a listeners experience of the music may change each time it is listened to, each listening is a complete experience in and unto itself. An unending, non-linear work of art may not have a defined complete experience, so it may either not exist, or be left to the viewers discretion when they have finished their experience of the work of art.

In another vein, a work of art that consists of a collection of things that are meant to be experienced in whatever order the viewer decides means that not everything may be seen. In the previous example I gave of the website with five unique images, if the viewer were able to view any image after the current one, with no defined limits, it is possible that the viewer would never choose to view number four, for instance. An artist that makes a non-linear work of art in this way needs to be aware that not everything that they create may be viewed.

I should mention that due to the programmable nature of the web, an artist can restrict the experience to a linear one. None of these characteristics are mandatory for web art, after all. They are just a brainstorm of the different qualities that web art may have.

The possibility that the work of art may not be experienced linearly means that works of web art may have to be looked at as an overall work, and it’s possible that the meaning and experience of the art will drastically differ based on how it is navigated.

Coming Next

In the next post in this series, I am going to discuss user interaction and how that can impact web art.

Qualities of Web Art: Programs and Networks

Wednesday, August 26th, 2009

In this series of posts I am discussing the web as an art form, and what exactly that might mean. Feel free to check out the previous posts in this series:

In this and the next couple posts, I will be discussing particular aspects of the internet that may help show how web art can be different than any other artistic medium.

The Web Is Programmable

Fundamentally, the web is software. Computer programs run continuously on servers and your computer to bring you your experience of the internet. This means that any piece of art that is created in the web medium is fundamentally made up of code.

Just as a painting is made up of paint and canvas, and a sculpture is made up of bronze or steel, a work of web art is made up of code. There may also be image, animation, and sound files, but it is code that holds it all together.

The primary benefit of this is that web art can be programmed. What the art is, and what the art does is created by programming it to do a certain thing or things. The implication of this is literally too big to discuss, since programs can be written to do nearly anything.

What can be discussed is the general abilities of programs, and what they can do. In the most abstract sense, programs receive, process, create, and send data. They also accept instructions about how to do these processes and what data to do them with. Programs can send and receive data and instructions either from a user, or from another program.

As I mentioned previously, programs can do anything within this framework.

The other aspect of programs is that they can do more than one thing at a time. Multiple computing and processing threads can occur at once, allowing many things to unfold and interact with each other at a time.

The programmable nature of the web is a meta-aspect to web art. This quality informs and defines the other aspects of the web. All of the other characteristics of web art exist as an implementation of the programmable definition of the web. This will be something to keep in mind throughout the discussion that follows.

The web is made up of networks and connections

One of the earliest defining characteristics of the web was the connections – or hyperlinks – between websites. Most webpages on the internet connect via these links to other pages on the internet. One way to look at a website is just a collection of webpages that all link to one another.

A link to another webpage creates an association between whatever is on that one page, and what is one another. The way that the link is presented gives meaning to that association.

Web art may consist of a number of pages that are connected together via linking. In this way, the user experience of this work of art can unfold by the user following the links amongst different parts of the work of art.

Beyond this, the ability to connect different portions of the web makes the connection itself a viable work of art. A piece of web art can use this method of connecting different things to show that the connection between them is the work of art itself.

Connections between separate ideas is not new to art, in fact, there is an argument that one of the defining qualities of post-modern art is connections between separate items, ideas, and actions. The posit of post-modernism that “art is anything you bring attention to as art” is fundamentally a connection between art and everything that exists in the world.

Since connections and linking between separate bits of data is one of the fundamental qualities of the web, it brings this notion of connections to prominence. A work of web art may not just rely on connections as a tool, the ability to so strongly assign meaning to connections on the web may make the connections themselves the work of art.

Links are a tool used to create web pages and websites. It is possible that web art give meaning to that link.

Coming Next

In the next post in this series, I am going to discuss the non-linear possibilities of web art.

What Exactly IS Web Art?

Tuesday, August 25th, 2009

This is the second in a series of posts brainstorming about the nature of web art, or, in other words, art that uses the web and the internet as the medium, rather than something more traditional like paint, ink, or pencil.

Please feel free to go back and read Part 1: Web Art, and the Internet as an Artistic Medium

One of the biggest questions about web art for me is what is the art?

If I create a work of web art that you view and experience on a webpage, what is the actual thing that is considered the art?

With a painting, it is very clear what the piece of art is. It is the canvas with the paint on it.

But what about a website that is a work of art. Is it the computer code that creates the site? Is it the server that stores that code? Is it the user’s browser that looks at the website?

All of these things are part of the inner workings that allow a piece of web art to be viewed by someone. I don’t think that any one of these things is the art itself though.

The Experience is the Art

I think that the actual art is the experience that the user has with the website that hosts the art. All of the code that sits on the server doesn’t do anything until someone points their browser to the site. It is then this experience of going to a web site that becomes the art.

To give you an example of what I mean, click on the words “Red Dot/Blue Dot” below before reading further (following this link only takes a few seconds, and you’ll end up back here afterwards):

Red Dot/Blue Dot

Welcome back!

That was, fundamentally, a work of web art.

Pretty lame web art, yes, I know, but it should demonstrate my point. Until you clicked on that link, the art did not exist. All that existed were a couple of HTML files and a couple of PNG files. They didn’t do anything until you clicked on the link and had the experience of seeing a red dot then a blue dot.

In fact, the actual thing I created was this:




	
	Red Dot



Now click here


The experience you had of seeing those dots, in that sequence, was the art. The file itself is not the art, it is just a tool that is used to create the art.

This gets to one of the most interesting aspects of web art: you cannot separate the art from the experience of viewing the art. It is very similar to performance art in this way.

Additionally, the user plays a vital role in the experience of the art. Without your decision to click on the link, then to continue clicking, that art would never have existed.

User interaction is a vital part of web art. It cannot exist without the user there to view it.

Coming Next

In the next post I am going to start brainstorming and discussing some of the particular qualities that web art can have that distinguish it from other forms of art.

Web Art, and the Internet as an Artistic Medium

Monday, August 24th, 2009

What does it mean for the web to be an artistic medium, the same as painting, sculpture, drawing, music, poetry, and others?

From what I have found out on the internet, most art on the web has been a representation of traditional media on the web. There is not much that is being made to take advantage of the unique properties of the internet to make art.

It’s similar to the birth of television. Early television was considered “radio with pictures”, and early television had a voice over describing the action in the scene, even though the viewer could clearly see what was happening. This convention was a hold over from radio, when a voice over was required to describe the action.

Eventually people figured out what was unique about television, and this convention was dropped.

Similarly, artists are still figuring out what is unique about the web, and what this means for art.

A website consisting of a gallery of drawings and paintings by an artist is not web art. It is art that has been published on the web, just like in a book or pamphlet.

Even art that has been created on a computer using any means of digital production is not “web art”. Often the work made in this fashion can be printed onto paper, or put onto a video DVD.

(This is not to say, however, that whatever web art is, it does not consist of digitally created “stuff”)

Before I go on, I want to clarify: I am talking about art that is created for display on the web. I do not mean online galleries and collections of other type of art. The web as an artistic medium is very different from the web as a publishing medium.

What does it mean to be a work of art that is purely web based, and what separates it from other media? That is the question that I will be brainstorming in this series of posts.

I also want to clarify, that just as television reproduces certain aspects of radio, printmaking reproduces aspects of drawing, and even how painting reproduces aspects of sculpture, web art most certainly reproduces aspects of all mediums. Web art will not be something entirely different from painting, or video, or music, in fact many aspects of all of these mediums will make their way into web art.

To begin, I would like to discuss how exactly the web works, at least, as it pertains to art.

Art is not separable from its medium. You can’t have a painting without paint, you can’t have music without any sound (well, most of the time), you can’t have a photograph without light, etc. The medium that is used intrinsically gives form to the art created in that medium.

So it is also with the web. It is impossible to create a work of art on the web without the web. Since the web functions and behaves certain ways, web art will have certain characteristics that cannot be separated from the art itself.

I heard an interesting thing a couple months ago in a TED talk. The web as we know it is only about 5,000 days old. It is still in its infancy. The technology that makes the web has, since it’s inception, grown in capability by probably a factor of about 1,000.

Remember the old 14.4 kbps modems? My connection at home is about 6MBps. This is about 400 times faster.

The iPhone in my pocket is a faster web browsing and computing device than the first computer that my family bought for my sister when she went to college, back in 1996.

I think that it is safe to say that we haven’t yet reached a plateau in the technology that hosts, supports, and uses the web. In another ten years, this article may look like it is written about stone-age technology.

From the users perspective, this is how the internet works: she turns on her computer, fires up her web browser (Firefox, Chrome, Safari, Opera, or Explorer). She enters a URL into the address bar of her browser, and up pops the website. This is something we are all familiar with.

Usually what shows up is some HTML, and maybe some javascript and flash, which the web browser receives and interprets, and displays the results in the web browser.

On both ends of this experience, computers are running software (or code). The server runs code to determine what exactly to send to the user, and the user’s computer runs code to interpret the information it gets from the server into an audio/visual display.

When the user moves their mouse, scrolls down, or clicks on something, either the user’s computer runs more code, or the server is sent a request for more stuff. This could be a video, audio, or something similar, or it may be a link to another page in the website, or a whole other website all together.

In other words, the user is continuously giving the server information and instructions, and the server is continuously running code and sending the results back to the user.

The background was a necessary foundation to look at the various aspects of web art.

I would like to discuss what is unique about the medium of the web. Different mediums are defined by what is unique to each, not what is similar in each.

I brainstormed the following characteristics of the web:

  • The web is programmable
  • The web is made up of networks and connections
  • websites use is nonlinear
  • Users interact with the website
  • Time can be partially controlled (or not)
  • Presentation varies from viewer to viewer

I am going to dig in depth into each of these characteristics in the posts that follow later in the week.

Before I discuss these potential characteristics of web art, I’m going to talk about some of the questions that come up about the art itself. What actually is a work of art on the web? I will explore that question in the next post.

I also have to send an acknowledgment to my good friend Tiven; we had a conversation about this not too long ago that prompted and added to a lot of these thoughts.

Tiven is a fantastic, and award winning composer, and the best friend a man could have. You can find his home on the internet here:

TivenWeinstock.com

How I Use Graph Paper

Thursday, June 4th, 2009

My friend Dr. WordPress over at Website in a Weekend wrote a fantastic article about the virtues of laying out your site using graph paper. This prompted me to write this post, about how I use graph paper.

Why use graph paper?

Before I write about how I use graph paper, however, I want to tell you why I use graph paper to design and layout websites. To put it simply, I use graph paper because it is faster, easier, and better web design.

Faster web design

It is faster because I can sketch out an idea far faster than I can in Photoshop. As a result, I can see a number of different design ideas very quickly. Sometimes I will have an idea in my head, and sketching it out gives me a good idea of what that idea looks like when it is actually presented. For my personal site, I am currently working from the third design I have considered.

Once a design is committed to code, it is far harder to change. To change the size or location of an element, you may have to change a good number of the elements of your website. Not fun. Changing the size or location of an element on paper is as simple as whipping out your eraser and making a few pencil marks. Getting things well sized and located is many times faster than editing a CSS stylesheet.

Easier web design

Once you have a layout on graph paper, it is very easy to translate this into code. Need to know how wide to make a certain div? Just count the squares. When everything is layed out on graph paper before a single line is typed into your stylesheet, the actual time spent translating that design to code goes much faster.

I do like to save time.

Another side benefit of this is that “happy accidents” are more easily translated to the code. Random marks, lines, borders, or whatever are easier to write into your code when there is a nice grid that shows what the radius of that rounded corner is, how many pixels over a certain element overlaps the sidebar, or whatever else you need to figure out.

Better web design

When it is easy to whip out a design in pencil and paper, it is very easy to revise. Sometimes when working on graph paper, I will have another idea for the design that I think may be even better than the one I am working on. The result of scrapping a previous design idea and starting fresh is almost always a better design. Good things about the previous design can usually be preserved, and the not-so-good elements are usually replaced with a better design. Doing a few quick permutations of a design idea is probably going to result in a better design than sticking with the first idea.

Also, I feel like design comes out as a more cohessive product when it is done on paper first. It is easy to get carried away thinking about a website as a collection of parts: your header, content area, sidebars, divs, widgets, etc. When working on paper, it is easier to see the relationship of all the parts, and to get a good sense of how the whole looks.

My method

My method comes from my tools. What are they?

There are 4 very important tools I use:

  • Graph paper
  • Pencil
  • Engineering scale
  • Calculator

In addition, I may use any number of colored pencils and pens.

tools

I start my work by simply putting pencil down on paper. For my first pass, I work fast and loose, and get all of the design elements I want down and work on their arrangement. I include major image ideas, locations of sidebars, headers, how I want to break up content, and so forth. When I first start out, I just want to get a layout sketched out. I will do another sketch later to really define everything, so I don’t worry too much about accuracy.

I have two pads of graph paper, one that is 8-1/2″x11″, another that is 11″x17″. If I am doing a very loose concept sketch, I usually use the smaller paper, and save the bigger stuff until my second pass.

Which takes me to my second pass. Once I have a concept idea I like, I get more exact with it. I figure out the dimensions I want to work with, I break stuff up into a grid, and get more exact with defining things. I will usually put a bit of notes on this second pass, and include information about classes and ids that I plan to use throughout the design. In other words, I half think in design, I half think in code.

Sometimes the result is nice and tidy, sometimes the result is sloppy. Here’s an example of a sloppy one I did for Only The Valiant (click for a bigger image):

otvlayoutsmall

Next up comes the technical stuff of how this works.

The technical stuff

To put it simply, each square on the graph paper corresponds to a certain number of pixels or ems. I tend to work in ems a lot, and I generally use a scale of one square = 1.5 ems. This gives me a paper design that is fairly close to what will appear on screen.

The most helpful tool I use is my Engineering Scale. Note that if you are buying a scale, there are two common types of scales, an engineering scale and an architect scale. The engineering has nice round numbers on each end, like 10, 20, 30 , 40, 50, and 60. The architects scale has fractions, like 1/4, 1/2, 3/4, 3/8, etc. The Engineering scale is the one that is useful for what we are doing.

A quick aside, these are traditionally used for civil and architectural plans respectively. The numbers on each side show which scale that sequence of numbers measures. For the Engineering scale, the numbers represent the number of feet per inch. For instance, a civil engineering plan in 50 scale would represent 50-feet in each inch of paper. The architects scale works the other way around, and the number of the scale represents the number of inches that represent one foot. For example, the 1/4 scale means that 1/4″ represents 1-foot on the architectural plans.

I have found that the 60 scale works best for me, and this measures out 6 ems per inch, as you see below:

up-close

I use my calculator to translate back and forth between ems and pixels. Though I often define almost everything in ems, sometimes I need to know what that represents in pixels. I don’t resize my ems, so I am multiplying and dividing by 16 a lot to go back and forth between the two units.

Using the 40 or 50 scale works when measuring in ems, and the 10 scale will kinda work to measure in pixels (and will be quite accurate for a 96 dpi display).

I do everything in pencil first, then sometimes add color to see how that will look. I adjust and adjust as I go, tweaking things as I see fit. I have found that revision leads to a better design.

If you design on paper first, or even use graph paper, let me know how you do this in the comment section. I’m sure that there are other variations on this method that I don’t use, mostly because I am not used to using them (creature of habit), but I am curious!