Business Logs Design Study
Sunday, June 13th, 2004 by MR
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.
Reader Comments
12 Responses to “Business Logs Design Study”
Mike,
Thank you for writing this story. I am often bothered by initial designing. I remember when I used to do it by hand, and then I decided I should do it on the computer, and then in HTML. It is amazing how we grow. I am now back to pencil and notebook, although I long for the organization of the computer medium. It makes me wonder if these tablet PCs could possible take the place of the notebook.
For those out there that may want a book to inspire on the creative process I recommend MTIV by Hillman Curtis
The biggest thing that helps me from using the pencil and notebook is that it doesn’t let me get caught up in the details.
Ps it appears to have double <p> my stuff and how do you prefer us to write link tags?
June 13th, 2004 at 8:45 pm
Hey Dru, thanks for the comment.
We’re still working out the kinks in the commenting system. It seems that if you preview your comment, it will stick the <p> tags in twice for no apparent reason. We’re on it :)
You can write links in straight XHTML.
June 13th, 2004 at 8:55 pm
Thank you. Everything looks great.
June 13th, 2004 at 9:00 pm
I find the navigation system very effective–in fact, it’s the first thing that really struck me about the site. I’ve not seen it done precisely that way before, and it’s refreshingly simple. Great work bringing the site together so quickly, and thanks for the glimpse into your development process.
June 13th, 2004 at 9:17 pm
I had a lot of fun giving you input along the way, Mike. The result definitely shows the site has had a lot of thorough planning and consideration. Congrats!
June 13th, 2004 at 9:29 pm
Thanks a ton guys, appreciate it a lot.
Tom: I’m glad you like the navigation. That was the section of the site that changed the most over the course of the design, and I’m happy people think it came out well.
June 13th, 2004 at 9:54 pm
*skim* *skim* *skim* *reads name*…
great post!!
June 14th, 2004 at 12:25 am
Wow, Mike, I love when people write posts like this. The site is amazing, great work!
And the CSS file is really clean too, I’m going to be studying that one for a long time.
June 14th, 2004 at 7:08 am
The biggest design element exemplified in this site that makes me jealous is just the sheer simplicity of it all. “Less is more” ranks among the most abused of cliches in the English language, but anyone who has ever designed something on the web can attest to the fact that simple organization is difficult. It’s easy to watch a website grow into a mass of content without clear organization or intended flow. Keeping a site relevent, simple, and full of purposeful flow is the toughest of design elements, and knowing all the CSS in the world, without proper application doesn’t make the flow riddle any easier to crack.
But what would you expect from usability experts? Good job Mike, I like this site a lot.
June 14th, 2004 at 3:32 pm
Not much I can say after that one Eric, I’m floored.
Thanks again buddy!
June 14th, 2004 at 4:36 pm
Browsing through the archives of this site I stumbled upon this entry and found it to be an insightful read.
First off, let me commend you on your keen sense of whitespace, color theory, and usability. This site is truly beautiful.
With that in mind, browsing through your CSS file I was surprised you decided to use pixel values to set your font size. Given that there is no font size selector on your page, are you worried at all about the accessibility issues this raises for IE users who cannot alter the size of the font using their browser settings alone?
July 21st, 2004 at 4:19 pm
Hi Scott, first, thank you very much for your comment. I’m really glad that you like the site, we spent a lot of time on it :)
Out of the entire Business Logs team, I can definitely say that I’m the largest accessibility advocate. We spent a very long time debating how to set the font size, and finally we had to put cross-browser compatibility ahead of accessibility — for the initial launch at least.
Because the default text size varies according to browser (and used to vary in early versions of Safari, but then Apple fixed that) we decided to use pixel values for our first release, and then update the site with a style switcher soon thereafter. However, client work and other projects got in the way, and I’m almost ashamed to say that it fell by the wayside.
We promise to have a style switcher on this site sooner rather than later, but because of our tight work schedule I cannot guarantee the exact timeframe.
Thanks again, Scott, much appreciated.
July 22nd, 2004 at 10:32 am
Add Your Comment
Comments are moderated because spam's not tolerated.
