Portfolio Critique

You're an impressive artist, I'd offer a few critiques on how to improve the UX of your site and keep the focus on your art and not the portfolio itself.

• Ditch text-shadow
  • it draws the eye to the headings themselves rather than your you awesome art work.
• Drop the nav section
  • From a UX perspective, I think it breaks the mental model of navigation as it breaks the concepts of a page history. You can read more about what "God Father" of Usability Jacob Neilson has to say about it.
• Change to a more semantic outline
  • H1: "Allo I'm Dan"
  • H2: 3D Characters, 2D Concepts, Experience, Contact
  • H3: Props, Hand Painted Textures, Illustrations
• Turn down the rotate effect ...
  • it distracts from the art, maybe 3 pixels of rotation instead, something really slight so it's an almost subconscious cue
  • Have all of the images rotate to the right, as it's the direction people read, rotating to the left has an unconscious jarring effect
• If it's a list of items, use the semantically appropriate tag, either ul or ol
  • Change the list items in the Experience & 'Contact` sections into unordered lists
• Cut down the padding in your footer
  • it looks like your the horizontal rule is just floating in the middle of your page
• Use title attributes to aid the user journey
  • add a title attribute like "Click to send the author an email" to let them know it will open their mail client and tell them
• Don't use the RSS icon for your blog
  • it breaks the mental model that it will lead to an RSS feed and not a blog

You can also read more Jacob Nielson's thoughts on "hierarchy" and scannability

Hey Dan,

Nice work. Take a look at my suggestions:

• At the 1199px breakpoint, there seems to be an issue with your image box shadows when they transform on :hover.
• I feel that the main header needs more space between the text and the hr.
• Add a little more space between the rows of images and headings below.
• Towards the bottom of the page – I'd like to see "Experience" and "Contact" horizontally aligned with each other.
• Under "Contact", try removing the circular arrow icons next to "Email", "Twitter", etc.. They seem unnecessary because you already have the social icons.
• The text shadows are pretty neat, and since you do 3D modeling, they seem appropriate. However, some of the headings are not legible because the shadows are closing up the spacing, letter counters and apertures, so you might want to try a different font, or use less shadow effects.

Hope this helps :)

Nice work Dan... the artwork is nicely displayed in each case. My only critique might be that the navigation is too far out of sight, buried in the upper left corner. Might make more sense in a central location closer to the content it links to. But really the site looks great, and it helps to have awesome artwork to share!

Dan! I really like it! Personally, I'd take the "I'm Dan ... " portion and move it over to the left to replace "Allo". I'd also add a big cheesy picture of you smiling up there -- that always makes me feel more connected to the person if I can see a picture of them.

Love the site, the only changes I would make are:-

Bigger Nav.

I would have the HR more subtle, perhaps thiner and a less contrasting colour, I would try out black.

Align the images under Experience at the bottom left, all the way to the left by removing the margin left. Also semantically I would put these in a UL tag.

In your contact list at the bottom left, again should really be a UL tag and I would have the icon then the related text, so they line up nice a neatly.

Lastly where you have 3D Characters and 2D concepts text, I would have this on one line not two.

Your work is great by the way.

Stevie

Hey Dan! My only critique would be make Experience span a line instead of in a block next to contact, and then make contact a single line of just the images and no extra text.

Otherwise I really like the design and your work! Loving the illustrations.

Nice work dan. My only suggestion at the Experience Section try to make the logo into clean what i mean try to remove the background or make an something that related to the icon :D sorry for my bad english

Thanks for the responses guys - really good info - ill get on with making some changes and get back to here soon ! - also thanks for the comments on the artwork !

Hey guys I've started to implement a lot of what you have said above including

Bigger Nav, Subtle HR, fixing some responsive bugs, subtle the rotation and loads of other little things

check it out - http://mephworks.co.uk/

The site is looking better.

I'd suggest you add a title attribute in your horizontal nav for the blog, twitter, linked in, vimeo links. That would help let users know, that when they click on those icons in your nav, it will take them off-site, unlike your other nav links that are on page.

I'd suggest you re-work your code to use more semantic HTML. In particular don't use the br element, instead use a list.

Currently your page outline looks like this ...

• Allo
  • 3D
    • Characters
    • Props
  • 2D
    • Concepts
    • Hand Painted Textures
    • Illustrations
    • Experience
    • Contact

I'd suggest you change it to to something closer to this ...

• Allo I'm Dan
  • 3D
    • Characters
    • Props
  • 2D
    • Concepts
    • Hand Painted Textures
    • Illustrations
  • Experience
  • Contact

The major difference being changing the Experience & Contact sections to be h2 instead of h3

Hi James, thanks for the reply

I was thinking of adding the titles to the Nav and thought it might be overkill, but i completely forgot the outgoing links - thats a great idea ill add those now

Yer I wasn't sure if I needed to put the last 2 headings under a new heading of info - but I think your right just making them h2 would make sense

Cheers

I see you are using a spacer div and br tags. Instead consider separating your content and your presentation, and use CSS selectors to space out your content and scrap the non-semantic markup.

Currently your footer has 100px of padding around 15 pixels of content, so you might want to scale that back bit, to help anchor your page to the bottom of the view port.

I like the new text-shadow, it's a big improvement :)

Adding a bit of tracking so that there is discernible space between the letterforms would make the headers more readable.

I might suggest the following CSS ...

h1 { letter-spacing: 6px; }
h2 { letter-spacing: 4px; }
#opening strong { letter-spacing: 2px; }

I need to spend a while sorting out the spacer's - I know they are a bit of a lazy hack atm - mainly they help out a bit with the responsiveness ( that's probably not a word but it should be) - I think I just need to find the time to do that

I tried adding some track as you said, but I really prefer the tight tracking it gives a more impact-full look to the text and as its mainly for display I think its able to get past the readability factor.

The main issue from before with the text, was that it was all set to a weight of 700, not sure where I did this but it was my fail - so I've put it to regular (as it was the browser stretching it and it never looks good when that happens) so that's helped the readability of the text a bit.

And again thank you for the advice!