Topical and Tropical

Rants, Raves, and Other Mindless Babble

Wireframe vs. Priority Map

Posted on February 26, 2009 in Design | comment bubble No Comments »

Over the past few months I’ve been asked to do an increasing number of wireframes for sites and in process I’ve been doing a lot of thinking about how they should be treated. Usually what the wireframe entails is me reviewing the information architecture and drawing a bunch of rectangles and squares in an Illustrator document. No color is ever used, no fancy typefaces, just boxes on paper to show layout. Which is precisely where I think the conflict arises. When most of our clients see a wireframe document, they assume that things are going to be positioned exactly as is on the wireframe, and I as the designer, instantly becomes limited in how I can treat the content when it comes to execution. Instead of the wireframe informing the design, it starts to dictate the design, which I think is the wrong path to go down.

I’ve had this conversation with colleagues and I’ve started trying to get them to think of wireframes in a different way. Instead of it being a document that shows where content is going to be positioned on the page, I have been proposing that we treat them as more of a “priority map”. For example, in a recent wireframe I did I had the normal stuff at the top (universal links bar, header, main nav), then underneath that I had a large block for mission stories and to the immediate right in a second column I had a news block stacked on top of an events block. The mission stories block took up 75% of the width of the page, which was a decision informed by the information architecture and discussed by the project team as being the most important thing that we wanted to say on the homepage. News and events were secondary items, and thus only received the remaining 25% of the homepage real estate for that particular row of content. Now I look at that and say to myself, “Maybe I don’t want to put news and events to the immediate right of the mission stories block, but I know that I have to give the priority majority to the mission stories block. That’s the most important thing.” So instead of the wireframe dictating design, it’s informing it, and telling me which areas should get more visual emphasis.

Unfortunately it’s a hard sell to tell our clients to not think about wireframes as structured design layouts. They tend to be reactionary people who see something and immediately want to assume, or worse yet, turn into designers. Perhaps I need to take my concept of a priority map one step further and stay out of Illustrator. Perhaps the solution would be to cut out the rectangles and squares individually and then move them around in a very loose and free-flowing manner either with or without the client present. Whatever way I decide to do it, the most important thing is that clients understand that I have been entrusted by them to give them guidance as to how to most effectively display their content on their website.

So move over rectangles and squares and get ready for the scissors.

Take Care of Your Files

Posted on February 20, 2009 in Design | comment bubble 3 Comments »

One of my biggest pet peeves is people who don’t manage their files well. Now I completely understand that everyone is different, and everyone has their own system that works for them, but seriously, do you need 100 icons on your desktop? At this very moment I have all my files divided into 2 different folders on my desktop, one is for all things associated with my Human Radiator brand, and the other is a folder containing all the work I do for Notre Dame. Inside the Notre Dame folder I have projects folders that I try to keep to less than 700MB in size, for the specific reason of easily being able to back them up to CD. Inside those project folders, all of my projects are labeled with name and the current year. That way I have an immediate sense as to when the project was started. On a sidenote, lately I have been adding a project number in front of the project name that corresponds with the project number that was assigned in our time/project management system.

Drilling down further, almost all of my project folders have the same core set of interior folders … assets, docs, and mocks. Inside the assets folder is where I keep all digital materials such as photography, iStock downloads, Illustrator or InDesign files, etc., that I use to create the mockup. Documents such as information architectures, wireframes, and written content fill the docs folder and are separated into appropriate sub-folders. Finally there is the mocks folder. Scanning the mocks folder you will typically find a subfolder labeled _Currents that houses all the most recent mockups for a client. The reason for the underscore is so that it is always at the top of the list. Also in that folder you will find folders labeled Round 1, Round 2, and so forth, that serve as a way for me to version my work, in case a client would ever come back to me and say, “Can we go back to 3 versions ago?” Finally, in this same mocks folder, I tend to keep a folder named scraps, where I typically put concepts and sketches that I didn’t think would work for the particular project I was working on, but may work for someone else.

The last thing about file management that I want to mention has to do specifically with how design files are handled in Photoshop. When I start a new web design project, the very first thing I do is set my 960px wide boundaries. To do this, I have a preset 960px wide by 100px tall box generated by Photoshop, I make it an obnoxious red or green color, I drag and drop it in my document, and then I strike a couple of guides. To complete that process I then create a new layer folder with the name “Borders”, throw the 960 block in it, and hide the visibility. From there, it’s a crapshoot when it comes to what objects I place where and what order the layers are in, but one thing always remains the same. When I create a new layer in Photoshop, the very first thing I do is label it. Nothing frustrates me more when I take a handoff from a fellow designer and all I see when I open the layers palette is a stack of layers named “Layer 1, Layer 2, Layer 3, and oh yeah, Layer 54 has an adjustment layer applied to it. Good luck finding it.” That system is inefficient and causes unnecessary stress for a fellow designer or developer who have to decipher the mysterious code that was established. Once I have the mockup complete, and all my layers have appropriate names, and I then group them as if they were a legend for the mockup, so developers can read it like a book from the top down when they are chopping it up and coding it. And finally, unless you want other designers and developers to pull their hair out as they watch the spinning pinwheel of death, please use adjustment layers and complex masks carefully, as they add a ton of file weight, and more often than not, the effect can be achieved the exact same way without using them.

