16 replies [Last post]
CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 13 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

This design falls into the Minimal style, meaning black and white with lots of white-space. This is my first attempt with this style design. There are many :hover effects going on, so pay attention.

Dry Creek

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 48 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

yeah I'm a great fan of

yeah I'm a great fan of minimal designs with lot's of breathing/white space they nearly always tend to look effective and smart, I always like layouts best at the early stages before too much clutter has been added.

I like this design, only gripe are the grapes, not keen on the shadow blur around them it's not coming across well on my monitors or Ibook and personally I'd love the grapes to have a touch more sharpness and definition - but these are minor nit picking things

Erm "Many" hover efects? what four! many! Smile see I was paying attention! Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 13 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

Quote: Erm "Many" hover

Quote:

Erm "Many" hover efects? what four! many! Smile see I was paying attention! Smile

There are :hover effects everywhere throughout the site, not just the home page. If you take a look at the css under "Backgrounds", you'll have a good idea of what I'm talking about here.

Thanks for the positive remarks! All these sites that you see me doing, are never for clients. This is just a hobby of mine Laughing out loud. I'm already coming up with ideas for my next theme.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 48 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

hmm silly me didn't think to

hmm silly me didn't think to look further, I do like the feel a lot; as for the hover effects yes I too used to do this a lot, taking icons and other sundry items and desaturating them for off state and then applying full image for on state, it's a good effect, however.. do not go to overboard with it you will know as well as I that less is more, too some extent you are using the effect too often? One place it's not hugely effective is the sales staff page at least one of those images looks a bit odd when the color is returned and overall I think those images are best left desaturated, again I find that with portraits it's often effective to desaturate or ever so slightly sepia them, B&W photos always tend to be more striking especially in facial portraits, at least imho

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 13 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

LOL, yeah, every single

LOL, yeah, every single image has a :hover effect (except big grapes image). HAHAha. Maybe i did take that a but too far. I got into a zone, and was just having too much fun! Yeah, those staff photos kinda suck. I grabbed most of the content from the actual Dry Creek website.

JoshuaJones
JoshuaJones's picture
Offline
newbie
Last seen: 10 years 20 weeks ago
Joined: 2009-06-01
Posts: 5
Points: 0

Yeah, not a huge fan of the

Yeah, not a huge fan of the grayed out / than color after hover look. Over all, I love the design. Flows well, I would just get rid of the hover effects you have going on.

evilsecret
Offline
newbie
Last seen: 10 years 25 weeks ago
Joined: 2009-06-02
Posts: 3
Points: 0

Nice effects

The hover effects are really awesome, seeing some of sites like this makes me feel, Our Imagination is the limit. The whole idea of the site in such simple yet meaningful.

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 13 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

thank you for your comments

thank you for your comments guys, means alot to me. I like the hover effects too. sometimes black & white sites can look boring. This design is fun!

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 10 hours 18 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Hi CupidsToejam, I really

Hi CupidsToejam,
I really like the design. Initially I clicked on the link before reading the comments and thought if I was doing it I'd add colour to the bottles on mouse over, then i moved my mouse and discovered that's just what you did.

My only suggestion is to use jQuery to keep the colour in the images once you have found them.
That may be a little too game like.

Now you just need to get each grape working independently. :rolleyes:

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 13 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

Quote: Now you just need to

Quote:

Now you just need to get each grape working independently. :rolleyes:

Wow, I think I can make that work! Thanks for the comments Tony!

underwurlde
underwurlde's picture
Offline
newbie
S.England - New Forest
Last seen: 10 years 25 weeks ago
S.England - New Forest
Joined: 2009-04-23
Posts: 8
Points: 0

Great layout, but menu issues for me

My 2p's..

I too am loving this design, crisp, clean & well laid out. It is obvious you know what you are doing and are on top of your game - I wish I had your insight & ability!

One thing I will mention as a constructive critisim: I do not however like the way the menu at the top works purely because it is not web-novice friendly & falls into one of those top 10 website no-no's.

