HOME | DD
inspiredMark ā Folio Layout
Published: 2010-01-09 20:23:25 +0000 UTC; Views: 14663; Favourites: 82; Downloads: 978
Redirect to original
Description
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]
Related content
Comments: 38
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.e.deviantart.net/emoticons/s/sā¦ " width="15" height="15" alt="
š: 0 ā©: 1
Hey
I've actually started coding this and you can see it here:
[link]
NOTE: It sits on the grid right in FireFox and needs a little tweaking in others.
"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."
Hmmm. OK. It would be a shame to do this as I just wanted to keep it simple. I wonder if the grid is too visable then...
"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."
You'll see on the live site that I have placed a blinking square next to the current page menu title. Hopefully that will draw the eye more so than type treatment? I'll give this some more thought for sure.
"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."
There is a key to explain the icons directly under the menu. Potential clients shouldn't need to navigate away from that one page as clicking on the images will show an enlarged image on the same page (the first block is functioning right now for you to see). Actually making the icons less obvious was intentional as it's not important to me that they are clicked. If someone discovers them then that is ok. I wanted it to resemble a key on a map. The map itself is the important part and the icons are secondary and discoverable if the reader is so inclined to look and think. I know this goes against web links in general but I could remove them entirely and not be bothered too much. So I think the deliberate subtilty may work in this case. I had in mind that they are really a graphical detailing to the overall design.
I'll give this more thought for sure though.
"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'll give typography some serious thought. This is a new area for me in all honesty and one I'm getting excited about (sad eh).
"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."
Interesting. Useful thinking on +3pts leading and will carry that with me from now on. I was actually aware that it is loose. The problem is that I have it sitting on the grid. I'm in a bit of a pickle really. I think I need to make the grid tighter so that I can reduce the leading.
"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."
I hear you. You know I had it much lighter but when I looked at it on a regualr monitor I just couldn't see it. So I thought that this website is aimed at potential clients and not fellow designers with top notch screens. I'm really itching to tone it down but do I want it invisable to most important people viewing? I might try reducing it ever so slightly.
I would say thank you and that I'm very grateful but that's so 2009. Throwing a hissy fit is in for 2010.
Fuckoff, you know nothing. Bum grape.
š: 0 ā©: 1
I don't have time to reply to everything right now, but if you want to hide the fact that elements aren't sitting perfectly on the grid you can give them a solid white background behind the DIV and make sure that large rectangle created by the white background sits properly on the grid, and this would negate any feeling of misalignment you'd encounter otherwise.
š: 0 ā©: 1
Got it. Although as my leading is too spaced on all other pages I think I need to tighten the grid a little anyway. I'm pretty confident I can get everything to sit on the grid. Or lose the grid altogether. Oh dear. I find it impossible to leave my own site alone and stick with an idea.
Here's a sneak peak at a personal project I've been working on:
[link]
It too has a container around each element. So I'm quite intrigued by how a more simple affair with the white div would look.
Many thanks.
š: 0 ā©: 0
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!
š: 0 ā©: 1
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.
š: 0 ā©: 1
Thanks for your thought. I'll consider it for sure
Many thanks.
š: 0 ā©: 0
This is beautiful. Clean and crisp. Love the notebook feel it gives.
š: 0 ā©: 1
Thank you for kind words
š: 0 ā©: 0
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.
š: 0 ā©: 1
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.
š: 0 ā©: 1
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.
š: 0 ā©: 1
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.
š: 0 ā©: 0
Very cool design, i also saw this on DC, and it looks clean and cool.
š: 0 ā©: 1
Very simple, clearly arranged and professional. I like it!
š: 0 ā©: 1
Delicious, its simple yet attractive.
I do love the sidebar, with the little thingies, good job sir
š: 0 ā©: 1
Delicious! Why thank you kind sir.
š: 0 ā©: 0
Another nice work, even though, the text in blog and project seems to be a bit larger.
š: 0 ā©: 1
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.
š: 0 ā©: 1
fair enough 
š: 0 ā©: 0