Modernes Webdesign mit Jonas Hellwig

Der neue Standard für erfolgreiches Webdesign!
4.6 (28 ratings) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
78 students enrolled
Instructed by Rheinwerk Verlag Design / Web Design
$120
Take This Course
  • Lectures 97
  • Contents Video: 12 hours
    Other: 0 mins
  • Skill Level All Levels
  • Languages German
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 5/2015 German

Course Description

Sie möchten attraktive und zukunftsfähige Websites gestalten? Dann sollten Sie sich dringend dieses Training anschauen! Webdesign-Experte Jonas Hellwig erklärt, wie Sie im Zeitalter des mobilen Webs überzeugende Websites konzipieren und umsetzen, die auf jedem Gerät perfekt funktionieren. Mit modernen Gestaltungskonzepten, zahlreichen Praxistipps und aktuellen Designtrends wie Flat Design, Rapid Prototyping und Parallax Scrolling erhalten Sie mit diesem Training außerdem eine Fülle an Inspirationen für Ihre Projekte.

- Von der Idee bis zur fertigen Website

- Die aktuellen Designtrends – von Flat Design bis Rapid Prototyping

- Konzepte und Workflows für Multi-Screen-Websites

Jonas Hellwig ist einer der gefragtesten Webdesigner in Deutschland und Gründer der erfolgreichen Design-Agentur »kulturbanause«. Unter der Adresse blog.kulturbanause.de bietet er mit zahlreichen Artikeln, Tutorials und Tipps eine wichtige Informationsquelle für moderne Web-Themen. Hellwig ist Experte für Webdesign, Photoshop und WordPress und gibt sein Wissen regelmäßig in Video-Trainings, Schulungen und Vorträgen weiter.

What are the requirements?

  • Basiswissen über HTML, CSS und Webdesign allgemein ist hilfreich, aber nicht erforderlich. Dies ist ein umfassender Kurs.

What am I going to get from this course?

  • Sie möchten attraktive und zukunftsfähige Websites gestalten? Dann sollten Sie sich dringend dieses Training anschauen! Webdesign-Experte Jonas Hellwig erklärt, wie Sie im Zeitalter des mobilen Webs überzeugende Websites konzipieren und umsetzen, die auf jedem Gerät perfekt funktionieren.
  • Das moderne Responsive Webdesign erfordert völlig neue Arbeitsabläufe und Werkzeuge. Lernen Sie jetzt, wie Sie in jedem Stadium des Designprozesses sicherstellen, dass Ihr Konzept aufgeht.
  • Vom Briefing zum Designkonzept – der Webexperte zeigt Ihnen, wie Sie ein professionelles Webprojekt mit modernen Mitteln umsetzen. Sie entwickeln blitzschnell Prototypen, erarbeiten das Layout, nutzen Web-Schriften und optimieren Ihr Design für Retina-Displays.
  • Mit modernen Gestaltungskonzepten, zahlreichen Praxistipps und aktuellen Designtrends wie Flat Design, Rapid Prototyping und Parallax Scrolling erhalten Sie mit diesem Training eine Fülle an Inspirationen für Ihre Projekte.

What is the target audience?

  • Alle, die attraktive und funktionale Webseiten planen, gestalten und umsetzen wollen, die auf allen Geräten gleichermaßen gut aussehen und funktionieren
  • Alle, die Profi-Tipps für einen optimalen Design-Workflow wehalten möchten
  • Jeder, der Responsive Webdesign richtig beherrschen möchte
  • Alle, die moderne Webtechnologien richtig anwenden wollen

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Moderne Arbeitsabläufe im Webdesign
00:17

In diesem Video gibt Ihnen Jonas Hellwig einen Überblick über die Themen des Kapitels. Sie erfahren alles über aktuelle Design-Trends, unterschiedliche Browser-Technologien und den schnellsten Weg zum ersten Prototypen.

11:17

Fast täglich erscheinen neue Mobilgeräte, Code-Editoren und Design-Werkzeuge. Wie Sie in dieser Vielfalt den Überblick behalten und zielgerichtet arbeiten, verrät Ihnen Jonas Hellwig in diesem Video.

10:56

Auch im Webdesign gibt es unterschiedliche Trends – von aufwändigen Retro-Looks bis zum puristischen Flat Design ist alles möglich. Machen Sie sich mit den verschiedenen Stilen vertraut und verleihen Sie Ihren Websites einen ganz eigenen Charakter.

06:58

Rapid Prototyping ermöglicht es Ihnen, Ihre Webseite kontinuierlich zu verbessern und an Ihre Bedürfnisse anzupassen. Mithilfe von Vorlagen und Frameworks erstellen Sie blitzschnell Prototypen und erhalten bereits frühzeitig einen Eindruck von der fertigen Website.

06:03

Moderne Websites bestehen oft aus einer Vielzahl kleiner Elemente. Was dieses »atomare Design« für Sie bedeutet und wie Sie Webseiten modular aufbauen, verrät Ihnen Jonas Hellwig in diesem Video.

05:55

Die so genannten »Style Tiles« geben einen ersten Einblick in die visuelle Sprache Ihres Prototyps. Auch für die Präsentation von Arbeitsergebnissen eignen sich diese Design-Entwürfe hervorragend. Jonas Hellwig zeigt Ihnen, wie Sie Style Tiles für Ihren Website-Entwurf anlegen.

07:09

Ein Style Guide bündelt einheitliche Richtlinien für die Gestaltung Ihrer Webseite. Farbpaletten und typografische Entscheidungen zählen ebenso dazu wie die Handhabung von Schaltflächen und Symbolen.

20:23

In diesem Video stellt Ihnen Jonas Hellwig verschiedene Code-Editoren vor. Anhand eines Beispiels erfahren Sie anschließend, wie Sie mit dem Code Inspector direkt im Browser arbeiten und verschiedene Werkzeuge kombinieren.

04:55

In der modernen Webentwicklung gibt es zwei grundlegende Konzepte für Websites, die sowohl am PC wie auf dem Mobilgerät überzeugen: Entweder stufen Sie eine aufwändigere Desktop-Website schrittweise herab, oder Sie erweitern eine reduzierte Mobilversion um zusätzliche Funktionen für den großen Bildschirm.

10:50

Das frei verfügbare Skript »Modernizr« gibt Ihnen Aufschluss darüber, welche Web-Technologien ein Browser unterstützt. Jonas Hellwig zeigt Ihnen, wie Sie auf Basis dieser Rückmeldung gezielt alternative Lösungen anbieten.

06:09

Das Konzept »Mobile First« beruht darauf, Websites zuerst für mobile Endgeräte zu entwickeln. Wie diese Entscheidung auch Ihre konzeptionelle und inhaltliche Arbeit beeinflusst, verdeutlicht Jonas Hellwig in diesem Video.

Übungsmaterial zu den einzelnen Abschnitten
Article
Section 2: Vom Briefing zum Design-Konzept
00:20

In diesem Video präsentiert Ihnen Jonas Hellwig die Themen des folgenden Kapitels. Sie konzipieren Ihr eigenes Layout, lernen unterschiedliche Navigationskonzepte kennen und choreografieren das Erscheinen der einzelnen Seitenelemente.

09:20

Gute Layouts bedürfen guter Planung. Lernen Sie in diesem Video, wie Sie den Seitenaufbau skizzieren, technische Probleme frühzeitig ausschließen und den Arbeitsaufwand realistisch einschätzen.

10:46

In diesem Video erfahren Sie, wie Sie Teaser-Elemente mit einer »Flexbox« umschließen und so deren Ausgabe kontrollieren. Auf diese Weise können Sie die Inhalte Ihrer Webseite ganz auf das jeweilige Endgerät zuschneiden.

06:18

Die meisten Sitemaps sind hierarchisch aufgebaut. Andere hingegen bilden netzförmige Strukturen. In diesem Video erfahren Sie, welche Variante für welchen Fall geeignet ist, wie Sie Querverweise kennzeichnen, die Navigation platzieren und Schlagworte sinnvoll verwenden.

14:07

In diesem Video stellt Ihnen Jonas Hellwig unterschiedliche Navigationsstrukturen vor. Außerdem erfahren Sie, wie Sie Portalseiten verwenden und komplexe Menüs benutzerfreundlich organisieren.

