الانتقال إلى المحتوى

Health & Fitness · Charcoal & Voltage

Workout App UI Design Template

Forge is a strength-training app design with a charcoal-and-voltage look, built for founders and designers shipping a workout tracker.

Workout app today home screen with push day split card and weekly volume chart
Workout app programs screen with training plan cards and progress bars
Workout app active session screen with weight stepper and set logging table

معاينة

استكشف الشاشات

عاين تصميم تطبيق الجوال workout، القابل للتعديل بالكامل في Sleek.

Workout app today home screen with push day split card and weekly volume chart
Workout app programs screen with training plan cards and progress bars
Workout app active session screen with weight stepper and set logging table
Rest Timerالشاشة 4
Exercise Detailالشاشة 5
Progressالشاشة 6
Profileالشاشة 7

حول Workout App

Forge is a workout app UI design template built around a "Charcoal & Voltage" aesthetic: a near-black graphite base, slate panels separated by thin hairlines, bone-white text, and a single electric-lime accent reserved only for active sets, progress fills, and the primary action. The big numbers (reps, weight, the rest timer) are set in a heavy condensed grotesque, tracked tight, so the interface feels athletic and dense, like a dim gym at 6am with one bright bar overhead.

The template ships seven connected screens that form a complete training flow: a Today home with today's split and a weekly volume chart, a Programs list of training plans, an Active workout logger with a plate-weight stepper and set table, a full-screen Rest timer with a depleting lime ring, an Exercise detail with target muscles and execution cues, a Progress dashboard with PR cards and a volume trend, and a Profile with stats and a consistency grid. A signature vertical voltage meter climbs the left edge of the active workout and reappears as a mini meter on workout cards.

Use it in Sleek and make it yours: restyle the palette, edit any screen with AI by describing the change, and add the flows your product needs. Then export it to code, copy it into Figma, or hand a prompt to an AI agent to build it for real, far faster than starting from a blank canvas.

ما في الداخل

الشاشات المضمّنة

01

Today

A 'Ready, Marcus' greeting over a hero card for today's Push Day split with exercise list and a full-width "Start Session" button, plus a weekly volume bar chart and a streak counter.

02

Programs

A stacked list of training plans (Push/Pull/Legs, 5x5 Strength Base, Hypertrophy 4-Day) as slate panels with difficulty tags, schedule, and lime week-progress fills, plus a "Create Custom Program" option.

03

Active Workout

A live session showing the exercise name, a plate-weight stepper with quick-add increments, and a set table with previous lifts, weight, reps, and lime checkmarks to log each set.

04

Rest Timer

A full-screen 01:30 countdown set in a giant tracked-tight numeral with a lime ring depleting around it, an 'Up Next' set preview, and '+15S' and 'Skip' controls.

05

Exercise Detail

A barbell bench press hero image with a primary-exercise tag, target muscle chips, and numbered execution cues so lifters know exactly how to perform the movement.

06

Progress

Personal-record cards for squat, deadlift, bench, and press in oversized lime numerals, plus a 30-day volume trend line chart and a body-weight section.

07

Profile

An athlete header with total workouts, day streak, and total pounds lifted, a 12-week consistency grid, and settings for equipment and notifications.

التصميم والميزات

الميزات الرئيسية

  • Charcoal & Voltage aesthetic: graphite base, slate panels, one lime accent
  • Condensed grotesque for oversized reps, weight, and timer numerals
  • Signature vertical voltage meter that climbs as sets are logged
  • Plate-weight stepper with quick-add increments and a set table
  • Full-screen rest timer with a depleting lime ring
  • Bottom nav bar with monochrome line icons and a lime active underbar
  • Progress dashboard with PR cards and a volume trend chart
  • Consistency grid and streak tracking on the profile

الجمهور

لمن يناسب

Founders validating a workout tracker MVP
Product designers needing a strength-app starting point
Indie developers shipping a fitness or gym app
Fitness coaches launching a branded training app

حالات الاستخدام

ما يمكنك بناءه

  • Launch an MVP for a strength-training or workout tracker app
  • Mock up screens for an investor or stakeholder pitch
  • Hand a consistent, athletic dark-mode UI off to developers
  • Explore a redesign of an existing fitness app

كيفية استخدام هذا القالب

  1. 1

    افتح القالب

    تصفح الشاشات وعاين التصميم الكامل لترى إن كان يناسب فكرتك.

  2. 2

    استخدم هذا القالب

    افتح نسختك القابلة للتعديل بالكامل في Sleek بنقرة واحدة.

  3. 3

    عدّل بالذكاء الاصطناعي

    أعد تنسيق لوحة الألوان، وغيّر التخطيطات، وأضف أو أزل شاشات بمجرد وصف ما تريد.

  4. 4

    صدّر وانطلق

    صدّر تصميمك أو سلّمه للمطوّرين، وواصل البناء نحو الإطلاق.

الأسئلة الشائعة

ابدأ بتصميم تطبيق workout

استخدمه في Sleek واجعله خاصاً بك: أعد تنسيق لوحة الألوان، وعدّل أي شاشة بالذكاء الاصطناعي، وصدّر إلى كود أو Figma.

استخدم هذا القالب