Skip navigation
Help

workflow

warning: Creating default object from empty value in /var/www/vhosts/sayforward.com/subdomains/recorder/httpdocs/modules/taxonomy/taxonomy.pages.inc on line 33.

  

“So, you do nothing all day.”

That’s how many people would respond to someone who says they spend the day with a pen or pencil in their hand. It’s often considered an empty practice, a waste of time. They’re seen as an empty mind puttering along with the busy work of scribbling.

But for us designers and artists, drawing pictures all day is integral to our process and to who we are as creative people, and despite the idea that those who doodle waste time, we still get our work done. So, then, why are those of us who draw pictures all day even tempted to think that someone who is doodling or drawing pictures in a meeting or lecture is not paying attention?

What does it mean to be a doodler, to draw pictures all day? Why do we doodle? Most of all, what does it mean to our work? It turns out that the simple act of scribbling on a page helps us think, remember and learn.

What Does It Mean To Doodle?

The dictionary defines “doodle” as a verb (“scribble absentmindedly”) and as a noun (“a rough drawing made absentmindedly”). It also offers the origins of the word “doodler” as “a noun denoting a fool, later as a verb in the sense ‘make a fool of, cheat.’”

But the author Sunni Brown offers my favorite definition of “doodle” in her TED talk, “Doodlers, unite!”:

“In the 17th century, a doodle was a simpleton or a fool, as in “Yankee Doodle.” In the 18th century, it became a verb, and it meant to swindle or ridicule or to make fun of someone. In the 19th century, it was a corrupt politician. And today, we have what is perhaps our most offensive definition, at least to me, which is the following: “To doodle officially means to dawdle, to dilly dally, to monkey around, to make meaningless marks, to do something of little value, substance or import and,” my personal favorite, “to do nothing.” No wonder people are averse to doodling at work. Doing nothing at work is akin to masturbating at work. It’s totally inappropriate.”

It is no wonder, then, why most people do not have great expectations of those who “draw pictures all day.” Or perhaps they are inclined to think that those who draw pictures all day are not highly intellectual and are tempted to say to them condescendingly, “Go and draw some of your pictures.” As designers, many of us have heard such comments, or at least felt them implied, simply because we think, express or do things differently.

Why Do We Doodle?

Consider that even before a child can speak, they can draw pictures. It is part of their process of understanding what’s around them. They draw not just what they see, but how they view the world. The drawing or doodle of a child is not necessarily an attempt to reflect reality, but rather an attempt to communicate their understanding of it. This is no surprise because playing, trial and error, is a child’s primary method of learning. A child is not concerned with the impressions that others get based on their drawings or mistakes.

An Example of a doodle
An example of a doodle.

Their constant drawing, picture-making and doodling is a child’s way of expressing their ideas and showing their perceptions in visual form. It comes from a need to give physical form to one’s thoughts. Similarly, an adult doodles in order to visualize the ideas in their head so that they can interact with those ideas.

Visual Learners

According to Linda Silverman, director of both the Institute for the Study of Advanced Development and the Gifted Development Center and author of Upside-Down Brilliance: The Visual-Spatial Learner, 37% of the population are visual learners. If so many people learn better visually, we can expect, then, that some of them learn better by putting a speech, lecture or meeting into visual and tangible form through pictures or doodles, rather than by being provided with pictures or doodles (which would be the product of another person’s mind).

37% of the population are visual learners

Humans have always had a desire to visually represent what’s in their minds and memory and to communicate those ideas with others. Early cave paintings were a means of interacting with others, allowing an idea or mental image to move from one person’s mind to another’s. The purpose of visual language has always been to communicate ideas to others.

Secondly, we doodle because our brain is designed to empathize with the world around us. According to Carol Jeffers, professor at California State University, our brains are wired to respond to, interact with, imitate and mirror behavior. In an article she wrote, she explains the recent research into “mirror neurons” which help us understand and empathize with the world around us.

A cave painting
Cave paintings were our first means of communicating ideas to others.

Think of it this way. When you’re at an art gallery and find a painting that intrigues you, what is your first reaction? You want to touch it, don’t you? I thought so.

When I was a ballroom dancer, I used to sit and watch those who I considered to be great dancers, tracing their forms in space with my index finger as a way to commit them to memory. I used to go to galleries and museums and, at a distance, trace the lines and forms that I saw in the paintings and designs. I did this out of curiosity and a desire to physically record what I saw to memory.

Nearly 100 years ago, Maria Montessori discovered the link between physical touch and movement and learning in children. Montessori education teaches children to trace the letters of the alphabet with their index finger as a way to commit their shapes to memory. My son used to trace forms that he found interesting in space. It’s safe to say, then, that we doodle to visually commit to memory a concept that we want to both empathize and interact with.

An experiment conducted by Jackie Andrade, professor of psychology at the University of Plymouth in England, demonstrated the positive effect that doodling has on memory retention. In the experiment, 40 people were given a simple set of instructions to take RSVP information over the phone from people going to a party. The group of 40 was divided in two. One group of 20 was told to doodle (limited to shading in order not to emphasize the quality of the doodles), and the other 20 would not doodle.

The doodlers recalled 29% more information.

Doodling a lightbulb
Doodling helps us retain information.

