Portfolio Design

[Tenbeta]

Hey guys. Could use an opinion on my portfolio design. :)

http://fc04.deviantart.net/fs70/f/2010/051/7/f/7f64522539288c8e466b0a5124667c61.png


http://fc09.deviantart.net/fs70/f/2010/051/0/c/FINISHED___Portfolio_Page_by_tenbeta.png

[kk.]

Hey ;)

definitely prefer the first. Try reducing the size of the email icon

on the second, where you have the banners, extend it sideways, and then extend the grey with a rectangle and rearrange the icons into a square

[Tenbeta]

Hey ;)

definitely prefer the first. Try reducing the size of the email icon

on the second, where you have the banners, extend it sideways, and then extend the grey with a rectangle and rearrange the icons into a square

Nice one Josh.
Both pages will be on the same website, just different views haha!

Will reduce the e-mail icon, had it all ruled up but it does seem a bit too big!
Also, will try the square idea now and will post updates :)!

[kk.]

Oh right lol. It was cus both had home highlighted :P

as for the email, it's becusw it's both wide and tall, so a lot of White, whereas on the others, the pens small, and the page is thin

[Tenbeta]

Yeah oops lol! Here we go:


http://i49.tinypic.com/2emmlci.png

http://i47.tinypic.com/213500p.png

[kk.]

Looking better, make the banner and icons go all th way across too. So like extend the banner wider really. Think they'll be done then,

btw, the d+d forums pretty dead nowadays,
just so you know lol

[Tenbeta]

Looking better, make the banner and icons go all th way across too. So like extend the banner wider really. Think they'll be done then,

btw, the d+d forums pretty dead nowadays,
just so you know lol

Tried it, looks really empty haha.

And I can see lol!

[Dentafrice]

I like the first one.

I'm not sure if it's just the screenshot, but it looks a little bit out of alignment.

I really like your header, and the navigation so props for that! One thing I think that is out of place is the "My work..." "My life..." and "My e-mail..."

They look too close to edge for my liking.. maybe you could take and remove those, and just make it on hover.. the image of a pen, paper, and e-mail changes to the text, then back to the image when it goes away?

I just think the text is out of place.

Also the navigation on the bottom is a bit tacky. You don't need to have all your links in one place, twice.

Down there you could put some other information like a copyright, and maybe links to FAQs or something, or just some other pages that don't fit into your main navigation.

That just seems almost too repetitive in my opinion.

Just my $0.02.

[Tenbeta]

I like the first one.

I'm not sure if it's just the screenshot, but it looks a little bit out of alignment.

I really like your header, and the navigation so props for that! One thing I think that is out of place is the "My work..." "My life..." and "My e-mail..."

They look too close to edge for my liking.. maybe you could take and remove those, and just make it on hover.. the image of a pen, paper, and e-mail changes to the text, then back to the image when it goes away?

I just think the text is out of place.

Also the navigation on the bottom is a bit tacky. You don't need to have all your links in one place, twice.

Down there you could put some other information like a copyright, and maybe links to FAQs or something, or just some other pages that don't fit into your main navigation.

That just seems almost too repetitive in my opinion.

Just my $0.02.

I noticed the alignment issues hmm, maybe will look better coded. (If I can find someone. It doesn't seem to be my strong point!)

Thanks! Yeah, I keep reminding myself to shove the text up and left a bit but keep forgetting.

I love the idea for the image/text hover. Could have the text centered then I guess. Will incorporate that.

The bottom nav isn't permanent, I was considering removing it as I couldn't think of anything to go there. Although the FAW & T/S idea seems to be the best bet I suppose.

Thanks for the CC!

[kk.]

Still think you should do my idea ;D as in the fixed header and footer :P

[Tenbeta]

Still think you should do my idea ;D as in the fixed header and footer :P

I'm not grasping what you mean haha - That's sleep deprevation for you (:

[kk.]

I'll show you tomorrow. :P

[Dentafrice]

Uh oh, better not show him too much ;)

[Tenbeta]

Uh oh, better not show him too much ;)

Hahaha! I think I'll do the editing tomorrow methinks.

[Jebbo.]

Very good, i like them both!

[Tenbeta]

Very good, i like them both!

Thanks!

[Tenbeta]

As promised updates:

http://i47.tinypic.com/2cjbqf.png


Need to:

Edit Footer
Create page for normal text box (ie About Me)

[Johno]

I noticed the alignment issues hmm, maybe will look better coded. (If I can find someone. It doesn't seem to be my strong point!)

Thanks! Yeah, I keep reminding myself to shove the text up and left a bit but keep forgetting.

I love the idea for the image/text hover. Could have the text centered then I guess. Will incorporate that.

The bottom nav isn't permanent, I was considering removing it as I couldn't think of anything to go there. Although the FAW & T/S idea seems to be the best bet I suppose.

Thanks for the CC!
I do quite like it, I agree with all the suggestions made and I like the improvements.

About the coding side of things, I would suggest having a read here: http://carsonified.com/blog/uncategorized/5-good-reasons-why-designers-should-code/

It's a pretty nice article and I'm not suggesting that you can't code - it just shows the benefits of why it is useful to be able to do both! :)

[Tenbeta]

I do quite like it, I agree with all the suggestions made and I like the improvements.

About the coding side of things, I would suggest having a read here: http://carsonified.com/blog/uncategorized/5-good-reasons-why-designers-should-code/

It's a pretty nice article and I'm not suggesting that you can't code - it just shows the benefits of why it is useful to be able to do both! :)

Thanks :D

Yeah, I've stated to kk. over MSN that being able to code and design will get you further. I'm pretty booksmart on coding, just never able to put it into practice!

I will have a go at coding, my heads just frying about how I'm going to do the effects and image navs haha.

Say, will I be able to class nav stylings? As for the 3 boxes I'd have to have a seperate style for the images...

So say (Forgot if these are the correct ones hahah!)



.boxes a:link { }
.boxes a:active { }
.boxes a:hover { }
.boxes a:visited { }


My other concerns is for the content boxes. Rounded corners and opacity haha, any advice on how to do these? :P

[kk.]

Don't ou just do

.div:hover

? Think that worked for me lol. I dunno tho, havnt code properly in ages :P

[Tenbeta]

Don't ou just do

.div:hover

? Think that worked for me lol. I dunno tho, havnt code properly in ages :P

Lots of slicing at the moment, will have a try (:

Main concern is the opacity, round corners and the headers hahah. So much effort (yn)

[kk.]

You don't really need opacity do you? I mean yh the backgrounds a pattern but it's random so it's alright?

[Tenbeta]

You don't really need opacity do you? I mean yh the backgrounds a pattern but it's random so it's alright?

So just select say a 50x50 section of the low opacity content box and use it as background repeat x-y? :P
Hm, much easier! Just the rounded corners. :(

And oh my God, slicing is worse than coding :(!

[iDenning]

Looking good, good luck on the coding!

[Tenbeta]

Looking good, good luck on the coding!

www.tenbeta.com/coded

So many errors... I feel like crying :(

[iDenning]

www.tenbeta.com/coded (http://www.tenbeta.com/coded)

So many errors... I feel like crying :(
Lol

Just incase you dont know, its abit big :P

Ask around, im sure someone will code it for free !

[Tenbeta]

Lol

Just incase you dont know, its abit big :P

Ask around, im sure someone will code it for free !

It is haha!
I'll keep an eye out (: Would be easier for them to contact me as Ive got some client work going on. Although that sounds really bad, didn't mean it to LOL!

Would you reccomend anyone? (:

[[Oli]]

Nice design.

Keep in mind though, for future designs, when you draw a box with rounded corners, and then you want to make another box, say a wider one, for main content or something.
Well, don't just copy paste the first box and then make it wider, the angle of the corners on the wide box will be completely different then on the first box.

So, keep that in mind, always draw new boxes, dont copy paste, its only 5 seconds of extra time really :P.

Also, for your coded version, try and make a small, x-repeat'able background. (I'm on about the torn paper background)
Because at the moment, you have a very large image for the top and bottom bar, which takes a while to load.

(edit: for the torn paper, select a small bit > new file > (it should take the width&height automaticly from the copied bit from clipboard) > paste > dupplicate layer > flip horizontal > move it so the left border is right nexto the right border of the first bit > save, if u do that, it should be able to repeat on x-axis without errors)

Hope that helped a bit, either way, good luck!

[Tomm]

You can do rounded corners in css with:



-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

Change the px to the radius you set in photoshop and it will look the same. Works in all browsers apart from crappy IE (Inc. ie8).

Can also do opacity in CSS with:



filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;


That gives you 50% opacity, sure you can work out how to change it to other values :D

[kk.]

You can do rounded corners in css with:



-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

Change the px to the radius you set in photoshop and it will look the same. Works in all browsers apart from crappy IE (Inc. ie8).

Can also do opacity in CSS with:



filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;


That gives you 50% opacity, sure you can work out how to change it to other values :D
if it doesnt work in IE then whats the point? thats like over 30% :S

[Richie]

I love it ;) wd

[Tenbeta]

Sorry for a late bump.

Thanks for all the advice guys. Will take that in mind, will recode it very soon. :)

[Meti]

hey Josh.
I think it looks allright, however I'm not a fan of the transparent boxes. And i've never really liked them.
In this layout I don't think they fit in well. if you want transparent boxes, try with black, and change opacity. Or try removing it all :)

[Tenbeta]

Had a look with black & white low opacity aswell as just pure white boxes nothing seems better than the white level opacity I have now. Was a nuisance to get right so it isn't distracting, or out of place but not so obscure it's hard to see haha!

[Cyklops]

They both look brilliant to be honest, although if I have to make a choice, I would go for the first one. The only bit of advice that I would give you is to make the icons' a tad smaller.

- liam

[Tenbeta]

They both look brilliant to be honest, although if I have to make a choice, I would go for the first one. The only bit of advice that I would give you is to make the icons' a tad smaller.

- liam

Thanks! They're both for the same site, just different pages. I was lazy and didn't edit the nav haha!