My new site layout.

3D-j

Hello All,

I have recently started to take a new direction with my portfolio site design because I was getting bad feedback. I wanted to get some more opinions and JesseMoody has been stressing the fact that this is my best resource. Here are some of my ideas, nothing is set in stone. Jesse mentioned that I might want to take out the contact section of the site and shrink the header to allow more room for the artwork.

I would also like the links and images to open in a new window but then again I don't because there are those that do not enjoy pop ups. I would use Lightbox but most people have trouble with it loading quickly so I am laying that to rest. All of the thumbnails will be loaded on the front page with my contact information at the top and listing the sections below with thumbnails to follow. These thumbnails will only contain my best projects. I've heard not to put any WIP's on the site from some of my instructors. If you guys don't think so I am all ears.

I will be updating this as much as I can through out the week so please check back. I should have a working alpha within the next few days.

Each person will be able to download my portfolio for better viewing as well as my resume and demo reel (once it is complete).


The size of the site is 800 x 600 for the actual working area of the site: 720 x 480 web standard.

Everything will be saved for web as a 24bit .png for optimized browsing. Everything is compiled in Dreamweaver using CSS and HTML.

Any tips and crits greatly appreciated.

My old website address is:

www.3d-j.net

I would also be forwarding the url to my new one once I purchase it www.joshmarlar.com.

coldwolf

You should listen to JesseMoody, he's got some good ideas there. That header is way too big and there really is no need for a contact section. Instead, always have your name and email address available on every page of your site.

That menu bar makes the text/links too difficult to see--I would recommend making buttons for the links there, which you can do by simply copying the bar as it is but color it blue (blue is the most pleasing color to the human eye).

One of the best ways to demo your work is to give each piece its own page. This way, you have enough room to show off the renders, wires and flats but it will still load quickly enough. Protip: PNG isn't always a good choice for images. JPGs actually work better in most cases, especially renders but not wires--it's the way it compresses the data. Just experiment yourself.

The people looking at your site (a graphics lead or someone else from a game studio) will have a screen resolution of at least 1024x768--use it.

WIPs are good to have--they show you're always chugging away at new works, and those who pay attention will notice how fast you are. Just don't show WIPs that are too early--they still have to show off some skill.

You can click on my folio link below here for an example of what I'm talking about, so you can get a feel for it and see if it's for you. Good luck.

Jesse Moody

Oh yeah...LOSE THE CONCRETE GAMES ART TEST!!!!

I have seen it from way too many people and I am not the only person. Everyone has done that test and most of the time they weren't even given the test from Concrete.

You want to set yourself apart from the crowd. Don't forget that. If you show something that 100 other people are showing then you are automatically putting yourself up against them. Not a bad idea if you are a total bad ass but well...you know what I mean.

Like I said to you on chat. Contact info on all your pages.

Brand yourself man. You are selling yourself and your art to a studio or the person looking at your site. Make your name stick to their tongues. Look at my site. While it's not the most innovative and crazy design it works well for me.

My address and contact info is all at the top on every page no matter what people are looking at.(*except for a wip page)

Add your name and email addy to every render you have. If someone downloads your stuff it's hard to tell who it belongs to if your name isn't on it.

Don't put a huge watermark type thing but a simple border is good.

If you do decide to keep the contact me page. Keep things like im info that you use for your work on there.

I am glad to finally see you put it up on here to be "reviewed" I can't stress that enough to everyone that attends AI and how much it will improve them as an artist and still no one listens...

Waiting to see what you come up with.

3D-j

Thanks both of you. I am working on the site right now. I am going to try to have the layout updated before I goto sleep. I like the blue hue idea where the links are and I may test the pop up window to see if you guys like the idea or not. I have been wanting to lose that damn test anyways. A couple instructors suggested it and I really didn't like it in the first place. I've been working on some props that show some normal map, ao, dirt, etc. which I'll add to the site once I am finished. What do you guys think about me putting a work sample within the header? or should I still reduce it?

3D-j

Here is more fuel for the fire.

coldwolf

The variation is a great touch. You've got something interesting to look at to keep people there but you also managed to keep things easy on the eyes and not too distracting, so keep that up.

You still need to change the color of the links so that they stand out more. Flat shade their backgrounds or something, anything that will distinguish them from the rest of the header. But like I said, nothing distracting, so another slight shade of blue would do it.

You're doing well, nice job already.

Spark

Hey 3d-j, I agree that you need to make sure that your contact info and your real name appears somewhere within your site. Though I am not sure about doing it on every single page like jessemoody suggested ( no offense jesse ). Maybe it is the way you have it laid out, where your name is so large and bold it looks like your selling your name rather then your art. If you have your site name, such as you will with www.joshmarlar.com and have a page where you provide your resume and contact info, I think that if they are interested in your work they will figure out how to find your resume and contact page:) Just my two cents though, so if you do go with your name and contact info on each page, then just reduce the size, by like 80%:)

