Hugendubel.info - Die B2B Online-Buchhandlung 

Merkliste
Die Merkliste ist leer.
Bitte warten - die Druckansicht der Seite wird vorbereitet.
Der Druckdialog öffnet sich, sobald die Seite vollständig geladen wurde.
Sollte die Druckvorschau unvollständig sein, bitte schliessen und "Erneut drucken" wählen.

Webdesign

E-BookEPUB0 - No protectionE-Book
647 Seiten
Deutsch
Rheinwerk Verlag GmbHerschienen am05.03.20244. Auflage
150 Millisekunden - so viel Zeit haben Sie im Durchschnitt, einen Nutzer davon zu überzeugen, dass sich der Besuch Ihrer Website lohnt. Dieses Buch vermittelt die Designprinzipien, mit denen Sie diese Herausforderung annehmen können!
Es begleitet Sie auf über 694 Seiten bei allen Fragestellungen, die für die Gestaltung einer modernen und attraktiven Website wichtig sind. Sie lernen, worauf es bei Schriftwahl, dem Einsatz von Farben und unterschiedlichen Medien ankommt, gestalten Layouts und Navigationsmenüs und erfahren, was alles bei der Konzeption beachtet werden muss. Dabei erhalten Sie konkrete Hinweise, wie Sie am besten mit Gestaltungsrastern arbeiten, die verschiedenen Website-Elemente aufeinander abstimmen und mit den richtigen Akzenten jeder Website einen individuellen Charakter verleihen.
Martin Hahn zeigt Ihnen zudem, welche technischen Aspekte Sie bei der Gestaltung berücksichtigen müssen und wie Sie ästhetische Ansprüche und Usability unter einen Hut bekommen. Denn nicht alles, was schön aussieht, ist auch machbar im Web. Auch auf Informationsarchitektur, Barrierefreiheit und Responsive Webdesign wird eingegangen. Dass dabei mit HTML5 und CSS3 gearbeitet wird, versteht sich von selbst. Grundkenntnisse in HTML und CSS werden vorausgesetzt.
Ein Buch für alle, die irgendwie immer schon wussten, dass Technik allein nicht alles ist.

Aus dem Inhalt:

Konzeption und Planung
Ideenfindung
Website-Konzeption
Projektmanagement, Briefing
Moodboards, Wireframes, interaktive Prototypen
Prinzipien guter Gestaltung
Design-Prinzipien
Farbenlehre & Farbwirkung
Farbe im Web, Retina-Displays
Proportionen, Weißraum
Typografie und Webfonts
Grafiken, Bilder, Icons
Webdesign-Stile, Webtrends
Layout und Raster
Informationsarchitektur
CSS-Layout und Rastersysteme
Positionierung und Gewichtung
Goldener Schnitt, Above the Fold
Navigation und Interaktion
Haupt-, Sub-, Metanavigationen
Header, Footer, Buttons, Links
Mobile Navigation, Off-Canvas
Usability, User Experience, Barrierefreiheit
Die Technik im Griff
Responsive Webdesign
Webstandards und Best Practices
HTML5 und CSS3
Frameworks, CMSmehr
Verfügbare Formate
BuchGebunden
EUR49,90
E-BookEPUB0 - No protectionE-Book
EUR49,90

Produkt

Klappentext150 Millisekunden - so viel Zeit haben Sie im Durchschnitt, einen Nutzer davon zu überzeugen, dass sich der Besuch Ihrer Website lohnt. Dieses Buch vermittelt die Designprinzipien, mit denen Sie diese Herausforderung annehmen können!
Es begleitet Sie auf über 694 Seiten bei allen Fragestellungen, die für die Gestaltung einer modernen und attraktiven Website wichtig sind. Sie lernen, worauf es bei Schriftwahl, dem Einsatz von Farben und unterschiedlichen Medien ankommt, gestalten Layouts und Navigationsmenüs und erfahren, was alles bei der Konzeption beachtet werden muss. Dabei erhalten Sie konkrete Hinweise, wie Sie am besten mit Gestaltungsrastern arbeiten, die verschiedenen Website-Elemente aufeinander abstimmen und mit den richtigen Akzenten jeder Website einen individuellen Charakter verleihen.
Martin Hahn zeigt Ihnen zudem, welche technischen Aspekte Sie bei der Gestaltung berücksichtigen müssen und wie Sie ästhetische Ansprüche und Usability unter einen Hut bekommen. Denn nicht alles, was schön aussieht, ist auch machbar im Web. Auch auf Informationsarchitektur, Barrierefreiheit und Responsive Webdesign wird eingegangen. Dass dabei mit HTML5 und CSS3 gearbeitet wird, versteht sich von selbst. Grundkenntnisse in HTML und CSS werden vorausgesetzt.
Ein Buch für alle, die irgendwie immer schon wussten, dass Technik allein nicht alles ist.

