Brenton Klik Brenton Klik is an Interaction Designer in the Washington DC area. He designs interfaces and experiences for web, mobile, and desktop platforms.

Over the years, Brenton has worked for Carrier Corporation, SAP America, and others to create rich instructional applications, project management solutions, and web based applications. He currently designs interactions in the mobile space, such as data entry and communication for various clients.



Credit Card Directive AngularJS

A mobile friendly credit card input field based on Luke Wroblewski's UI. Creates a single continuous field for entering all data from a credit card. Keeps a mobile user in a single number input keyboard through the entire data entry.

Supports Visa, Master Card, Discover, and American Express icons, as well as a CVV icon.

Sample Code



Growable Textarea Directive AngularJS

The Growable Textarea Directive allows a textarea element to match the height of its content. This prevents the textarea from scrolling. The textarea is always the right size, allowing all text to be visible.

Sample Code

<textarea growable-textarea></textarea>


Style Sheet Factory AngularJS

Style Sheet Factory, is an AngularJS library that provides an easy way to manage CSS rules on the DOM. It can allow directives to provide their own self contained styles, as well as write event based CSS rules.

Sample Code

$scope.exampleColor = 'red';
var sheet = StyleSheetFactory.getStyleSheet();

StyleSheetFactory.addCSSRule(sheet, '.style-example',
    'background-color: '+$scope.exampleColor+';' +
    'color: white;' +
    'padding: 16px;'


Popup Directive AngularJS

The popup directive small container that allows you to position HTML content to an event on an element. For example, a tooltip that appears when an input gains focus, or something more complex like a time picker utility.

Sample Code

<button ng-click="myPopup.show($event)>Open Popup</button>

<popup api="myPopup">I am a popup</popup>


I am a popup

Modal Directive AngularJS

The modal directive is a fullscreen container that allows you to position HTML content over the top of your page. If you include an event that triggers the modal when showing, the modal will animate out from the origin of the event.

Sample Code

<button ng-click="myModal.show($event)>Open Modal</button>

<modal api="myModal">
    <h1>Hello World</h1>
    <p>I am a modal. Isn't that special?</p>
    <button ng-click="myModal.hide()">Close Modal</button>


I created my FlashLight app as a way of learning some basic Android development. With thousands of flashlight/torch apps on the market, I didn't want it to be just another of the same. Rather than focusing solely on producing the most amount of light, I decided to concentrate on "just enough" light.

There are tons of situations where you need just a little bit of light. Navigating a bedroom where others sleep, checking on a sleeping baby, reading something without ruining your night vision, etc. I wanted a tool that was more than just blinding light, and useful in these situations.

Flashlight Screen Shot 01
Flashlight Screen Shot 02
Flashlight Screen Shot 03
Flashlight Screen Shot 04
Flashlight Screen Shot 05

FlashLight controls brightness in two ways. One, by drawing a colored circle to the screen. And two, by changing the screen's brightness. Both of these are adjusted through one fluid gesture. Swipe up the screen for a larger circle and more light. Swipe down the screen for a smaller circle and less light

Color, is another important feature. While white light gives you the best range of brightness, red light helps you see at night. Blue-green, offers the best dark adaptation recovery. Also, photographers often paint with light in night photos. To address this, I added a color picker that spans the entire color gamut a screen can produce.

Lastly, in situations where the most amount of light is needed, the ability to turn on the camera flash was added. I didn't want to clutter the screen with more buttons. I settled on a double-tap gesture to toggle between screen light and camera flash.

The need for a flashlight app has been reduced with additions made to Android OS. Still, I find an almost daily need for FlashLight's screen light features.

Android app on Google Play

After creating the FlashLight app, I wanted to make something heavily themed. One of the alarm sounds in Android at the time was a corny rooster crow. The sound birthed the idea of a rooster/farm themed timer app.

The theme is based off the quintessential american farm. A red wood barn, brown picket fence, chicken eggs, and (of course) the rooster. Chicken clucks and short crows are also incorporated.

A timer is a short term need. Long term needs are solved with alarms. So, I focused on providing the simplest interface for sub four hour timer needs. Things like taking a nap (1 hour), boiling an egg (10 minutes), or brewing coffee in a press pot (4 minutes).

Rooster Screen Shot 01
Rooster Screen Shot 02
Rooster Screen Shot 03

To reduce buttons, I settled on: one hour, ten minutes, one minute, and ten seconds. Entering time required less cognitive load, and created a theme appropriate pecking gesture.

There's no undo/delete button. If a person enters a wrong time, their only option is to clear it, and start again. To eleviate mistakes, I added audial and haptic feedback to every button press. With four of five senses being used, I found I didn't miss often, and flow was retained.

Rooster's utility has largely been replaced with additions to the Android OS. But, it remains in my heart as a fun and helpful learning experience.

Android app on Google Play

Mic List is a personal app, not yet released.

There are a lot of list/task apps available. Everynote, OneNote, Google Keep to name a few. All of these apps force you to tediously peck out items on the software keyboard. With Mic List, I focused on speed and simplicity of entering items.

Most list itemss I generate are short (less than 5 words per item). Things like: wash car, clean fridge, take out trash, etc. If it's a grocery list, they're even shorter: bananas, milk, bread. I wanted a way of creating these kinds of lists as fast as possible. I did that, with dictation.

Mic List Screen Shot 01
Mic List Screen Shot 02
Mic List Screen Shot 03
Mic List Screen Shot 04
Mic List Screen Shot 05

Items are entered by pressing a mic button, and saying what you want to add. A pause in speech will add the item to your list, then imediately listen for your next item. Speech-to-text isn't perfect, and there are times it doesn't enter what you're saying correctly. That said, I found it was faster/easier to say the item again until I got it right. After, I could go back and quickly remove the incorrect entries.

While I use this app several times a week, and with great utility, I feel it's not yet ready for market. I'm continueing development until then.

I play a lot of boardgames with my friends, and often find things missing from the games. Whether it's a decent way to track score, or a better mechanic for choosing who goes first. GeeGee Gamekit was created to fill those gaps.

I built the app using straight HTML, JavaScript, and CSS. This allowed me to bring the app both to the web, and Android with a single code base. It also allowed me to experiment and learn the capabilities of WebView.

GeeGee Gamekit Screen Shot 01
GeeGee Gamekit Screen Shot 02
GeeGee Gamekit Screen Shot 03
GeeGee Gamekit Screen Shot 04
GeeGee Gamekit Screen Shot 05

I made the app responsive, by hiding delete functions (in scoreboard and dice roller) behind a swipe gesture on smaller screens. Imagery also scales to screen size (in spinner and timer) to offer the best visibility.

After finishing development on my updated device, I tested my app on older versions of Android. I found that many of the modern (but widely supported) web styles and properties weren't available in WebView until Android 5.0. Unfortunately, I had to target my app for this tiny segment.

I'm still working on legacy support

Web app on GeeGeeGamekit.com Android app on Google Play
Angular Components
Mars Watch
Earth Guillotine
Cloud Pee
Please Stop Talking
Old Man
Battle Angle Fan Art
Anatomy Practice