Spark

Jesse Moody

no offense good sir. Just suggestions. Maybe every page is a bit much.

heres a quick paint over of more along the lines of what i meant.

3D-j

I had the idea to keep the contact info on the same page as the art at the top. I also will have the contact information on my resume with my name, etc. I changed the text to white and gave the text a 1px stroke to make it stand out a little better. I also added a preview of what the thumbnails will look light. Hopefully the icon doesn't seem like it detracts from the art. I didn't think it did but I am all ears.

Ged

jesse's suggestions were good ones, the ordering of the menu on his suggestion is more ituitive and the titles on the top banner make sense although the drop shadow etc are up to the artists descretion.

3D-j

Yeah, I've been taking a lot of crits from Jesse and have been incorperating them within the site. I like how I have the contact info and once I get home I'll update the layout once again with my name in the header. Then i'll start writing the code. Thanks everyone, keep the crits coming.

Thanks,
Josh

Jesse Moody

hmm...I meant to say this a while ago when we were talking about your logo. I have seen it before and today while having a family bbq I remembered where.

It was on my grille.

I know yours has the little dot added but they really are too close for my tastes.

3D-j

Haha, here is an update.

indian_boy

its really sweet.
it looks like them buttons is rollover buttons, and some glass slider opens up on mouse-over? just wondering.
is this all photoshop and html coding, or are u using some other software? watever it is, its really sweet looking.

oh, and i was wondering, u could have ur contact info [ie. email and ph # on the blue bar at the bottom of the page. or maybe the chances of some1 scrolling all the way down are too low to make that viable.

its nice to see so many portfolios pimped. it'll help n00bs when its time to make our own !

3D-j

Yeah, I am coding it with CSS and HTML. Maybe some Javascript. As for the buttons I really haven't thought of any mouse overs. Maybe in the future when I have time for flash.

I also just took the logo out of the header. I am still playing with the way I want the header to look with the text on it. I like it but then again I don't. Im going to get back to trying different things.

Jesse Moody

no need to use flash with mouse overs. if you are using dreamweaver its easy to do. it basically just swaps images when you roll over them. Thats what I did on my site.

It can be done with text as well.
I am assuming that the title area and header all the way to where the blue meets the dark gray will not move and will be constant on the screen.

Thats good.

Still though I would try to get your contact info up top some how or create a footer that is always on display as well that has it.

I don't know. It's more of a personal preference for me I guess.

Spark

Yeah, for me having that large type of here is my info in the same space as your links to your art are seriously distracting. I think how Jesse put it up in your top bar, so it's visible, but not competiting with your work is a good way to go. Having seen alot of portfolio's, the less busy it is, and the easier it is to navigate and see your work... is always the better way to go.

Spark

P.S: And you might want to rethink the BBQ logo:)

Ott

Honestly, content is going to take you a lot further than whether or not you had a contact page, or if your phone number was printed too small or too big. Right now you have some content issues that you should adjust as well. I know you are here asking about your site layout, but you really need to make some adjustments to the content that is being displayed.

Is your content easy to find? Is it neatly presented? That's the meat and cheese of all you really need to express in your website. The rest of it is just fluff.

- See through wireframes = bad
- Turn the max filter off on your renders (see my previous posts if you dont know how to do this)
- The actual render space on your sheets are too small and there is way too much white. You obviously look like you have a good grasp on the modeling, but you use so much of your sheet's space on the concept that it's hard to see what you did with the modeling.
- White backgrounds on your renders / sheets is a bad idea.
- Unless your normal maps are badass, or you used a high-res projection, what's the point in putting an unrecognizable blue-ish purple square on your sheets?
- Demo Reel = dead link...remove it.

bryann

I find the glossy overlay on everything rather distracting at that strength.

indian_boy

its nice to see the new title for this thread !

and yeah, u just need to do simple rollovers. well 'simple' [i dunno html for the life of me]. but ye, even without those, it'll be cool. i really like it

3D-j

Ott-
There are still design aspects that need to be attended to and then ill post my work so you guys can crit it. This thread is for the site, not for the layout design of my work at the moment. I totally see where you are coming from with the portfolio page layouts but there will be another thread for that type of stuff. As for the dead link, I will remove it once I have the new site coded. I am trying to effectivly shrink the amount of browsing. I will probably will not show any of the normal maps in my portfolio created in photoshop. I have heard the high to low is of more importance and I believe that. All of my props in my portfolio will be from high to low from now on. Each project will open within its own page showing much larger renders and textures than the ones on the old site.

Jesse-
If I really want to get into doing fancy mouse overs and things i'll save it for the flash based site. For now my main concentration is making it fully functional and ill make it fancy later. Appreciate the tip though. I knew that I could still do it with dreamweaver or any of the web languages and that touch can still be added later. Again, Thanks keep 'em coming.

I am going to update the layout once more and then start coding tonight once I get home from work.

Jesse Moody

