Am 01. Januar 2020 gab es ziemlich genau 1.744.517.326 Websites. Im Juli 2020 sind es wahrscheinlich noch mehr. Aber wie genau entsteht eine Website überhaupt? Wie fängt man an und vor allem was macht eine gute Website aus? Falls du dir diese Fragen schon einmal gestellt hast, dann bist du hier genau richtig! Unser Dozent Lars erklärt dir in einem dreiteiligen Workshop alles, was du zum Bau einer erfolgreichen Website brauchst.

Hinweis: Sämtliche verlinkten Websites in diesem Beitrag wurden ausschließlich aufgrund ihrer thematischen Relevanz ausgewählt. Dabei handelt es sich nicht um Werbung.

Was erwartet dich?

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

Lars unterrichtet am bib in Bergisch Gladbach die Fächer Mediendesign und Typografie. In seinem Webdesign-Workshop bekommt ihr einen kurzen Einblick in den praxisbezogenen Unterricht am bib International College. Dieser Workshop ist in drei Teile aufgeteilt.

Step 1: Was sind die aktuellen Trends und wie organisiere ich eine Website?
Step 2: Erstellung eines Wireframes.
Step 3: Gestaltung eines Prototypen in Adobe InDesign.

Was bedeutet UI und UX?

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

Die gezeigten Websites wurde ausschließlich aufgrund ihrer thematischen Relevanz ausgewählt. Dabei handelt es sich nicht um Werbung!

UI- und UX Designer sind heute gefragter denn je. Aber warum eigentlich? Ganz klar: Apps, Smartphones und Websites sind der Grund dafür! UI bedeutet User Interface und ein UI-Designer kümmert sich hauptsächlich um die Benutzeroberfläche eines digitalen Produkts. Der UX-Designer dagegen bestimmt, wie sich der Benutzer durch das Produkt navigiert. Oder einfacher gesagt: ein UI-Designer macht alles, was man sieht und ein UX-Designer alles, was man erlebt.

Webdesign-Trend: Minimalismus

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

Die gezeigte Website wurde ausschließlich aufgrund ihrer thematischen Relevanz ausgewählt. Dabei handelt es sich nicht um Werbung!

Der Minimalismus ist ein weit verbreiteter und immer wiederkehrender Design-Trend. Warum? Weil er zeitlos ist. Die Webseite wulf architekten ist das perfekte Beispiel für den Minimalismus-Trend. Hier wurde nämlich ausschließlich auf Typografie gesetzt und nicht um den heißen Brei geredet. Bilder und Grafiken werden groß präsentiert, so dass man nicht abgelenkt wird. Im Minimalismus reduziert man auf das Wesentlichste. Das Motto lautet: Weniger ist mehr!

Webdesign-Trend: Splitscreen

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

Die gezeigte Website wurde ausschließlich aufgrund ihrer thematischen Relevanz ausgewählt. Dabei handelt es sich nicht um Werbung!

Splitscreen kennt der ein oder andere bestimmt aus dem Gaming-Bereich. Sei es bei Mario Kart oder im lokalen Multiplayermodus von Call of Duty. Heutzutage wird diese Technik auch sehr gerne für Webseiten verwendet. Die Webseite der App Houseparty macht’s vor! Die starken Kontraste machen es leicht, die einzelnen Informationen herauszufiltern. Der Nutzer wird bewusst durch die Website geführt. Grund dafür ist das UX-Design, welches den Nutzer kontrolliert zum Ziel bringen möchte. Und was ist das Ziel? Genau, die App herunterzuladen.

Webdesign-Trend: OnePager

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

Die gezeigte Website wurde ausschließlich aufgrund ihrer thematischen Relevanz ausgewählt. Dabei handelt es sich nicht um Werbung!

Beim täglichen Surfen im Internet kommt man an OnePagern gar nicht mehr vorbei. Wie der Name schon sagt ist ein OnePager eine einseitige Website – hier am Beispiel von calexo. Es gibt keine Unterseiten und keine Verlinkungen, um es dem Nutzer so einfach wie möglich zu machen. Alle Informationen erfährt man durch die natürliche Scroll-Bewegung. Diese Technik beruht auf das Nummer-1-Argument: Mobile first! Mit mehr als 50% sind über die Hälfte aller Internetnutzer mit dem Handy unterwegs. Kein Wunder also, dass man im Webdesign heutzutage vermehrt auf Smartphone-Nutzer setzt.

