Every site has a story, and our website is no different.
We went from business concept to website launch in under 6 weeks, so you can imagine how compacted the design process was. Even though we didn’t roll through as many iterations as usual, we still feel that we accomplished a lot in the time we gave ourselves. This entry will hopefully give our readers some insight into what it takes (and what I personally do) to launch a website from scratch.
Starting to Design
I was given almost total creative freedom over the look and feel of businesslogs.com, as long as the business and user goals were inherent in my design. Our main goals were:
- Tell people what we do and how it is beneficial
- Explain in a friendly tone what our goals as a business are
- Introduce people to the weblog medium in case they are unaware of its uses and/or benefits
So with those goals in the front of my mind, I started to design. My design process probably varies from others, but it works very well for how my mind works. First step, I take out my Miquelrius notebook and go to Panera Bread just to jump into a different environment to stir my creative juices. Plus, I love Panera Bread anyway, so the pure joy of being there gets me jazzed up to draw.
I break out my pencil and start to design. Grid-based, basic sketches, visual elements, nothing fancy. Erase, redraw, refine, darken, and tweak are the tools attached to my design belt, and all are used during this first step in the process.
Once I get something down on paper that seems like it has some possibilities, I break out a pen and start jotting down design notes with little arrows pointing to their associated areas. Stuff like 12px Lucida over 1.6?, border-bottom: 1px or 2px?, float: none;, and quote pic w/shadow… brown… Georgia/Palatino. My brain is hardwired with CSS instructions, so I’ll start writing down rules needed to accomplish what I’ve just drawn.
Navigation and Information Architecture
Before I design, I have a good idea as to how the site should flow and be structured. The biggest challenge in my mind was how to keep the level-structured navigational architecture visible on all pages without resorting to a drop-down menu. How do I show that the About page is in a different section than the Syndicate page?
After failing in the first navigation design attempt, I decided to KISS and forego any CSS fancies I had. The result is what you see on the page right now. If you check the CSS, you’ll notice that the navigational HTML text is set in Tahoma. Talk about a blast from the past 🙂
The Devil’s in the Details
I’m updating and tweaking UI elements on our website constantly — some you may be able to see, some you probably will never notice. If I can say anything about the type of designer I am, it is that I notice microscopic inconsistencies in a sea of pixels. Little things bother me to no end, so I guess that makes for tighter design 🙂
There are a ton of people we’d like to thank that helped out with testing or advice: Didier for showing us the light with Myriad, Nigel and Alex for being “yes men”, Mike Simmons for PHP snippets, Paul Jarvis for real-time beta testing, and everyone else who gave us feedback before (or during) the launch.