The study showed that doodling helps the brain to focus. It keeps the mind from wandering away from whatever is happening, whether it’s a lecture, reading or conference talk.

Still, we have become bored with learning.

Professor Emeritus at Cornell University, Joseph D. Novak argues that this is because we have been taught to memorize but not to evaluate the information being given to us. In many traditional settings, the pattern is simple and dull: sit, receive and memorize. Many traditional educational systems do not encourage active engagement with the material. Doodling, drawing and even making diagrams helps us not only engage with the material, but also identify the underlying structure of the argument, while also connecting concepts in a tactile and visual way. Jesse Berg, president of The Visual Leap, pointed out to me in a conversation that doodling is a multisensory activity. While our hand is creating what might seem to be random pictures, our brain is processing the stimuli that’s running through it.

Many of us are the product of traditional schooling, in which we were made to numbingly memorize dates and facts, and many of us continue this pattern later in life. While some of us were avid doodlers (I used to fill the backs of my notebooks with pictures and draw on desks with a pencil during class), some of us stopped at high school, others in college and others once we settled into a job. At some point during the education process, doodling was discouraged. Teachers most likely viewed it as a sign of inattentiveness and disrespect. After hard preparation, educators want nothing more than unwavering attention to their lectures. The irony is that, according to Andrade’s study, doodlers pay more attention to the words of educators than we think.

In her TED talk, Sunny Brown goes on to explain the benefits of doodling and even offers an alternative to the definition found in the Oxford Dictionary:

“Doodling is really to make spontaneous marks to help yourself think. That is why millions of people doodle. Here’s another interesting truth about the doodle: People who doodle when they’re exposed to verbal information retain more of that information than their non-doodling counterparts. We think doodling is something you do when you lose focus, but in reality, it is a preemptive measure to stop you from losing focus. Additionally, it has a profound effect on creative problem-solving and deep information processing.”

How Can Designers Use This To Their Benefit?

As designers, we have a unique advantage when it comes to doodling. We don’t just doodle to keep our minds focused — we also deliberately sketch ideas in order to problem solve and to get immediate feedback from clients and peers. Designers such as Craighton Berman and Eva-Lotta Lamm are two of the biggest proponents of the “sketchnotating” movement. Berman states that sketchnotating “forces you to listen to the lecture, synthesize what’s being expressed, and visualize a composition that captures the idea — all in real time.”

In 2009, I came across a book titled The Back of the Napkin by Dan Roam. Roam is a business strategist and founder of Digital Roam, a management-consulting firm that uses visual thinking to solve complex problems. He uses a simple approach to solving problems visually. Every idea is run through five basic questions to encourage engaged thinking and to ensure a meaningful meeting. The process takes the acronym SQVI^. S is for simple or elaborate, Q is for qualitative or quantitative, V is for vision or execution, I is for individual or comparison, and ^ is for change or status quo. These simple choices are worked through with simple doodles in order to better understand the problem and find a solution. In his book, Roam says:

“What if there was a way to more quickly look at problems, more intuitively understand them, more confidently address them, and more rapidly convey to others what we’ve discovered? What if there was a way to make business problem solving more efficient, more effective, and — as much as I hate to say it — perhaps even more fun? There is. It’s called visual thinking, and it’s what this book is all about: solving problems with pictures.”

After discovering Roam’s book, I decided to doodle again. Once a prolific doodler and drawer, I had become inactive in lectures and similar settings, often forgetting what was said. Taking notes felt too cumbersome, and I often missed words and ideas. I decided to give doodling another shot. Instead of focusing on specifics, I would focus on concepts, key words and ideas.

Since 2011, I have been actively promoting doodling in my design classes, making a deal with my students, saying to them, “Doodle to your heart’s content, but in return I want you to doodle the content of my lectures.” They are skeptical at first, but they soon realize that doodling is better than having a quiz. I reap the benefits of doodling, and by allowing them to doodle — with the requirement that it be based on the class’ content — they become more informed of the topic and they engage in more meaningful conversations about design.

A sketchbook
A designer’s best friend: a sketchpad.

The typographic novices in my classes naturally start to apply the principles of visual hierarchy and organization, grouping ideas either by importance or by category. They will group ideas with lines, boxes, marks and more. Headings and lecture titles might be made larger, more ornate or bolder, and key concepts might be visually punctuated. It is fascinating how natural and almost second-nature the idea of visual hierarchy is to all of us. The learning curve of typography is steep for some of us, but doodling and sketchnotating really makes it easier to grasp. Below are some doodles by students in my classes.

Introduction to Typography lecture doodle by Alisa Roberts
Doodle by Alisa Roberts from my “Introduction to Typography” course.

By picking out concepts, ideas and topics, the students start to establish a hierarchy by making visual groupings and start to use visual punctuation. By the time I assign work on typographic hierarchy, the sketches tend to show more astuteness. Transferring these sketches to the computer is a challenge for those new to typography, but once they naturally understand the relationships in what they are doing, they start to make smarter design decisions.

Identity and Branding class lecture doodle by Aubrie Lamb
Doodle by Aubrie Lamb from my “Identity and Branding” course.

