Sie sind auf Seite 1von 13

Mein Praktikum bei der webfactory about:reader?url=https%3A%2F%2Fwww.webfactory.de%2Fblog%2Fm...

webfactory.de

Mein Praktikum bei der webfactory


Lukas Meier

16-19 Minuten

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.

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

1 von 13 21.11.2021, 16:13


Mein Praktikum bei der webfactory about:reader?url=https%3A%2F%2Fwww.webfactory.de%2Fblog%2Fm...

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.

2 von 13 21.11.2021, 16:13


Mein Praktikum bei der webfactory about:reader?url=https%3A%2F%2Fwww.webfactory.de%2Fblog%2Fm...

Bild 1: Die "Über uns"-Seite der webfactory

Bild 2: Das HTML der "Über uns"-Seite

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,

3 von 13 21.11.2021, 16:13


Mein Praktikum bei der webfactory about:reader?url=https%3A%2F%2Fwww.webfactory.de%2Fblog%2Fm...

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

4 von 13 21.11.2021, 16:13


Mein Praktikum bei der webfactory about:reader?url=https%3A%2F%2Fwww.webfactory.de%2Fblog%2Fm...

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

5 von 13 21.11.2021, 16:13


Mein Praktikum bei der webfactory about:reader?url=https%3A%2F%2Fwww.webfactory.de%2Fblog%2Fm...

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

6 von 13 21.11.2021, 16:13


Mein Praktikum bei der webfactory about:reader?url=https%3A%2F%2Fwww.webfactory.de%2Fblog%2Fm...

erscheinen:

1. 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.

2. 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.

3. 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

7 von 13 21.11.2021, 16:13


Mein Praktikum bei der webfactory about:reader?url=https%3A%2F%2Fwww.webfactory.de%2Fblog%2Fm...

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

8 von 13 21.11.2021, 16:13


Mein Praktikum bei der webfactory about:reader?url=https%3A%2F%2Fwww.webfactory.de%2Fblog%2Fm...

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.

9 von 13 21.11.2021, 16:13


Mein Praktikum bei der webfactory about:reader?url=https%3A%2F%2Fwww.webfactory.de%2Fblog%2Fm...

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

10 von 13 21.11.2021, 16:13


Mein Praktikum bei der webfactory about:reader?url=https%3A%2F%2Fwww.webfactory.de%2Fblog%2Fm...

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

11 von 13 21.11.2021, 16:13


Mein Praktikum bei der webfactory about:reader?url=https%3A%2F%2Fwww.webfactory.de%2Fblog%2Fm...

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

12 von 13 21.11.2021, 16:13


Mein Praktikum bei der webfactory about:reader?url=https%3A%2F%2Fwww.webfactory.de%2Fblog%2Fm...

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!

Wir freuen uns über Feedback und Diskussionen via @webfactory!

13 von 13 21.11.2021, 16:13

Das könnte Ihnen auch gefallen