Article 40

Sneak Peek at the New Think Vitamin

By Ryan Carson @ryancarson

12 August 2010 | Category: Uncategorized

Over the last two weeks, we've been working on the new re-design of Think Vitamin and I wanted to give you a preview of how the design is looking and explain the changes we're going to make to the site.

The Wireframe

Let's start with the wireframe, created by Keir.

We decided to make a fundamental shift to the way the blog is going to work. Here's the new structure:

Each week we'll have a Feature, written by the Web's leading experts (our 'Advisory Board'). These will be meaty and cutting-edge pieces which will push your knowledge and give you insight.
Each day, we'll be posting many different items, Tumblr style. Each of these posts will be given the type of Link, Tweet, Image, Video, Podcast, Interview or Event. You'll be able to filter out types of posts you're not interested in.
We've built a plugin for WordPress that allow us to to star tweets and pull them into the feed.
We also built a bookmarklet which allow us to one-click-add great links, podcasts, videos and events from around the web. This should generate a lot of traffic for the content or sites we're linking to.
We've cleaned out the archive and removed a lot of out-dated content. We also simplified the categories to make it easier to find content.
We've added 'Sponsored Posts' so when we want to do a bit of marketing and, for example, tell you about one of our events, you'll understand what's going on and won't feel like we're trying to be sneaky and spam you :)
We've decided to give it the strapline of "The Web Practitioner's Blog" . The breakdown of content will be 70% Web Designer and Front-end Developer and 30% Backend Web Developer.
The site will be coded in HTML5 and will be fully responsive. We'll also be using some CSS3 goodness.

The Photoshop Comps …

Home Page

Download full-size (1.6 MB)

Article Page

Download full-size (1.5 MB)

We’re going to be using Disqus for the commenting system, styled to match the site. Therefore it wasn’t worth the time of putting it in the mockup as it would happen during the coding phase.

Thoughts and Opinions?

We’d love to hear what you all think so please leave a comment below and let us know!

Follow @thinkvitamin on Twitter Please check out Treehouse

Other Posts You Might Find Interesting

Sorry - No Related Posts Found

Comments

http://www.jonwinstanley.com Jon

Hi Ryan

Thanks for sharing the design process again. It’s interesting to see the solutions you guys are coming up with.

I love the article page you have built. The use of the grid, the typography and the pullquote detail look fantastic and are very readable.

The home page is really good, my only thought is that there may be slightly too many round dots vying for my attention.

Jon
http://www.gregbabula.com Greg Babula

Saw this on Forrst, very solid design and a huge improvement from the current design in my opinion
http://twitter.com/HiteshMehta Hitesh Mehta

I absolutely agree with Jon (above comment). I was about the give you the same feedback but noticed he pointed out the issue with the dots.

The problem is that thr is no distinction between the social bookmark dots, the icon dots, the ones with date too. Which is why everything looks randomly placed.

More feedback can come after seeing more details of the page.

Thanks,
Hitesh Mehta
http://carbongraffiti.com Jon Aizlewood

That article page is beeeaautiful. Kudos to Mike Kus, and of course the original wireframer. Is that in Mockingbird?

Looking forward to seeing the live version. Great work guys.
http://webdesignandsuch.com mike i

I was going to say that it looks a little heavy on the little icon images used for everything. (icon over the text on the homepage nav, icons for social media, icons next to all the blog entries, etc.)

After second look perhaps its the use of the dots for things that aren’t even icons that made me have that feeling (like the circle behind the # of comments). I would try switching the red dot behind the comments so that it has no color fill, instead a red stroke. It’s almost too prominent of a color for what it is. It’s like your eye goes right to it, when the # of comments on a blog entry is probably the least important info on the page.

Anyway guys, good luck and looking forward to seeing the final result!
http://tuhinkumar.com Tuhin Kumar

Exactly the same comment as the other two commentars Ryan. Too many circles with high contrast. You could:
1)Try reducing their number
2) Reduce the contrast if they are highly necessary
3) Also both red and black are both high contrast and fight for share of user’s attention.
The article page is spot on, though if I were you I would also take into account to what happens when the posts are very short with the longer sidebar, so that it does not overflow.
4) Use a divider to seperate one post from other if possible.
http://www.forepoint.co.uk Shaun Bent