03:53

Nicht immer liegen zum Projektbeginn bereits die Inhalte vor. Die Planung nur mit Blindtexten birgt jedoch entscheidende Nachteile. Jonas Hellwig erklärt in diesem Video, warum Sie in manchen Fällen erst loslegen sollten, wenn Sie die tatsächlichen Inhalte kennen.

06:07

Webdesign ist heutzutage immer auch Design für Touchscreens. Messen Sie deshalb Schaltflächen und Symbolen ausreichend Platz zu und gehen Sie bewusst mit Hover-Effekten um. Auch die Gestensteuerung sollten Sie nicht vernachlässigen.

09:15

In diesem Video führt Sie Jonas Hellwig durch die Konzeption des Beispielprojekts. Führen Sie die Inhalte zusammen, definieren Sie die Ziele und planen Sie die Seitenstruktur. Zum Schluss prüfen Sie den logischen Aufbau aller Einzelseiten.

Section 3: Die Weichen stellen mit Media Queries
00:21

Jonas Hellwig gibt Ihnen einen Einblick in die Inhalte des Kapitels: Sie lernen darin unterschiedliche Layout-Typen kennen, ermitteln die Werte für Layout-Umbrüche und erlernen den Umgang mit CSS3 Media Queries

05:50

Zu Beginn des Kapitels macht Jonas Hellwig Sie mit drei unterschiedlichen Layout-Typen vertraut: fixiert, flüssig und elastisch. Jonas Hellwig wägt Stärken und Schwächen jedes Konzepts für Sie ab und demonstriert, wie Sie diese verschiedenen Ansätze vorteilhaft kombinieren.

04:37

Wenn Sie verschiedene Layout-Methoden kombinieren, müssen Sie geeignete Stellen für Umbrüche ermitteln. Jonas Hellwig zeigt Ihnen, warum Sie sich dabei jedoch nicht nur an den unterschiedlichen Geräteklassen orientieren sollten.

05:18

Breakpoints können Sie entlang verschiedener Geräte-Auflösungen setzen – und damit eine Menge Platz verschenken. Wie Sie mit modularen Layouts den Raum deutlich besser ausnutzen, erfahren Sie in diesem Video.

09:45

Um Breakpoints zu definieren, verwenden Sie Medienabfragen in Ihrer CSS-Datei. Außer der Bedingung für den Umbruch legen Sie darin auch fest, ob die Anweisung nur für Bildschirme oder auch für die Druckausgabe gilt.

06:31

Medienabfragen sind das Mittel der Wahl, wenn Sie Websites nach dem Prinzip »Mobile First« entwickeln. Jonas Hellwig zeigt Ihnen, wie Sie diese Abfragen sinnvoll einsetzen und bestimmte Funktionen für alte Browser ganz einfach nachrüsten.

Section 4: Gestaltungsraster und Prototypen
00:23

Verschaffen Sie sich in diesem Video einen Überblick über die Inhalte des Kapitels. Jonas Hellwig erklärt Ihnen darin den Umgang mit Rastern, Frameworks und Code-Vorlagen und macht Sie mit dem Box-Modell vertraut.

08:32

Schaffen Sie Ordnung auf Ihrer Webseite. Jonas Hellwig erklärt Ihnen das Prinzip der Gestaltungsraster und zeigt, wie Sie Floats und vorgefertigte Grid-Systeme effizient einsetzen.

06:29

Mehrspaltige Grid-Systeme beanspruchen eine Menge Platz. Lernen Sie in diesem Video, wie Sie die Spaltenzahl eines Grid-Systems dynamisch anpassen und so jedem Endgerät den passenden Inhalt liefern.

18:19

In diesem Video lernen Sie, wie Sie Ihr eigenes Grid-System erstellen. Sie erzeugen die HTML-Struktur, bestimmen die Breite von Inhaltselementen und setzen dazu passende Breakpoints.

06:25

Lockern Sie Ihr Layout mit zusätzlichen Innenabständen auf. Lernen Sie dazu das klassische Box-Modell kennen und erfahren Sie, wie Sie die erweiterten Möglichkeiten von CSS3 nutzen.

07:51