Aus dem Inhalt:

Konzeption und Planung
Ideenfindung
Website-Konzeption
Projektmanagement, Briefing
Moodboards, Wireframes, interaktive Prototypen
Prinzipien guter Gestaltung
Design-Prinzipien
Farbenlehre & Farbwirkung
Farbe im Web, Retina-Displays
Proportionen, Weißraum
Typografie und Webfonts
Grafiken, Bilder, Icons
Webdesign-Stile, Webtrends
Layout und Raster
Informationsarchitektur
CSS-Layout und Rastersysteme
Positionierung und Gewichtung
Goldener Schnitt, Above the Fold
Navigation und Interaktion
Haupt-, Sub-, Metanavigationen
Header, Footer, Buttons, Links
Mobile Navigation, Off-Canvas
Usability, User Experience, Barrierefreiheit
Die Technik im Griff
Responsive Webdesign
Webstandards und Best Practices
HTML5 und CSS3
Frameworks, CMS
Details
Weitere ISBN/GTIN9783367100323
ProduktartE-Book
EinbandartE-Book
FormatEPUB
Format Hinweis0 - No protection
Erscheinungsjahr2024
Erscheinungsdatum05.03.2024
Auflage4. Auflage
ReiheRheinwerk Design
Seiten647 Seiten
SpracheDeutsch
Dateigrösse76065 Kbytes
Artikel-Nr.12822093
Rubriken
Genre9200

Inhalt/Kritik

Inhaltsverzeichnis
Vorwort ... 19
1. Der Status quo im Webdesign ... 23

1.1 ... Die Entwicklung des Webdesigns ... 23
1.2 ... Aspekte modernen Webdesigns ... 27
1.3 ... Modernes Webdesign ist flexibel ... 36
1.4 ... Das Webdesign und sein Umfeld ... 41
1.5 ... Webdesign ist Coden, und Code ist Design ... 44
1.6 ... Der Kontext zählt ... 46

2. Webdesign-Projektmanagement ... 49

2.1 ... Das Projekt ... 49
2.2 ... Projektphasen ... 55
2.3 ... Projektkommunikation -- wie sag ich es dem Kunden? ... 65
2.4 ... Erfolg oder Misserfolg ... 70

3. Konzeption und Strategie ... 73

3.1 ... Briefing und Recherche ... 73
3.2 ... Die Analysephase ... 77
3.3 ... Eine Strategie fürs Webprojekt entwickeln ... 81
3.4 ... Ziele der Website ... 86
3.5 ... Zielgruppenanalyse ... 90
3.6 ... Anforderungen an das Design ... 97
3.7 ... Anforderungen an die Inhalte ... 100
3.8 ... Anforderungen an Technik und Funktionalitäten ... 103
3.9 ... Fazit zur Konzeption ... 106

4. Responsive Webdesign ... 107

4.1 ... Einleitung -- und sie bewegen sich doch ... 107
4.2 ... Responsive Strategie -- Mobile first und Content first ... 111
4.3 ... Ein neuer Workflow ... 115
4.4 ... Die Arbeit mit Wireframes ... 119
4.5 ... Das Design -- der Gestaltungsprozess ... 124
4.6 ... Die Umsetzung ... 135
4.7 ... Bestandteile einer responsiven Website ... 150

5. Informationsarchitektur ... 163

5.1 ... Einführung ... 163
5.2 ... Aufgaben einer gelungenen Navigation ... 170
5.3 ... Content-Strategie ... 172
5.4 ... Inhaltsstruktur entwickeln ... 179
5.5 ... Durch Inhalte navigieren ... 187
5.6 ... Fazit ... 195

6. Screendesign und User Interface Design ... 197

6.1 ... Die Aufgaben eines Screendesigns ... 197
6.2 ... Webdesign und die Wahrnehmung ... 203
6.3 ... User-Interface-Gestaltung ... 218
6.4 ... Die Prinzipien guter Webgestaltung ... 227

7. Usability und User Experience ... 239

7.1 ... Alles beginnt mit Usability ... 239
7.2 ... User Experience ... 247

8. Layout und Raster ... 255

8.1 ... Anatomie einer Website ... 255
8.2 ... Layouts gestalten ... 264
8.3 ... Scrollen ... 278
8.4 ... Raster ... 283
8.5 ... Ein eigenes Raster anlegen ... 294

9. Farbe im Webdesign ... 317

9.1 ... Welche Rolle spielt die Farbe? ... 317
9.2 ... Farbe: eine Wissenschaft für sich ... 319
9.3 ... Farbsysteme ... 321
9.4 ... Farbmanagement für das Web ... 336
9.5 ... Farbwirkung ... 337
9.6 ... Farbkontraste ... 364
9.7 ... Gelungener Farbeinsatz im Webdesign ... 372
9.8 ... Farbe und Usability ... 379
9.9 ... Ein eigenes Farbschema entwickeln ... 381
9.10 ... Fazit ... 387

