Mixpanel Navigation Menu Icons/UI

1 Attachment

38 Responses (page 1 of 2)

  1. Mason Yarnell Mason Yarnell

    Hello everyone,

    Here is a peek at the new navigation that we're working on @Mixpanel. We've refreshed the icons and updated the colors to provide better contrast with the main content. I'm putting together a document that shows evolution the iconography and navigation that I'll share with you here soon. Take a look, we would love to hear your thoughts!

    likes

    3 months ago

  2. Álvaro Carreras Álvaro Carreras

    Good Job @Mason Yarnell The color palette is very nice. :)

    likes

    3 months ago

  3. Mason Yarnell Mason Yarnell

    Thanks @Álvaro! Much appreciated.

    3 months ago

  4. Josh Holloran Josh Holloran

    Lookin' real good, son ;). Loving the two-color icons. Working on a similar icon treatment myself. You think these will end up as svg's or just @2x pngs?

    likes

    3 months ago

  5. Steffen Nørgaard Andersen Steffen Nørgaard Andersen

    I really like it a lot and it's hard to come up with any "issues" - Here's a few anyway:

    1: Even though the icons look awesome with the two-colored state, I think this should only be applied on "mouseover" and "current" state. Making the inactive navigation links a bit more transparent and grey will create a better focus I think. In this way you might not need that blue border on the left of the "current" state as well. Awesome icons btw!

    2: The blue overlay looks awesome but it seems to me like there's a lot of shades. Maybe reduce them a bit and remove the background on the "New project" making it none-bold instead?

    Other than that, awesome work!

    likes

    3 months ago

  6. Will Saunders Will Saunders

    Ooh, that's nice!

    likes

    3 months ago

  7. Mason Yarnell Mason Yarnell

    @Josh Thanks, partnah! Haven't decided yet on a format. What's your take? Would you suggest SVG? Anyone else care to weigh in on this subject?

    @Steffen Thanks very much for the great feedback! I particularly like your thinking around the blue drop menu. I will take a look at how the nav looks with the inactive state as a single color. I don't find it too distracting as it is, but I agree that it could emphasize the active state.

    likes

    3 months ago

  8. Lukas Bugla Lukas Bugla

    Super good!

    likes

    3 months ago

  9. Masum Rana Masum Rana

    Lovely as usual :)

    likes

    3 months ago

  10. Josh Holloran Josh Holloran

    @Mason I'm a bit torn myself. I don't have a process in place for two-color svg icons yet. I make a lot of one-color icon fonts, but I feel like @2x raster is still the easier and most supported route for anything with more than a single color. Let me know if you give it a go.

    likes

    3 months ago

  11. serhat ozirik serhat ozirik

    Nice work and blue :)

    likes

    3 months ago

  12. Ionut Zamfir Ionut Zamfir

    @Mason Yarnell I'm a big fan of your work. Looks amazing :)

    likes

    3 months ago

  13. Alexander Osokin Alexander Osokin

    like colors, font and icons.

    Great stuff.

    likes

    3 months ago

  14. Mariusz Ciesla Mariusz Ciesla

    Awesome.

    likes

    3 months ago

  15. Deividas Graužinis Deividas Graužinis

    I'm more with what @Steffen Nørgaard Andersen said about icon states, hovers, etc. And yes, work is awesome. Really great colors and icons as itself! Well done, mate

    likes

    3 months ago

  16. Daniel Di Pietro Daniel Di Pietro

    Nice colors scheme!

    likes

    3 months ago

  17. Stephane Martin Stephane Martin

    Really nice color scheme!

    likes

    3 months ago

  18. Simurg Simurg

    Great colors !

    likes

    3 months ago

  19. Tommy dopes Tommy dopes

    I love it!

    likes

    3 months ago

  20. Ali Namdari Ali Namdari

    Great colour palette!

    likes

    3 months ago

  21. Jim Silverman Jim Silverman

    looks great, love the two-tone icons. but i miss the purple :(

    likes

    3 months ago

  22. Gijs Rogé Gijs Rogé

    @Mason Yarnell svg ftw :)
    Its has pretty decent support. ie9+ and modern browsers including almost all mobile devices.
    And for the browsers that don't support it, use a fallback. Modernizr, or anything else.

    Using @2x png's by using media queries has the same support as svg as far as I know. But svg is much more modern and its vector.. (vector > bitmap).

    All my projects are svg powered, and couldn't be more happier. Everything looks so damn sharp on all devices.

    likes

    3 months ago

  23. Luke Curé Luke Curé

    @Mason Yarnell a @2x .gif will do fine.

    likes

    3 months ago

  24. Jonathan Quintin Jonathan Quintin

    Clean work @Mason Yarnell

    likes

    3 months ago

  25. Salomon Aurélien Salomon Aurélien

    Wow

    likes

    3 months ago

keyboard shortcuts: previous shot next shot L or F like