Graphic design and specifically design and production for the web is a process of discovery, experimentation and negotiation. There is also a healthy dose of compromise. As much as we work to streamline how things come together, it’s not quite a step-by-step grind. There is no “cranking it out“.
Since we started to design and build web sites, we have gotten much smarter. As with every project, we experiment with methods. Some of these methods may only impact how we handle tasks internally, some may be how we interact with the client.
The Hive Mind
We work as a three headed team where we have our desks in a cluster. We talk and exchange all day. That is one of the beauties of the small studio. On the most recent project with a Wharton/UPenn web site, we also had the benefit of the Marketing Communications team shepard the project along.
This helped the client stay close and stay on task. This also allowed us to share project management duties. I don’t mind telling you, project management while in the grip of design and building, is a little hairy. It can also be what opens the door to scope creep.
Backed by this extra support, we decided to linger in the early steps of the wireframes and mock-ups. The idea here is that, once we get to building, all of the design and content decisions are in place. Now, that may sound like common sense, but when working with tight schedules and tight budgets, there is a temptation to go directly to the WordPress CMS and design on the fly. When sites are simple brochures, you might get away with this, but as the users are looking for different info and functionality in your site, that can be problematic.
We worked closely with the MarComm team to lay out the wireframes. We used an online service called Mockingbird (https://gomockingbird.com). This is a useful service in that you can work remotely together in real time of how these pieces come together. This helped us get all of the main section pages in place and out in the open.
After using Mockingbird on a few projects, it’s safe to say that this service is great for smaller projects to get quick results, but as projects get larger, I crave a better interface. Next time around, we might try Axure (https://www.axure.com/).
Here are some samples of where we ended up.
Is it Better to Interact or is Speed the Need?
Again, these tools are great when you need to partner with someone that is not in the room with you. I tend to move much faster in a page layout program like InDesign where we can really fly and iterate. In fact, once we got past the wire frames, we created the mock-ups in this way. That said, we are hearing great things about Sketch (https://www.sketchapp.com/), which is something we want to try next.
We were working with the client theme so many of the decisions like typography, color and branding are in place. However, content, hierarchy, scale and pacing are what we are concerned with. Here are some of the mock-up samples.
Getting the project to this point put us in a great spot where we can see the entire set of pages right in front of us. In fact, we set up a staging page that allows the client to see both thumbnails and full size JPEGs. Now we can really dig in with the client and focus on the details of image selection, copy language and impact of content. Plus, the client feels grounded and certain about where their project is headed. Of course, that’s when everything goes according to plan… What?… it can happen!
While it may not always be that easy, you owe it to youself to put your project in a position to run smoothly.