Web Design Workshop #4: VideoBlogger
tuts workshop

Web Design Workshop #4: VideoBlogger

on Mar 9th 2012 with 14 comments

Web Design Workshop is our weekly community project where we ask readers to submit their work for your friendly, constructive criticism. It’s the perfect way to learn, offer opinions and have your own work critiqued! This week, we have an interesting one for you because the final product will be the basis for a tutorial..

Rules of Engagement

Play nice! We deliberately select work which will benefit from advice and pointers. If you can’t be constructive in your comments, don’t. Other than that, offer any advice you can give. Feel free to link to examples and images which back up your points.

The Design

Web Design Workshop #4

Check out the other pages:

VideoBlogger is a responsive theme for a media blog website. It’s based on a 960 grid and features many of the elements you’d expect to see in a design like this. Your opinion really matters to me; when the design is complete I’ll be recording a Premium tutorial about the build process! – Adi Purdila

Looking for constructive criticism on your own work? Submit it for a workshop – most but not all submissions are published. Be patient though, there could be a queue..

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

Hi there! My name's Ian Yates. Welcome to Webdesigntuts+ :)  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • Ritter

    I like the outlay of the design, however I feel the theme is a little bit to flat. I would say that a little bit of color would be nice. Example the twitter font can be light blue, the Facebook blue, and the rss can be dark orange. The tags could also go for orange as the stars can bring out the tags or even red come to think of it. The recent comments is almost that it blends in and users love comments on a site. Can highlight it though using dark red on the talk bubbles fonts. To sum up I would say that play a little bit of color with the design. But excellent job, I can see there was a lot of time that went into the design. I hope I helped….

  • Anders

    Great Adi, cant wait till the tutorial is ready

  • http://apkestudio.com Francisco Aguilera G.

    I think the design concept is very well done, but as @ritter says “the theme looks a little bit flat”. I think that happens because the images are black & white and the design elements are black and white too. If the images and some elements like the logo and social icons were in color, the design becomes great.

  • Wouter

    I like it a lot, the focus obviously is on the video sections. The orange also immediately draws your attention.

    I’m not sure about the navigation at the top, though. At first I thought it was the main navigation, but really they’re some kind of category filters? I don’t really get what this navigation is about exactly.

    And I’m not 100% sure about this, but it seems like it’s easy to skip over it.

  • Pingback: Web Design Workshop #4: VideoBlogger | Shadowtek | Hosting and Design Solutions

  • http://daniel-lucas.com Daniel Lucas

    I really like this design, good job! The layout is clean which I do like although I agree with the previous comments that the theme is too grey and could use some more colour to help make things stand out.

  • http://typedstrong.com Jesse

    My only suggestion is the layout of the comments. The left-to-right layout threw me off a little. I think the reason was the varying heights. It would have been easier for me to follow, initially, if each row of comments had the same height. I realize that doesn’t really work because of how the replies are nested (I really liked that by the way). Ultimately it was the numbering that made me realize how to read the comments, but it took longer than expected. I think the idea is very interesting, I really liked the reply nesting, but something about it left me a little uneasy. Overall though, I’m a fan.

  • http://leianivey.com Leian

    I like the layout a lot, and I agree with previous comments. especially the one placing emphasis on the main navigation.
    I would also suggest more categories on the home page, such as comedy, animation, etc. below the popular videos. You could even place a filter above that so all your videos could be on the homepage and they could easily navigate to the ones they want.

  • http://bjornline.info bjornredemption

    I actually like how subtle (or ‘flat’ as some would say) everything looks – sites which host images or videos typically have lots of thumbnails of different colors and having a distinct color scheme for the design can become over powering.I love way you’ve worked with shades and shadows – however i do feel you’ve cheated a little ( :P ) by making the thumbnails b/w – this keeps the subtle look of the design but will be difficult to implement for a functioning media blog.
    Overall great job – i’m sure you’re tutorial will be a hit

  • http://www.adipurdila.com AdiPurdila

    Thanks for your comments guys, they’re really helping me.

    I do agree about the “flatness” of everything. At first I wanted to make the thumbs colored on hover only, but this created a layout that’s too gray. I was afraid I’d crowd it too much by having lots of colors in there, but I think if I tamper with the margins a bit and give everything a lot more breathing room, adding colors won’t have a bad impact, but on the contrary.

    About the top nav, I agree it looks a bit out of place there. I did want a category menu in there since this is a media blog, but I think I’ll just get rid of it completely or replace it with a button that toggles this menu.

    About the comments area, I was actually very curios on the reaction people will have on it. I wanted to experiment a bit with a different layout and it seems it’s problematic. I’ll revert to a single column list, keeping the nesting styles tho.

    Again, thanks everyone, really appreciate your help. I’ll post some updates as I work on this.

  • http://www.wall321.com MainWall

    however i do feel you’ve cheated a little ( :P ) by making the thumbnails b/w – this keeps the subtle look of the design but will be difficult to implement for a functioning media blog.

  • Nicole

    I would like to see a little more padding in between the sections. Room to breathe.

  • Sam

    Could you possibly add a little icon on the load more buttons at the moment they look like a
    button that takes you somewhere. Like the look though. On the footer pages looks a bit out there on its own.

  • chanelle

    I really like the design, but can I ask where you made the website? I’m just starting out and am trying to find a software to practice making websites on. Am I right in thinking I need to download Dreamweavers? I know I’m throwing myself in the deepend a bit by not really knowing much but need to start from somewhere! thanks :)

  • cmdino88

    Very clean design!!!… What is the grid template you use? can you reply me the link of it? Your grid template looks like from twitter boothstrap but with baseline grid, twitter boothstrap has no baseline grid.