Direkt zum Inhalt

Showcase – Muster und Vorlagen

Hinter einem durchdachten Webdesign steckt mehr als guter Geschmack und schöne Optik: Es muss Wünsche und Vorstellungen mit dem technisch Machbaren verbinden. Design ist immer Handwerk, Erfahrung und Know-how.

Höchste Priorität haben originelle Texte, professionelle Bilder, Anwendungen und Informationen zum Produkt, gefolgt von Lesbarkeit und der Navigation. Gestaltungselemente und Farben trennen die Inhalte, damit der Besucher die Menüs und die wichtigsten Kernaussagen sofort erkennt und Links zuordnen kann.

Das grafische Design sortiert die Inhalte, aber zwingt dem Anwender nichts auf – weder einen bestimmten Browser noch die Bildschirmgröße. Besucher greifen mit Handys, Tabletts, großen Desktop-Monitoren oder dem Fernseher auf die Webseiten zu. Die Programmierung muss die Gewohnheiten der Benutzer voraussehen, an die Gesten (Swipen, Wischen, Touchen) für kleine Monitore denken und darf nicht vergessen, dass der Finger auf dem Touch-Screen größer ist als der Mauszeiger.

Colofon WordPress-Themes

»Sand« und »Escher« sind moderne WordPress-Themes, die aus dem Rahmen fallen: überraschend und markant. Unsere Themes legen dem Autor oder Admin der Seite das Layout und die Farben in die Hand, so dass kein Eingriff in den HTML-Code oder die CSS-Datei des Themes nötig ist.

SAND

screenshot-sand-responsive.jpg

Ein Design, das durch sein Navigationsmenü auffällt. Die Navigation verbirgt kein Drop-Down-Menü, sondern antwortet mit einer »Landingpage«. Das macht die Navigation auf dem Tablett und dem Handy einfach. SAND legt dem Besucher keine Hürden beim Handling in den Weg. Die Landing-Page gibt mehr Aufschluss über die Inhalte als ein Drop-Down-Menü: Die Verweildauer wird länger.

Escher

escher-wordpress-theme.jpg

Ein Design für News und Business, mit einer Navigation im Hintergrund, die sich beim Klick mit der Maus oder beim Touch auf dem Handy oder Tablett an jeder Stelle der Seite öffnet. ESCHER ist ein Landingpage-Theme. Die Navigation hat kein Drop-Down oder Fly-Out-Menü. Farben und Layout lassen sich im Backend an die eigenen Vorstellungen anpassen.

Madagaskar – responsives Drupal-8-Theme

Ein einfaches Design, responsive, ohne jeglichen Ballast: Mit mehr als 20 Blockpositionen, Sidebar links oder Sidebar rechts, vorgefertigte Inhaltstypen für Angebotskarten und Views. Rund 2 Stunden Video-Tutorials für Autoren: Drupal 8 Theme Madagaskar-Demo

ipad-notebook-iphone7.jpg

Individuell angepasste Inhaltstypen

Katalogseiten, Angebote, Informationen, Berichte – jeder Internet-Auftritt hat seine eigenen »Seiten«. Sehen Sie sich Beispiele an, wie die Elemente einer Webseite angeordnet sein können.

Template mit Slideshow
Template – Vorlage Muster 2
Template Vorlage Muster 3
Template – Vorlage Muster 4

Templates bringen eine Linie in die Seiten eines Internet-Auftritts, um das Design konstant zu halten. Derartige Vorlagen verwenden auch Zeitschriften und Magazine für das Layout von Artikel-Kategorien.

Design-Muster: Preise und Angebote

Nicht jeder Internetauftritt braucht gleich einen Shop, aber Preise und Angebote machen erst dann einen professionellen Eindruck, wenn sie sich deutlich vom Text abheben.

PLAN 1ab50pro Monat1 Text auf der Zeile2 Text auf der Zeile3 Text auf der Zeile4 Text auf der ZeileUnverbindliche AnfragePLAN 2ab100pro MonatUnverbindliche AnfragePLAN 3bis150pro MonatUnverbindliche Anfrage

Feste Preise für Dienstleistungen sind schwer festzulegen, aber Anfragen kommen schneller zustande, wenn dem Interessenten eine Vorstellung von der Preisgestaltung vermittelt wird.