10. Typografie im Web ... 389

10.1 ... Grundlagen ... 389
10.2 ... Leseverhalten im Web ... 392
10.3 ... Schriftarten ... 395
10.4 ... Schriftdarstellung im Web ... 403
10.5 ... Makrotypografie ... 414
10.6 ... Mikrotypografie ... 436
10.7 ... Gelungene Webtypografie -- Textformatierungen und Gestaltungstipps ... 443
10.8 ... Typografische Auszeichnungen und Inspirationen ... 459

11. Bilder und Grafiken ... 465

11.1 ... Einführung: Die Macht der Bilder ... 465
11.2 ... Bildquellen ... 473
11.3 ... Motive und Bildstimmung ... 484
11.4 ... Bildgestaltung ... 493
11.5 ... Icons ... 501
11.6 ... Illustrationen ... 505
11.7 ... Dateiformate ... 507
11.8 ... Bilder in HTML und CSS ... 511
11.9 ... Fazit ... 521

12. Navigations- und Interaktionsdesign ... 523

12.1 ... Die Hauptnavigation ... 523
12.2 ... Die Subnavigation ... 541
12.3 ... Die Metanavigation ... 542
12.4 ... Die Footer-Navigation ... 543
12.5 ... Navigation auf mobilen Endgeräten -- responsive Navigation ... 545
12.6 ... Links, Buttons und die Suche ... 558
12.7 ... Formulare ... 571

13. Animationen ... 579

13.1 ... Animationen mit CSS ... 579
13.2 ... Animationen und Interaktivität mit JavaScript ... 586
13.3 ... Interaktive Elemente ... 587
13.4 ... Audiovisuelle Elemente ... 597
13.5 ... Fazit ... 600

14. Websitetypen und -stile ... 601

14.1 ... Websitetypen ... 601
14.2 ... Webdesign-Stile und -Trends ... 626

Index ... 637mehr
Leseprobe


1.2    Aspekte modernen Webdesigns

Modernes Webdesign ist gar nicht so einfach zu definieren. Viele Aspekte spielen eine Rolle, die je nach Projekt oder eigenen Vorstellungen und Abläufen auch unterschiedlich gewichtet sein können.
1.2.1    Gute Seiten, schlechte Seiten

Es gibt da draußen in den Weiten des World Wide Web jede Menge Websites - gute Websites und schlechte Websites. Die Einteilung fällt vermutlich oft auf den ersten Blick, kann sich aber von Betrachter zu Betrachter unterscheiden.

Wonach trifft man aber eine fundierte Entscheidung, ob eine Website gut oder schlecht (oder irgendwas dazwischen) ist? Gibt es Qualitätsmerkmale, nach denen man eine Website beurteilen kann? Jeder mag die Qualitätsfrage anders beantworten. Für einen Onlineshop-Betreiber ist seine Seite gut, wenn er genügend darüber verkauft. Für den Webdesigner ist sein Portfolio gut, wenn es ihm neue Anfragen/Kunden verschafft. Dabei behilflich ist ein professionelles Design, das den »Wert« der Seite, der angebotenen Produkte oder Leistungen (re)präsentiert. Um zu einem professionellen Design zu kommen, gibt es beispielsweise einige grundlegende Gestaltungsaspekte zu beachten (siehe Kapitel 6) oder auch die Aufgaben und Elemente eines Screendesigns.

Unabhängig von den individuellen Zielen lassen sich einige allgemeingültige Kriterien festlegen, was eine gute Website ausmacht - Kriterien, an denen sich sowohl der Webdesigner als auch der Websitebetreiber/Kunde orientieren kann. Gute Websites ...

Kriterien für eine gute Website
Im Laufe des Buches werden viele Aspekte der einzelnen Kriterien näher erläutert, mit praktischen Tipps versehen und hilfreiche Tools vorgestellt. Ab und an überschneiden sich die Punkte dabei. Denn so sorgt beispielsweise Text, der gut lesbar ist, häufig auch für eine gute Übersichtlichkeit der Inhalte.


... haben validen und semantischen Code.


... haben lesbaren Text.


... sind schnell geladen.


... sind suchmaschinenoptimiert.


... sind ästhetisch ansprechend.


... sind auf unterschiedlichen Bildschirmauflösungen und Endgeräten gut bedienbar.


... setzen Technik nicht als Selbstzweck ein, sondern um die Funktionalität und die Bedienung zu erleichtern.


... haben einen Wiedererkennungswert.


... sind einfach zu bedienen.


