Took some time, re-evaluated, got this.

[Nadril]

[hide=v1]

 

 

*sigh*, man, you guys do not know how many WIPs and designs and ideas I've gone through. I've been in a pretty crappy design block recently and I've also been pretty self-conscious of my design the past few weeks. I've been looking all around online and just trying to get... some sort of inspiration for a new portfolio.

 

So this is probably the 4th or 5th idea I've had and, I have to say, I actually really like it.

 

 

 

 

As always I've gone for a dark, minimalistic theme here. This time I've tried to make everything a bit bigger as to avoid my current situation where my portfolio can fit on a 648x480 space. Still keeping within the confines of a 1024x768 (well, vertical scrolling a bit) space but making sure I use the space this time. I've really tried hard on making this look... not amateurish. Obviously at this point it is an early WIP but I'm certainly questioning just how much I'll add to it, as once I get all the thumbnails actually filled with images it is bound to "fill up" a lot.

 

 

The number of thumbnails is (obviously) not set in stone, It's just the amount I could fit on the canvas (1024x1200) I set up for myself).

 

 

Coding wise, these are my plans:

 

 

- Heavily debating the use of lightbox for this one. I would really like input on this and, if not what I should do instead.

- Hover over text inside of the thumbnail detailing what I want about the image (title, software, ect.)

- I want to use a CMS, but which one would be best for this?

edit:

- going to do an "acordian" style thing, where you click the link and it opens up into that part. So obviously blog/portfolio may change places.[/hide]

 

 

v2

 

Took in a bunch of comments and reworked it a bit. I did take everything into consideration and just sort of did what I felt best.

 

 

 

Note: The firehydrant picture is just an example of when you'll "hover over" one of the thumbnails, so it looks brighter because I want it to do that.

 

 

Changes:

 

- Shortened the space between links considerably. I did try them all on one line and it just didn't look that great. Still I do agree they took up too much space before.

- Changed to a 3x2 layout. I really agree that this helps the page a lot and doesn't overwhelm the user with pictures.

- Added pictures to the thumbnails so they aren't soulless boxes. Hopefully this helps when critiquing the page as they'll draw more attention now :)