In diesem Video führt Ihnen Jonas Hellwig vorgefertigte Seiten-Vorlagen vor und vergleicht die unterschiedlichen Grid-Systeme verschiedener Frameworks. Außerdem erfahren Sie, wie Sie CSS-Standards browserübergreifend normalisieren.

13:06

In diesem Video nimmt Jonas Hellwig für Sie zwei moderne Frameworks unter die Lupe: Bootstrap und Foundation. Er erläutert Ihnen die Unterschiede und zeigt, wie Sie mit diesen Werkzeugen blitzschnell Prototypen erstellen

15:47

Der kostenlose Editor »Edge Reflow« ist der jüngste Spross der Adobe-Produktfamilie. Jonas Hellwig gibt Ihnen einen Überblick über die Funktionsweise und gestaltet direkt einen einfachen Prototypen.

Section 5: Den Prototypen des Beispiel-Projekts entwickeln
00:17

In diesem Einleitungsvideo gibt Ihnen Jonas Hellwig einen Überblick über die Themen des Kapitels, in dem Sie lernen, den Prototypen des Beispielprojekts zu entwickeln.

11:30

In diesem Video erzeugt Jonas Hellwig das HTML-Grundgerüst des Prototyps. Außerdem bindet er eine Reihe von Skriptdateien in den Seitenkopf ein, um ältere Browser mit modernen Funktionen nachzurüsten.

13:01

Sobald das Grundgerüst Ihrer Webseite steht, befüllen Sie Ihren Prototypen mit den Inhaltselementen. Sie definieren Sinnabschnitte, strukturieren die Navigation und errichten Schritt für Schritt eine Startseite.

04:07

Auf Basis Ihrer Photoshop-Skizzen planen Sie nun das Gestaltungsraster. Damit alle Unterseiten korrekt abgebildet werden können, ermitteln Sie die Anzahl und Breite der benötigten Rasterspalten. Jonas Hellwig zeigt Ihnen, wie es geht.

07:25

In diesem Video erklärt Ihnen Jonas Hellwig, wie Sie ein Raster in CSS umsetzen. Außerdem erfahren Sie, wie Sie das Raster in den Prototypen integrieren, unterschiedliche Layouts erzeugen und Bilder proportional skalieren.

07:29

Um eine Mobilvariante Ihres Layouts zu erzeugen, bedienen Sie sich erneut der bereits bekannten Medienabfragen. Jonas Hellwig zeigt Ihnen, wie Sie das Raster etwas luftiger gestalten, indem Sie zusätzliche Innenabstände für alle Seitenelemente definieren.

05:09

Damit die Website auf großen Monitoren nicht zu breit erscheint, bietet es sich an, zusätzliche Container-Elemente einzufügen. Anschließend werden die Elemente in ihrer maximalen Breite beschränkt und zentriert.

09:14

Nun lockern Sie die Webseite mit zusätzlichen Innenabständen auf. Damit Sie später alle Sinnabschnitte individuell gestalten können, weisen Sie jeder Sektion eine eigene CSS-Klasse zu.

08:09

In diesem Video lernen Sie, wie Sie den Bereich für die Navigation gestalten. Sie formatieren die Textverweise, erzeugen einen Hover-Effekt und lassen das Menü an der richtigen Stelle in die Desktop-Ansicht umbrechen.

11:02

Um das Menü per Klick ein- und ausfahren zu lassen, verwenden Sie den CSS-Selektor »target«. Jonas Hellwig zeigt Ihnen, wie Sie die passenden Schaltflächen erzeugen und Seitenelemente kontrolliert verstecken

03:59

Damit Ihre Webseite später browserübergreifend funktioniert, sollten Sie frühzeitig nach Code-Fehlern suchen und diese sofort beheben. Das World Wide Web Consortium bietet dazu einen speziellen Online-Validator an.

Section 6: Typografie im Webdesign
00:23

In diesem Video fasst Jonas Hellwig die Inhalte des folgenden Kapitels zusammen. Sie lernen, wie Sie Schriftgrößen definieren, Webfonts einbinden und Schrifteffekte mit CSS3 erzielen.

14:12

