Web Design Workshop #24: Julien Lambé
tuts workshop

Web Design Workshop #24: Julien Lambé

on Oct 13th 2012 with 28 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, a personal portfolio from Belgium..

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

I’m a freelancer. What you see is the home page of my portfolio. I wanted a “minimal” design. The idea was to highlight my projects, place them in front so the user can focus on the main infos.

I got some issues for clearly explaining my services and how I proceed when I work for clients. Not sure if the users understands it. I’ve got an idea of adding a main page for “services” but it’s not on the pipeline right now.

Also, I tried to always put a “call to action” button in areas where the user may be in so they don’t hesitate to contact me or explore my portfolio.

Please review every page of the website and give me some advice so I can further tweak them. Thanks ! – Julien Lambé

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

  • Pingback: Web Design Workshop #24: Julien Lambé | Webdesigntuts+ | Beachdrop

  • Pingback: Web Design Workshop #24: Julien Lambé | Webdesigntuts+ | inLine Media RSS Blog

  • http://xandesigns.com Alex McCabe

    I really like it. Simple and clean. The only thing I would say is add some padding to the botton of the a-tags on the main nav so that you don’t have to hover over the word itself.

  • http://tommywebdesigner.com Tommaso

    I would change the white color in the font button on hover.

    i dont like a lot the diagram position, it does not give balance to the page.

    A part from these my impression, it’s really nice

  • http://inovanto.com INOVANTO

    I liked your design very much. In my opinion I would get rid of the gray margin around the thumbs in “Recent projects” section. Or presente that area in a different format. How about having a slider ther with an overlay of a computer screen that shows your works?.

  • http://www.rafalborowski.com Rafal Borowski

    Very nice! Specially the hero unit background. Also the green/grey combination is very eye pleasing. One thing from me is to try with simplify circles in the banner. I get it why they are like that, but they seem wired. Plus try to center them with the “WEB DESIGN & WEB DEVELOPMENT + UI DESIGN” sign.

    As for the diagram it seems lonely down there. How about trying to put some short description of every stage on left and right so the space fills up a little? And the right side of footer is missing something. How about a small gallery showcase, twitter feed or quote form?

    • Sawyer Knoblich

      When you hover over each stage a description pops out, so once you check out everything it ends up filling the space quite nicely. However, I do agree that without the flyouts it does seem to be lacking and it is not immediately apparent that the user should hover over them.

  • http://www.wycomm.net Greg Wiley

    Hey, Julien, nice work. The feel is great. I like the sharp edges and the contrast of round and square. I do have a couple of suggestions:

    In you navigation bar, the words below your name have the link color, so I try to click it to see more about each of your titles. I was looking for example of each of your disciplines. But, was sad to see they are not clickable. Perhaps you can eliminate that expectation by change the color?

    Also, the circles in the header look like buttons, I don’t know what they mean. Do you design and develop for each of these devices? I tried to click on them to see your work and, again, went nowhere. Can we eliminate this expectation too?

    I like the hover state on your example images. It tells me what I’m going to see before I even click. I’m not surprised on the other side.

    I also like how you chose to showcase the project development. That’s a great idea! The problem lies in the inconsistency of the user action. I hover to show and click to hide. Perhaps, on mouseout, we can get each piece to retract back in?

    Your portfolio page is very simple. I like it. Just focusing on the projects. Do we need a contact button there, though? If i’m ready to contact, the “contact” button is right next to the portfolio link in the navigation.

    About us is great and the contact us page is clean. All of the pages are well organized, and it is easy to read content. My last suggestion would be to make your labels on the contact form look like labels, not buttons. They don’t do anything when I click them.

    Great work, and I would love to hear your thoughts behind your design decisions. I’m sure that a lot of my critiques are very subjective, but I hope they help.

    • http://www.innovativephp.com Rakhitha Nimesh

      I also felt the same with top links and circles in the header.

  • Manuel Ricci

    I like the minimal style. I’ve saw the website on my smartphone, I don’t like the absence of the responsive design.

  • Tom Malone

    I really like it. I personally would categorize as “clean” more than “minimalistic.” But it is a solid, fantastic design. I like the layout especially. I also think you did a great job with the typography.

    The few things I noticed that I believe you could improve upon are:
    – The buttons (inside the copy – they rounded, grey-gradient buttons) are a bit weak. I think they could be strengthened by changing the border to a darker or brighter color – anything that would provide more contrast between the button’s border and the (nearly) white (#fafafa) background.

    - The border around the website screenshot thumbnail images, in your portfolio and on the homepage: The border is either too thick or too dark (or both), imho. They over-power the thumbnail-sized screenshots of your designs (which are all very nice – highlight them!). I think, actually, if you switched the border color of these images with the border color of the round, grey buttons, both would be improved. However, I would also decrease the thickness of the border around the website screenshots. This is just my personal opinion, and purely subjective, but I think a maximum of 3-5px in width for the border on them would look very nice (in a light color).

    Overall, I’m quite impressed with the design and think just a few quick improvements would make it very solid.

  • Jus

    I’m loving the whole design overall, just not sure about the diagram at the bottom of the homepage, it seems to break the “flow” of the page. I really like the choice of color scheme, it’s different enough, but not over-kill.

    My only change is, for my eye, the about page content has too much padding on it, seems to narrow…..that’s quite possibility subjective though.

  • http://www.idesignit.co.il/ Elron

    Looks really nice, i like the colors and the diagrams!

    Here’s my POV:
    I would make all the flow-text a little bigger, its really small. also the header/menu size, could be bigger.
    I dont like the position of the “about” text.

    Good job mate!

  • ian

    Nice design.

    The text was a little small to me. Using chrome dev tools to increase the font size a couple of pixels for paragraphs, lists in the page, and the h5′s in the footer made them all much more readable

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

    I’d make the font size larger, and I’m not a fan of those fixed header bars. I find them annoying and taking up valuable space.

  • http://govertz.dk Govertz

    A nice and unique design, but I think the font is to small.

  • http://kanchanrai.com.np Kanchan Rai

    Nice Work! I like the overall look of the site! The colors blend nicely but like Greg Suggested, the color of the text below the header is confusing. I second to most of what he has to say.

    I’s suggest you to make the fonts a bit bigger. It’s seems a bit small.

    I also find the text alignment on the highlighted part a bit odd. The intro is on the left but not totally on the left and then the “Web design & Web development + UI Design” and the buttons are centre aligned. Somehow, uneasy for the eyes.

    The project Development thing on the bottom is awesome. Why are you placing it at the bottom of the page? I suggest you put it on the highlighted part as a slider or in any other pages but make it significant. It’s great.
    In the portfolio, I understand you putting the contact me button, but putting it below the projects display would be a great idea. Nice Contact page, but your about me page is as boring as mine. :)

  • Bastian

    Hey,

    not actually a design thing but you added a jump-effect to the “responsive” icons in the middle of your cinema. Try to hover over them multiple times, they hover multiple times! Try to bind the event with a .stop() before it. That should get rid of the “queue”.

    Good luck for your Projects aswell!

  • http://www.designova.pl Pablo

    Love the color scheme. Great design.

  • http://www.innovativephp.com Rakhitha Nimesh

    Great work. Specially I like the header part of your design.

    Text in the about you paragraph on the header seems too small. Also the right section of the footer seems to need some content to balance the layout.

    Footer headings seems to be too small and blurred.

    Overall its a great layout.

  • http://www.stephenwsmithinfo.com/Corporate_Development.html scott123

    Overall design is good but buttons colors should be different so that it will be easy to find button and images should be at the center with the text so its looks to be good.
    Stephen W Smith

  • http://jlambe.be Julien Lambé

    Hi everyone and thanks to webdesign tuts + and Ian Yates for these workshops. I’ll try to reply to every comments this week, if I forgot you, give it a shout !

    @Alex McCabe : Thanks. You’re right about the bottom padding for the main nav. Added to my to-dos.

    @Tommaso : Yeah i’m struggling with the diagram, I was more or less thinking about building a “Services” page and remove the diagram. Still thanks to appreciate my designs.

    @ Inovanto : Mmh It’s not objective what I’ll say but I’m not a big fan of adding a computer screen. I try to avoid “clichés”. Anyway thanks you appreciate my design btw !

    @Rafal Borowski : I won’t change the “circles” design and the “hero unit background” as they give a little bit of illustrative designs so the website don’t feel too much minimalistic or clean. “Web design & blabla…” is centered on the website and on the french version. Now it pops out I need to change the alignement a bit for the english one. Thanks, fix added to my to-dos !

    @Sawyer Knoblich : I guess it affects more the “user experience” on mobile devices as there is no “hover” event with touch screens. For desktop users, it will remain this way but sure you’re right when I’ll add the “responsive design” for mobile devices, the title should be displayed.

    @Greg Wiley : Thank you very much for your comment and that you appreciate my work. You have some points about my design/usability :

    1- You’re right about the words below my name, I should give them a not-clickable color/behaviour. Added to the to-dos.
    2- Yes I design and develop for each devices. I get your point but It has to do with the design and currently i’m not yet inspired for changing this area :(
    3- About the behavior for “project development” diagram. It used to hide on “mouseout” but the thing is that the users didn’t take the time to read the 2 sentences of explanation then. So that’s why there is a “click” event for hiding
    4- Sure it’s not the most useful but it serves as a reminder. (Contact button on the portfolio)
    5- You get another point for the labels look on the contact page. I wanted contrast to show the user what to fill in the form. I should simplify the looks. Added to the to-dos.

    @Manuel Ricci : Thanks. The responsive design is on his way ;) But it takes some time as it’s not my higher priority at the moment.

    @Tom Malone : Thanks a lot for your comment and that you appreciate my designs. Mmh the reason behind my big “border” on the thumbnails is to avoid that bright design mix the with background of the website and if it is too thin, it won’t be clear to the user.

    @Jus : Thanks. You’re right about the diagram on the home page. Still have to find another idea. The about page is missing a nice picture of my silly face so it will soon be less narrow.

    @Elron : Thanks. Mmmh not sure about the text size as I’m afraid to get a “fatter” font than taller.

    @ian : Still not sure about font-size excepts for the h5 tags on the footer. We lose some visibility as the browser has some difficulties to sharpen the edges.

    @Charles @ CodeConquest.com : See above for font-size. The reason for the fixed header was to give access to the other pages while scrolling down.

    @Govertz : Thanks.

    @Kanchan Rai : Thanks to appreciate my designs. Check my response about @Greg suggestions above ;) and font-size just 5 lines above :) As for the project development diagram, I was thinking to display it on his own page with other usefuls infos about my services. But I don’t know when It will be done !

    @Bastian : I’m aware of the “queued” effect but I was not able to find a solution. It works correctly on Chrome and the queued effect is visible on the other browsers, weird i know ;)

    @Pablo : Thanks man, you’re my best fan ! Joking ;) Thank you to appreciate my work ! I guess you’re doing 3D architecture ?! I was a 3D modeler too a long time ago. I’m a modo fan!

    @Rakhitha Nimesh : Thanks. See above for font-size. You’re right about the footer, you got me ! The empty area is waiting for some icons, awards or recognition to display ;)

    @scott123 : What i’ll say is not objective but… i like to break the rules about typos in web and I really like the way my paragraphs are :) But thanks for your advice and glad you appreciate my website !

  • http://webpresencebuilder.net Heather

    What a great way to give and get feedback on design!

    This makes a lot of sense, because you really do want for your website visitors to enjoy all elements of your website design.. and so many people are willing to help with their thoughts!

    Keep up the great work!

  • http://camdennieves.yolasite.com/ ChardeLambert

    I saw the web site and it was relevant for me.Mainly because I’m thinking to write my own blog.

  • Sam

    I really like it. I hate looking at other peoples work because right now I’m working at my portfolio site and now I want to change it, lol. Anyways nice layout, good choice of colors..the only thing I would change like someone already mentioned is the size of the body fonts. About us Page seems kinda sparse as well, too much text. Home page is excellent, nice choice of colors and good branding…nice work.

  • dstew

    Your site doesn’t adapt for viewing on mobile devices, making it hard to use.

  • http://jlambe.be Julien

    @Heather : Thanks for your kind words ! I appreciate.

    @ChardeLambert : Wish you good luck for creating your blog, I hope you’ll show it here on webdesign tuts+. Thanks !

    @Sam : Thank you, I appreciate. For the records, it took me 18 iterations before getting this result ! Give you some constraints, I know it’s hard, we would like to test every designs. Try to stick with one and improves it later on.

    @dstew : I know and you’re right. A responsive design is on his way.

  • http://www.adoumas.com adoumas

    Very nice and clean.

    But I dont like your footer font family because the font size is to small and get blur.

    You should make it responsive. its to bad that i cant see it in a mobile device.

  • http://akmwebtech.in Akmwebtech

    this very thanks full for this tutorials

  • http://www.facebook.com/treisce Hanike Treisce

    Loved Julien’s layout! It’s simple, clear and effective, has a vibrant color contrast. Loved the DevPlan in the end and the design aesthetic in general per se.
    The only thing I disliked was the footer – too large and “clear” with that little information.