Deviant Login Shop  Join deviantART for FREE Take the Tour
×



Details

Submitted on
January 9, 2010
Image Size
965 KB
Resolution
1429×3162
Link
Thumb
Embed

Stats

Views
12,742 (3 today)
Favourites
75 (who?)
Comments
34
Downloads
975
×
Folio Layout by inspiredMark Folio Layout by inspiredMark
Played around with a new layout of my folio over Xmas. I just had 'keep it simple, stupid' in my head.

I've never done a fluid website before so thought I would play with the idea. I've alway done fixed width in the dead center. The left column will be fixed width to the far left of the window and the right hand main column will fill the browser window as I wanted the folio images to fill the screen.

Thanks for viewing.

EDIT: Started coding this in Firefox (will need tweaking for others): [link]
Add a Comment:
 
:icontheryanford:
Generally I really like this look. Feels very technical and precise, and so I dig it. I've got a few things to consider, as usual, which I hope help:

The grid background is cool but interacts oddly with the relatively small type. Perhaps put a white block surrounding the thumbnails+descriptions to help separate it from the background a bit to help with legibility. I'm not sure it'll look "right" but it's worth a shot.

Primary nav on the left isn't given any more attention than all other type. Enlarge the nav links or make them pop somehow to reinforce that people should look there.

At first glance I wasn't sure what the "I" and the "W" in circles represented. In fact I wasn't 100% sure it was an "I" at all. After a few minutes I now assume the "I" = info and the "W"=website. If that's the case, I think it might be good to spell those out. The tiny circular links didn't even register as being links anyway. They looked more like descriptors/tags to suggest this design has info and has a website.

I dislike the humanist stylings of the sans-serif you're using for "Project Analysis" and "Blog" as well as little headers. It doesn't match the implied precision of your layout (the graph paper, mostly). I'd pick a grotesque sans-serif that is very geometric (not corny-geometric, just classy geometric kinda like Futura except more contemporary). That way your font matches everything else you're trying to say with the layout.

I like the larger typography being used for secondary pages, but the leading is too loose. Leading is the space between lines of type, and while you do want a fair bit of it you certainly don't want it to be as loose as you've got it. The leading you have now makes it look like each line of type is separate, rather than being part of a larger cohesive chunk of text. My general rule of thumb with leading is to match the pt size of the text and then add at minimum 3pts. So for example, 10pt text on 13pt leading is comfortable. 10pt on 16pt leading is slightly too much.

Lastly, after looking at this for a much longer period of time, the grid effect has begun to bother my eyes. Maybe fade it back a tiny bit more? Overall a cool layout that's nice and simple (and has decent words per line, too!) but needs just a few tweaks to help button it up, in my opinion.

:)
What do you think?
The Artist thought this was FAIR
50 out of 54 deviants thought this was fair.

The Artist has requested Critique on this Artwork

Please sign up or login to post a critique.

:iconsilent-princee:
silent-Princee Apr 20, 2010  Professional Interface Designer
Nice Work!
Reply
:icondainix:
dainix Jan 15, 2010  Professional Interface Designer
Hello there!

Very inspiring and beautiful web-design I must admit!

I showcased it in my website here - 55 Trendy Web Design Interfaces From Deviantart.

Let me know if everything is okay, or maybe you don't like to be featured, just tell me and I will take it off. Let me know and thanks for your time!
Reply
:iconinspiredmark:
Thank you kindly :)
Reply
:iconcoronalemon:
CoronaLemon Jan 14, 2010
Great layout mate, I love it!
Reply
:iconbalpert:
balpert Jan 13, 2010  Professional Interface Designer
I think that all the "popping" liquisoft is looking for could be achieved easily by giving text containers a semi-transparent white or very very soft beige background.
Reply
:iconinspiredmark:
Thanks for your thought. I'll consider it for sure :)

Many thanks.
Reply
:iconrameexgfx:
rameexgfx Jan 13, 2010  Student Interface Designer
Great work....
Reply
:iconrameexgfx:
rameexgfx Jan 13, 2010  Student Interface Designer
ur welcome...
Reply
Add a Comment: