Jon Lehman is a Product Designer at Theorem. If you’re interested in joining Theorem, check out our team and our current open positions.

This article was originally posted on journal.theorem.co

Summary / TL;DR

At Theorem, we have found that we run into the same small, derailing conversations from project-to-project. These conversations can be difficult to navigate if they involve subjectivity. One example would be buttons. Specifically, button alignment and sort order. So, here’s some quick objectivity for ya:

  • Modal/dialog terminating action buttons: align them to the right or consider center…


This article was originally published on September 29, 2020

I’ve been working on several side projects over the past couple of weeks but took a quick break to try to solve a pain-point that I have heard several teacher friends and family members mention.

The Problem

COVID-19 has continued to bring uncertainty to all of our lives but teachers particularly have had to deal with quite a bit of change. Schools have been reopening this school year with all new protocols and policies for handling education during a pandemic. Many teachers find themselves teaching in-person one day and remote the next. One…


This article was originally published on July 17, 2020

I finally had a chance to mess around with the newest version of the Figma API. I put together this little demo for internal-Theorem knowledge-sharing. Basically, I designed a quick landing page in Figma, coded out that design to a live page but synced up the styles, images, text, etc to the Figma document. This way, as a user makes changes to the landing page they will see their changes reflect on the live web page. Enjoy!


This article was originally published on June 18, 2020

Over the last couple of weeks, I engaged in a fun exercise to help my creativity. I have found that when working on long-term projects it is easy for your creativity to become stagnant and to feel like you’re stuck behind a block.

To help stretch my creativity I started a “Zero Requirement Exercise”. I generalized the goals of an existing side project and just started coming up with UI with no thought regarding requirements, specs, restrictions, etc. This helped me look past the blocks I was up against and loosen…


This article was originally published on May 29, 2020

I put together this dashboard UI exploration just for fun and to test out documenting the process in a timelapse. The time-lapses also provided me with content to try out TikTok for my first time. Apart from some of TikTok’s less-desired attributes, I found the platform very fun, intuitive, and engaging.

Here are the timelapse videos that I uploaded to TikTok:

Here are a couple of detailed screenshots as well:


This article was originally published on May 21, 2020

I had a small idea for a simple floating label style that would essentially “clip” the border of the input as the label “floats”. Another key part of the idea was to add a more impactful third state for while the input was focused, I felt that too many of the floating label input patterns out there didn’t emphasize the focused input label enough. I first put it together in Figma and then also coded it out in CSS.

Enjoy the live version below, fork it on codepen, or check it out on dribble.


This article was originally published on January 01, 2020

Summary / TL;DR

I use a kanban board to document project ideas while staying focused on current projects. Notion template here.

If you’re more of a video watcher, the video below covers most of what is written :)

Intro

Stepping into parenthood triggers many life changes. I’ve learned that one of those changes was the sudden and apparent importance of time management. I found myself jumping from project idea to project idea without the time or focus to complete any of them. This resulted in frustration which added unnecessary stress to my daily life…


This article was originally published on October 04, 2019

This was just a quick experiment to take a code snippet I had previously put together and expand upon it to make the UI a bit slicker and fun. I had used jquery for the previous code snippet so I went ahead and continued using it for this experiment. Though, I think I’d like to refactor this and have it just be vanilla js.

Feel free to play with the live version below, fork it on codepen, or check it out on dribbble.

Here’s an animated preview if you’d rather just watch:


image from picjumbo.com

Disclaimer–every agency, project, client, and designer are made differently and should not be treated all the same. The following is just one solution that I found unique. Written from a UI/UX designer’s perspective.

So you’ve just landed your agency a sweet gig, you’ve had your discovery meeting and you just sat back down at the office. There are several reasons why I believe (in certain situations) it is best to rush your initial design / wireframes and get it in front of your client as soon as possible.

1. Your Client’s Nerves

It is easy to forget that not everybody lives in this crazy…


Preface–I am not a developer. A designer, born and raised with some front-end experience, with limited JS knowledge, I like to find pure CSS solutions for fun.

Floating labels really took precedence with the launch of Google’s Material Design. They have been widely accepted because of solving the age-old UX argument between multiple form input field solutions.

What is a Floating Label?

A floating label is basically an inline label inside of an input field that floats above of the input box upon interaction. This enables the user to still see what the input field was originally requesting even after they have typed their answer.

Jon Lehman

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store