Website Feedback - Programmer Portfolio

[DoorKnobHandle]

Hello there! Slowly but surely I'm closing in on my Computer Science degree, so I decided to start putting together a slim, minimal yet visually attractive website where I can put my portfolio and all the reasons why game developers should hire me. :p

Take a look and let me know what you think, what I could improve and so on. It's all pure HTML5 + CSS3, no scripts and only one image (the slider). That image is a placeholder and will be replaced with teaser shots from my portfolio projects. I'm looking for feedback on whether or not the page looks good to you, attractive, still business-okay and like a decent portfolio/blog place.

LINK: http://dkh.agser.me/portfolio/index.html

EDIT: And yes, I will be back when I have actual content. This is about layout/design/usability, not content quite yet!

[selmiak]

tilting the color of the keyboard/whateverdial in the header to the red of the font should look more consistent.
are these stock images or your own photographs? For a webdesigner having the key with the @ on it shows your internet affinity, maybe you have a similar key often needed for game/application coding, like the # for example. Subtle stuff

in the header some more meta information is always good:

Code: html

 <meta name="description" content="page description">
 <meta name="DC.Description" content="page description">

this is most of the time shown under search engine results. Replace page description with a compact summary of the page.

[DoorKnobHandle]

Thanks for the feedback!

tilting the color of the keyboard/whateverdial in the header to the red of the font should look more consistent.
are these stock images or your own photographs? For a webdesigner having the key with the @ on it shows your internet affinity, maybe you have a similar key often needed for game/application coding, like the # for example. Subtle stuff

That image is a placeholder and will be replaced with teaser shots from my portfolio projects.

:p

in the header some more meta information is always good:

Code: html

 <meta name="description" content="page description">
 <meta name="DC.Description" content="page description">

this is
most of the time shown under search engine results. Replace page description with a compact summary of the page.

Yeah, some more meta info would be a good idea. As I said, I'm focusing on the look/layout/feel first, for now, but it's still a good call.

Anything else?

[kaput]

Hi DoorKnobHandle!

I'd change the crimson/ red to the blue colour displayed on the keys and, maybe instead of having the general text cover the whole screen separate it into a left column and have sub links in a column to the right (so it looks tidier). What would it look like if the background was darker, too?

Just my two rupees.

Edit: Or... You could incorporate a lot of white space? Less is more at the best of times. A lot of sites for professionals tend to trend on the white minimalist side with use of only sans serif fonts. Choosing one colour and incorporating it through out the site in different tones. Food for thought.

Source(s): I'm a graphic designer.

[Problem]

I like it. The layout looks nice and clean, and everything is easily accessible. The only thing I would change is the width of the text. As it is now, your line length is more than 150 characters, way too much to be comfortable to read.

[Darth Mandarb]

A fully functional design!

• The navigation is easily identified
• The header is clearly defined (stating who/what you are)
• content area is obvious

Some critiques:

• You have the over-all width set to 1024px (984px in the content area with left/right padding of 20px).  This will cause a problem for those running at 1024x768 resolution (which there are still a lot of people using!).  The vertical scrollbar will make the content width overflow on the sides and you'll get the horizontal scrollbar as well.
• The color for your name in the header feels off to me (too dark).  Maybe if it were white and the '// game programmer' was a light shade of grey?
• I've never been a fan of the placement of the name/logo (bottom-right corner) like that but it's popular with 'tech' type sites so while I might suggest playing with that placement I think, in the end, it's fine where it is!
• The border-radius that you've used feels a tad too much!  Maybe cut that back to 3px or 4px?  I've just been getting a sense lately the really rounded designs are going 'out of vogue'
• Also, on the border-radius; CSS3 is, sadly, still not widely adopted so you should probably use the vendor prefixes in your CSS (such as -webkit-, -moz-, etc) to get as much cross-browser compatibility as possible (with the box-shadow declarations as well)
• The footer text (on my screens) is VERY small.  It's not a big deal though as most visitors don't even read what's in the footer!

Okay, I'm done!!

[DoorKnobHandle]

I'd change the crimson/ red to the blue colour displayed on the keys and, maybe instead of having the general text cover the whole screen separate it into a left column and have sub links in a column to the right (so it looks tidier). What would it look like if the background was darker, too?

Good thinking but this depends on the images I end up putting there, as I said, it'll be screenshots of my projects instead of the stock photos you see right now. But I will keep it in mind for when I replace the images.

You could incorporate a lot of white space? Less is more at the best of times. A lot of sites for professionals tend to trend on the white minimalist side with use of only sans serif fonts. Choosing one colour and incorporating it through out the site in different tones. Food for thought.

Hmm, not sure if that would be better than what I have right now. I feel it's already very minimalistic and sparse on color usage. If you could explain more or maybe whip up or link a sample?

The only thing I would change is the width of the text. As it is now, your line length is more than 150 characters, way too much to be comfortable to read.

Good point. Honestly, I'm used to reading wide text (these forums for example, on my 1920x1080 monitors) but I see what you're saying. Darth Mandard makes a similar point for a different reason, I will make the entire page a bit thinner!

You have the over-all width set to 1024px (984px in the content area with left/right padding of 20px).  This will cause a problem for those running at 1024x768 resolution (which there are still a lot of people using!).  The vertical scrollbar will make the content width overflow on the sides and you'll get the horizontal scrollbar as well.

Good point, I didn't consider the width the vertical scrollbar takes. Since that's a native OS element, I will make sure to give it a good amount of space. Thinking about making the page 940px wide currently.

The color for your name in the header feels off to me (too dark).  Maybe if it were white and the '// game programmer' was a light shade of grey?

Yeah, it is not easy to read, I agree. I feel this will probably change when I switch the stock photos with project screenshots but it's a very good point and I like your suggested color alterations. Will definitely give these a try.

The border-radius that you've used feels a tad too much!  Maybe cut that back to 3px or 4px?  I've just been getting a sense lately the really rounded designs are going 'out of vogue'

Agreed. I was using 5px for the top elements and 10px for the lower ones, I will start by making it 5 (or 3-4, if 5 is still too large) throughout.

Also, on the border-radius; CSS3 is, sadly, still not widely adopted so you should probably use the vendor prefixes in your CSS (such as -webkit-, -moz-, etc) to get as much cross-browser compatibility as possible (with the box-shadow declarations as well)

Yeah, good point. Currently, I have used some not-widely supported CSS3 features (box-shadow, text-shadow, border-radius and the transition in the header) and I've used them in such a fashion that it doesn't actually hurt the page when they don't work. But I guess I can just add the -moz/-webkit workarounds before 'making it public'.


Thank you everybody for your input. Looking to update the page asap. If there's anything else, please do let me know!