This is the fancy version of my portfolio. It shows more what I did when I started with all the designstuff (which means I vexeled a lot).
Looks a lot better when viewed on a big Screen in the webbrowser.
Simple version: forrst.com/posts/…
The message box is missing the "message" label. I like the photography and you have an interesting form design here. I'd like to see how this works out for you. Also, I would increase the size of the the content area and get rid of this gimicky "close content" and "open content" and "switch to simple version" option.
I noticed the "simple version" isn't really simple. The work or content area that displays the gallery images displays 2.5 of the images in Chrome and Firefox. Why not increase the size so 3 columns of images can be displayed? Also, the contact form on the simple portfolio pages breaks all UX principles by having the field labels to the right of the input boxes. Form design is a great interest of mine and you should take a look at this article by Luke Wroblewski lukew.com/ff/… for sure and optionally read
Nice idea with loosing focus, but that girl scares the shit out of me!
@retrib haha thanks :D. She does scare me a bit too, I have her in an A1 sized poster on my wall and I kind of got used to her though.
@dgbrahle thanks for your long and detailed comment. First off: I know, that this design breaks a lot of design/UX principles but that's exactly what it's there for. I designed this more than a year ago and I've learned a lot since then. The main challenge I set for myself with this design was to make something very not web-like into a working website, without losing focus on the "illustration". I wanted it to work with very small resolutions and have the user see as much of the illustration as possible. Therefor I chose the content size to be very small. The design is more something to look at, than really a design that presents the content and makes it useable. That's why there is a "simple" version, too.
Perhaps the phrasing wasn't quite right as you're right and it's not all that "simple".
The gallery displays 2.5 images (on both versions) because of the small size of the navigation for the gallery. The main thought behind it was to make the user aware that there was "more". In retrospect I think the thought was a good one, though I too think it's more agreeable for the eyes to display whole images. BTW I think it works better on the simple version with the more visible line that cuts off the image than in the fancy version, where it just disappears without any obvious reason.
I think you're absolutely right concerning the position of the labels. The first version had a little different layout and I had a good reasoning for positioning the labels like this. I just adopted the form from that version without considering the new situation. I'll change that. Thanks for the hint!
I purposefully didn't put a "message" label here. The reasons:
But this is a website that has not many visitors of that kind. My website is not the portfolio of a freelancer who tries to get new clients through it. The only users I have are people like me.
So when you fill out this or any other comment form with a fiew small sized fields and a big one, do you read the label and make sure that it's this field where you should put your comment in?
I have to admit that I don't track user behaviour enough, but I do receive messages through the form and nobody until now had confused the field with something else.
Though to be clear on this one: I wouldn't do it on any other website. I use my website to experiment.
Thanks again for your comment.
Long comment. But fun to write about a design in as much detail as this.
And btw sorry for the late response, I didn't get emails about the comments (though I have switched that on in my settings...)
Forrst is a community where designers and developers can share their work and get the feedback they need. It's maintained by ZURB, a product design company that helps companies design better web sites, services and online products.
Tweet us @forrst
Email us email@example.com
Get monthly updates from Forrst in your inbox.
© 1998–2013 ZURB, Inc. All rights reserved.