Pixeltuner.de
Kuratierte Linksammlung für Webdesigner und -entwickler.
Material Design Karten

Material Design Karten mit HTML und CSS erstellen

Webdesign 30. Juli 2018Von Jonathan TorkeHinterlasse einen Kommentar

Material Design wurde 2014 von Google entwickelt. Seitdem findet es in vielen Google-Produkten, wie Gmail, Docs, Play und Androit-Apps Anwendung. Material Design wird immer beliebter und wird immer häufiger auch für moderne Web-Anwendungen eingesetzt. Tatsächlich ist das Material Design schon längst zu einem verbreiteten Standard geworden.

Nachdem Google seinen Online-Produkten in diesen Tagen nun ein neues Design verpasst, steht dabei auch das Material Design 2 in den Mittelpunkt. Google bietet umfangreiches Material zu den Grundlagen und macht es Webdesignern und Entwicklern so leicht wie möglich, diese Designsprache zu adaptieren. Mit der Einführung des Material Design 2 soll sich grundlegendes ändern.

Anzeige

Material Design als universelle Designsprache soll Designern in der überarbeiteten Version nun noch mehr Freiraum geben, um individuelle und System bzw. Browserkompatible Anwendungen zu kreieren. Und mit „mehr“ meine ich „unendlich“ in Anbetracht diverser Kombinationsmöglichkeiten, wie z.B. durch den Einsatz von Typographie, Farben, Schattierungen, Kontrastverhältnisse und Formen.

Mit dieser Anleitung möchte ich dir zeigen, wie du das bekannteste Material Design Element erstellen kannst – Die Karte. Mittels lesbarem HTML und eindeutigem CSS wird das Zusammensetzen einer Karte zum Kinderspiel. Lass uns loslegen.

1. Schritt-für-Schritt-Anleitung zum Erstellen von MD-Karten

Demo

See the Pen Material Design Components: Cards by Jonathan Torke (@JonathanTorke) on CodePen.


Der Card-Container ist das einzige erforderliche Element in einer Karte. Alle anderen hier gezeigten Elemente sind optional. Kartenlayouts können variieren, sodass unterschiedliche Inhalte auf ansprechende und zielführende Weise als Karte dargestellt werden.

Karten sind Oberflächen, die Inhalte und Aktionen zu einem einzelnen Thema darstellen. Sie sollten einfach nach relevanten und umsetzbaren Informationen zu scannen sein. Elemente wie Text und Bilder sollten so platziert werden, dass sie eindeutig auf die Hierarchie verweisen. In den bekanntesten Fällen ist die Karte ein Teaser für einen Blogpost.

1.1 Aufbau

Eine Standard-Karte umfasst das umschließende Eltern-Element .card, innerhalb dessen sich weitere Kinder-Elemente bzw. Inhaltsblöcke variabel und unterschiedlich darstellen lassen. Alle Blöcke als Ganzes beziehen sich auf ein einzelnes Subjekt oder Ziel. Je nach Hierarchieebene kann der Inhalt unterschiedliche Schwerpunkte erhalten.

1.2 Kartenlayout-Elemente

Der Aufbau für die Layout-Elemente einer Karte gestaltet sich sehr einfach: ich zeichne die Div-Boxen bzw. Inhaltsblöcke mit den Klassennamen aus, die durch den Material Design Styleguide für die Karten-Elemente beschrieben werden.

Der Aufbau von Material Design Card Elementen besteht aus der Karte selbst, einen optionalen Header, einen Medienblock, den primären titel, Begleittext und Action-Elemente, wie Buttons und anklickbare Icons

Kartenlayout-Elemente:
- Card
- - Optional header
- - Media
- - Primary title
- - Supporting text
- - Actions

HTML:

<div class="card">
  <div class="optional-header"></div>
  <div class="media"></div>
  <div class="primary-title"></div>
  <div class="supporting-text"></div>
  <div class="actions"></div>
</div>

Der umschliessende Kartencontainer div.card ist das einzige erforderliche Element in einer Karte. Alle anderen Elemente sind optional. Die Größe der Karte wird durch die Flächen bestimmt, den diese Elemente einnehmen.

