Guide

1 Attachment

39 Responses (page 1 of 2)

  1. Jeremy Sallée ✦✦✦	Jeremy Sallée ✦✦✦

    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.

    likes

    8 months ago

  2. Luboš Volkov Luboš Volkov

    Looks pretty consistent. And that long shadow on the no alerts icon :))

    likes

    8 months ago

  3. Jeremy Sallée ✦✦✦	Jeremy Sallée ✦✦✦

    @Luboš Volkov Thx! hahaha yes, that's my little glimpse to some flat era that's floating around :D

    likes

    8 months ago

  4. Ben Bate Ben Bate

    Awesome Jeremy!

    likes

    8 months ago

  5. Jack Bingham Jack Bingham

    :-O

    I found a half pixel, but I'm sure you're already aware of it.

    likes

    8 months ago

  6. Andrew Lucas Andrew Lucas

    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.

    8 months ago

  7. Julien Renvoye Julien Renvoye

    Sweet dude :) Developers have to love you lol

    8 months ago

  8. Jeremy Sallée ✦✦✦	Jeremy Sallée ✦✦✦

    @Jack Bingham Where where where??!! No half pixels allowed anywhere :D I didn't spot it :)

    8 months ago

  9. Jeremy Sallée ✦✦✦	Jeremy Sallée ✦✦✦

    @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

    8 months ago

  10. Jeremy Sallée ✦✦✦	Jeremy Sallée ✦✦✦

    @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! :)

    likes

    8 months ago

  11. Jack Bingham Jack Bingham

    I'm not going to do your job for you.

    likes

    8 months ago

  12. Jeremy Sallée ✦✦✦	Jeremy Sallée ✦✦✦

    @Jack Bingham hahahaha :)

    8 months ago

  13. Emily June Emily June

    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.

    likes

    8 months ago

  14. Julien Rodrigues Julien Rodrigues

    The popups are really cool

    likes

    8 months ago

  15. Nor Sanavongsay Nor Sanavongsay

    Damn.. Looks freakin' awesome. Love Proxima any type.

    8 months ago

  16. Jonathan Olsen Jonathan Olsen

    These looks a bit cartoonish, specially that "long shadow":
    http://d.pr/i/Rdkx

    8 months ago

  17. Mihai Serban Mihai Serban

    Lovely color scheme!

    8 months ago

  18. Lucian Mangu Lucian Mangu

    I've done something similar for a project and it is a lot of work. Well done. :)

    8 months ago

  19. Eelco Guntlisbergen Eelco Guntlisbergen

    Awesome way of presenting these elements. I'm always struggling with that. Great inspiration :)

    likes

    8 months ago

  20. Ryan O. Hicks Ryan O. Hicks

    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.

    likes

    8 months ago

  21. Jared Erondu Jared Erondu

    Cool shot! BUT... what's 'tootltips'?

    likes

    8 months ago

  22. Eric Hoffman Eric Hoffman

    Dude, you are so good at what you do!

    likes

    8 months ago

  23. Jeremy Sallée ✦✦✦	Jeremy Sallée ✦✦✦

    @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

    8 months ago

  24. Jeremy Sallée ✦✦✦	Jeremy Sallée ✦✦✦

    @Jared Erondu hahaha ;)

    8 months ago

  25. Jeremy Sallée ✦✦✦	Jeremy Sallée ✦✦✦

    @Eric Hoffman Thx a lot man!

    8 months ago

keyboard shortcuts: previous shot next shot L or F like