Die Kriterien klingen alle selbstverständlich? Sind sie aber nicht! Das fängt schon damit an, dass einige Kriterien nicht zwangsläufig eindeutig sind. Wo beginnt Übersichtlichkeit genau, und ab wann ist eine Seite nicht mehr lesbar? Im folgenden Abschnitt werden die einzelnen Kriterien noch näher beleuchtet. Nicht alle müssen zwangsläufig bei jedem Projekt voll erfüllt sein, dies hängt auch von den zu Projektbeginn definierten Bedingungen ab (siehe Kapitel 3). Es mag Projekte geben, da spielt beispielsweise die Suchmaschinenoptimierung keine so große Rolle.

Um die Kriterien weitgehend zu erfüllen, sind viele Aspekte zu beachten. Als Oberbegriffe lassen sich vier Punkte herausstellen, die dafür sorgen, dass eine Website gut, also erfolgreich ist.


Abbildung 1.6     Die Basis ist ein Konzept. Zusammen mit den drei Säulen Inhalte, Design und Technik schafft es die Voraussetzung für eine gute Website.


Eine erfolgreiche Website beruht auf den drei Säulen Inhalte, Design und Technik. Hinzu kommt dann noch die Basis, das Konzept.

Die Inhalte sind der Grund, warum Anwender auf die Website kommen. Sie sollten also sowohl das Unternehmen, die Produkte oder Dienstleistungen präsentieren als auch den Erwartungen des Anwenders entsprechen.


Das Design präsentiert die Inhalte visuell, sorgt für Übersicht und entfaltet eine emotionale Wirkung.


Die technische Umsetzung sorgt dafür, dass die Website von möglichst allen Anwendern auf möglichst allen Endgeräten (technisch) gut bedienbar ist.


Und das Konzept (siehe Kapitel 3) sorgt dafür, dass überhaupt klar ist, wer mit dem Projekt erreicht werden soll. Es ist die Basis für die Umsetzung der Punkte Inhalte, Design und Technik.

1.2.2    Mehr als hübsch - das Design

Websites sind zuallererst ein optisches Medium. Das, was der Kunde sieht, ist das Design. Design ist hier aber nicht als rein ästhetische Verschönerung zu verstehen, sondern als Lösung eines Problems. Der Leitsatz »Form follows function« trifft es sehr gut. Das Screendesign richtet sich nach dem Zweck, nach den Inhalten, den Anwendern und den gewünschten Botschaften, die vermittelt werden sollen.

Weiterlesen
Zu den Inhalten siehe Abschnitt 3.7, »Anforderungen an die Inhalte«, mehr zu den Anwendern unter Abschnitt 3.5, »Zielgruppenanalyse«, und zu den Botschaften in Abschnitt 3.4, »Ziele der Website«.


Das Design soll dabei ästhetisch ansprechend sein, aber eben auch eine bestimmte Wirkung erzeugen und vor allem auch die Website bedienbar machen und den Anwender durch die Website führen. Das Design gibt den Elementen eine optische Bedeutung. Ein besonders wichtiger Button wird erst durch die visuelle Kennzeichnung dazu. Während HTML den Elementen eine inhaltliche Bedeutung zuweist, gibt das Design (CSS) ihnen die visuelle Bedeutung, die ihnen zusteht.

Design ist mehr, als alles ein »bisschen hübsch« zu machen. Design bedeutet, Informationen zu strukturieren und zu gestalten. Design heißt, den Anwender durch die Seite zu führen. Design gibt Orientierung. Design macht Bedeutungen sichtbar. Wenn das nicht gelingt, handelt es sich eben doch nur um Dekoration.

Ein Design-Buch
Der Schwerpunkt des Buches liegt eindeutig auf den Designaspekten bei der Umsetzung einer Website. Diese sind aber nie isoliert zu betrachten, sondern immer im Zusammenspiel mit Konzeption, Inhalten und Technik. Daher werden auch diese Aspekte immer wieder vorkommen.


Diese vielfältigen Aufgaben und Aspekte, die ein Design zu erfüllen hat, werden in diesem Buch umfangreich behandelt. Das reicht vom Aufbau eines Rasters (Kapitel 8) bis zur Gestaltung von Icons (Kapitel 11), von der Gestaltung und Platzierung der verschiedenen Navigationsarten (siehe Kapitel 12) bis zur Wahl der Schriftart (Kapitel 10), vom gelungenen Einsatz von Animationseffekten (siehe Kapitel 13) bis zur Auswahl passender Bildmotive (siehe Kapitel 11). Die Aufzählung ließe sich noch lange fortführen. Die Bedeutung eines professionellen Designs ist für eine erfolgreiche Website kaum zu unterschätzen. Daher versteht sich dieses Buch auch als Webdesign-Buch.


Abbildung 1.7     Dark Mode nennt sich der »Designtrend«, Websites vollständig auf dunklen Hintergründen aufzubauen, wie hier bei joincobalt.com.

1.2.3    Übersichtlich und...

mehr