Thanks for sharing your design process with us, loving the new design and am really looking forward to seeing this site live.

Will you be releasing that WordPress plugin for favourite’d tweets? It sounds good!

Regards

Shaun
http://www.designboy.co.uk Design Boy

Looking great, can’t wait to see it up and running!
Andy

Nice design! I am just not sure there is enough distinction between buttons, icons and counters (the icons with 15 in them are counters aren’t they?)
Ryan Carson

You won’t see so many dots when you look at it at normal size. Obviously the full-screen grab shows you the entire length of the page, which you wouldn’t normally see on one screen as you’d have to scroll.
http://john.onolan.org JohnONolan

I agree about the dots, and I still noticed the issue when I was looking at the comp at full size and scrolling. The sidebar being above the content area also still *really* doesn’t sit right with me.

Just my 2c, overall I think the design is extremely beautiful!
James

Are you planning to give something back to the community?

E.g. making the developed WordPress plugin available for everyone to download?
http://www.simonfosterdesign.com/ Simon Foster

Hi Ryan, loving this redesign, and I don’t mind the circles at all, especially as you say when it’s full size you won’t see them all at one time. Interesting to see you’re using Disqus for comments, I wasn’t aware of them so will check them out.
http://www.tedgoas.com Ted Goas

I always love seeing wireframes / designs and the thought process behind them. I can see how the layout would support a weekly feature + tumblr-esc style posts. Not only am I looking forward to seeing this live, you’ve given me some things to think about on my own projects.

Great job Keir, Ryan, & team!
Shane

Hi Ryan, congrats on the new look design. I think the overall idea works well and that the main (assumed) objectives of the site are presented well.

One question around the design process: Do you feel that Mikes creativity is somewhat hindered in any way when you have a dedicated wire framing phase ? Don’t get me wrong, I like the design of the new blog but I have to admit I feel it lacks “Mike’s touch” and I wonder if that’s down to the fact the wireframes may have been originally conceived by someone else (perhaps yourself).

One thing I have found is that when working with relatively detailed wireframes and then passing onto the designer, the creative process often gets affected as it’s hard to break through the mental impressions left in your head due to seeing detailed wireframes. Obviously the way in which to combat this is to use the designer in the wireframe stages too but something tells me that, when comparing to Mike’s other AMAZING work, he didn’t have the creative freedom and ideas to explore like it clearly demonstrates in his other work.

Shane
http://www.ackernaut.com/ Terry

I’m excited to see the clean look.
http://screencake.com Jordan Humphreys

I like the header but beyond that I can’t read the body text as it is too light even on a nice monitor, the circles are annoying, and everything seems very disorganized. I like your color choices but would recommend darkening the body text slightly. Maybe if you put the social media icons further down the page to better distribute them, possibly putting them in the footer. Good start though, I can’t wait to see the next version.
http://www.keironlowe.co.uk Keiron Lowe

I’ve got to say that I love it and I cannot wait to see it finished. Only problem is the same as everyone else, the dots, I just think there too big, there taking the attention away from the post, apart from that its looking great!
http://www.keironlowe.co.uk Keiron Lowe

Btw, spelling mistake in the footer in the article design ;)
http://www.ignaciogiri.com Ignacio

Ryan, do I have a chance to get that wireframe and try a concept myself?

Thanks!
Ryan Carson

Yup – we used Mockingbird for the wireframe. Good little tool. It’s going paid now though. We used it for free.
Ryan Carson

I’d be happy to release it – just hit up Keir and I’m sure he’ll throw it up on GitHub.
Ryan Carson

Is the fact we run this site and don’t charge for any content, count as giving back to the community? ;)

