New Graphic Design Portfolio/Blog. Reviews please?

[Spritanium]

I've been working on this site for a few days, and it's my first serious attempt at a website to show off my graphic design.

Here's a work-in-progress version of the site: http://keithpickering.zxq.net/index.php

The homepage and portfolio pages are more-or-less done, and I'm working on getting WordPress configured for the blog page (I'm actually considering converting all 4 pages to WordPress to make everything easier to manage, after which I might add more dynamic content and a more detailed portfolio page)

The site was designed in Photoshop. It was also coded in notepad, because that's how I roll I guess.

I'd like any kind of criticism, because I want this to look as good as it possibly can. I'll even take minor nitpicks. Any slight detail that you believe could conceivably be executed in a different way, let me know. I want a site that doesn't turn people away from my work.

So yeah, all comments are welcome!


Also, some plans for the future:

Once I move to a better host that fully supports WordPress, I'm probably going to manage the whole site using it. At that point, the portfolio page links will end up working a little more like the ones on this site. You'll click a thumbnail, and a lightbox-style window will pop up showing a slideshow of different images and a longer description, more information, etc. The only problem is I have no idea how to do this as of right now, haha.

[TehYoyo]

Nothing says unprofessional like a subdomain of a free hosting site, but maybe it's just me.

I love your illustrations, the dark backgrounds that keep contrast down, the navbar and logo. And usually I don't give positives in website reviews. But really, your illustrations are great.

I would love for this to be a horizontal-scroll site. They're new, innovative, and, if you can pull it off, super-cool.

Some of your pictures leave you ambiguously male or female.

The copyright text is a little too hostile for me. You come across as gruff...be nicer or turn it into a joke. I know what you're trying to do, but while this might dissuade people from stealing, it'll probably also dissuade people from buying. I think you could turn it into a joke by saying 'Contact me to steal something legally!' with a little smiley face or something. That way, you remind them that it is plagiarism, but don't harm people there for normal use.

Where's your call to action??? How do I hire you? do you even want me to buy from you?

What's the difference between work and portfolio?

One of the better sites I've seen here.

~TehYoyo

[sabrinataky]

Hi, Spritanium your experience really laudable. i praise you for your well skill. actually a few days ago i was visited your web site.it was all kinds of fair design able information. i was took some tips from there. whatever in this site has many topics about web design and ideas.

[Spritanium]

Nothing says unprofessional like a subdomain of a free hosting site, but maybe it's just me.

I love your illustrations, the dark backgrounds that keep contrast down, the navbar and logo. And usually I don't give positives in website reviews. But really, your illustrations are great.

I would love for this to be a horizontal-scroll site. They're new, innovative, and, if you can pull it off, super-cool.

Some of your pictures leave you ambiguously male or female.

The copyright text is a little too hostile for me. You come across as gruff...be nicer or turn it into a joke. I know what you're trying to do, but while this might dissuade people from stealing, it'll probably also dissuade people from buying. I think you could turn it into a joke by saying 'Contact me to steal something legally!' with a little smiley face or something. That way, you remind them that it is plagiarism, but don't harm people there for normal use.

Where's your call to action??? How do I hire you? do you even want me to buy from you?

What's the difference between work and portfolio?

One of the better sites I've seen here.

~TehYoyo

First off, thanks for the kind words. If you really don't post positive reviews often, I guess I should feel special

The hosting situation is temporary; it's likely that I'll move onto a paid host with a domain name by the time I get everything finalized. I pretty much need a domain name, since the URL to my site will likely be included on future prints of that DVD case you see in my portfolio.

Haven't looked into horizontal scrolling, and I'm not sure about it. I'll consider it though.

For the gender ambiguity thing, that's just the caveat of being a male with long hair and being unable to grow a beard.

The comment on the copyright text is actually a little surprising to me. I intended it to be funny in its current state, but I can definitely see how it can be interpreted as hostile. Quick fix, just have to edit the footer.php file.

The call to action is sort of buried in the sidebar...it could probably use a rewrite.