Yeah but doing the fancy things in flash that could be done with easy html makes it slower. people have to have flash and all that jazz and it's more of a pain in my opinion.

your header is still a little tough to read and honestly man the bbq logo is killing it for me after knowing where it is from or how similiar they both are.

[ QUOTE ]
I find the glossy overlay on everything rather distracting at that strength.

[/ QUOTE ]

3D-j

Yeah dude, I know. The new version doesn't have it. I **** canned it. I just want to make it convenient and simple. I'll also fool with the gloss. Just an overlay that ill lower the opacity on.

pliang

This looks good, I think a simple flash over the buttons would be enough for presentation value, I'd think it'd be better to stick the contact info and name on each image though.

One thing though, that little symbol logo kinda looks like a sac, you might wanna change it a bit, maybe I'm just too interpretive.

3D-j

Ha ha, it's a charbroil nut-sack logo. I might just keep it on there now, j.k...

Motz

I've been a professional web designer/developer/engineer for several years, so.. Well I'm going to be brutally honest.

The gloss is tacky and detracts attention from the content. The menu font on the gradient/gloss headache of a bar is difficult to read because of previously mentioned ridiculous gradient/gloss fill. The white font on light blue is difficult to read on the bar. There are simply too many bars. You have 5 sections the person is looking at instead of just 2. I would frankly omit including such a large chunk of your art content in the header bar. You could probably get a way with a 1/5th size focus piece. As it is now, its just more random distraction without any discernible function. People will see art thumbnails on that page, IF you get rid of that ridiculous gloss.

The logo does'nt really mean anything, and its very similar to a grill manufacturer which will kind of make you look like a joke to a reviewer who recognizes it. The font and spacing of your name vs the title looks plain bad. I understand what you are going for, but it does not look etched into that gloss. You need to focus on quickly accessible and easy to navigate with your eyes. The contact information styling is perfection, great colors as well.

Your art should be the focus, and showing that you are not skilled in web design will only hurt you. No one cares if it's css + xhtml either, and again just detracts from the site.

I don't have time to run a mock up for you but take a look at some more simple site that just get you straight to the art:

http://www.randallwhiteis.com/ (simple straight to the art)
http://www.gausswerks.com/ (same with added character)
http://www.skankerzero.com/ (big print, easy to read)
http://www.jelmerboskma.com/ (has focus art in logo header)

3D-j

Ok, I took some of Motz's advice and did a huge makeover on the overdone stuff. It kind of grew on me and made me dislike the gloss to. I will remove the demo reel link soon because it will be out of service for awhile. Should I add a contact page or keep it the way I have it?

Jesse Moody

Much nicer on my eyes...

Still a few things... the links I would put your Portfolio out front as the first link.

get rid of the css+xhtml at the bottom.

Much easier on the eyes.

3D-j

I am almost done coding the site. I have it forwarded to the new layout if any of you feel the need to take a look at it. It should be forwarded by now. Let me know if you have any issues.

oobersli

lol, in the time you all have been taking to talk about headers, links, fancy flash you could have made 1-2 new environments. Which would be more beneficial. Put your name, contact and simple image links to your work and presto. Let your work sell yourself, not fancy css or color schemes. Unless ur lookin to get hired as a web designer :P

The Keen

saaaayyyy, I do believe I recognize that prototyping project, you guys did fantastic work!

3D-j

From getting bad feedback from the old site I created this thread to help myself out. Its always nice to have a good looking site thats efficient and simple to use. I could have made a word press page but I feel that I wanted to make it a little more formal and professional. As for the 1 or 2 environments, I wouldn't of had a good site to show those projects off with but now I will. I believe this thread can help other new artists to.

3D-j

Hey, thanks Keen, we worked are butts off on it.

Motz

Wow, completely spot on. It looks 100 fold better now, easy to navigate, the art is actually noticeable and comes through much more crisp without the gloss. The movie indication overlay on the thumbnail is excellent, easily readable and clean.

Great work!

Jesse Moody

on your video the title says "Eye fo ...." might want to fix the fo to of...

But yeah now just being nitpicky...

3D-j

I'm glad its getting there. I did a ton of coding today. Now I have been going back to my page layouts off of the old site to change the designs for the new site. I am all done with my thumbnails and should be adding them tomorrow as well as links to the larger images. I still have not decided on whether or not I am going to have them load in a new window or just open a new centered page with the image on it. Continue to check the site to see if any updates have been done. I am also having small issues with transparency within IE. Firefox is handling the site like a champ. Ill post when I make another update. I am signing off for the night.

Jesse - I'll see what I can do with the other site to change the name on the pop-up window.

Thanks again everyone,

Josh

3D-j

Alright, I just made a huge update to the site. I have everything linked and added for now. I am going to add a WIP to the environments sections once I get couple renders and the layout finished. I also still need to finish my new resume for download. The PDF of my portfolio is very nice addition and it opens extremely fast.