Portfolio design, critique needed

[shamrock593]

Hi guys,

I've designed my main page and I've set out what I want to establish layout-wise for the rest of my pages so before I get to carried away I'd like some sort of input.

A few things I should mention first:

- I like clean contemporary designs, I think this does it well
- I want to increase the separation of 'Latest designs' and the rest of the page but I'm not sure how yet
- I think the dark grey and teal work well together provided theirs graphics in the centre of the page as to not distract into the background

Click for the home page / links don't work by the way:

Home page

The portfolio page is probably going to look like this:

http://img185.imageshack.us/img185/9458/clprac12ox9.jpg

Thanks! Any opinions are extremely welcome.

 

[macintosh tech]

Looks fine, pretty standard. A few things though.Tthe font for the category titles seems too rigid, it doesn't flow with the rest of the design.

Also, the "execution. performance. effect. result." bit, is a little too much. Many people are in love with these types of slogans, they have a sort of truncated power to them. Fact is, they generally sound pretty lame. I don't think this is an exception to that generalization. The name of your company is plenty, in fact I would work to make that a bit smaller in the scheme of things. The design will speak for itself.

Maybe shrink that header down a bit. People are already at your site, so they don't need to see the name of your company in huge letters at the top.

I would tone down the color a bit as well, they provide a distraction from the design itself. Go darker as much as possible.

Hope that helps. Obviously all my subjective opinion, and no harm is intended.

 

[shamrock593]

Looks fine, pretty standard. A few things though.Tthe font for the category titles seems too rigid, it doesn't flow with the rest of the design.

Also, the "execution. performance. effect. result." bit, is a little too much. Many people are in love with these types of slogans, they have a sort of truncated power to them. Fact is, they generally sound pretty lame. I don't think this is an exception to that generalization. The name of your company is plenty, in fact I would work to make that a bit smaller in the scheme of things. The design will speak for itself.

Maybe shrink that header down a bit. People are already at your site, so they don't need to see the name of your company in huge letters at the top.

I would tone down the color a bit as well, they provide a distraction from the design itself. Go darker as much as possible.

Hope that helps. Obviously all my subjective opinion, and no harm is intended.

Standard? I really don't want the design to be 'standard', is it really that generic?

I agree with you with the slogan bit and the header size. And I might soften the font used for the panels, maybe use Myriad Pro like I did in the nav bar.

Thanks

 

[Cabbit]

dull. generic. uninteresting.

 

[shamrock593]

Is it really that bad?

 

[Cabbit]

yip looks not much past a dreamweaver template.

 

[Lau]

dull. generic. uninteresting.

That's hardly very helpful. Even if you don't like it, you could at least be constructive in your criticism, especially when people have given you detailed and useful comments on your sites in the past.



shamrock593, I wouldn't say it stood out as a massively exciting design, but then if you are wanting to show off design work, you don't necessarily want it to overpower the work you're showing. It can be more of a vehicle to show that work than a complex design in itself (and I think it does that).

One technical issue is that I'm viewing it on a 12" iBook (1024x768 resolution) and that the edges are cut off as it's too wide. This is a very small screen these days though, so this might not bother you too much (as you might prefer it to be optimised for a larger screen), but I thought I'd point it out.


Edit: I think the biggest change to make it a bit easier to read would be to introduce a bit more 'white space' (or in this case black space ) to it – the text could be slightly smaller, allowing for larger margins and a bit more space around it all. I think the "Fionnbreen" title could also be smaller, but in the same green space, again giving it a bit more breathing space.

 

[Cabbit]

That's hardly very helpful. Even if you don't like it, you could at least be constructive in your criticism, especially when people have given you detailed and useful comments on your sites in the past.



shamrock593, I wouldn't say it stood out as a massively exciting design, but then if you are wanting to show off design work, you don't necessarily want it to overpower the work you're showing. It can be more of a vehicle to show that work than a complex design in itself.

One technical issue is that I'm viewing it on a 12" iBook (1024x768 resolution) and that the edges are cut off as it's too wide. This is a very small screen these days though, so this might not bother you too much (as you might prefer it to be optimised for a larger screen), but I thought I'd point it out.

It's difficult to give more detail, it just doesn't spark interest and that is the flaw with the design here, yet looking at the work produced this designer should have a site that shows of his/her talent not something that looks like a dreamweaver template.

 

[Cabbit]

That's hardly very helpful. Even if you don't like it, you could at least be constructive in your criticism, especially when people have given you detailed and useful comments on your sites in the past.