Jedes Layout-Element beinhaltet weitere Elemente, die zur eindeutigen Darstellung unterschiedlicher Schwerpunkte sehr nützlich sind.

Der Aufbau von Material Design umfasst Child-Elemente, wie z.B. das Vorschaubild (1), Header-Text (2), Zwischenüberschrift (3), Medien (4), Begleittext (5), Buttons (6), Icons (7).

  1. Vorschaubild [optional]
    Karten können Miniaturansichten enthalten, um einen Avatar, ein Logo oder ein Symbol anzuzeigen.
  2. Header-Text [optional]
    Header-Text kann Dinge wie den Namen eines Fotoalbums oder Artikels enthalten.
  3. Zwischenüberschrift [optional]
    Subhead-Text kann Textelemente wie eine Artikel-Byline oder einen markierten Ort enthalten.
  4. Medien [optional]
    Karten können eine Vielzahl von Medien enthalten, einschließlich Fotos und Grafiken, z. B. Wettersymbole.
  5. Begleittext [optional]
    Unterstützender Text enthält Text wie eine Artikelzusammenfassung oder eine Restaurantbeschreibung.
  6. Buttons [optional]
    Karten können Schaltflächen für Aktionen enthalten.
  7. Icons [optional]
    Karten können Symbole für Aktionen enthalten.

Die Anordnung zusammengehöriger Elemente können frei bestimmt werden.

Um nun konkreter zu werden, zeige ich Dir jetzt den Standardaufbau einer Karte. Angefangen mit dem Element div.card.

2. Kartenelemente

2.1 Card

HTML:

<div class="card">...</div>

Und hier kommt das CSS für das Karten-Element:

.card {
	background-color: #fff;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	-moz-box-shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
	-webkit-box-shadow:  0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
	box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);
	color: rgba(0,0,0,.87);
	margin: 8px;
	overflow: hidden;
	position: relative;
}
.card::after {
	clear: both;
}
.card::after, .card::before {
	content: "";
	display: block;
}

Das war es - hiermit sind alle Pflichtelemente für die Karte umgesetzt.

Es folgen nun noch die optionalen Elemente. Es sind die Elemente, die die Karte erst einzigartig machen und der Karte einen Sinn verleihen. Lass uns jetzt zusammen den optionalen Header definieren.

2.2 Optional Header

Das Layout-Element für den optionalen Header beinhaltet das Thumbnail (1) und den Primary Title mit dem Title/Primary Text (2), und dem Subhead/Secondary Text (3).

HTML:

<div class="card">
  <div class="optional-header">...</div>
</div>

CSS:

.optional-header {
	min-height: 40px;
	padding: 16px;
	position: relative;
}

2.2.1 Thumbnail (1)

Das Thumbnail-div beinhaltet je nach Umsetzungslogig ein img-Element. Weist das Thumbnail-Bild einen eindeutigen Bezug zum Karteninhalt auf und stellt damit einen möglicherweise gewünschten Faktor für Suchmaschinenoptimierung dar, sollte das Bild über das HTML-Element img geladen werden.

HTML:

<div class="card">
  <div class="optional-header">
    <div class="thumbnail"> <img src="https://path/to/the/picture.png"> </div>
  </div>
</div>

CSS:

.thumbnail {
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	float: left;
	height: 40px;
	position: relative;
	width: 40px;
}
.thumbnail img {
	background-color: #fff;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	-moz-transform: translate(0, -50%);
	-ms-transform: translate(0, -50%);
	-o-transform: translate(0, -50%);
	-webkit-transform: translate(0, -50%);
	transform: translate(0, -50%);
}
.thumbnail--24x24 img {
	height: 24px;
	width: 24px;
}
.thumbnail--28x28 {
	margin-right: 4px;
}
.thumbnail--28x28 img {
	height: 28px;
	width: 28px;
}
.thumbnail--32x32 {
	margin-right: 8px;
}
.thumbnail--32x32 img {
	height: 32px;
	width: 32px;
}
.thumbnail--36x36 {
	margin-right: 12px;
}
.thumbnail--36x36 img {
	height: 36px;
	width: 36px;
}
.thumbnail--40x40 {
	margin-right: 16px;
}
.thumbnail--40x40 img {
	height: 40px;
	width: 40px;
}

