We're working on an icon for a webapp called Dash, which let's you easily make dashboards. We're aware that there are a lot of dashboard icons out there already, but for this webapp (with this specific name) we just had to do an dashboard icon.
- still missing: on the odometer/rolls there are going to be glyphs representing graphs (which also affects the current color scheme)
- the background is obviously done for presentation purposes
We're nog 100% satisfied with:
- the lighting and realism on/of the odometer
- stripes on the circular meter
- nore sure about the glow intensity
- the knob that's holding the needle (would a half sphere be better match?)
- we've thought about making it skew (kinda like Safari's icon)
- think we need to tone down the drop shadow around the bezel and how it mixes in with the shadow casted on the 'floor'/surface
- think there needs to be a 'inner shadow' casted on the top of the glowing meter part as that entire element is supposed to look pressed
We're quite happy with:
- the lighting on the bezel (read @Ollin's icon lighting tutorial over and over again)
- the general position of elements
- the color contrast of the light bezel combined with the dark blue inside
- the needle color
- color scheme (matches the webapp's UI)
We're kind of stuck and would love for you guys to give us some pointers on what could be improved, and added. Thanks in advance!
Added the initial sketch for this icon
Also check an email design right here.
about 1 year ago
Take note: Inner border radii of the circular barrel.
The inset of the circular meter translates well on the right side. Not so much on the left, maybe due to the shift in luminosity.
Digg that subtle texture on the front body of the meter.
I'd make the ticks a lighter shade, as in closer to white than to black. Same goes for the D in the center. Furthermore, I'd add some texture to the bezel to make it more metallic. The highlight in the middle of the needle seems a bit out of place; I'd highlight the edge of the needle across its full length instead on 1 radial highlight.
The drop shadow is a bit too much, but you won't be able to properly do that until you know the final background.
I wouldn't skew it, as it won't go in the Dock.
Maybe @Dash should make this icon for Dash ;)
Thanks dude, much appreciated :)
Color of the ticks
Going to take a look at the tick shade, thanks!
yeah, we gave this an 'iron' look earlier, but the shapes that are going to be on the odometer rolls have to be show stoppers which leaves little room for other elements to draw attention to 'em.
Iron bezel look
We're actually stuck with this soft ivory kinda look of the bezel as we think it matches the webapp's friendly image and UI. Could see how an iron texture could work really well if that wasn't the case though!
Hightlight on needle
Yes, that makes perfect sense, going to take another look, thanks!
Do you think skew icons are exclusively meant for in the OSX dock? We though it might make this icon different from all the other dashboard icons.
@Tycho Klein Severt yeah,.. but no ;)
I think the glow could be more intens at the end. The knob on the needle could use some more work, it's a little too flat IMO. I was thinking about making it the same as the bevel, but you already gave the reason for not doing that;) Other than that it rocks!
Wow Wow Wow!! Great one! :)
Nice work! I truly understand you stuck with the soft look. I recognize your obvious style. But don't blame me for placing a bezel I designed a while ago, in front of your shot:
I'm curious how this looks in his context.
Apart of the outer border, which I find unfinished and bit blurry I really like it. The meter inside and all the elements are very nice.
Although if the bar is already filled, the part where some flipping numbers (I guess) should appear, seems bit odd when it's empty. It might be just my subjective feeling though.
In general, nice and crispy start!
Hi guys :)
Okay, usually I put my edit at the end, but I'm putting it in front here.
[low-quality GIF comparison]
The main issue in this icon is poor visual contrast/hierarchy. That's something a lot of designers seem to miss out on...here's a summary:
• The human eye senses value first, color second, especially in poor viewing conditions [in the dark, you're actually using black & white only]. Value contrast is therefore much more important to legibility than color contrast.
• The human brain senses dark as deep, light as raised. White stands out as a ridge, dark is a crevice. If you have a series of flat shapes stacked on top of each other, the lightest will be perceived as the foremost. And it confuses people when other stuff contradicts this. Use value to create a "stack" of depth in the icon, where the lightest stuff is on top. Obviously you have to break this now and then, but use it when you can.
• The human brain sees value contrast as a measure of importance. The brighter and more high-contrast something is, the more important it is. Use this to your advantage [I used it to emphasize the logotype].
Visual Contrast Changes:
So, some changes to improve visual contrast that I made:
• Darkened the meter cutaway BG to draw focus to the needle
• Made center circle w/ logo the focus by making it near-full-white and high-contrast.
• Darkened the main plate around the center circle so that the center part stood out more.
So, while the previous visual hierarchy was sort of muddled, now you look at it and go "D" "white thing" "needle" "needle measurement" in that order, which is also the depth order.
Stuff I Didn't Do:
To improve this further, you can:
• Add the glyphs to the odometer. You can either lighten the odometer cylinder and make the glyphs dark, or just make the glyphs light [but not lighter than the main circle, that would mess up the hierarchy].
• Make the notches around the meter light, not dark, so they stand out against the meter cutaway background.
The rest of what I did was fixing shading [your light source wasn't clear enough; bold shading is essential and all parts of the icon should demonstrate that the light source is above center] and improving color consistency/vibrance [because I obsess about that] :D
OH and the shadow... you can't have a shadow going both as a drop and a cast, it doesn't make sense. It's either lying on a surface or balanced perpendicular to the surface [as in my edit].
Hope that helps <3 good luck with the final
@Yummygum love the icon!
@Ollin wow, great feedback.
@Ollin You're the man for taking your time to write that feedback! We love some of the stuff in your version and we're definitely going to have a good look at it while making the updates to our icon :).
Thanks for sharing :). We actually use these same principles to explain design overall to our clients all the time. As UI is our main skill, we're still learning how to apply these principles to icon design also. We think the biggest reason for the seeming lack of visual contrast is the absence of the glyphs on the odometer rolls. Most choices are made based on the pretty important role they're going to play:
- the notches not being light but dark
- the center circle not being light but dark
- the blue glow/main circle
The reason the glyphs will play an important roll is because the app is all about the versatility of possible graph elements.
Circle center have more attention drawn to it & glyps on odometer
I see what you mean. As we said in the initial/first comment, we were also thinking about making the needle knob into a half sphere. We can see in your take that works really well, so we're most likely going to do something like that too. Your version is going to be a great source of inspiration for us! However; the most important elements (as your part on contrast and 'importance') are most likely going to be the elements on the roll/odometer. Like we said we left those out as we're just not sure on how these should look yet (we'd rather hide those layers than upload a 'we're not sure about this' shot ;)). We had light glyps on the dark odometer in mind.
lighting on odometer rolls
We love how it's darker in your version. We're not sure of the harsh lighting thought which makes the roll look glossy. We'll def. take another look at it and see what could work
Drop & cast shadow
Hmm we see how this could confuse you. The drop shadow has a too small distance why it's also spread at the top of the icon.. That doesn't make sense indeed and we're going to tone it down :). In this presentation we wanted to suggest the icon standing just in front of a wall (with a fold on the floor) which would create both a drop shadow against the 'wall' and a cast shadow on the floor.
Thanks for the feedback. We think you're absolutely right. We've probably focused too much on the existing swatches we used for the UI. We definitely think the hues should be more harmonious and pulled closer together for a balanced result. Love how it looks in your version.
Sorry for the extensive reply but we felt like we should've been more clear as far as the motivation for some of our choices goes. That's why we wanted to elaborate on why we made some choices and why we feel like some feedback is 100% absolutely spot on why (as much as we agree with your points) we have some doubt about how some of the feedback would affect the rest. Again, thanks a bunch for your time and sharing your expertise and points of improvement! Overall it's definitely going to be of huge help to bring a better balance in the updated version.
@harwen @Underbelly (via Anthony Lagoon) @Tobia Crivellari @Joachim Löfstedt @Vova Devyatkin
@Pieter van Est Thanks :)
@Dirk Jan Haarsma Thanks Dirk. Like we said to @Max Steenbergen: We're actually stuck with this soft ivory kinda look of the bezel as we think it matches the webapp's friendly and accessible image and UI. Could see how an iron texture could work really well if that wasn't the case though!
@Philip Litassy Hmm, yeah we see what you mean. We'll take another look at the blurry outer border. As far as the odometer (the empty rolls you mentioned) go; we had glyphs in mind that represent graphs, as making dashboard using graphs is the most important aspect of the webapp the icon is for.
@Zaib Ali Thanks for the feedback man, much appreciated. However, we'd have to disagree with you saying:
- the icon is too dark (we love the OSX Dashboard icon which has way more dark tones)
- the inner part should be more light
, if you don't mind ;).
Regarding the iron outside; like we said to @Max Steenbergen: We're actually stuck with this soft ivory kinda look of the bezel as we think it matches the webapp's friendly and accessible image and UI. Could see how an iron/metallic texture could work really well if that wasn't the case though!
Wow, it feels very soft and 'tasty', which is exactly what Dash is aiming for based on the other shots I've seen.
I'm sorry I can't be like @Ollin with his useful feedback.
@Kevin No biggie, thanks for the comment. Glad you see the resemblance in style :)
This is the final version of the icon for Dash. We took it into account all of your feedback on the previous version and we’re pretty happy with the way it turned out. We also added the shapes (we mentioned in our previous version’s shot).
Please make sure to check out
- the other sizes and
- the progress mp4 as well
about 1 year ago
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–2014 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.