Webfonts sind eine komfortable Möglichkeit, neue Schriftarten in Ihre Webseite einzubinden. Jonas Hellwig zeigt Ihnen, wie Sie den Web-Dienst »Google Fonts« nutzen, einen Schriftstapel anlegen und Ladeverzögerungen kompensieren.

09:25

Schriftgrößen müssen Sie nicht zwangsläufig in Pixelmaßen angeben. Die relativen Einheiten »em« und »rem« sind deutlich flexibler als absolute Angaben und somit die bessere Wahl für Mobile-First-Websites.

11:26

Mit CSS3 kennt die Gestaltung von Texten und Schriftzügen fast keine Grenzen mehr. Jonas Hellwig zeigt in diesem Video, wie Sie Weichzeichner-, 3D- und Maskeneffekte realisieren.

08:03

Um die Lesbarkeit Ihrer Texte zu gewährleisten, sollten Sie eine Zeilenlänge von 75 Zeichen nicht überschreiten. Wie Sie immer einen optimalen Zeilenumbruch finden, erfahren Sie in diesem Video.

10:25

Icons in Schriftform sind verlustfrei auf beliebige Größen skalierbar. Lernen Sie in diesem Video verschiedene Icon-Dienste kennen und erfahren Sie, wie Sie die Symbole richtig in Ihre Webseite einbinden.

14:46

In diesem Video zeigt Ihnen Jonas Hellwig, wie Sie die Schriften des Beispielprojekts gestalten. Sie wählen eine Schriftart, ermitteln die passende Zeilenlänge und definieren eine geeignete Schriftgröße. Dabei arbeiten Sie wie stets nach dem Prinzip »Mobile First«.

Section 7: Stil und Farbe
00:21

Machen Sie sich in diesem Video mit den Themen des Kapitels vertraut. Jonas Hellwig zeigt Ihnen in den folgenden Videos, wie Sie ein Farbkonzept entwickeln, aufwändige Hintergründe gestalten und Verläufe anlegen.

08:30

Ein gelungenes Farbkonzept ist entscheidend für den Erfolg Ihrer Webseite. In diesem Video erfahren Sie, wie Sie vorhandene Farben aufnehmen, Farbfelder in Photoshop anlegen und eigene Paletten im Browser erzeugen.

11:33

Dieses Video erklärt, wie Sie die Farbgebung Ihrer Webseite planen. Sie vergleichen Stilentwürfe, prüfen Kontraste und stellen die Barrierefreiheit sicher. Anschließend setzen Sie den Stil in Ihrem Prototypen um.

07:03

Erfolgreiche Websites folgen meist bestimmten Gestaltgesetzen. Jonas Hellwig gibt Ihnen einen Überblick über diese etablierten Standards und erklärt, wie Sie gezielt mit Weißraum arbeiten.

07:04

Auch Farbverläufe gehören zum Handwerkszeug eines Webdesigners. In diesem Video lernen Sie, Verläufe mit CSS umzusetzen, mehrere Farbstufen zu kombinieren und radiale Verläufe zu verwenden.

10:05

Dank CSS3 können Sie Farbverläufe auch als Hintergrundelemente einsetzen. Lassen Sie Ihrer Fantasie freien Lauf und gestalten Sie komplexe Seitenhintergründe, die sich von Bilddateien nicht unterscheiden lassen.

07:07

In CSS können Sie einem Element auch mehrere Hintergrundgrafiken zuweisen. Wie Sie auf diese Weise komplexe Bilder montieren können, führt Ihnen Jonas Hellwig in diesem Video vor.

09:30

Große statische Hintergrundbilder können für Mobilgeräte nicht zuletzt aufgrund der Ladezeiten problematisch sein. Erfahren Sie in diesem Video, wie Sie Hintergründe aufteilen, dynamisch positionieren und bildfüllend ausgeben.

Section 8: Layout und Einzelgrafiken
00:21

In diesem Einleitungsvideo erfahren Sie die Inhalte des Kapitels, das unter anderem die nützlichen Funktionen von Photoshop, Illustrator und Reflow für das Webdesign beleuchtet.

06:52