.me-grid { margin: 20px 0 0 0; padding: 0; list-style: none; display: block; text-align: center; width: 100%; background: linen; } .me-grid:after, .me-item:before { content: ''; display: table; } .me-grid:after { clear: both; } .me-grid li { width: 220px; height: 220px; display: inline-block; margin: 20px; } .me-item { width: 100%; height: 100%; border-radius: 50%; position: relative; box-shadow: 0 1px 2px rgba(0,0,0,0.1); cursor: default; } .me-info-wrap, .me-info{ position: absolute; width: 180px; height: 180px; border-radius: 50%; } .me-info-wrap { top: 20px; left: 20px; background: linen; box-shadow: 0 0 0 20px rgba(255,255,255,0.2), inset 0 0 3px hsla(30,30%,50%, 0.8); } .me-info > div { display: block; position: absolute; width: 100%; height: 100%; border-radius: 50%; background-position: center center; -webkit-backface-visibility: hidden; /*Just for webkit to have a smooth font*/ } .me-info .me-info-front { -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; } .me-info .me-info-back { opacity: 0; background: lightsteelblue; pointer-events: none; -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -o-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5); -webkit-transition: all 0.4s ease-in-out 0.2s; -moz-transition: all 0.4s ease-in-out 0.2s; -o-transition: all 0.4s ease-in-out 0.2s; -ms-transition: all 0.4s ease-in-out 0.2s; transition: all 0.4s ease-in-out 0.2s; } .me-img-1 { background-image: url(/sites/default/files/tender.png); } .me-img-2 { background-image: url(/sites/default/files/tender.png); } .me-img-3 { background-image: url(/sites/default/files/tender.png); } .me-info h4 { color: #fff; font-size: 18px; margin: 0 15px; padding: 50px 0 0 0; height: 40px; line-height:120%; } .me-info p { color: #fff; padding: 10px 5px 0; margin: 0 30px; font-size: 28px; border-top: 1px solid rgba(255,255,255,0.5); } .me-info p a { display: block; color: firebrick; padding-top: 4px; } .me-info p a:hover { color: #fff; } .me-item:hover .me-info-front { -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); transform: scale(0); opacity: 0; } .me-item:hover .me-info-back { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; pointer-events: auto; } .themes { width: 300px; margin: 1em auto; border-top: 4px solid gainsbor; border-bottom: 4px solid gainsboro} .themes h3 { text-align: center} .circle, .circle2, .circle3, .circle4 { background: hsl(0,50%,50%,0.8); border-radius: 100%; cursor: pointer; position: relative; margin: 0 auto; width: 220px; height: 220px; overflow: hidden; transform: translateZ(0); } .circle h5, .circle2 h5 , .circle3 h5, .circle4 h5 { color: rgba(189, 185, 199,0); font-family: 'Lato', sans-serif; font-weight: 900; font-size: 1.2em; line-height: 8.2em; text-align: center; text-transform: uppercase; -webkit-font-smoothing: antialiased; user-select: none; transition: color 0.8s ease-in-out; } .circle:before, .circle:after, .circle2:before, .circle2:after, .circle3:before, .circle3:after, .circle4:before, .circle4:after { border-radius: 100%; content:""; position: absolute; top: 0; left: 0; width: inherit; height: inherit; box-shadow: inset 150px 0 0 hsla(30,70%,50%,0.2), inset 0 150px 0 hsla(30,70%,50%,0.2), inset -150px 0 0 hsla(30,70%,50%,0.2), inset 0 -150px 0 hsla(30,70%,50%,0.2); transition: box-shadow 0.75s; } .circle:after, .circle2:after, .circle3:after, .circle4:after { transform: rotate(45deg); } .circle:hover:before, .circle:hover:after, .circle2:hover:before, .circle2:hover:after, .circle3:hover:before, .circle3:hover:after, .circle4:hover:before, .circle4:hover:after { box-shadow: inset 36px 0 0 hsla(30,50%,40%,0.4), inset 0 36px 0 hsla(240,50%,40%,0.2), inset -36px 0 0 hsla(300,50%,40%,0.2), inset 0 -36px 0 hsla(60,50%,40%,0.2); } .circle:hover > h5,.circle2:hover > h5,.circle3:hover > h5, .circle4:hover > h5{ color: rgba(185, 185, 185,1); } .circle2 { background: hsl(60,50%,50%,0.8); } .circle2 h5 { color: rgba(189, 185, 199,0); } .circle2:before, .circle2:after { box-shadow: inset 150px 0 0 hsla(210,30%,50%,0.2), inset 0 150px 0 hsla(210,30%,50%,0.2), inset -150px 0 0 hsla(210,30%,50%,0.2), inset 0 -150px 0 hsla(210,30%,50%,0.2); } .circle2:hover:before, .circle2:hover:after { box-shadow: inset 36px 0 0 hsla(120,50%,50%,0.2), inset 0 36px 0 hsla(150,50%,50%,0.2), inset -36px 0 0 hsla(210,30%,50%,0.4), inset 0 -36px 0 hsla(240,50%,50%,0.2); } .circle3 { background: hsl(330,50%,50%,0.8); } .circle3 h5 { color: rgba(189, 185, 199,0); } .circle3:before, .circle3:after { box-shadow: inset 150px 0 0 hsla(220,40%,20%,0.2), inset 0 150px 0 hsla(220,40%,20%,0.2), inset -150px 0 0 hsla(220,40%,20%,0.2), inset 0 -150px 0 hsla(220,40%,20%,0.2); } .circle3:hover:before, .circle3:hover:after { box-shadow: inset 36px 0 0 hsla(40,50%,50%,0.2), inset 0 36px 0 hsla(80,50%,50%,0.2), inset -36px 0 0 hsla(120,50%,50%,0.2), inset 0 -36px 0 hsla(220,50%,20%,0.4); } .circle4 { background: hsl(120,50%,50%,0.8); } .circle4 h5 { color: rgba(189, 185, 199,0); } .circle4:before, .circle4:after { box-shadow: inset 150px 0 0 hsla(200,10%,70%,0.2), inset 0 150px 0 hsla(200,10%,70%,0.2), inset -150px 0 0 hsla(200,10%,70%,0.2), inset 0 -150px 0 hsla(200,10%,70%,0.2); } .circle4:hover:before, .circle4:hover:after { box-shadow: inset 36px 0 0 hsla(40,50%,50%,0.2), inset 0 36px 0 hsla(80,50%,50%,0.2), inset -36px 0 0 hsla(120,50%,50%,0.2), inset 0 -36px 0 hsla(200,10%,70%,0.2); } .cflex { display: inline-block; } #cflex { margin-left: auto; margin-right: auto} @media only screen and (min-width:480px) { #cflex { width: 450px;} } @media only screen and (min-width:1260px) { #cflex { width: 900px;} #imgduo {max-width: 640px; margin-left: auto; margin-right: auto} } @media only screen and (min-width:980px) { #pattern, #paletten, #themes{ display: -webkit-flex; display: -ms-flexbox; display:flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content:space-between; } #paletten { margin-bottom: 4em;} .pattern, .paletten, .themes {width: 45%} } @media only screen and (min-width:1440px) { .pattern, .paletten {width: 23%} }