594 posts
  • Has been part of the Envato Community for over 4 years
  • Has referred 10+ members
  • Has sold $10,000+ on Envato Market
  • Has been a beta tester for an Envato feature
+5 more
designcise says

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!

108 posts
  • Has been part of the Envato Community for over 4 years
  • Located in Australia
  • Has collected 1+ items on Envato Market
  • Sells items exclusively on Envato Market
Australiaa says

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

594 posts
  • Has been part of the Envato Community for over 4 years
  • Has referred 10+ members
  • Has sold $10,000+ on Envato Market
  • Has been a beta tester for an Envato feature
+5 more
designcise says

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!

108 posts
  • Has been part of the Envato Community for over 4 years
  • Located in Australia
  • Has collected 1+ items on Envato Market
  • Sells items exclusively on Envato Market
Australiaa says

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

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

108 posts
  • Has been part of the Envato Community for over 4 years
  • Located in Australia
  • Has collected 1+ items on Envato Market
  • Sells items exclusively on Envato Market
Australiaa says

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.

Perhaps hover effect on gallery image:
.gallery > li > a > img:hover { border: 3px solid #d35750; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.75); } {
}
font hover:
.gallery > li > a > h5:hover { color: #d35750; font-weight: 600; margin-top: 20px; } {
}
Just playing with it, so dont listen to me.
1036 posts
  • Has referred 200+ members
  • Has sold $125,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
+9 more
Pixelworkshop says

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 :)

594 posts
  • Has been part of the Envato Community for over 4 years
  • Has referred 10+ members
  • Has sold $10,000+ on Envato Market
  • Has been a beta tester for an Envato feature
+5 more
designcise says

@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 :\

594 posts
  • Has been part of the Envato Community for over 4 years
  • Has referred 10+ members
  • Has sold $10,000+ on Envato Market
  • Has been a beta tester for an Envato feature
+5 more
designcise says
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 :p lol .. so i have the options from:

  • Keep heading background + make spacing 50px
  • Remove heading background + make spacing 15px
108 posts
  • Has been part of the Envato Community for over 4 years
  • Located in Australia
  • Has collected 1+ items on Envato Market
  • Sells items exclusively on Envato Market
Australiaa says

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

594 posts
  • Has been part of the Envato Community for over 4 years
  • Has referred 10+ members
  • Has sold $10,000+ on Envato Market
  • Has been a beta tester for an Envato feature
+5 more
designcise says

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 ..

by
by
by
by
by
by