SocialBias :: a Digital Abstraction of Michael Parkatti

You’ve quit your cubicle-bound job, learned how to hack, come up with a great idea, and delved right into the process of limitless creation.  This shit is going to be easy… and fun!!  Why worry about all those boring old ways of doing things?  This is inspiration.  Nay, DIVINE inspiration.

Is this you?  Then you are a tool.  And I’ll tell you why.

Yes, I’m glad you’ve taken the chance to work on your own stuff.  That takes cajones all on its own.  But if you don’t approach your new-found liberty with the rigour and professionalism it deserves, you will quickly find yourself dripping in debt and smelling faintly like corn syrup.

Case in point: build wireframes first, and implement second.

You may be the John von Neumann of building websites, but I’m sure even he planned his ass off before working on anything.  Building wireframes should be the first step before you start building ANY page on your website.  It’s preferable to wireframe out your entire site before you start, but at the very least before you begin hacking up each page.

What’s included in a good wireframe?  I just use plain old textboxes.  You know, those are boxes, with text in them.  You’d like the text to provide some context.  I have an example of a mock wireframe to the right.  The static parts of your page can just be coloured boxes representing their proportional size on the page.  The important stuff is what’s on the main content pane.  I get down to div-level detail here.  Start cutting up the page in your mind.  This doesn’t have to be exact — it merely needs to start your brain thinking about what will work and what won’t.  You’d be surprised how much can change while you’re at this stage.  You’ll erase boxes and text and move things around and alter your ideas until it looks entirely different from when you started.

What’s the use of all this?  Imagine if you had gone from idea to implementation with no planning.  You spend a day cutting this page up beautifully and populating it with dynamic content.  And then you realize after the fact that you needed to change something.  So you spend half a day making that change.  Then, you realize the context of some other information is off, so you have to alter that, spending another half day.  Soon, you’re three days deep into one freaking page when you could have spent one hour planning and one day implementing.

What should you use to wireframe your stuff up?  You may laugh, but I use PowerPoint.  hahaha microsoft sucks, yeah ok whatever, I don’t care.  I’ve been using that program my entire life, and I can make one of these in about 4 minutes if I need to.  Another good tool is Fireworks, and I know some Mac users use OmniGraffle.  Seriously, it doesn’t matter — whatever program you choose doesn’t need to split atoms, it needs to make boxes that you can add text to very quickly.

Be professional.  Plan every move.  Ideally you have a dynamic in your startup where one guy likes to plan and one guy likes to implement.  In our startup, I do the majority of planning, while Mike does the majority of implementation.  If your founding group is going to disagree about what you’re building, that conversation needs to happen at the box-and-text phase, rather than the code-and-interface phase.  Once something’s built, there are a lot more emotions and animousity involved in changing it.  Therefore, more reasons to ignore problems.

You have no idea how many times we’ve referred back to my original mockups, or redrafted them on the fly to consider how our changes will affect the personality of a page.  Save yourself time.  Wire it up!