The difference between Portfolio and Work is that the portfolio shows projects I have completed in the past, while the work page will talk more about what I do, my work process, and how one would go about hiring me. I just have to get around to writing the content.

Thanks again for the review; stuff like this really makes me want to keep going.

[Spritanium]

Edited the footer---I changed it to a more obviously humorous message, and just for kicks, I added a link with more information on my copyright policy.

[TehYoyo]

Haven't looked into horizontal scrolling, and I'm not sure about it. I'll consider it though.

That's all I ask.

First off, thanks for the kind words. If you really don't post positive reviews often, I guess I should feel special.

You should

Edited the footer---I changed it to a more obviously humorous message, and just for kicks, I added a link with more information on my copyright policy.

Truly fantastic. It's funny, but serious at the same time. I like the display animation.

~TehYoyo

[erickillebrew]

cool designs, is your website going to be your name? Is it a portfolio or business website, for portfolio i would say thats awesome, but for a business selling them you should have a company name.

Yeah and the Sub domain thingy I'm assuming thats just temporary?

[Spritanium]

It's a blog and portfolio site, so the website is just my name. I don't have a company.

And yeah, I'm gonna go for keithpickering.com at some point.

[erickillebrew]

You do some nice work, just keep expanding your profile, and like the poster above said side scrolling websites looks really nice when you have a very larger profile.

Keep up the good work.

[Spritanium]

http://keithpickering.zxq.net/portfolio/index.php

I'm sort of working on a new effect for portfolio images. Click the first entry on the list to see what I mean.

[deathshadow60]

Fixed width too large for my netbook, looks like it was designed FOR my 1920x1200 display at full screen... and that's not a good thing. Grey menu text on black is below accessibility minimums in terms of contrast, same for the grey on grey on the footer. While I realize this is a portfolio site the lack of anything resembling content on the home page saying what it is we're even looking at isn't all that great an idea.

At half a megabyte the page is easily three times the upper limit I'd allow for a page template... even for an artists page. You need to get a little more aggressive with your image compression.

You have no logical document structure, in fact your only H1 is "Copyright policy" -- from a search standpoint ALONE that's bad...

... and of course it's on the HTML 5 bandwagon -- which I could go and rant and rave about it setting coding practices back a decade or more, but really that's the least of your problems here.

[tahoecale]

So at a first look at your site i have no idea what it does. it kinda comes off as some cartoon website. than it turns into you are selling your services. there is no content on your home page there is only 3 photos and google will not craw your page much due to there being no content. i think your logo needs some work as its just a big white font and its way too big. i also dont like the popup that says "any and all information" you should change that to just "All information" Also the popups on the photos are very hard to read you may want to give that popup a white background.

[Spritanium]

To be frank, half a megabyte isn't a big deal, considering it's not 1990. I suppose I could stand to compress the jpgs a little more. It's a huge improvement over sites I've made in the past; I used to use nothing but pngs.

I apologize if you can't see the navigation and footer text well enough, but it looks perfectly fine to me and everybody else who has seen it.

Lack of anything resembling content? Do you not consider the instantly descriptive images which contain more detailed descriptions within them "content"? Honestly, if someone can't tell this is a portfolio site after seeing a giant image labeled "portfolio", they shouldn't be on the internet.

I honestly don't care that much about SEO for this site. I'm not trying to get the #1 result for "graphic design" on Google; I'm just trying to get together a showcase of things I've made in the past in case I ever need to show somebody. It's the same thing as having a paper portfolio---you don't publish it and put one in every library across the world; you show it to somebody who is interested in your work. Besides, search engines love WordPress, so after I get the blog section up and running, I don't think I'll have any problems with that.

About the document structure, again, the pages I have up so far focus more on images than textual content. You'll see a lot more headers on the two pages I haven't added yet.

There's nothing wrong with HTML5. Working with it is a dream. Please explain why it's a bad thing, because I'm legitimately curious.

The resolution is a valid complaint, but that's not my highest priority right now. For fixed width sites, you can make something that looks great on 1024x768, but entirely too small on mainstream resolutions. The average person is buying 20 inch monitors at the very least, so if a few people have to scroll horizontally for a few hundred pixels, I'm not too worried.

Thanks for your comments.

[deathshadow60]

To be frank, half a megabyte isn't a big deal, considering it's not 1990.

It's easy to think that -- until you realize you're actually right, it's 2012 -- which means we have ISP's in places like canada billing people for going over certain amounts of bandwidth, we have metered connection plans cropping up again worldwide as demand for bandwidth exceeds the capabilities of the existing infrastructure -- and you have all these nice new small form factor tablets, handhelds and phones that quite often are on poor throughput connections, metered connections, etc... Much less that sure, it's 2012, but massive swaths of America still don't have broadband availability -- from Coos County New Hampshire, almost all of western Maine, to large sections of the northwest and mid-west where there's enough people who want broadband, but they are too far apart to make it worth it to build the infrastructure for them... Could also simply be one of the dozens of people leeching free bandwidth at Starbucks or Panera Bread sharing a 768kbps connect over wireless while on break... in which case that broadband connect with ten users is now behaving like 56k dialup.

... and if you get real traffic, the bigger the site the more it costs to host.

Just something to keep in mind -- for a graphical website about artwork, you are, as you said, quite compact....

It's a huge improvement over sites I've made in the past; I used to use nothing but pngs.

PNG has it's place -- several of your images would actually be smaller as palettized png than as jpegs... or could be made smaller as png than they currently are. The 10k 'yXeFv.png' for example is just a tiled gradient -- that could be compressed to half a k with no loss. The various little _bw.jpg icons are currently between 3 to 4k apiece for what should probably be 1k apiece as png.

It's the problem with image optimization... no one file format is always the answer; and of course Photoshop wouldn't know image optimizations for Internet use from the hole in it's DVD.

I apologize if you can't see the navigation and footer text well enough, but it looks perfectly fine to me and everybody else who has seen it.

It's not so much about what I see or a few test audiences see, but the much larger usability experiments that resulted in things like the WCAG guidelines for chosing text and color contrasts. There are some basic rules you can follow to make sure you don't have those types of issues.

Like using the formula for emissive luminance:

Luminance = 0.3 * Red + 0.59 * Green + 0.11 * Blue