Identity and Branding class lecture doodle by Aubrie Lamb
Another by Aubrie Lamb from the same course.

As we have seen, doodling has many benefits, beyond what designers as visual communicators and problem solvers use it for. Doodling also helps our brain function and process data. Those of us who doodle should do so without feeling guilty or ashamed. We are in good company. Historically, doodlers have included presidents, business moguls and accomplished writers. Designer, educator and speaker Jason Santa Maria says this:

“Sketchbooks are not about being a good artist. They’re about being a good thinker.”

Doodling, drawing pictures and sketchnotating are about using visual skills to solve problems, to understand our world and to respond effectively. So, what are you waiting for? Doodle!

Further Reading

Unless otherwise stated, images are from Stock.XCHNG.

(al) (il)

© Alma Hoffmann for Smashing Magazine, 2012.

0
Your rating: None

For years, since the launch of Ableton Live, many have waited for a worthy rival, something that combines production and live performance for music users. Live isn’t without alternatives – Renoise, for instance, has earned some fans, though it isn’t necessarily built for live performance. But few provide the same real-time workflows.

Bitwig, based in Berlin as is Ableton and featuring some Abletronic veterans, today took the wraps off its own Bitwig Studio. The good news is, it’s looking as though it might shape up to be a viable tool for DJing, performing, and making music. The bad news is, in a market already crowded with lots of similar tools vying for your attention, the first release will look more familiar than radical. That is, it looks and works a whole lot like Live. There’s an Arranger view, a clip launching view with scenes, a tray on the bottom with effects and instruments (they’re even called Devices, like in Live). The screen layout, and even specific interface widgets and channel strip arrangements are all straight out of Live.

It’s not just a little like Ableton Live, either – it’s in some cases a direct clone. Nested drum machine Devices, for instance, work in a way that I’ve never seen out of Ableton Live. A channel strip similarity or two is almost inevitable; here, though, lots of little details add up to something that feels like Ableton, but didn’t come from Ableton.

What that means to you may depend on what you want: whether you just want an improved Ableton alternative that works like Live, or whether you want something more fundamentally different from Live as an alternative.

If you want “Ableton Plus,” Bitwig does take on features Ableton is missing. For instance:

1. Linux support. In fact, right out of the gate, this could quickly be the answer for Linux users waiting for something they could use without booting to Mac or Windows.
2. Proper multiple document support. You can share content between projects in Ableton, but here you can actually open and freely exchange media with multiple files at once.
3. Mix audio and MIDI on the same track. Tracks are content-agnostic.
4. Per-note automation, with the mixed MIDI and audio, promises more detail-oriented editing.

Those are three significant breakthroughs. And it looks like there are lots of tweaks and improvements throughout the tool, many of which I’m sure we’ll hear about as people begin testing the beta. (One nice example: a vertical pane lets you view arrange and clip launching views simultaneously.) Multi-monitor support, while present in many tools, is sorely lacking in Live but available here. Plus, as some readers note, you do get 64-bit support, though that seems an advantage over Ableton that won’t last long.

The challenge is, as a new entrant to the market, your first obstacle is telling a story about what you are. And here, there seems a missed opportunity to make a first impression as something truly different, rather than something “similar, but better.” Ableton Live 1.0 when it was released was a significant departure from what had been seen before. So, too, were the first trackers, the first audio+MIDI DAWs, and the first graphical sequencers. Bitwig Studio isn’t that kind of breakthrough – not yet.

Not that being different is easy, or even always desirable. Amidst so many things users want, and so many expectations they have about how things will work, it’s tough to do something genuinely new without simply confusing everyone and driving them away. But it has happened – Ableton Live’s original release being a notable case. One question is whether you make some sacrifices to release the most significantly-different tools initially, or whether you choose to cover the basic bases to provide a workable solution from day one, and the Bitwig devs seem to have chosen the latter.

The most interesting features remain on the horizon. LAN multi-user jamming and multi-user production are both on the roadmap – features we’ve seen in other tools, but which have yet to catch on. And there’s an integrated modular system that lets you build your own instruments and effects with graphical patching – something seen in various forms from Buzz to Max for Live, but one that could use a fresh take in integration with the tool.

In the meantime, we’ll have to hear from beta users whether Bitwig is something worth a look. You can sign up now:
http://bitwig.com/bitwig_studio.php

We’ll be eager to hear what you think.

Pics:

Tweet

0
Your rating: None

  

Almost every Web designer can attest that much of their work is repetitive. We find ourselves completing the same tasks, even if slightly modified, over and over for every Web project. Following a detailed website design and development process can speed up your work and help your client understand your role in the project. This article tries to show how developing a process for Web design can organize a developer’s thoughts, speed up a project’s timeline and prepare a freelance business for growth.

First of all, what exactly is a ‘process’? A Web development process is a documented outline of the steps needed to be taken from start to finish in order to complete a typical Web design project. It divides and categorizes the work and then breaks these high-level sections into tasks and resources that can be used as a road map for each project.

A Typical Process

Here is a standard process that was put together using examples from around the Web as well as my own experience. (Note: Please see the resource links at the end of each phase.)

1. Planning

