Ajcates.com Redesign

[ajcates]

Ok so I have spent alot of time on this design, I think it is the best one yet. Right now it is only a psd, I have spent at least 10 hours on it so far. I have links to what it has looked like all thur out the design process, if there is something in like one of the past designs that I changed in the current that you think I shouldn't have, please tell me.

Past Designs
http://ajcates.com/public/dump/ajcates.png
http://ajcates.com/public/dump/ajcates2.png
http://ajcates.com/public/dump/ajcates3.png
http://ajcates.com/public/dump/ajcates4.png

Current Design
http://ajcates.com/public/dump/ajcatesThumb.png (http://ajcates.com/public/dump/ajcates5.png)
http://ajcates.com/public/dump/ajcates5.png

UPDATE:
http://ajcates.com/public/dump/ajcates6.png (http://ajcates.com/public/dump/ajcates5.png)

[Phenex]

- If you're gonna use THAT much of serif, get rid of the kiddy blues and yellows and greens and wa wa wa...

- Decrease the saturation on the reds a little more.

- Make the main logo WHITE or light grayish and WITHOUT any layer effects like Satins and Inner Glows and all those ficklepops.

- Increase the line height and use a thinner font for the main content.

- Align footer links to the left, properly.

- Again for the floral on the right side, please use a better anti-aliased brush or shape and don't use any inner glows or bevels or stuff like that and decrease the saturation on the colors please.

Oh and here's a velvety tip for ya - Add some noise in the header's background at very low opacity. See the character you get.

[Pasquale]

You need to work on uniformity, and balance. It kinda looks like you designed a template without the content in mind. Always design for more specific content, so you can tailor it to suit.

Also minimise on the colours. - Stick to two and use complementary hues and values. Avoid saturation as an easy way to distinguish. Work with contrast!

[built_by]

Yeah i would get rid of the black, lime green, and blue. Stick with your red, brown, and tan.

[fasterthanlight™]

Colours are all over the place


Sketch out what chunks of content you need for your site before beginning to design it... otherwise you are creating an "open-ended" design.... instead of designing exactly what you need.

You have those three coloured headers on the left, but I have a feeling you have those there only because you think you "might" need them when you have your content.


Organize your content first,

Create a basic wire-frame, and then start designing,

this will help you avoid re-designing over and over again

[icio]

You'll never be able to replicate that darkening of the background floral pattern at the bottom into the footer without using transparent PNGs unless you choose to not add the top gradient.

You can't have both unless it's a fixed-height site. Neither this or transparent PNGs is recommended, though the latter is becoming more and more supported (with javascript/css tricks for IE6).

[fasterthanlight™]

Yea thats the other thing,

What you have designed now is kind of impossible to do with CSS and HTML...

all those drop shadows and ornate vectors with drop shadows over the pixel background is going to give you problems... and like icio said, that bottom gradient on the background image is not going to happen.


Overall, you would benefit from making your design more simple, ditch a lot of your bevels, and drop shadows and gradient overlays... they are not necessary with this style of design

[ajcates]

I am gonna pull the blue in the side bar. And only have 4 colors, black, brown, red, and green.

Font for the main content, is not really final, because, I can align it and fit it better with css.

For the flora brush on the side, I am gonna have to get a better one, as the anti-aliasing on it makes me upset as well.

Gonna try the add noise effect.

Funny thing is the header text doesn't have any glows or satins, but it might look better as white or maybe the same color as the background on the main content.

In general take down the saturation.

My content is all on ajcates.com, After I get the look down that I want I am gonna start figuring out how content is gonna be laid out.

I will have an updated version up latter today. Along with a simple no effect version for FTL.

And watch me code this thing, its not that hard, I might get a little div soup but it can be done. In fact to test my ability's I was almost thinking about a liquid layout with it.

[fasterthanlight™]

Liquid?

How will you manage the floral overlays with the drop shadows being on top of a pixel background?

As a general rule of thumb: liquid layout != excessive drop shadows and pixel backgrounds,


Also, your palette is 6 deep, brown, black, red, blue, green, and tan.

and they all clash, the red blue and green are good on their own, but not with the brown tan and black...

either stick to brown tan and black (and maybe green for an accent) or go with the bright colours, there is two different styles of colour in this layout.

[Phenex]

there is two different styles of colour in this layout.

Absolutely.

One palette says "Yay! Kiddy Pops!". The other says "I'm Vintage. Let's rock that 60's style!". :D

[Pasquale]

ew you talk so kiddie black always :-o

[wes_design]

I just want to say great leap in your design from the last time, however that being said

expand the white area, if you choose to use pics with copy
your colors are fine it's your organization of information that sucks

your footer looks like a massive lists when it is to be a footer! not an information list or mini-site map

and your nave seems cute but unless those boxes disappear if you have less content per page it looks silly being empty

[ajcates]

@wes_design mini site maps in your footer is the new web 2.0 thing to do, look at http://digg.com, http://www.cssdrive.com, http://psdtuts.com and many other wbe 2.0 sites. Tonight I plan to revamp this design a whole lot taking in consideration what alot of you had said.

[Phenex]

ew you talk so kiddie black always :-o

Sup ugly? :chinaman:

[ajcates]

http://ajcates.com/public/dump/ajcates6.png

I am going for the "I'm Vintage. Let's rock that 60's style!"

Took down alot of the bright colors, toned the effects way down, got the styles and drop shadows fixed, I am still kinda lost for the footer. Added the slight noise for the header and footer. Also I added in some content, so you could see it kinda in action.

Also I can like see the code in my head behind the site, so don't you tell me it can't be done.

[Pasquale]

Sup(er) ugly? :chinaman: yeah you are :glasses::P


@aj - get a wireframe out and post it.

[ajcates]

What do you mean by a wireframe? like a grid to my layout?

[Esherido]

The text still feels way to big and bold.

[fasterthanlight™]

Don't use a serif font for your body content, or the links and text in the sidebar.

everywhere else use a serif font (headings, nav), but not for those two pieces of content...


*especially not for your code blocks

Don't fully-justify your body content either...

Your code block shouldn't have as dark of a background color, and the text should be lighter...

also, given that the corners are round, you're going to have a hard time allowing that div to expand while still maintaining the flourish background image.

Also, ditch the gradient overlay on your sidebar headings...

its too subtle of an effect to even be worth doing, and also, it would mean turning that text into image-based-text which is a pain in the lower sphincter region to update or modify



Sidebar links need light grey border-bottoms, and more padding

[Phenex]

I still think you're using waaaay too much of layer fx on everything.

And the green is still a little too stark. And in the sidebar, either keep the title holders all green or all red. Use one single color.