If the value of the two colors are below 50% apart (so in 0..255 RGB that's 128 apart) there are going to be usability issues, and it's a good idea to aim for around 75%. Of course, grey is easy because all the numbers are pretty much the same, so you can just skip the formula and say "if it's less than 128 apart, there's a problem".

Your background color behind the menu averages out at 9 using that formula, the #616768 grey averages out to 101... since 101-9 is only 92, far short of that 128, it's below accessibility norms. Brighten it up to say... #80888A, and it's not a problem.

Footer area is the same thing, if we take a slice of that background and gaussian blur the tar out of it, we get roughly #231E22, or 32... that #616768 text over it is again only 101, resulting in a difference of only 69 -- almost half the contrast that should be there.... so you'd want something around #98A0A4;

Personally, I'd kick both up to A0A8AC just for good measure. Even when being creative, when it comes to text there are guidelines and rules that make it pretty simple to keep yourself out of trouble.

Lack of anything resembling content? Do you not consider the instantly descriptive images which contain more detailed descriptions within them "content"?

Content you don't see until mouseover with no visual queues to say there's content unless you mouseover... isn't content. Also I don't know if it's that I browse with scripting disabled, only enabling it per site -- or Opera choking on the transitions, but your hover effects don't work there. I just checked it in FF and lo-and-behold, there's actually text on hover...

Kind-of

Honestly, if someone can't tell this is a portfolio site after seeing a giant image labeled "portfolio", they shouldn't be on the internet.

Maybe I shouldn't be on the Internet then, because I want "what gaint image labelled portfolio".... Then I found it; white (255) on orange (#FFBB33-ish, or 193) for a contrast of only 62, more than half the minimum -- which combined with the text blurring into the border doens't make it look like anything I'd consider a heading, or informative about the page...

But again, YMMV. Just my opinion -- backed by math from the WCAG and other accessibility guidelines that actually predate HTML or it even being called "the internet".

About the document structure, again, the pages I have up so far focus more on images than textual content. You'll see a lot more headers on the two pages I haven't added yet.

Makes sense. As a portfolio page it IS going to be a Image driven page so things like images off users are... well... really not worth worrying about; at the same time there are some things that could be done to help people who land on the page have some clue what they are looking at -- ESPECIALLY if your content doesn't even all fit on the screen.

There's nothing wrong with HTML5. Working with it is a dream. Please explain why it's a bad thing, because I'm legitimately curious.

Oh, it's a dream all right -- and Freddy Krueger is around here somewhere.

Without going into a massive diatribe -- the new structural tags are pointless redundant wrappers designed to placate the people who before 5 insisted on wrapping DIV or TABLES around their content for no good reason; The loosening of the structural rules and change from 'authoritive' to 'documentative' as a specification not only makes it cease to be a specification, but also undoes all the progress strict markup has given us the past decade. On the whole so far as markup is concerned the entire specification is crafted NOT for people who embraced separation of presentation from content or STRICT, and instead is for the people who until recently were vomiting up HTML 3.2, slapping a tranny doctype on it, then pretending they were writing modern code, as opposed to the truth of what they were doing -- having their heads permanently wedged up 1997's backside.

Which is why they had to put all the non-markup stuff under HTML 5's banner (which is almost as idiotic as the 'lets get rid of having versions' nonsense) -- because without CSS3, the new scripting, and the 'tags that shouldn't even have new tags' like CANVAS, AUDIO and VIDEO, well... the Emperor has no clothes.

The resolution is a valid complaint, but that's not my highest priority right now. For fixed width sites, you can make something that looks great on 1024x768, but entirely too small on mainstream resolutions. The average person is buying 20 inch monitors at the very least, so if a few people have to scroll horizontally for a few hundred pixels, I'm not too worried.

Too small is really the least of the issues though since the average person is going out and buying tablets, phones and netbooks... meaning 1024 or SMALLER is more of a concern. While it annoys me to have a tiny little layout in the middle of my 24" screen - it's just an annoyance and not a deal breaker. I load it up on my netbook and all that's on the screen is half the display sucked down by your name/title, 'blog', Coming with the bottom half of 'soon' chopped off, and a semi-visible "portofol" -- the layout isn't exactly "viable for web deployment".

Though making multiple layouts with media queries to swap out or adjust that content could work wonders for you.

... and don't take my comments too personal -- just trying to help.

[Spritanium]

First off, thanks for pointing out the yXeFv.png thing. That's hosted on imgur and I've been meaning to host it myself. If you look closely, it's not just a tiled gradient; it has a subtle texture to it. Otherwise I'd definitely make it 1px wide. I'll work on compressing the images a little more; it's something I haven't really bothered with since I've just been trying to get it looking nice. I'll also definitely consider making an alternate stylesheet for lower resolutions. I was planning on making a mobile stylesheet anyway.

I made the footer text and nav text brighter. I liked it better before, but it doesn't make that much of a difference. And it might make a lot more difference to someone else, I guess.

I only have Firefox, Chrome, and IE installed, so I wasn't aware the descriptions didn't work in Opera. Cross-browser compatibility is definitely important to me (unless it's with IE6). I'll see what I can do about that. If you'd like to take a look at my code and tell me what I can do, I'd appreciate it.

I like HTML5---different strokes, I suppose. The only elements I'm really using are <footer> and <aside>, really. They could easily be replaced with divs if I wanted to do it in XHTML or something.

Changed the title of the page to include "Graphic Design". It's not much, but it instantly alerts the viewer to what the page is about. I'm not really interested in adding any extra text to the front page. For one, I like the simplistic style, and apart from that, it's like you said: the page doesn't fit perfectly on lower resolutions as it is. I think I could get away with adding some more information in the hover-image-mabobs. There's plenty of room there.

I wasn't trying to sound offended; I really am willing to take any criticism I can get. You seem to know what you're talking about.

[iconhot]

You site look great, I very like the dark style.
I only found a inconvenient in the homepage that I can not click profile block as a link when it displayed.
Also I found the "blog" and "Portfolio" are link to the same page, is it for the sake that your site only for reviews now?

[Spritanium]

Oh man, I finally figured this out. I love php.

http://keithpickering.zxq.net/portfolio/index.php

Now all I have to do is upload a directory with the project name, description, and images, and the thumbnail and slideshow popup are created automatically.

Note that I just implemented this, so a majority of the entries have only one image that's stretched down. This will be fixed. I also need to figure out how to make the fancybox window smaller.

[aguswgs]

I like your blog design.. are you making this own?

[rowefx]

Very unique style Spritanium, I like it, original and fresh. I like the fancy box choice it works well on your site. The only thing im not too keen on is the idea of the website being tucked in on the top left of my page.

8/10
-fx

[TehYoyo]

Fixed width too large for my netbook, looks like it was designed FOR my 1920x1200 display at full screen... and that's not a good thing. Grey menu text on black is below accessibility minimums in terms of contrast, same for the grey on grey on the footer. While I realize this is a portfolio site the lack of anything resembling content on the home page saying what it is we're even looking at isn't all that great an idea.

At half a megabyte the page is easily three times the upper limit I'd allow for a page template... even for an artists page. You need to get a little more aggressive with your image compression.

You have no logical document structure, in fact your only H1 is "Copyright policy" -- from a search standpoint ALONE that's bad...

... and of course it's on the HTML 5 bandwagon -- which I could go and rant and rave about it setting coding practices back a decade or more, but really that's the least of your problems here.

I agree with everything that was said here. The images don't have a lot of colors or detail - because they're illustrations, you don't need super high-quality images. At least use png files...no need for jpegs.

Pertaining to HTML5, the markup doesn't even match the web standards. For instance, the link tag isn't self-closing - it simply doesn't require a link tag.

I don't know if I'd aim for under half a megabyte for every page that I make, but for the lack of content and images, I'd say that you could easily make it under 300kb.

The fixed width is definitely too large....although I do love my 1920x1080 (16:9, sorry deathshadow) monitor

Also, don't say that it's not 1990 whenever deathshadow is around...which is...ever on SPF. He'll rip you for it...which he did
Edit: I just read through the rest of your post and then deathshadow's post and...don't say anything that you said, or else he'll rip you for it...which he did

Again, I agree with everything that deathshadow said in his post on the 4th. You have to take into account accessibility. If you don't have Opera, get it. And please, develop for IE6, or at least make it accessible.

~TehYoyo

~TehYoyo

[ameliewakelin]

Wow very attractive design as well as unique too but the width of website is needed to be fixed.

[holy_grail]

Yes, jealous because i have no graphic design skills of my own and you have it in spades. I love the way you joined your name together with the I bar..the ghosted background image...the smoothness of the portfolio page. It really is all great. Only thing I didn't like was the serif font for your menu. But overall great site.

[Albablue89]

Three things I want to point at:

- The width and alignment of the website. I feel it' doesn't look right, having header + content shifted to the left and then the footer is dead centre on my display ?
- The colour of the nav links, just make them white, they blend it way too much for me and my sight.
- The colour of the social links of the footer. The footer is grey and the social images are grey but colour on hover ? - Why not change that about to add some extra brightness.

[EastCoast]

I'd have your name in an h1 tag and overlaid rather than just embedded in the background image

Had a look on an ipad, couple quick points I noticed different to viewed in chrome

- top right menu font looks different (has become a serif)
- footer doesn't extend to full width

Love your illustration style

[Spritanium]

Using media queries, I made a stylesheet that kicks in for lower resolutions. It's now perfectly viewable on 1024x768 and higher. In the next few days I'll be making another stylesheet for smartphones.

I've also compressed nearly every image quite a bit. CSS3 animations now work in IE10.

Took the logo out of the background and made it an h1 with a huge-ass text indent.

After noticing how ridiculous it is to have a centered footer with a left-aligned site, I just decided to center the whole thing. The max width for the whole site is 1280px.

Comments please