Analog creative development

18th July 2013
Back to Blog

Do you have a development or design problem? Try thinking outside-in to solve it.

Dirt and Rust home page redesign wireframe

I’ve been doing a lot of thought around my development process lately, and I’ve named my process “Analog Creative Development”. Some use “mobile first”, others use “agile development”, but I think my approach is to think outside-in, chop the problem, whatever it is, into big blocks and then start getting more detailed within those blocks.

My most recent example of this is the redesign of this website earlier this month. I started by wireframing the three major views: Desktop, Tablet, and Mobile. I thought about the constraints of each view starting with the largest to smallest, and some things jumped out at me right away:

  • Desktop has more bandwidth and fewer restrictions, design-wise, so being selective here is key; I had to simply create my own constraints.
  • Tablet is in between Desktop and Mobile in all respects. I had to think about some screen restrictions, but
  • Mobile needs its own navigation to be usable in such a small space

Good design is what you leave behind, so Analog Creative Development takes the stone block and chips away at it, allowing the statue/art to show itself rather than trying to force it into being.

I had an issue with highlighting the tabs on my website when the directory got more than one level deep; WordPress has a way to do this in php but I wanted to use js instead to push myself in that way but also to not depend on the back end php code to figure out what page/url is currently active.

So I backed away from the computer and wrote down my steps:

  • Detect the url
  • Check that url for keywords
  • Add the highlight class to a tab for a url that’s currently in use

After writing down these steps I was able to search for code/answers more specifically rather than the much more general, “what JavaScript should I use to highlight a navigation tab”.

And sometimes I end up creating more problems than I solve by adding fixes rather than breaking the problem down to figure out what it is first. Those fixes, when they don’t work, combine to create an even larger problem than the original so the same theory applies:

  • Write down the problem in steps
  • Write down the solution in steps

Of course understanding the problem is always the first step, and using Analog Creative Development I’ve found helps me focus on that as much as possible.

What’s your design/development process? Let me know in the comments.

Tags:

Nathaniel Flick

I'm a Front End Web Developer passionate about usability. My primary specialties are HTML5, CSS3, SCSS, LESS, and jQuery and I am very familiar with Foundation and Bootstrap frameworks. I've worked on top of and with WordPress, Shopify, Rails, Python, and ASP.net/Umbraco frameworks.

Leave a Reply

Your email address will not be published. Required fields are marked *