My Graphic Design Portfolio/Blog---LOTS of changes

[Spritanium]

Earlier this year, I posted my site here and asked for criticism. It was in very early stages and I got a lot of feedback that really helped me. And now, I'm finally getting to a point where I can start to call it "done" (but who am I kidding...I'll always be tweaking)

http://keithpickering.net/ I've made a lot of changes, as you can see (anyone who helped me in the old thread, anyway). I've tried to design the whole site around always giving the user something to click next, so they never feel like they've reached a dead end. The related posts help a lot with this, as does the random portfolio entry that appears on most pages in the sidebar.

Biggest changes:
-Domain name and good hosting
-About 99% mobile compatible (still a few kinks to iron out)
-Fully scalable from 480px and up
-Portfolio entries now open in separate windows and support comments and ratings
-Random portfolio entry displayed on the front page
-List of most recent posts on the front page to encourage browsing
-Archives page (need to figure out how to paginate it by year maybe...could become a problem in the future)
-Recent tweet right there on the front page, along with a Facebook like box and other social links
-More info in the About section of the sidebar
-Contact form, I guess for people in a hurry
-Images and code compressed wherever possible

To Do:
-Fix a few things regarding mobile compatibility
-More robust archives page
-Smaller page sizes (though they are below average according to Pingdom Tools)
-Layout tweaks based on user input
-Different look for search results in portfolio category

If anyone has ANY complaints with the layout, code, or ANYTHING, regardless of how nitpicky, please let me know. I want this to be absolutely perfect.

[Ngokillr]

Looks quite nice visually, and the colour scheme works very well with the background and theme.
One thing that I do find is that there is too much colour in some places (eg: Colour Diversity in navigation menu) and not enough colour schematics on some things : Such as the Black Background; It looks good, but I reckon a gradient with the background from the dark blue (Of the footer) to a black (Or Visa-versa) would look much better than just plain black.

Anyway, that's just being a little picky, its a nice blog/portfolio, visually appealing and shows the professionalism of your work.

Sincerely
-Ngokillr

[Spritanium]

There's actually a subtle texture on the background. I'm not too sure about a gradient, but it could look alright.

Thanks for your comments!

[Ngokillr]

There's actually a subtle texture on the background. I'm not too sure about a gradient, but it could look alright.

Thanks for your comments!

Yeah, I'm just being a little bit picky man because to be honest, it is a ****ing spot on website and I commend you on your, or your designer's brilliant job on it; But yes, something on the background rather than just black would give the website a little bit of a kick.

Sincerely
-Ngokillr

[JohnoLFC]

Hey Spritanium,

Congratulations on the site, its looking very nice and professional with a 'light humoured' touch. I love the writing style as its very personal to the end user. I'm spending a lot of time lately looking into horizontal navigation bars, and yours is up there with the best I've seen. The only improvements I can see are on your main points of interests boxes (Blog & Portfolio), I find it a little strange that you have to move the cursor down the image to make the hover images appear. This doesn't really fit in with the fluidness of the rest of your site.

I would also recommend more action on the 'sub-boxes'. I know you provide user feedback by creating a subtle hover border, but I think it would more appealing if the images maybe turned into bright, vibrant versions of themselves.

Everything else is spot on and I wish you success in your new career

Hope this helps,

[Spritanium]

Hey Spritanium,

Congratulations on the site, its looking very nice and professional with a 'light humoured' touch. I love the writing style as its very personal to the end user. I'm spending a lot of time lately looking into horizontal navigation bars, and yours is up there with the best I've seen. The only improvements I can see are on your main points of interests boxes (Blog & Portfolio), I find it a little strange that you have to move the cursor down the image to make the hover images appear. This doesn't really fit in with the fluidness of the rest of your site.

I would also recommend more action on the 'sub-boxes'. I know you provide user feedback by creating a subtle hover border, but I think it would more appealing if the images maybe turned into bright, vibrant versions of themselves.

Everything else is spot on and I wish you success in your new career

Hope this helps,

Thanks for the kind words! The navigation bar is actually one of the only things I'm completely satisfied with on my site---so I'm glad you like it.

