Review my portfolio

pixeldesign · 14-12-2011 12:27am #1

Hi guys! I finally finished my portfolio after many nights of work.I just wanted to create something simple and clean.
The url is http://www.imandy.ie

Andy is my nickname, i thought this domain name would be suitable for my portfolio

Please let me know what you think.I`m not sure how it looks on different browsers and screen resolutions because i didn`t have time to test it.

If it looks messy for you, please let me know what browser and screen resolution you have.

Thanks again!

14-12-2011 10:21am

Overall, it's pretty good for your age & experience, so keep up the good work.

A few criticisms to help you improve:

There's too many effects just because you can, not because you should.
Writing in the third-person is weird and disturbing, especially because it's such a personal website. Also, your website is titled "i'm andy" not "he's andy".
The framing of the work on the homepage is not great, it wasn't immediately obvious to me that it wasn't part of the design itself. It should be much clearer.
There's a lot different styles/effects/transitions etc... you should strip it down a bit so it's more consistent.
The main navigation is a little dry, and the typography is a bit pedestrian.
It really reads like a student site. Things you don't like "fighting" "microsoft windows" really just sounds childish and has no place on a portfolio.
I think you need to make it clear if this is a personal site that has a portfolio, or a professional site that has a little bit of personal stuff.
Read these articles about knowing what you're trying to achieve with your site, and try write yourself some clear goals and ask yourself if you are addressing them: http://astheria.com/design/portfolios-that-accomplishgoals
http://www.smashingmagazine.com/2008/03/04/creating-a-successful-online-portfolio/
Also, unforgivable sin - if you're going to be doing design, then you really need to learn what a proper apostrophe is.

All the best!

pixeldesign · 14-12-2011 11:43am

p wrote: »

Overall, it's pretty good for your age & experience, so keep up the good work.

A few criticisms to help you improve:
There's too many effects just because you can, not because you should.

Writing in the third-person is weird and disturbing, especially because it's such a personal website. Also, your website is titled "i'm andy" not "he's andy".

The framing of the work on the homepage is not great, it wasn't immediately obvious to me that it wasn't part of the design itself. It should be much clearer.

There's a lot different styles/effects/transitions etc... you should strip it down a bit so it's more consistent.

The main navigation is a little dry, and the typography is a bit pedestrian.

It really reads like a student site. Things you don't like "fighting" "microsoft windows" really just sounds childish and has no place on a portfolio.

I think you need to make it clear if this is a personal site that has a portfolio, or a professional site that has a little bit of personal stuff.

Read these articles about knowing what you're trying to achieve with your site, and try write yourself some clear goals and ask yourself if you are addressing them: http://astheria.com/design/portfolios-that-accomplishgoals
http://www.smashingmagazine.com/2008/03/04/creating-a-successful-online-portfolio/

Also, unforgivable sin - if you're going to be doing design, then you really need to learn what a proper apostrophe is.

All the best!

Thank you for your review!
Here are the answers for you:

1.There are not many effects.I just used ajax for transition from one page to another, and another effect for portfolio.I don`t think this affects the visitors.

2.I saw about 4 portfolios writing in third-person, and i thought would be nice to use that.Other people told me too its not the best idea to use third-person.Thanks for pointing this out, i just updated the text.

3.I`ll try to change the slider, i`m not very happy with it myself too.

4. Again, i don`t think there are too many effects

5.Any suggestion for the menu?I think its alright the way it is.

6.Content was updated

7.Its a personal portfolio

Pixelcraft · 14-12-2011 12:13pm

Just to back up P, I would agree there's far too many effects - it actually stopped me viewing your work section.

Giblet · 14-12-2011 12:55pm

Lots of effects, and outside these, nothing that really works!
Falls over in older browsers such as ie7 and even worse in ie6 (1920x1080) (besides, funnily enough, the slider menu, so that leaves what little self made content there's left, no use in fighting the browser wars, your user doesn't care).

I'd work on making it work rather than hinging everything on a few tiresome effects.
The slider goes about .5fps on an iphone4s.