The planning stage is arguably the most important, because what’s decided and mapped here sets the stage for the entire project. This is also the stage that requires client interaction and the accompanying attention to detail.

  • Requirements analysis
    This includes client goals, target audience, detailed feature requests and as much relevant information as you can possibly gather. Even if the client has carefully planned his or her website, don’t be afraid to offer useful suggestions from your experience.
  • Project charter
    The project charter (or equivalent document) sums up the information that has been gathered and agreed upon in the previous point. These documents are typically concise and not overly technical, and they serve as a reference throughout the project.
  • Site map
    A site map guides end users who are lost in the structure or need to find a piece of information quickly. Rather than simply listing pages, including links and a hierarchy of page organization is good practice.
  • Contracts that define roles, copyright and financial points
    This is a crucial element of the documentation and should include payment terms, project closure clauses, termination clauses, copyright ownership and timelines. Be careful to cover yourself with this document, but be concise and efficient.
  • Gain access to servers and build folder structure
    Typical information to obtain and validate includes FTP host, username and password; control panel log-in information; database configuration; and any languages or frameworks currently installed.
  • Determine required software and resources (stock photography, fonts, etc.)
    Beyond determining any third-party media needs, identify where you may need to hire sub-contractors and any additional software you may personally require. Add all of these to the project’s budget, charging the client where necessary.

Resource links for this phase:

Process99 in Following A Web Design Process

2. Design

The design stage typically involves moving the information outlined in the planning stage further into reality. The main deliverables are a documented site structure and, more importantly, a visual representation. Upon completion of the design phase, the website should more or less have taken shape, but for the absence of the content and special features.

  • Wireframe and design elements planning
    This is where the visual layout of the website begins to take shape. Using information gathered from the client in the planning phase, begin designing the layout using a wireframe. Pencil and paper are surprisingly helpful during this phase, although many tools are online to aid as well.
  • Mock-ups based on requirements analysis
    Designing mock-ups in Photoshop allows for relatively easy modification, it keeps the design elements organized in layers, and it primes you for slicing and coding when the time later on.
  • Review and approval cycle
    A cycle of reviewing, tweaking and approving the mock-ups often takes place until (ideally) both client and contractor are satisfied with the design. This is the easiest time to make changes, not after the design has been coded.
  • Slice and code valid XHTML/CSS
    It’s coding time. Slice the final Photoshop mock-up, and write the HTML and CSS code for the basic design. Interactive elements and jQuery come later: for now, just get the visuals together on screen, and be sure to validate all of the code before moving on.

Resource links for this phase:

3. Development

Development involves the bulk of the programming work, as well as loading content (whether by your team or the client’s). Keep code organized and commented, and refer constantly to the planning details as the full website takes shape. Take a strategic approach, and avoid future hassles by constantly testing as you go.

  • Build development framework.
    This is when unique requirements might force you to diverge from the process. If you’re using Ruby on Rails, an ASP/PHP framework or a content management system, now is the time to implement it and get the basic engine up and running. Doing this early ensures that the server can handle the installation and set-up smoothly.
  • Code templates for each page type.
    A website usually has several pages (e.g. home, general content, blog post, form) that can be based on templates. Creating your own templates for this purpose is good practice.
  • Develop and test special features and interactivity.
    Here’s where the fancy elements come into play. I like to take care of this before adding the static content because the website now provides a relatively clean and uncluttered workspace. Some developers like to get forms and validation up and running at this stage as well.
  • Fill with content.
    Time for the boring part: loading all of the content provided by the client or writer. Although mundane, don’t misstep here, because even the simplest of pages demand tight typography and careful attention to detail.
  • Test and verify links and functionality.
    This is a good time for a full website review. Using your file manager as a guide, walk through every single page you’ve created—everything from the home page to the submission confirmation page—and make sure everything is in working order and that you haven’t missed anything visually or functionally.

Resource links for this phase:

Process77 in Following A Web Design Process

4. Launch

The purpose of the launch phase is to prepare the website for public viewing. This requires final polishing of design elements, deep testing of interactivity and features and, most of all, a consideration of the user experience. An important early step in this phase is to move the website, if need be, to its permanent Web server. Testing in the production environment is important because different servers can have different features and unexpected behavior (e.g. different database host addresses).

  • Polishing
    Particularly if you’re not scrambling to meet the deadline, polishing a basically completed design can make a big difference. Here, you can identify parts of the website that could be improved in small ways. After all, you want to be as proud of this website as the client is.
  • Transfer to live server
    This could mean transferring to a live Web server (although hopefully you’ve been testing in the production environment), “unhiding” the website or removing the “Under construction” page. Your last-minute review of the live website happens now. Be sure the client knows about this stage, and be sensitive to timing if the website is already popular.
  • Testing
    Run the website through the final diagnostics using the available tools: code validators, broken-link checkers, website health checks, spell-checker and the like. You want to find any mistakes yourself rather than hearing complaints from the client or an end-user.
  • Final cross-browser check (IE, Firefox, Chrome, Safari, Opera, iPhone, BlackBerry)
    Don’t forget to check the website in multiple browsers one last time. Just because code is valid, doesn’t mean it will sparkle with a crisp layout in IE 6.

Resource links for this phase:

5. Post-Launch