The idea with the modules on the front page is that you can hover over the link to the page itself, which won't make any extra content appear, or you can hover anywhere else in the box for half a second to see more information. Before, I had it so the extra content would appear immediately regardless of where the cursor was (even if it was on the link to the page), which I decided was too intrusive. So what I'm trying to do is encourage people to hover over the boxes, since they're the main focal points of the page. I know that when I see something that catches my interest on a website, my first instinct is to move the cursor over it. Maybe I should get rid of the delay and see how that works out.

Good idea with the recentPosts boxes. My reasoning with making the black overlay a bit dark was that I wanted to provide sufficient contrast, but I think it's safe to assume that if someone hovers over it, they've read it already. I just implemented this, and I also applied a [slightly hacky] bit of CSS to fix webkit's strange inability to apply transitions to css-generated content.

[Spritanium]

PS, since I can't edit my first post, I'll add this here:

If anything on the site appears "off", it's because I'm currently working on the layout. I'm planning on setting something up so I can work on the site offline, but I haven't gotten around to it yet.

[wongerlt]

to much dark color.

[oninez]

to much dark color.

No it isn't. It looks great. I suggest adding a favicon, probably the only thing you need. Otherwise the website looks finished. Good job!

[Spritanium]

No it isn't. It looks great. I suggest adding a favicon, probably the only thing you need. Otherwise the website looks finished. Good job!

There is a favicon.

Can anyone else not see it?

[oninez]

There is a favicon.

Can anyone else not see it?

All I see is an empty blank document paper with the top right folded, is that it?

[Spritanium]

All I see is an empty blank document paper with the top right folded, is that it?

No, it should be my logo

http://keithpickering.net/favicon.ico

In every browser I've tested, it shows up just fine.

[J in Calgary]

My favorite part of the home page is the line under the contact space that says "I'll draw whatever you want. Yes, even that." That could even be your website tagline--clever, shows you're versatile, memorable, and unique.

I wish the three main images were a little smaller so that I could view a whole section without scrolling--if the bottom white bars and social media icons fit on the screen without scrolling, it would look more complete to me (Firefox).

I love your Wreck This Journal post. And your entries are infinitely more artistic than mine, which require text labels in order to understand what my drawings actually are.

On the portfolio, love the labels on roll-over and also the level of explanation you get when you click--you give just the right amount of detail about what the project was for and what media was used--really well done.

I'm wondering if the "about" sidebar needs to show on every page? It's not distracting, exactly, but it's not providing any help, either, since you don't need to refer to that information as you're looking at the portfolio examples. Something to consider if you decide you want to use that space to focus attention solely on your designs.

Oh--and your favicon shows in my browser.

Good luck--looks like you've had a lot of fun putting it together. Tons of promise.

[Spritanium]

Thanks for the comments!

My logic with including the "Who am I" aside on every page is that I want to be sure everyone sees it right away. People may not necessarily start from the homepage; they may end up on another page of my site via a Google search. I want to be sure this information is clearly visible to every visitor, and yet I don't think it deserves an entire page (after all, the focus of the site is the art, not me)

As for the main modules being too large, I'm not sure what to do about that. They look fine on my giant 1920x1080 monitors Has anyone ever tried media queries with max-height instead of max-width? Does that even work? Maybe I could make them a bit shorter when the window isn't too tall.

I appreciate the feedback, guys. Keep it coming

[oninez]

No, it should be my logo

http://keithpickering.net/favicon.ico

In every browser I've tested, it shows up just fine.

I'm using mac. I just tested it on firefox and it works, but it doesn't work for chrome.

[Ngokillr]

I've tested the Favicon on both Ubuntu 12.04 and Windows 7 on ; Firefox and Chrome and the favicon seems to work fine and it has from the start (Hence I did not mention it).

[oninez]

This is what I see on mac.



The top one is the chrome, bottom one is firefox

[Spritanium]

Weird. Not sure what to do about that. Maybe it's a problem on your end.

I've tested in Chrome, Firefox, IE10, and Opera on Windows 8

[jeffvdovjak]

Good looking site. I like it. A few things I didn't though:

-your picture. not really sure you want me to think you're angry.
-the 'tongue-in-cheek' humor was a bit to dry. didn't come of edgy... can't describe it, but it was a bit much. maybe just too much of it, and not really different or personable than what's found all over the web
-a bit too much reading... it wasn't really relevant (on the homepage sidebar anyway). I got bored. would have left.

-biggest thing from a design view --- those big pictures that say "portfolio", "blog" and "work" --- I can't click them. Tried to a bunch of times, then realized I had to click on the text. I'd make the whole thing clickable... Research "clickable divs".

But, it's a nice, clean website. I liked it.

[Spritanium]

Good looking site. I like it. A few things I didn't though:

-your picture. not really sure you want me to think you're angry.
-the 'tongue-in-cheek' humor was a bit to dry. didn't come of edgy... can't describe it, but it was a bit much. maybe just too much of it, and not really different or personable than what's found all over the web
-a bit too much reading... it wasn't really relevant (on the homepage sidebar anyway). I got bored. would have left.

-biggest thing from a design view --- those big pictures that say "portfolio", "blog" and "work" --- I can't click them. Tried to a bunch of times, then realized I had to click on the text. I'd make the whole thing clickable... Research "clickable divs".

But, it's a nice, clean website. I liked it.

Thanks for your reply.

The picture is just whatever my gravatar happens to be at that moment---and I haven't taken a better picture of myself

If the humor is dry, then it's because my sense of humor is equally dry. I've seen too many graphic design sites where it's so obvious that the designer is just filled to the brim with s***, going on and on about how much they love Twitter and Macbook Pros, trying to convey how "modern" and "cool" they are, etc. I wanted to avoid that by bringing my own personality to the site, so people would actually get an idea of what I'm about. That's also why it doesn't look like the standard white-background Web 2.0 template site. I wanted to use a black background, white text, and a module-based design, not only because I think it looks good, but because you don't see that kind of design that much.

I've shortened the sidebar text a bit. That should help.

The modules contain extra content if they're hovered over for half a second. The heading itself is clickable, but doesn't trigger the extra content. This is all done with CSS. I've made the other modules fade out when one is hovered over, just to help convey that something is going on. I'd make the animation appear instantly, but I want to give the user a chance to click the heading as well.

Thanks again

[jeffvdovjak]

I might change the gravatar to a different pic. The dry humour isn't a problem, but when combined with the pic, I think it gives a negative feel to the page. I really like the shorter side-bar! It's quick now. And still personable. I think it's a big improvement. And it lets me move to the rest of the page. Because it's so different from the rest of the page, I actually looked there first. Maybe you could capitalize on that a bit by putting a few clearer calls to action in it. Maybe put a couple of links in. Instead of:

Instead, look around the site and check out my social profiles to learn a little more about me.

Perhaps something like:

Instead, check out my portfolio (link), start a project (link to work) or communicate with me through facebook (link), twitter (link) or any of the social sites below.

The first time I visited I didn't remember the hover effect --- it's pretty slick (maybe I was at a different computer and wasn't using Chrome?). However, I still think the div as a clickable link would be best.

[Spritanium]

Good call, changed the sidebar again.

I will change the gravatar just as soon as I have a better picture of myself.

The hover effect should work on all modern browsers. I've tested it personally in IE10, Firefox, Chrome, and Opera. It should also work in IE8 and 9 but without the transitions.

[jeffvdovjak]

Another suggestion, on your contact/work with you page, you should put a form right on the page (at the top). People will likely start filling it in before they read the "form below". It's just natural instinct to know why/how to fill in a form. Because it wasn't there, I started skimming for an "@" symbol so I would know where to send a message (which is always annoying having to open my email to do it! - so I'm glad it wasn't there). But then I had to decide if I wanted to read it to figure out what was going on, or just abandon my quest. It's simpler to just put a form there. I'm guessing you're using Wordpress. I'm sure there's a plugin that will let you put a widget directly into a page.

[Spritanium]

The modules on the front page are now fully clickable.

And I'm using the Contact Form 7 plugin, so I may be able to include the form again on the page, but I'm pretty sure it uses id's so it might only be a once-per-page thing

[praveensitoke]

Hello this is good design and color combination is good.
but i think need some more textures in background