Some of your design aesthetics aren't actually bad at all, just the implementation of them.

tricky D · 14-12-2011 2:54pm

Too many effects that are plain unnecessary. They're not really interactive, just swishy and fancy, needlessly so. Really don't like the transitions.

The copy is off for a professional site.

Pls capitalise your the i's and check for grammar, spelling and proabably your punctuation.

Giblet · 14-12-2011 3:34pm

pixeldesign wrote: »

1.There are not many effects.I just used ajax for transition from one page to another, and another effect for portfolio.I don`t think this affects the visitors.

Your site is unusable without enabling javascript.

pixeldesign · 19-12-2011 2:48pm

I just updated the portfolio, i replaced the ajax with jquery and i changed the colors from blue to green.

Please have a look again and let me know what you think.
http://imandy.ie
It doesn't work in ie6 for the moment.I`ll fix that today.

Thanks!

@Giblet
Javascript is a must these days, so you`d better install it.

Giblet · 19-12-2011 3:10pm

pixeldesign wrote: »

I just updated the portfolio, i replaced the ajax with jquery and i changed the colors from blue to green.

Please have a look again and let me know what you think.
http://imandy.ie
It doesn't work in ie6 for the moment.I`ll fix that today.

Thanks!

@Giblet
Javascript is a must these days, so you`d better install it.

That's a ridiculous assertion. You should enhance a page with JavaScript, not provide base functionality. What if one of your scripts failed? What if a new browser becomes popular that doesn't support all the scripts you have running? iPhone already suffers with this, but what if it goes further in the future? Any page should stand up to basic scrutiny, and yours hasn't, in fact, now it shows all 5 pages when javascript is disabled, and even when it is enabled, back button doesn't work! It would be trivial to fix using 5 discrete pages and loading them via ajax, with the fallback being the page without any fancy transitions, but you base the entire layout of the page on this fact, which isn't clever when it comes to professional web design. You don't tell the customer how they should browse the web just because you can't provide the experience and you cannot blame their browser either, it's just lazy. Take it from me, design from the bottom up, don't hinge the entire layout and markup of a page and some fancy effects which will grow tired very quickly, I wouldn't hire someone who did this, so you'd better fix it.

Also rather than worry too much about IE6, make sure the layout adapts to an iPhone. It's pretty simple, and is in more demand than IE6, so you should be able to use a media query to get it to show correctly.
Just don't disable zoom or something...

tricky D · 19-12-2011 5:37pm

pixeldesign wrote: »

Javascript is a must these days, so you`d better install it.

But not for what you are using it for. A half decent employer is just going to shake their head and strike you off the candidate list.

pixeldesign · 19-12-2011 6:26pm

Fixed some bugs for iphone and android, and removed the jquery.
Is better?

Giblet · 19-12-2011 7:01pm

It's a good start, I would also move away from px based measurements, and also, now that you have stuff seperated,

Try loading this bit of javascript and seeing what happens.

$('#menulist a').click(

	function(e){ 
		e.preventDefault(); 
		$('.tab_container').fadeOut(200,function(){
			var link = e.target;
			$(link.parentNode).addClass('actives').siblings('li').removeClass('actives');
			$('.tab_container').load(link.href +' .tab_container', function(){
				
				$('.tab_container').fadeIn(200);
			});
		});
		
	}
);

Just a quick example that now has a fallback, you can leverage the hashchange event if you need to track history changes.

pixeldesign · 19-12-2011 7:46pm

Giblet wrote: »
It's a good start, I would also move away from px based measurements, and also, now that you have stuff seperated,

