my portfolio, finished at last

[razuel]

www.greenleak.com (http://www.greenleak.com)

This was put together in a hurry actually. Last week I was contacted by Y&R Chicago-- one of the largest advertising agencies about a possible internship (I'm a sophomore in college). My cousin who works in the business department gave them my name. I had no portfolio site, so I decided to spend 8 straight hours on a design and content writing and beg my friend to code it for little money on short notice.


The theory: (long and boring, only read if you're curious about my thought process)
I started this project with one thing in mind-- sell myself. First of all, the idea behind using a color is quite simple: to help create a connection between my work and me. By creating a simple theme I'm ensuring that it's more than just my name-- it's an entity within itself. I added a quite random word after it, leak, for the sake of memory. It's easier to remember greenleak.com than johnscianna.com, much easier. It also acts as a visual stimulate to help strengthen the connection, one can visualize green leaking throughout a Web site.

On each page I have a very short statement in the bottom right hand corner. This does a few things. First, it balances the content. Secondly, it pushes that connection between myself and the viewer a little more. It's almost as if I'm speaking directly to the person looking through my portfolio. Most of the statements relate to myself or design. On the portfolio the statements directly relate to the case study.

The design itself was kept very simple for the sake of displaying my work. I wanted my work to do the talking, but at the same time I needed a little something to make it stand out just a bit. The green leak theme is kept throughout the site. The banner is large and creates a nice contrast. The title somewhat shows green leaking out of the G. I put the proper way to say my name after my name to, again, strengthen the connection. I utilized negative space quite a bit. I love negative space and feel as though it's one of the most powerful tools in design. I left a little more space between the links and content to create a minor awkward tension and make it a little more interesting. The links were left verticle to create somewhat of a flow and contrast the horizontal banner/title.




That's it. No resume yet, but that'll come. Any critiques for future reference are welcome, but until I get more money this is set in stone ;)
I wrote all of the content very fast in notepad, though, so if you see any mistakes in grammar feel free to point them out.

[budafist]

Good things come in three.

Shouldn't that be threes?

I love the general look and feel of the website. I love green, so maybe I'm a big biased!

The GREENLEAK.COM logo is pretty sexy too. Simple, but different so not boring or bland.

Putting (see-an-uh) in is a really nice touch. It gives those reading about you the confidence that they know how to say your name properly.

The only issue I have with your portfolio is that there is text before the image after you click on the thumbnails. There is a lot of text to read before you get down to the work. I really don't think anyone would have to time to read everything. I would have been inclined to put the work first, text later. Maybe you have a reason for switching them over though. I'm happy to hear it.

[John G]

be careful with lightbox on your next rendition, it's becoming a bit cliche' in portfolio sites

[razuel]

Shouldn't that be threes?

I love the general look and feel of the website. I love green, so maybe I'm a big biased!

The GREENLEAK.COM logo is pretty sexy too. Simple, but different so not boring or bland.

Putting (see-an-uh) in is a really nice touch. It gives those reading about you the confidence that they know how to say your name properly.

The only issue I have with your portfolio is that there is text before the image after you click on the thumbnails. There is a lot of text to read before you get down to the work. I really don't think anyone would have to time to read everything. I would have been inclined to put the work first, text later. Maybe you have a reason for switching them over though. I'm happy to hear it.
Yep, I thought about that. I made sure the portfolio was the index page so that there are only 2 clicks before getting to an image. If someone doesn't care about the case study they can simple click on the image. I made very large image links so that a person knows that it's there very quickly.

The case studies were a must for me though. I've spoken to several potential employers and they all tell me the same thing, the why is extremely important. They want to know how I put the thoughts together.

If I get a lot of negative feedback on it I may end up just putting the images there with a link to the case studies.

As for the 'good things come in three.' I also thought about that and maybe should've put threes, but I think three works too-- I'm not sure to be honest.

Thanks for your comments!

P.S. I love green too :)

[razuel]

be careful with lightbox on your next rendition, it's becoming a bit cliche' in portfolio sites

Yeah definitely. I had very little time and grabbed the quickest thing really. What would you recommend for the future? I haven't really researched other possibilities yet. I want to stray away from flash and don't want to use a javascript popup box or anything.

[fingerPrint.Design]

On the about John page
you campaign with an extra space, like this cam paigns

[razuel]

On the about John page
you campaign with an extra space, like this cam paigns

Fixed, thanks :) I should probably get a copy of word.

