Mein Praktikum bei der webfactory
Während meiner Praktikumszeit konnte ich mit viel Spaß und ebenso viel Praxis meinen Horizont erweitern. Durch die Erstellung meiner ersten eigenen Website habe ich viel gelernt und kam mit dem Thema Webentwicklung in Berührung. Dennoch hielt der Weg so manche Hürden für mich bereit! Einige sollte ich schnell überwinden, andere sollten mich zum Verzweifeln bringen. Wie ich die einzelnen Herausforderungen gemeistert habe, erfahrt ihr in diesem Blogbeitrag.
In diesem Beitrag
Wie kam es dazu?
Zuallererst muss man wissen, dass ich zwar in Bonn geboren, aber in Ostbüren, einem kleinen Dorf in der Nähe von Unna, aufgewachsen bin. Wie ich trotzdem zu einem Praktikum in Bonn gekommen bin? Das geschah über mehrere Ecken und eher zufällig. Ein Freund meines Vaters hatte erfahren, dass mein zukünftiger Berufswunsch in die Richtung der Mediengestaltung ging. Da er gut mit Stefan befreundet ist, konnte ich so den Kontakt zur webfactory herstellen und nach einem kleinen „Praktikums-Bewerbungsgespräch“ stand fest, dass ich im Februar 2018 mein Praktikum bei der webfactory in Bonn bestreiten durfte. Nachdem sich der Januar 2018 dem Ende neigte, wuchs meine Vorfreude immer mehr, das Team und die Arbeitsatmosphäre kennenzulernen.
Was ist eigentlich Webentwicklung?
Da ich zuvor nicht wirklich mit Webentwicklung in Kontakt gekommen war, ging ich naiverweise davon aus, dass man eine Website folgendermaßen erstellt: einfach ein paar Blöcke in eine leere Website ziehen, diese mit einer benutzerfreundlichen Oberfläche nach Lust und Laune gestalten, sie anschließend mit Inhalt bestücken und sie dann einfach „im Internet“ speichern. Eben so, wie es die tollen Werbungen von diversen Homepage-Baukasten Websites versprechen. Ich sah also nicht gerade eine Herausforderung darin, eine Internetpräsenz zu erstellen. Jedoch sollte ich feststellen, dass diese einfache Welt so nicht existiert…
Jeder, der sich mit meiner naiven Ansicht identifizieren kann, darf nun einen kleinen Einblick in die Komplexität der Webentwicklung werfen: Hier ist ein kleiner Ausschnitt von unserer Website.
Wer sich nun fragt, was der ganze Text im Bild 2 zu bedeuten hat: So sieht ein recht simpler Code-Ausschnitt aus, welcher später vom Browser gelesen und, wie im Bild 1 zu sehen dargestellt wird.
Laufen lernen
Da das Thema Webentwicklung für mich etwas grundlegend Neues war, musste ich zunächst die Basics kennenlernen, weshalb mir CodePen und ein paar Bücher zum Thema ans Herz gelegt wurden. CodePen ist eine Online-Community zum Testen und Zeigen von HTML-, CSS- und JS-Codeschnipseln. Man kann direkt im Browser in einem Editor Code schreiben, welcher in einem zweiten Fenster daneben vom Browser interpretiert wird. Man bekommt also sofort ein Feedback und kann somit lernen, wie sich der Code verhält. Durch CodePen bekam ich einen seichten Einstieg in das Thema Webentwicklung und konnte ein rudimentäres „Verständnis“ (falls man das so nennen darf) aufbauen, wie HTML und CSS zusammen spielen, um eine Website zu strukturieren und zu gestalten. Somit habe ich zunächst Tags wie <html><body><header><div><h1><p><ul> und <li> kennengelernt. Meine erster Versuch sah so aus:
Es war genau an diesem Punkt, wo ich mental zwischen
und
stand. Es überwog dann aber doch letzteres.
Anschließend nahm ich mir das Buch „Resilient Web Design“ von Jeremy Keith vor, in dem es um die Entstehungsgeschichte des Internets und um grundlegende Herangehensweisen, wie man Webseiten flexibler und widerstandsfähiger machen kann, geht. Doch was mir am meisten im Kopf hängen geblieben ist, ist ein Zitat von Sir Isaac Newton: „If we have seen further it is by standing on the shoulders of giants.“ In anderen Worten: wenn unser Wissen durch Generationen weitergegeben wird, werden Theorien verfeinert, Maßeinheiten standardisiert und präzisere Experimente durchgeführt. Wir wären heute nicht an dem selben Punkt, wenn nicht das Wissen von früheren Generationen weitergegeben worden wäre. Diese Denkweise kann man auch auf die Webentwicklung übertragen. Das Web ist in einem ständigen Wandel und wird, solange wir unser Wissen weitergeben, auch in diesem Wandel bleiben.
Da in der webfactory mit GitHub gearbeitet wird, konnte ich mir mit TryGitHub einen guten Einblick in ein sogenanntes „Version Control System“ (VCS) verschaffen. Da die interaktive Webanwendung einem die Schritte spielerisch beibringt, sind die Basics leicht zu verstehen.
Ein VCS bringt viele Vorteile mit sich. Es dient zur Erfassung von Änderungen an z.B. Dokumenten oder Dateien. Jede Veränderung wird mit einem eigenen Versionsstempel versehen und in einem Archiv gespeichert. Somit kann man zu jedem Zeitpunkt auf eine ältere Version zugreifen, um z.B. Fehler, welche bei einer Änderung aufgetreten sind, zu beheben. Gerade aus dem Bereich der Webentwicklung ist ein VCS nicht mehr wegzudenken.
Da ich nun ein wenig mehr mit dem Thema Webentwicklung vertraut war, wurde mir das Buch „Responsive Webdesign“ von Christoph Zillgens an die Hand gegeben. Wie der Titel schon verrät, geht es um responsives Webdesign. Aber was ist das?
„Responsive Webdesign“ ist eine gestalterische und technische Denkweise zur Erstellung von Websites. Grundsätzlich geht es darum, eine Website für jedes nur mögliche Endgerät optimal darzustellen. Früher war es üblich, eine Website einfach für zwei bis drei verschiedene Bildschirmgrößen zu erstellen. Jedoch gibt es mittlerweile unfassbar viele Größenvarianten, weshalb man eine Website nicht mehr mit festen Breitenangaben, sondern mit flexiblen Variablen designed.
Wenn man mit Responsive Webdesign arbeitet, wird man schnell über Begriffe wie „Mobile First“ oder „Desktop First“ stolpern. Beides sind Methoden, wie man eine Website gestalten kann. Im Fall von „Mobile First“ beginnt man, seine Website von der mobilen Ansicht aus zu gestalten. Dafür gibt es viele verschiedene Gründe. Ich habe hier drei Gründe aufgelistet, welche mir am wichtigsten erscheinen:
- Durch den mangelnden Platz ist man daran gebunden, nur den wichtigsten Inhalt auf seiner Website darzustellen – somit vermeidet man schon in der Konzeptionsphase überflüssige Nebeninformationen.
- Zur Zeit gibt es 4,12 Milliarden Internet Nutzer. Davon sind 3,8 Milliarden Nutzer mit dem Smartphone im Internet. Das sind ~ 93% der User (Stand July 2018). Somit macht es mehr als Sinn, seine Website zunächst für eine mobile Ansicht zu gestalten.
- Progressive Enhancement (auf deutsch „fortschreitende Verbesserung“) beschreibt die Vorgehensweise, eine Website so zu gestalten, dass sie auch unter erschwerten Bedingungen, wie z.B. auf alten Smartphones (mit wenig Leistung), in veralteten Browsern, trotz schlechtem Netzempfang etc. so funktioniert, dass User ihre Bedürfnisse befriedigen können (Zeitungsartikel lesen, Formular abschicken, …). Danach verbessert man die UX (User Experience) dieser „Basisversion“ für Geräte, Browser und Situationen, die mehr Möglichkeiten unterstützen und erlauben.
Beim „Desktop First“ läuft es genau andersherum. Hier beginnt man aus der Desktop Ansicht heraus, seine Website zu gestalten. Obwohl auch sinnvolle Argumente für „Desktop First“ sprechen, ist meine persönliche Vorliebe der „Mobile First“ Ansatz.
Meine Portfolio Website
Wireframes
Da ich nun einen Grundschatz an Informationen zum Thema Webentwicklung besaß, konnte ich endlich mit der Entwicklung meiner eigenen Website beginnen. Zunächst musste die Frage geklärt werden, was meine Website beinhalten sollte. Da ich in meiner Freizeit gerne zeichne und mit Photoshop experimentiere, stand schnell fest, dass es in die Richtung einer Portfolio-Website gehen sollte. Nachdem diese Entscheidung feststand, fing ich damit an, s.g. Wireframes anzufertigen. Wireframes sollen dazu dienen, eine Struktur für eine Seite festzulegen, ohne sich dabei von Designelementen wie Farben und Bildern ablenken zu lassen. Jedoch waren in meinem Kopf tausend Ideen von tollen animierten Diagrammen und außergewöhnlichen Formen, die mit Funktionen belegt werden könnten, sodass ich nicht bei dem Erstellen einer Struktur blieb, sondern sofort begann, mir Gedanken über Dinge zu machen, welche noch weit entfernt lagen. Doch mit Hilfe von Stefan konnte ich drei Wireframes zu Papier bringen, welche mir im späteren Erstellungsprozess meiner Website sehr halfen.
Im nächsten Schritt begann ich zunächst, ein Logo und Icons für meine Website zu erstellen. Dabei half mir ein Artikel namens „The Ultimate Guide to a Flat Icon Set“. Muzli ist ein Blog, der viele nützliche Tipps zu digitalem Design und UX veröffentlicht. Mit Hilfe von Stefan und dem Artikel konnte ich mein erstes Icon Set erstellen, welches sich aber im Laufe des Designprozesses meiner Website noch mehrere Male verändert hat.
Responsive
In dem zuvor erwähnten Buch „Responsive Webdesign“ ging es um den responsiven Aspekt einer Website. Dieser durfte natürlich auch in meiner Website nicht fehlen. Deshalb sollte ich mich noch eingehender in das Thema Media Querys einlesen. Nach kurzem Durchstöbern des Internets konnte ich damit beginnen, meine Website mit Media Querys für mehrere Endgeräte zu optimieren.
Inhalte integrieren
Nachdem ich meine Website für verschiedene Endgerätgrößen optimiert hatte, war es an der Zeit, meine Inhalte einzufügen. Mit Hilfe des so genannten „Masonry Layout PlugIns“ konnte ich meine Bilder auf eine schöne Art und Weise darstellen. Dieses Layout findet man z.B. bei Pinterest oder folgenden Seiten: Kristian Hammerstad, Loading Effects for Grid Items. Masonry sortiert Objekte wie Bilder nach ihrer Größe, sodass möglichst keine Lücken entstehen. Außerdem bringt dieses PlugIn großartige Lade-Effekte mit sich, wie man im letzten Beispiel sehen kann.
Farbpalette
Der nächste Schritt auf meiner Liste sollte mir noch schlaflose Nächte bereiten…
Die große Frage der Farbpalette stand im Raum. Mit Hilfe von verschiedenen Seiten, wie z.B. Pigment und Coolors konnte ich sehr schnell Farbkombinationen finden, was sich sowohl Segen als auch Fluch herausstellte, da ich nicht mehr aufhören konnte, neue Farbpaletten zu generieren. Ich hatte schnell ungefähr 16 verschiedene Farbkombinationen, welche mir alle gefielen.
Mein typischer Arbeitsablauf bestand daraus, dass ich mich vormittags mit Stefan oder Søren zusammensetzte und überlegte, welche Features oder Verbesserungen ich im Laufe des Tages umsetzen wollte. Häufig bekam ich hilfreiche Tipps zur Hand und konnte bei Fragen immer einen Ansprechpartner finden.
So stand ich nun da mit meinen 16 verschiedenen Farbpaletten, und jedes Mal, wenn ich mit Fragen zu den beiden kam, hatte ich eine andere Farbpalette auf der Seite implementiert, was die beiden sichtlich zur Verzweiflung brachte!
Natürlich konnten sie mir auch bei diesem Problem weiter helfen. Ich bekam den Blogartikel „V6-Color“ an die Hand, in dem Rob Weychert (ein Künstler und Designer aus Brooklyn, NY) beschreibt, wie man das Problem mit der Farbauswahl lösen kann. Seine Idee ist es, die Website zunächst einmal nur mit Grauabstufungen zu designen, um so zu erkennen, welche Bereiche akzentuiert werden sollen. Anschließend kann man dann eine Farbpalette darüberlegen, welche die selbe Priorisierung von Farben hat. Man verhindert so, dass zu viele Objekte auf der Website durch Farben hervorgehoben werden und miteinander in Konkurrenz treten.
Typografie
Nun war es an der Zeit, sich mit dem Thema Typografie zu beschäftigen. Noch nicht ganz ausgesprochen, lag auch schon ein 400 Seiten schweres Buch vor mir, mit dem Titel „Detailtypografie“ von Friedrich Forssman. Zuvor hätte ich nie gedacht, dass man sich so viele Gedanken zu Schrift machen kann. Zugegeben war ich damit auch dezent überfordert, weshalb ich mir mit der Hilfe von Google Fonts ein schönes Schriftarten-Pärchen (zwei aufeinander abgestimmte Schriftarten) aussuchte und es anschließend in meine Seite einband.
Veröffentlichung
Da sich meine Praktikumszeit langsam dem Ende neigte, durfte einer der wichtigsten Schritte natürlich nicht fehlen: Das Veröffentlichen!
Mittlerweile konnte sich meine Website sehen lassen. Ich war selber von dem Resultat begeistert und erstaunt, was man in vier Wochen ohne Anfangswissen auf die Beine stellen kann. Somit war es an der Zeit, meine Website über GitHub Pages im Internet zu veröffentlichen. GitHub Pages ist ein kostenloser Dienst, um statische Websites zu hosten. Nachdem dieser Schritt ebenfalls abgehakt war, musste ich natürlich meine Website sofort mit dem Smartphone aufrufen!
Es war ein magischer Moment für mich, meine Arbeit von über vier Wochen endlich, im wahrsten Sinne des Wortes, in den Händen halten zu können. Die eigene Website über sein Smartphone aufzurufen fühlt sich einfach großartig an.
Parallel zu meiner Freude tauchten noch die ein oder anderen Schönheitsfehler auf, welche zuvor von mir nicht abzusehen waren. Diese wurden natürlich dann noch schnell behoben.
Und so sieht meine Website nun aus: https://dermeier.github.io/portfolio-website/
Die Überraschung
Schon zu Beginn des Praktikums war ich gefragt worden, wie meine zukünftigen Pläne aussähen. Tatsächlich war ich auf der Suche nach einem Ausbildungsplatz im Bereich Mediengestaltung. Zufälligerweise suchte die webfactory noch einen Auszubildenden für das Jahr 2018. Daher wurde mir der Vorschlag gemacht, dass man nach dem Praktikum einmal schauen könnte, ob sowohl die webfactory als auch ich mir eine Ausbildungsverhältnis vorstellen könnte. An meinem vorletzten Tag wurde ich dann zu einem kleinen Gespräch gebeten. Mit einem Kaffee in der Hand erwarteten mich Stefan und Søren, um mit mir das Praktikum zu rekapitulieren. Doch wir kamen recht schnell zu dem Punkt, an dem Søren sagte: „Ich habe ein gute und eine schlechte Nachricht! Die gute Nachricht ist: du darfst gerne deine Ausbildung bei uns anfangen! Die schlechte Nachricht ist, dass du dann auch im alltäglichen Wahnsinn der Webentwicklung steckst.“ Ich denke, es ist nicht nötig zu erwähnen, wie sehr ich mich über diese Nachricht gefreut habe!
Am liebsten hätte ich noch am selben Tag den Vertrag unterschrieben, zuvor mussten aber noch ein paar organisatorische Dinge geklärt werden. Wie anfangs schon erwähnt wohnte ich nicht in Bonn und ein tägliches Pendeln von insgesamt fünf Stunden wäre nicht möglich gewesen. Doch nach ausgiebiger Absprache mit meinen Eltern stand fest, dass ich nach Bonn ziehen würde. Infolgedessen konnte ich meinen Vertrag einige Woche später unterschreiben!
Mein letzter Tag
Am letzten Tag des Praktikums erstellte ich eine Präsentation, welche ich dann nach dem Mittagessen dem ganzen Team präsentierte. Zu meiner Überraschung wurde mir als Abschiedsgeschenk ein Buch über die Geometrie des Designs überreicht.
Schneller als ich es erwartet hätte, hieß es nun, im wahrsten Sinne „Auf Wiedersehen“ zu sagen.
Fazit
Abschließend kann ich sagen, dass die Zeit bei der webfactory großartig, herzlich und informativ war. Ich habe in den vier Wochen so viele neue Sachen gelernt ohne überhaupt zu bemerken, dass ich sie lerne. Ebenso hat der Aufenthalt meine Interessen so erweitert, dass ich das neu entdeckte Interessenfeld nun zu meinem Beruf machen möchte/werde. Bei der webfactory fühlt man sich einfach wie Zuhause!