Jennifer O'Toole

Art / Design Blog Layout

By Jennifer O'Toole

   on Feb 11, 2010
23 Reviews10 Votes3 Favorites933 Views

Concept Reviews

  • Nate Hamilton

    Nate Hamilton

    Rank: 1 Elite

    CF Verified professional

    9919

    • Design: 3
    • Purpose: 3
    • Originality: 3
    • Engagement: 3
    2 Votes
    Almost there...

    Posted on Feb 11, 2010 at 11:44 AM

    Move the main content area up to the top and move the logo higher up on the bar. Other than that, I think you have an interesting very creative concept here.

    • Jennifer O'Toole
      Jennifer O'Toole commented:
      Posted: on Feb 12, 2010 at 5:52 PM

      thanks for the feedback! when i first joined this site your great layout for hdesignonline.com was the first one that caught my eye, i am glad to get your critique. the logo i moved up, and i kept thinking to myself that the content needs to be further towards the top but the reason i didn't was mainly because it hides all the illustration design work i did at the top.

    • Nate Hamilton
      Nate Hamilton commented:
      Posted: on Feb 12, 2010 at 9:45 PM

      I totally get where you are coming from but the way that you currently have it looks pretty awkward. I think you need work the illustration around the layout rather than the other way around. Just my two cents here, feel free to move forward with what you think is best.

    • Nate Hamilton
      Nate Hamilton commented:
      Posted: on Feb 12, 2010 at 9:49 PM

      Oh and by the way, thanks for the kind words on my site. Always glad to help out a fellow designer, keep up the good work here!

  • Codedude

    Codedude

    Rank: 2 Titan

    1418

    • Design: 5
    • Purpose: 4
    • Originality: 3
    • Engagement: 4
    1 Vote
    padding in the latest post boxes

    Posted on Feb 11, 2010 at 11:44 AM

    Personally, I think you've done a great job with this. The grunge effect at the top perfectly complements the rest of the page.

    Great work with the positioning of the shadows.

    I might reduce the padding between the footer and the end of the page content.

    I might also redo your logo. Right now its really hard to read, (even though its looks cool.) :D

    One more thing, keep the padding in the latest post boxes the same. Right now the post body has like 10px of padding but the post meta has like 3px. Make the meta data have 10px also. Also align your post titles to the left-it looks more professional that way.

    Great Work!

    • Jennifer O'Toole
      Jennifer O'Toole commented:
      Posted: on Feb 12, 2010 at 5:55 PM

      oh yeah, thats a good idea with the padding thanks :) i changed that up. i thought that logo might be to light, so now that someone else thinks so too i adjusted the contrast on it, and made it darker. thanks for the feed back :)

  • Adam Tal

    Adam Tal

    Rank: 2 Titan

    461

    • Design: 5
    • Purpose: 5
    • Originality: 4
    • Engagement: 5
    1 Vote
    Padding on the left

    Posted on Feb 11, 2010 at 11:46 AM

    First of all, I love the design & your use of typography.

    The only thing I'd change is the different between titles & paragraphs regarding alignment/padding on the left. The same goes for the dates on the bottom.

    On 2nd thought, I'd also get rid of the Courier or whatever monospaced font that you used - it has a 90's feel to it:)

    • Jennifer O'Toole
      Jennifer O'Toole commented:
      Posted: on Feb 12, 2010 at 5:45 PM

      awww poor little courier. the font nobody loves. :'( im the only designer left on this planet that thinks this font is the coolest ever. i even toyed with the idea of making the entire body text courier. now i'll have to write an article in defense of this font. ha ha :P

    • Adam Tal
      Adam Tal commented:
      Posted: on Feb 13, 2010 at 12:15 AM

      I love courier when I code, but in a design doesn't it remind you of the x-files?:) http://u.nu/4us95 | http://u.nu/7us95

      I Actually just saw an iPhone app that has a cool use of Courier - http://happynothappy.com/ I think maybe the baby yellow makes it more 'happy' than 90's-dark.

  • Peter Georgiev

    Peter Georgiev

    Rank: 4 Master

    635

    • Design: 5
    • Purpose: 5
    • Originality: 4
    • Engagement: 4
    1 Vote
    ;]

    Posted on Feb 11, 2010 at 2:27 PM

    Finally some creativity!

  • Curtiss Prickett

    Curtiss Prickett

    Rank: 1 Elite

    579

    • Design: 4
    • Purpose: 4
    • Originality: 3
    • Engagement: 2
    1 Vote

    This is a very good start Jennifer. I like where it's going! It looked like it might not pass my "1024x768" test but it looks like you have most of the relevant stuff in the frame. I think you could move the left column up about an inch and also move up the right hand column and still retain the look you are going for. I've attached a graphic that shows the small screen test I did.

    One other thing is the large headline all in uppercase seems a little out of place. Everything else is so elegant and I think if you get a really long headline the H1 at this size is going to be an issue.

    I would also left justify the headlines in the 3 bottom columns and use the same color and link treatment as the main article for consistency.

    • cdblogconcept.png
    • Jon Spooner
      Jon Spooner commented:
      Posted: on Feb 12, 2010 at 12:25 PM

      her core audience is going to be on display monitors (graphic designers) So the laptop crit is not as relevant.

    • Curtiss Prickett
      Curtiss Prickett commented:
      Posted: on Feb 12, 2010 at 12:42 PM

      While I agree that most designers WORK on large screens many of my designer friends SURF the web on laptops like 13" MacBooks. I tend to do a lot of my blog reading on a laptop or my iPhone. And now we have a device like the iPad that is 1024x768. So, its something to consider in the context of this particular design.

    • Jennifer O'Toole
      Jennifer O'Toole commented:
      Posted: on Feb 12, 2010 at 6:04 PM

      thanks for the great feedback, it didn't occur to me that the h1 size might be out of place. im gonna rework that. lately i've gotten some kind of thing for gigantic fonts. for the 1024 issue, i made everything that is important fit in a 900 pixel width area. it looks pretty crowded compared to other screen resolutions i'll admit. i've been doing all my web work on a 1600 x 900 screen res and i'm starting to see why thats probably not a good idea. :P haha

  • Harish Chouhan

    Harish Chouhan

    Rank: 5 Advanced

    1091

    • Design: 5
    • Purpose: 5
    • Originality: 5
    • Engagement: 4
    1 Vote
    Very Creative Design

    Posted on Feb 11, 2010 at 11:14 PM

    It sends the message across that you are good at what you do.

  • Jon Spooner

    Jon Spooner

    Rank: 2 Titan

    681

    • Design: 5
    • Purpose: 3
    • Originality: 4
    • Engagement: 4
    1 Vote
    connect the top to the bottom three boxes somehow

    Posted on Feb 12, 2010 at 12:27 PM

    it looks beautful.

    Maybe include some of the top design style under the white side bar to connect the top and the bottom of the site more?

    really nice color choices. the orange is a good highlight color for this design.

    • Jennifer O'Toole
      Jennifer O'Toole commented:
      Posted: on Feb 12, 2010 at 6:07 PM

      oh hm yeah thats a pretty good idea about adding more design work under the sidebar. that area does seem to be missing something. :)

  • Allwin Jeba

    Allwin Jeba

    Rank: 6 Apprentice

    233

    • Design: 5
    • Purpose: 4
    • Originality: 5
    • Engagement: 4
    0 Votes
    Footer

    Posted on Feb 13, 2010 at 1:30 AM

    Interesting layout.. Not the one we see daily.. Love the brush work at the header and colours are easy on eyes.

    for the footer you can add a border like some brush or a wave border.. as it looks too plain right now..

    Otherwise I like it... nice work.

  • Kirill Kedrinski

    Kirill Kedrinski

    Rank: 6 Apprentice

    1018

    • Design: 4
    • Purpose: 4
    • Originality: 4
    • Engagement: 4
    0 Votes
    Very Nice Design

    Posted on Feb 17, 2010 at 1:27 AM

    concept is very good - accent on details good idea grungy background in harmony with other elements. I think only that footer should be like header i mean not so apart with fluent transition from grey to dark

  • Jackie Roth

    Jackie Roth

    Rank: 7 Student

    23

    • Design: 4
    • Purpose: 4
    • Originality: 3
    • Engagement: 3
    0 Votes
    The uneveness of the content buckets

    Posted on Feb 17, 2010 at 10:33 AM

    I love the grunge effect at the top. The little illustrations are really interesting and something about them feels elegant. That said, the layout is a bit awkward. I feel that the content area should be moved up a bit, as it starts too far down the page. If you are set on the background grunge effect being the star, I'd recommend incorporating it somehow in the main content bucket. That way, your content is up at the top where it should be, but your artistic ability will also show through. The other elements on the bottom are also feeling a bit awkward. They feel somewhat choppy. They are aligned at the top, but then the bottom of the buckets are not aligned. Though the content in each bucket may vary in length, I'd recommend making the buckets themselves uniform in height.

  • Jason Flaherty

    Jason Flaherty

    Rank: 5 Advanced

    121

    • Design: 3
    • Purpose: 3
    • Originality: 4
    • Engagement: 4
    0 Votes
    I would make the boxes stand out a little more.

    Posted on Feb 17, 2010 at 10:41 AM

    I think it has loads of potential. I agree, the main body content needs to be moved up the page. I like the grunge look to it.

    • letty verhoeve
      letty verhoeve commented:
      Posted: on Feb 17, 2010 at 11:22 AM

      This design is very very beautiful and also very very much too big. It realy doesn't fit on my screen at all. Also the title of the mainblogpost seems too big to me.

      ps 1: I am in love with the Garamond font ;)

  • David Evans

    David Evans

    Rank: 6 Apprentice

    13

    • Design: 4
    • Purpose: 5
    • Originality: 2
    • Engagement: 5
    0 Votes
    No need for the word blog...

    Posted on Feb 17, 2010 at 11:47 AM

    First off I love this type of design. We have a very interesting conversation going on about the 2.0 web design and its place. For personal sites you need to brand the site with your personality. If you are an illustrator then you have certainly told me about you. I am a photographer so my site is heavy on the photos I make. I do not think you need to say "blog." This fits into something I learned a long time ago. If you are a comedian make me laugh and I will think you are funny. Dont tell me you are funny show me. So if this is a blog just show me. I would move everything up a bit but if you have a reason for the length then that is ok. I am not a guy that believes in all the baloney about scrolling. This is the web people know you scroll. Imagine with me when the first person invented the book or magazine. We never say today how will anyone see my ad or story. People know what to do flip the pages. And so it is with the web if you have interesting content people will scroll. I would consider blowing out the imagery at the bottom. Take a look at vimeo.com and what they do with the footer area you might even consider making the image and footer blend together in one seamless area and not have that hard line. Use pngs. The world has moved on past jpgs and gifs. Transparency on the web is very cool in this environment. Have you considered the image at the top with the women as a place to put your top story of the week. The area to the right offers such a place. It could be a link or a snippet. The comments about the courier are interesting. As a system text it works to read your posts and fits this type of design. As a graphic font I do not think it works with your layout. You have a mix of fonts there in the logo area I would see if you could just select one and change the font style (bold, condensed, stroke, etc). I would urge you to explore a non traditional font family. myfonts.com or chank.com has lots of stuff that would work for not much money. You might also want to offer the viewer some idea of the area of design you want to focus on. Purpose and meaning are some of the words that come to mind. You could place links in the top illustrated background that might say "illustration" "grung brushes" "fantasy art" "women in graphic novels" I have no idea what you are up to but your images reflect my suggestions in that last sentence. I strongly believe a site needs images and text to smack the viewers brain into what is going on here, show me and tell me. Another big design conversation is extraneous imagery. Many of the usability pros point out that images offer nothing to the viewer unless they are product images. I understand their point but disagree when the site uses images to visualize the emotional connection to the viewer. My advice is to make sure your images have such a strong connection to the viewer that if you removed them the site would by nothing but text garbage. The images must have value in their presence on the page. Nice site good luck!

  • Janessa Mc Kell

    Janessa Mc Kell

    Rank: 5 Advanced

    95

    • Design: 5
    • Purpose: 4
    • Originality: 5
    • Engagement: 4
    0 Votes
    a bit more balance..but GOOOOOOOOOOD!!!

    Posted on Feb 17, 2010 at 12:04 PM

    THIS IS THE BOMB! I would only change one thing..I'd balance off the content areas a bit more...probably just the ones at the bottom...

  • Mark Egar

    Mark Egar

    Rank: 5 Advanced

    145

    • Design: 5
    • Purpose: 2
    • Originality: 4
    • Engagement: 3
    0 Votes

    As I mentioned the illustrative work is awesome.

    To me it looks like you focused mainly on the graphics and the actual purpose of the site was an afterthought. I think if you re focused on exactly how the blog will function and what/how you need to present information to your users to have a meaningful experience then the design will look more complete.

    Quick example would be the fact that your headline is so big and doesn't really leave much room to display actual article content that would grab the reader.

    Great work so far!

  • Mark Dewey

    Mark Dewey

    Rank: 3 Superior

    180

    • Design: 2
    • Purpose: 2
    • Originality: 2
    • Engagement: 2
    0 Votes
    I would change nothing

    Posted on Feb 17, 2010 at 1:03 PM

    I think the site looks good. You are creative and it is just a start of what more you can accomplish.

  • Ejaz Siddiqui

    Ejaz Siddiqui

    Rank: 2 Titan

    466

    • Design: 3
    • Purpose: 2
    • Originality: 4
    • Engagement: 3
    0 Votes
    White space and typography needs improvement

    Posted on Feb 17, 2010 at 1:11 PM

    It is a decent design, but in my opinion it needs improvement in following areas

    1- Padding surrounding post images (both main and other posts) 2- Article title is too long, which has eat up all the white space which H1 needs 3- Create sufficient amount of white space surrounding H1. 4- improve design of other posts boxes

  • Hani Khaursar

    Hani Khaursar

    Rank: 2 Titan

    31

    • Design: 4
    • Purpose: 3
    • Originality: 4
    • Engagement: 4
    0 Votes
    I really like it!

    Posted on Feb 17, 2010 at 2:17 PM

    I love the use of white space. And I do think you hit your target market - the designers and such!

    Great job!

  • przemek zych

    przemek zych

    Rank: 7 Student

    80

    • Design: 5
    • Purpose: 5
    • Originality: 4
    • Engagement: 5
    0 Votes
    Nothing, totaly

    Posted on Feb 17, 2010 at 2:55 PM

    Okay, i am noob, and they force me to review this kind of layouts. Seriously, please.

    It is stunning. For me ;-)

  • southern southern

    southern southern

    Rank: 10 Newbie

    3

    • Design: 5
    • Purpose: 4
    • Originality: 5
    • Engagement: 4
    0 Votes
    white space

    Posted on Feb 18, 2010 at 1:31 AM

    Perfect colors and design but too much valuable white space on the page. I would shrink it a bit.

  • Mike Goignan

    Mike Goignan

    Rank: 4 Master

    401

    • Design: 4
    • Purpose: 4
    • Originality: 5
    • Engagement: 4
    0 Votes
    Social functions

    Posted on Feb 18, 2010 at 4:56 AM

    Hi,

    I like the spirit of your work, a little bit grungy but readable and clear. I'll just put some social sharing acces (Twitter, Facebook foer example) and an RSS feed. This functions could be be on left side, and if you work on the graphic, it could be balance your blog deleting this empty space in the left.

    Last thing : I'll put some title for each section : Highlitght, posts etc.

    Bye

  • Dani Kelley

    Dani Kelley

    Rank: 4 Master

    40

    • Design: 5
    • Purpose: 3
    • Originality: 3
    • Engagement: 4
    0 Votes
    Article heading: see below.

    Posted on Feb 18, 2010 at 9:42 AM

    Beautiful design! The details are definitely what makes this an eye-catcher. I actually find myself a little annoyed that it's not live so I can explore a little more :)

    I think that the type choice for your article headings could be a little better. The variation of stroke width and all caps makes it difficult to read. Also, as much as I love the detail at the top before the entry, I also can't help but feel that it's wasted space. Something to try, perhaps: move the title for the featured article into that space and reverse the type. Just a suggestion.

    Also, the three boxes at the bottom...it bothers me a little bit that they're not all one height. Nitpicky, perhaps.

    Overall, this looks amazing, and I'm looking forward to seeing the concept come to life!

  • Brian Fugate

    Brian Fugate

    Rank: 10 Newbie

    9

    • Design: 4
    • Purpose: 3
    • Originality: 3
    • Engagement: 3
    0 Votes
    Remove the Courier...

    Posted on Feb 18, 2010 at 11:23 AM

    Overall it is very strong.

    I have a few critiques: 1. Remove the Courier. It feels dated and lacking purpose. Reducing the number of fonts will also reduce clutter. 2. Consider the H1 size. It mirroring the site logo reduces impact of both the logo and the header; especially with them both being in the same font. 3. Consider alignment of H1, its copy and its relativity to the content below it.

    I'd be interested to see how the other pages are going to work. For instance, is the "Of Interest To" functionality going to appear anywhere else that the footer? It almost seems tied to the search or navigation of the site. Like, what does "index" and "archive" mean to somebody perusing the site? just something to think about. Overall, like I said, strong design just focus on the end user and their experience.

  • Francesco Guietti

    Francesco Guietti

    Rank: 10 Newbie

    65

    • Design: 5
    • Purpose: 4
    • Originality: 5
    • Engagement: 4
    0 Votes
    beautiful work

    Posted on May 20, 2010 at 3:42 AM

    I really like the layout of the site. The only thing that convinces me is the visibility, but above all the possible difficulties reading written above "blog" ... if not mistaken should be the name of the blog itself? I would put more emphasis on decreasing the written blog. The work is beautiful. Congratulations!