[budafist]

My email client does spell check too :D Maybe yours does? I have it open all the time so it's faster for me to do my drafts in Mail than it is for me to open up a word processor.

[Two-Toe Tom]

here are some thoughts:

-on the portfolio page, maybe make "portfolio" in the navigation a different colour and make it just plain text (ie not a hyperlink) so it's clear that you're in that section. likewise for the other sections.

-alternate text for all the thumbnails is "0". you should replace that with the title of the piece.

-there is a slight initial delay on the mouseover images (before the mouseover image is cached). i think there's a simple javascript code you can use to get around that involving preloading the images.

-i think the 'back' links on the about john and contact page are unnecessary, it looks weird on the contact page.

other than that, nice work!

[razuel]

here are some thoughts:

-on the portfolio page, maybe make "portfolio" in the navigation a different colour and make it just plain text (ie not a hyperlink) so it's clear that you're in that section. likewise for the other sections.

-alternate text for all the thumbnails is "0". you should replace that with the title of the piece.

-there is a slight initial delay on the mouseover images (before the mouseover image is cached). i think there's a simple javascript code you can use to get around that involving preloading the images.

-i think the 'back' links on the about john and contact page are unnecessary, it looks weird on the contact page.

other than that, nice work!
-working on it
-done
-done
-and done

Thanks a lot, great advice!

I'm working on a compatibility issue with I.E. right now. In firefox the back buttons and statement look fine, but in IE for some reason the spacing isn't right.

[cjoe]

^^^ very impressive work, it even works in Opera!

[Helveticawho]

