Product Design
User research, UX strategy,
wireframes, and user flows.
Available for new projects
Apps
by
Pat
Designing and building thoughtful
digital products, free UI generators,
and app experiences.
PriceCraft
Pricing Table
Generator
Generator
MonthlyYearly
Starter
$19
MOST POPULAR
Pro
$49
Team
$99
Generate Your Copy
Traditional Lorem Ipsum
Industry Copy
By Industry
Select an industry for industry copy
Healthcare
Real Estate
SaaS & Tech
Finance
Fitness
Restaurant
Education
E-comm
Nonprofit
Travel
Legal
Beauty
1
2
3
4
Short
Medium
Long
Your Generated Text
Randomize
Donec vitae magna ut arcu facilisis pretium. Aenean gravida, mauris sed varius pulvinar, augue velit tempor sapien, non pretium ipsum mi sed mi.
Aliquam erat volutpat. Morbi suscipit, libero in tincidunt placerat, sem risus cursus nisl, vitae faucibus metus urna nec erat.
Copied
Quick Copy Snippets
View all
Hero Headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Testimonial
“Lorem ipsum dolor sit amet, consectetur adipiscing elit.”
Company Blurb
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Team Bio
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Call to Action
Get Started Today →
Client Overview
Brandora
Performance insights. Smarter teams. Better results.
▱
Brand Colors
Typography
Aa
Satoshi
Aa
Satoshi
Aa
Inter
Brand Setup Progress
80%
Brand colorsTypographyLogo & assetsInspiration
Inspiration Websites
Built for
athletes.
athletes.
Smarter
decisions.
decisions.
Elevate
performance.
performance.
Competitors
Analyze.
Win.
Win.
Data drives
performance.
performance.
Unlock
sports data.
sports data.
Assets, Notes & Links
Brand Guidelines↓
Logo Package↓
Brand Assets↗
Experiments
A second look at product experiments, polished interface systems, and creative app concepts.
LinkedIn
Social Network Re-design
Blocks
Nodes
Points
Now live
High-performance Web3 infrastructure
The modular
layer for
Web3 builders
Deploy faster. Scale infinitely. Connect everything. The unified infrastructure for dApps, DeFi, and tokenized economies.
Start building →
▶ Watch overview
99.99%Network uptime
< 200msAverage finality
150+Active projects
30+Global regions
OrthoNovaORTHOPEDICS
TreatmentsConditionsAbout UsPatient Resources
Get Started →
Move better.
Live stronger. Be you.
Knee
pain relief
→
Spine &
back care
→
Shoulder
recovery
→
Sports
injury clinic
→
Real Estate Dashboard
Track performance, manage listings, and close more deals.
+ Add New
1,248Total Properties
328Active Listings
86Deals Closed
$1.2MRevenue
Featured Property
Modern Villa$1,250,000
Weekly Sales Overview
Closing Progress
MP4 Compressor
Compress video
without resizing.
Upload an MP4, choose a compression level, and export a smaller video while preserving the original width, height, and aspect ratio.
LUMEN.mp4
Replace
The modular
layer for
Web3 builders
layer for
Web3 builders
▶ 0:00 / 0:49▮▮ ⛶ ⋮
Use the export size dropdown to keep the source dimensions or resize the final MP4 to 1600 × 1200.
Compression Settings
Compression amount80%
Export size1600 × 1200
Resize to 1600 × 1200⌄
LightBalancedHeavy
Original187 MB
Compressed19 MB
Dimensions1600 × 1200
Saved168 MB
Done. Export resized to 1600 × 1200 dimensions.
Compress MP4
Download compressed MP4
UI Systems
Scalable design systems and
component libraries.
Prototyping
Interactive prototypes to validate
ideas and user experience.
Front-End Build
Clean, responsive, accessible
interfaces built with care.
Process
From rough idea to polished product.
A flexible, design-forward workflow for turning a spark into something clear, useful, and ready to share — without losing the personality that made the idea interesting in the first place.
Define the idea
Clarify the goal, audience, core features, and product story so the app has a focused direction before the visuals begin.
Design the system
Create the interface language, layout patterns, components, and visual rules that make the product feel polished and scalable.
Prototype the flow
Build realistic interactions, test the important moments, and refine the experience before moving into the final build.
Build & iterate
Translate the design into responsive front-end code, polish the details, and keep improving based on real use.
About Pat Johnson
Designer, builder, and lifelong app maker.
I design polished digital products from first sketch to final interface — combining visual design, product thinking, and front-end craft to turn ideas into useful, memorable apps.
Pat / Product Designer
Design systems & UI
Apps, tools & experiments
MadebyPat
My main portfolio for product design, web design, app interfaces, brand systems, and creative direction across client and personal projects.
Visit MadebyPatDribbble
A visual archive of interface explorations, polished app concepts, social redesigns, dashboards, and the kind of design experimentation that keeps the work fresh.
View DribbbleCodePen
Interactive front-end builds, CSS experiments, motion studies, hover states, and small UI prototypes that bridge the gap between design and production.
Open CodePen24+Years designing digital experiences, from early websites to modern product systems.
10k+Dribbble followers across years of UI, app, and visual design exploration.
1M+Portfolio and design views across shared work, experiments, and app concepts.
∞Curiosity for new tools, better workflows, and thoughtful product ideas.
Contact
Have an idea worth building?
Whether it’s an app concept, portfolio piece, redesign, or front-end build, send over a few details and I’ll help shape it into something polished.