Designcise.com feedback

Right now, I’ve just put up a single page linking to some of my work, and I know the markup isn’t perfect nor is the CSS (I intend to work on these with time). Right now, I really need feedback on the aesthetics, typography, contrast etc. so I can get the design right first and foremost.

Thank you!

No idea why this is flagged , looks good. Not keen on the top portion, with logo… Takes up way too much room.

who so ever flagged my post doesn’t know what he’s doing, I clearly put my post in the “off topic” forum and my intention wasn’t of self-promotion in any way.

anyway, hmm yeah i thought about that too but can’t seem to wrap my head around finding the ‘right solution’ to it. if i shrink the logo it might not look good; you think reducing the size of the logo might help or should i just reduce some of the negative spacing (gaps between different sections)? and what about the contrast? the colors on my laptop suck so I can’t be too sure if the text/background/footer etc. colors look alright on other machines and thanks for the reply! really appreciate it!

I am not in the office yet, so on the iPad.

The contrast does need tweaking I think. Will check it out again later.

8.00 am so bear with me.

#body, #mainBlock, #sideBlock, #bottomBlock {
    margin-top: 75px;
}

I would change to 15px, 75 is just way too much.

Perhaps: ditch the bg image in the block below, and set better spacing.

.mainHeading > h1 {
    height: 41px;
    padding-top: 12px;
    text-align: center;
    text-shadow: 0 3px 1px rgba(0, 0, 0, 0.75);
}

Overall I think its nice, but way to dark for my liking, the css effects on fonts in my opinion on dark bg need to be more defined.

.gallery > li > a > img:hover { border: 3px solid #d35750; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.75); } {
}

.gallery > li > a > h5:hover { color: #d35750; font-weight: 600; margin-top: 20px; } {
}

Today I started to convert a PSD and I faced the banding gradients issue with Photoshop… I see that we’re on the same boat

Anyway, I’d make them more subtle and they don’t fade with the background as they should. Horizontal dividers of 1px with a 1px shadow often look better. And for the overall design, there’s a lack of consistency in terms of sizes / spacing / padding / vertical rythm.

Hope that helps

@australia .. loving the detailed answers (with examples) lol thanks a bunch! i’ll have to try them to see how it turns out .. and about it being too dark, like i said my laptop sucks, and i sort of had a hunch it might end up being too dark .. thanks for letting me know, i might make the content background color a bit more blue-ish black-ish grey ..

i didn’t quite catch your point about the gallery hover effect .. is it not apparent at all? i think the shade of grey i’m using for the content background is too black to make out the differences .. kindly let me know about this .. thanks! and i think the heading font colors are quite contrasting (or are they not?) i was a bit worried about the paragraph text color though .. can you confirm if one or both need tweaking?

@Pixelworkshop .. which gradients are you specifically talking about? on my screen they look like they fade properly .. can you tell me the os/browser you’re using?

all the horizontal dividers i have, do have “1px with a 1px shadow” .. is it not apparent? (i think the blacks are getting mixed up again)

and can you be a little more specific about the inconsistencies? because i tried my best to keep it all consistent, specifically everything you mentioned lol .. but clearly it seems i failed ..

thanks you two! really appreciate it! still got a long way to go with the whole thing :\

Australia said

#body, #mainBlock, #sideBlock, #bottomBlock {
    margin-top: 75px;
}

I would change to 15px, 75 is just way too much.

Perhaps: ditch the bg image in the block below, and set better spacing.

.mainHeading > h1 {
    height: 41px;
    padding-top: 12px;
    text-align: center;
    text-shadow: 0 3px 1px rgba(0, 0, 0, 0.75);
}

just tried it out .. 15px spacing works without the background image .. not sure if i should keep the gradient in the back for headings, it does take up a lot of space .. but i kinda’ like how it looks with the gradient .. hmm .. totally confused now lol .. so i have the options from:

• Keep heading background + make spacing 50px
• Remove heading background + make spacing 15px

Obviously my critique is just my opinion.

But yeah the gallery images, have a border. And using color from your logo, I added :

.gallery > li > a > h5:hover { color: #d35750; font-weight: 600; margin-top: 20px; } {
}

Im not sure if this declaration is already in your css, as I am now not in the office.

Personally, I try to steer clear of images, esp: shades and backgrounds. Whilst they look fine.. its an extra server request that really is it worth it ?

But yeah spacing is seemingly biggest issue, so perhaps play with diff versions, and put up a few examples to gain some voting and additional response.

Regarding the gallery I think you need to focus more attention on UI , because your divs are so close together when transitioning the mouse across the different images etc, the cursor has little time to change from pointer, so more of an effort I feel is needed to focus users attention on current viewport.

Aside from that as I said I am no lover of dark websites, but should be good.

One last thing, you have different categories: tutorials, jquery etc. Do away with the text (jquery) in the description and add some kind of graphic on the image?

May give it some extra zing.. not 100% sure. I hate typing stuff to explain an element when a small icon ( spritesheet works best ) can accomplish the task faster and with greater fluidity

the hover effects, i intend to enhance during the next increment, the first phase was to get the spacing and layout right which I’ll get working on now ..

and I agree about replacing text such as jQuery with an image .. i’ll probably make these overlay the thumbnail upon hover ..

thanks a lot for the feedback .. let me know if you find any differences on your office computer ..