www.greenleak.com (http://www.greenleak.com)

This was put together in a hurry actually. Last week I was contacted by Y&R Chicago-- one of the largest advertising agencies about a possible internship (I'm a sophomore in college). My cousin who works in the business department gave them my name. I had no portfolio site, so I decided to spend 8 straight hours on a design and content writing and beg my friend to code it for little money on short notice.


The theory: (long and boring, only read if you're curious about my thought process)
I started this project with one thing in mind-- sell myself. First of all, the idea behind using a color is quite simple: to help create a connection between my work and me. By creating a simple theme I'm ensuring that it's more than just my name-- it's an entity within itself. I added a quite random word after it, leak, for the sake of memory. It's easier to remember greenleak.com than johnscianna.com, much easier. It also acts as a visual stimulate to help strengthen the connection, one can visualize green leaking throughout a Web site.

On each page I have a very short statement in the bottom right hand corner. This does a few things. First, it balances the content. Secondly, it pushes that connection between myself and the viewer a little more. It's almost as if I'm speaking directly to the person looking through my portfolio. Most of the statements relate to myself or design. On the portfolio the statements directly relate to the case study.

The design itself was kept very simple for the sake of displaying my work. I wanted my work to do the talking, but at the same time I needed a little something to make it stand out just a bit. The green leak theme is kept throughout the site. The banner is large and creates a nice contrast. The title somewhat shows green leaking out of the G. I put the proper way to say my name after my name to, again, strengthen the connection. I utilized negative space quite a bit. I love negative space and feel as though it's one of the most powerful tools in design. I left a little more space between the links and content to create a minor awkward tension and make it a little more interesting. The links were left verticle to create somewhat of a flow and contrast the horizontal banner/title.




That's it. No resume yet, but that'll come. Any critiques for future reference are welcome, but until I get more money this is set in stone ;)
I wrote all of the content very fast in notepad, though, so if you see any mistakes in grammar feel free to point them out.

If I could choose one word. Outstanding. As someone just starting out in graphic design, you present something that many aspire to come up with. Great work.

[razuel]

Thanks you cjoe and helvetica, it's nice to know my hard work is paying off.

[tZ]

You should learn semantic coding if your offering web services.

Other then that though the site design is decent. Nothing very innovative or anything but the work that you do present is above average. Really though when you break it down you should include more then just three logos in your portfolio and if you have done web work you should provide a link to the active sites.

[razuel]

You should learn semantic coding if your offering web services.

Other then that though the site design is decent. Nothing very innovative or anything but the work that you do present is above average. Really though when you break it down you should include more then just three logos in your portfolio and if you have done web work you should provide a link to the active sites.
Well i wasn't going for innovative in a few hours time, just trying to get the work up there in a presentable manner with purpose. ;)

I do Web design, not coding (although I have a basic knowledge and can tweak it). After speaking to several ad agencies and design firms I've come to learn that the higher level designers hand off their work to developers. As per their recommendation and my own judgement I'm putting my efforts towards improving on the aesthetics and theory rather than trying to do-it-all. That being said, as stated-- I handed this off to my coder, I didn't code anything. Not to mention-- I'm not applying as a Web designer. I'm working towards a Creative Director or Art Director position in the advertising field, which I should have specified, my bad.

I considered including more logos, but I felt as though 3 of my strongest pieces with case studies would be enough since, again, I'm not looking to become a graphic designer. I sent it off to a Creative Director and the ad agency I'm trying to intern at-- I'll see what they say about how much to include. What does everyone else think?

You're right, I need to provide active links to the sites. I'm going to work on getting them on my own server, thanks!

[tZ]

I'd find a new coder.

[razuel]

I'd find a new coder.

Is it really that bad? I mean it reads fluently to me, everything works fine in every browser-- not to mention he doesn't cost me an arm and a leg. He did this project in 2 nights for me as a favor.

But I am curious to know what's wrong with it, if it's a serious issue that clients may have with other work he does for my company then I definitely want to fix that.

[tZ]

The mark-up isn't semantic or web standard. Does it validate?

He's apparently stuck in the past or is using a mark-up generator.

For free though its good. I mean… it works.

If your not going to be offering or selling full on web services I doubt it will matter though.

it just erks me when I see tables(used for non tabular data) and non-semantic mark-up… thats all.

[razuel]

No I respect your opinion definitely. He does work for our company and we do provide full-service Web design, so it is an issue.

I have no idea what you said, because I'm not a coder, but I'll pass the message along and hopefully he can learn/fix it. He's a really good guy and has done great work for us, I'd rather have him improve than find someone new.

[cjoe]

If it works it works ^ but i think tZ has a valid point. Current practice dictates that all coding should be semantic, using XHTML strict and CSS, basically separating information structure and the presentation of that information.

[Quirk]

The case studies were a must for me though. I've spoken to several potential employers and they all tell me the same thing, the why is extremely important. They want to know how I put the thoughts together.


I've heard from professionals that it is important to have brief casestudies as well. I think it is a good idea to include them, but I think they need to be shorter and right to the point. I would think the images are still the most important, you have to remember the details (from what I hear, that is what most professionals will be looking for to tell if you really know what you are doing, and that you care about even the small things). So, keep in mind hierarchy while designing your page. Also, I would also make sure you pay attention to typography elements.

Just some things I've been thinking about while I've been building my portfolio. Hope they're helpful.

[razuel]

I've heard from professionals that it is important to have brief casestudies as well. I think it is a good idea to include them, but I think they need to be shorter and right to the point. I would think the images are still the most important, you have to remember the details (from what I hear, that is what most professionals will be looking for to tell if you really know what you are doing, and that you care about even the small things). So, keep in mind hierarchy while designing your page. Also, I would also make sure you pay attention to typography elements.

Just some things I've been thinking about while I've been building my portfolio. Hope they're helpful.

Well I thought about those things in detail really-- do you have specifics?

[Quirk]

Perhaps I am just being nit-picky, but make sure the hierarchy of your page is in order... decide what you want to be most important and make sure the hierarchy reflects that. Is it the images, or the case studies?

The line lengths are a little uncomfortable for me, and there is probably a way to make your call outs a little cleaner. This is completely a personal opinion, but I would open up the leading a little in the call outs as well, I just don't really think the negative leading is that attractive. I would also make sure you actually use an em dash rather than the double hyphen.

I know this was put together in a hurry, and I think it looks nice when taking that into consideration. Please, don't think I am being critical, I'm just making suggestions. These are just some of the things I would be thinking about if it were my site, and if you find them helpful that's great, if not, oh well.

[razuel]

Perhaps I am just being nit-picky, but make sure the hierarchy of your page is in order... decide what you want to be most important and make sure the hierarchy reflects that. Is it the images, or the case studies?

The line lengths are a little uncomfortable for me, and there is probably a way to make your call outs a little cleaner. This is completely a personal opinion, but I would open up the leading a little in the call outs as well, I just don't really think the negative leading is that attractive. I would also make sure you actually use an em dash rather than the double hyphen.

I know this was put together in a hurry, and I think it looks nice when taking that into consideration. Please, don't think I am being critical, I'm just making suggestions. These are just some of the things I would be thinking about if it were my site, and if you find them helpful that's great, if not, oh well.
No, I'm always looking to improve-- that's why I asked for specifics ;)

I think some people may be intimidated by responses/reactions at times on forums because you can't hear a person's voice. Crtitiques are much easier in person. I'm definitely thankful for any relevant opinions.

I think you're right about the case studies now that I think on it more. In my next version I'll definitely perfect that. I'm not too sure what you mean by 'call outs' and 'line lengths' though. I'll also use an actual em dash once I figure out how :)