- Added a light stroke (#535353) and a drop shadow to the image thumbnails. I think it really helps bring focus to them :thumbup:

- Added example of hovering over an image (firehydrant).

[Sam]

That's really quite cool, I like it.

[i_love_burritos]

Will there be something in those gray squares ?

 

Because I had to lean in forward and resize, to see it.

 

And your last name "Cerny" is a little too dark [kinda hard to read at first]

 

But the design look/ is really clean, simple :thumbup:

[Nadril]

Will there be something in those gray squares ?

 

Because I had to lean in forward and resize, to see it.

 

And your last name "Cerny" is a little too dark [kinda hard to read at first]

 

But the design look/ is really clean, simple :thumbup:

 

Yeah the squares are just placeholders for the image thumbnails. I can probably make that last name a bit lighter, my monitor is pretty bright so it's easy to see here.

 

 

That's really quite cool, I like it.

 

Thanks.

[ElkNight]

Will there be something in those gray squares ?

 

Because I had to lean in forward and resize, to see it.

 

And your last name "Cerny" is a little too dark [kinda hard to read at first]

 

Your monitor must be really dark then.

I can read it perfectly fine.

 

The only input I have at the moment is, I think you need to have less thumbnails. With that many it will just look crowded.

[i_love_burritos]

Your monitor must be really dark then.

I can read it perfectly fine.

 

The only input I have at the moment is, I think you need to have less thumbnails. With that many it will just look crowded.

 

I tend to lean back and kinda' slouch when sitting at my desk. Maybe that's why ?

[Nadril]

Will there be something in those gray squares ?

 

Because I had to lean in forward and resize, to see it.

 

And your last name "Cerny" is a little too dark [kinda hard to read at first]

 

Your monitor must be really dark then.

I can read it perfectly fine.

 

The only input I have at the moment is, I think you need to have less thumbnails. With that many it will just look crowded.

 

As far as the thumbnails go it'll be as many as I have items I want to show on the page. I could always spread them out a bit more if people really wanted me to but, to be honest, I kind of like them bunched up like that.

[Mil]

With a minimalistic design, typography and attention to detail is very important. (when I say detail, I mean making sure there is a clear structure and everything has accurate alignment on the page, as well as white-space.)

 

Check out http://ilovetypography.com/ and perhaps http://vandelaydesign.com/blog/design/typography-resources/ and http://webdesignledger.com/resources/12-css-tools-and-tutorials-for-beautiful-web-typography

 

A nice multiple border to those thumbnails would be pretty neat. So a lighter grey 1px border on the inside, and a darker 1px border on the outside. Or perhaps you could have a nice floating look to the thumbnails, such as http://www.mikematas.com/

[VjuliusT]

Ligthboxes would work and look really slick if it'd cover all the thumbnails while in use, not sure what hit on functionality it would have though. I assume you'd have next/previous buttons added as well. I think it'd be highly possible to add text in the thumbnail that you'd show in the lightbox itself under the picture, I don't have access to an image program at the moment but I hope this explains what I mean:

______

! PICT- !

! URE !

! TEXT !

 

The space between the text is excessive, also annoys because it's the particular reason to why I have to scroll to see the rest of the thumbnails. I do like the font and size choice though, although the dots are quite horrible in my opinion as it steals all the attention on the site as they're "sharp" (Not sure how to explain) but that might not be the issue when you've applied thumbnails to the site, I would still figure out an other way to underline the text though.

[Nadril]

With a minimalistic design, typography and attention to detail is very important. (when I say detail, I mean making sure there is a clear structure and everything has accurate alignment on the page, as well as white-space.)

 

Check out http://ilovetypography.com/ and perhaps http://vandelaydesign.com/blog/design/typography-resources/ and http://webdesignledger.com/resources/12-css-tools-and-tutorials-for-beautiful-web-typography

 

A nice multiple border to those thumbnails would be pretty neat. So a lighter grey 1px border on the inside, and a darker 1px border on the outside. Or perhaps you could have a nice floating look to the thumbnails, such as http://www.mikematas.com/

 

Some good ideas. I'm planning on doing some sort of border, I'll see how it looks with the images in there before committing to one though. And yeah, I noticed a few things are a bit off alignment, that'll all get fixed.

 

 

Ligthboxes would work and look really slick if it'd cover all the thumbnails while in use, not sure what hit on functionality it would have though. I assume you'd have next/previous buttons added as well. I think it'd be highly possible to add text in the thumbnail that you'd show in the lightbox itself under the picture, I don't have access to an image program at the moment but I hope this explains what I mean:

______

! PICT- !

! URE !

! TEXT !

 

The space between the text is excessive, also annoys because it's the particular reason to why I have to scroll to see the rest of the thumbnails. I do like the font and size choice though, although the dots are quite horrible in my opinion as it steals all the attention on the site as they're "sharp" (Not sure how to explain) but that might not be the issue when you've applied thumbnails to the site, I would still figure out an other way to underline the text though.

 

Yeah I think I get what you're saying. I'll probably end up using lightbox as it always works pretty well, and it supports having text as well so that's always good. As far as the dots go I could lower their opacity if they were an issue perhaps? I do think that once the thumbnails have images they will draw a lot more attention than you might think, especially with some borders. I'll experiment with a lower opacity though.

 

The links are that way due to the site going to be a sort of "accordion" style I'm going for. I don't think scrolling will be a major issue, after all you should be able to have almost all of the current thumbnails on your screen with little or minimal scrolling, it's only 1200px high after all. I could try and tighten up the links though together if it'll still look alright though. :thumbup:

 

(Also I like the font too, Raavi is awesome)

[dsavi]

I'm not really sure I like it. The links at the top look like a broken navbar, and it seems to waste a lot of space. Try putting the links on one line- That multiple line setup just doesn't do it for me, it looks sloppy. Also the layout of where I assume images from your gallery will be: Try making it 3x2 instead of 4x3. (You'll want to make your main width slightly bigger, to 960, to make a 3x2 layout possible. 820 doesn't divide by 3.) You're stuffing too much information onto one page, let the user focus on a few images that define your style.

Lightbox works fine but I'm not a fan of modal layouts like that at all. It may seem to put the user's attention to the picture they clicked on, but even if it does, it pulls the user there and then there's distracting stuff around the image. I would go for a gallery, possibly written using Jquery, that displays the thumbnails on the same page that it displays the focused image. Then the user knows what image will be displayed next, instead of going back and forth trying to find the image they want. I wrote the beginning of something like that (It doesn't display any thumbnails on the page but it shouldn't be too difficult to do) and a preview of it is here. It's GPL licensed, if you want to use it I should probably rewrite the comments in English. :P

[Mil]

If you're choosing what to use for a back-end, I would definitely say WordPress for something like this. No doubt it is the most popular and widely used for gallery/portfolio/blogs of this style.

 

Of course, create the HTML/CSS site first, then there are many, many guides out there to help you to convert it to be used with Wordpress.

[Nadril]

Took in a bunch of comments and reworked it a bit. I did take everything into consideration and just sort of did what I felt best.

 

 

 

Note: The firehydrant picture is just an example of when you'll "hover over" one of the thumbnails, so it looks brighter because I want it to do that.

 

 

Changes:

 

- Shortened the space between links considerably. I did try them all on one line and it just didn't look that great. Still I do agree they took up too much space before.

- Changed to a 3x2 layout. I really agree that this helps the page a lot and doesn't overwhelm the user with pictures.

- Added pictures to the thumbnails so they aren't soulless boxes. Hopefully this helps when critiquing the page as they'll draw more attention now :)

