Deine Webseite
downward navigation icon

Was du erwarten kannst

left navigation icon
  • Individualität

  • Transparenz

  • Umfang

  • Preis

right navigation icon

Jeden Einzelschritt bis hin zur fertigen Webseite führe ich selber durch. Damit kann ich tatsächlich auf deine Ideen eingehen und diese in das Design einbetten. Dies ist gleichzeitig eine Garantie, dass dein Projekt maximale Aufmerksamkeit erhält.
Für mich steht die Qualität des einzelnen Projektes und somit der einzelne Kunde im Vordergrund. Eine Webseite mit Wiedererkennungswert zu erschaffen, ist mein erklärtes Ziel.

Der Prozess, in dem ich Webseiten designe und entstehen lasse, ermöglicht an vielen Stellen Rücksprache mit dem Kunden. Dies sorgt dafür, dass du regelmäßig über den Entwicklungsstand deiner Webseite in Kenntnis gesetzt wirst und wiederholt deine Ideen und Anpassungsvorschläge einbringen kannst. Das ist mir wichtig, um sicher zu stellen, dass wir beide zufrieden mit dem Endprodukt sind.
Weiter unten kannst du eine Idee von meinem Entwicklungsprozess bekommen.

Grundsätzlich umfasst ein Projekt bei mir immer Webdesign und Webentwicklung. Konkrete Informationen dazu findest du im nächsten Abschnitt.
Zusätzlich gibt es einige weitere Schritte, bevor eine Webseite online gestellt werden kann. Auf der einen Seite sind dies rechtliche Erfordernisse wie Datenschutzerklärung, Impressum oder AGB. Auf der anderen Seite aber auch das Hosten deiner Webseite und die Sicherung einer guten Domain, damit die Webseite öffentlich zugänglich ist. Nach Wunsch kann ich bei diesen Themen gerne Hilfestellung leisten oder einzelne Aspekte für dich übernehmen.

Feste Tarife oder Abonnements habe ich nicht, stattdessen halte ich einen projektspezifischen Preis für die fairste Lösung. Abhängig vom Umfang der Webseite und unser beider Vorstellungen bezüglich der Umsetzung kann der Preis variieren.
Ähnlich zum Preis ist auch die Bearbeitungsdauer abhängig vom einzelnen Projekt. Sobald wir uns über nähere Details zur Webseite verständigt haben, kann ich dir den Zeitraum nennen, den ich zur Bearbeitung brauchen werde.

So entsteht deine Webseite

1. Web Design in Figma

Schritte im Designprozess

  • Wireframe
  • Assets
  • Design

Info

Bevor eine Webseite in HTML erzeugt oder auf anderem Wege in, für Server verständliche, Sprache umgesetzt werden kann, wird in der Regel ein Design benötigt. Zum Erstellen eines solchen Designs verwende ich hauptsächlich die Designoberfläche Figma.
In der Übersicht unten erhältst du einen kleinen Einblick in die Konzeption von Wireframes, die Wichtigkeit von Assets und natürlich das Desgin.


Beispiel eines Wireframes
Wireframe

Der erste Schritt im Design einer Webseite ist das Erstellen eines so genannten Wireframes. Basierend auf den Inhalten, die deine Webseite zeigen soll, ist der Wireframe ein Konzept zur Anordnung einzelner Designelemente. Durch die Anordnung der verschiedenen Objekte wird der Nutzer durch deine Webseite geleitet und nächste Schritte werden für ihn möglichst leicht und offensichtlich gemacht.
Damit ist der Wireframe ein wichtiger Teil des UX-Design, welches die Nutzererfahrung (engl. User Experience) optimiert. Ein guter Wireframe erhöht die Wahrscheinlichkeit, dass Nutzer sich lange und gerne auf deiner Webseite aufhalten.
Als Beispiel ist ein Ausschnitt des Wireframes dieser Webseite zu sehen.

Beispiel für Assets
Assets

Nachdem mit einem guten Wireframe das grundlegende Layout erstellt wurde, gibt es einen weiteren wichtigen Schritt bevor das Design beginnen kann: Die Webseite braucht eindeutige Merkmale, die sie von anderen Designs abhebt und Individualität garantiert.
Im Design nennt man dies die Assets der Webseite. Dazu zählen Farbwahl, Schriftart und Logo, aber auch feinere Details wie die Art der gewählten Icons, konsistente Buttons und vieles mehr.
An dieser Stelle können kleine Verbesserungen eine große Auswirkung darauf haben, wie hoch der Wiedererkennungswert deiner Webseite ist.
Exemplarisch das Design eines Button Elements in unterschiedlichen Zuständen.

Beispiel eines Prototyps
Design

Basierend auf einem Fundament aus Wireframe und Assets, kann im letzten Schritt das tatäschliche Design erfolgen. Einzelne Elemente werden kreiert, mit Details versehen, aneinander und an den allgemeinen Stil der Webseite angepasst. Die Anordnung der Elemente wird finalisiert. Hierbei spielt auch der Platz zwischen den einzelnen Elementen, der Weißraum, eine wichtige Rolle.
Ebenfalls in diesem Schritt wird ein responsive Design erstellt, sprich die Webseite wird für die unterschiedlichen Endgeräte mit ihren verschiedenen Bildschirmgrößen optimiert.
Am Ende entsteht ein Prototyp, der oftmals mit ersten interaktiven Features versehen ist und z.B. simuliert, welche Funktion die Hyperlinks der Webseite später haben werden.
Anbei ist ein solcher Prototyp für diese Webseite vereinfacht dargestellt.

2. Umsetzung in Code

Um eine Webseite tatsächlich auch webfähig zu machen, nutze ich klassisch HTML und CSS. Hier schreibe ich dann auch (fast) jede Zeile Code selber. Mir gefällt diese ursprüngliche Art und auch hier kann man durch bestimmte Optimierungen sehr effizient coden.
Zusätzlich zur Auszeichnungssprache HTML (Auszeichnungssprache, weil man nicht tatsächlich programmiert, sondern nur Daten gliedert) und der Stylesheet-Sprache CSS (diese ist, wie der Name schon sagt, für das Aussehen der Elemente zuständig) nutze ich JavaScript und PHP, um interaktive Webseiten zu erstellen.
JavaScript ist hierbei wichtig um Handlungen des Nutzers, z.B. das Klicken auf ein Element, zu registrieren, auszuwerten und gemäß festgelegter Aktionen zu reagieren. PHP ist vor allem für die Anbindung zu Datenbanken und somit die Speicherung eingegebener Daten, aber auch für einfache Dinge wie ein funktionierendes Kontaktformular, wichtig.

Du möchtest die Online-Präsenz deines Unternehmens verbessern, eine Webseite für einen Blog oder einfach für dich selbst erstellen lassen?

Lass uns über dein Projekt sprechen!

Schreib mir