Portfolio Website - Help / Crit Created 14 years ago2010-03-28 10:10:26 UTC by Habboi

Before I start I want to stress that my coding ability especially website design is lacking and would love some help putting a site together. This can be either a helpful link to a tutorial or physically helping.

Now last night I made this wip below and I need advice on everything! Rip it apart, tell me what is missing, what sucks and whether you have better ideas. I was already told by a friend that he doesn't like the font so by all means if you don't either then share some with me. I also made this as 1280x768 but is that correct? I think I have to do that "slicing method" that I've never used before.

Don't be gentle. This is just the front page anyway.Another edit following advice of user 01.(Temporary pictures anyway)

So far the crits I have received are:

1. Font doesn't suit background.

2. Links need to be darker or have a banner behind them to stand out.

3. Background needs to be darker, looks washed out and reminds user of tellytubbies. (I'm starting to agree, a lot of portfolio websites seem darker which makes the pictures stand out.)

4. Picture borders need to be darker, perhaps black to stand out.

5. Ditch the slice method and go for a HTML site.

Because I assume the "Resume" section is going to be straight text, you might surround all the content with a white box background. You would still need to give the picture tiles there a darker border, but when you get around to putting in a resume, you'll be able to read it.

The white background thing will also help to save people's eyes from the disrupting star-burst pattern in the back.

Right I see what you mean. One guy told me that this method of slicing isn't good for resolutions and coding it in HTML will still mean the background will not tile therefore I've taken the star-burst out but I need to know if this design is on the right track as well.

It's nice and tidy, but it still looks somehow...cheap. This is only my point of view, but with a darker background color it may look more professional. If your sticking with this color, I think you should have a like 1 or 2px border for the whole site - like 5 px from the browser window - or as Grim said, surround the content (below the menu) with a white background.

The site is really cool, you just need to make every fraction of it stand out.

I think you might be interested in this:

http://meyerweb.com/eric/css/edge/complexspiral/demo.html

It might be useful if you need text (like in that site), you can simulate a semitransparent background for text areas instead of a plain background. I think it looks pretty good. That way you can keep the background you had in the first image if you like it - with only minor adjustments.

Looks useful if only I could figure out how to implement it D: Not much of a coder you see.

I've been posting on Interlopers as well and they suggested some links that explain how to make a good portfolio and I have since changed mine a little to meet those requirements:

Even if you couldn't have properly tiled the diagonal rays background you had before, I'd still try using it - it kind of fit. Just make it big enough and fade out the edges, so it cuts off in a more natural way.

http://www.upload.habboi.co.uk/portfolio_design_user_01.png - this was the best-looking one so far imo, the background opacity just needs to be toned down.

If you're sticking to the most recent one though, I'd suggest making the content area the same width as the menu bar. Also, try giving the menu the same drop shadow effect. Would give it a more balanced look.

See how the contact link looks down at the bottom of the page, just above your copyright. Also, play with some gradients/textures on the element backgrounds to give the site more depth. That or some graphics. Looks really bland at the moment.

You could use an SVG image for the ray background, then the rays can go on forever. I don't think Firefox can use SVG images as backgrounds but it does support CSS background gradients. IE9 supports SVG but I don't know about SVG images as backgrounds, I haven't been able to install the test version because it requires Windows Vista or 7.

So basically you're saying that he should use a feature that doesn't exist yet. Nice.

Last time I checked, SVG backgrounds worked in Chrome and Safari. I think it works in Opera as well.
Edit: Works in Chrome and Opera, not in Safari. Safari however supports (non-standard) CSS background gradients.

When I get back from my programming class, I'll write a demo page with endless rays working in "all" browsers except IE. I don't care if Habboi uses it or not, I just think it's fun messing with SVG, a language I wish I knew more of. Also I have to admit I think it's great fun proving a fellow programmer wrong.

Yeah that'd be nice to see working. Alright Daubster I'll get to work on those suggestions and I've agreed since last night when Killa said it looked cheap and it is probably because it is simple Photoshop effects so I'll mess with some more visual stuff but not too much.

You could try a tiled linear gradient. They look fairly nice, and are usually not too big, because you only need 1 pixel on the side/top (depending on the direction) for it to work. Of course, the site looks good and neat in the last picture, and if that's the style you want, then keep at that.

I've put the whirls back for now but used a gradient although it needs work and I used a middle one so that it can be faded along the edges.

Ok so I did some changes today but I didn't do much as I have work to do but these are changes based on what people have said.I'm gonna work on the banner and grey bit more to make them more fancy sometime later.

Looks much better. I'd play around with some graphics in the actual design now. Something non-intrusive would definitely work.

Also, play around with the menu. See how it looks with, & without the border/container. Play with font colours. It's all about poking around with details like that until you find something that works best.
Other than that - it's a decent start.

When you say non-intrusive what do you have in mind? I'll play around with the boxes as you said and see what I discover.

Non-intrusive as in wouldn't take away too much attention from your name or the content in the site. More of a decoration instead of a key element.

Alrighty well I've done some minor edits again tonight but nothing special. I've decided to upload the PSD in case anyone with better artistic ability wants to mess around with it:

http://www.upload.habboi.co.uk/portfolio.rar

I won't criticize on your specific design, because I suck at design, but I will recommend you a few sites to inspire you - just see what elements and ideas you like and see if you can incorporate them into your own site. Just remember not to go overboard with graphics and style - always make sure the focus of the page is on the content itself.

http://cssbeauty.com/gallery/
http://www.bestwebgallery.com
http://www.unmatchedstyle.com/
http://www.csszengarden.com

Cheers Zombie. I needed inspiration.

First of all, you want to make a layout that is unique, one that will capture the employer.. dont just copy it, the emploer will be like, "ah seen that shit before, click, close"

Habboi, the dropshadows got to be changed.. if an employer looked at that, he'd be like, "wow, photoshop filters are used everywhere, looks like a 2 minute job, I could even do it!"

you can use the drop shadow, Im just saying, make it face something else other that 30 degrees, and change the opacity and color at least.

Over all the layout is looking very good.. I like it.

Also your title

"Environment Modeller"

Seeing as everything is modelled you kinda narrowed it down too much, instead try to change it to "Level Designer" yeah like I said environment modeller sounds to broad..

Edit;
Another thing, try to refrain from posting levels of HL2 that you've made unless your applying at Valve only. The main thing employers look at is something you created, and something new, so just pulling textures off google and editing them don't count, instead depending on the art style used, go out and snap your own pictures to edit, or paint them in photoshop.

Edit;
Good example;

Here is a kid that did the Game Garage Incubator program here in Charlottetown;
http://curtisjcollier.com/Resume.html

First of all, you want to make a layout that is unique, one that will capture the employer.. dont just copy it, the emploer will be like, "ah seen that shit before, click, close"

I agree to some extent but too unique means a site that is difficult to navigate because it is so unique they'll be like "What."

Habboi, the dropshadows got to be changed.. if an employer looked at that, he'd be like, "wow, photoshop filters are used everywhere, looks like a 2 minute job, I could even do it!"

But I like 30 degrees @_@ Well to be fair I adjusted it and I think it's 28 degrees XD

Well instead of drop shadow what else do you suggest? I uploaded the PSD for people to mess with so if you have creativity flowing through you then that'd be awesome.

"Environment Modeller"

Seeing as everything is modelled you kinda narrowed it down too much, instead try to change it to "Level Designer" yeah like I said environment modeller sounds to broad..

I actually got that title from a 2010 slideshow by Naughty Dog on how to make a good portfolio. It was informative and very funny, makes me wanna work there now. Anyway they actually went into each role because it said you must state who you want to be and one of them was Env Modeler (with one L but I seriously think that's American because both come up fine).

Level Designers technically plan the layouts, do scripting and so on, no artsy stuff although I must stress no one company is the same with their roles. "Env modellers" or as I prefer "Prop Modellers" vary but really it's making the pretty models that make up the world and place on top of the level designers boring planned out level.

Another thing, try to refrain from posting levels of HL2 that you've made unless your applying at Valve only.

I stated on my first post that they were temporary pictures although technically that's old and it was meant for these pics as well. Most of those pics are student stuff I've done over the three years, five of them can be combined into one and others are not even going to be on the front page.

Thanks for the tips, if you have any ideas for drop shadows or visually because I'm stumped now and think it's simple, displays the work and so on. I'll need to design the other pages soon once I confirm this design is alright.

Edit:

Alright so I updated it a little more and a user over at Interlopers has offered to attempt to code it so I'll be waiting on him for the next few days hopefully and then I'll get back to you

Mmmm I like the latest iteration, looks pretty complete to me you don't want to over complicate it.

Except I don't really like the font you used for your email address.