I immediately notice the color scheme and the logo. The typography is crisp and the man standing nearby gives me a comfortable feel. I can tell this is a personal site. The subheading “Thoughts, photos, and whatnot” is inviting and succinct. The navigation is clear. I like the effect around the photos and the content area. It seems to provide the chromatic contrast necessary to differentiate the content but does not to call too much attention to itself.
What confused me
I can’t tell what the images at the top are for. One of them has a date overlay while the other has a title. Are these blog posts are are they images from his gallery? Perhaps they are from his portfolio? I could even go so far as to assume that this guy worked on ABC’s LOST.
The link treatment is unique. I think that, in relation to the page’s copy style, the links are very high-contrast. While this makes it very easy to spot links, it also make it difficult to read. As I scan the page I find myself looking at the links more than the copy. I’m fairly sure he would like this to be other way around.
Well, it’s good for one thing: I can immediately spot the Google adsense given that it’s a sea of white. Hovering over links yields a pink background for every link except for the comments link. “Why do these links have different hover states?” I wonder. I would consider consolidating these styles.
Scrolling to the footer I notice a copyright and some links that validate xhtml, css, rss. In similar fashion to psd2life, these links take me to an outside source that validates this site. I know what these acronyms mean, and why I’m being redirected — other users may not.
This brings me to my next question: What’s microblogging? I mean, is that that Twitter thing those kids are talking about nowadays? I don’t know, but Mario places an entry that begins “Microblogging:” in the middle of his regular-blogging feed.
The styling is different and this makes me wonder what the overall page structure is like. While the site layout was immediately familiar to me, I’ve begun to question my assumptions.
At this, I would recommend taking a look at how others have tackled similar problems. Anand Sharma uses a great format on his personal blog, www.aprilzero.com to convey microblogging. On the right, he has a “Diary” section that lets users know what’s running through his head without elaborating. Mario may want to consider sectioning his micro-entries off like this.
The portfolio of this site is a no-frills catalog of work. There is no sorting, there is only one picture per project, and there are no timelines visible. We can only assume the work is in reverse-chronological order, with the most recent work at the top. The design mockups provide a fleeting glimpse of design work without allowing me to look at anything in greater detail. I like what I see, but I don’t see much. How can I tell what his full site would look like if all I can see is a cellphone on a desk?
If I were looking at hiring Mario I would have more questions and answers from this bare-bones portfolio.
Leave a Comment Form
In scanning through the rest of his site, most of it seems very usable. My last concern is his treatment (or lack thereof) of his “leave a reply” form. Because the labels are to the right of the fields, you can only see them after you’ve typed something in — if you’re brave enough to guess what this field is supposed to contain. Having the label precede is a fairly common convention. The debate continues as to whether or not the label should be above or to the left of the field.
What I enjoyed
The site is inviting and engaging. As someone who has a predilection with color, I think the site is colorful and fun without being overwhelming. It strikes a balance. I believe that a site that displays photos should always have a muted color scheme. This lets the colors in the photography stand “above” the layout. Mario’s site succeeds in this regard.
The navigation at the top follows an established convention and is easy to use. In fact, the entire site follows a traditional blog layout. While some design purists may think this doesn’t allow for enough creativity, I think just the opposite. It allows a user to get oriented see the work as quickly as possible.
Lastly, I like the display of comments on Mario’s site. The comments by Mario are quickly differentiated from those of the blog’s readers. The wide spacing and the bits of color adorning each comment bring the life of the header back to the middle of the site. These subtle touches bring the page together. Sometimes it’s easy to feel overwhelmed by a sea of comments. This comment treatment makes me scan the page much more easily.
- Consider providing subheaders to the various sections of your site to let users know: how the portfolio is sorted, what is the sightseeing section (Do you travel often or are these friends?), What the portfolio (?) section at the top contains.
- Make the copy stand out better against the background, right now grey on grey makes things a bit difficult.
- Make form labels precede the fields in your comment form.
- Explain where links are taking your visitors, consider providing
titleattributes and making links open a new window with
- Place a “go” or “submit” button after the search field. Without having a permanent label/button a user may become lost after clicking in the field.
Consider differentiating your headers more, it’s hard to make sense of what header goes with what content sometimes.
- Make your portfolio more robust. Take a step back and ask: “What would a potential employer ask me?” and go from there.
- Consider consolidating the methods of commenting on your work. From what I gather users can comment via wordpress, Flickr, and Google Friend Connect. I would try and stick with one or make the integration more seamless.
All said, the site is a great portfolio and has huge potential. I think you’ve got a great eye for color and an impressive range of talents. Best of luck to you, Mario. Thanks for submitting your site!