This is getting to be fun. I love crafting pixels. As usual, this is work in progress, as all design should be IMO.
10 months ago
Very nice. I'd maybe add a divider line on the cart button, just between the (9) and the total price.
@Paul Ungureanu That would create the effect that they are different buttons, which they aren't. So that's why its not there.
Also, my opinion is that asking a question like "What's the cart button supposed to do" indicates that you're thinking more about user experience than just style. Style is important, but not nearly as important as careful UX and content.
We get too focused on style here at @Dribbble, and so I'm just pushing back a bit as a way of trying to push this community to think outside the style preference debate :)
Hope that makes sense.
I'm scared to make a style comment now.
@Matt D. Smith Good. You should be. Terrified actually. Have you seen me when I get all business?! :D
Actually, don't be. Just ask a question when you don't know the whole deal (which no one can in a screenshot).
Plus, you know I'm not an asshole, just opinionated :)
No need for a clarifying follow up comment Mr. Smith. I know you're a big teddy bear. ;)
This colour scheme is beautiful - great job!
On another note - I wholeheartedly agree with you about UX being fundamental and it's totally something that should be the primary focus when designing. In my eyes that's why we wireframe - to iron out the UX, and then the style comes second and it's then your job as a designer to make the UI look shit hot.
You can have an amazing looking website or app but if it's awkward to use it'll never take off and that's all it'll be - a great looking flop. Which is sometimes why bad looking websites can be successful - because they nailed the UX. So yea, great point.
like the font, what is this?
@Zoltán Garami Rooney/Source-Sans
@Matthew Smith, What if the divider was shorter than the cart button?! :^)
@Dan Beltechi ha! Why would I want a divider at all? A divider suggests that they are separated, it's dividing... so help me think through you and @Paul Ungureanu's thinking.
@Matthew Smith Guess it does ;) although typographically I don't quite like the adjoining of the smaller font size, parentheses and the bigger font size, that's why the suggestion.
Was just suggesting a compromise solution (@Paul Ungureanu wanted a divider; you didn't want it to look like there were 2 buttons). But it was mostly a light-hearted comment, anyway!
@Paul Ungureanu I see where you're coming from better now. It doesn't both me, but we're all entitled. Thanks for sharing though dude :)
Nice :) Is the controversial cart bit a button or just informational?
@Chris Armstrong The cart icon is informational, it is meant to be used throughout the site in areas that are cart related. Repetition of a pattern to educate the customer.
Really love the colors and type! Fantastic work. I was wondering though if you've thought about adding some vertical spacing in the header. Seems like there's a lot going on there and it may be a bit easier to scan / digest with just another 10px of spacing above and below the search bar?
@Bryan Belanger great question/suggestion. I have thought about that and I'm happy with where its at based on the browsers our customers use. I personally wouldn't mind a little extra space, but if I was designing this site for me I might do a bunch of things differently. I'm designing it for the Relay audience, who don't have retina macbook pros or 30" monitors :D
Then again, we'll probably end up testing things like that once the site is built out.
Gotcha, always gotta be thinking of the users :). Good stuff!
This is looking really good! The use of contrast in color value and font is stellar. One thought-you pretty strongly establish the white/gray/red scheme throughout (although like you mentioned its hard to evaluate from just one screenshot). The little green ribbons seem a tad out of place, but certainly not detrimental. If there's more green elsewhere in the site, good on you! Try the ribbons in red perhaps?
@Matt Esau Good comment. The greens here signify sale and are definitely a WIP. Red is a very particular visual pattern in the site and red ribbons wouldn't be appropriate. I'll take your thoughts to heart though ;)
keyboard shortcuts: ← previous shot → next shot L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
Copyright © 2009–2013 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.
Follow Dribbble on Twitter