Skip to content

Instantly share code, notes, and snippets.

@flynnduism
Last active November 23, 2021 13:32
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save flynnduism/b9d1202f849cd5fea796ea5b7aa97d55 to your computer and use it in GitHub Desktop.
Save flynnduism/b9d1202f849cd5fea796ea5b7aa97d55 to your computer and use it in GitHub Desktop.

In late 2016, I was contacted by the team at Timber.io about doing some contract UI work for them. They had just gotten some beautiful illustration and branding work (from the very talented Oli Lisher), and needed help translating the brand into their product.

Zach and his small team had a very clear vision (and great front-end skills) but needed help creating an interface that was as beautiful as it was powerful. There were very technical UX problems to figure out around the specifics of nested logs, navigable metadata, user tracing, as well as many iterative cycles around balancing space and density in their rich, interactive log views.

This was a really fun experience for me, they have amazing ideas and tastes, so we were able to work on lots of varying layouts and approaches. What follows is a series of UI screen layouts and notes from my time collaborating on Timber.io.


UI Design: Styles & Flow

timberio-concepts-flow

timberio-concepts-flow2

timberio-concepts

timberio-concepts-styles

Primary View: Logs, Logs, Logs

timberio-concepts-ui

Dark Theme Concept

timberui

Light Theme Concept

Data Filtering

timberio-concepts-filtering timberio-concepts-grouping

Event Details

timberio-concepts-request-detailsl timberio-concepts-settings

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment