Bryant MaroneyPremium Concept

Grid Style Theme

By Bryant Maroney

   on Oct 27, 2010
15 Reviews3 Votes1 Favorite611 Views

Concept Reviews

  • Jamie Linder

    Jamie Linder

    Rank: 1 Elite

    3763

    • Design: 4
    • Purpose: 4
    • Originality: 4
    • Engagement: 4
    1 Vote
    This review has been awarded.
    Readability on buttons, text

    Posted on Oct 27, 2010 at 2:52 PM

    Hello Bryant :)

    Really nice, dynamic portfolio you're building here. Overall, its very engaging and well laid out. I have a few nit-picky comments, but I think you've nailed alot of the high level issues.

    So, some very granular notes have been added, primarily to do with increasing readability.

    Its really looking great! Jamie

    Notes Added to Images   View

    • mockup1.png
      • 1\

        I'm guessing thats just a typo, but I thought I'd point it out :)

      • 2I love this texture

        and I would love to see it echoed in a few other places, to help make the design more holistic and cohesive.

      • 3contrast

        These colors really need to be more readable. The inner shadow, with the letter spacing so narrow, and the contrast so low between the white and blue, really makes is look blurry and hard to read.

      • 4drop shadows

        looks like there is a drop shadow, but instead of looking dimensional, again, its losing the sharpness the header has.

      • 5bitly

        I checked your bitly link, and things are just as blurry there... if its just a plugin, and that means it will work / look better at some point, great! But I am just calling it as I see it here..... and it looks blurry & hard to read... and thats a design issue (so worth pointing out)

    Notes Added to Images   View

    • mockup2.png
      • 1Nice touch

        I like the little break up of the line here, nice touch!

      • 2Rollovers

        rollovers on the bitly link are very subtle. They may do with some more contrast for visibilty

      • 3Silly question

        The corners curl up on the thumbnails but not on the large ones, it doesn't... okay. But the very even drop shadow around these frames is looking fuzzy, not dimensional. If its more contrast around the white matted edge, try a flat color, multiply it to bring some of the texture through. Like a double matte. Might keep it cleaner and add more depth.

    Notes Added to Images   View

    • mockup3.png
      • 1reconsider the black

        you might want to reconsider this color... its perhaps too dark at this size

      • 2black works well here

        except for again, the glowing embossed style setting. Its a cool effect, but here's where you could use some less contrast, given the size of the date.

      • 3Is this a link or title?

        Might want to push the obviousness of this one way or another. I can't tell at a glance if I click it or if its supposed to be a title for my reply.

    • Bryant Maroney
      Bryant Maroney commented:
      Posted: on Oct 27, 2010 at 2:57 PM

      I designed this in wordpress. it was a plugin that someone has created to allow users to edit info from the admin panel. There seem's to be an issue within the plugin when you add the: ' mark

    • Bryant Maroney
      Bryant Maroney commented:
      Posted: on Oct 27, 2010 at 2:57 PM

      i.e.: I'm

    • Jamie Linder
      Jamie Linder commented:
      Posted: on Oct 27, 2010 at 2:59 PM

      Not sure I follow your comment Bryant... whats a plugin?

    • Jamie Linder
      Jamie Linder commented:
      Posted: on Oct 27, 2010 at 2:59 PM

      PS. I am still in the process of adding my critique notes to the mockup... gimme a few moments here :)

    • Jamie Linder
      Jamie Linder commented:
      Posted: on Oct 27, 2010 at 3:07 PM

      Oh, the apostrophe! I follow you now! Try adding the apostrophe's html character code in html, or strip all the styles out of your copy by pasting it into notepad and defaulting styles. Either of those options should remove the / occurring by the special character.

    • Jamie Linder
      Jamie Linder commented:
      Posted: on Oct 27, 2010 at 3:14 PM

      Thats all Bryant! Notes are added, really a great job, hope my comments help you to polish it up and get it out there!

    • Bryant Maroney
      Bryant Maroney commented:
      Posted: on Oct 27, 2010 at 3:19 PM

      awesome notes! Credit given.

    • Jamie Linder
      Jamie Linder commented:
      Posted: on Oct 27, 2010 at 5:19 PM

      Much obliged sir!! I'll be posting my portfolio site soon, keep and eye out for it and would love to have your feedback :)

  • Lisa Tweedie

    Lisa Tweedie

    Rank: 1 Elite

    CF Verified professional

    4530

    • Design: 4
    • Purpose: 4
    • Originality: 3
    • Engagement: 3
    1 Vote
    This review has been awarded.
    Sort out unreadable text and navigation

    Posted on Oct 30, 2010 at 5:19 PM

    I like this theme - it is clean and the colours are comfortable on the eye. A few enhancements might make it more useable.

    The text of the latest updates is fairly unreadable. I would lose the italics under the portfolio pictures too.

    It is unclear what the icons above each portfolio image are for.

    Not sure if it is possible but it would be great if after the user had liked a post (which I realise now is what the heart is) that there was some visual feedback rather than the text which is ugly e.g. colour in the heart red.

    Once you get onto the subpages there is no obvious navigation back to the home page. I realised after a while I could click on PostupTheme in the header and footer but it took me a while. I'm afraid users often need a bit more direction than this. Bread crumbs would be sufficient or a home icon in either the header or footer.

    Search should go higher up.

    I like the social media icons - although wasn't sure what they all were.

    I like greyed out subtle design of the post tags on the portfolio pages.

    I realise that a lot of this might be configurable by the user in the theme. However it is worth making your example as usable as possible I think!

    Might be worth working on the contact page.

    Hope this helps Lisa

  • Joel Glovier

    Joel Glovier

    Rank: 1 Elite

    CF Verified professional

    3701

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

    Posted on Nov 04, 2010 at 6:52 PM

    Hey Bryant,

    Your theme is coming along very nicely. Overall it's a very lovely design, and looks really great. You do have some areas that I think need work. But it's a very nice concept.

    Here's my thoughts...(in no particular order)

    • The page loads a bit slow. If you're using a bunch of PNG images, consider where you could instead get away with a JPG, or even better for performance - just use a CSS style and progressive enhancement (ie - use advanced CSS3 styles and don't worry about browsers that don't support it as long as it degrades gracefully)
    • Your drop shadows under the images look way too black. They look like they're set at 100% fill and opacity. Consider droping the opactiy down to 40%. It will look much more subtle, but that will be good - trust me. :-)
    • Your social network icons should have some type of hover state, even if you set the opacity to like 70% for normal, and on hover change it to 100%.
      • I see you've used a mix bag of rounded corners and normal edge corners. I think you should go all out with rounded corners. Specifically the Latest Updates sidebar and the search field.
      • You could accomplish a lot more with CSS that you are doing with images. (i know I said this in my first point, but it's worth noting again) For example, your twitterbacking.png image could be replecated almost identically with CSS3 in moder browsers (border, border-radius, background-gradient, etc.).
      • Also, you're using some extraneous markup to accomplish your twitter list. It appears you have divs just for the background image, where instead you could just apply the background image to the list items for the ul#tweet_list.
      • Your intro tagline is moving down to three lines on my OS X browsers (both in Chrome and FF). Here's a screenshot: http://cl.ly/37i9 Especially since it's a theme, you should account in the design for variable lengths of that portion.

    Keep up the good work.

    • Joel Glovier
      Joel Glovier commented:
      Posted: on Nov 04, 2010 at 7:08 PM

      Sorry for the post formatting. I always seem to have trouble with that. Those are all supposed to be separate points.

  • Dipesh Batheja

    Dipesh Batheja

    Rank: 2 Titan

    254

    • Design: 4
    • Purpose: 5
    • Originality: 3
    • Engagement: 4
    0 Votes
    Great design with some minor issues

    Posted on Nov 08, 2010 at 7:57 AM

    I think overall site looks awesome. Easy to browse and everything well organized. Here are few things which i thought could be improved:

    a. Logo i think can be improved, its pretty basic. Doesn't hold the attention at all.

    b. Sidebar headings use text shadows, which is although great idea, but i think they are too dark. So try reducing the shadow colors a bit.

    c. Twitter feed uses a very dark blue background, which takes attention away from the main, content. I think if you can use some light colors there or not use background at all, that will make it look better.

    d. Search box, i think also need a bit of touch up.

    But otherwise great design!

  • Radek Stepan

    Radek Stepan

    Rank: 7 Student

    108

    • Design: 4
    • Purpose: 4
    • Originality: 3
    • Engagement: 3
    0 Votes
    Call to action

    Posted on Nov 11, 2010 at 3:55 PM

    I just have bits & pieces: the Contact Us  & Login are not aligned vertically to centre. I have noticed you are applying padding and on my Linux machine it does not look sharp. I like the fact that you have done the portfolio theme "right", too often we see here elements "just placed there" but yours uses subtle gradients to make it top notch. When I hover over the portfolio images, the color does not do it for me, perhaps darken the background and do the font color in a very very light shade of blue? The latest updates to the right are too close to the top border and I believe the text should be centered. How about doing the tabs of "all posts", "featured" etc through JavaScript to show off your skills and make it a tad bit more responsive? The hire me button does not stand out that match and the overlayed information neither. You are using an icon for logging into WP but "About" and "Contact" are less important? Why have Contact and Contact us? Why is global search below tweets?

  • Brian Wangila

    Brian Wangila

    Rank: 4 Master

    383

    • Design: 4
    • Purpose: 4
    • Originality: 3
    • Engagement: 3
    0 Votes
    Contrast

    Posted on Nov 30, 2010 at 6:49 AM

    Nice theme you got. I suggest you improve the contrast on latest update. The text is not so readable, brighten the colour a bit.

  • Tiago Duarte

    Tiago Duarte

    Rank: 4 Master

    158

    • Design: 5
    • Purpose: 5
    • Originality: 4
    • Engagement: 4
    0 Votes
    The "Search..."

    Posted on Oct 27, 2010 at 1:21 PM

    This design has appealing colors, a minimalistic look and the use of typography is great!

    The social networks items on top are a must have nowadays and they look good as well.

    The only aspect i would change would be the font used in Global Search, where it says "Search..."

    Notes Added to Images   View

    • mockup1.png
      • 1Menu

        Really beautiful menu

    Notes Added to Images   View

    • mockup2.png
      • 1Twitter Icon

        Maybe if it had a small twitter icon on the left side it would draw more users attention

  • Joao Campos

    Joao Campos

    Rank: 3 Superior

    201

    • Design: 5
    • Purpose: 5
    • Originality: 4
    • Engagement: 4
    0 Votes
    Great work!

    Posted on Oct 27, 2010 at 1:46 PM

    This is a great design indeed.

    I loved the contrast between the dark blue and the greyish texture background. The types being used are great as well.

    I would change only one thing: place the search bar on a more visible area, perhaps under the Social Network Icons.

    :)

  • Steve

    Steve

    Rank: 7 Student

    78

    • Design: 4
    • Purpose: 4
    • Originality: 3
    • Engagement: 4
    0 Votes
    Font

    Posted on Oct 31, 2010 at 2:40 PM

    I really quite like the cleanness of this design, and the textures/colors etc. I did have a bit of a problem with the font though, perhaps you should change it

  • Alex Y

    Alex Y

    Rank: 4 Master

    805

    • Design: 5
    • Purpose: 3
    • Originality: 3
    • Engagement: 5
    0 Votes
    Sometimes a little unreadable

    Posted on Nov 02, 2010 at 3:16 PM

    Very nice work! But, the comments/responses section's text is difficult to read. Black & blue aren't good...

  • Peter Maginn

    Peter Maginn

    Rank: 4 Master

    1662

    • Design: 4
    • Purpose: 4
    • Originality: 5
    • Engagement: 4
    0 Votes
    ;) nice design

    Posted on Nov 03, 2010 at 4:45 AM

    Its a nice design, I would agree with some other reviews on your concept/design though that you should move the search box to under the social networks icons and on the social network icons you should defo use tooltips to tell people what the social network name is.

  • Rog Pensax

    Rog Pensax

    Rank: 10 Newbie

    12

    • Design: 4
    • Purpose: 2
    • Originality: 4
    • Engagement: 3
    0 Votes
    I'd change the text

    Posted on Oct 27, 2010 at 11:30 PM

    I like the concept and style of the site, however just one thing, the text in the panels needs a differnt font and a different contrast. Imagine someone with poor eyesight or partially sighted trying to read it. The style is innovtive and has great potential otherwise!

  • Arvind Subramaniam

    Arvind Subramaniam

    Rank: 4 Master

    16

    • Design: 5
    • Purpose: 3
    • Originality: 2
    • Engagement: 4
    0 Votes
    Try out a different layout

    Posted on Oct 28, 2010 at 12:34 AM

    Overall very neat and crisp site. But the layout is very common among portfolio sites. Hence there is little novelty here. But it serves your purpose to showcase your work and engage your audience.

  • Ryan Chipley

    Ryan Chipley

    Rank: 10 Newbie

    3

    • Design: 3
    • Purpose: 2
    • Originality: 2
    • Engagement: 3
    0 Votes
    Navigation, purpose, legibility

    Posted on Oct 28, 2010 at 7:17 PM

    Overall

    The overall design, layout, and colors are mostly nice. The proportions seem right, and the colors are both pleasing and neutral enough to highlight the visual content of the site.

    Navigation

    The navigation is somewhat problematic. The main navigational controls (the buttons) lack sufficient content between background and text. Also, for what I would call the "detail" pages - those that result when you click on one of the pictures, it is not clear how to get back to the home page. I know that I can hit the browser-back button, but another clearer way back would be helpful.

    Purpose

    It is not clear what the purpose of the site is. I can view your work, which is nice, by the way, but I'm not sure what else I can do other than tag and favorite things. What if I wanted to use some of your work commercially? What if I wanted to contact you in order to commission some work? I see the contact button, but I the overall purpose of the sight is not clear to me. I suspect that some of this will be cleared up when some real text is added. However, you may want to consider a more engaging first page which has minimal visual content with some explanatory text to draw the user in to view the rest of your content. Perhaps, just highlighting your latest creation(s) and discussing who you are, what you do, and how you came up with your ideas(s) would be a good start.

    Legibility and layout

    I pointed this out a few times in the numbered call-outs. The navigational controls and other comments are tough to read because of the poor contrast and small fonts. You may consider using some different colors - possibly complementary to increase legibility and to ease navigation. This should be in the navigation section above, but try out different colors to highlight the different sections of the first page. They should probably stay fairly neutral to ensure that your visual content is highlighted as it should be, but play around with some colors here: kuler. Also, try using different colors to more clearly delineate the parts of the page: the banner, the content area, controls, side panel comments, etc. Do the same for the "details" pages. Kuler will let you select base colors and create attractive palettes.

    Notes Added to Images   View

    • mockup1.png
      • 1Contrast

        The contrast in many areas of the site is lacking. While the colors are mostly attractive. You should go to a site like http://www.snook.ca/technical/colour_contrast/colour.html to make sure that contrast is sufficient.

      • 2Where am I?

        I can tell, but just barely. The ever so slight difference in color on the selected navigation button and the very small pointer give me a hint, but it's not as clear as it should be. The bottom line is that the "system status" is not clear. Check you design against some basic heuristics here http://www.useit.com/papers/heuristic/heuristic_list.html.

      • 3Contrast and font size

        Contrast is not sufficient and font size is too small.

      • 4Tooltips needed on hover

        The user should know what clicking on these icons will do.

      • 5Tooltips

        Again, it's not clear what clicking on these will do. In some cases even after they are clicked on.

      • 6Search

        Search is generally located in the upper-right hand corner of a page to increases visibility. It is not where I would expect it to be "below the fold" - not immediately visible. This breaks the consistency and standards heuristic here http://www.useit.com/papers/heuristic/heuristic_list.html.

      • 7Layout of the individual pictures and related text/ controls

        I'm not sure how important the "n-ago" dates are to you, but I would either eliminate them and move the favorite, tag, and target icons to the bottom right, or move the picture title to the upper left (above the picture) and move the icons to the upper right (above the picture). This allows easier scanning and use of the critical information and features (picture title and actions that may be performed on the picture).

      • 8Ordering of tabs

        I would suggest reordering the navigational tabs such that your most important items appear first (whatever that means for you and your users). I would use the following ordering: featured, newest, popular, and all. I'm not sure what the difference between featured and popular is. Also, I don't think using "oldest" is helpful.

    Notes Added to Images   View

    • mockup2.png
      • 1Different controls and strange wording

        It seems like I would also be able to favorite, tag, and target a picture in this detail view. I can only favorite. "You Like This?" is also strange phrasing and capitalization. Perhaps you could use "Do you like this?" or just do without the text and add a tooltip.

      • 2Alignment and style

        This is picky, but there probably is no need for the stylized containers around these labels and text. The labels are correctly left-aligned, but the associated text should also be left aligned to increase legibility. It's also visually "cleaner". So, "Tools", "4 comments", and "20 people" would be left-aligned.

      • 3Tweet

        Is there a difference between this twitter capability and the circular twitter icon at the beginning of the social network icons in the upper-right hand corner? If not, you can probably ditch this one.

    Notes Added to Images   View

    • mockup3.png
      • 1Contrast

        The colors are nice, but the contrast and font make these tough to read.

      • 2Search

        Again, search seems like it is in a strange place. Also, and I know that this is not fully functional yet, but searching doesn't result in many items (if any).

  • Oliver Ehlers

    Oliver Ehlers

    Rank: 6 Apprentice

    85

    • Design: 5
    • Purpose: 5
    • Originality: 5
    • Engagement: 5
    0 Votes
    Nice work

    Posted on Oct 29, 2010 at 10:02 AM

    Nice work