In diesem Video macht Sie Jonas Hellwig mit der CSS-Eigenschaft »box-shadow« vertraut. Am Beispiel einer Schaltfläche lernen Sie, wie ein Schlagschatten grafisch aufgebaut iist und wie Sie ihn mit CSS umsetzen.

12:16

Die Smartobjekte von Adobe Photoshop CC ermöglichen Ihnen effiziente Webdesign-Workflows – besonders in der Layout-Phase. Wie Sie diese Funktion am besten nutzen, erfahren Sie in diesem Video.

14:45

Photoshop und Illustrator bieten Ihnen die Möglichkeit, Grafiken direkt in CSS-Code zu übersetzen. Jonas Hellwig vergleicht die Qualität der erzeugten Code-Blöcke und stellt Ihnen weitere Exportmöglichkeiten vor.

07:35

Die Adobe-Programme Photoshop und Edge Reflow greifen nahtlos ineinander. So können Sie etwa in Photoshop ein Design entwerfen, in Reflow exportieren und daraus direkt eine Webseite generieren.

08:57

Vektorgrafiken sind verlustfrei skalierbar. Im Zusammenhang mit hochauflösenden Bildschirmen lohnt deshalb eine Beschäftigung mit dem SVG-Bildformat. Jonas Hellwig erklärt Ihnen Schritt für Schritt, wie Sie solche Grafiken erstellen.

06:24

Vektorgrafiken lassen sich wahlweise als HTML-Element oder als Hintergrundbild einbetten. Jonas Hellwig zeigt Ihnen in diesem Video eine weitere Option: Sie können den SVG-Code auch direkt in Ihren Quelltext schreiben.

04:31

Um zusätzliche Dateiaufrufe zu vermeiden, können Sie einfarbige SVG-Dateien in Webfont-Icons umwandeln. Jonas Hellwig zeigt, wie Sie den Online-Dienst »Icomoon« für die Umwandlung nutzen.

Section 9: Web-Grafiken ausgeben
00:23

Dieses Kapitel widmet sich dem Bildexport. Jonas Hellwig verrät Ihnen im Einleitungsvideo, was Sie erwartet: Sie betten Bilder in Form von Code ein, erstellen eine Sprite-Datei und erfahren, wie Sie den Photoshop-Generator voll ausnutzen

06:01

Damit Ihre Grafiken im Web nicht nur gut aussehen, sondern auch zügig laden, sollten Sie einige Vorkehrungen treffen. Jonas Hellwig verrät Ihnen die richtigen Einstellungen für Farbraum und Dateiformat.

12:16

Den Photoshop-Generator kennen Sie bereits. In diesem Video erfahren Sie, wie Sie Bildinhalte in Echtzeit aus Photoshop exportieren und so Ihren Workflow noch weiter optimieren. Auch hier arbeitet der Generator selbsttätig im Hintergrund.

03:42

Vektorgrafiken kann der Photoshop-Generator leider noch nicht exportieren – es sei denn, Sie aktivieren die experimentelle Export-Funktion manuell. Jonas Hellwig zeigt Ihnen, wie's geht.

15:18

Wenn Sie die Performance Ihrer Webseite verbessern möchten, sollten Sie immer auch die HTTP-Abfragen im Auge behalten. Die Anzahl dieser Abfragen lässt sich mit so genannten Sprite-Dateien deutlich reduzieren.

02:55

Nicht nur SVG-Code kann direkt ins HTML-Dokument eingetragen werden. Auch andere Dateiformate lassen sich als Textkette ausdrücken. Mit diesem Trick können Sie die Zahl der HTTP-Abfragen noch weiter minimieren.

05:57

Grafiken sind Ihr wichtigster Hebel bei der Performance-Optimierung. Erfahren Sie in diesem Video, wie Sie JPG- und PNG-Dateien mit Drittsoftware noch kleiner komprimieren, ohne die Bildqualität sichtbar zu verschlechtern.

Section 10: Das Design des Beispiel-Projekts
00:09

Sie erfahren in dieser Einleitung, was Sie in diesem Kapitel erwartet. Sie gestalten die Navigation, das Titel-Element und die Teaser-Bereiche. Anschließend erstellen Sie eine Designvorlage und malen eine Serie von Illustrationen in Adobe Photoshop.

11:52

