Articles - The Keith Ratner Show

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.

The app features full geolocation, switching between front- and rear-facing cameras and a live drawing canvas with colored swatches in the left sidebar. Swipe the screen or click-and-drag to see it in action. The trash icon will clear the canvas.

Feature pipeline includes:

Map overlay. This is a work in progress. Click the map icon to pull up the overlay. Map has not been fully implemented yet.
User profile setup
Sharing of geolocation (available on mobile devices), azimuth, and streaming status
Stream recording and data storage
Stream sharing

Mobile Screenshot:

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.”

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):