Business re-enters the picture at this point as you take care of all the little tasks related to closing the project. Packaging source files, providing instructions for use and any required training occurs at this time. Always leave the client as succinctly informed as possible, and try to predict any questions they may have. Don’t leave the project with a closed door; communicate that you’re available for future maintenance and are committed to ongoing support. If maintenance charges haven’t already been shared, establish them now.

  • Hand off to client
    Be sure the client is satisfied with the product and that all contractual obligations have been met (refer to the project charter). A closed project should leave both you and the client satisfied, with no burned bridges.
  • Provide documentation and source files
    Provide documentation for the website, such as a soft-copy site map and details on the framework and languages used. This will prevent any surprises for the client later on, and it will also be useful should they ever work with another Web developer.
  • Project close, final documentation
    Get the client to sign off on the last checks, provide your contact information for support, and officially close the project. Maintain a relationship with the client, though; checking in a month down the road to make sure everything is going smoothly is often appreciated.

As stated, this is merely a sample process. Your version will be modified according to your client base and style of designing. Processes can also differ based on the nature of the product; for example, e-commerce websites, Web applications and digital marketing all have unique requirements.

Process66 in Following A Web Design Process

Documenting The Process

Create and retain two versions of your Web design process:
One for you or your team to use as a guide as you work on the back end, and one to share with clients. The differences between the two should be intrinsically clear: yours would be much more detailed and contain technical resources to help with development; the client’s would be a concise, non-technical map of the process from start to finish.

Common tools for documenting the business process are a simple Microsoft Word document, Microsoft Visio and mind-mapping software such as Freemind. If you’re ambitious, you could even develop your own internal Web-based tool.

Using The Process

By now, you should understand what a process looks like, including the details of each phase, and have some idea of how to construct your particular Web design process. This is a great first step, but it’s still only a first step! Don’t miss this next bit: knowing how a process can enhance your overall business and how to use it when approaching and interacting with clients.

Refining the Process

The process will be different for each designer, and for each project. Develop a process for yourself, and identify whatever is useful to you or your team. Only then will the process be truly useful. After all, freelancers can serve drastically different target markets.

Bulleted lists are well and good, but the process can be much more useful and elaborate than that. Many of the resources, tools and links posted on Web design blogs and Twitter feeds fit into different parts of the process. An incredibly useful way to refine the process is to add resource links to each phase, and to develop your own resources, such as branded document templates.

Process551 in Following A Web Design Process

Some commonly used documents of freelancers:

  • Client questionnaire,
  • Invoice,
  • Project charter,
  • Documentation for hand-off to client,
  • User accounts,
  • Database table charts,
  • Site map.

Files and Archive

Documentation and storage are important to grasp. As mundane as these tasks can be, they certainly help when tax season rolls around or when a small freelance venture begins to expand. You can never be too disciplined when it comes to efficiency in work and time. You could establish a standard document format and folder structure for all of your clients, or maintain a list or archive of previous clients and project files. You could employ anything from simple lists to all-out small-business accounting practices.

A Process Puts the Client at Ease

Many clients view Web development as a black box, even after you’ve tried to educate them on its methods. To them, they provide their requirements, suggestions and content, and then some time later a website appears or begins to take shape. They’re often completely unaware of major aspects of the process, such as the separation of design and development. Having an organized and concise process on hand can help organize a client’s thoughts and put their mind at ease, not to mention help them understand where their money is going.

Outlining my basic process as a freelancer is by far the most common first step I take with potential or new clients. A quick, high-level “This is how it works” discussion provides a framework for the entire project. Once you have this discussion, the client will better understands what specifically is needed from them, what you will be delivering at certain points in the timeline and what type of work you’ll be engaging in as you go along. Most of all, the discussion can nip any miscommunication or confusion in the bud.

Designers are often too deep into Web design to realize that most people have no idea what they do or understand their terminology or know the steps involved in creating a finished product. Starting fresh with a understandably “clueless” client can be daunting.

Process331 in Following A Web Design Process

It’s a Business

It’s a business, and the steps outlined here are basically the path to small-business management. As you grow in clients or staff or contractors, you’ll find yourself with an ever-growing to-do list and a headache from all of the things to keep track of. Give yourself a break, and invest some time in finding tools to help you get the job done efficiently. An expanded process document is a great first step on this path.

Tips

  • Ask a non-technical friend to review your process. If it makes sense to them, it will make sense to your client.
  • Use the processes of other designers as a starting point to build or refine your own. See the related resources links.
  • Build document templates and Web apps into your process. This will save time and make you more professional.

Risks

One process cannot be applied to every project. Although your process will be useful when you first engage a client in the planning discussion, be sure to review it before the discussion takes place to ensure it fits the project.

Further Resources

Here are some links to resources that showcase sample Web design processes, as well as tools and templates to build integrate in your own process.

Have further resources to share? Post them in the comments.

(al) (il)

© Luke Reimer for Smashing Magazine, 2011. |
Permalink |
Post a comment |
Smashing Shop |
Smashing Network |
About Us

Post tags: ,

0
Your rating: None

  

The Web is full of creative and practical resources that we can use to improve our projects. Photography, fonts, music and code are perfect examples. Finding stock objects and existing implementations is often quicker, cheaper and more practical than producing your own.