In diesem Video perfektionieren Sie das Navigationsmenü. Dazu formatieren Sie die Schaltflächen, wählen eine geeignete Hover-Farbe und fügen die vorhandenen Slider-Icons ein.

04:27

Das weiße Titel-Element ist beinahe vollständig. Weil es sich um ein wichtiges Seitenelement handelt, verstärken Sie zusätzlich den Schriftkontrast mit einer dunkleren Hintergrundfarbe und rücken den Untertitel aus dem Zentrum

12:34

In diesem Video lernen Sie, wie Sie die Teaser fertigstellen und ansprechende Schaltflächen gestalten. Jonas Hellwig erklärt Ihnen außerdem die Bedeutung von globalen und lokalen CSS-Klassen.

12:30

Fotografisches Material eignet sich bestens, um mehr Leben in Ihre Webseite zu bringen. Sie lernen in diesem Video, wie Sie aus einem Foto und Farbeffekten eine Kopfgrafik für die Website herstellen und diese richtig exportieren.

05:45

Jonas Hellwig zeigt Ihnen in diesem Video, wie Sie mithilfe des Photoshop Generators eine grafische Vorlage einrichten, die Ihnen die Entwurfsphase deutlich erleichtert.

16:07

Nun nehmen Sie den Stift in die Hand und zeichnen Ihre eigenen Illustrationen – Jonas Hellwig führt Sie Schritt für Schritt durch Konzeption und Entwurf. Bei der Farbgestaltung greifen Sie auf die bereits angelegten Farbfelder zurück.

14:37

Nachdem Sie erste Skizzen angefertigt haben, machen Sie sich an die Feinarbeit. Jonas Hellwig zeigt Ihnen, wie Sie die Vorlage übertragen, Konturen zeichnen und Textbausteine nutzen. Dabei können Sie jederzeit zur Kontrolle in die Browser-Ansicht wechseln.

Section 11: Grafiken für hochauflösende Bildschirme optimieren
00:18

Als Webdesigner entwickeln Sie nicht nur für unterschiedliche Geräte, sondern vor allem auch für unterschiedliche Bildschirm-Auflösungen. Jonas Hellwig verrät Ihnen in diesem Kapitel, wie Sie die Herausforderung meistern.

04:40

Jonas Hellwig erklärt Ihnen in diesem Video, weshalb Pixelgrafiken auf Retina-Displays oft verschwommen erscheinen, und fasst für Sie die Vor- und Nachteile von Vektorgrafiken zusammen.

05:12

Damit Ihre Bilder geräteübergreifend sauber aufgelöst werden, sollten Sie Grafiken immer in doppelter Ausführung hinterlegen. Für die Benennung dieser Varianten hat sich bereits eine Konvention etabliert.

04:44

Jonas Hellwig rechnet nach: Nicht die Bildgröße, sondern die Kompression ist oft entscheidend. Wie Sie per Downsampling optimale Ergebnisse erreichen, erfahren Sie in diesem Video.

05:19

Mithilfe von Medienabfragen können Sie die Pixeldichte des Ausgabegeräts ermitteln und unterschiedliche Dateien als Hintergrundbilder anbieten. Jonas Hellwig zeigt Ihnen, wie Sie dafür die CSS-Eigenschaft »background« nutzen

01:46

Optimierte Media Queries sind eine Möglichkeit, um alternative Grafiken für hochauflösende Bildschirme bereitzustellen. Jonas Hellwig präsentiert Ihnen in diesem Video zwei komfortable Alternativen.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Der Rheinwerk Verlag

Wir sind Deutschlands führender Verlag für Computing, Design und Fotografie. Wir machen Bücher, E-Books und Videokurse für Einsteiger und Experten, für Entwickler, Anwender und Liebhaber, für Kreative, Neugierige und Wissensdurstige, für Ehrgeizige, Pragmatiker und Perfektionisten.

Wir machen Verlagsprodukte – wir publizieren nicht bloß. Wir hören zu, was Kunden wünschen. Wir bringen auf den Weg, wir entwerfen und gestalten, wir schaffen und ermöglichen. Wir machen die Verlagsprodukte, die Sie brauchen.

Ready to start learning?
Take This Course