Feedback needed on portfolio design :)

[maxwell]

Hey Everyone !

I figure I spend enough time on CSS-Tricks that I may as well join the forums and get involved ! Last night I finished my new design for my online portfolio and I could use some designers opinions on it – friends are only so honest ;)

The website right now isn’t ‘finished’ – just the overall design and shell are complete – but ya, the nav wont be going anywhere.

So yea, feedback would be stellar – Thankyou in advance !

Cheers,
Maxwell Ariss

Heres the link:
http://www.maxwellariss.com

[dcp3450]

wow! nice job!

Couple suggestions. On the "Recent Work" bar add an effect on hover there. Maybe have the image dark then "light up" when you hover over it. Also, make a form for the email. Unless a person uses outlook they have no way to email you.

Other than that, great work!

[maxwell]

Thank you !

Excellent suggestions, and I’m going to get on them stat ! I guess I never though about that mailto: link’s lack of use. I suppose in the past I would have used it with an actual address rather then just the words ’email me’ so good call on that one. Also I think the hover states will really help the site with having an interactive feel.

Cheers,

– Max

[Luminated]

I think your design skills are fabulous. Very polished. I do have some things that hit me right off the bat though, from an aesthetic perspective:

The navbar is cool, but it feels like it’s animated just for the sake of being animated. The icons kind of come from "nowhere" from that yellow band and it just feels like a bad clipping effect. The very top and bottom nav makes a lot more sense because of the shadow ‘slit’ that the icons come from and return to. Perhaps if you could implement a similar effect on the main nav as well? What if they popped up rather than rolled? Or, perhaps the menu could animate and slide horizontally rather than vertically?

The only other thing is the paint drips. They don’t seem to fit contextually within the site and for me they really ruin the clean lined, polished feel the site has. They are well done and abstract, but they also just feel like they are there for the sake of being there.

[friendofpugs]

Gotta agree with Lars. Things just don’t fit together. I’d try to do less, and do it well. First off, your logo treatment doesn’t jive with your tagline font. Nothing matches – where the does the heart come from? Also, your subnav, the effects are completely unexpected. And the paint drips – tone it down a notch or don’t do it at all.

Still, props for doing something different. Though I gotta say that working some code for IE 4 is too much – don’t waste your time!

[AshtonSanders]

I like all the different aspects of the site. I feel like exploring and seeing what other cool graphics I can find ;) I like the colors and the shading.

My thoughts:

1) Why is the facebook icon red? Because there’s no blue in the header? What about the footer? I would make it blue.
2) Lars mentioned the main nav icons coming out of no where. I’d make them come right out of the line below them. That way they also don’t have very far to go.

[KevinChappell]

This is pretty sweet. Great idea with the page loading!

The only thing I was going to point out was the need for overflow hidden on the nav bars but you got to that. Maybe animate the opacity of the image roll-overs?

Other than that this is pretty trick.

[maxwell]

@ Luminated

Thanks a lot ! I agree with you for the top-nav as far as the clipping goes, so I made the necessary changes so the icons come out of the white bar rather then just ‘no where’ which I think helps it a lot. I did make some adjustments on the paint drips and will look at them on and off over the next couple days to decide if I wanna keep them or not .. The reason they are there, is for those who know me its definitely my ‘style’ I guess you could say .. but I dunno ! haha

Thanks for your input !

@ AshtonSaunders

Good call ! I think I will change the footer facebook icon to blue – the top one is red to tie in the colours from the logo. And like I said above, good call on the nav – it looks way better your way

Thanks !!

@KevinChapelle

I’m glad you like it man ! I like the pre-loader too – it was simple to implement and helps tie the site together, as well as the obvious benefit of not having the viewer wait for some of the larger image elements to load. What do you mean with the hidden overflow? What I did was give them a z-index with a relative position – and that seemed to fix the problems I was having with it.
And yea I DO wanna animate the rollovers – I guess I just haven’t gotten around to it yet :P

Cheers !

SO

this site is really messing up in IE which is typical… but I still don’t know WHY? I thought my code was pretty solid on this so I don’t know…

If you think you can help, here is my style sheet: http://www.maxwellariss.com/styles.css

You guys are awesome, thanks for the ideas !

[KevinChappell]

well i guess the background image wouldnt effect the overflow anyways so i take that back.

but for the animated images you could do this:

Code:

$(“.article-header img”).hover(function() {
$(this).addClass(“hover”).stop() /* Add class of “hover”, then stop animation queue buildup*/
.animate({
opacity: ‘1’
}, 400); /* the speed of how fast/slow this hover animates */

} , function() {
$(this).removeClass(“hover”).stop() /* Remove the “hover” class , then stop animation queue buildup*/
.animate({
opacity: ‘.5’
}, 400);
});

although I would recommend using something other than a table for the article images, and adding a class only for stuff you want animated so you can target it better.

I forgot to mention you will want to throw this into your javascript because of IE’s lack of love for CSS opacity

Code:

$(“.article-header img”).css({ opacity: .5 });

[AshtonSanders]

Hey man. One last thought: I’d decrease the space between the icons here: http://www.maxwellariss.com/images/main … ntnews.png (and decrease the height).

That should make the wait time less on the animation.

[maxwell]

Hey, good call Ashton – I had adjusted it in my css but forgotten to adjust the images as well haha, thanks !

[AshtonSanders]

np man. Glad to help.

[Author]

Posts