Skip to content

tsxoxo/ui-showcase

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 

Repository files navigation

Design Process Documentation

UI design work and prototyping explorations created in Figma.


Interface Implementation Study

Settings panel interface recreation from Refactoring UI book showing sliders, toggles and typography hierarchy

Recreation of a settings panel design from Refactoring UI by Steve Schoger and Adam Wathan. Built by eye from the book's screenshot to practice precision in spacing, typography, and component hierarchy.

Design Iteration Process

Multiple iterations of 7GUIs interface components showing progression from wireframes to refined designs in systematic grid layout

Working through the timer task of the 7 GUIs. Earliest sketch is top-left, latest to the right. Systematic iteration exploring different interaction patterns and visual treatments.

Interactive Prototypes

neeed_swipe_anim_A.webm
neeed_swipe_anim_B_1.webm
neeed_swipe_anim_B_2.webm

Early exploration of a gesture-based micro-interaction in a todo app.

Responsive Design Systems

Side-by-side comparison of mobile and desktop website layouts showing responsive design with consistent typography and content hierarchy

Mobile and desktop layouts for personal website using Utopia design system to help with consistent responsive design. The base grid as well as the spacing elements (small purple squares between paragraphs) are visualized here to show the underlying spacing.

Visual Concept Exploration

Two mobile timer app interface concepts with bold 80s-inspired colors and typography

Timer app interface concepts exploring 80s-inspired visual language.


Figma source files available upon request.

About

Samples of my UI work

Topics

Resources

License

Stars

Watchers

Forks