Design Delivery — UX & UI

As a UX Designer, Clean Design would be of great value and top priority. This is because, by definition, Clean Design is one that supports visual thinking so people can meet their informational needs with a minimum of conscious effort.

Part 1: Working with Product and Business to iterate and define the solution
Part 2: Working with Developers to produce Dev-ready assets

Some examples of additional Steps

Creating developer-friendly hand-offs.
Accessibility standards (508 Compliance)
Responsive web design
Site performance best practices
Internationalization and localization techniques
Understanding UI in a world of modern front-end frameworks

Demos Part 1

UX design demos. For front-end UI code samples, see Part 2

MoneyFlow

App Flow to Track Spending

Figma Original Available — upon request

View Sample PDF

Foodz

Food Delivery App Prototype

View Sample

Resort Booking App

UX Flow

XD Original Available — upon request

View Sample PDF

Medical Dashboard

Doctors Appointment Page

Original Available — upon request

View Sample PDF

Login Page Ideation

2 Column Page. Original available in Figma

The left column can be used for content like rotating quotes, benefits of signing up, testimonials

View Sample PDF

Demos Part 2 - designed and coded

PaintedReality

Landing page design

Tailwind CSS project
Adobe Animate wallpaper color morph
CSS transitions for hamburger menu animation (medium screens)
Illustrator Logo, green splash SVG

View Code View Demo

Facebook360 Demo

Experimental app

Create graphics inside 360 images
Extend reality

View Code View Demo

FormValidation Regex

Form validation

Reusable Form can be placed anywhere
Bootstrap UI and modify for any UI framework

View Code View Demo

WeatherAPI & Materialize UI

Find the weather anywhere in the US

Just add City Name and Zipcode
Data will persist to Local Storage

View Code View Demo

SmartLoans

Loan calculator app

Bootstrap UI customized
Mobile friendly
JavaScript pure no frameworks
Interactive loader
Chrome Lighthouse high accessibility score

View Code View Demo

D3 Charts

Animated bar chart sample

Random data on page refresh
Gradient colors can be customized

View Code View Demo

StarWars Switch Sides

Angular and Bootstrap mini app

Angular with custom Bootstrap theme
Make characters switch sides.

View Code View Demo

React PhotoGrab

React, Material UI mini app

Uses Material UI
Mobile Responsive
Random photo grab from Unsplash.com

View Demo

WorldTraveler

The same landing page built three ways — with Bootstrap, then without using any frameworks and then in React

Code for the Bootstrap version is here
Code for the 'No Frameworks' version is here
Code for the React version, component with all the props — a code snippet located here

Bootstrap No Frameworks React

React & OpenWeather API

React, Bootstrap and Open Weather API mini app. All you have to do is enter the name of any city in the USA and zipcode

View Demo