Web Design Workshop #6: Liam J Moore
tuts workshop

Web Design Workshop #6: Liam J Moore

on Mar 24th 2012 with 17 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, an Irishman’s portfolio..

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 #6
Editor’s note: this screenshot has been trimmed, see it live

The struggle of every designer’s role, the portfolio site! I’m seeking employment and pushing my work out there for potential bosses. I wanted to keep things straight-up and reflect my love for colour and variety, whilst also telling a little about myself. I particularly like the colour scheme, turquoise and grey. Would love it if some of you could suggest any tweaks, pitfalls or areas I could improve, maybe the portfolio section itself? – Liam Moore

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://www.adipurdila.com AdiPurdila

    Hi Liam,

    Here are my initial thoughts after seeing this.

    1. I would work on the color scheme you chose, especially the grey (maybe a little lighter grey would work better).

    2. You can play around with the text leading a bit more (line-height). Right now you’re using 27px for both font size and line-height (i’m referring to the intro text under your name). Ideally, you wanna go for a ratio of about 1:1.5 for the leading. That’s gonna make the text a lot more readable.

    3. I’d make the portfolio images full-width, with the description below them (this is your work after all so you gotta show it).

    4. If you have website designs that are live you can provide a link to it.

    5. I think you take up a lot of space on the top with stuff about you. This is your portfolio so show your work first and then stuff about you, that’s less important. Right now the first thing a potential employer sees is some pictures of you instead of pictures of your work.

    6. I’d also create a contact form in the bottom somewhere and I would link the green button on the top to that contact form.

    7. The copyright text looks like it’s been forgotten there, all alone :D Since you used custom fonts, why not make that custom as well? Also, how about some social icons so that people can follow you?

    That’s my opinion, hope it helps :)

    • http://www.liamjmoore.com Liam J Moore

      Hi Adi,

      Thanks very much for your feedback. I have to say, it always helps when you get some outside/unbiased input.

      I agree with the line-height issue and will look into that. Ditto with the portfolio images too. I see your point about it being a place for employers to see my work, and not so much of me.

      Contact form is also a fair point. I have included them in previous iterations of my portfolio site and I think this time I overlooked it.

      Thanks again.
      Liam

  • Jasher Scott

    My main criticism is the font — Museo has been so overused in web templates and on sites these days. I would try to look for maybe a more unique front for your name and headers, but stick to a less nondescript font for your body text. It would add an entirely different personality to your site.

    I’m also not a fan of the “Quick Stats” feature there. Are the hearts and stars your grading? How would that be important to someone looking to hire you? (Probably not much.) The work that you’ve done in your portfolio will tell a much bigger story about your skill level than an arbitrary ranking.

    Also, to agree with Adi, I would make your portfolio images larger and give them more prominence.

    • http://www.liamjmoore.com Liam J Moore

      Hi Jasher,

      Cheers for the input too. I know what you mean about Museo being overused. I think in terms of it used in my portfolio, I’ve used it for body copy as well as header copy. Breaking some 101 rules there! I will look into this.

      I see your point too about the quick stats feature. It’s intention is a quick way of telling an employer this is what I rate myself “good at.” In some ways it could be seen as boosting my portfolio work. To put things in context for an employer.

      That seems to be two votes for making the portfolio images bigger too. So I’ll take this into consideration also.

      Thanks,
      Liam

  • Pingback: My Stream | Web Design Workshop #6: Liam J Moore | My Stream

  • Chris Brown

    Hi Liam,

    Firstly, congratulations on having the stones to put up such a personal piece for critical feedback: Not an easy thing to do, I’m sure.

    Okay, let’s spend up big on my shiny two cents.

    What I Like….

    1. I do like the color scheme, generally speaking. The teal / aquamarine especially is a distinctive choice and the subtle textures both in the gray and turquoise add some depth to the page. I do agree with Adi in respects of the gray is not the *perfect* gray. Have a play around easing up the brightness and see what you come up with.

    2. Your coding is very clean, well documented and takes advantage of all the HTML5 stuff you should be taking advantage of. Well done. There’s a couple of ugly blocks of javascript at the top that you could reference as an external .js file (not a major complaint, however).

    3. I like the welcome message rotator. Relevant? No. Uber Original? No. But it does add a bit of personality to the page.

    What I Certainly Think Needs Work…

    1. My biggest criticism is that it is like you’ve taken three separate pages and squashed them into a single page. Is this a home page, an “about” page or a portfolio page? Take a think about the purpose of the site. Personally, if I was a potential employer, I’d be more interested in what you have to offer me in terms of your skills and experience than your passion for travel (which is, however, perfect “about me” content fodder).

    What’s the best possible thing a viewer of this page could do? Email you with a job offer? Why is that the *last* possible thing that they can do on the page?

    2. Following on from the last point, I know that this is a one page site, but in terms of rhythm, this page cries out for some sort of page header and navigation menu. In fact, when I opened the link, I had to check my scroll bar to make sure I hadn’t inadvertently jumped down the page and missed the top 150px of the site. If this was my project, I’d turn your name into a logo, include it in a newly created header section (along with a navigation menu), and change the tag into some sort of slogan or call to action.

    3. The portfolio section needs some level of interactivity. Whether this is just a link on the slide image itself or a “launch project” button under the text element, there needs to be another ‘level’ to your work that takes the user to the live site, some screenshots or a separate project information page. Even a jquery lightbox effect with a screen shot would work.

    4. There needs to be some sort of anchor link between the “available for hire” ribbon at the top of the page and the “drop me an email” in the footer.

    What Might Need Work…

    1. This site may benefit from an additional font. Museo is cool for the heading tags (if that’s your personal taste), but using the same font for all of the content leaves the site feeling slightly one note.

    2. This is me personally talking, but I am not a fan of the “these-are-my-competencies-out-of-five” sections of personal sites. I know they’re popular, I know that people will disagree with me, but your specific star ratings tell me that you think of your personal competency rating as 15/20. That’s 75%, man. If there’s ever a place to say to a potential employer that you’re the love child of Steve Jobs and a unicorn, your portfolio site is the place to do it.

    Save the “what are your weaknesses” questions for the interview.

    3. I agree with Adi re: the footer… it kinda feels like you’ve run out of creative juice at the end of a long coding session, slapped on a copyright notice and grabbed a Guinness. If you’re going for a minimalist route for your footer, maybe some additional breathing room at the bottom of the page would help.

    4. In the “My background” section, just think about the ole’ ‘inverse triagle’ approach to copy. The way that you’ve organised your content makes me feel that you think that scholastic achievements are more important than you two years in a high level design agency. Maybe that’s true, but I would think that a high falutin’ London agency would value your experience more highly than your degree. (in other words, put your most important stuff at the top of the content).

    5. While the background color is cool, some of the color combinations between the featured work and the turquoise are pretty funky (e.g. orange purple and turquoise? bleuuurch). Try adding a border around each image for a little delimitation between the page color and the work itself.

    6. Yep, I agree with Adi re: point #2. A 1.5 line height will do wonders.

    7. Think about using a popup modal with a contact form instead of a mailto link.

    Leaving you with a parting thought (shot?): To me, this particular site should not be a one page site. It’s at least a four page site (home, about me, portfolio, contact me). If you’re really adamant about this being a one-page site, you need to rethink your layout and navigation and take the visitor to the site through some sort of journey.

    Liam, again, well done. You’re obviously a talented designer and with a few tweaks, this site has a lot of potential.

    All the best for your new life in London and good luck in your career.

    • http://www.liamjmoore.com Liam J Moore

      Hi Chris,

      Thank you for the very informative feedback, encouragement and opinions.

      From a few other comments I’m gathering the site would be better split into separate pages, or providing the user with navigation to different parts on one large page, rather than as you say, a squashed page. I really get your point about taking the user on a journey and whilst I was aware of that, perhaps my execution needs to be tightened up or rethought. I like the idea now of creating separate pages. Using this to further explain my work…

      Agree with you on the overuse of Museo. And did not think about the “inverse triangle” in copy. I really see what you mean about it, what it means when I’m putting education above/over experience. I’ll think about this and what I can do.

      Contact form, as I said in a previous reply, I think this was something I simply overlooked.

      Thank you again for the encouragement. It’s refreshing for every comment so far to be highly informative and in an industry that’s quick to get too big for it’s shoes, I’m very grateful for the frank and honest input.

      Liam

  • Pingback: Web Design Workshop #6: Liam J Moore | Shadowtek | Hosting and Design Solutions

  • http://www.reetgood.co.uk James Howard

    Echoing a few points from above, I did think there was a header/nav missing. I would agree that a logo of some sort and a navigation would help. The nav could just be anchors to the rest of the content if you don’t want to split this out into several pages.

    Line height of 150% would hugely help. I found the text a bit hard to read because it was a touch run-together.

    While I really like the design of the green ‘for hire’ text, it might be better not over the photo. I know the web isn’t the real world, but when do people ever stitch cloth to photographs? A very minor point, of course!

    If you were feeling very adventurous you could always add a bit of a scrolling effect. Always works well with a single page site. Check out http://activatedrinks.com/ – although I’m not suggesting you go quite that far.

    Overall, a nice looking page that with a few tweaks will hopefully impress potential employers.

    • http://www.liamjmoore.com Liam J Moore

      Hi James,

      Thanks for the input too. I see your point about a missing header/nav area. It seems this is something I haven’t considered. Whilst replying to these comments I’m thinking of splitting the site up now. Just to make things more informative and giving it and the respective content room to breathe.

      I laughed at your “real world/stitched photograph” suggestion! It’s true, when would someone do this! I know it’s very minor too, hardly crucifiable, but it does go to show the extreme subtleties of the context in which designers design. Something I might be more mindful of.

      Love, love, love that Activate drinks site you sent. Very creative, and perhaps a source of inspiration that yes, wouldn’t go too far into for my portfolio, but visual food for thought.

      Thanks agian,
      Liam

      • http://www.reetgood.co.uk James Howard

        Ever since I saw that Activate site, I’ve wanted to do something similar. Just looking for a good excuse now!

        I certainly wouldn’t class myself as a designer (I’d say more UI developer) but one thing I have picked up over time from excellent designers is that even subtle realistic hints add so much to a design. To start with, this was as simple as making all shadows appear to be from the same light source (sounds obvious now!). Now I’m worrying about whether things would make sense away from a website, which is why I mentioned the stitching. :)

        Good luck with the design tweaks and the quest for a job.

  • http://kimbryant.net Kim Bryant

    Hi Liam,

    Overall, great job! I agree with the above comments about the paragraph text–Museo has a great fun & friendly character to it, but I feel the paragraph text would be a bit more readable using a system font.

    I like the “Available for Hire” banner on your personal photo, and I think it would be a nice touch if you converted your mailto: links to buttons matching that graphical style.

    Lastly, two concerns about the “Available for Hire” banner: 1) The color matches your aqua/teal content background below, but to me it seems too similar to not be the exact same color. I’d either go for a complementary orange-y color or just match the teal. 2) It bothers me a little that the banner doesn’t extend the left-edge of the photo. The drop-shadow indicates that it’s floating above the photo, but the edge alignment suggests it belongs to the same space, so I feel too much visual tension there.

    Again–it looks good already! Any time people are able to provide specific feedback instead of something vague like, “…make it look better?”, you’re already in good shape.

    Cheers,

    Kim

    • http://www.liamjmoore.com Liam J Moore

      Hi Kim,

      Thank you for the feedback. I see your point along with the other suggestions that Museo as body/paragraph text is overused. System fonts, or something contrasting might be a better choice.

      I’ll look into what you’re saying about the visual tension in the photo/banner area too. Perhaps this is something I have overlooked as well as a contact form and one long page vs separate pages.

      Definitely agree with you on the “specific feedback” vs “make it look better” approach. I’ve been on many receiving ends of, “We don’t like this? Make it better,” comments.

      Thank you,
      Liam

  • http://flavors.me/surendra_vikram_singh Surendra Vikram Singh

    Hi Liam,

    I like the website color scheme. Some tweaks u play with are.

    1) Increase the line-height of the paragraph text.
    2) Play with font-size of welcome text, paragraph & project description text, make it 3-4px less.
    3) Font Museo is used a lot, use it only for headings & your name.
    4) Align project heading with top of the slider.
    5) Make slider arrow bit more visible.
    6) Change the link color from blue to some other color related to your website.

    I played with your website on firebug & made some changes. Here is a screenshot ( http://dl.dropbox.com/u/19982181/Screenshot.png ).

    Overall your website is clean, minimal & rocking. Again I love the color scheme.

    Cheers,
    Surendra

    • http://www.liamjmoore.com Liam J Moore

      Hi Surendra,

      Thanks for the tips and for kindly going to tweaking things for me too. Really appreciate it. I’ll have to feed in some of your suggestions.

      Liam

  • http://www.lifesub.de Stefan Rynkowski

    Hi Liam,
    your design is well done!

    But what about lines and curves? In my opinion you can create more depth with easy green,blue or gray lines :)

    All the best for your website

  • http://www.liamjmoore.com Liam J Moore

    Tanks Stefan for your compliments. Not following you exactly about what I need in terms of “lines and curves.” Could you explain what that means?

    Cheers

    • http://www.lifesub.de Stefan Rynkowski

      For example: You can give the headings an underline with two 1px lines (lighter, darker). Or you can just frame your explanation text with soft lines / curves.

  • http://www.pixprodesigns.com Kumar Gaurav

    Comments were more interesting and informative than the article… :)