Whether free or not, these resources normally come with a license to ensure fair use. For professionals, understanding the limitations of a license is critical; with this knowledge, you’d be surprised by what’s available. Understanding copyright and licenses allows us to do what we do best: be creative.

Copyright in Understanding Copyright And Licenses

In this article, we’ll cover the basic principles that govern copyright and licenses. We’ll then explore common licenses in our industry, with examples. We’ll cover the following:

Quick disclaimer: I am not a lawyer! This is not legal advice, only the results of my own research. Please always read the entire license of any resource you use.

Copyright And Licensing

When we create something — let’s say a photograph — we own the copyright, which is our exclusive right as the author to own that work. We control who else can use our work and in what manner. For example, I could allow someone to print my photograph or adapt it in a piece of art. Rather than establishing verbal agreements, I can distribute my work with a license that sets the guidelines for use. The things that are copyrighted are sometimes referred to as “intellectual property.”

Licenses are granted by an authority to allow a usage; in my case, the use and distribution of resources by the copyright owner (i.e. me). I may decide to offer my photograph for free or charge a price; either way, I can include a license to limit usage, and I maintain the copyright. Just because someone pays money doesn’t mean they have full control or rights to what they’re buying. Licenses can dictate the number or uses, the bounds of use and even the length of time until the license expires.

Moreover, under “work for hire,” the employer holds the copyright, not the author or creative; in many cases, this is a company (such as a creative agency) or its client (by contractual agreement). In such cases, the creator retains “moral rights” to their work, including the right of attribution. This is partly why published articles refer to the author, although moral rights can include anonymity.

Copyright laws are incredibly complex, but this should be a good start.

What Is “Fair Use”

“Fair use” is an exception to the exclusive rights held by the copyright owner. It exists in some countries such as the US and UK. Under it, in certain cases, using work without permission is possible. If someone’s usage is defined as fair use, then they don’t need to obtain a license. Essentially, using copyrighted material is a legal right. Examples of fair use might include:

  • Educational purposes, such as teaching and student research;
  • Making commentary and criticism as part of a news report or published article.

There’s a misconception that noncommercial or nonprofit use is always acceptable. It isn’t. Fair use is a legal term and is judged case by case. Always research thoroughly if you think your use of copyrighted material is legal.

What Is “Public Domain”

Work that falls in the “public domain” basically has no copyright owner. You can use, modify and redistribute it to your heart’s content. An author can forfeit their copyright and, thus, put their work in the public domain (although it’s not quite that easy, as we’ll see later). Copyright ownership expires after the author’s death (generally 50 to 70 years after death in most countries).

Legal Jurisdiction

Every country has its own interpretation of copyright law, but there are many agreements between nations. Licenses are enforced under copyright law, which is different than contract law. The distinction here is questionable within certain jurisdictions, each of which applies the law differently.

The Berne Convention (for the Protection of Literary and Artistic Works) was established in 1886 and is an international agreement that governs copyright. It states that each member state must recognize the copyright of work from other countries, and it must extend the same rights to foreign work that it gives to those of its own citizens. It also makes clear a minium standard of protection for copyright owners. To date, 164 countries have signed this agreement.

Licenses can be limited to certain jurisdictions. So, while something may be free in one country, the copyright owner could reserve all rights in other countries.

If you’re reading this, I can guess pretty confidently that you work on the Web and that you are, or will be, purchasing licenses from copyright owners in different countries. These licenses are bound by the laws of those countries, and you must respect them.

We’re getting into political and legal territory here. Remember: if in doubt, get legal advice.

License Terminology

A license can be written from scratch, but most people choose a well-known one. We’ll cover the common licenses that relate to our industry of website design and development, specifically those that allow for free usage — “free,” meaning that no money is required. Generally, licenses that govern paid resources are written individually, but all licenses have commonalities.

There is obviously a fundamental difference between, say, development code and stock photography. So, it should come as no surprise that a range of licenses exist. Each is tailored to the usage. Before we dive into them, let’s go over some common terminology:

  • Copy
    A simple copy of the original work.
  • Modify
    To alter copyrighted work in some way before using it.
  • Derivative work
    The result of modifying copyrighted work to produce new work.
  • Distribute
    The act of giving someone your work under a license.
  • Redistribute
    The act of distributing work and its license after obtaining it under license from the original copyright owner.
  • Share alike
    Permission to distribute derivative work under the same or a similar license.
  • Credit” or “attribution
    The act of identifying the original copyright owner.
  • Copyright notice
    A written phrase or symbol (©) informing of copyright ownership (not necessarily required by law).
  • All rights reserved
    A common copyright notice declaring that no usage rights exist (again, not necessarily required).
  • Warranty
    A written guarantee included with the license (or, usually, not).

With this in mind, let’s start with the creative licenses.

Creative Commons

Lawrence Lessig founded Creative Commons (CC) in 2001 to create a series of easy-to-understand copyright licenses for online creative work. These licenses established the notion of “some rights reserved.”

The Creative Commons license has six variations. It’s really a collection of licenses that cover particular uses. These include whether the licensed work can be used commercially, whether it can be modified, and whether derivative work can be redistributed under the same (or a compatible) license. A Creative Commons license can be restricted to certain jurisdictions or apply internationally.