Try loading this bit of javascript and seeing what happens.
$(&#39;#menulist a&#39;).click(

&#9;function(e){ 
&#9;&#9;e.preventDefault(); 
&#9;&#9;$(&#39;.tab_container&#39;).fadeOut(200,function(){
&#9;&#9;&#9;var link = e.target;
&#9;&#9;&#9;$(link.parentNode).addClass(&#39;actives&#39;).siblings(&#39;li&#39;).removeClass(&#39;actives&#39;);
&#9;&#9;&#9;$(&#39;.tab_container&#39;).load(link.href +&#39; .tab_container&#39;, function(){
&#9;&#9;&#9;&#9;
&#9;&#9;&#9;&#9;$(&#39;.tab_container&#39;).fadeIn(200);
&#9;&#9;&#9;});
&#9;&#9;});
&#9;&#9;
&#9;}
);
Just a quick example that now has a fallback, you can leverage the hashchange event if you need to track history changes.

Thanks for the code but now the navigation doesn't rely on JavaScript.I just splitted the content on 5 different pages instead of using ajax or jquery.

Giblet · 19-12-2011 7:58pm

What I mean is, that with the base of standard navigation, using that code, you can "enhance the functionality", rather than basing the whole structure around it. Try it and see. Browsers without JavaScript, or which fail with future jQuery releases (it has happened), you won't lose your base navigation. This is pretty much standard procedure. So you can have faster responses / transitions, but you have a solid base.

pixeldesign · 19-12-2011 8:17pm

Thanks again! I know what you mean now.

Anything else i should change?

Basq · 19-12-2011 8:21pm

The 'Project Photos' under Portfolio are huge... 1263 x 962 is one I clicked on.

I'd say lower them to a sensible 800 x 600.

pixeldesign · 19-12-2011 8:36pm

Thanks Basq .I was thinking about that, but i thought the quality of picture will decrease.I`ll resize it anyway.

pixeldesign · 19-12-2011 8:49pm

Ok,i set the size on auto, to auto resize to fit the screen and i added a button for full screen.

Giblet · 19-12-2011 9:07pm

pixeldesign wrote: »

Ok,i set the size on auto, to auto resize to fit the screen and i added a button for full screen.

Try remove all widths from your CSS and HTML, especially where you see "px", then build it back up using proportional widths. (em and %).
I know 960 is all the rage, but what about 94%? Would work on more browsers then?

Basically what I'm getting at, is when I interview a designer, I want one website to show off everything to me. I'll turn off Javascript, I'll disable styles, I'll look at IE6, I'll use phones, even wap phones. I'm looking for that guy who thought of everything, who is concious of what goes on across all browsers. I basically do a stress test, and ignore all fancy plugins. I think you could have a good site, but Imagine how confident you could feel knowing it stands up to all scrutiny? The guy who does that is the guy who has less bugs in the future, and is covered mostly when the unknown hits. I'd work on making it mobile purely for the fact that you want to show off that you have it covered. That means media queries and responsive design. And despite all you hear, the less script, the better (But for designers, jQuery is fine, I'll just attack you if you go to production with it ;P)

pixeldesign · 19-12-2011 9:41pm

Giblet wrote: »

Try remove all widths from your CSS and HTML, especially where you see "px", then build it back up using proportional widths. (em and %).
I know 960 is all the rage, but what about 94%? Would work on more browsers then?

Basically what I'm getting at, is when I interview a designer, I want one website to show off everything to me. I'll turn off Javascript, I'll disable styles, I'll look at IE6, I'll use phones, even wap phones. I'm looking for that guy who thought of everything, who is concious of what goes on across all browsers. I basically do a stress test, and ignore all fancy plugins. I think you could have a good site, but Imagine how confident you could feel knowing it stands up to all scrutiny? The guy who does that is the guy who has less bugs in the future, and is covered mostly when the unknown hits. I'd work on making it mobile purely for the fact that you want to show off that you have it covered. That means media queries and responsive design. And despite all you hear, the less script, the better (But for designers, jQuery is fine, I'll just attack you if you go to production with it ;P)

I know percentages might be better in some cases,but if i replace px with % when browser is resized, divs will resize as well and i don`t want that.You can see in the picture what i mean.
If i use pixels i can easily set a min-width when browser is resized

