Try Tuts+ Premium, Get Cash Back!
Web Design Workshop #14: Lettier
tuts workshop

Web Design Workshop #14: Lettier

on Jun 30th 2012 with 26 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 very unusual portfolio site – check it out..

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

Portfolio website of sorts that presents and gathers information in a 3D movable environment. It was created to stand out from the seemingly increasing Internet suburban landscape of soft gradients, SVG images and jQuery UI themes. I particularly like the more analog presentation with six degrees of freedom. I would enjoy hearing feedback on the originality and application of a 3D environment. – David Lettier

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://nidenart.se Joacim Nidén

    Cool idea as an experiment, but it’s making me quite dizzy.

    • luka

      yessss

  • Hamid

    Project: lettier.com
    Designer: David Lettier

    this liinks didn’t work for me on firefox 12.0!

  • Hamid

    its worked after few refreshs!

  • http://www.lettier.com/ LETTiER

    For those without a 3D/WebGL able browser, here is a screen cast (albeit older variant) of the intended design mechanics.

    http://youtu.be/8GNzyVfiO-A?hd=1

  • Hamid

    btw is there anyway to zoomout?

    • http://www.lettier.com/ LETTiER

      Press [ESC] or press the ESC at the top of the clipboard. 8)

  • Dari

    Very innovative. I like the 3D aspect of it. It looks professional and creative. I like it.

  • Custom icon design

    Very creative but not enough content. Just some social media links.

    • http://www.lettier.com/ LETTiER

      More content is located by clicking on the various areas such as the television and old computer. But yes, I agree, there needs to be more articles. I am in the process of getting more writers. Thank you. 8)

  • Manuel

    the 3d enviroment slows the browser… I don’t think that is a great idea for a website.

    • http://www.lettier.com/ LETTiER

      Yes Manuel, on older systems and integrated graphics card environments, speed is a concern. The site automatically switches to a 2D version if there is no WebGL support but I think I’ll add an option to manual switch to the 2D version. Thank you for the comment.

  • Jesus Bejarano

    You cannot say anything bad about this.

    • http://www.lettier.com/ LETTiER

      Thank you Jesus Bejarano.

  • http://dave-mate.com Muhammad Asif

    That’s pretty nice but I am not sure why it’s won’t run on my browser!

    • http://www.lettier.com/ LETTiER

      Thank you Muhammad Asif. What problems did you experience? The browser has been tested to work with FF9+, Chrome18+, Safari5+, IE6+, and Opera11+.

  • http://iakshay.net/ Akshay

    Really nice concept!

    Few suggestions -:
    - I would have liked to see a better loading animation, maybe you could have used some CSS3 animation.
    - I’m not too sure, but I think a similar effect could have been achieved without using webgl, using CSS3 3D Transforms. This way it would be compatible with most mobile devices as well.
    - Better typography for the articles list.

    Never the less, very well done! I like the concept :)

  • Techeese

    Very original :)

    • Techeese

      weird… the paragraph below was included within the above post ^ but wasn’t included..
      –

      though reading information or content from that small clipboard is hard when using a monitor of 17″ and up , you could either re-size width and height with a bigger clipboard WxH or have the clipboard rotate into a landscape view then again you still might want to re-size it, depending on their screen resolution(?).

      stop the mouse from moving too much it hurts users eyes, then again how about limit it within the area of the link(ex. on your logo).

      provide a controller image where it can help user teach with keyboard press’s and it’s function or write them on the image wall.. >:)

      • http://www.lettier.com/ LETTiER

        Thanks Techeese. I’ll add an option to increase font size and to rotate the clipboard 90 degrees. The clipboard re-sizes itself based on screen size (see it in action by resizing the browser). I tested the size on a 13″ MacBook Pro but these options will be a nice touch.

        I notice the panning happens more rapidly in Chrome (probably due to the browsers faster processing of WebGL). I’ll have to find a universal way of throttling the speed.

        The only key is [ESC] but I’ll add something to give notice to the close “link” located on the clipboard metal clip.

  • http://www.marcioreis.pt mreis1

    Hy lettier,

    first i want to appollogize because i’m writing this comment without read the above list of feedbacks.

    I would recommend a better visual feedback for hovers. I realize that the feedback of the different menus appear on the left down side, maybe, (just maybe) it would be easier and more enganging to make it appearing in a tooltip close the user’s mouse.

    ;)

  • Curtis

    It’s a great concept and a great show of skill and practice for you. For the end user it’s not the best.

    1) The camera movement with the mouse is too dynamic equaling dizziness and nausea. People who read with the mouse pointer strolling the text will find it a challenge to stay focused. Also it feels funny to move the mouse to the far right and wait 5 seconds for the camera to pan.

    2) The art is kind of depressing. As a user the site doesn’t have a feel that I would want to return to often.

    As a final product the 2 core component aren’t ready IMO. The camera movement with the mouse isn’t ready yet and the art isn’t doing the concept justice. You def have skills though, keep it up.

  • http://www.devdigital.com Dev Digital

    Creative workshop, I always prefer to be a part of such web design workshop but bcz of work pressure and my busy schedule i miss many of them.

  • Jay Wilburn

    Pretty cool site!!!

  • Crystal

    I think it’s an interesting and creative idea, but I’m not in love with the execution.

    I’m not in love with how you have everything come up on that clipboard. It’s very tight and doesn’t really command my attention with everything else that’s going on.

    I know it’s supposed to be 3D, but it feels really flat and the proportions/scale is really off to me.

    I think to pull this off successfully, you’d need to create the images yourself in like Illustrator or take picture yourself so that you could get the scale correct.

    Good luck! :]

  • http://www.creativethien.com John Tran

    Love the fact you are stepping out of the box and doing a 3D site, I just don’t like the execution. When I first came to the site I started clicking on the social links at the bottom, those are the only ones that stand out as something click-able. Then after a minute I realized a few items on the site were click-able. Maybe you should include a small call out somewhere that let’s users know you can click else where on the site. Also once you roll over an item, it would be helpful if there was some other indication other then a cursor change.

    What is this website for? Even after clicking a few links I have no clue what the point of this site is other than a cool experiment.

    Last thing that bugs me has been brought up all ready. Not a fan of the way you display content in that clipboard. It feels like the content was a last minute idea to add in, “Lets just throw it on the stage” feel.