Nach der Planung ging es an die Umsetzung. Zunächst erstellte ich das HTML Grundgerüst und dann kam die Gestaltung. Für mich der schwierigste Part, denn das “zusammensetzen” einer Seite ist die eine Sache. Dass dies auch optisch harmonisch zusammen spielt eine ganz Andere. Was gut oder schlecht aussieht kann ich für mich zwar unterscheiden, es von Null auf neu zu erstellen war für mich eine Herausforderung!
Die grundsätzliche Farbwahl ins Dunkle fiel mir leicht da ich mich einfach an meinen persönlichen Geschmack gehalten habe. Was das Design der einzelnen Elemente und die Schriften Auswahl angeht, habe ich mir die Hilfe meiner Partnerin geholt (sie ist UX/UI Designerin). Von Ihr bekam ich meinen eigenen Styleguide und das Design für mein Wireframe.
Der Stylguide
So ausgestattet wollte ich sofort loslegen, doch da war noch was: In fast jedem Online-Kurs welchen ich mir zum Lernen angeschaut habe, wurde eine Sache sehr betont. MOBILE FIRST !!! Die Zeiten wo Internet nur am Desktop PC genutzt wurde sind längst vorbei. Der logische Schluss daraus war für mich, zunächst einmal für mobile Endgeräte zu entwickeln und danach erst die Anpassungen für größere Bildschirme vorzunehmen.
Dafür gibt es viele Wege und Frameworks, zum Beispiel Bootstrap. Da ich hier aber nur theoretisches Wissen habe, entschied ich mich zunächst auf ein Framework zu verzichten und mit Flexbox und normalen Media-Abfragen zu arbeiten.
Endlich ging es los. Um nicht die Übersicht zu verlieren und das Gesamtbild immer vor Augen zu haben, war der Styleguide ein unglaublich tolles Hilfsmittel. Ich konnte meine Seite so gut Stück für Stück in Code umwandeln:
Es ist ein tolles Gefühl wenn die Seite das macht was man möchte. Und wenn Sie es mal nicht tut: Es gibt immer eine Lösung! Ich habe gelernt dass Rückschläge eher Hinweise zum Umdenken sind und es absolut notwendig ist auf Fehlersuche zu gehen. Nicht zu vergessen ist das Entwickler Tool im Browser. Das habe ich lieben gelernt.
Mein Fazit daher: Je mehr ich dazulerne um so mehr Spass macht es !
Wie ich meine Website geplant habe und die ersten Wireframes mit Adobe XD gebaut habe.
ansehenIch beantworte sie gerne und würde mich über eine Nachricht oder einen Anruf von dir freuen!