Am 01. Januar 2020 gab es ziemlich genau 1,744,517,326 Websites. Heute im Juli sind es wahrscheinlich noch mehr. Aber wie entsteht eine Website überhaupt? Wie fängt man an? Und vor allem was macht eine gute Website aus? Falls du dich 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 Mediendesign und Typografie. In seinem Webdesign-Workshop bekommt ihr einen kurzen Einblick inden 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. Apps, Smartphones und Websites sind der Grund dafür! UI bedeutet User Interface. 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. Einfach gesagt, macht ein UI-Designer 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 der Minimalismus zeitlos ist. Die Webseite wulf architekten das perfekte Beispiel für den Minimalismus-Trend. Hierbei wurde ausschließlich auf Typografie gesetzt. Es wird also 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!

Den 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. Das Ziel ist es natürlich 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 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 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, 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 zum Beispiel Designer, Programmierer, Marketingmitarbeiter und die Kunden. Die verschiedenen Köpfe können so 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 von Anfang bis Ende involviert? Die Antwort ist Jaein. Es kommt drauf an. Als Mitarbeiter in 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 von Anfang bis 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 den nächsten zwei Online-Workshops dabei. Am 15. Juli geht es schon wieder weiter und Lars zeigt dir wie man ein Wireframe für eine Website erstellt. Was ein Wireframe ist, erfährst du dann da! Der letzte Workshop dieser Reihe findet am 12. August statt. Dort erfährst du endlich, wie man einen Prototypen für eine Website erstellt.

Wir haben noch freie Studienplätze für Oktober 2020! Du hast deinen Realschulabschluss oder 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.