Creative-commons-license in Understanding Copyright And Licenses

The basic Creative Commons license is CC Attribution. It allows for all copying, modification and redistribution (even commercially), provided that the original author is attributed (with no implication of endorsement). Work under CC Attribution is essentially free to use.

The CC Attribution license can be extended to CC Attribution-ShareAlike. The same rules apply, except that all derivative work must be licensed the same way. This distinction ensures that all resulting work remains free. Wikipedia uses this license for its text.

Here are the four other Creative Commons licenses:

  • CC Attribution-NoDerivs
    Redistribution is allowed, provided that attribution is given and no modifications are made.
  • CC Attribution-NonCommercial
    Everything is allowed with attribution, provided that it is not done commercially.
  • CC Attribution-NonCommercial-ShareAlike
    The same as above, but derivative work must be under the same license.
  • CC Attribution-NonCommercial-NoDerivs
    Redistribution is allowed for noncommercial use and without any modification.

As you can see, the Creative Commons licence has six separate versions, all of which at least require attribution to the copyright owner.

You should attribute by citing the title of the work, the copyright notice, the author’s name and the license name. For example:

This work includes the photo “Photo’s Title,” available under a Creative Commons Attribution license, © Author’s Name.

If the original work includes a copyright notice, it must be left intact. Otherwise, you are free to attribute appropriately. Also, link to the work and license if possible. Informing the author is courteous but not required.

CC0 also exists. It enables copyright owners to waive all of their rights. It’s essentially a way of saying that the work is in the public domain and that there are “no rights reserved.” The concept exists because many jurisdictions don’t have a clear process for putting work in the public domain, and many legal systems actually prohibit the surrendering of lawful rights such as copyright ownership.

The Creative Commons licenses are clear and readable. As mentioned, Wikipedia uses the Attribution-ShareAlike. Flickr makes it easy for users to select one of the CC licenses, and it’s a great source of photography for your projects. You can even search Google for Creative Commons content.

Software Licenses

Written code is copyrighted: you own what you write. Of course, the simplest line of code, like print('Hello World!');, can be rewritten totally independently, without knowledge of the original author, and both parties will own the copyright of their own version (however worthless it may be). But beyond a few lines, code does become valuable, and distributing it with a license is important.

Other intellectual property laws, such as patents, can also protect software. Software patent laws are hotly debated in the US, where they are granted. In many other countries, such as the UK and New Zealand, software cannot be patented. While copyright is a right, patents must be granted.

Software licenses cover the use of programming code. If you’re using a third-party library or elements from an open-source project, your usage must respect the relevant license.

Development licenses generally cover the following points:

  • How the work and modifications of it can be distributed,
  • Whether any derivative work must be made open source,
  • What copyright and other notices are required for redistribution.

Software licenses can be defined as “permissive” or “copyleft.” The latter removes the right to add further license restrictions upon redistribution.

Below is a quick rundown of common software licenses and how they’ve evolved over the decades.

MIT License

The MIT license is perhaps the most open of all. It effectively puts the work in the public domain. It explicitly gives permission, “without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sub license, and/or sell copies of the Software.” The only condition is that the full copyright notice (which declares no warranty or liability) be included. Work released under the MIT license can be used for anything, including commercial and proprietary software.

BSD License

The BSD license is similar to the MIT license.

The original version, published in 1990, had four clauses, the last being an “advertising clause” stating that all promotional material for derivative work had to refer to the original source. This was later removed in 1999 in the “New BSD” or “Modified BSD” license.

What separates the newer three-clause BSD license from the MIT license is a clause stating that the name of the original copyright owner cannot be used to endorse any derivative work without prior permission. This eliminates any doubt about the right to use the person or organization’s name. Whether this clause is even required is debatable, because copyright and trademark laws are separate issues. Even though the MIT license does not declare this, we cannot assume permission of endorsement.

An additional two-clause “FreeBSD” or “Simplified BSD” license exists, which omits this endorsement clause and instead includes a disclaimer to disassociate any views made in derivative work from the original copyright owner. This can be seen as explicitly stating the opposite of an endorsement.

Both the MIT and BSD licenses give us complete freedom to copy, distribute and modify work for any purpose, provided that the original license and copyright notice are included. Derivative work can be released under another license or as proprietary software.

The Apache License

You can see from the BSD example just how difficult it is to word a license. There are so many ambiguities and connections to other laws that getting the point across is nearly impossible. Many more essentially “free” licenses have appeared in an attempt to make such intention clear.

The Apache License is a free software license that does not require the same license of derivative work. This means that code under the license can be used in open, free and proprietary software (like the MIT and BSD licenses).

Apache Logo-screenshot1 in Understanding Copyright And Licenses

It imposes the conditions that in any licensed file, all original copyright, attribution and trademark notices must be preserved. Additionally, with any modified work, a notice of change must be included. Any existing notices of change must also be kept. All of these notices must be distributed in a text file and in the source code or documentation.

This requirement to preserve modification notices makes the Apache license different from the MIT and BSD licenses. It also includes many more legal terms and conditions that (among other purposes) dissolves any liability of the original copyright owner.