As for the mobile, the best choice is to build a separate template for them (which i`ll do soon) rather than adapating this one.

About the ie6 .Less than 2 percent of internet users use that browser.I wouldn't worry too much about it.

Giblet · 19-12-2011 10:04pm

pixeldesign wrote: »

I know percentages might be better in some cases,but if i replace px with % when browser is resized, divs will resize as well and i don`t want that.You can see in the picture what i mean.
If i use pixels i can easily set a min-width when browser is resized

As for the mobile, the best choice is to build a separate template for them (which i`ll do soon) rather than adapating this one.

About the ie6 .Less than 2 percent of internet users use that browser.I wouldn't worry too much about it.

You could use a media query here, and make the text snap under the image. You don't need to ever build two websites, again, laziness and misunderstanding. What happens when a 320x200 iWatch comes out? Another website? Or an adaptive one? What about a browser on a e-Ink kindle in 2 years time?

Think harder. You don't need to worry about IE6, but what if your client does? And it's more like 20% in certain demographics. Sure people didn't care about IE6 until the some of the same issues came up in mobile Safari (positioning issues with viewports). All I'm saying is, make sure it works to some extent, but by all means, enhance the functionality through styles etc, to take advantage of all the new crap everyone loves.

Here's a screen of what it could look like in a mobile browser using some basic media queries and proportional design, this looks exactly as you have it in a normal browser, it just changes position when you reduce the screen size. You can still set max-widths in px if you want as long as you don't mind having a tiny website in a 4k res screen.

Giblet · 20-12-2011 12:45am

Just had a quick look there on my phone and was nice to be able to read it and see it without zooming in

pixeldesign · 20-12-2011 1:25am

Finally finished the stylesheets for mobile devices

.Thanks a lot Giblet!
I go to PC World tomorrow and i`ll test it on all computers.

pixie_dust · 20-12-2011 6:40pm

Nice design, if there was anything that bugged me a tiny bit, it would be the avatar on the "portfolio" page. I think it is not correctly positioned - maybe if you put it closer to the portfolio title it might blend better.

Also, you have the cream background for your content on most pages except for "portfolio" and the home page. Maybe if you could bring some cream border into both those pages, it might add consistency.

Also on the homepage, the "i like to create...." bit could move a bit towards the right and look like it's coming from the avatar a bit more. Maybe you could use the pencil ring that you are using for the links around it(very faintly) so it looks like a speech bubble.

But I'm just being overly critical, really nice clean design!

pixeldesign · 20-12-2011 8:09pm

Thank you! I moved the mascot a little bit closer to the title.
I'm not sure where i could use the cream on index and portfolio page..i`ll think about that.

gerryR · 20-12-2011 8:27pm

Very minor one but no spaces after a period '.' looks bad.

Really like the site though!

pixeldesign · 20-12-2011 8:46pm

gerryR wrote: »

Very minor one but no spaces after a period '.' looks bad.

Really like the site though!

Thanks for pointing this out

I added spaces after each "."

pixeldesign · 22-12-2011 2:45pm

Ok, i went to pc world and i tested it.Works perfect on all even on ipad, except mac which has a big screen.Seems like i have to replace pixels with percentages as Giblet said.

Also is it loading fast for you guys?The server is not in Ireland but at home the loading speed is good, today in pc world it took like 80 seconds to load.

Giblet · 22-12-2011 5:36pm

Nothing too bad, but some of the images are over 100k, which is quite large considering how small they are (400x400 or thereabouts).

Also, some of your centering is off now, something must have changed.

pixeldesign · 22-12-2011 6:18pm

Thanks! I`ll try to minify them as much as possible.I was trying to replace to widths and probably you caught me :P everything is back to normal now.

Giblet · 22-12-2011 6:46pm

pixeldesign wrote: »

Thanks! I`ll try to minify them as much as possible.I was trying to replace to widths and probably you caught me :P everything is back to normal now.

Ok, a huge tip here then.

Never do changes on production!!! Always have a local copy to test before you upload. This will save you so much grief.

Review my portfolio

Comments