Web Design Workshop #16: Blue WordPress Theme
tuts workshop

Web Design Workshop #16: Blue WordPress Theme

on Aug 4th 2012 with 23 comments

Web Design Workshop is our regular 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, Adi would like some feedback on a coming screencast series..

This one’s particularly in your interest to give feedback on; the final result will be recorded as a screencast series for Webdesigntuts+ and Wptuts+. Let’s hear what you think!

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 #16

More images:

 

I’m interested in usability and creating a clutter free theme. This will be a series focusing on the whole process of web design, from the ground up, using a light version of the Twitter Bootstrap responsive framework, culminating in WordPress integration. Any feedback is welcome, so let me know what you want to see in this series! – Adi Purdila

  • Project: Blue WordPress Theme, for Webdesigntuts+ and Wptuts+ screencast series
  • Designer: 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
  • Jacob Krustchinsky

    First!

    I think it looks very clean and organized. Not a fan of the envato stuff which doesn’t fit in with the surrounding elements but I realize those are place holders. Good work!

  • http://jatinhariani.com Jatin Hariani

    I am a really big fan of clean and uncluttered designs. This design seems really pleasing to the eyes and yet, makes no compromise in usability. Is this responsive? Would have liked to see how this will look on smaller screens.

    • http://www.snaptin.com Ian Yates
      Author

      That’s a good point Jatin. This will be responsive (based on the Bootstrap framework) and it might be a good opportunity to demonstrate wireframing for responsive layouts.. Thanks for your input!

      • samir

        hi, ian yates how’re u doing?
        the truth is that adi is an artist, will he create it from photoshop to html/css?
        This video series is a good initiative between wp.tutsplus and webdesign.tutsplus. and I hope y ‘will of other projects in the future that will address other topics this way!
        but is wp.tutsplus make their part of the series in screencast or in text? i hope and i know that a lot of people with me in here that it will be screencast. and i hope th
        thank you very mutch ian Yates for this project. and thanks to adi purdila and to wp.tutsplus guy or women who will made this available for us.

        • http://twitter.com/todvenn Tod

          Yep, I’m waiting / hoping on a Tuts+ special WordPress screencast-course too. Its the only outstanding thing I haven’t got, that I really want from Tuts+ subscription :)

          Granted I have about 50GB of tutorials and ebooks from Tuts+, but not the critical wp screencast! I heard Jeffrey say the ThemeForest designers that were asked to create a course were scared they’d lose their business / rock star status :)

          Even if the screencast course was sold on the marketplace on a pay per-download, if it was a good Tuts+ course, it could earn a lot more than selling wp themes themselves. a few designers/devs should team up together to make a good course, and sell it here on envato, to me!

          I could learn wp from the books I have, I just prefer videos first.

  • George

    What is the font you are using for the headings? It’s nice! Can’t really fault this as far as clean, minimal themes go.. nice one!

  • Dougieladd

    Always a fan of Adi’s work… but I’m viewing this on a crappy laptop in the middle of nowhere! There seems to be a bit too much white space for my taste (unless of course there are subtle colors I can’t see because of this rubbish screen). Othere than that its fine.

  • Pingback: My Stream | Web Design Workshop #16: Blue WordPress Theme | My Stream

  • Pingback: Web Design Workshop #16: Blue WordPress Theme | Shadowtek Hosting and Design Solutions

  • http://www.adipurdila.com AdiPurdila

    @Jatin Yes, it will be responsive and fluid. I don’t have any renders yet for that tho.

    @George I’m using Bree Serif, beautiful typeface: http://www.google.com/webfonts/specimen/Bree+Serif

  • Rashidul

    Looks nice but it seems there is lots of free space

  • Hamid

    it’s very nice like always adi, clean, unclutter, Simple with a nice footer.
    really thank you adi and hope we see more complite website series from you in soon.

  • http://lukewhitehouse.co.uk Luke Whitehouse

    The sponsers look a little over dominant on the theme for my liking.

  • samir

    hi adi, thank you very mutch
    i have to say that i see a lot of white space (margins-paddings)
    i wanted to see how the template addapts its self for the other sizes screen if he do that?
    generally i find it clean, and very clear, it’s a good and nice template!

    but my question is how can we maintain this clarity when we have to display a lot of informations (shopping carte, news website …etc)?

  • Felps

    Hi, there are many good things in your design but for this comment i will make just critical and i hope that be constructive:

    1) I personally think that in a clean theme you must eliminate all unecessary things, in search box you could just let “Search…”, 2 options of “got to top” are to much just 1 is good, in newsletter just “name” and “email” are good, in Connect box there are many follow us, maybe just let some clean image for instant recognition and name like “[img] facebook; [img] RSS “…

    2) I like the old bookmark style like: Link > Link > [b]Your Page[b], i think that way is better for navigation, not really for people click but to see and know where they are. Search box in my opinion is lost in middle of flashy images on sidebar, some users like to see a search more proeminent. Two sidebars seems heavy, the content on left is clean but the heavy siderbars are stealing attention…

    3) considering the print screen, the content are closer to border of monitor, maybe a minimum space of 70px or more is better…

    I love your design and i hope you dont consider everything in my comment, i made this just to mark points to think about =)

    PS: sorry about my english

  • http://www.adipurdila.com AdiPurdila

    Thanks for all your comments and suggestions so far guys, really helpful.

  • http://Digiartes.net Juan

    Very nice design. I would love to see a drop down login form, like the one on the tutsplus website. Again, great wirk Adi.

  • Pingback: Web Design Workshop #16: Blue WordPress Theme | Webdesigntuts+ | inLine Media RSS Blog

  • Pingback: Web Design Workshop #16: Blue WordPress Theme | Webdesigntuts+ - webdevelopmentdelhi.in

  • http://twitter.com/todvenn Tod

    Nice work. I endorse your white space! I say more! why do people think a website homepage needs to contain so much info, no other layout design aims to be so full of info, why so in web design, I dunno.

    your ‘continue reading’ buttons are prominent elements that could be in a more consistent position, not dependent upon length of extract, or presence of image, more like tuts+, http://psd.tutsplus.com/ they too could be reduced to read ‘continue..’ or ‘more..’

    The layout would benefit from keeping the horizontal break lines particularly in the right two columns aligned with one another, like you’d see in any other printed layouts in mags, posters.. where blocks of text/image are positioned along the same imaginary lines…. But because of the type of optional[?] widget elements you’re using – tags, connect to… twitter, FB, etc. I realise you cant predict their contents height to ensure they always align, without making them all really big and fixed height widgets, I guess..

    So, to reduce the number of lines that don’t align, and more clearly distinguish the different sections of the layout / content – you could merge the content in the two columns on the right into one column since they are the same type of content, minimising the design further, making it appear less cluttered. you can also then afford more space around the right sidebar too. Your square thumbnail ads in these sidebars are twice the size of your wider ads, so you could have two littluns’ on a line, or one biggun’, and keep more elements in alignment. like http://www.premiumpixels.com/

    The search box could go outside the side bar, better in the header / nav too, or the option for it to be placed there, so its more related to the main content, putting a search box in a sidebar widget may mean all your pages need the widget or they lack this search box. typically aligned left of the now-single vertical break line separating the main content from the right sidebar. bit boring, makes better sense, related content – relatively positioned.

    Perhaps larger, bolder headings for the posts – like on tuts+, to ensure the visitors eye doesn’t wander over the content you want them to read. maybe bigger images and extracts too, super bold n’ visual. Tuts+ style.

    The connect to… twitter, fb, linkedin etc should be icons, visual, elements, with a nice hover color transition. again, more immediately digested, less clutter, clearer design, more space, plus people who love hover transitions like me will stay on your site hovering over the links for ages. They might click one.

    Choose a better blue colour, this looks a bit 90′s annual report, given thats its the only colour.

    Nice footer, one of the lists could left-align with the vertical break line.

    A bit more space in the header for awesome large logos.. larger logo.

    A bit of texture?

  • http://www.customicondesign.com/ Custom Icon Design

    Very clean and nice. the font of header is good. button is nice. it’s all popular style in this time.

  • http://cloudyday.at CloudyDay Webdesign

    First of all I have to say that I do like this theme design. The only thing what I would add is add something on the menu to make it clearer on which page you currently are, for the rest I think it’s clear and accessible and that makes

  • http://www.adipurdila.com AdiPurdila

    Thanks guys, you’ve been very helpful with your comments. Tod, thanks for that detailed feedback, I can really work with that!

    • http://twitter.com/todvenn Tod

      I was on one that night :)

  • http://www.creativeloop.co.zw Maston Mbewe

    That is a simple and very clean design. Good job!

  • http://bowesales.com Jesse

    Hi Adi,

    This looks like a very clean and simplistic theme with all of the right elements of WordPress being used. I particularly like the attention you gave the comments on the blog-post page. The “About the Author” and “Like Box” are nice touches too.

    Just wondering how far you’ll dive into the development aspects of the site. Will you touch on templates like a Full-Width template for example? Will there be shortcodes, custom post types, slideshows, theme options, custom menu’s and/or internationalization? I think the community is really aching for a full head-to-toe tutorial on these items. It’d be great if this theme was the jumping point for a more in-depth look at all of these aspects of WP development.

    I like that you’re working with Bootstrap as Ian’s ‘Magazine’ tutorials were great to work with Skeleton. This looks like a great theme and the subtitles you’ve incorporated into your design stand out nicely. From a design point of view it’s beautiful. Will it sell on Themeforest? I guess we’ll find out when you’re finished.

    Looking forward to your screencast!

  • Sol

    Hi there,

    Love it and looking forward to more of this. The only thing that bothers me – and it could only be the sample content – is that in the content area, the left margin is smaller than the right one..

    Perhaps I am too used to having everything centered lol..

    wonderful job!

    Sunshine