Yes, we’re hoping to release the plugin.
Ryan Carson

Thanks Ted!
Ryan Carson

Mike, Keir and I all decided to go for a cleaner, simpler approach aesthetically. TV is a very content-driven site, thus needs to conform to a lot of ‘standards’ when it comes to how a blog is laid out. Also, the look needed to align with TVM which we already released.
Ryan Carson

If you hit up Keir I’m sure he’ll send it over. I don’t have it on my machine, sorry!
http://shikebali.co.cc Shikeb Ali

I love everything comes from Carsonified and very eager to see it live too.

Its a pure Mike Kus design, I loved the way he kept the simple & minimalistic design blended with good web usability elements.

Apart all that, I still feel that Think Vitamin Radio section got little diffused among all, even the mic icon is not catching attention.

I congratulate Mike, Keir and Ryan for their wonderful efforts.

Thanks,
Shikeb Ali
http://iwearyourshirt.com Jason Sadler

Can’t wait to see the new site, thanks for sharing the comps and wireframe. Looks amazing!
Ryan Carson

Thanks Shikeb! :)
http://www.smashingshare.com Waheed Akhtar

New design is looking great. Just one thing am not sure about are list items with big circles. I can see the point of putting them like this, but still I did not liked it :)
I liked the article page more.
http://www.howtomakeawebsite.net Daniel

I think the new design improves many aspects, including the navigation.
http://www.menacestudio.com Dennis

Looks great. Just curious. Where do you get the icons, images and other resources that you used for the PSD design?
Ryan Carson

Cheers Jason :)
Ryan Carson

Mike would be able to answer you on that one …
http://www.ianwootten.co.uk Ian

Something that sticks out at me is the word “practitioners” in the title next to the navigation menus. It’s much longer than the words “the”, “web” or “blog”.

Is there any need to have “The Web” separated out over 2 lines?
Ryan Carson

Interesting point. We like it that way ;)
http://twitter.com/tkukurin Toni Kukurin

Hey Ryan,

How come you decided on using Disqus for your commenting system? Is it because of all the additional abilities and the possibility to log in from different accounts?

It’s definitely an interesting decision. ;)
http://www.johnmacpherson.com/ John Macpherson

Looking great. Subtle tones really make it. Love how the images hang over following text.

Iv started using getmockingbird recently and its a great tool. Its not going to be super expensive when it comes out of beta, so ill pay for it. One thing i don’t like about it though is that it has no IE support, ‘so what’ people may say. The problem is that a lot of clients still use IE and if they have it locked into their network there’s not a lot you can do. The only real downfall in what is a great tool thats saves a lot of confusion with clients and IA.
http://softpedia.com cata

The dots are ok.
Don’t know how to tell you this but…. i’ll try.
The overall design kind of sucks.
http://www.marinacostabonita.com Marina Condos

Thaks for sharing the new design, it represents alot of work.

Topics

Learn with Treehouse

Sneak Peek at the New Think Vitamin

By Ryan Carson @ryancarson

12 August 2010 | Category: Uncategorized

The Wireframe

Thoughts and Opinions?

Other Posts You Might Find Interesting

Comments

Think Vitamin Radio
Episode #34: Amazon Fire and Responsive Roundtable

Advisory Board

Aarron Walter

Ethan Marcotte

Molly Holzschlag

Paul Boag

Jeff Veen

Ryan Carson

Topics

Learn with Treehouse

Sneak Peek at the New Think Vitamin

By Ryan Carson @ryancarson

12 August 2010 | Category: Uncategorized

The Wireframe

Thoughts and Opinions?

Other Posts You Might Find Interesting

Comments

Think Vitamin RadioEpisode #34: Amazon Fire and Responsive Roundtable

Advisory Board

Aarron Walter

Ethan Marcotte

Molly Holzschlag

Paul Boag

Jeff Veen

Ryan Carson

Think Vitamin Radio
Episode #34: Amazon Fire and Responsive Roundtable