Stillwork Fokus Timer

Ein minimalistischer Fokus- und Pausentimer, der deine Arbeitsstunden überwacht und dafür sorgt, dass du nie vergisst, eine Pause zu machen.

UI/UX

Designsystem

Swift

AI

Rolle

Solo Designer

Kategorie

UX/UI, Mobile-Anwendung

Zeitachse

7+ Tage

Verwendete Programme

Figma, Antigravity, Swift

Mehr darüber

Problem

Es ist ziemlich üblich, dass Menschen, die an Schreibtischen arbeiten, vergessen, regelmäßige Pausen einzulegen. Sie brauchen jemanden oder etwas, das sie daran erinnert, dies zu tun.

Lösung

„Stillwork“, ein Fokus- und Pausen-Timer App, mit der Sie einen sitzungsbasierten Timer einrichten können, der Sie benachrichtigt, wenn es Zeit für eine Pause ist, sei es durch Ton, Haptik, eine Benachrichtigung oder einen einfachen Blick auf den Bildschirm. „Stillwork“ sorgt dafür, dass Sie während Ihrer Arbeitssitzungen fokussiert und produktiv bleiben.

Prozess

Project Research -> Paper wireframes -> Hi-Fi wireframes -> Design System + Components -> Building with Antigravity -> Working App (Still in the process)

Forschung

Als jemand, der eine ähnliche Anwendung benötigte, um meine Zeit effektiv zu verwalten und längere Zeiträume ohne Pausen zu arbeiten, habe ich meine Ideen dokumentiert und im Internet recherchiert, was möglich ist, den Umfang meines Projekts definiert und meine Ziele für diese Anwendung skizziert.

Ich bewertete die wesentlichen Funktionen für mich und die potenziellen Funktionen der App. Ich kam zu dem Schluss, dass in Version 1 mehrere Timer unnötig sind; es sollte nur ein Timer zur gleichen Zeit im Fokus stehen. Da ich die App in Swift entwickle, habe ich versucht, ein Produkt zu schaffen, das so nah wie möglich an einer nativen iOS-Anwendung ist. Mit diesem Ansatz erstellte ich eine minimalistische Version für Version 2 unter Verwendung des Standard-Farbsystems von Apple und zahlreicher Komponenten aus ihrer Bibliothek.

Basierend auf Expertenempfehlungen wählte ich einen Timer aus, der es den Benutzern ermöglicht, vier Fokus- und vier Pausenlängen auszuwählen. Der längste Timer sollte 90 Minuten betragen, da dies die optimale Dauer ist, um konzentriert zu arbeiten, bevor man eine Pause macht.

Paper Wireframes

Dies war ein Ausgangspunkt dafür, wie ich mir die App in Version 1 vorgestellt habe.

Hi-Fi Wireframes

Ich habe einen Stil entwickelt, der von dem Work Louder Keyboard-Widget inspiriert ist, das auch einen Pomodoro-Timer enthielt. Das Arc-Widget entwickelte sich zu einer kreisförmigen Gestalt, die sich mit einem Farbverlauf füllt, während der Timer abläuft.

Designsystem + Komponenten

Dieses Designsyst¬em wurde gemäß den Human Design Guidelines von Apple entwickelt und verwendet die Primärfarbe aus Apples Design-System, um sicherzustellen, dass die Anwendung ein natives iOS- Erscheinungsbild und Gefühl zeigt. Die Komponenten wurden ursprünglich in Figma erstellt und konfiguriert und anschließend mithilfe von Antigravity in eine .swift-Datei übertragen.

Bauen mit Antigravity

Durch die Verbindung meines MCP-Servers mit meinem Designsystem und meinen Komponenten konnte ich diese im Code wiederherstellen. Dies ermöglichte es mir, mich auf das Design zu konzentrieren und mein Fachwissen einzusetzen, während die KI die Programmierung meiner Anwendung übernimmt.

Bei der Arbeit mit Antigravity oder anderen agentischen KI-Tools ist es äußerst wichtig, den Kontext, die Sprache und die Fähigkeit, Ihre Wünsche klar zu artikulieren, zu kennen.

Funktionierende App

Obwohl die App noch in Arbeit ist, läuft sie nativ auf iOS mit Swift-Code. Unten ist eine Vorschau darauf, wie die App aussehen könnte, sobald sie veröffentlicht wird.

Nächste Schritte

Die App benötigt ein Icon, ein Onboarding-Design, App Store-Screenshots und die Statistikseite muss noch geschrieben werden.

Create a free website with Framer, the website builder loved by startups, designers and agencies.