Topic: Portfolio Site Mockup

Hey guys, I have finally found some time to start designing my portfolio site. This will be a one page site. I think something needs to be done with the portfolio images, but I don't know what. Any and all comments will be appreciated!

Portfolio Design

Re: Portfolio Site Mockup

I like the look, but I think instead of using those images for the portfolio area, I would use larger images with the actual look of the website. You know like showing an image of a Safari browser with the page loaded. Another cool thing might be a description of the work and what you did as well. Other than that I think your going in the right direction. Keep pushing brotha!

Re: Portfolio Site Mockup

Ah, I do like the idea of the screenshots instead of just the logo. The description was going to be loaded under a jQuery animation.

Re: Portfolio Site Mockup

The layout works.  Simple and straightforward.

I'd bring down the contrast some...the bright red on the dark background is head-spinning, as well as the white text on the red background.  I'd also make the portfolio items uniform in size (such as each image being 350x80 pixels).

Will there be any links besides the portfolio items?  Will there be some kind of footer?

Re: Portfolio Site Mockup

So, I got to work on my design some more tonight, and here is what I came up with. I think I like the individual boxes better, but some people said that it was too much. I changed the boxes color, and I haven't changed the portfolio section.

BroChris, How I am I looking now? The way the portfolio section will work is that you will click on each image and more information about that site will slide in.

The footer will be just like the header, going from the pattern to the black.

Thanks for all those comments guys! I appreciate them!

Design 2

EDIT: Ok, I really don't like the one box. I think I will be going back to the separate boxes. Will post a new mockup when I fix the portfolio part.

Last edited by DESTOROYER (2008-11-19 20:45:11)

Re: Portfolio Site Mockup

That's way better than the first one, you're on the right track now.

I think there's too much space under your name in the header, bring up the content a bit.  You want people to be able to see more information without having to scroll - but don't make it too cramped up there either.

The main thing that bothers me is the sharp corners and the fairly large drop shadow on the content area.  It feels like a sheet of paper floating a few inches above the background right now.  Maybe take the shadow down so that it doesn't spread so far, something like 5-8px in Photoshop perhaps.  Maybe try some rounded corners, or forget that all together and take the box up all the way to the top so that you don't see any corners.  Or use some kind of fancy corner design, something other than square or rounded - might be worth it just to try something different here.

Padding! Some of your portfolio items are touching the left side, and some are only about 2px off of it. These should all match, and should probably have a bit more breathing room form the side of the container.

Also, not sure it's necessary to state your full birthday, haha.  That sentence just reads a bit strange to me.

Last thought is an idea I had, what if the left half (the portfolio) was a slightly different background color to make it look like two columns?  Just a very subtle color change.  Not sure how this will look, just an idea.

It's coming along great!

Re: Portfolio Site Mockup

Alright, so the one box has grown on me.

I also got rid a part of the 2 columns because there just wasn't enough room for the portfolio.

I took off the drop shadow entirely, but I am still not satisfied with the corners, or the whole edge of the content box. I would like to add some type of grungy border around it. I don't know if that makes sense or not, but I think it would bring the grungy feel into the site just enough. Only problem is I have no idea where to begin on adding the grungy stuff. I have tried doing a stroke around the site with a pattern, but it looks horrible.

Any ideas?

Design 3

Re: Portfolio Site Mockup

I don't think it needs any grunge elements, and I think the current design/layout works fine without them. The art deco pattern and the grunge font seem to lean towards the grunge design themse, so I'm not sure it needs much else.  Don't go adding superfluous design elements just because.  On the other hand, experiment with it a bit more and it may work itself in there just fine.

Are you going to try and do a single page design?  If so, why have the navigation at the top?  If you are going for a multi-page design, keep the nav where it is, and maybe try adding a tab that blends into the content box only on the current tab.

Smaller portfolio images?  I think these are too big right now.  Try a smaller image so you can see more at a time.  I'm assuming the user will be able to click on these to get more info and visit the site?

Re: Portfolio Site Mockup

Alright, I will see what I can do.

Yes, I am going to do a one page design. I thought maybe that it should have some anchors for it because the portfolio, but I agree with you now.

I have been trying to figure out how to present the portfolio section. Any ideas?

Re: Portfolio Site Mockup

Just an idea (since that's what you asked for, haha) Do some slightly smaller preview images, make them more of a teaser rather than the upper 1/3rd of each site.  Maybe have a modal window pop open when you click it that would have your copy and a link to the site, and maybe more screenshots there.  This saves some clutter by not displaying text unless they click on one.

It might be a better idea to start with the "about me" section rather than just jump straight into the portfolio. Any other ideas here some anyone else?

Also, i know it's just a mock-up at this point, but is the content going to reach the bottom of the page?  I think it should either do that, or have some reason for it not to, like your copyright or other info down there.

Re: Portfolio Site Mockup

Lol, thanks for the idea. See, I thought about that, but was trying to come up with something a bit more unique. Should I go back the the way it was in the first design? I would have a lot of space in those images, and I have no idea what to put there. Maybe go back to the column design, but still with the one box. Or maybe the same box, with a really small screenshot in it? I am just trying to think, and it is really going no where!

Well, the footer is supposed to be there, but I had screwed up the layering of it. The footer image is as same as the header, a gradient that fades from transparent to black. I wasn't planning on having anything there, but maybe copyright info, and a link to my blog (another site, another design)? Or let the content run onto the footer image?

I also think I am going to leave the grungy border off, and just go with the plain box. Thought about it for a while, and decided that it would take the clean look away too much. I like clean.

Last edited by DESTOROYER (2008-11-26 21:02:23)