2.2.2 Primary Title:

Title/Primary text (2), and the Subhead/Secondary text (3)

Das Element für den primären Titel div.primary-title beinhaltet ein Element für den Titel div.title und ein Weiteres für den Untertitel div.subhead.

<div class="card">
  <div class="optional-header">
    <div class="thumbnail"> <img src="https://path/to/the/picture.png"> </div>
    <div class="primary-title">
      <div class="title">Title</div>
      <div class="subhead">Subhead</div>
    </div>
  </div>
</div>

CSS:

.optional-header {
	min-height: 40px;
	padding: 16px;
	position: relative;
}
.optional-header .action-icons {
	float: right;
	position: relative;
	right: -8px;
	top: 2px;

}
.optional-header .primary-title {
	bottom: auto;
	display: inline-block;
	padding: 0;
	position: absolute;
	top: 50%;
	-moz-transform: translate(0, -50%);
	-ms-transform: translate(0, -50%);
	-o-transform: translate(0, -50%);
	-webkit-transform: translate(0, -50%);
	transform: translate(0, -50%);
}
.optional-header + .primary-text {
	margin-top: 12px;
}
.optional-header + .supporting-text {
	padding-top: 0;
}

.subhead, .secondary-text {
	color: rgba(0,0,0,.54);
	font-size: 14px;
}

.title {
	font-size: 14px;
	font-weight: 500;
}
.title + .subhead {
	margin-top: 7px;
}
.title {
	line-height: 1.2;
}

2.3 Media

Das Media-Element div.media (1) erhält ein img-Element, worüber das Bild geladen werden soll.

HTML:

<div class="card">
  <div class="optional-header">
    <div class="thumbnail"> <img src="https://path/to/the/picture.png"> </div>
    <div class="primary-title">
      <div class="title">Title</div>
      <div class="subhead">Subhead</div>
    </div>
  </div>
  <div class="media"> <img src="https://path/to/the/picture.png"> </div>
</div>

Der Media-Block div.media kann durch verschiedene Seitenverhältnisse dargestellt werden. Im Styleguide werden die Formate 16:9, 3:2, 4:3, 1:1, 3:4, 2:3 empfohlen.

Bei unserem Beipiel soll das Bild im 16:9-Format dargestellt werden. Dazu füge ich die Klasse media--16-9 dem Media-Element hinzu.

HTML:

<div class="card">
  <div class="optional-header">
    <div class="thumbnail"> <img src="https://path/to/the/picture.png"> </div>
    <div class="primary-title">
      <div class="title">Title</div>
      <div class="subhead">Subhead</div>
    </div>
  </div>
  <div class="media media--16-9"> <img src="https://path/to/the/picture.png"> </div>
</div>

CSS:

.media {
	position: relative;
}
.media .action-icon {
	color: #fff;
	text-shadow: 0 2px 2px rgba(0,0,0,0.54);
}
.media .actions {
	background-image: linear-gradient(rgba(0,0,0,.38), rgba(0,0,0,0));
	color: #fff;
	position: absolute;
	width: 100%;
}
.media .optional-header {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	color: #fff;
	display: block;
	float: left;
	width: 100%;
	z-index: 100;
}
.media .optional-header .primary-title {
	background-image: none;
	width: auto;
}
.media .primary-title {
	background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.46));
	bottom: 0;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	padding: 16px 16px 24px;
	position: absolute;
	width: 100%;
	z-index: 1;
}
[class*='media--'] {
	height: 0;
	overflow: hidden;
}
.media--1-1 {
	padding-bottom: 100%;
}
.media--16-9 {
	padding-bottom: 56.25%;
}
.media--16-9 > img, .media--3-2 > img, .media--4-3 > img {
	height: auto;
	left: 50%;
	top: 50%;
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 100%;
}
.media--16-9 img, .media--3-2 img, .media--4-3 img, .media--80x80 img, .media--1-1 img, .media--3-4 img, .media--2-3 img {
	position: absolute;
}
.media--2-3 {
	padding-bottom: 150%;
}
.media--3-2 {
	padding-bottom: 66.66%;
}
.media--3-4 {
	padding-bottom: 133.33%;
}
.media--4-3 {
	padding-bottom: 75%;
}
.media--80x80 {
	margin: 16px;
	padding-bottom: 80px;
	width: 80px;
}
.media--80x80 > img, .media--1-1 > img, .media--3-4 > img, .media--2-3 > img {
	height: 100%;
	left: 50%;
	-moz-transform: translate(-50%, 0);
	-ms-transform: translate(-50%, 0);
	-o-transform: translate(-50%, 0);
	-webkit-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
	width: auto;
}