shamrock593, I wouldn't say it stood out as a massively exciting design, but then if you are wanting to show off design work, you don't necessarily want it to overpower the work you're showing. It can be more of a vehicle to show that work than a complex design in itself.

One technical issue is that I'm viewing it on a 12" iBook (1024x768 resolution) and that the edges are cut off as it's too wide. This is a very small screen these days though, so this might not bother you too much (as you might prefer it to be optimised for a larger screen), but I thought I'd point it out.

It's difficult to give more detail, it just doesn't spark interest and that is the flaw with the design here, yet looking at the work produced this designer should have a site that shows of his/her talent not something that looks like a dreamweaver template.


edit: the portfolio page feels different perhaps the padding on the mockup you did.

 

[shamrock593]

That's hardly very helpful. Even if you don't like it, you could at least be constructive in your criticism, especially when people have given you detailed and useful comments on your sites in the past.



shamrock593, I wouldn't say it stood out as a massively exciting design, but then if you are wanting to show off design work, you don't necessarily want it to overpower the work you're showing. It can be more of a vehicle to show that work than a complex design in itself.

One technical issue is that I'm viewing it on a 12" iBook (1024x768 resolution) and that the edges are cut off as it's too wide. This is a very small screen these days though, so this might not bother you too much (as you might prefer it to be optimised for a larger screen), but I thought I'd point it out.

The header is 800px wide, so there shouldn't be any size problems. That's strange, maybe its the extra width of the browser window or something. Is it fully maximised?

yip looks not much past a dreamweaver template.

See this is the part where it gets insulting. I've spent a lot of time designing it, and I was just after an opinion, not an insult.

It's difficult to give more detail, it just doesn't spark interest and that is the flaw with the design here, yet looking at the work produced this designer should have a site that shows of his/her talent not something that looks like a dreamweaver template.

Okay, fair enough, I get what you're saying. So should I stay away from simple geometrical designs?

 

[Lau]

The header is 800px wide, so there shouldn't be any size problems. That's strange, maybe its the extra width of the browser window or something. Is it fully maximised?

Actually, I do have my browser window quite small, and by dragging it a bit bigger, I can fit it all on my screen so I think you're fine. You don't want to make it too small or it gets lost on a larger screen. Sorry for worrying you, ignore me!

 

[macintosh tech]

Standard? I really don't want the design to be 'standard', is it really that generic?

I agree with you with the slogan bit and the header size. And I might soften the font used for the panels, maybe use Myriad Pro like I did in the nav bar.

Thanks

No problem.

You could entertain having a seperate look for the portfolio, but within the same general format. For example, if you like the turquoise color keep that on all the pages except the portfolio. On the portfolio page however, fade that to a darker gray to put more focus on the design.

Also, don't pay attention to the people who don't offer much other than, "it sucks." They aren't worth the time.

 

[Cabbit]

Okay, fair enough, I get what you're saying. So should I stay away from simple geometrical designs?

The design needs a bit of flair to it, less boxy looking. The shade of green i suggest you use should be closer to #69a303 which is a really organic and vibrant color.

The lighter shade for the navigation bar is low contrast and you can pull of a similar effect using css without the text being images. Ariel tends to be the most screen readable for buttons and verdana for body text. And perhaps give headings like "Latest Design" a more prominent exposure.

And my flat mates rather interesting insight.

It looks like a flat peace of paper, its dull. There is no rollovers on the link thing.

Now her insite isn't very helpful i understand but it follows my thinking of what i see it doesn't show of your work well nor inspire. I feel this particular design needs a lot of work but try changing some colors.

One more thing i noticed the body links are very hard to see on the grey background, this may look ok on your screen and others but on both of my Macbook and 19inch TFT its hard to see it.

 

[Me1000]

one more thing from a usability aspect, if you are going to make it 800px wide drop it down to 750px. that way it gives people running at 800x600 that little extra room for their scroll bar.

If not then when you pages starts to scroll down the page is going to be too wide and they will see horizontal scroll bars too.

EDIT: and use text for you navigation, I dont really see a reason you are using images right now. This will increase accessibility and SEO

 

[shamrock593]

The design needs a bit of flair to it, less boxy looking. The shade of green i suggest you use should be closer to #69a303 which is a really organic and vibrant color.

The lighter shade for the navigation bar is low contrast and you can pull of a similar effect using css without the text being images. Ariel tends to be the most screen readable for buttons and verdana for body text. And perhaps give headings like "Latest Design" a more prominent exposure.

And my flat mates rather interesting insight.

Now her insite isn't very helpful i understand but it follows my thinking of what i see it doesn't show of your work well nor inspire. I feel this particular design needs a lot of work but try changing some colors.

