Web Design Workshop #23: Luke Whitehouse
tuts workshop

Web Design Workshop #23: Luke Whitehouse

on Sep 28th 2012 with 21 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, the personal portfolio of a lad from Leeds..

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

This is a redesign of my portfolio that I aim to be used as a showcase of my work for potential clients and future job positions but mainly I hope to be able to it mainly as a blog. Feedback will be incredibly useful as I want to get the best User experience for the redesign as possible. The parts I need feedback on are as follows:

- Colours: Within the design I used the theme of orange as the main colour (I like orange, I’m ginger) and then I used the royal blue as a complimentary colour to offset the bright orange. Do you think this works?

- Type: While I’m happy with the “Adelle” and “Proxima Nova” font choices I would like your feedback on if the type works within the design.

- Generic: Anything else you can feedback on would be a bonus!

Thanks a lot for taking the time to critique my design in advance. – Luke Whitehouse

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
  • http://xandesigns.com Alex McCabe

    First of all, I actually like it. The colours work well with each other and I love the footer, but the blue could do with being more pastel than bright as all the other colours are slightly muted.

    I do however feel there is too much content instantly. Maybe replace the snippet from the articles with a tag-line and add an image?

    Other than that, looks good my friend =]

    • http://xandesigns.com Alex McCabe

      try #388ddf see how it feels to you

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

        Thanks for the suggestion Alex, I’ll give it a try!

  • http://www.freshclickmedia.com/blog Shane

    You’ll want to correct the spelling of “whose” on your introduction ;)

    It should be “who’s”. That jumped out at me immediately.

    I also think that the navigation and blue links (thoughts, review etc.) should be a little larger. They look a little small when compared to the text.

    Other than that, I like it.

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

      I knew there would be one spelling mistake, how embarrassing.

      Looking back now I agree with you, the buttons could do with being a little larger in parts.

  • Jesus Bejarano

    I like the little wacth icons in the date section of each post, the footer is long and that is good, i don’t like the introduction of yourself (too much text), and i feel that the buttons could be better with 2 or 3px of border-radius and a little more softness in the colors.

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

      Thanks a lot, the watch icon is actually a part of the http://geomicons.com/ pack if your interested. They are wonderful!

      Yeah, the intro part has been changed quite a lot, I’m still on the edge but I think I do need to change it up a little. Thanks for the feedback

  • http://www.dan-martin.com/ Dan

    I actually love it. Simple and clean. However maybe just a tad subtle background texture would make pop even more. Great job!

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

      Thanks for the compliments Dan.

      The background does actually have a slight background texture on it, however with it all having the same I fear you won’t notice it much. I’ll probably need to go back on this, thanks for your comment.

  • http://ividesign.net23.net/ ivascu

    The social icons could be more colorful to create a better contrast , on width lower than 480px you sould use a dropdown menu or put the curent one underneath the logo .

    Hope this helps :p

  • Martin Hallmann

    I like your font choices but would strongly recommend to limit the list of browsers and OSs on which to render the chosen body type web font. Many (many, many, ..) platform/browser constellations out there deliver abysmal quality with webfonts, and if your body text is important, make sure it reads well.

    I usually have a detection script running that attaches classes to the body tag, identifying platform and browser. I then selectively enable web fonts for the body text only in browsers I have tested, on the right platform.

    This is something that’s easy to forget, since your own setup will most probably be future proof to some reasonable extent, but never forget that most people have no fucking clue as to what that even means. What I am saying is, people with bad setups have money to spend, too. So don’t make their experience on your site a shitty one by oversight.

    • dj

      @martin. There’s absolutely no reason to use such foul language in a comment on this site. It is obvious it was intentional and did nothing to clarify or enhance your meaning – if that was what you were trying to do. I’m surprised that your expletives made it through the Envato screeners.

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

      Hi Martin thanks for the comments.

      I’ll actually be using typekits service for my entire site so the fonts won’t be a problem and should render optimally for nearly [if not] all browsers and systems.

      Not too sure about what you mean for the last section but don’t worry, all the fonts / colours / layout / content will render perfectly once I come around to doing it, that’s not a problem.

      I wouldn’t really recommend using a script to decide which browsers you give fonts to. Not only is this increasing bandwidth unnecessarily, but you are also trying to create styling from scripts which shouldn’t be done. @font-face will work perfectly for fonts unless you have not so good quality font files but with services such as typekit there’s no need for that anyhow.

      Thanks for the comments none the less :)

  • http://www.adipurdila.com AdiPurdila

    Hi Luke,

    I think this is a great start for the layout, but there are a few issues that, if addressed, I think will take it to the next level.

    1. The overall color scheme could be improved upon. Right now I think it’s a bit too gray and you don’t have enough contrast between the BG and the body text. The good thing about it is the subtle texture which makes it a bit more interesting, but still, the text is a bit hard to read. So, either lighten up the background a bit or wrap your content in a container with a lighter or texturized BG. Here’s a great resource if you need patterns: http://subtlepatterns.com/

    2. I don’t think the custom type works very well for the body text. To ensure the text is rendered correctly on a vast array of platforms I’d suggest sticking with something more accessible (Helvetica family for instance). The Adelle font is great for the headings and even if you use that with a simple font like Helvetica it will still make your design interesting.

    3. The links seem a bit lost in the big picture. It’s usually a good idea to style them differently from the rest of the text. Right now your sidebar links look like plain text and if you had a link in your first widget for instance people won’t be able to tell the difference from normal text. Try underline, different color, different background color, you have many choices there.

    4. Your category links from the blog posting seem to have a bit too much emphasis. They almost compete with the main headline of the blog post and they shouldn’t, they should stay somewhere in the back and let the title stand out, making it easy for the visitor to scan the page.

    5. The date/time link is the same size as the body text. I’d make a bit smaller (again, this is secondary information, not as important as the title or excerpt of your article).

    6. Not sure if this is the homepage or the blog page, but if it’s the homepage I suggest you show some portfolio items instead of blog posts. Let your work do all the talking and be the very first thing a visitor sees. If you wanna put more emphasis on the blog part it’s fine too, but you can also add some portfolio items in the sidebar.

    That’s about it. I hope you can use some of this and create something that represents you and you’re confortable with :) Best of luck!

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

      Thanks for the great response AdiPurdila.

      1. I definitely agree that the colour scheme needs a little work still, at the moment it is a little too grey and I aim to change that up a little, I think I’m going to go for a lighter shade with a little better pattern (I too use subtlepatterns but thanks for the suggestion).

      2. I’ll actually be using https://typekit.com/ for the type so the rendering won’t be a problem at all. I may have a snoop around for a different typeface for the body, we will see :).

      3. See my thoughts on this were the exact opposite. My thinking was that I didn’t want to take the emphasis off the blog and that’s the reason the links are so plain and grey. I would then just give them a simple underline or orange colour on hover, I haven’t decided which yet (Things like this I will go into once I get onto designing it in browser).

      4. Yeah, I agree. Looking at the links now they do take up too much of your attention. I think that I’m going to try the suggestions with the colour that Alex McCabe suggested at the top of the comments.

      5. A little unsure about this one at the moment, I chose to keep them at the same size to offset the category type but I’ll have a go.

      6. My blog page is my home page. I at first had a lot of content from my work including a slideshow and the rest. However, I feel that this is unnecessary content that I don’t need when I’m trying to promote my blog. I really want to start blogging regularly with great content, the portfolio will be there if and when I need but for now, I don’t need it.

      Thanks a lot for your feedback once again, its helped tremendously

  • http://www.synchronicitydesigns.com/ Randy Smith

    Overall it’s very nice. The responsive approach works well.

    One thing that seems to feel odd to me is, on a wide screen monitor, the right justified nav menu at the top seems to really pull my eye to the right, making me feel a bit uncomfortable from a usability standpoint.

    Other than that, nice work my friend!

  • http://codeconquest.com Charles from CodeConquest.com

    I don’t think the blue works – perhaps use a darker shade of orange instead? Also you should have some sort of call to action up the top of the page, like some links to your social profiles. Lastly, I notice you have separate links at the top to ‘home’ and ‘blog’, but isn’t the blog the home page already?

  • maybros

    one thing that confuses me the most – the buttons that are attracting more attention than text. Maybe we should brightness buttons swept away the wave? name and subject to more pronounced color …

  • http://www.brookswebdesign.net Maria

    I like the design and colors…simple and effective. Just a couple of suggestions;

    Add thumbnail images to all articles (a picture always grabs a visitors attention)
    Make the menu stand out a bit more (CSS styling to make it “pop” a bit)
    Add your social media links to the sidebar at the top.
    Add Recent Post/Articles widget to the sidebar.

  • http://icreatesolutions.com.au/ Grey Nelson

    The design is simple yet beautiful. Although the blue color doesn’t seem to fit within the design. Alex McCabe is right in trying out #388ddf.

  • tashi

    beautiful but blue color tries to spoil its look. i would prefer changing blue to some other colors.