Ask DN: Dark v. Light Application UI

almost 6 years ago from , Product Design Lead @ Cireson

What are your thoughts on dark v. light UI for the tools you use to design interfaces? Think Photoshop / Pixate / Webflow (dark) v. Sketch (light).

Example Dark UI (Webflow) https://www.dropbox.com/s/dfc185v36xxioou/webflow-ui.png?dl=0

Example Light UI (Sketch) https://www.dropbox.com/s/v3h5xitfbpkviu2/sketch-ui.png?dl=0

Which feels more effective to work within, and why?

A dark UI makes sense when working with imagery (Photoshop), akin to a darkroom. A light UI feels more open, like working on a drafting table.

A dark UI does seem to define the "page" area better, making it a more finite / concrete space. This may make more sense for apps and websites. They can extend in length, but their width is contained by the viewport - unlike an infinite artboard.

I'm trying to think through appropriateness of each and how they support the work being created, beyond personal preference.



  • Clayton Farr, almost 6 years ago

    Thanks for the detailed thoughts so far.

    A darker UI does frame the content better, which may well be more appropriate for screen design.

    However a very dark interface seems heavy at times, especially for browser based apps (Pixate, Webflow, etc.).

    I'd be curious how well a darker, neutral gray would work in this scenario? (Think photography gray card - https://en.wikipedia.org/wiki/Middle_gray)

    Trying to think back to any apps that have used this? It seems like there was a phase when video editors like Avid & Final Cut used this approach. Could be that it just feels like a washed out version of the current black UI convention.

    0 points
  • Richard BallermannRichard Ballermann, almost 6 years ago

    I think you can also apply a more gut-level analysis of what these two represent.

    On a primal level, black always carries a certain degree of drama. Imagine working in a dark room or late at night, there's going to be an element of mystery and tension to the setting.

    Light on the other hand, you have full transparency. Nothing is hidden. I'd say this is likely going to provide a more easygoing tone to the work atmosphere. It feels more responsible.

    Maybe this sort of conceptual interpretation towards dark or light is generally meaningless in UI design, but I don't think you can fully ignore the subconscious impact light or dark settings have on users.

    0 points
  • Kyle BarberKyle Barber, almost 6 years ago

    also dark ui is something people are voting for alot on a sketch thread: https://news.layervault.com/stories/49488-sketch-40-feature-wish-list

    on a personal note my vote will tend towards dark for the exact reason you said, long hours and it is easier on the eyes. For some things i am constantly jumping back to older cs versions to save things out or fix really old errors and find the lighter ui's a bit jarring. That said i wish there were a quick button to jump between them as the dark ui doesnt always let me know how things will look when surrounded by alot of white space in the browser.

    0 points
  • Cristian MoiseiCristian Moisei, almost 6 years ago

    Sketch's UI is a borring affront to what good UI should look like.

    Now, light vs dark - It ultimately comes down to what you care most about and your personal style.

    The dark ui feels more technical and is easier on the eyes when working long hours.

    The light one (which I'm using in PS), feels more open and unobtrusive, it's not caging my work, it fades behind it.

    0 points