Von einem Design zu vielen Bildschirmen: Ein effizienterer Workflow für Splash-Screen-Assets
Warum Startbildschirme mehr Zeit in Anspruch nehmen, als ihr Design verdient, wie man einen erstellt, der bei jedem Seitenverhältnis funktioniert, und was ein fokussierter browserbasierter Generator leisten sollte.
Eine Startbildschirm ist eines der kleinsten Bestandteile einer mobilen App, doch sie verursacht oft erhebliche Verzögerungen bei der Veröffentlichung – weit mehr, als ihre Größe vermuten lässt. Das Logo ist fertig, die Markenfarben sind festgelegt, und dennoch muss jemand Launch-Assets für verschiedene Größen, Geräte und Plattformen erstellen. Nichts davon ist schwierig, aber es ist zeitaufwendig, leicht zu kleinen Fehlern führen und tritt bei jedem neuen Projekt wieder auf. Diese Anleitung zeigt, wohin die Anstrengungen tatsächlich fließen, wie man einen Startbildschirm gestaltet, der auf jedem Display gut aussieht, und was ein kleines, fokussiertes Generierungstool für Sie tun sollte (und nicht tun sollte).
Das Design ist schnell; die Exportierung ist die mühsame Aufgabe
Die meisten Startbildschirme sind absichtlich schlicht gestaltet. In der Regel gibt es einen soliden oder sanft abgestuften Hintergrund, ein Logo oder eine App-Marke sowie möglicherweise ein weiteres sekundäres visuelles Element. Die Entscheidung für diese Komposition kann einige Minuten in Anspruch nehmen.
Die tatsächlichen Kosten zeigen sich erst später, wenn diese eine Gestaltung überall funktionieren muss. Typische Probleme sind:
- eine Anordnung, die auf einem Handy ausgewogen aussieht, aber auf einem anderen eng oder seltsam leer wirkt
- ein Logo, das auf einem kleineren oder breiteren Bildschirm plötzlich zu groß erscheint
- Abstände, die bei einer Änderung des Seitenverhältnisses nicht mehr beabsichtigt wirken
- wichtige Teile eines Hintergrundbildes, die abgeschnitten werden
Falls Ihr Team mehrere Apps betreut, müssen sich die gleichen Fragen für jede einzelne erneut beantworten lassen. Es handelt sich dabei um repetitive Arbeit statt kreative Arbeit, wodurch sie gut für Automatisierungswerkzeuge geeignet ist.
Warum Startbildschirme schwieriger sind als App-Icons
Die Erstellung von App-Icons besteht hauptsächlich aus einer Anpassung der Größe: ein quadratisches Quellbild wird zu einer Reihe von quadratischen Ausgabebildern in bekannten Größen. Startbildschirme stellen ein anderes Problem dar, denn die eigene Darstellungsfläche ändert ihre Form.
Handys unterscheiden sich stark voneinander. Einige sind hoch und schmal, andere im Vergleich dazu breit. Viele haben Notch-Öffnungen, eine dynamische Insel, Gesten- oder Navigationsbereiche sowie weitere System-Oberflächenelemente, die die Ränder des Displays überschneiden. Wenn ein einzelnes Bitmap-Bild auf all diese Formen gezogen wird, wird es fast immer verzerrt oder ein wichtiger Teil wird abgeschnitten.
Eine Startbildschirm-Design, das dieser Vielfalt standhält, folgt in der Regel einigen Regeln:
- ein einziger, klarer Fokuspunkt, meist ein zentriertes Logo
- ausreichend Freiraum um alles, was sichtbar bleiben muss
- ein vorhersehbares Hintergrundbild, wie eine einfarbige Fläche, das in jede Richtung erweitert werden kann, ohne falsch auszusehen
- keine wesentlichen Details in der Nähe der Ränder, da dort zuerst Abschnitte abgeschnitten oder System-Oberflächenelemente erscheinen
Die Konventionen der Plattformen gehen in dieselbe Richtung. Neuere Android-Versionen erstellen das Startbild aus einem Icon auf einer Hintergrundfarbe, während iOS-Startbilder als Layout definiert sind und nicht aus einem einzigen festen Bild bestehen. Daher passt eine Komposition, die bereits aus „einem Symbol auf einem einfachen Hintergrund“ besteht, problemlos zu beiden Plattformen. Prüfen Sie die aktuelle Dokumentation der jeweiligen Plattform, um genaue Anforderungen zu erfahren – diese ändern sich bei jedem OS-Update.
Deshalb ist auch ein Vorschau-Schritt wichtig. Wenn man die Komposition auf mehreren typischen Bildschirmformaten vor dem Export ansieht, kann man bereits jetzt Probleme wie zu kleines Logo oder abgeschnittene Ränder erkennen, solange sie noch kostengünstig zu beheben sind. Die Tools sollten sich um die technische Anpassung der Größe kümmern; die kreative Entscheidung bleibt beim Entwickler.
Der Workflow, den man anstreben sollte
Kurz gesagt umfasst der ideale Prozess fünf Schritte:
- Geben Sie das Quellbild oder die Markenmaterialien bereit.
- Konfigurieren Sie, wie diese platziert werden sollen: Hintergrund, Logo-Größe, Abstand.
- Betrachten Sie die Vorschau auf verschiedenen Bildschirmformaten.
- Erstellen Sie die erforderlichen Startmaterialien.
- Kehren Sie zum Aufbau der App zurück.
Vollständige Design-Tools wie Figma oder Photoshop können all das durchaus bewältigen und bleiben weiterhin der richtige Ort, um die Gestaltung ursprünglich zu erstellen. Doch ein komplettes Design-Programm nur zum Exportieren von wenigen Startmaterialien zu öffnen, ist übertrieben. Was die Lücke füllt, ist ein leichtes Hilfsmittel, das nur den wiederholten Teil erledigt, der nach den Gestaltungsentscheidungen anfällt: Sie liefern das visuelle Element ein, und es wandelt dieses in Materialien um, die Sie direkt ins Projekt einfügen können.
Tools, die sich nicht in den Weg stellen
Eine nützliche Eigenschaft einer solchen Hilfssoftware ist, dass sie im Voraus fast nichts von Ihnen verlangt. Es gibt keinen guten Grund dafür, dass eine einmalige Aufgabe die Erfüllung folgender Schritte erfordert:
- einen Account anlegen
- eine E-Mail-Adresse bestätigen
- einen Arbeitsbereich einrichten
- ein Projekt benennen
- einen Abonnementplan wählen
- durch einen mehrstufigen Onboarding-Prozess klicken
Für diese Art von Aufgabe eignet sich das klassische Web-Hilfsprogramm-Modell am besten: Die Seite öffnen, die Aufgabe erledigen, das Tab schließen und beim nächsten Bedarf wieder darauf zurückgreifen. Bei der Bewertung solcher Tools ist die Hürde vor dem ersten Export ein geeigneter Indikator dafür, wie viel Zeit das Tool tatsächlich sparen wird.
Warum die Verarbeitung im Browser der richtige Standard ist
Bei einer derartigen Bildbearbeitung ist kein Server erforderlich. Moderne Browser können Bilder entschlüsseln, sie in beliebiger Größe auf einem Canvas darstellen und die Ergebnisse lokal kodieren – es gibt daher kaum einen Grund, die Quelldatei irgendwo hochzuladen.
Die Ausführung der Arbeit auf der Client-Seite bringt praktische Vorteile mit sich:
- es ist schneller, da es keine Übertragungsrunden hin und her gibt
- es muss weniger Infrastruktur aufgebaut, betrieben und bezahlt werden
- das ursprüngliche Kunstwerk muss nicht auf dem Server eines Dritten gespeichert werden, nur um eine in einer anderen Größe angefertigte Kopie zu erstellen
Der letzte Punkt ist wichtiger, als er auf den ersten Blick erscheint. Noch nicht veröffentlichte Markenmaterialien sind oft vertraulich, und ein Tool, das sie niemals überträgt, beseitigt eine Frage, die Ihr Team sonst stellen müsste. Bei Entwicklerwerkzeugen zur Dateiverarbeitung ist die lokale Verarbeitung eine sinnvolle Standardlösung und keine Optimierung.
Kleine Probleme verdienen trotzdem gute Tools
Niemand würde die Erstellung einer Startbildschirmansicht als großes, ungelöstes Ingenieurproblem bezeichnen – und genau das macht sie zu etwas, das sich automatisieren lässt. Betrachten Sie die Vorbereitungsarbeiten für eine einzelne Mobile-App: vielleicht zehn Minuten zum Erstellen der Startressourcen, weitere zehn für die Icons und dann noch mehr Zeit für Screenshots für den Store. Keine dieser Aufgaben ist für sich genommen so aufwendig, dass sie einen komplizierten Prozess rechtfertigen würden, doch sie treten bei jeder App und jedem Relaunch auf.
Jeder wiederkehrende Schritt, den Sie entfernen, macht den gesamten Entwicklungsprozess etwas reibungsloser. Eine natürliche Richtung für solche Tools sind spezialisierte Hilfsprogramme, die um den Prozess der Erstellung mobiler Ressourcen herum konzipiert sind, beispielsweise:
- einen Icon-Generator für Apps
- einen Generator für Startbildschirme
- einen Generator für Screenshots für den App Store und Google Play
Die gesunde Art und Weise, eine solche Sammlung aufzubauen, besteht darin, Werkzeuge entsprechend den tatsächlichen Herausforderungen bei der Lieferung von Produkten hinzuzufügen – und nicht, die Liste der Funktionen zu vergrößern. Wenn Ihr Team bei jedem Projekt weiterhin dieselben Ressourcen oder Konfigurationsdateien manuell erstellt, ist das ein gutes Zeichen dafür, dass diese Aufgabe ein eigenes Werkzeug mit einem Klick verdient hat.
Kernpunkte
- Die zeitaufwändigste Aufgabe bei Startbildschirmen ist die Anpassung eines Designs an viele verschiedene Bildschirmformate – nicht dessen Erstellung.
- Bauen Sie Ihr Design um einen zentrierten Fokuspunkt, einen Hintergrund, der sich frei ausdehnen kann, sowie ohne kritische Elemente in der Nähe der Ränder auf.
- Bereiten Sie das Design vor dem Export in verschiedenen Seitenverhältnissen im Voraus an – dort werden Probleme mit dem Zuschneiden und der Skalierung sichtbar.
- Ziehen Sie für einmalige Ressourcenarbeiten leichte Tools ohne Anmeldung vor und behalten Sie vollwertige Designwerkzeuge für die eigentliche Gestaltungstätigkeit.
Zusätzliche Literatur
- Planung eines Expo SDK 58-Updates: iOS 27, React Native 0.88 und neue Werkzeuge — Eine praktische Übersicht über die Expo SDK 58 Beta: Welche Änderungen gibt es für iOS 27 und React Native 0.88, welche Funktionen sind experimentell und wie man das Update sicher testet.
- Eine Sprache nach Art des Problems auswählen: Lektionen aus der Go-Portierung von TypeScript — Was die Wahl von Go für den nativen TypeScript-Kompilator darüber lehrt, wie man Werkzeuge an Arbeitslasten anpasst, die Geschwindigkeit der Werkzeuge berücksichtigt und große Codebasen schrittweise portiert.