Shop Mobile More Submit  Join Login
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 Featured By Owner Apr 20, 2010  Professional Interface Designer
Nice Work!
Reply
:icondainix:
dainix Featured By Owner 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:
inspiredMark Featured By Owner Jan 15, 2010
Thank you kindly :)
Reply
:iconcoronalemon:
CoronaLemon Featured By Owner Jan 14, 2010
Great layout mate, I love it!
Reply
:iconinspiredmark:
inspiredMark Featured By Owner Jan 14, 2010
Thank you sir :)
Reply
:iconbalpert:
balpert Featured By Owner 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:
inspiredMark Featured By Owner Jan 13, 2010
Thanks for your thought. I'll consider it for sure :)

Many thanks.
Reply
:iconrameexgfx:
rameexgfx Featured By Owner Jan 13, 2010  Student Interface Designer
Great work....
Reply
:iconinspiredmark:
inspiredMark Featured By Owner Jan 13, 2010
Thank you :)
Reply
:iconrameexgfx:
rameexgfx Featured By Owner Jan 13, 2010  Student Interface Designer
ur welcome...
Reply
:iconsoumyasm:
soumyasm Featured By Owner Jan 12, 2010  Professional Interface Designer
This is beautiful. Clean and crisp. Love the notebook feel it gives. :heart:
Reply
:iconinspiredmark:
inspiredMark Featured By Owner Jan 13, 2010
Thank you for kind words :)
Reply
:icondetruk:
detruk Featured By Owner Jan 10, 2010  Professional Interface Designer
I like the clean style and the color scheme you used but to my mind the leading is too much big (or the font-size too small in some cases).
ex : the description text on the project analysis page is about 14 or 16px font-size ? But the leading is about 3 times bigger which is really too much. 1.5 or 1.7 times bigger would maybe better ?
Maybe you could work with a smaller leading ? It won't break the vertical rythm and it would be good for 10 to 18px font-size text.

What the aim of the grid on the background ? Is it here in order to make the work you've done on vertical rythm visible by the visitor ?

It's an interresting work man.
Reply
:iconinspiredmark:
inspiredMark Featured By Owner Jan 10, 2010
I'll for sure address the typography.

The grid is to give potential clients the visual of planning and precision in my work.

Many thanks for the comments, I appreciate it.
Reply
:iconpolegnyn:
polegnyn Featured By Owner Jan 12, 2010  Hobbyist General Artist
Speaking of precision, your photo borders either overlap or are contained by the horizontal grid lines. Is each photo supposed to be contained by those lines as the portion with thumbnails, or are the photos supposed to overlap such as the portion with the project description?

I'm glad the text rests on a line as trying to read it would be difficult otherwise. Kudos!

I hope this isn't abrupt. Too many late nights recently. :)
Reply
:iconinspiredmark:
inspiredMark Featured By Owner Jan 12, 2010
Not sure lol. I can't remember what I did and I'm on my iPhone right now. I'll code it and then worry about getting it sitting right I think by nudging pixels.

BTW not abrupt at all!

Cheers.
Reply
:iconexoheartbeat:
eXoHeartbeat Featured By Owner Jan 10, 2010
Nice, simple and professional. Good job.
Reply
:iconinspiredmark:
inspiredMark Featured By Owner Jan 10, 2010
Thank you :)
Reply
:iconexoheartbeat:
eXoHeartbeat Featured By Owner Jan 11, 2010
You're welcome :)
Reply
:iconbiosss:
BioSss Featured By Owner Jan 10, 2010
Very cool design, i also saw this on DC, and it looks clean and cool. ;)
Reply
:iconinspiredmark:
inspiredMark Featured By Owner Jan 10, 2010
Thank you kindly :)
Reply
:iconantoniavg:
AntoniaVG Featured By Owner Jan 10, 2010
nice work. Looks great, very clean.
Reply
:iconinspiredmark:
inspiredMark Featured By Owner Jan 10, 2010
Hey many thanks :)
Reply
:iconwonder-design:
Wonder-Design Featured By Owner Jan 9, 2010  Hobbyist General Artist
Very simple, clearly arranged and professional. I like it!
Reply
:iconinspiredmark:
inspiredMark Featured By Owner Jan 9, 2010
Many thanks :)
Reply
:iconryander:
ryander Featured By Owner Jan 9, 2010
I can dig it. Nice
Reply
:iconinspiredmark:
inspiredMark Featured By Owner Jan 9, 2010
Thank you :)
Reply
:iconsoultutorial:
SoulTutorial Featured By Owner Jan 9, 2010
I Love it :woohoo:
Reply
:iconinspiredmark:
inspiredMark Featured By Owner Jan 9, 2010
Thank you!
Reply
:iconchrili:
Chrili Featured By Owner Jan 9, 2010
Delicious, its simple yet attractive.

I do love the sidebar, with the little thingies, good job sir :salute:
Reply
:iconinspiredmark:
inspiredMark Featured By Owner Jan 9, 2010
Delicious! Why thank you kind sir.
Reply
:iconumar123:
umar123 Featured By Owner Jan 9, 2010  Professional Interface Designer
Another nice work, even though, the text in blog and project seems to be a bit larger.
Reply
:iconinspiredmark:
inspiredMark Featured By Owner Jan 9, 2010
Yeah it had to be bigger because the folio titles and descriptions are 11px and 10px respectively, which is too small for comfortable reading of longer text areas.

Many thanks mate.
Reply
:iconumar123:
umar123 Featured By Owner Jan 9, 2010  Professional Interface Designer
fair enough :D np at all :)
Reply
Add a Comment:
 
×
Download PNG 1429 × 3162




Details

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

Stats

Views
13,398 (1 today)
Favourites
73 (who?)
Comments
34
Downloads
976
×