Alley-Oop! for Pattern Tap.
More Matthew Smith
4
Skylar Hartman
Jake Ingman
David Yeiser
Cole Henleykeyboard shortcuts: ← previous shot → next shot L or F like
keyboard shortcuts: ← previous shot → next shot L or F like
Show and tell for designers.
44,048,922,794 pixels dribbbled
Copyright © 2009-2012 Dribbble LLC. All screenshots © their respective owners.
Handcrafted in Salem, Massachusetts. Hosted by (mt) Media Temple.
20 Responses
Pro
Matthew Smith
PLEASE REBOUND
We're looking for some ideas around the PT layout of the alpha. We've had a lot of varying feedback around the experimental layout, and the way that the hover state works. I'd love to see some examples of ideas from the Dribbble team and see if it can spur on some new thinking.
almost 2 years ago
What exactly would you like to focus on? The hovers, the layout or both?
almost 2 years ago
Pro
Brian Hoff
I think the focus should be a little lower so we can all see more of The Design Cubicle ;)
On a serious tip, I'm with Yaron... more focus on layout or the interaction of hover?
almost 2 years ago
Pro
Kevin Dees
not bad, loving the JQ
almost 2 years ago
Pro
Matthew Smith
@Yaron I want to see either. The hover state seems to be of real issue. To show the source button or not? To make the hover darker, or lighter (hover over a dark thumb to see the problems). To have a more static table layout like CSSline, or to have a more modular one as it is now on the Alpha....
almost 2 years ago
Pro
Phil Coffman
The hover state is a bit aggressive, so maybe something more subtle would be better. I'll put some thoughts around that specifically and if I come up with anything worth sharing I'll post a rebound.
The varying sizes for each entry does create some layout challenges, particularly with scan-ability. Not sure that means you need to go with a static table layout like CSSline though. More whitespace might be an option. Again I'll think more on this.
One thing I can say is the shadow at the top from the nav bar does distract from the experience. It's too much in my opinion. It almost makes those entries at the top look dirty or dingy.
almost 2 years ago
Pro
Ryan Scherf
@squaredeye I really love how you have chosen to stray from the typical "gallery" look. The one thing I'm not too keen on is the dark overlay when hovering an image. Maybe something brighter?
almost 2 years ago
Pro
Chad Engle
I'm not entirely sold on the placement of "SOURCE". I like it in the smaller snippets but the ones that are longer it feels weird seeing a box end up at the bottom of the shape if I rolled over it in the middle or top. I also really like the green brightness of the roll-over on the source. Maybe have that come up first? Then pick another rollover color or maybe a soft glow?
The black box on the black dark animation just doesn't say "click me". It also gets lost on images like this: http://cl.ly/1Qzt
The site is awesome however, I bookmarked it for some inspiration. As, I really love it... I just think (as others have) the dark rollover is too dark. If that green Source was on there it might lighten it up. (thats one option) I am going to think up a rebound as well.
almost 2 years ago
Pro
John Williams
I’ve been playing with the site today and I have yet to click on the source button. When I mouse over something, i’m already committed to clicking it. When I see that source button come up, I get a moment of panic and click the thumbnail anyway. It’s too much to think about when rolling over an element in my opinion. Also, I haven’t gotten enough info to decide whether I want to see the source. I just want to see it bigger.
almost 2 years ago
I find the layout a bit overwhelming. The combination of little negative space plus that space all being fragmented and the columns providing the only griddiness makes it very visually complex for me. I'm not sure where to focus, and what path my eyes should take.
Less seriously (in my opinion), I do agree that darkening a thumbnail on hover would seem to be a counterintuitive choice.
almost 2 years ago
Pro
Sean Hennessey
I think the hover state is really dark and serves little purpose. It would be nice if the rollover state, specifically the thick dark border, changed colors on ones you have already visited.
almost 2 years ago
@Matthew I think the hover state demands a click but I agree with John that the source is to strong so it confuses me and I have a less secure click. The darkening is unnecessary and the black gets lost in a dark image. That could be solved with a white border in between. Anyways, I did a quick mock so... You've got mail :)
almost 2 years ago
Pro
Skylar Hartman
I agree with Coffman. The hover state is aggressive and that may be due to the dark shadow around an already dark border. Try getting rid of the shadow as part of the hover state and possibly make the border a solid color. I would also take the shadows off the rest of the thumbnails
The shadow at top towards the bottom of the navigation/header does, I agree, seem distracting.
The text on the source button doesn't seem clear (might be an aliasing issue). I like the direction you're heading though =)
almost 2 years ago
Rebound
Pattern Tap emphasis rebound
by Cole Henley
Hi Matthew
I love the less conventional, modular layout of the previews in the new Alpha.
Couple of thoughts.
1) At the moment the hover state - using a dark semi-opaque overlay - is de-emphasising the focal object. It is pushing it back in the page when what it really should be doing is bringing it forward.
2) With the source link is this something that can be kept for subsequent page as it is at the moment?
I know this is probably a feature that has been requested but by introducing two different actions on a hover state it's making me think twice about what I want to do.
I'd prefer to either have a link to source on the subsequent, fuller-sized page or - if really needed - try to achieve this with an icon and keep this out-with/alongside the area I'm interacting with, namely the image preview.
Here's a knocked together mockup which has all previews at 75% opacity until hovered over where they are given 100% opacity along with a healthy sprinkling of shadow and a cheeky white border, hopefully pushing them to the fore a wee bit more.
Cole
almost 2 years ago
Rebound
Re: Alley-Oop! for Pattern Tap.
by Jake Ingman
The transition to rounded corners ended up looking pretty cool. Also thinned the border, removed the inner "shade" completely, and removed the source button.
almost 2 years ago
Rebound
Patern Tap Rebound
by Skylar Hartman
I think simple is your best bet. Obviously, the color may vary depending on your color scheme, however, maybe keeping it simple is the way to go. I'll email you the full screen.
almost 2 years ago
Pro
Matthew Smith
Gorgeous! I love this. Thanks for the stellar feedback. I love our design community. THIS is why I love @dribbble, good critical and well thought out feedback.
almost 2 years ago
Pro
Conway Anderson
I dig Skylar's solution. Perhaps change his orange border to a black 80% opacity border.
almost 2 years ago
Rebound
Larger on Hover
by David Yeiser
I'm late to the party on this one, but here are some comments and one idea based on my use of the Alpha so far.
I like the source button as you have it, I've found it quite easy to click on if I want to go straight to the source and easy to avoid if I want to click on the image to see more detail, comments, related, etc. I also like the circle icon with the arrow. Well done on creating (or finding) an icon that keeps such a distinguishable arrow at that size.
Regarding the hover, I'm finding that the transition from 0 border to the thick border every time you mouseover an image and vice-versa when you mouseout becomes distracting if I'm moving quickly over images or browsing through a lot. If I'm just mousing over one image slowly then it's really neat, if I'm mousing over a bunch then it becomes somewhat tiring. Does that make sense?
I like the modular layout, I think it makes the most sense with regard to the range of potential sizes in submissions.
The one idea I had was to enlarge the image on mouseover. Sometimes that 50% increase in size can help you distinguish a lot without committing to a click. iStockphoto is a good example for this, or http://bestwebgallery.com/.
Anyways my rebound is showing what this could look like. (By the way, my intention was to keep the arrow icon on the "source" button, I just didn't recreate it.)
almost 2 years ago
Pro
Matthew Smith
@david, Really interesting thoughts. This has been a helpful exercise :)
almost 2 years ago