Portfolio Layout

[cC.ShorterGFX]

my first 1 so dont be to harsh

[Chris]

This should go to the design / interfaces forum. http://www.gfxvoid.com/forums/forumdisplay.php?f=48

I'll critique it when I get a bit more time today.

[cC.ShorterGFX]

ok

[Chris]

I'm so pissed....

I was almost done with your critique, had a whole page done. And then when I go to preview the post, the forum makes me log in again, and I lose everything....

[cC.ShorterGFX]

oh fuck

[Chris]

Okay well, first off, you want people to be harsh about your work. If they aren’t harsh, you’re not going to get any better. So really, you should be begging people to be harsh. Anyway, I’m going to give it to you straight. I’m not going to sugarcoat anything; I just want you to take some serious consideration into the things I’m saying, so neither of us wastes our time.

I took your image and made some notes on it. I’ll go over those later on in this critique; for now I’ll just hit on some of the things I think need the most attention.

#1 Logo

I see you have decided to go with a text based logo, and this is okay. It reminds me of sites like deviant art and bluesfear in that they use text to portray the brand. The only difference between yours and theirs is the application. You really want to inject a part of your style and design into the logo, to make it more personable to your design, and really more effective to your brand. There are a couple keywords you should take into consideration when you’re developing a logo. There’s actually about 5, but there’s only 3 I think should really stand out in your design process:

Simple. Versatile. Memorable.

Why simple? Most effective logos can get the point across using an obvious (or discrete) message, without too much clutter. Take for example, mcdonalds. The golden arch has triggered thoughts of happiness in children all over the world. Something about this brand makes people happy. It reminds them of convenience; of instant gratification. You don’t go to McDonalds because of the good food. You go there because it’s fast, and it’s consistent. The brand effectively triggers that. Its use of a singular color applies the simplicity factor. There are no shiny baubles hanging off the edge, or a cool looking 3d element. And yes, there are no c4ds. Believe it or not, a good logo does not have to include any of those things. It just has to be effective. Keep in mind the actual purpose of the logo. Contrary to popular belief, logos are not intended to “excite audiences” or make them want to come back to your site later. Your content will do that. Your logo simply puts a name on a face. Think of branding cattle. You wouldn’t come back to a cow pasture just to see a cool looking brand logo, would you? Don’t expect people to do that when it comes to your site, either.
Being versatile is another factor in ensuring the effectiveness of your logo. Say for instance, 3 months from now you decide to invest in your own freelance interests, and you pay to have some business cards done. You want those business cards to look good, right? So chances are, you’re going to want to make sure the logo suits the medium. In print, graphics look good. But there are definitely ways to do things wrong. Your use of color, the complexity of the design, the composition of the elements. All of these things can make or break your logo when it comes to print. And who’s to say you don’t get a couple t-shirts done. Maybe you want to hire a couple developers to your team, and you want uniformity. So you have some clothing done. You want your logo printed, so you have to make sure it looks good there. Versatility can be achieved easily by making sure you constrict yourself to a small set of colors, if not just 2. A common practice among logo designers is the practice of designing it first in black and white. If they can effectively create the logo with primitive colors, then the logo’s design is straightforward, and doesn’t need color to make it stand out or be effective. Keep this in mind.

The last thing I said was memorable. This all goes back to making something interesting and original. Think of what you’re trying to portray. What is your motive; your raison d’être. What is your purpose with this brand? Once you’ve figured that part out, then think of how you can integrate that into the logo. A presence of personality can make a dull looking logo a winning masterpiece. Your goal is to get people to remember you when they’re gone. I said that logos aren’t intended to get people to come back, but you want to make it original and creative enough to a point where if someone saw your logo somewhere besides on your site, they could make the connection. Being memorable is a powerful tool. Read the article Jacob Cass did on “What makes a good logo”. This will elaborate further on what I’ve explained here.


#2 Typography

