I have put together a small UI guide based on the Nutanix interface i've been doing.
Since we are in the middle of a big release, all the engineers are super busy correcting bugs and implements last minute funcionalities. I took the opportunity to have a little bit of free time on my hand to design this UI guide. Entirelly based on the design this guide is very usefull for multiple reasons:
- it will allow me to keep a very strong color and style consistency all through the UI. Making sure I'm using consistently the right blue, reds, border color and text color etc...
- it will allow the developers to keep consistency in their code (exactly like in the design, we can now use variables for colors, text, borders etc, making a very flexible and strong code).
- it will allow the developers to code custom components and be able to use at will the UI components in popups or ui elements that don't have a design
- it will allow me to come up with new design elements / pages without designing them. For those last minute implementations. When you don't really have the time to design the page but need to accuratelly explain the elements to the developers.
All in all, even if it seems like a tedious and long exercise, there is only good values and positive effects to pass trough such an exercise.
6 months ago
Looks pretty consistent. And that long shadow on the no alerts icon :))
@Luboš Volkov Thx! hahaha yes, that's my little glimpse to some flat era that's floating around :D
I found a half pixel, but I'm sure you're already aware of it.
Love this, big fan of putting these UI guides together. Really gives you the opportunity to review all of your design decisions and iron out inconstancies.
Sweet dude :) Developers have to love you lol
@Jack Bingham Where where where??!! No half pixels allowed anywhere :D I didn't spot it :)
@Andrew Lucas I entirelly agree. I have already started changing the main design because I was kinda sloppy on my colors and styles and now I know everything is super power proof checked and consistent. Very very usefull
@Julien Renvoye Thx man! I think they do like my methods. Besides I'm the one making the css pixel perfect for them (they do the first pass and then I pixel perfect it after). So it's super usefull for me too! :)
I'm not going to do your job for you.
@Jack Bingham hahahaha :)
THIS! When working with engineers and developers, this is so important, especially to stay visually consistent myself. Thanks so much for introducing me to this type of guide. Super useful and inspiring.
The popups are really cool
Damn.. Looks freakin' awesome. Love Proxima any type.
These looks a bit cartoonish, specially that "long shadow":
Lovely color scheme!
I've done something similar for a project and it is a lot of work. Well done. :)
Awesome way of presenting these elements. I'm always struggling with that. Great inspiration :)
Looks good, but one thing that's really bugging me is the distance apart between the confirm/accept and cancel buttons on the popups section.
Cool shot! BUT... what's 'tootltips'?
Dude, you are so good at what you do!
@Ryan O. Hicks Ah, I think it's ok as "cancel" is the close button. But we'll make sure to test this one out before making any decision
@Jared Erondu hahaha ;)
@Eric Hoffman Thx a lot man!
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.