2.4 Supporting Text

Das div.supporting-text-Element (1) soll unterstützende Inhalte anzeigen, wie eine Artikelzusammenfassung, Hotel- oder eine Restaurantbeschreibung.

HTML:

<div class="card">
  <div class="optional-header">
    <div class="thumbnail"> <img src="https://path/to/the/picture.png"> </div>
    <div class="primary-title">
      <div class="title">Title</div>
      <div class="subhead">Subhead</div>
    </div>
  </div>
  <div class="media media--16-9"> <img src="https://path/to/the/picture.png"> </div>
</div>
<div class="supporting-text">Supporting text.</div>
</div>

CSS:

.primary-title + .supporting-text, .optional-header + .supporting-text {
	padding-top: 0;
}

.supporting-text {
	font-size: 14px;
	line-height: 1.5;
	padding: 16px;
}

2.5 Actions

Der Actions-Block div.actions dient zur konkreten Handlungsaufforderung durch Action Buttons (1) und Action Icons (2).

HTML:

<div class="card">
  <div class="optional-header">
    <div class="thumbnail"> <img src="https://path/to/the/picture.png"> </div>
    <div class="primary-title">
      <div class="title">Title</div>
      <div class="subhead">Subhead</div>
    </div>
  </div>
  <div class="media media--16-9"> <img src="https://path/to/the/picture.png"> </div>
  <div class="supporting-text">Supporting text.</div>
  <div class="actions"></div>
</div>

2.5.1 Action Buttons

Innerhalb des Actions-Blocks können Action Buttons (1) enthalten sein.

HTML:

<div class="card">
  <div class="optional-header">
    <div class="thumbnail"> <img src="https://path/to/the/picture.png"> </div>
    <div class="primary-title">
      <div class="title">Title</div>
      <div class="subhead">Subhead</div>
    </div>
  </div>
  <div class="media media--16-9"> <img src="https://path/to/the/picture.png"> </div>
  <div class="supporting-text">Supporting text.</div>
  <div class="actions">
    <div class="action-buttons">
      <button class="button" type="button">Action 1</button>
      <button class="button" type="button">Action 2</button>
    </div>
  </div>
</div>
2.5.2 Action Icon

Action Icons (2) finden hier ebenfalls Anwendung.

HTML:

<div class="card">
  <div class="optional-header">
    <div class="thumbnail"> <img src="https://path/to/the/picture.png"> </div>
    <div class="primary-title">
      <div class="title">Title</div>
      <div class="subhead">Subhead</div>
    </div>
  </div>
  <div class="media media--16-9"> <img src="https://path/to/the/picture.png"> </div>
  <div class="supporting-text">Supporting text.</div>
  <div class="actions">
    <div class="action-buttons">
      <button class="button" type="button">Action 1</button>
      <button class="button" type="button">Action 2</button>
    </div>
    <div class="action-icons float-right"> <i class="material-icons action-icon" role="button" title="Share">share</i> <i class="material-icons action-icon" role="button" title="More options">more_vert</i> </div>
  </div>
</div>

CSS:

.action-buttons, .action-icons {
	display: inline-block;
}
.action-icon {
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	box-sizing: border-box;
	cursor: pointer;
	margin: 0 2px;
	outline: none;
	padding: 6px;
}
.action-icons {
	color: rgba(0,0,0,0.54);
}
.actions {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	min-height: 52px;
	padding: 8px;
	position: relative;
	z-index: 1;
}
.button {
	background-color: transparent;
	border: none;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px;
	color: inherit;
	cursor: pointer;
	display: inline-block;
	font-family: Roboto, sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 36px;
	min-width: 88px;
	padding: 0 8px;
	text-align: center;
	text-transform: uppercase;
}
.button, .action-icon {
	-webkit-transition: box-shadow .4s cubic-bezier(.25, .8, .25, 1), background-color .4s cubic-bezier(.25, .8, .25, 1);
	transition: box-shadow .4s cubic-bezier(.25, .8, .25, 1), background-color .4s cubic-bezier(.25, .8, .25, 1);
}
.button--raised {
	-moz-box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
	-webkit-box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
	box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
	-o-transition: box-shadow .28s cubic-bezier(.4, 0, .2, 1);
	-webkit-transition: 0 .28s cubic-bezier(.4, 0, .2, 1);
	transition: box-shadow .28s cubic-bezier(.4, 0, .2, 1), 0 .28s cubic-bezier(.4, 0, .2, 1);
}
.button--raised:focus, .button--raised:hover {
	-moz-box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
	-webkit-box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
	box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
}
.button:active, .action-icon:active {
	background-color: rgba(158,158,158,0.4);
}
.button:focus:not(:active), .action-icon:focus:not(:active) {
	background-color: rgba(0,0,0,.12);
}
.button:hover, .action-icon:hover {
	background-color: rgba(158,158,158,0.2);
}
.button[disabled] {
	color: rgba(0,0,0,.26);
	cursor: default;
}
.button[disabled]:hover {
	background: none;
}

Das HTML ist überschaubar und lesbar. Das Standard CSS für speziell diese Beispiele ist mit 400 Zeilen - wenn ich mir Abhängigkeiten, Browser- und Systemkompatibität und Flexibilität der Elemente vor die Augen halte - gar nicht so lang. Reines Standard-CSS. Mag ich. Empfehle ich, wenn möglich.

3. Weitere Beispiele

Zum Schluss zeige ich dir noch drei unterschiedliche Beispiele für den Einsatz der Karten. Du wirst sehen, wie flexibel Karten in ihrer Darstellung in Bezug ihres Kontextes stehen können.

3.1 Post

Material Design Karte für Blog-Teaser (1) und Beitrag mit Kommentarfunktion (2)

3.1.1 Feed (1)

Falls du Androit-Anwender bist, wird dir diese Karten-Darstellung bekannt vorkommen. Sie eignet sich hervorragend für Feed-Inhalte oder für News-Hauptseiten. Der Vorteil: auf kleiner Karten-Fläche werden wichtigste Inhalte übersichtlich angeteasert.

HTML:

<div class="card">
  <div class="media media--80x80 float-right"> <img src="https://cdn.pixabay.com/photo/2016/02/13/12/27/aurora-1197755_1280.jpg" alt="Kategorie Design bei pixeltuner.de" width="640" height="426"> </div>
  <div class="primary-title">
    <div class="primary-text">Hundreds of New Planets Found</div>
    <div class="secondary-text">Astronomy</div>
  </div>
  <div class="supporting-text"> Supporting text include text like an article summary or a restaurant description.</div>
  <div class="actions">
    <div class="action-buttons">
      <button class="button" type="button">Read More</button>
    </div>
    <div class="action-icons float-right"> <i class="material-icons action-icon" role="button" title="Share">share</i> <i class="material-icons action-icon" role="button" title="More options">more_vert</i> </div>
  </div>
</div>

3.1.2 Post mit Kommentarfeld (2)

Diese Karte soll die Detailansicht der vorigen Teaser/Feed-Karte demonstrieren. Wir erkennen hier Ähnlichkeiten der Kartendarstellung, die wir von Google Plus kennen; sie lässt sich natürlich auch für Desktop-Anwendungen einsetzen.

HTML:

