MyInkBlog Reinvented, About the New Look
I’ve been chatting up a redesign for MyInkBlog on Twitter and this site for quite some time now. The redesign/rebranding of my blog has proven to be one of the most challenging design jobs I’ve ever had to complete. I’m not at all surprised that most designers are their own worst enemy, and I was certainly no exception to that theory. I mocked up a new design, threw it out, then started again about 5 times before completing the design iteration you’re seeing now. I’m pretty stoked with the final result, but I’ll never be fully satisfied; more tweaks and changes are sure to come.
About the New Logo
The first thing I did when I started to brainstorm for the redesign was to rethink the logo. I figured most of the branding and styling would fall into place much smoother after that. I’m not sure it actually did, but it seemed like a good place to begin.
I was definitely ready for a new logo, the previous one had begun to feel dated, and unoriginal. I wanted something more customized, something that fit my blog’s style and personality a little better.
Out With the Old
In With the New
For my new logo I began sketching on paper, long before I ever opened up a design program. I hashed out a bunch of different ideas before going with Museo for the words ‘My’ and ‘Blog’. The ‘Ink’ portion of the logo is a customized script I created from my drawings. I scanned in my sketch and traced ‘Ink’ with the pen tool in Illustrator. A few more tweaks later, and that’s the new logo you see now.
Typography
One of my main concerns obsessions with the redesign was improving the site’s typography. Site’s like Brian Hoff’s and Elliot Jay Stock’s have always inspired me because of their attention to detail in this crucial area. The aesthetics and readability of a site are so important to me, and most every designer, so being a design-focused blog I really wanted to make some considerable improvements in this area.
Utilizing Typekit
For the headers, I felt that I needed a unique, bold, but simple font. I decided to check into Typekit and look through the awesome new options that are available. Forever limited to web-safe fonts, it was quite liberating to have an exhausting array of choices at my disposal. I eventually selected Ronnia condensed bold.
The sidebar headers are a serif font stack headed by Palatino. Other meticulous decisions were made on spacing, contrasting levels of grays, and the new, more vibrant blue that you see for the links.
Comment Improvements
I also spent a considerable amount of time trying to improve the comments area. After all, you folks and the discussions that you help create, are vital to the health of this blog. I made an effort to improve the styling, and added threaded comments. So you can now directly respond to anyone’s comment.
Having Fun With CSS 3
I’ve spoke often on this blog about how awesome I think the features in CSS 3 are. It rocks that only 17% of my visitors use IE. That gave me plenty of confidence to use styles like rounded corners and box shadows. It’s nice to add a bunch of progressive enhancements knowing that many of you will get to enjoy them.
I didn’t completely ignore my IE users. I added DD Roundies to the corners for most of the divs that needed them, and I did my best to make this site look good in IE 7 & 8. I did run into a few unexpected, frustrating issues, but I suppose those areas will just have to be examples of graceful degradation. As far as IE 6 is concerned, I very consciously did not support it. The joy of running a design-focused blog is that less than 3% of my readers use IE 6. And if sites like YouTube can stop supporting it, then I think MyInkBlog can as well :)
Author Pages
MyInkBlog is far from a 1-man-show. There are a lot of talented authors that drive the content on this blog. I wanted to add more ways to highlight who they are, and what they’ve done. Every author now has an author page with their bio, links, and the articles they’ve written.
Category Navigation & Search
I have future plans to organize the navigation even more efficiently, but for now I’m happy to have the category links in a more prevalent location. I hope that moving the nav to the top of every page helps you find what you are looking for even quicker. In the same breadth of usability I moved the search bar to the header.
Big Ole Footer
I really like the trend of designing big, informative footers on blogs, so I decided to join that club. I figured it was a great place to add some inspiration, twitter updates, friend icons, and site info. The footer was one of the places on the blog that I tried to infuse a little more personality, but I hope that shows throughout the site.
More On the Way
I’ve got a bunch of future plans bouncing around in my head, but if I tried to accomplish everything at once I may never actually launch this redesign. I’ll leave those plans as a teaser for next time. On a side note, this is actually my 3rd version of MyInkBlog, but unfortunately I couldn’t find a screenshot of how terrible the first version looked.
Your Thoughts & Feedback
I’m really looking forward to getting your feedback. Staring at your own design too long makes you blind to the obvious bugs and usability issues that persist. So drop me a comment and give me an honest assessment of what you think. Hopefully I can use your invaluable feedback to improve and refine this design even further.
-
http://www.pvmgarage.com/en piervix
-
http://www.webdesignerdepot.com Walter
-
http://arbent.net Angie Bowen
-
http://deadwingsdesigns.com Rob Bowen
-
jPomfret
-
http://inspiredology.com Chad Mueller
-
http://www.vectorss.com/ vectorss
-
http://graphicdesignblender.com Preston D Lee
-
http://www.animhut.com/ sriganesh
-
http://webtolerant.com Amey
-
http://timothybsmith.com Tim Smith
-
http://elitebydesign.com Brian Lovin
-
http://veanndesign.com Anna
-
http://www.thisisaaronslife.com Aaron Irizarry
-
http://www.designfollow.com designfollow
-
http://www.mushindesign.co.uk Martin
-
http://www.bebop-ad.com BebopDesigner
-
http://www.traceygrady.com/blog Tracey Grady
-
http://interactiveblend.com Louis Gubitosi
-
http://www.faqpal.com FAQPAL
-
http://www.littleboxofideas.com Sneh Roy
-
http://richworks.in/ Richie
-
http://www.smashingshare.com Waheed Akhtar
-
http://www.marcofolio.net/ Marco
-
Alicia
-
http://xpirtdesign.com Xpirt Design
-
http://www.pancakeseven.com Thorsten
-
http://www.theroxor.com Kevin
-
http://www.addtodesign.com Mathew Carpenter
-
http://www.fudgegraphics.com Franz Jeitz
-
http://twitter.com/chrisspooner Chris Spooner
-
http://www.7creative.com Adrian Bornea
-
Warren
-
http://www.sksdesigns.com Shannon – SKS Designs
-
Nonny
-
http://www.visualswirl.com/ Chris Thurman
-
http://www.twitter.com/markjames19 Mark James
-
http://www.tutorial9.net/ David Leggett
-
http://www.romirockstar.com Romi
-
http://www.monixweb.com Bruno Moniz
-
http://thegeektalk.com The Geek Talk
-
http://www.webresourcesdepot.com/ Umut Muhaddisoglu
-
http://www.vagrantradio.com Jason
-
http://kennedysgarage.com Kennedy’s Garage
-
http://blog.creativityden.com Liam McCabe
-
http://www.offthegrid-pr.com Lisa
-
http://www.inspirebit.com chris
-
http://www.beginnerdj.com Murlu
-
http://ricker.se Rickard
-
http://justcreativedesign.com Jacob Cass
-
http://bcinarli.com Bilal Çınarlı
-
http://skillz-community.net/blog Shurandy Thode
-
http://www.damianherrington.co.uk Damian Herrington
-
http://www.gomediazine.com Adam Wagner
-
http://www.gomedia.us Jeff Finley
-
http://vectips.com Rype
-
http://suhela.deviantart.com Suhela
-
http://creativenerds.co.uk Timothy Blake
-
Blake
-
Aaron
-
http://twitter.com/BrendaJParish Alvaro Brackins
-
http://webexpedition18.com Nikola Lazarevic
-
http://www.designjuices.co.uk jared thompson
-
Lea Botwinick
-
http://www.area1.info Mihai O.
-
http://designrfix.com Tony
-
Andrew
-
http://matanxmou.wosaic.net/ Matan
-
http://www.flickr.com/photos/danielgilles/ Tanaka13 – Créations du Net
-
http://tutorijali.hdonweb.com/ Ivan Mišić
-
http://www.psdvault.com James Qu
-
http://www.graphicdesignblog.org Graphic Design Blog
-
http://bit.ly/markedlines Stratos
-
http://digitalartempire.com/ Benjamin Rama
-
http://webdesignfan.com/ Tomas
-
http://www.migratedesign.com Laurent Jouvin
-
http://www.fuelbrandnetwork.com Joshua Smibert
-
http://www.bensky.co.uk Ben Sky
-
http://www.designbackslash.com Kitty
-
http://www.angelashetler.com Angela Shetler
-
RUGRLN
-
http://www.tutozed.com Tutozed
-
http://www.onextrapixel.com Aidan
-
http://www.jtt-designs.com JTT Designs
-
http://danyvilela.net Dany
-
http://djquietstorm.wordpress.com/ dj quietstorm


