Creative Process: Where Does All the Time Go?
Jess Walker Aug 19 2014
In college, when we asked our teachers how to assign a price to our art, they would tell us to charge whatever it was worth to us. This answer was thoroughly infuriating because we wanted a ‘correct’ number. What’s the equation? Is each square inch of canvas (or wood, or paper) worth a certain amount? Does it matter how much paint is on it? Or what sort of paint it is?
And the answer, of course, is both yes and no. You can calculate exactly how much it cost you to create this thing, but then you’ll still have to decide what your time is worth, and what the art is worth to you. And those are much harder to quantify because we humans tend to undervalue our time and because we artists tend to pour too much of our souls into our work.
I think the most expensive piece I saw at one of our senior art shows was something like $200,000. My friends and I were astonished, and at the time we joked that maybe it was a typo (it wasn’t). In retrospect I think she just marked it up because she didn’t want to let it go, and I have to wonder how much of her was hidden in those brush strokes.
I wonder how much of myself ends up in the things I create. I wonder, constantly, if I’m attributing too much or too little value to my time. I had been with Portent for more than three years when I started discussing time estimates with a colleague, and I told him how much I would quote for a project and his first response was, ‘Wow.’ I immediately wanted to backtrack – I was convinced that it was too much time, that I was much too slow, and then he said, ‘I would have said at least twice that.’
I had no idea what to do with that information. I’ve been thinking about it a lot lately, and about process, and about how tight deadlines tend to be. About the idea that good communication can change the world, and what it takes to create something truly valuable – if that’s even possible when the definition of ‘value’ tends to be relative.
In my experience, more value comes from collaboration than anything else, so I want to open this discussion up, look at what it takes to get from start to finish on a creative project (specifically, the design or redesign of a website), and talk to you, dear reader, about how this process can get better, and bring real value to more people.
The Kickoff Meeting
Players: copywriter, designer, developer, UX architect, art director, project manager
In the beginning, there is a brainstorm. In grade school they taught us to do this by writing words in little circles and connecting them to other word circles and branching out until you have a complex thought. In college, they gave us a few hours of studio time to do research and bounce ideas and come back with the beginnings of a plan. It didn’t need to be fully fleshed out, we just had to present some idea of what we’d be doing for the next few weeks, whether that was a sketch or something still too abstract to put on paper.
In a marketing company, this means getting everyone who’s going to be creating something for the project – structure, content, art, code, etc – in a room and coming to a consensus on what the project’s goals are. Are we informing people? Are we inspiring them? Do we need them to take the time to share their thoughts with us, or do we only need them to click a button? How do we make this a positive experience for them?
The brainstorm should give everyone a clear idea of where they’re going, so that the designer can do competitive research and start building a mood board, the UX can begin working on wireframes and site architecture, and the copywriter can begin drafting the voice. There should be check-ins for these things, even if it’s just a couple minutes, to keep everyone on the same page, so that the team can take something like this:
And turn it into something like this:
Players: designer, art director, project manager
Once the wire frames are approved and the first round of copy has been coaxed into existence, the design starts to form. I worked on a refresh for a hotel site recently and long before we officially got started I was gathering travel apps, brochures, hotel and resort websites – anything that I could get that was beautiful or functional or (preferably) both – to inspire my work. Because of this, by the time I get to the design stage I usually already have a couple sketches or ideas that I want to try, and a solid idea of the style I want to go with. There’s that old adage; good artists borrow, great artists steal. I keep my stolen hoard of good design on Pinterest, as a sort of digital mood board that I can return to frequently while I work.
When I was fresh out of college, my design process (much like my meeting-new-people process) mostly involved sitting alone, not speaking to anyone, and eventually emailing someone a jpeg to look at with an email signature that just said ‘thanks’ though I’m not really sure what I was thanking them for. Their time, I suppose.
I’ve come a long way since then. Today, my design process involves a lot of bass-heavy music and regular critiques with colleagues, which sometimes last less than a minute and sometimes turn into group discussions of functionality, color theory, typography, and best practices for UX and SEO. We no longer email jpegs to people, instead we create presentations, whether that’s a PDF deck or an interactive prototype of the website we want to build.
While creating a comp, I also create all of the hover and on-click states for the page I’m designing, and when we get the necessary internal approval to move forward with presenting the design to the client, I start prototyping it. The tool we use here at Portent is InVision, which recently came out with some pretty excellent mobile updates that allow you to prototype your responsive designs as well. This enables the client to view your work the way they’ll see it once it’s developed.
This is especially useful when we can present in person or over screenshare, so that we can expand on the logic behind our choices, describe what the color palette is meant to convey, the energy the design is supposed to elicit, the interactions the users will experience, and if there are animations, how and why they’re there. The client can discuss the design, express concerns, and ask questions while they’ve got the full attention of their Portent team.
Bringing it to Life
Players: designer, copywriter, developer, project manager
A development environment has to be set up. The developer can (and should) work locally at first, but at some point they’ll need server space to host the fledgling site. Then, if it’s being passed off to the client for them to manage content after launch, it’ll need a content management system. The content needs to be edited and finalized, if it hasn’t been already. If there’s no imagery, the designer will need to source some from stock photography sites, which is a time-consuming process if you want quality images. If there is imagery, some (if not most, or all) of it will probably need to be resized to suit the new design.
The developer has to slice up the designs and convert them to HTML/CSS/JS – at which point they are going to desperately hope that whoever created the design file organized their layers and clearly labeled all the hover states and interactions. Once the HTML mockups are done, the reusable elements (menus, headers, footers, etc) need to be separated out to create a template system that can be integrated into the client’s CMS.
Before launch, the scripts and images need to be compressed, and the images and content need to get entered into the client’s database. If the structure of the site has changed, 301 redirects will have to be implemented for pages that no longer exist or have moved, and incorrect links need to be removed from all onsite content. SEO, Social, and UX need to make a final sweep of the site and provide recommendations of changes that should be made before launch. The site needs to be tested across several browsers and platforms – there are tools for this, like BrowserStack, but it’s always a good idea to use actual devices as well. Bugs have to be logged and fixed and finally, when everything is done, launching will hopefully be as easy as switching the URL over, running a broken link report and testing everything. Twice.
Every site launch is its own brand of challenging, and we should always be looking for ways to make that process better. Working on the internet, and particularly in communications, allows us to improve the world around us faster, so long as we always aim to create something that can be objectively considered valuable.
So how do you get through launching a site with your sanity intact and make sure that you have dotted and crossed everything put in front of you to dot and cross? How do you make sure that the things you create are worthy of the time and soul that you give them?
Front-End Developer / Designer
Jess started teaching herself HTML/CSS in high school while customizing blog templates for fun. She has continued to branch out from there and is always looking out for new things to learn. Read More
- Do You Use Data To Improve Your Website Design?
- How to use Intention.js for Responsive Design
- What Does a Degree in Architecture Have to Do with Web Design & Development?
- A Front-End Workflow For The Evolving Web
- Stop Writing Blog Posts: Ideas for Interactive Content
- Parallax Scrolling? HTML5 Animations? Why We’re Falling for New Design Techniques