<div class="card">
  <div class="media media--16-9">
    <div class="actions">
      <div class="action-icons float-right"> <i class="material-icons action-icon" role="button" title="Bookmark">bookmark_border</i> <i class="material-icons action-icon" role="button" title="Share">share</i> </div>
    </div>
    <div class="primary-title">
      <div class="secondary-text">Astronomy</div>
      <div class="primary-text">Hundreds of New Planets Found</div>
    </div>
    <img src="https://cdn.pixabay.com/photo/2016/02/13/12/27/aurora-1197755_1280.jpg" alt="Kategorie Design bei pixeltuner.de" width="640" height="426"> </div>
  <div class="optional-header">
    <div class="thumbnail thumbnail--40x40"><img src="https://randomuser.me/api/portraits/men/99.jpg" alt="" width="40" height="40"></div>
    <div class="primary-title">
      <div class="title">Dan West</div>
      <div class="subhead">Scientist</div>
    </div>
    <div class="action-icons"> <i class="material-icons action-icon" role="button" title="More options">more_vert</i> </div>
  </div>
  <div class="supporting-text"> Supporting text include text like an article summary or a restaurant description. Lorem ipsum dolor sit amet, vel ea quis suscipit. Modus scriptorem at sit, vix malorum appellantur eu an nec assum mazim pericula.</div>
  <div class="optional-header">
    <div class="thumbnail thumbnail--24x24"><img src="https://lh3.googleusercontent.com/-GvhDyQYoDZw/AAAAAAAAAAI/AAAAAAAAAAA/AIcfdXCR7Z9juYjHkI2MjHvfGmtowYerFw/s64-c-mo/photo.jpg" alt="" width="40" height="40"></div>
    <div class="primary-title">
      <textarea class="subhead" placeholder="Kommentar hinzufügen…" aria-label="Kommentar hinzufügen…" role="textbox"></textarea>
    </div>
  </div>
  <div class="actions">
    <div class="action-icons"> <i class="material-icons action-icon" role="button" title="Share">camera_alt</i> <i class="material-icons action-icon" role="button" title="More options">link</i> </div>
    <div class="action-buttons float-right">
      <button class="button" type="button">Cancel</button>
      <button class="button" type="button" disabled="">Post</button>
    </div>
  </div>
</div>

3.2 Report

Links: Reisebericht mit kleinem Teaser-Bild (1). Rechts: Reisebericht mit großem Teaser-Bild (2).

Ein weiteres Beispiel zeigt eine Karte mit wenig Text. Die Idee ist, dass Bild und Titel allein eine derart starke Aussagekraft besitzen, die dem Leser neugierig macht, mehr erfahren zu wollen. Ich habe mir vorgestellt, dass insbesondere das zweite Beispiel dieser Variante für Reise-Blogs als Einstieg dienen können.

Insbesondere das übergroße 2:3-Bildformat im Zusammenhang zum Titel und Kategoriebezeichnung lassen den Leser rasch erahnen, worüber der Inhalt handelt. Diese Variante eignet sich für Themen, die durch Bildsprache einen großen Effekt auf die Stimmung beim Anwender haben und zudem eine gewisse Wichtigkeit ausdrücken sollen. Ein spontanes Überspringen dieser Karte ist garnicht möglich, sie nimmt schließlich den gesamten Viewport des Smartphones in der Potrait ein.

Beispiele für Website-Formate können sein: Reise-/Kulturberichte, journalistische Beiträge über außenpolitische Geschehnisse. Aber auch für kulinarische Rezepte können ansprechend dargestellt werden.

3.2.1 Bericht mit kleinem Teaserbild (1)

HTML:

<div class="card">
  <div class="media media--16-9">
    <div class="primary-title">
      <div class="primary-text">The Many Lives Along the Yangtze River</div>
      <div class="secondary-text">Travel</div>
    </div>
    <img src="https://cdn.pixabay.com/photo/2016/11/03/04/03/ace-1793425_1280.jpg" alt="Kategorie Design bei pixeltuner.de" width="640" height="426"> </div>
  <div class="actions">
    <div class="action-buttons">
      <button class="button" type="button">Read report</button>
    </div>
    <div class="action-icons float-right"> <i class="material-icons action-icon" role="button" title="Share">share</i> <i class="material-icons action-icon" role="button" title="More options">more_vert</i> </div>
  </div>
</div>

3.2.2 Bericht mit großem Teaser-Bild (2)

HTML:

<div class="card">
  <div class="media media--2-3">
    <div class="primary-title">
      <div class="optional-header">
        <div class="thumbnail thumbnail--40x40"><img src="https://randomuser.me/api/portraits/women/47.jpg" alt="" width="40" height="40"></div>
        <div class="primary-title">
          <div class="title">Emma Freeman</div>
          <div class="subhead">Travel Journalist</div>
        </div>
      </div>
      <div class="primary-text">The Many Lives Along the Yangtze River</div>
      <div class="secondary-text">Travel</div>
    </div>
    <img src="https://cdn.pixabay.com/photo/2016/11/03/04/03/ace-1793425_1280.jpg" alt="Kategorie Design bei pixeltuner.de" width="960" height="640"> </div>
  <div class="actions">
    <div class="action-buttons">
      <button class="button" type="button">Read report</button>
    </div>
    <div class="action-icons float-right"> <i class="material-icons action-icon" role="button" title="Share">share</i> <i class="material-icons action-icon" role="button" title="More options">more_vert</i> </div>
  </div>
</div>

3.3 Reisen und Events

Links: Book a hotel (1).Rrechts: Book a hotel - klein (2)

Während eines früheren Projektes entwickelte ich das Design für einen Marktplatz für Buchungen von Reisen und Unterkünften. Für die Einstiegsseite entschied ich mich für ein sehr ähnliches Kartendesign, um die Top-Angebote anspruchsvoll anzuzeigen. In einem 3-, maximal 4 Spalten-Layout kommt dieser Karten-Typ besonders stark zur Geltung.

3.3.1 Book a hotel (1)

HTML:

<div class="card card__dark card__dark--magenta">
  <div class="media media--16-9"> <img src="https://cdn.pixabay.com/photo/2018/01/12/11/55/london-3078109_960_720.jpg" alt="Kategorie Design bei pixeltuner.de" width="640" height="426"> </div>
  <div class="primary-title">
    <div class="primary-text float-right">$99</div>
    <div class="primary-text">Apple Apartments Limehouse</div>
    <div class="secondary-text">
      <div class="action-icons icon-color--yellow"> <i class="material-icons action-icon" role="button" title="Share">star</i> <i class="material-icons action-icon" role="button" title="More options">star</i> <i class="material-icons action-icon" role="button" title="More options">star</i></div>
      -Hotel</div>
  </div>
  <div class="supporting-text">London, 2.8 km to Tower Bridge</div>
  <div class="actions">
    <div class="action-buttons float-right">
      <button class="button" type="button">View Details</button>
    </div>
    <div class="action-icons"> <i class="material-icons action-icon" role="button" title="Share">wifi</i> <i class="material-icons action-icon" role="button" title="More options">spa</i> <i class="material-icons action-icon" role="button" title="More options">pool</i></div>
  </div>
</div>

3.3.2 Book a hotel - klein (2)

Die kleine Variante eignet sich für einen abgeschlossenen Bestellvorgang, wie z.B. für Webshops mit Dashboard-Funktionen, worüber der User seine System-Interaktionen überblicken kann oder für Bestellbestätigungsmail, wodurch deine Buchung zusammenfassend auf diese sehr reduzierte Weise anschaulich dargestellt werden kann.
HTML:

<div class="card card__small card__dark card__dark--magenta">
  <div class="media"> <img src="https://cdn.pixabay.com/photo/2018/01/12/11/55/london-3078109_960_720.jpg" alt="Trip to London" width="640" height="426"> </div>
  <div class="primary-title">
    <div class="primary-text">Apple Apartments Limehouse</div>
    <div class="secondary-text">June 21 - 28</div>
  </div>
  <div class="actions border-top">
    <div class="action-buttons">
      <button class="button" type="button">View Details</button>
    </div>
  </div>
</div>

Schluss

Frontend-Entwicklung und Design entwickelt sich langsam aber sicher in eine Richtung, in der kaum noch kreative technische Lösungen von dir persönlich abverlangt werden. Für die Umsetzung von Material Design für Webanwendungen gibt es eine Vielzahl von CSS-Frameworks wie z.B Material Design Lite, Materialize, um nur zwei zu nennen. Eine Liste populärer Frameworks findest du hier.