Morale of the story … take care of your files. The system that I have developed for myself seems to be working quite well and I can’t remember the last time I had a complaint from a developer because my files were difficult to interpret. If I can prevent frustration simply by taking a second and adding a layer name or collecting things in a folder then by all means I am going to do it.

Being Stealthlike

Posted on February 13, 2009 in Daily Life | comment bubble No Comments »

I like to consider myself a ninja in training, constantly honing my stealthlike abilities, both at home and at the office. It starts in the mornings when I have to successfully get out of bed without waking my wife and our 3 month old son who is sleeping in the bassinet next to our bed. I quietly creep past him, go down the hall, and close my 2 year old’s door, all the while hoping that the hinges holding it on don’t let out an ear-piercing squeal. As I enter the bathroom directly across the hall and go about my daily bladder-emptying sequence, I cross my fingers as I gently push the toilet flush handle down. After the whooshing and swirling sounds have stopped reverberating off the walls, I listen intently to see if the natives have grown restless. Success. Everyone is still asleep. From there I jump in the shower and turn on the water, praying that my son thinks it’s just that daily downpour. After a quick drying session, I proceed to slip into my outfit for the day, all the while trying to not rattle my clothes hangers into an uncontrollable plastic chorus. Then I glide past my sleeping son and wife again, grab my glasses, and clench my phone with a death grip as I attempt to muffle the unhooking beep. With a surgeons precision, my fingers lift up my keys and they quietly clank together as they dangle and await the nerve-racking drop into my pants pocket. After a quick gazelle-like gallop down the hall, I slowly lift the plastic shopping bag that contains my lunch and mechanically slip my work bag over my shoulder. Finally I open my 2 year old’s door slightly, quietly whisper goodbye to everyone, and efficiently negotiate the creaky boards of our upstairs as if they are museum security lasers. Success. I’m downstairs and in the clear.

After packing up my lunch and nervously listening to the gears of our garage door grind, I gracefully pull out of the driveway and go off to work where I engage in a different kind of stealthiness. Donning my design ninja outfit, I quietly enter our basement offices, and fire up my computer. Unknowing clients and co-workers walk past my curvicle and say hi, never knowing completely what I’m doing as I sit hunched over my keyboard. I am quietly concepting video gallery interfaces, sketching out wireframe documents, designing site bugs, and changing the face of the web at Notre Dame. Without notice I emerge from the shadows of my glowing MacBook Pro and launch an attack on the social networking world, thrusting my conversational throwing star into the Twitter and AIM interfaces. While the rest of the campus leaves the comfort of their offices and goes out to enjoy lunch, I stay back, and with my stomach rumbling from sheer hunger I continue to plow my way through client projects and initiatives. I have complete radio silence throughout the day, with the exception of the occasional blasting of Rage Against the Machine or Metallica and the tension-relieving phone call from home, where I listen to the calming words of my wife or the incoherent sentences of my 2 year old. At the end of the day, with a cat-like reflex I close all software applications and dialog boxes, swiftly pull all cords from their respective outlets, and stride out of the office only revealing my presence with the parting words, “Have a goodnight gang.”

Fortunately, the pressure of being ninja-like subsides once I get home, until bedtime of course, and I can enjoy the freedom and chaos that comes from being a husband and father of two young boys. My son Jacob and I can wrestle and play cars on the floor, I can hold my son Lucas and watch him smile at me as I make sounds only frogs would make, and I can crash on the couch with my wife, with TiVO remote in hand, and peruse through numerous shows with robotic-type grace. Along the way, diapers are changed with the highest degree of calming smoothness, table scraps and crumbs are collected, temper tantrums are resolved, and the garbage is taken out under the cover of the late-evening Midwestern darkness.

The night has come once again and the warrior must once again appear. After engaging in online video game conflicts and tweaking freelance design projects while the rest of the world sleeps, I creep upstairs, and amongst the glow of a hallway nightlight and a harmony of snoring, I get ready for bed, only to wake up the next morning and do it all over again.

Back To Blogging

Posted on February 8, 2009 in Uncategorized | comment bubble No Comments »

Hello everyone. I know it’s been a long time and I apologize for the delay. Been busy at Notre Dame and raising my two boys. Now I’m back on the blogging circuit and I hope to spark ideas for creative writing.

Check this out