One more thing i noticed the body links are very hard to see on the grey background, this may look ok on your screen and others but on both of my Macbook and 19inch TFT its hard to see it.

I've given it another shot and I've followed a couple of users advice and:

- reduced the header size
- made 'latest design' more prominent
- got rid of the 'boxy' structure

I've also added:

- some organic lines (make it more free-flowing and less geometrical_
- reduced the number of thumbnails as I don't have enough body text to compensate for it
- drawn the header color into the design

Thoughts?

one more thing from a usability aspect, if you are going to make it 800px wide drop it down to 750px. that way it gives people running at 800x600 that little extra room for their scroll bar.

If not then when you pages starts to scroll down the page is going to be too wide and they will see horizontal scroll bars too.

Good point, I will adjust that. Thanks for that.

EDIT: and use text for you navigation, I dont really see a reason you are using images right now. This will increase accessibility and SEO

I used images because I was using Myriad Pro as the font.

 

[Col127]

it's a good start... i don't see it being bad having something geometrical, more image-rich with big type. that's actual a trend i've noticed on a lot of agency websites and it can work well.

it really depends what you're trying to accomplish. having a duller background allows the colours from your actual work to pop more. and having a simpler layout may help focus the user's attention on your work too.

of course an argument can be said that your website should also reflect your work too and the type of your designer, but there's lots of thoughts on that. if you look at agency sites, some are really creative, some are very corporate, some are in between.

my portfolio site is really straightforward too - could i make it more "interesting" and have more pizzaz? sure, but at the end of the day, you want people to see the work you've done. the site is really just a shell to house all of it.

i have a friend who runs his own branding company. he does fantastic work. his website is a straight one-page html page. he has tons of clients and is really successful.

I've given it another shot and I've followed a couple of users advice and:

- reduced the header size
- made 'latest design' more prominent
- got rid of the 'boxy' structure

I've also added:

- some organic lines (make it more free-flowing and less geometrical_
- reduced the number of thumbnails as I don't have enough body text to compensate for it
- drawn the header color into the design

Thoughts?

Good point, I will adjust that. Thanks for that.



I used images because I was using Myriad Pro as the font.

 

[Cabbit]

I've given it another shot and I've followed a couple of users advice and:

- reduced the header size
- made 'latest design' more prominent
- got rid of the 'boxy' structure

I've also added:

- some organic lines (make it more free-flowing and less geometrical_
- reduced the number of thumbnails as I don't have enough body text to compensate for it
- drawn the header color into the design

Thoughts?

Good point, I will adjust that. Thanks for that.



I used images because I was using Myriad Pro as the font.

I like most of this design except for the navigation bar but its a much nicer over all design. Try to use only web safe fonts and not use any images with text as its not accessible nor search engine friendly.
Also in some countries such as the Scotland and England failing to provide reasonable accessibility to any website that preforms a service such as a web store or service is illegal and carries hefty fines so be sure to check the law in your area.

 

[IgnatiusTheKing]

I like the 2nd iteration much more than the first. Clean and simple, but not pedestrian (as opposed to the first, which did have a template-ish look to it).

I'm not crazy about the dark gray background; I think it works, so it's probably just a personal taste issue. I really like the bar at the top and the background "swooshy" lines. I agree that the nav bar needs a little work, possibly just making the text into a complimentary color.

 

[Claytoniss]

i have a friend who runs his own branding company. he does fantastic work. his website is a straight one-page html page. he has tons of clients and is really successful.

I agree, I can't remember where I saw a bunch of examples of a single page HTML website. Smashmag, or youthedesigner, it was a good list. Work spoke for itself.

Its all what you are showcasing. If it was just print or design these of course can be completley different approaches.

 

[shamrock593]

I like most of this design except for the navigation bar but its a much nicer over all design. Try to use only web safe fonts and not use any images with text as its not accessible nor search engine friendly.

Don't alt tags provide accessibly for screen readers and such? A good majority use images for navigation, I didn't think it was a big issue.

Also in some countries such as the Scotland and England failing to provide reasonable accessibility to any website that preforms a service such as a web store or service is illegal and carries hefty fines so be sure to check the law in your area.

Both my HTML and CSS are valid, also my website does not provide a service, it is not a business. I'm 17 and it's simply a design portfolio. And to be honest, there seems to be some sort of prejudicial undertone with your posts, I don't know what it is but you're coming across as quite blunt and harsh. I'm not sure if you intend to do this, but that's how I'm seeing it.

i have a friend who runs his own branding company. he does fantastic work. his website is a straight one-page html page. he has tons of clients and is really successful.

I was thinking this recently, and I was thinking about implementing it so the header always stays on top, and there are rectangular crops of designs that scroll below the header. That allows for the design to be 'to the point' and have minimal navigation.

I'm not crazy about the dark gray background; I think it works, so it's probably just a personal taste issue. I really like the bar at the top and the background "swooshy" lines. I agree that the nav bar needs a little work, possibly just making the text into a complimentary color.

Thanks

Colour: the grey is too dull, I agree. After playing around with it a bit more, dark brown works better and is more vibrant.

Nav bar: pink works?:

 

[jamisonbaines]

edit: updated attempt looks a lot better

that'll teach me not to leave tabs open & reply later

 

[LeviG]

I know this might be the style of design you're aiming for but the whole concept at present seems like a blog rather than a portfolio to me.

I can't say it's really original either and from the small amount of work I've seen on your site it doesn't (in my opinion) really do your skills justice.

There's also my pet hate with websites - the text is jagged, if you are going to stick with the current geometric style then please justify the text so its neat and tidy at the edge of the page.

 

[shamrock593]

I know this might be the style of design you're aiming for but the whole concept at present seems like a blog rather than a portfolio to me.

I was going for this structure:

Header

Intro text (Hi, my name is ..)

Design

Description

Design

Description etc.

Copyright

--

Although the 'latest designs' will be scrapped as it will most likely be a one page portfolio.

I can't say it's really original either and from the small amount of work I've seen on your site it doesn't (in my opinion) really do your skills justice.

This is because if I'm given an objective, a task or a brief I know what to do. I instantly start playing around with ideas, sketching on a piece of paper, and brainstorming design ideas. But with my portfolio it only has one objective: to showcase my work. This objective does not help define colour or any sort of element that it should contain. Do you get where I'm coming from? Designing a website for a band would be easier for me as I already know what to start with, and I can use album covers / current websites etc. to help brainstorm ideas and get a feel for what the client is looking for.

This is definitely an aspect I need to work on, but I'm sure this will come with time and experience, especially when I go into Uni next year.

Do you have any suggestions on how to solve this mental roadblock?

There's also my pet hate with websites - the text is jagged, if you are going to stick with the current geometric style then please justify the text so its neat and tidy at the edge of the page.

I've scrapped with the first design. But yes, I will justify in the future, thanks.

 

[Cabbit]

Don't alt tags provide accessibly for screen readers and such? A good majority use images for navigation, I didn't think it was a big issue.
Both my HTML and CSS are valid, also my website does not provide a service, it is not a business. I'm 17 and it's simply a design portfolio. And to be honest, there seems to be some sort of prejudicial undertone with your posts, I don't know what it is but you're coming across as quite blunt and harsh. I'm not sure if you intend to do this, but that's how I'm seeing it.

Alt tags fortunately are not the only means for accessibility, making sure most if not all your text is text and not images will help visual impaired users as they can use features such as apple + to increase the text size of all elements making it easier to read.
I mention accessibility laws as it is something every designer must take into consideration otherwise you are missing hugh market areas, i believe it was found that up to 30% of all men in the uk have some form of color deficit disorder and most people have some sort of visual impairment especially in later life and it is important for your design to target the largest market within reason and law.
I suggest you look into these things if you wish to make a carrier out of design as they are very important and your clients require there products to be targeted at the largest available market.
I apologize if the tone of my posts seems a little cold i feel that minimal use of words is best to convey important information without fluffing it up to the point were it may miss the point.

http://www.w3.org/WAI/intro/accessibility.php here is some useful information on web accessibility. Addressing accessibility in all your web based designs is so easy to implement and has so many benefits for no visible loss other than a slightly less choice laden amount of fonts.

 

[LeviG]

--
Do you have any suggestions on how to solve this mental roadblock?

When I was designing my site I found a basis from my own style of work for when I'm presenting work to a client. This is quite minimalist, partly due to the type of work and partly due to me liking that style anyway. I also wanted to keep a corporate identity going so the colours were kept the same as existing materials.

It was then deciding on whether I wanted a more 'image' based site, a more 'text' based design or somewhere in the middle.

I took ideas from sites that I've visited and liked the style of, I've just scribbled down bits as I've gone, not that all of them were used. Used these as a basis for scribble designs/idea storming etc.

Came up with a flat image in sketches and then produced one in photoshop (I started with the 'gallery' page for some reason) and then designed the others to match. Then it was the fun of making it work, some initial ideas where scrapped as quite simply, my ideas were beyond my skills or required things like flash which I didn't want to use as I personally can't stand a flash based site (and I can't use flash)