MyInkBlog Reinvented, About the New Look

By   |  Stashed in Site News

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

Old MyInkBlog Logo

In With the New

New MyInkBlog Logo

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

MyInkBlog 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

MyInkBlog Comments

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

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

Author Page

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

Navigation

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

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.

About the Author

Andrew is a primary contributer for MyInkBlog. He is a full time web developer for Niagara University. When he's not working there, he's a blogger, twitter'er, wordpress'er, silverstripe advocate, blessed father and husband.

More posts by

Website      

  • http://www.pvmgarage.com/en piervix

    Great job dear Andrew. It is clean and fresh… I really like the footer!

    Good luck!

  • http://www.webdesignerdepot.com Walter

    Loving the new design, great job Andrew. I’d make the rollover on the menu be yellow like the logo. Just an idea :)

    • http://www.myinkblog.com Andrew Houle

      Thanks Walter. Glad to hear you like the redesign. I’ve always been a big fan of your site and the bold, vibrant design you’ve created! I think I will give the yellow highlight a try, a few other people have made that suggestion as well.

  • http://arbent.net Angie Bowen

    I absolutely love the redesign Andrew. Both the header & footer look awesome!

  • http://deadwingsdesigns.com Rob Bowen

    Looking good, Andrew! Definitely looking good. Very sleek and sharp. Sign me up as a fan!

  • jPomfret

    OOO nice. loving the new look! good job

    • http://inspiredology.com Chad Mueller

      Great redesign Andrew, looks very professional and makes reading a pleasure.. I do agree with Jacob and Walter…

      Making the category menu hover links yellow to match your logo – and I am unsure of the blue links around the site – I understand users see blue as the default link colour, but I would like to see some yellow links possibly…

      Really like the footer typography as well… great job

  • http://www.vectorss.com/ vectorss

    Very nice redesign. Great

  • http://graphicdesignblender.com Preston D Lee

    Andrew, I love the new look. It’s cleaner and very beautiful. Many of the usability issues you addressed were vital ones that I addressed when redesigning GDB as well a month or so ago.

    I have to admit, I miss the splatter. Even if it was just a background thought in addition to the design (not necessarily part of the logo, just the theme) then I would feel like I’m where I want to be.

    The splatter said “Ink blog” to me–I think it needs to be kept somehow.

    Anyway, just a few thoughts. I love the new design. Thanks for sharing the process and motivation behind it.

    • http://www.myinkblog.com Andrew Houle

      Thanks for the feedback. In some ways I miss the splatter as well, but I like the simplicity of the new logo and site. Maybe I can work a splatter into the background at some point down the road though :)

  • http://www.animhut.com/ sriganesh

    Andrew , its a great job. the new logo is unique and the new looks give me new feel. and the footer is with round corners – i seen very few has this. good going :)

  • http://webtolerant.com Amey

    Nice redesign. Inspiring me to do something.

  • http://timothybsmith.com Tim Smith

    Wow! I remember when you first showed me the PSD for the re-design! The site looks great and I also appreciate the adjustments that you’ve made to the UX.

    I’m also loving the footer. Useful, practical and… sexy. I don’t know how else to say that.

    Overall… great job! I knew you’d deliver an awesome new design :-)

  • http://elitebydesign.com Brian Lovin

    Wow, a 100% improvement Andrew. Beautiful attention to detail! Congrats on the redesign and keep up the good work on MyInkBlog.

  • http://veanndesign.com Anna

    I like this re-design. The logo looks good to me (I like the yellow black color combination). Subtle texture is also a nice touch. Good job!

  • http://www.thisisaaronslife.com Aaron Irizarry

    Congrats on the makeover buddy looks great!

  • http://www.designfollow.com designfollow

    very nice design.

    Good luck.

  • http://www.mushindesign.co.uk Martin

    Wow a beautiful re-design.
    I’m a big fan of the new logo and that huge footer is awesome, all these great re-designs are making me itchy to re-do my site!

  • http://www.bebop-ad.com BebopDesigner

    Wow! Looks fantastic. Congratulations guys!

  • http://www.traceygrady.com/blog Tracey Grady

    I’m really impressed with the new look for your site and logo. Thanks for sharing the process you went through. I feel encouraged for when I get to work on my own redesign in the not too distant future.

  • http://interactiveblend.com Louis Gubitosi

    slick Andrew, very slick… I love the new logo and the attention to detail in the new layout. Really good job man!

  • http://www.faqpal.com FAQPAL

    Looks fantastic, good job guys.

  • http://www.littleboxofideas.com Sneh Roy

    Well Done Andrew! And congratulations :) So loving the new logo and I really like how you have still stayed true to your roots. Great Job!

  • http://richworks.in/ Richie

    ooooo … Love the redesign. The logo looks authentic, Andrew. The footer is simply brilliant. Excellent Job. Keep up the good work, pal :)

    • http://www.smashingshare.com Waheed Akhtar

      Thats awesome work Andrew. Very well done with the new design. Love it specially footer :)

  • http://www.marcofolio.net/ Marco

    Looks very good and professional – well done mate!

  • Alicia

    I’m definitely liking the redesign, the large footer and the author pages are a nice touch.

    I was a fan of the old ink splatter logo, but I think I’ll like the new one just as much. :)

  • http://xpirtdesign.com Xpirt Design

    Lookin’ good. Real good! The new commenting styles are great too

  • http://www.pancakeseven.com Thorsten

    Nice redesign, great job Andrew. Especially the footer looks good.

  • http://www.theroxor.com Kevin

    The new look is great. Really sleek and clean!

  • http://www.myinkblog.com Andrew Houle

    Wow! I’m flattered and thankful for all the encouraging feedback. It’s nice to see the new design go over so well, I poured a lot of time and effort into it. Thanks for taking the time to comment.

  • http://www.addtodesign.com Mathew Carpenter

    Congratulations Andrew on a successful redesign. I absolutely love the new logo – so much better then the old one. Everything about the new website looks and feels great. Well done!

  • http://www.fudgegraphics.com Franz Jeitz

    Hey Andrew. Congrats on the new design. I especially love the footer & typography work. Keep up the great work. You’re a big asset to the design community!

  • http://twitter.com/chrisspooner Chris Spooner

    Sleek new look indeed! I’m a big fan of the contrast between light and dark – works really well

  • http://www.7creative.com Adrian Bornea

    I love the design and also the logo, but the “I” looks more like and “l(L)”

  • Warren

    Nice work bro, but the h3 tags are displaying a little wonky. I’m running ff on Windows 7 . . .

    • http://www.myinkblog.com Andrew Houle

      I wonder what the deal is with that. I had another person send my a screenshot in a win7, FF 3.5 environment that looked pretty crazy. I’ll keep digging to find out why that’s happening.

  • http://www.sksdesigns.com Shannon – SKS Designs

    Love the new design but the “ink” reminds me a little of the Chase Ink credit card… glad you went with yellow instead of blue.

    Great work with the entire design though!

    • http://www.myinkblog.com Andrew Houle

      It’s funny you mentioned that. I had actually finished the logo about 6 months ago, before I ever saw their ‘ink’ campaign. Then a couple months later one of their ads came on, and I couldn’t believe they went with an ‘ink’ branding like that. Oh well, I suppose I can’t have the market cornered on a word :)

  • Nonny

    I came to your site from a twitter link, liked it, disabled adblock, then saw you had what appears to be 10,000 ads in the right sidebar that pushes any useful content way down, and then promptly put adblock on again.

    Think about it – why don’t you just raise your rates and sell LESS space? You’ll probably make the same amount of money, if not more, and your advertisers would get far more attention from users. Simple supply and demand man. This is freaking awful right now. I dont care about any of those ads right now because there are so many of them, none of them stand out.

    • http://www.myinkblog.com Andrew Houle

      Sorry the ads were such a disturbance for you. All of my sponsors offer useful services to the design community and I’m stoked to have them on board. Their sponsorship makes the amount of time I spend developing this blog possible.

  • http://www.visualswirl.com/ Chris Thurman

    The logo and the footer are definitely my favorite parts, although I like it all. Great work Andrew! I know it must feel great to get this done.

  • http://www.twitter.com/markjames19 Mark James

    Love the new look, keep up the good work!

  • http://www.tutorial9.net/ David Leggett

    It just keeps getting better Andrew :)

    • http://www.myinkblog.com Andrew Houle

      Thanks David! That means a bunch from you. I drew a lot of inspiration from the Tutorial 9 redesign :)

  • http://www.romirockstar.com Romi

    new design look really great i love black and white work a lot great job

  • http://www.monixweb.com Bruno Moniz

    It’s awesome… The typography, the colors, all together.

    Excuse me, i must pick up my chin from the floor!

  • http://thegeektalk.com The Geek Talk

    Very clean and beautiful, i love your footer section, good job

  • http://www.webresourcesdepot.com/ Umut Muhaddisoglu

    Everything looks very clean and slick. Loved the new logo too.

  • http://www.vagrantradio.com Jason

    I like it, great job!

  • http://kennedysgarage.com Kennedy’s Garage

    Great new look. I love the new logo and for a dark looking website, you nailed it! I always love seeing a website redesign for the better.

  • http://blog.creativityden.com Liam McCabe

    Beautiful Andrew.

    The logo is simple superb and is beautifully complimented by the textured background.

    You have done a wonderful job with the typography. :)

    If I had any critique it would be the use of the light blue links, it would be nice if you could use the orange/yellow used in the logo throughout the design, however I understand that this may look a little bright on a white background (ugh had that problem over at CD :( )

    Nonetheless, a huge improvement Andrew, I’m sure the content will continue to be as awesome as ever :)

    • http://www.myinkblog.com Andrew Houle

      Thanks for the kind words and feedback. Yeah, as you well know from your blog colors, yellow on white just does not work, but I may try some more tweaks on the link color.

  • http://www.offthegrid-pr.com Lisa

    It’s lover-ly! Crisp, super-clean and your attention to the commenting area is much appreciated. I’m inspired!

  • http://www.inspirebit.com chris

    W.O.N.D.E.R.F.U.L all these details!

  • http://www.beginnerdj.com Murlu

    Wow, this is really nice looking, congrats!

    I must say, I kind of liked the ink spot :( but the new logo is very enjoyable :)

  • http://ricker.se Rickard

    Hey man,

    Like the site. The development of the logo leaves the old one in the dust.

    Keep it coming…

  • http://justcreativedesign.com Jacob Cass

    Really feeling this new redesign Andrew, you must be happy. Great job. It’s interesting reading about your design choices as I am also in the midst of redesigning JCD, with a similar layout as yours. I really like the footer!

    I have one nitpick about the ‘Ink’ part of your logo, it doesn’t seem smooth flowing, in particular the ‘I’ and how it curves back around. I think some small adjustments or a redraw of it will bring it out even more.

    I’d also make the links easier to distinguish (light blue is too similar) and maybe the menu rollovers to be another colour (yellow?)

    Also, the INK logo as the pic in the comments, I thought these were coming from you, but were in fact guests. Maybe worth changing.

    All in all, great job!

    • http://www.myinkblog.com Andrew Houle

      Glad you liked the new design. I’m really looking forward to checking out the JCD redesign when it’s ready. I’m sure it’s gonna be awesome.

      Thanks also for your very helpful feedback. I will definitely consider your logo suggestions in my next design iteration. I see what you’re saying on the guest avatars. I’m gonna rethink those.

  • http://bcinarli.com Bilal Çınarlı

    Nice and slick new design, but theme’s source code is really messy and not readable :(

  • http://skillz-community.net/blog Shurandy Thode

    I love this new design. Much better and friendly for the eyes than the previous one. Nice job Andrew. :)

  • http://www.damianherrington.co.uk Damian Herrington

    Nice design, really like it and a great read above into your thoughts and processes.

  • http://www.gomediazine.com Adam Wagner

    Really nice execution (and explanation) Andrew.

  • http://www.gomedia.us Jeff Finley

    Nice design! Much more inspiring than the last. Nice use of Typekit, but I don’t really like what it does to your headlines.

    • http://www.myinkblog.com Andrew Houle

      Thanks Jeff. Ugh, the weird fonts must be a windows environment thing because a few other people mentioned this. It’s weird cause it looks ok in my winxp FF/IE virtual machine I have setup for testing on my Mac. I’m gonna have to do some testing on a win7 machine.

  • http://vectips.com Rype

    Love the new design!

  • http://suhela.deviantart.com Suhela

    New design is looking gr8…

  • http://creativenerds.co.uk Timothy Blake

    Wow the site design is just amazing i love it, The new logo looks super sexy great job!!!

  • Blake

    Looks great! The hard work will definitely pay off!

  • Aaron

    Really like the new design. Keep up the good work

  • http://twitter.com/BrendaJParish Alvaro Brackins

    Excellent blog, showing maturity in your response. I should just give up and take lessons from you

    Follow me on Twitter

  • http://webexpedition18.com Nikola Lazarevic

    Excellent work Andrew! Congratulations :)

    Everything is in place. Love the new logo and big footer

  • http://www.designjuices.co.uk jared thompson

    really digging the new logo, and a big fan of the footer. so organized and something i would love to make myself in the future. Kudos on it all! most definitely a great re-brand and a new look to admire.
    promoted as ever with a great article :)

  • Lea Botwinick

    I see I’m late to the party, but better late then never – congrats on the new site design. Wicked choice of colors and loving the contrast!

    Thanks for sharing your design process as well. I’m on version 5 of my own site and know how rewarding it could be.

    Keep the good work coming!

  • http://www.area1.info Mihai O.

    This is one great design, good job Andrew :)

  • http://designrfix.com Tony

    Congratulations on your new design…love it!

  • Andrew

    I have to say, I am quite enjoying the new design.
    Only thing I would say is it would be nice to insert a little CSS fix to remove the border that appears around links after they are clicked.
    If you just add “outline: none;” to your basic link class, the problem should go away.

    Other than that, I am really enjoying the site, nice work.

  • http://matanxmou.wosaic.net/ Matan

    Excellent! This is way better than the old design.

    I actually really like the navigation bar as it is now. Maybe just add some minimalistic hover effect and it’ll be perfect :)

  • http://www.flickr.com/photos/danielgilles/ Tanaka13 – Créations du Net

    A really nice and enjoyable redesign. Very nice footer too, lots of useful infos ;) Clean and sharp logo too.

  • http://tutorijali.hdonweb.com/ Ivan MiÅ¡ić

    Great redesign :-)

  • http://www.psdvault.com James Qu

    Hello Andrew, the new design looks absolutely great! clean and fresh :)
    the new logo is wonderful and I love the representation of the word “ink”, very exciting!

  • http://www.graphicdesignblog.org Graphic Design Blog

    Hey Andrew…congrats on the successful redesign and truly “Ink” is written beautifully. The footer also looks nice…now i am having itchy fingers for my blog design too ;)

  • http://bit.ly/markedlines Stratos

    Very nice change! It looks awesome. I loved the colors!

  • http://digitalartempire.com/ Benjamin Rama

    wow you got a great response , I hope I get the same when I have a redesign in a couple of years . Excellent re-design – like I said before I love the footer Overall looks v smart
    - awesome design + awesome content = awesome blog

  • http://webdesignfan.com/ Tomas

    Redesign looks great, refreshing and imroved. Good luck!

  • http://www.migratedesign.com Laurent Jouvin

    Yeah… I liked the splatter as well. Like you said, you might be able to add it back in later down the road… perhaps a more iconic version of it. You’ve taken a complete different route and I like it. It takes a lot of courage to make a change of that size. Great job!

  • http://www.fuelbrandnetwork.com Joshua Smibert

    Great stuff Andrew. Very clean. I love that it ties information together intuitively. Congrats.

  • http://www.bensky.co.uk Ben Sky

    The new logo is SO much better, great job.. love it.

  • http://www.designbackslash.com Kitty

    Congratulations on your new look! Just in time for the new year (the Chinese that is)… Looks great! Keep up the great work for all the amazing stuff you do for the design community!

  • http://www.angelashetler.com Angela Shetler

    Out of all the great updates to the look of your blog, I have to say the new logo is my favorite. Absolutely love it.

  • RUGRLN

    Wow….this is fantastic Andrew!!
    Very modern…very W2.0…very cool!
    A fantastic redesign!!

  • http://www.tutozed.com Tutozed

    Perfect ! i love it

  • http://www.onextrapixel.com Aidan

    There are no perfect design but good design. The re-design definitely show maturity and experiences being put to good use.

    Really liked the new looks! Though I would like the typography to be just a bit bigger. :)

  • http://www.jtt-designs.com JTT Designs

    I really like the new slick style you put on the design. Simple, but it brings out the essence of what you are about!

    I also love the information on the website. Packed with a lot of useful tips and tricks.

  • http://danyvilela.net Dany

    Amazing job. I just can spend hours on your website admiring the design and enjoying the content!

  • http://djquietstorm.wordpress.com/ dj quietstorm

    Respect! I love the detail that you’ve put into every corner of your world here. The type and the colors and the spacing makes it a pleasure to be here. Oh, and thanks for the _content_, too!