Take for example 'News and Events', upon hovering your mouse on this MenuItem, another list of options springs out - this is cool, but now move mouse to 'Winery Blog' in a direct motion (diagonally) and the option is lost, to be replaced by another list of MenuItems.... no so cool?

Yes 'we' know that moving the mouse across first and then down will get one to 'Winery Blog', but will a web-novice be aware of this? Or will your potential customer get annoyed and go elsewhere?

Hope my insight is of some help,

Cheers,

Andy

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 8 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Your underwear is showing.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 16 hours 39 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9745
Points: 3824

The appearance is beautiful.

The appearance is beautiful. If your primary purpose is to showcase graphic design, you did well.

There are usability and accessibility issues.

The menu's flyouts are difficult to navigate. Moving the mouse horizontally leaves less maneuver room, and the cursor is all too likely to move out of the active zone. Multi-level menus should, in my opinion, drop down; the active area is then the width of the element, as opposed to the height of the element on a flyout.

The top level of the menu should take you somewhere; even if only to a page that acts as an entry-way to that section of the site.

In conjunction with the above, have you tried navigating with the keyboard? The sub-menus are invisible, right? How does one know where he's going? You need :focus properties to backstop the :hover selector. For UAs that don't support :focus, the top level needs to work, sending the user to an entry page with the sub-menu links.

I am not in favor of mouse-overs that are not indicative of something. A mouse-over that causes a change tells me the item is clickable, or is informational, e.g. it makes visible some bit of information I might want. Don't confuse your visitor by putting :hover effects on things that just sit there.

The logo/link to the home page should be a foreground image. Let javascript handle the mouseover effect, and let folks without css see the image. Same with the bottles of wine that accompany their descriptions.

Put a background color on the page. With a user's gray config, the sub menus and text are unreadable.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 24 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Hi Cupid - it's a great

Hi Cupid - it's a great effect, well done. I think I'm with Tony though in that I would like to see the colour stay on some pages - pics of vineyards etc - but then having the wine your mousing on saturate it rather good on the wine range page. I'm with the general opinion though, very atttractive.

@Tyssen - so what colour is your underwear Tyssen? Magenta or fluffy pink? Laughing out loud

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 13 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

@Tyssen - Wow, i thought if

@underwurlde - Those are very thoughtful words, thank you.

@Tyssen - Wow, i thought if it wasnt declared it would just default to white. Does it show color other then white, and if so, what browser?

@gary.turner - LOL, well you just ripped me a new one! You bring up some strong points and great suggestions.

@Smee - I didnt want the color to stay saturated after hover, I'm not even sure how I would accomplish that with no JS skills. The site is meant to be black and white, not black and white, then color. lol

Thank you all for your constructive criticism, and I will take all the ideas and recommendations to heart. I'm already deep into my next challenging project. This one will offer larger screens with more content! I remember somebody saying they wanted to see more sites that are friendly to larger screen sizes, a long time ago.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 8 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

CupidsToejam wrote:@Tyssen -

CupidsToejam wrote:

@Tyssen - Wow, i thought if it wasnt declared it would just default to white. Does it show color other then white, and if so, what browser?

All browsers let you set your own background colour. In Firefox go to Options / Contact / Fonts & Colours / Colours / Text & Background / Background colour.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 48 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Quote:i thought if it wasnt

Quote:

i thought if it wasnt declared it would just default to white. Does it show color other then white, and if so, what browser?

The default for the background property is nothing or more accurately 'Transparent' and which is also not inheritable; which if you think about it is as it has to be.

Due to there being a level of control granted via the cascade to user styles it's vital to ensure that those don't disrupt your author styles so a background declaration is vital.

Not so long ago on the forum every other question was regarding warnings people were getting from the jigsaw validator instructing them that they needed to observe background and foreground colour declarations.

CSS styles aside one has to be minded that OS such as Windows allow the user to make some quite horrendous changes to various aspects of their desktops which includes setting backgrounds to windows, something I fell foul of once having not set a body background and viewing on a friends system where they had set a terrible background image to all their windows, the site was simply not viewable.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me