Picking up where we left off yesterday, I’m continuing today to explain the process that I use when designing a blog.
[step no. 2 - design] Generally, once the inspiration phase is complete, I begin by building a digital style board that includes a color palette, fonts, textures and design elements. In the case of Biblio-Files, I knew that Kelly wanted to use shades of gray and orange. I rounded out the palette with a few other neutrals and a subtle pop of soft teal blue. I chose fonts that would seamlessly integrate with the slightly worn, library-book feel that I wanted the blog to exude. Then came the fun part. I knew that I wanted to incorporate several book-themed textures into Kelly’s blog, so I fired up my scanner. The background of the blog is the linen from a vintage hardback book (complete with a few scratches). The library card that doubles as the categories, search and archives tabber was the actual card that Kelly sent along with her inspiration files. I scanned a small envelope, just because I liked the look of it. This was later used for the GoodReads feed in the sidebar. A torn book page was scanned and later became the sidebar texture. Several strips of masking tape were stuck to a blank sheet of paper, and then incorporated into the design. After the scanning was complete, I began building the layout.
I typically start by building the basic structure of the blog. In this case, that meant wireframing the area needed for posts, sidebar, header and footer. The sidebar is almost always designed first. For Biblio-Files, the library card was the first thing on the sidebar that I tackled. I had the idea of incorporating a card that would slide out of the pocket, and I wanted to include reference to the Dewey Decimal system by numbering the categories in a unique way. Kelly helped to figure out which numbers to use for what. The front of the card became a placeholder for Kelly’s brief “welcome”. Slowly, the elements and the design came together. Kelly and I communicated frequently, and I would often shoot over a quick email posing a question or needing an opinion. The last thing I set out to design was the header. I know that this seems backwards, but I almost always end up working that way. In the case of Biblio-Files, I had the idea to incorporate a stack of books. I photographed actual books that I had at home, then brought the image into photoshop to get edited, clipped and transformed into a blog header. The original layout included a stack of books with the pages all facing (no spines seen).
[step no. 3 - proofing] When I sent off the first-round proof, I explained to Kelly that her feedback was very important. Hearing a client’s reactions to a design, as well as their ideas for edits, tweaks, or things they want to see different is what makes for a successful end product. I always stress the importance of combining their style with my design. The bottom line is that I don’t want to create something that looks great, but is miles from what they really love. I say all of that to explain why I value client feedback so much.
After Kelly looked over the first proof, she had a few edits that she wanted to see made. Most were fairly minor, and easy to change. The biggest one was the header. She was struggling with the script font on the face of the book, and suggested “turning” one book around so that the title would be on a spine. BRILLIANT, people, brilliant!! I mean, why didn’t I think of that? This was one of those shining moments that mades me so, so happy that I work with amazing and creative clients all the time. The title on the spine (which we worked with so that it looked like it was engraved) turned out to be the perfect solution for the header. A couple more rounds of edits, and the blog design was completed and approved to code!
[step no. 4 - coding] The last stage of any blog design is arguably the least glamorous and the most important. The development, or coding, of a blog is what takes my static design and turns it into a live, working blog that you can access via the interwebs. I work with two developers, who “slice and dice” my photoshop files into WordPress templates. Typically this process takes 3 – 5 weeks, depending on the complexity of the project and if there are technical challenges along the way. In the case of Biblio-Files, the developer struggled a bit to get our sliding library card to function in the way that I had envisioned, but in the end, it all came together (don’t ask me how… it’s magic). After the online proof was approved by Kelly, we took the blog live online at http://biblio-files.com. There were a few bugs to work out (as there often are in the first few days after a launch), but everything came together beautifully, and Kelly has since been hard at work blogging.
[step no. 5 - blog away!] Once the blog is live online, it’s time for the author to get to work! Filling up the blog with content is the best part, and I always love visiting blogs that I’ve designed to see how they are taking on a life of their own with the author all moved in. Biblio-Files is no exception. Kelly has done an amazing job with her first few posts (it helps that she is a fantastic writer and an expert on her topic), and I can’t wait to see where she takes Biblio-Files in the future. Make sure to stop by, check out her new blog, and say hello!
So there you have it… a very brief glimpse at the process of a blog design, from start to finish. If you’ve read both (long-winded) posts, I am impressed. Be back tomorrow with a (more concise) intro to another big blog project that went live this week!