Umsetzung
Website & Landingpage entwickeln
Aus einem freigegebenen Design wird eine responsive Website oder Landingpage, die auf kleinen und großen Bildschirmen bedienbar ist.
Frontend entwickeln
Aus deinem Design wird eine Website.
Der Entwurf steht. Jetzt müssen Navigation, Formulare und Inhalte auf verschiedenen Geräten funktionieren. Wir setzen die sichtbare Oberfläche um und verbinden sie mit den vorgesehenen Daten und Abläufen.
Leistungen im Shop ansehen Ein Arbeitsbeispiel ansehenEin Entwurf zeigt noch nicht jeden Zustand
Der Entwurf zeigt die Seite mit kurzen Texten und vollständigen Bildern. Deine Besucher bringen andere Fälle mit: lange Namen, eine leere Liste, eine unterbrochene Verbindung. Wir klären diese Zustände und bauen die Oberfläche so, dass die nächste Aktion verständlich bleibt.
Auf kleinen Bildschirmen bedienen
Inhalte müssen sich sinnvoll neu anordnen. Navigation, Auswahl und Rückmeldungen werden für schmale Ansichten und unterschiedliche Eingaben ausgearbeitet.
Mit echten Zuständen arbeiten
Laden, kein Treffer, Erfolg und Fehler brauchen eigene Rückmeldungen. Die Oberfläche zeigt nur den Status an, den das angeschlossene System tatsächlich bestätigt.
Fiktives Arbeitsbeispiel
Ein Kontaktformular verliert die Eingabe
Im fiktiven Entwurf gibt es eine Formularansicht und eine Danke-Seite. Bei einem Verbindungsfehler bleibt noch offen, was die Person zu sehen bekommt.
Die Veränderung
Die Umsetzung erhält Eingaben bei einem Fehler, erklärt den nächsten Versuch und zeigt die Bestätigung erst nach erfolgreicher Speicherung. Auch Tastaturbedienung und Feldfehler werden ausgearbeitet.
So wird geprüft
Der Ablauf wird mit gültigen Angaben, fehlenden Pflichtfeldern und einer unterbrochenen Verbindung geprüft. Danach folgt der Vergleich auf Mobilgeräten und Desktop.
Was der Entwurf noch offenlässt.
Ein Formular wird abgeschickt und die Antwort bleibt aus. Darf die Person erneut senden? Bleiben ihre Angaben stehen? Diese Entscheidungen fehlen auf einer Ansicht des ausgefüllten Formulars. Wir sammeln die benötigten Zustände vor der Umsetzung und stimmen sie mit der Gestaltung ab. So muss die Entwicklung das Verhalten nicht während des Bauens erraten.
Wir arbeiten mit dem vorhandenen Design und den technischen Rahmenbedingungen. Wiederkehrende Elemente werden konsistent umgesetzt; auf kleinen Bildschirmen verändern sich Reihenfolge und Aufteilung passend zur Aufgabe. Tastaturbedienung, sichtbarer Fokus und klare Rückmeldungen gehören zur konkreten Umsetzung. Welche Seiten, Zustände und Geräte geprüft werden, wird mit dem Umfang vereinbart.
Frontend-OptimierungPassende Leistungen
Alle Leistungen zum Thema Welcher Einstieg passt?
Eine Website umsetzen
Du hast ein Design und Inhalte für eine neue Website oder einen abgegrenzten Seitensatz. Die Frontend-Leistung beschreibt die Voraussetzungen und den vereinbarten Umfang.
Im bestehenden Frontend weiterarbeiten
Für bereits festgelegte Änderungen an einer vorhandenen Oberfläche ist eine begrenzte Frontend-Optimierung der passende Einstieg.
Umsetzung
Frontend-Optimierung
Bis zu drei vereinbarte Maßnahmen für dein bestehendes Frontend. Wir arbeiten in einer Testumgebung und dokumentieren das Ergebnis.
Bestehende Oberflächen weiterentwickeln.
Eine vorhandene Website muss nicht vollständig ersetzt werden, damit ein Formular oder eine Produktansicht besser funktioniert. Zuerst wird der betroffene Bereich eingegrenzt: Welche Komponenten werden genutzt, welche Daten werden gebraucht und welche anderen Seiten hängen daran? Eine kleine sichtbare Änderung kann viele Stellen berühren, wenn das gleiche Element mehrfach verwendet wird. Diese Abhängigkeiten gehören zur Planung.
Bei einem neuen Frontend wird die Übergabe an Inhalte und Backend früh berücksichtigt. Woher kommen Texte, welche Antwort liefert eine Schnittstelle und was passiert bei einem Fehler? Werden diese Fragen erst nach der Gestaltung beantwortet, entstehen unnötige Anpassungen. Eine abgegrenzte Umsetzung beschreibt deshalb sowohl die Oberfläche als auch ihre erwarteten Eingaben und Rückmeldungen.
Zum RatgeberSo gehen wir vor
Vom Entwurf zur nutzbaren Oberfläche.
Ansichten und Zustände abstimmen
Wir sichten den Entwurf und markieren fehlende Inhalte. Daraus entsteht die Liste der umzusetzenden Seiten, mobilen Ansichten und Interaktionen.
Im vorhandenen Stack entwickeln
Wir verwenden bestehende Komponenten und Datenquellen. Fehlende Antworten aus dem Backend stimmen wir mit der zuständigen Entwicklung ab.
Verhalten prüfen
Tastaturbedienung, kleine Bildschirme, lange Inhalte und Fehlerfälle gehören zur Prüfung. Gemeinsam genutzte Komponenten prüfen wir auch an ihren anderen Einsatzstellen.
Die Änderung übergeben
Wir dokumentieren die Tests und klären, wie die Änderung veröffentlicht wird. Dein Team erhält die Informationen, die es für spätere Anpassungen braucht.
Ansichten mit echten Inhalten
Verlinke den Entwurf oder beschreibe die betroffenen Seiten. Reale Textlängen, Bildformate und Listen helfen bei der Umsetzung. Markiere, welche mobilen Ansichten und Zustände bereits gestaltet sind und welche noch fehlen.
Projekt und Schnittstellen
Nenne vorhandenes Framework, CMS oder Shopsystem. Für dynamische Funktionen sind Beispielantworten und die beteiligten Datenquellen hilfreich. Zugänge werden erst über den abgestimmten Weg eingerichtet, nicht im öffentlichen Formular geteilt.
Abnahme und Veröffentlichung
Kläre, wer den Entwurf freigibt, wer die fertige Funktion prüft und wie Änderungen veröffentlicht werden. Wenn ein anderes Team den Betrieb übernimmt, beziehen wir dessen Anforderungen an Code und Dokumentation ein.
Könnt ihr einen Figma-Entwurf übernehmen?
Ja. Neben den Ansichten brauchen wir Informationen zu Verhalten, Inhalten und Daten. Offene Zustände werden vor oder während der abgestimmten Umsetzung konkretisiert.
Muss die Website mit einem neuen Framework entstehen?
Ein vorhandenes System wird zuerst geprüft. Die Wahl hängt von Aufgabe, Wartung und den Möglichkeiten deines Teams ab. Eine Migration ist eine eigene Entscheidung mit eigenem Aufwand.
Was gehört zur Übergabe?
Du erhältst die vereinbarte Umsetzung und Hinweise zur Übernahme und Weiterarbeit. Repository, Testumgebung, Bereitstellung und spätere Betreuung werden passend zum Auftrag abgestimmt.
Wie weit ist deine Vorlage?
Mit einem freigegebenen Entwurf und beschriebenen Funktionen lässt sich eine neue Oberfläche planen. Für eine bestehende Seite reicht auch eine konkrete Aufgabe: etwa eine Filteransicht, die am Handy überarbeitet werden soll. Dafür ist die Frontend-Optimierung gedacht.
Fehlen noch Inhalt und Nutzerweg, sollte zunächst ein Entwurf entstehen. Liefert das Backend die benötigten Daten noch nicht, planen wir diesen Teil separat ein. Ein fertiger Screen kann die Wartezeit auf eine fehlende Schnittstelle nicht abkürzen.
Zum Weiterlesen