The Apache license (version 2) is said to be GPL-compatible, meaning that a project containing code licensed under both must also be licensed under GPL version 3.

GNU General Public License

First written by Richard Stallman in 1989, the General Public License (GPL) is now at version 3 as of 2007. It was founded on the principle that we should be free to use, change, share and share changes to free software. No matter how the software is distributed, it remains free. This concept is called “copyleft.”

The basic principles of the GPL mean that, unlike the MIT, BSD and Apache licenses, work under GPL must remain under this license. GPL code can be sold, but no proprietary software can be derived from it. If you distribute any derivative work, then your source code must be made available under the same license. Essentially, once a work is released under the GPL, it remains GPL and no further restrictions can be applied.

Version 3 of the GPL specifically states that while code under the GPL can be used to implement digital rights management (DRM), using GPL code does not count as effective “protection,” and as such, anyone who breaks it cannot be help accountable under digital rights law.

Where Licenses Are Used

We already know that Wikipedia uses the Creative Commons Attribute-ShareAlike license and that Flickr allows users to choose a Creative Commons license. What else should we know?

Most JavaScript libraries are available under license by nature. jQuery, for example, is available under dual license: either MIT or GPL v2. Other libraries are available under MIT, such as Modernizr (which is also under BSD), Raphaël and Respond.js (also under GPL v2). You can use all of these libraries while reserving rights for your own derivative work, provided that you include the relevant copyright notices for these libraries.

Plug-Ins and Themes

WordPress and Drupal are important ones to note because they’re available only under GPL v2. This means that any derivative work must also be licensed under GPL; and according to the WordPress license page, this includes all plug-ins and themes:

Part of this license outlines requirements for derivative works, such as plugins or themes. Derivatives of WordPress code inherit the GPL license. […] There is some legal grey area regarding what is considered a derivative work, but we feel strongly that plugins and themes are derivative work and thus inherit the GPL license. If you disagree, you might want to consider a non-GPL platform…

Drupal’s licensing FAQ is more specific about this:

The GPL requires that if you make a derivative work of Drupal and distribute it to someone else, you must provide that person with the source code under the terms of the GPL so that they may modify and redistribute it under the terms of the GPL as well. However, you are under no obligation to distribute the code to anyone else. If you do not distribute the code but use it only within your organization, then you are not required to distribute it to anyone at all.

What does this mean? If you’re developing a WordPress or Drupal theme, it must be under GPL. You can distribute your work, should you choose.

If you’re developing a theme for personal use or for a client, you have little to worry about because you are not technically “distributing” it.

Selling themes on the open market is a gray area, because distribution must be under the GPL. The GPL allows you to sell this work, but it also allows others to redistribute and sell it, too; you can’t do much about that. However, theoretically, the only derivative work that falls under GPL is the PHP code; any images, CSS and other content in your project remain yours. On top of that, you are free to charge extra for technical support and so on.

Remember that while WordPress is open source and free under the GPL, it is still copyrighted. You have to respect its chosen license.

Does My Work Need A License?

If you’re publishing content online — be it design work, photography, blog articles, audio or video — then the default is “all rights reserved”. Unless you publish it under a license (or through a Web service that reserves some rights for itself — and most do), then only you hold copyright. That’s great, but what do you gain by giving others permission?

In his article “Pick a License, Any License,” Jeff Atwood highlights the interesting example of developers who publish code on their blogs. Unless the developer states otherwise, no one has permission to use that code in their project. Always consider the benefits of others using and attributing your work: it could be great self-promotion!

It’s worth noting that you do not need to issue a license in order to give permission for someone to use your work. Some areas of the law favor verbal and contractual agreements over copyright.

Additionally, when using services such as Twitter and Flickr, you are probably giving those websites full rights to your work as part of their terms of service. These websites couldn’t operate without your content, but they do take every advantage of reserving full rights over the content you publish. This allows them to develop their service in different ways on the strength of your content.

Take this excerpt from Yahoo’s terms of service, which Flickr uses:

[…] you grant Yahoo! the royalty-free, perpetual, irrevocable, non-exclusive and fully sub-licensable right and license to use, reproduce, modify, adapt, publish, translate, create derivative works from, distribute, perform and display such Content (in whole or part) worldwide and/or to incorporate it in other works in any form, media, or technology now known or later developed […]

That covers just about everything!

While Flickr allows you to upload photos under a Creative Commons license for others to use, you also grant Yahoo permission to do anything it likes with them. I’m not condemning Yahoo for this practice because it’s common to all Web services. I’m just highlight the importance of reading the terms and conditions and understanding where you publish work and what rights you’re giving away.

Final Thoughts

With this information, you should have a strong understanding of how copyright and licenses work, why they exist and what they achieve. Ignorance of copyright — as of any law — is no excuse. By understanding it, we can take advantage of the wealth of creative content across the Web. If you’re publishing work online, consider sharing it under a license. You never know what interesting things people will do with it.

As mentioned, this article is the result of my own research and is not legal advice. You’ll need the latter if you’re unsure about copyright licenses.

Further Reading

(al)

© dbushell for Smashing Magazine, 2011. |
Permalink |
Post a comment |
Smashing Shop |
Smashing Network |
About Us

Post tags: ,

0
Your rating: None