Thanks for the critique!

[Quirk]

An ideal line length of text is usually between 45-75 characters (66 characers is a loose standard). Lines of text that are too long tier the reader's eyes.

Maybe I'm using the wrong terminology, what I am referring to as 'call outs' are the quotes you pulled out of your text on your about me page.

I know, communication over the net sucks. I am always afraid I'm being misinterpreted.

[razuel]

I didn't know that about line length, very helpful.

I agree about the call outs too. They irked me from the start, something just felt off with them, but I wanted to make the page a little more interesting than a bunch of text. I'll have to think on it more and figure out a better way to display it.

I definitely think that the typography of content text needs work now that I look at it more objectively. It'll be better next time for sure, but now I'm inspired to improve on it now ;) Perhaps now that I have something up just for that internship I'll start on a more polished version.

The feedback has been very helpful everyone, thanks to all of you who have given me input. I'll get to work and come back for more critiques on the newer version.

[GraphixNPrint]

I have been following the thread...

just wanted to add, best wishes on getting the internship!

[Design Slave]

There are a few small things.

Only one that really bugs me, and that the listing of 'other'

In my opinion 'other' means I couldn't come up with a description... or I haven't planed this out properly and had some pieces left over... and...

Having said that I think it looks really nice. Much better than most things on here.

[razuel]

You're completely right, I couldn't think of anything better. Maybe I'll use, 'documentation.'

Thanks a lot!

[colonel5]

I came in kind of late on this conversation but I too wish you the best of luck with that internship and for being a sophomore in college your work looks great.

Your thought process shows your potential and your work backs that up too.

I reiterate and ditto everything people said about getting your guy to learn xhtml/css etc

[Design Slave]

http://garthwilson.com/portfolio/images/gl.gif

Was thinking mby u should be planted in the ground. Growing strong. And all that psycho-babble.

It's a thought... not a design directive.

[Quirk]

http://garthwilson.com/portfolio/images/gl.gif

Was thinking mby u should be planted in the ground. Growing strong. And all that psycho-babble.

It's a thought... not a design directive.


I just noticed that would be the 'refresh' symbol in firefox if you would mirror it.

[Quirk]

I just noticed that would be the 'refresh' symbol in firefox if you would mirror it.

The 'G'...

[razuel]

I like the concept, but it'd really throw off the design as a whole. I really like the horizontal aspect of the title as is, with something shooting upwards it'd look out of place I think. I also don't think it conveys a leak at all in that form. Thanks for the suggestion though.

[xfxzone]

your portfolio make me feel like an idiot as designer, ur work its great dude

[Quirk]

I think I like it more horizontal as well.

[Design Slave]

I just noticed that would be the 'refresh' symbol in firefox if you would mirror it.

:) No doubt.

I was hoping that would be a good second read.

* Mental note: Quirk's one of the 'good' ones.

Hmm I understand, if you're cynical, that I may have meant that sarcastically. But I didn't. ;)

[Quirk]

:) No doubt.

I was hoping that would be a good second read.

* Mental note: Quirk's one of the 'good' ones.

Hmm I understand, if you're cynical, that I may have meant that sarcastically. But I didn't. ;)

I was thinking... the way you had it, it was like an 'unfresh' symbol in my mind, that's why I felt compelled to distinguish...

but, yeah... basically, just a little thought I felt like I needed to voice for some reason.