The main thing I see that needs some attention here is your use of web-safe fonts. Tahoma Small Cap is not a web-safe font because not all users have it. You can see a list of good fonts to use here. I also would suggest you introduce some (not a lot) of diversity in terms of what fonts you do use. The main think you need to stay consistent with the font family you decide to use. Generally speaking, you should try to stick either with a serif family or a sans-serif family. Whatever suits the style you’re trying to use will dictate the type of serif you should use. One will look good, and the other will just not fit. Serif fonts tend to have a more aged look, with traditional lips and curves, while sans-serif fonts are clean-cut and crisp with a more modern look. Each of the elements on your page needs to be distinctive. Designing user interface elements does take a little practice, but once you’re used to looking at other people’s work and have figured out how some things should look, it should come naturally. In the design, your navigation font is a bit on the large side. Proportionately, it suits the layout, but I’m an advocate for whitespace. Empty space in a design can be a very effective tool of persuasion. It gives your content room to breathe, and helps your elements sit more complacently. Your font size can either make your layout cramped, or too airy. So it’s important to adjust accordingly.


#3 Content

I think you should definitely give some thought to what sort of content you want to present on this page. The big block of text you have on the right side really ruins any potential you might have with the other elements. #1. Give some margin and padding. Nothing looks worse than a paragraph text with no outside space. It makes things hard to read, and really presents a cluttered, unorganized appearance. #2 Content text should be between 12 and 14 px. Anything bigger and you have to fight for semantic importance with the other elements like header titles and page titles, etc. Make it easy on yourself and use a small, but legible font size.

Here are the notes I took on the actual image. I’ll explain each one as I go along.




1.The nav glow:

I noted this because it expands beyond the button. This is a possibility depending on how you develop the front end of the site. But if you were to slice the buttons as they are now, you’re going to need to figure out how to make the buttons more usable. Since the glow overlaps other elements you may need to slice, it’s going to be hard to do because as the note says “what happens when the page isn’t ‘home’?” You have the glow on the outer elements, but the originating glow on another button. Just something to consider.

2.The quicklinks:

I feel like you could use this as potential content, instead of having more links to other pages. The big deal is consolidation. How can you present meaningful content right to the user as they visit your site? If they have to click a bunch of things to get to the meat of your site, it’s going to be an unpleasant experience. In terms of webdesign, it’s not the journey, it’s the destination in almost every case.

3.The lack of space:

This was what I was referring to when I said you needed to add some margin to your elements. Right now they are extremely close and give a very cramped appearance to the layout as a whole. 3-5 pixels is a good range of space to have in a modal site like this. You should use a grid system to help you uniformly add margin to your layout, without losing consistency. This will make your overall design much more appealing, and a much more pleasant experience for your visitors.


4.The big blue ball.

What’s it for? I could see something interactive there, but you need to play with the idea. On the face of it, it’s very…unfriendly. It just sits there. What significance does it offer against the other elements in your layout? How can you make this a more constructive element and how can you make it more appealing? Give it some purpose. Designing layouts isn’t always about making things look good. It’s about how they work, and how well they cooperate with other elements. User experience plays a huge role in this type of design.


That’s all I have for now. You pm’ed me saying you wanted me to help you work more on this. Why not try to implement some of the ideas I talked about here, and I’ll show you how you could possibly code this. That way we aren’t totally starting from scratch.

Hope I helped!

[cC.ShorterGFX]

Wow this will definatley help :O thanks alot.
the white glow on the home button was to say that your on this page. if you went on the Blog page for example it would go to that button.
The blue orb was just for something to look at. Didnt have a purpose, just something i made a little while ago.
Thanks for this mate, i really appretiate it. When i get a little time ill read over this again and try some of these ideas.

[Eyedeology]

wow that was some good ass criticism lol i dont think i can top that..

[FreshTalent]

Immense only one word if the forums would let me :P x

[Scrib]

I would like to say well done to Chris, I was gonna say all of those things except the space needed and most of the logo stuff. Well done Chris +Repped.