Articles

Distribution

My UX and UI Portfolio and Interactive Samples

Welcome to my UX and UI Portfolio.

Currently, I’m building a video streaming application in React, including all UX and UI design and engineering.

vHyve Video Streaming App UX and UI

The concept is a live video streaming with a drawing interface and map overlay. HTML5 capabilities are used to track GeoLocation and device orientation. On the development roadmap are the following features:

  • Toggle full-screen mode
  • Logging in as new or existing user
  • User profile setup
  • Tracking of user activity, i.e., user’s logged-in status, whether the user is streaming live video, user’s location (if logged in)
  • Map overlay should display logged in users along with their streaming status, device orientations and camera facing directions; icons should appear on map, color-coded by streaming status, with icons rotated to reflect real direction based on compass’ true north
  • Functionality should be accomplished entirely through HTML5
  • Native application development (iOS, Android, etc.)
  • Recording of user’s drawing activity as SVG, possibly with configurable frame rate
  • Screen recording functionality; this should include recording of live media stream as well as user’s drawing activity on separate recorded tracks
  • Cloud storage of recorded media tracks with administrative interface for managing user’s media
  • vHyve Studio module to manage stored media inclusive of post-production tools

View the live work-in-progress here:

https://kratner.github.io/vhyveapp

I’m also building a React front-end using WordPress as a “Headless CMS.”

keithratner.live React Front-End UX and UI

View the application live here:

https://kratner.github.io/wpreactkrlive/

A sampling of my design and development work over the years

User Interface Design and Implementation

Screenshots of browser-based Metadata Analytics application User Interface; Django/Python back end, UX and UI front end powered by D3, HTML5, CSS3, raw JavaScript (2015 version):

Metadata Analytics Dashboard UX and UI

Metadata Analytics Tag Analysis UI

Primary User Interface for a complex Excel application powered by VBA (2019 version):

Excel VBA Application UI

Print Collateral Developed 2010 – 2013

Sample Annual Report

Sample White Paper Report

Sample Trifold

Supplemental Background

Visit my Behance profile for a sampling of visual and user interface design work over the years.

Download a single-page PDF design brief