Was ist meine Zielgruppe?

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

Die gezeigte Website wurde ausschließlich aufgrund ihrer thematischen Relevanz ausgewählt. Dabei handelt es sich nicht um Werbung!

Bevor man mit dem Design und der Konzipierung einer Webseite beginnt, ist es wichtig seine Zielgruppe zu definieren. Durch die Definition der Zielgruppe kann man seine Nutzer direkt und fokussiert ansprechen. Dadurch hat man geringere Streuverluste und trifft wirklich nur diejenigen, die es auch interessiert. Das Beispiel Big Blue Button zeigt eine Möglichkeit, wie man drei verschiedene Zielgruppen in einer Website integriert.

Wie baue ich eine Website?

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

Bei dem Prozess einer Website werden zunächst in einem Brainstorming alle Ideen zusammengefasst. Dazu kommen viele verschiedene Mitarbeiter zusammen wie bspw. Designer, Programmierer, Marketingmitarbeiter und die Kunden, die gemeinsam die Ideen aus verschiedenen Blickwinkeln betrachten und bewerten. Am Beispiel von Big Blue Button veranschaulicht dir Lars genau diesen Prozess.

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

Das Brainstorming geht weiter: Welche Funktionen sind wichtig? Was ist die richtige Reihenfolge? Lars erklärt dir, warum Big Blue Buttons Entscheidungen richtig sind und was sie besonders macht. Natürlich spielen die Zielgruppen auch hier wieder eine wichtige Rolle, da sie die Grundstruktur der Webseite vorgeben.

Was ist eine Sitemap?

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

Nach einem erfolgreichen Brainstorming, ist es besonders wichtig alle Ideen klar zu strukturieren. Am besten eignet sich dafür eine sogenannte Sitemap. Die Sitemap ist eine Grafik, welche die Websiteinhalte in einer stark vereinfachten Form darstellt. Sie dient dazu zum Beispiel vor dem Kunden seine Idee zu „pitchen“. Bei einem Pitch versucht man seine Idee, sein Produkt oder Dienstleitung einem potenziellen Kunden zu verkaufen.

Wie ist ein Mediendesigner im Prozess einer Website eingebunden?

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

Als Mediendesigner ist man ein gefragtes Allround-Talent. Aber ist man als solcher eigentlich bei Projekten vom Anfang bis zum Ende involviert? Die Antwort ist Jein. Als Mitarbeiter einer großen Agentur hat man eher nur einen kleinen Einfluss auf das Ganze. Als Selbstständiger ist es durchaus möglich, dass man einen Kunden mit seinem Wunsch vom Anfang bis zum Ende betreut.

Sind Webdesign und Appdesign miteinander vergleichbar?

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

Appdesign und Webdesign sind im Grunde sehr ähnlich. Besonders wenn es darum geht, aus einer bestehenden Website eine App zu gestalten. Das trifft zum Beispiel auf Online-Shops zu. Jedoch sind auch hier wieder die UX-Designer gefragt, welche das App-Erlebnis erheblich erleichtern und besonders machen. Soll aber eine App eher ein Service sein, wie zum Beispiel ein Barcode-Scanner, unterscheiden sich die beiden sowohl im Aufbau als auch in der Erstellung.

Hat dir dieser Probeunterricht gefallen? Dann sei auch bei unserem letzten Workshop am 12. August um 17 Uhr dabei. Dort erfährst du nämlich, wie man einen Prototypen für eine Website erstellt.

Übrigens haben wir noch freie Ausbildungs- und Studienplätze für Oktober 2020! Du hast deinen Realschulabschluss oder (Fach-)Abitur und noch keinen Ausbildungs- oder Studienplatz? Dann ist das bib genau das Richtige für dich. Egal ob Mediendesign, Informatik, Wirtschaft, Game Art & Design oder Game Development bei uns ist für jeden etwas dabei. Wir freuen uns auf dich! Du hast Wünsche, Anmerkungen oder einfach eine Frage? Dann lass uns doch einfach einen Kommentar da. 🙂

Vanessa
Letzte Artikel von Vanessa (Alle anzeigen)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.