Ich finde die Etablierung diverser Frontend-Frameworks großartig; erst durch die Einführung von Frameworks gelingt es Teams in einem professionellem Projektumfang Unternehmens- und Kundenziele zügiger zu erreichen auf eine weise, wie es zuvor nicht möglich gewesen war. Die Argumente für den Einsatz sind logisch: Code liefert Browser- und Systemkompatibilität. Durch gute Dokumentationen ist das HTML leicht eingebunden und angepasst. CSS-Anpassungen sind kaum noch nötig. Für die Qualitätssicherung ist seitens Framework quasi gesorgt. Prinzipiell benötigst du keine CSS-Kenntnisse mehr, lediglich die Bereitschaft mit den Dokumentationen arbeiten zu können wird vorausgesetzt.

Hiermit möchte ich nicht Eindruck erwecken, für Frameworks zu werben. Ich sehe hingegen eben auch einen einschneidenden Richtungswechsel - alles wird durch fertiges HTML, CSS und JavaScript modularisiert zu Verfügung gestellt. Der moderne Frontend-Designer und Entwickler ist somit zum Verwalter und Redakteur von Code geworden, anstatt selbst kreativ sich in Lösungen hineinzudenken.

Vergleiche ich die Lösungen genannter Frameworks, stelle ich fest, dass Karten häufig unterschiedlich dargestellt werden: Abstände, Schriftgrößen, Schattierungen usw, weichen voneinander ab; allesamt weichen von den Material Design Richtlinien auf eine Weise ab, die mich irritieren. Schenke ich meinen Beobachtungen Glauben, bestehen wohl auffällige Unterschiede, wie die Design-Richtlinien interpretiert werden. Dabei sehe ich, dass zwar Child-Elemente sich in eine korrektem Abstand zum Mutter-Element darstellen lassen, das innere Child-Element jedoch auch gewisse Eigenschaften zeigt und Einfluss auf Abstände zum Element aufweist. Technisch zwar korrekt gedacht und umgesetzt, der optische Effekt wirkt jedoch unsauber.

Beispiel: der Titel hat zu seinem Element selbst einen gewissen Abstand, der häufig bei Berechnungen nicht berücksicht wird. Dadurch wird der optische Abstand nicht korrekt eingehalten. Die pixelgenaue Umsetzung ist demnach fehlerhaft. Ich überlege, wie ich Code skalierbar und flexibel gestalten kann, um ein optisches Ergebnis auf eine Weise zu erzielen, die der Idee des material Design auf visueller Ebene hinsichtlich Perfektion so nahe kommt, dass es den schöpferischen Gedanken entspricht. Und das gelingt mir durch kritisches Hinterfragen und Ausprobieren. Dabei wirst du feststellen, auf Hindernisse zu stoßen. Und genau das macht einen wertvollen CSS-Entwickler aus - durch das Erkennen und Überwinden von Hindernissen anschließend einheitlichen und sauberen Code zu produzieren.

Das HTML und CSS in dieser Anleitung sind überschaubar und dennoch sehr flexibel und mannigfaltig anwendbar. Alle Kartenbeispiele samt HTML- und CSS habe ich diesem Beitrag beigefügt. Ich würde mich freuen, wenn du eine Meinung mit mir teilst. Übe kitik! Lasst uns forlaufend darüber kommunizieren. Nicht hier - überall, wo es Gelegenheit dazu gibt. Nur so legen wir zusammen den Grundstein für das Erreichen höherer Reifeplateaus. Also fordere ich uns auf: behandle meine Code-Beispiele und die von anderen nicht wie Frameworks.

Ressourcen:

zeolearn.com

Verschlagwortet mit , , , , , , , ,

Frischer Input für Designer. Jeder Abonnent erhält das kostenlose Bundle aus 50 Photoshop Device-Mockups und 40 Responsive WordPress-Themes.

1x pro Woche. Kein Spam. Jederzeit kündbar.
Jonathan Torke
Jonathan Torke

Auf pixeltuner.de teile ich aktuelle Ressourcen für Webdesigner und -entwickler. Du findest mich auch auf deviantART und Instagram.
PayPal-Kaffeespende.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Verpasse keine News!

Du erhältst ein kostenloses Bundle aus 50+ WordPress-Themes und PSD Device-Mockups.

1x pro Woche. Jederzeit kündbar.
Neueste Beiträge
Kategorien
Anzeige