- Added a light stroke (#535353) and a drop shadow to the image thumbnails. I think it really helps bring focus to them :thumbup:

- Added example of hovering over an image (firehydrant).

 

 

If you're choosing what to use for a back-end, I would definitely say WordPress for something like this. No doubt it is the most popular and widely used for gallery/portfolio/blogs of this style.

 

Of course, create the HTML/CSS site first, then there are many, many guides out there to help you to convert it to be used with Wordpress.

 

Oh thats good. I was worried wordpress wouldn't handle a gallery that well. I actually have done a wordpress layout before so I know the basics of how to work it, plus I already have the CMS set up on my FTP server. :thumbup:

[VjuliusT]

I would ditch the strokes around the thumbnails, feels a bit bland. Personally I would go without a border or a slightly broader border where the thumbnails are slightly raised up on (A bit like a drop shadow that's seen from top) but that's just my opinion.

 

Spacing and size of thumbnails are nice, but reduce the spacing between them (height wise) so it's more symmetric.

 

Still not liking the dots entirely, a lot better now with the thumbnails though.

[Chuggy]

If it's gonna' be an accordion thing for the nav, then awesome. And I say go with the lightbox and use it. I don't quite like the text over the fire hydrant saying 'Fire Hydrant Photography' though.

[Nadril]

I would ditch the strokes around the thumbnails, feels a bit bland. Personally I would go without a border or a slightly broader border where the thumbnails are slightly raised up on (A bit like a drop shadow that's seen from top) but that's just my opinion.

 

Spacing and size of thumbnails are nice, but reduce the spacing between them (height wise) so it's more symmetric.

 

Still not liking the dots entirely, a lot better now with the thumbnails though.

 

Yeah I'll muck around with various borders/none at all.

 

Also I'll try and lower opacity on them and see if you like that. :thumbup:

 

If it's gonna' be an accordion thing for the nav, then awesome. And I say go with the lightbox and use it. I don't quite like the text over the fire hydrant saying 'Fire Hydrant Photography' though.

 

Yeah I'm still planning on doing that hopefully. I'll mess around with the text on it, I think I know how to fix it.

[ehlanatorne]

slighty Off topic, but being a user of terragen 2, it makes me slightly envious looking at your 3d work, i'm guessing your using the full version?

 

back OT, I like the design, its simple, doesn't draw attention away from the art, and still communicates everything it needs to, I know next to nothing about website design, but as a consumer looking at the page, I like what I see.

[Nadril]

slighty Off topic, but being a user of terragen 2, it makes me slightly envious looking at your 3d work, i'm guessing your using the full version?

 

back OT, I like the design, its simple, doesn't draw attention away from the art, and still communicates everything it needs to, I know next to nothing about website design, but as a consumer looking at the page, I like what I see.

 

Yeah I use the full version. :thumbup:

 

Thanks.

[Grasle]

To me the yellow is very fragile, and the use of yellow (whether or not it is permanent) on the fire hydrant "block" clashes with it all.

[ehlanatorne]

off topic: would you happen to have any advice/tutorials for terragen 2? i've got the free version, just to have a practice with for now, but I will buy the full version eventually.

 

 

OT: is the big black border at the top going to be that big? it looks a little empty.

[Nadril]

off topic: would you happen to have any advice/tutorials for terragen 2? i've got the free version, just to have a practice with for now, but I will buy the full version eventually.

 

 

OT: is the big black border at the top going to be that big? it looks a little empty.

 

I've only used Terragen 2 a few times (used Terragen 1 a lot) so I don't have a ton of advice for you really. If you do end up posting a landscape in a thread though I can critique.

 

 

And I'll probably move everything upward when I code the side.

[Shiny]

I really love your new portfolio design. To be honest, I think the daring splash of yellow really makes it interesting. Not many websites use yellow, and some that do fail. I love the splash, it looks really great.

 

Not much criticism I can really offer. Looks good to me!