medani web & design wien Logo
 

Neue Website: Haanl

9. September 2014

haanl

 

Die Seilerei Haanl wurde 1889 gegründet und ist seitdem in Wien tätig und auf Seilerwaren spezialisiert. Der neue Webauftritt wurde von medani web & design so konzipiert und umgesetzt, dass die Tradition noch mehr in den Vordergrund gestellt wird.

Dafür wurde eine moderne One-Page-Präsentation erstellt, in der die geschichtlichen Ereignisse abgebildet wurden. Zusätzlich wurden vor Ort Fotos von der Werkstätte in Kooperation mit dem Fotografen Peter Berger erstellt.

Außerdem wurde eine übersichtliche und ästhetische Struktur für die Vielzahl der Erzeugnisse geschaffen, um den Kunden einen Einblick in die Produktpalette der Haanl GmbH zu gewährleisten.

Zur Webseite: www.haanl.at

Responsive Design Vorteile auch 2014 – interessante Grafik

18. Juni 2014

Responsive Web-Design ist mittlerweile zum Standard geworden. Interessante Gründe, warum es auch 2014 weiterhin hochaktuell ist, zeigt die folgende Grafik. Unsere Kommentare dazu gibt es darunter: 

 

 

Responsive Design 2014

Quelle: Web Design Ledger

 

Kurz zusammengefasst lässt sich damit sagen:

 

- Eine Responsive Webpage ist leichter von Google zu durchforsten, als mehrere separat gelöste Seiten, und bekommt daher leichter hohe Rankings. Der gesamte Link Juice liegt bei einer Domain.
- 90% von allen Internet-Usern verwenden bereits mehrere unterschiedliche Screens um zu surfen.
- 5.1 Milliarden von 6.1 Milliarden Personen besitzen bereits ein Mobiltelefon, 2015 soll mobiles Internet-browsen die Zahl der Desktop-Users bereits übertreffen.
- Der Content muss bei Responsive Websites nur einmal eingepflegt und aktualisiert werden
- Responsive Design ist langlebiger als andere Lösungen, denn eine Responsive Website kann sich durch ihre Flexibilität auch an zukünftige Geräte leichter anpassen, als fix definierte Größen.

 

Quellen:

Web Design Ledger

 

 

Responsive Webdesign Tricks – updated: weiterführende Tips für Responsive Webdesign und Design auf Mobilen Geräten

29. April 2014

Über die Basic-Elemente hinaus, die für Responsive Design bereits zum Standard geworden sind, wie Flexible Grids, Fluid Images und relativ gesetzte Fonts, gibt es weitere Tricks, die noch nicht überall zum Standardrepertoire geworden sind.

 

 

Reachable areas

Die Mehrheit aller Menschen sind laut einer aktuellen Statistik Rechtshänder. Daher werden auch mobile Geräte oft schwerpunktmäßig mit der rechten Hand bedient und mit der linken gehalten. Um die Bedienung zu erleichtern, macht es Sinn, die wichtigsten Navigationselemente dort anzusiedeln wo die Hand am Leichtesten hin kommt, ohne sich selbst im Weg zu sein, oder andere Elemente abzudecken. Mobify hat dazu eine gute Grafik für Tablets realisiert. Hier sieht man, dass am Tablet die am leichtesten zu erreichenden Punkte unten rechts und links sind, und der obere Teil schwieriger zu treffen ist.

 

 

Zusätzlich macht es durchaus Sinn in noch kleineren Formaten die Navigation entgegen des Standards rechts anzusiedeln, weil sie so leichter erreichbar ist als auf der linken Seite und man so weniger leicht aus Versehen über andere Stellen fährt. Denn bei Mobiltelefonen ist die linke obere Ecke mit der rechten Hand eindeutig die am schwierigsten zu erreichen.

 

 

Screensafe-areas-mobify

Quelle: mobify

 

 

 

Grid Vorlagen

Responsive Design baut sich bekanntlich auf beweglichen und skalierbaren Grids (Rastern) auf. Diese in den Designprozess einzubinden ist sehr wichtig. Um das Rad nicht jedes Mal neu zu erfinden und dabei Zeit zu sparen, hilft es, Grid-Templates (Raster-Vorlagen) zu verwenden, auf denen das eigene Design aufgebaut werden kann.

 

Auf Bootstrap etwa wurde ein gutes Set von downloadbaren Grid-Templates zur Verfügung gestellt, die man in Photoshop einbinden kann. Es gibt Vorlagen für die Desktop Version, die Tablet Portrait und die Mobile Portrait Version.

  

 

Treffsichere Buttons – auch für steife Finger

Der Winter ist gerade vorbei, doch wir erinnern uns an kalte Zeiten, in denen wir versucht haben mit eisigen unbeweglichen Fingern das Smart-Phone zu bedienen. Buttons die groß genug sind, um auch in diesem Zustand schnell getroffen zu werden, sind wahre Helfer um schnell ans gewünschte Ziel zu kommen. 44 Pixel aufwärts empfiehlt mobify als Richtwertgröße. Wir empfehlen außerdem auch den Abstand rund um die Buttons groß genug zu halten.

 

 

Mobile First Prinzip

Beim Designen mit der kleinsten Version zu beginnen, hat den Vorteil sich bei der Inhaltsplatzierung auf das Wesentliche zu fokussieren, und überflüssiges gnadenlos auszusortieren. Dies haben wir bereits in unserem Artikel Responsive Webdesign – Mobiles Design und der Designprozess beschreiben. Mehr dazu dort!

 

 

No hover? Guide the user

Auf Touchscreens fällt bekanntlich der Hoover Effekt aus, und damit die Möglichkeit, den User durch Hover Effekte (Veränderungen des Designs die entstehen, wenn die Maus über bestimmte Bereiche geführt wird) visuell zu führen. Für mobile Geräte braucht es daher andere Werkzeuge:

 

 

Animierte Elemente wie Pfeile, Buttons oder animierte Wegweiser sind durchaus wieder sinnvoll geworden, obwohl die Zeiten der html Blinktexte vorbei sind. Diese ersetzen die Hover Erfahrung, in dem sie den User klar anleiten, wo er wichtige Navigationselemente findet. Im Gegensatz zu Hover-Effekten, sind diese auch auf Touch Screens zu sehen, und auch in den kleinsten Formaten ein sichtbarer Anziehungspunkt. In einem unserer jüngsten Projekte: 24-7ticketagency.com - einer Event-Ticketagentur – haben wir am Startscreen ein intuitiv verständliches und erklärendes Feld eingeblendet, das den Usern in wenigen Augenblicken  erklärt, wie Sie auf dem schnellsten Weg u Ihren Tickets kommen, und wie die visuell sehr reduzierte Navigation funktioniert. Das Feld aktiviert sich auf allen Geräten.

 

 

Überaus sinnvoll, gerade auf Smartphones ist es außerdem schwer zu bedienende Scrollbars oder sonstige mit der Maus zu ziehende Hebel zu vermeiden, und leicht zu bedienende Elemente wie Akkordeons, Toggles und oder Full-Screen Lightboxes zu verwenden.

 

 

Tastaturen anpassen

Die Anforderung eine Tastatur zu bedienen, zeigt sich spätestens bei langen Text-Eingabe-intensiven Formularen auf dem iphone. Es gibt hier einige Tricks, die man beim Design für mobile Geräte umsetzen kann, um dem User die Eingabe seiner Daten zu erleichtern:

 

 

- Texteingabe-Felder generell minimieren, und sie so weit wie möglich durch Auswahlmenüs zu ersetzen

- Contextual Keyboards einsetzen, sprich die elektronischen Tastaturen per CSS-Code so anzupassen, dass die im entsprechenden Feld benötigten Buttons, wie etwa “@” gleich greifbar sin, und nicht auf der zweiten oder Dritten Keyboard ebene gefunden werden müssen

- Autokorrekturen und Auto-Großschreibung per CSS ausschalten

- Die Kamera-Eingabe im Code aktivieren, das lässt den Foto-Upload direkt und ohne Umwege zu

 

 

Sticky Navigation

Die Navigation immer an einer fixen Stelle eingeblendet zu lassen, obwohl die User den Inhalt unabhängig davon scrollen können (Sticky Navigation), erleichtert die Bedienung einer Website enorm. Laut mobify erhöht eine Sticky Navigation auch die Geschwindigkeit beim Browsen, um ganze 22%. Auf kleinen Screens kann solch ein Menü zusätzlich visuell reduziert und off Canvas gesetzt werden, um dem Content viel Raum zu lassen.

 

 

Starke große Bilder auch in kleinen Formaten

Dass wir auf emotionale Botschaften stark ansprechen, und diese in unserer visuell geprägten Gesellschaft besonders schnell über Bilder kommuniziert werden, ist auch im Responsive Design zu berücksichtigen. Darum sollte auch auf mobilen Geräten Bildern viel Raum gelassen werden. Texte können additiv zu den Bildern gesetzt werden, und ebenfalls durch sichtbare und leicht zu bedienende Buttons Off Canvas gesetzt werden. So können Bilder die User in die Themen einführen, Texte können per Klick aktiviert und gelesen werden. Bei kleinen Formaten zusätzlich die Browser-Bar auszublenden, gibt den Inhalten noch mehr Raum und Wirkung.

 

 

Textgrößen optimieren, Zoom ausschalten

Texte so groß zu setzen, dass sie auf kleinsten Formaten gut lesbar sind, ermöglicht einerseits die Lesbarkeit und ersetzt gleichzeitig die Zoom Funktion. Diese zu deaktivieren, erleichtert die Übersichtlichkeit einer Webpage, da man nicht in Detailausschnitten den Überblick über das Gesamtbild verlieren kann.

 

 

Transitions

Durch Transition (Effekte die beim Erscheinen und Verschwinden von Designelementen entstehen), wie Überblendungen, Farbeffekte und Bewegungseffekte, kann in Websites schnell das Look and Feel von potenten Apps entstehen und das Erlebnis wird deutlich spannender.

 

 

Not always the best solution

Responsive Design ist ganz klar ein Must Have für die Mehrheit aller Webprojekte geworden. Nicht zu vergessen ist gleichzeitig die Tatsache, dass es für manche Anwendungen nicht die beste Lösung ist oder sich überhaupt nicht eignet. Denn Sehr komplexe Inhaltsstrukturen und Seiten mit äußerst vielen und verschachtelten Informationsstrukturen etwa, sind möglicherweise mit getrennten Versionen für Desktop und Mobil besser beraten als mit einer flexibel anpassbaren Responsive Design Lösung.

 

 

Stay the same

Werden die Inhalte für mobile Versionen stark reduziert, kann die Gefahr entstehen, dass die mobile Version nicht mehr genug visuelle Zugehörigkeit zur Desktop Variante hat.

Da viele User Webseiten mehrmals von verschiedenen Geräten aus besuchen, ist es wichtig die Zusammengehörigkeit klar zu zeigen, da Besucher sonst irritiert werden könnten.

 

 

Quellen:

Mobify: http://www.mobify.com/go/tablet-web-design/

Webdesigner. 3/2013

http://dribbble.com/shots/1064433-Bootstrap-responsive-grid-PSD-Mobile-Tablet-Web-Free

http://de.wikipedia.org/wiki/Linkshänder

Responsive Webdesign, mobiles Design und der Designprozess

4. März 2014

Einleitung: Warum Responsive Design?

 

 

Einige Zahlen rund um die starke Verbreitung von mobilen Geräten, machen deutlich, wie groß der Bedarf an mobilem Webdesign tatsächlich ist: Im Bereich Smartphones sieht die Verbreitung sehr hoch aus: bereits im ersten Quartal 2013 wurden knappe 426 Millionen Handys über reale und digitale Ladentheken verkauft, knapp die Hälfte davon (49,3 Prozent) waren Smartphones. Das sind etwa 210 Millionen Stück verkaufte Smartphones und die Menge entspricht 43 Prozent Wachstum im Vergleich zum Vorjahr 2012. (6)

 

 

Auch bei Tablets gibt es aktuelle Zahlen die die starke Verbreitung zeigen. Laut einer Statistik sollen im Jahr 2016 282.7 Millionen Tablets verkauft werden. Eine andere Quelle schätzt die Verkaufszahlen sogar höher ein, nämlich dass zwischen 2013 und 2014 eine halbe Milliarde Tablets verkauft werden. (3) Dass es inzwischen eine Notwendigkeit geworden ist, gutes Webdesign gezielt für die Formate mobiler Geräte anzupassen, wird dabei wieder einmal deutlich. Tablet User erzeugen dabei übrigens 20% mehr Umsatz im Online-Einkauf als andere Standard Desktop Internet-User. (3)

 

 

Responsive Design vs Mobiles Design

 

 

Dass sich bei diesen Bedingungen die Anforderungen an das Webdesign enorm verändert haben ist klar. Doch wie sehr der gesamte Designprozess davon beeinflusst wird, wird bei genauerer Auseinandersetzung mit dem Thema klar.

 

 

En Zitat von mobify, die einen soliden Artikel für mobile und Responsive Design herausgegeben haben, zeigt humorvoll und realistisch einen Einblick in die Lage von Webdesignern heute: “Almost every new client these days wants a mobile version of their website. It’s practically essential after all: one design for the BlackBerry, another for the iPhone, the iPad, netbook, Kindle — and all screen resolutions must be compatible, too. In the next five years, we’ll likely need to design for a number of additional inventions. When will the madness stop? It won’t, of course.” (1)

 

 

Dass es heute wenig Sinn mehr macht, Webdesign an alle möglichen Geräte individuell pixelgenau anzupassen zeigt auch die Tatsache, wie viele unterschiedliche Bildschirmauflösungen es aktuell tatsächlich gibt. Zwischen 2005 und 2008 etwa, wurden bereits 400 verschiedene mobile Geräte verkauft. (1) Beachtet man dabei, dass viele dieser Geräte eigene Bildschirmauflösungen mitbringen, und die Mehrheit davon ebenso horizontal wie vertikal gehalten werden (portrait und landscape) vermehrt sich diese Zahl an möglichen Bildschirmauflösungen weiter. Und bedenkt man auch, dass wenige Desktop User ihre Browser immer auf 100% Größe eingestellt haben, sondern Browser in unterschiedlichsten Größen auf ihren Bildschirmen geöffnet haben, noch einmal.

 

 

Dass es eine andere Lösung geben muss Websites für all diesen Geräte zu optimieren ist klar: Responsive Design. Responsive Design ist Design, dass sich an alle Bildschirmauflösungen anpasst – sprich englisch: design that responds. Es geht hier generell gesehen nicht mehr darum, pixelgenau auf jedem Gerät ein Design abzubilden, sondern möglichst viele Geräte auf einmal durch flexible Lösungen anzusprechen. Kurz gesagt steckt der Clue darin, Formate für Spaltenbreiten, Textgrößen, Bildgrößen, etc. zu schaffen dich sich flexibel an die jeweilige Breite und Höhe des Gerätes anpassen.

 

 

Der Unterschied zum mobilen Design besteht generell darin, dass im Responsive Design ein flexibles Design geschaffen wird, das sich an alle Formate anpassen kann. Beim mobilen Design hingegen realisiert man meist eine zusätzliche separat realisierte Designlösung zur bestehenden Desktop-Website, die für mobile Endgeräte optimiert ist. Dass diese wiederum in ihrem Aufbau auf die Vielzahl der Smartphones und Tablet möglichst flexibel reagiert ist klar. Dass es aber zusätzlich die eigene Desktop-Version gibt, die grundsätzlich erhalten bleibt ist der Unterschied zum Responsive Design, wo eine flexible Lösung alle Formate bedienen kann.

 

 

Ob Responsive Design oder eine mobile Version zur bestehenden Website für Kunden vorteilhafter ist, beantwortet sich beim jeweiligen spezifischen Ausgangspunkt. Habe ich eine optimale Desktop-Website, die in den nächsten Jahren erhalten bleiben soll? Dann empfehlen wir eher eine mobile Version zusätzlich zu realisieren. Habe ich keine optimale Desktop-Seite, beziehungsweise brauche ich eine gänzlich neue? Dann empfehlen wir gleich eine neue Website im Responsive Design zu realisieren, da so finanziell und zeiteffizient das Beste Ergebnis erzielt werden kann.

 

 

Wombats-Display

wombat’s hostels display view. quelle: medani / wombats


Wombats-Tablet

wombat’s hostels tablet view. quelle: medani / wombats

 

 

 

Responsive Design im Designprozess

 

 

Durch die Notwendigkeit ein Design zu entwickeln, das auf allen Geräten optimal wirkt, hat sich eine neue Denkweise im Design entwickelt, die in dieser Art im Webdesign neuartig ist. Wieder passt dazu ein Zitat von mobify, die die Frage stellen, welche Pixeldimensionen ein/e WebdesignerIn beim Beginn eines neuen Projektes in seinem Dialogfenster eingeben soll, um gleich die wichtigste Größe zuerst zu bearbeiten. Die Antwort: “Perhaps it doesn’t matter.” so mobify, und weiter: “Consider this. The goal of this process is to create a website that begs to be read at any resolution. So, start at whatever resolution you’d like, whatever you’re comfortable with. Every resolution is important, not just the resolutions that last month’s analytics say are the most popular.” (2)

 

 

Dass diese Thematik auch anders gelöst werden kann, zeigen andere Autoren. Viele sind nämlich der Überzeugung, dass es sinnvoll ist mit dem kleinsten Format zu starten. Warum? Die Gründe sind einleuchtend:

 

 

- Je kleiner das Format, umso größer die Notwendigkeit sich auf die wesentlichen Inhalte zu konzentrieren.
- Je mehr man sich auf die wesentlichen Inhalte konzentriert, desto klarer wird das Ergebnis werden und desto schlanker auch die Desktop Version –mobile Geräte werden immer verbreiteter und kleine Größen deshalb immer wichtiger.
- Wenn die wesentlichen Inhalte stehen, kann bei größeren Formaten Design dazu gebaut werden.

 

 

Dass das durchaus ein Vorteil sein kann sehen wir genauso. Klar zu arbeiten und dabei das Wesentliche in den Mittelpunkt zu bringen ist eines der wichtigsten Kriterien für erfolgreiches Design. Gleichzeitig ist es als DesignerIn genauso wichtig, sich die Vorgehensweisen anzueignen, die einem am meisten liegt und dabei frei zu bleiben um neue Wege zu gehen, die vielleicht bei einem bestimmten Projekt am zielführendsten sind.

 

 

Zusätzlich zur flexiblen Konzeption einer Website für verschiedene Formate, gibt es einen weiteren Ansatzpunkt im Designprozess, der gezielte Aufbereitung der Inhalte für unterschiedliche Formate erlaubt: Die hilfreiche Funktion CSS Funktion display: none; mit der es leicht möglich geworden ist, bestimmte Inhalte auf verschiedenen Oberflächen ein und auszublenden. Man kennt diese Funktion häufig von Menüs, die sich in kleinen Formaten auf ein Symbol reduzieren, aus dem bei Klick sie Navigation erscheint. Toggles oder Accordeons, die bereits in der Mehrheit der erhältlichen Themes vorhanden sind, tun ihr eigenes dazu, doch darüber hinaus gibt es weit größere Möglichkeiten. Denn diese Funktion gezielt in den Prozess miteinzubeziehen ist sehr hilfreich. Verwendet man sie zum Beispiel an spezifisch konzipierten Stellen, kann man komplexe Inhalte für iPhone und Co so aufbereiten, dass es besonders auf den kleinen Formaten äußerst Userfreundlich möglich ist. Man kann zum Beispiel große Inhaltsbereiche einer Seite auf der Desktop Version gleich sichtbar machen. In der mobilen Version hingegen spart man sich meterlanges Scrollen, in dem man statt dem ursprünglichen Block nur einen Button setzt, der statt dem Inhalt nur die Information gibt, was dahinter zu sehen ist. Klickt man den Button, wird der Inhaltsblock erst sichtbar und verschwindet nach dem Lesen wieder hinter seinem Button.

 

 

Sich hier gezielt mit diesen neuen Möglichkeiten auseinanderzusetzen, verändert die Möglichkeiten im Designprozess stark. Wenn beginnt diese auszuloten wird klar: Responsive Design ist viel mehr, als alle Informationen der Desktop Version auf allen Screens lesbar zu machen. Es ist möglich, gleiche Inhalte auf jedem Format zum individuellen Erlebnis zu machen. Responsive EMags geben dabei sehr gute Anregungen. (Siehe dazu auch Page „Das neue Layouten“ #03.2014, S.20)

 

 

Im nächsten Artikel zeigen wir eine Hand voll weitere zielführende Tricks, die die Usability eines Webdesigns speziell in kleinen Formaten und Touch Screens gezielt erhöhen können.

 

 

Quellen

1 Smashing Magazine
http://www.smashingmagazine.com/responsive-web-design-guidelines-tutorials/#a2

2 Smashing Magazine
http://mobile.smashingmagazine.com/2011/09/26/content-prototyping-in-responsive-web-design/

3 Mobify tablet design best practices
http://www.mobify.com/go/tablet-web-design/

4 MOBITHINKING
http://mobithinking.com/mobile-marketing-tools/latest-mobile-stats/a#phone-shipments

5 Ing. Andreas Hammer, BSc
http://www.tutorials.at/responsive-webdesign/04-vorgehensweise-entwicklung.html

6 TECHSTAGE
http://www.techstage.de/news/Smartphone-Verkaufszahlen-Android-und-Samsung-fuehren-1863169.html

Webshops mit interaktiven Extras – Teil 2

6. Februar 2014

my own bike – Rad-Konfigurator

Auf der Webseite des Labels für individualisierbare Ein-Gang Fahrräder my own bike gibt es einen Konfigurator, mit dem man vor Ort verschiedenste Teile eines Fahrrades visuell abstimmen kann. Man kann Lackierungen und Lederbezüge farblich auswählen, sowie die Farbe der Radfelgen, der Lenkstange und unzähligen weiteren Teilen. Die Funktion ist sehr einfach zu bedienen und schnell in der Darstellung. In Sekundenschnelle kann man Farben austauschen, Felgen färben, Lederbezüge wechseln und sich das Rad zusammenstellen, das einem am besten zusagt. In einer Galerie, gibt es außerdem Bilder von fertig kreierten Rädern zu sehen. Die eigenen Entwürfe können per Social Media verbreitet werden können. Der Konfigurator hat den Vorteil, dass die Vielfalt der möglichen Style-Optionen auf kleinstem Raum visualisiert werden können. Dadurch, dass man Frau und Herr über sein eigenes Design ist, indem man den Konfigurator bedient, wird das Gefühl der passenden Form zum positiven Erlebnis.

 

medani_myOwnBike-1

quelle: my own bike


medani_myOwnBike-2

quelle: my own bike

 

 

 

 

burberry acoustic

Erwähnenswert ist auch Burberry Acoustic, ein Projekt des Modelables Burberry, das schon 2010 ins Leben gerufen wurde, und dessen Ergebnisse auf der aktuellen der Website von Burberry zu sehen sind. Es handelt sich um Videos von jungen Musikern, die in Burberry Outfits und passenden Vintage-Settings in der Natur oder alten Gebäuden zu sehen sind und Musikstücke performen. In Kooperation mit namhaften Musiklabels wurden hier deren Stücke exklusiv für Burberry aufgenommen.

 

 

In einer Online Galerie können diese Musikvideos abgespielt werden. Alle sind hochprofessionell produziert, einige davon inspirierend und einige sehr berührend, weil sich die Musiker talentiert ins Zeug legen. Burberry ließ auch eine CD produzieren mit dem Titel Burberry Acoustic -The Collection. Es handelt sich hier nicht direkt um eine integrierte Webshop-Funktion. Dennoch wäre es eine gute Möglichkeit für Webshopbetreiber, einen Musik-Award für ihre Kernzielgruppe zu realisieren. Denn damit könnten gleichermaßen mehrere Musiker, das eigene Image und der Verkauf gefördert werden.

 

 

medani_burberry-2

quelle: burberry acoustic


medani_burberry-1

quelle: burberry acoustic

 

 

 

 

 

SoJeans

Auf der Webpage von SoJeans wird ein Online-Tool angeboten, das es erlaubt, passende Jeans für die persönlichen Körpermaße angeboten zu bekommen. In einer integrierten visuell aufbereiteten Funktion, kann man Körpergröße, Taillenumfang, und Schnittpräferenzen der Jeans auf einfache Art eingeben, und bekommt zugeschnitten auf die Eingaben passende Angebote. Ob damit ein persönliches Anprobieren der Jeans ersetzt werden kann ist natürlich fraglich, allerdings erleichtert das Tool den Shoppingvorgang, weil das Sortiment auf weitere Kriterien als Jeansgröße und Farbe sortiert werden kann.

 

 

medani_sos-jeans-1

quelle: SoJeans


medani_sos-jeans2

quelle: SoJeans

 

 

 

Quellen:

Wikipedia “burberry”

 

 

Neue Website: Musikverein

29. Januar 2014

musikverein_1

 

 

Musikvereine gibt es viele. Den Musikverein gibt es nur einmal. Musikfreunde auf der ganzen Welt kennen ihn als Zentrum der Wiener Musikkultur, als Mittelpunkt des internationalen Konzertlebens, als Eldorado klassischer Musik. Die wenigsten wissen jedoch, dass die Webseite des Musikvereins unter www.musikverein.at einen umfangreichen Online-Shop bietet, der von medani web & design erstellt und entworfen wurde und in dem jährlich viele tausend Tickets und Online-Shop Artikel verkauft werden. 

 

Projektübersicht

 

Neue Website: Anna Inspiring Jewellery

anna_1

 

medani web & design hat für den Schmuckanbieter ANNA Inspiring Jewellery eine neue Webseite mit einem integrierten Onlineshop kreiert. Die übersichtliche Navigationsstruktur ermöglicht einen unkomplizierten und schnellen Einkauf.

 

Projektübersicht

Neue Website: Wombats

wombats_1

 

Für die in Europa expandierende Wombats-Hostels Group wurde eine neue mehrsprachige WordPress Website im individuellen responsive Design erstellt. Die Anforderungen an die Website waren, sowohl im Look and Feel des Designs, sowie in der Wahl von innovativen Tools, die besondere Philosophie und Einstellung von Wombats zielgruppengerecht auszudrücken.

 

Projektübersicht

 

 

Umweltbewusstsein bei medani

27. Januar 2014

green_it

Bei medani web & design hat Qualität eine hohe Priorität. Dieses Qualitätsbewusstsein setzt sich auch in unserem Umgang mit der Umwelt fort. Gerade bei Webseiten und Online Shops ist es beim Hosting einfach auf hochwertige und ausgewählte Komponenten zu setzen und somit Engerie zu sparen. Zusätzlich legen wir beim Thema Nachhaltigkeit absoluten Wert darauf, dass die Energieversorgung unserer Server ausschließlich aus regenerativen Quellen stammt. Unsere Server werden daher zu 100% mit Energie aus kohlendioxidfreier und umweltfreundlicher Wasserkraft versorgt. 

 

 

Bei unseren Druckprodukten arbeiten wir hauptsächlich mit österreichischen Partnern, die als Mindeststandard mit dem österreichischen Umweltzeichen ausgezeichnet sind. Darüber hinaus können unsere Kunden bei unseren Druckangeboten auch 100% umweltverträgliche und abbaubare Tinten wählen, FSC zertifizierte Papiere und Recyclingpapiere, und chlorfrei gebleichte Papiere. 

Webshops – Design mit interaktiven Extras

10. Januar 2014

Introduction

 

 

Damit Webshops noch erfolgreicher Publikum anziehen, haben sich einige Webshopbetreiber innovative Zusatzfunktionen einfallen lassen, mit denen Zielgruppen gezielt angesprochen und aktiviert werden können. 

 

Dabei werden unter Anderem attraktive Interaktionsmöglichkeiten angeboten, die es erlauben sich mit den angebotenen Produkten im eigenen Alltag auseinanderzusetzen und als Nebeneffekt damit zu sympathisieren. Auch bieten einige Online-Shops interaktive Kaufhilfen an, die darauf abzielen die im klassischen Online-Shop generell fehlenden direkten Beratungen durch das Verkäuferpersonal oder die Möglichkeit Produkte vor Ort an- oder auszuprobieren mit entscheidungserleichternden Online Modulen zu ersetzen.

 

Interessanterweise bieten viele der Beispiele Wettbewerbe an, die Online-Showcases beinhalten. Als Goody für die Teilnehmenden Personen werden Community-Rankings veranstaltet, Warengutscheine angeboten oder auch exklusive Teilnahmen an Fotoshootings oder Musikprogrammen.

 

Benefit

 

Der Benefit für die beteiligten Firmen ist nicht schwer zu erkennen: je mehr Menschen sich mit den Produkten positiv auseinandersetzen und dies kommunizieren, desto größer wird die Community der Sympathisanten und damit die potentielle Käufercommunity. Dass Wettbewerbe auch durch die eigenen Firmenbeteiligten gestaltet und juriert werden, sorgt dafür, dass das entstehende Image des Unternehmens durch die Wahl der Beiträge so beeinflusst werden kann, dass es dem Unternehmenszweck dient.

 

 

 

Asos marketplace / Asos fashionfinder

 

Der asos marketplace, eine internationale Online Plattform für den Kauf und Verkauf von Mode, bietet generell individuellen Personen und kleinen Modelables die Möglichkeit Mode zu verkaufen und zu kaufen. Dass dahinter darüber hinaus noch mehr steckt, zeigt die rege Teilnahme an den diversen Online-Aktivitäten, die auf dem asos marketplace angeboten werden. Dabei sind Fashion-Bloggers aus unterschiedlichsten Städten und Ländern, wie Celje, Slowenien oder Brighton, England.

 

Im asos fashionfinder, ein eigener Bereich auf dem Portal, gibt es die Rubrik “Looks”. Dort werden Outfits von Celebrities geshowcased, gleichfalls werden zur Teilnahme freie Themen-Looks erstellt. Aktuell zum Beispiel zu Themen wie: “new years eve”, “ice skating”, “christmas eve”  “work”, “autumn shades” aber auch schlicht zur Farbe “cobalt blue”.

 

Interessant ist dabei die Möglichkeit, aus den aktuell erhältlichen Produkten per Drag and Drop Collagen zu erstellen, die die verschiedenen Produkte kombinieren. Ein Klick auf die dargestellten Produkte zeigt den Preis und die Lokalität, wo das Produkt zu kaufen ist, und führt oft direkt auf den Webshop des jeweiligen Anbieters. Außerdem gibt es andere Bereiche, wo Fotos von Personen in eigenen Outfits zu sehen sind.

 

 

Das Ergebnis ist ein riesiges Pool von Jung-Models, Mode-Ideen und Einkaufsmöglichkeiten. Die Tatsache, dass viele der Produkte von Personen geshowcased werden, die nicht notwendigerweise professionellen Models sind, wirkt dabei sympathisierend und vertrauensbildend.

 

Darüber hinaus interessant ist außerdem, dass sich um diese Plattform herum, eine große Community an aktiven Fashion-Bloggers gebildet hat. Rankings innerhalb der Community fördern die Tatsache,  dass viele der Fashion-Bloggers sich regelrecht ins Zeug gelegt haben, um viele qualitative Beiträge zu posten. Es werden zum Beispiel Style credits vergeben, die besonders positiv bewertete Beiträge küren, mit Titeln wie “Raising star” (649 positive Erwähnungen) oder “Trend setter” (über 2000).

 

 

medani-asos-marketplace

quelle: asos fashionfinder

 

 

Mango street style academy

 

Die Mango Street Style Academy des Modelables Mango ist auf der Mango Shop Page zu sehen. Sie funktioniert ähnlich wie asos, jedoch ist die Teilnahme dort leicht anders ausgerichtet. Die Teilnahmebedingungen sind folgende:

“Machen Sie ein Foto, auf dem Sie sich in Ihrem Look aus mindestens einem Key-Item von MANGO der Saison HERBST/WINTER 2013 zeigen. Laden Sie es bei MANGO STREET von Ihrem Nutzerkonto aus hoch. Wenn Sie nicht registriert sind, können Sie das direkt zum Teilnahmezeitpunkt tun. Jeden Monat wird eine neue Teilnahme bei MANGO STREET freigegeben. Wenn Sie mit Ihrem Foto unter die Finalisten kommen, erhalten Sie einen Geschenkgutschein im Wert von 100 €. Aus den Finalisten wird ein monatlicher Gewinner ausgewählt. Wenn wir uns für Sie entscheiden, erhalten Sie einen Geschenkgutschein im Wert von 500 € und wir widmen Ihnen eine Rubrik innerhalb des MANGO-Magazins.” - So die Teilnahme Aufforderung auf der Mango Website.

 

Das Ergebnis des Wettbewerbes ist eine ansprechende Galerie von Fotos und auch Videos mit unzähligen Personen, die Mode und Accessoires von Mango in ihrer individuellen Umgebung zeigen. Dass die Mode auch hier aus dem inszenierten begrenzten Umfeld der professionellen Modebranche herausgenommen wird, und im Alltag neu inszeniert wird, schafft eine kuriose und sympathische Stimmung, die durchaus ansteckend wirkt.

 

Kauffördernd ist hier außerdem, dass man per Klick auf das Outfit Detailinfo zu dem Artikel und der Person, die ihn vorführt bekommt, und die Möglichkeit hat, ihn direkt über den integrierten Mangoshop zu kaufen.

 

 

medani-mango-streetstyle-academy2

quelle: mango street style academy

 

 

Im zweiten Teil folgen weitere Beispiele: MyOwnBike – Konfigurator, Burberry Acoustic, und SOS Jeans. 

Webfonts. Eine Auswahl von guten Google Webfonts

2. Januar 2014

Die Wahl von passenden aussagekräftigen Schriften ist im Design generell sehr wichtig. Denn Schriftbilder beeinflussen die Wirkung von visuellen Botschaften ungemein. Das ist durchaus bekannt, denn jeder kennt die markenbildende Wirkung von Schriftzügen von bekannten Marken wie etwa IKEA, Coca Cola oder Nivea.

 

 

Im aktuellen Webdesign kommt dazu, dass durch das angesagte und weitverbreitete Flat Design, das wir in unserem Artikel ausführlich beschrieben haben, Schriften mehr in den Vordergrund kommen, weil die anderen Designelemente reduzierter verwendet werden. Denn wo dreidimensionale klar erkennbare Design-Objekte generell gesprochen durch zweidimensionale einfache Flächen ersetzt werden, bekommen Schriftbilder größeres Gewicht. Lesen Sie hier mehr zum Thema.

 

 

Schriften im Web

 

 

Die Suche von passenden Schriften hat sich durch Webfont-Anbieter wie das kostenlose Service Google-Fonts auf der einen Seite erleichtert. Denn Statt auf rund 10 verwendbare Systemschriften zurückgreifen zu müssen, gibt es aktuell allein bei Google Fonts  629 unterschiedliche Schriftfamilien die man ins Web einbinden kann. Diese bestehen ihrerseits oft aus mehreren Schnitten, sprich Stärken und Stilen. Die Schrift Roboto etwa hat aktuell in der Originalvariante 12 Stile, deren Wirkung teilweise stark variiert. Zusätzlich gibt es  weitere 6 Schnitte von Roboto bei Google Fonts, des Stils Roboto Condensed, eine schmale Variante der gleichen Schriftfamilie, sowie 4 weitere der Variation Roboto Slab.

 

 

Um auch andere Schriften außerhalb von Google Fonts in die Überlegungen miteinzubeziehen – sind bereits von der Mehrheit der herausgegebenen Schriften Webfont Varianten erhältlich, wodurch dem Panorama der Schrifteinbindung im Web wenig Grenzen mehr gesetzt sind. Bedenkt man, dass noch vor wenigen Jahren nur die wenigen auf jedem PC standardmäßig installierten Schriften direkt ins Web eingebunden werden konnten, sieht man den großen Fortschritt der in dieser Entwicklung steckt.

 

 

Neues Panorama für das Design

 

 

Mit den erhöhten Wahlmöglichkeiten steigt parallel aber auch die Anforderung die passenden Schriften zu finden, auszuwählen und zu kombinieren. Denn oft folgt die Suche der optimalen Schrift – etwa in der Google-Font Liste eines WordPress Themes – dem „Trial and Error“ Prinzip. Qualitative Webfonts zu kennen erspart dabei enorm viel Zeit und bringt gute Ergebnisse.

 

 

Wir haben uns deshalb gezielt umgeschaut und eine Auswahl von geeigneten Google-Webfonts zusammengestellt. Einige davon kommen von Empfehlungen von Designkollegen im Web, die hier bereits tolle Vorarbeit geleistet haben. Andere kennen wir aus der eigenen Arbeit.

 

 

Das Ergebnis ist eine nicht als komplett zu verstehende sondern für Erweiterungen offene Auswahl an qualitativen Google-Webfonts, die uns wegen ihrer Flexibilität durch mehrere verfügbare Schnitte und ihre ästhetische Qualität überzeugt haben.

 

 

Roboto, Roboto Condensed, Roboto Slab

Designer: Christian Robertson

Wirkung: gleichzeitig schlicht, klar und technisch angehaucht, sowie persönlich und fröhlich. Trotz der Schlichtheit individuell, besonders Im Condensed Schnitt.

Verfügbare Schnitte: Roboto 12, Roboto Condensed 6, Roboto Slab 4

Zum Font: http://www.google.com/fonts/specimen/Roboto

 

 

Roboto

 

 

Signika

Designer: Anna Giedryś

Wirkung: gute Lesbarkeit durch die Entwicklung als Schrift für Beschilderungen und Informationsdesign. Klar und serifenlos und dennoch eigener Charakter durch sparsam eingesetzte grazile Biegungen und gezielt gesetzte Ecken.

Verfügbare Schnitte: 4

Zum Font: http://www.google.com/fonts/specimen/Signika

 

 

Signika

 

 

Oswald

Designer: Vernon Adams

Wirkung:  Kommunikativ. Plakativ. Kräftig und auffällig in Bold Variante. Edel in light Variante. Klar. Historische Anmutung mit gleichzeitigem starkem zeitgemäßen persönlichen Charakter.

Zum Font: http://www.google.com/fonts/specimen/Oswald

 

 

Oswald

 

 

Raleway

Designer: Multiple Designers: Matt McInerney, Pablo Impallari, Rodrigo Fuenzalida, Igino Marini

Wirkung: schlicht, bewegt und elegant. Rund. Klar. Vielseitig verwendbar durch die vielen verfügbaren Schnitte. Zeitgemäß. Gut ausgwogen. Gleichzeitig schlank und füllig.

Verfügbare Schnitte: 9 plus eine weitere gepunktete Variante: Raleway Dots Zum Font: http://www.google.com/fonts/specimen/Raleway

 

 

Raleway

 

 

Pacifico

Designer: Vernon Adams

Wirkung: fröhlich, persönlich mit Handschrift-Charakter. Gut geeignet für einzelne Überschriften. Inspiriert von der amerikanischen 50er Jahre Kultur.

Verfügbare Schnitte: 1

Zum Font: http://www.google.com/fonts/specimen/Pacifico

 

 

 

Pacifico

 

 

Old Standard

Designer: Alexey Kryukov

Wirkung: Elegant, historische Anmutung. Klassizistisch. Revival von Schriftstilen des 19. und frühen 20. Jahrhunderts. „Prunkvoll zurückhaltend“.

Verfügbare Schnitte: 3

Zum Font: http://www.google.com/fonts/specimen/Old+Standard+TT

 

 

Old Standard

 

 

Playfair Display

Designer: Claus Eggers Sørensen

Wirkung: in der Linienstärke kontrastreiche Serifenschrift mit elegantem und fröhlichem Charakter. In der Höhe der Buchstaben kontrastarm. Stark und plakativ mit edler Anmutung in Bold Varianten. Grazil in light Varianten. Historisch. Gut geeignet für Überschriften und kurze Zitate.

Verfügbare Schnitte: 6

Zum Font: http://www.google.com/fonts/specimen/Playfair+Display

 

 

Playfair Display

 

 

Dosis

Designer: Pablo Impallari

Wirkung: Rund, elegant, leicht und edel. Fröhlich. Serifenlos. Gut geeignet in großer Größe zum Beispiel für Headlines.

Verfügbare Schnitte: 7

Zum Font: http://www.google.com/fonts/specimen/Dosis

 

 

Dosis

 

 

Quellen

http://www.steptoandson.co.uk/services/10-great-web-font-combinations/

http://hellohappy.org/beautiful-web-type/

http://www.elmastudio.de/typografie/meine-top-10-google-webfonts-fur-webdesign-projekte-in-2013/

http://www.creativebloq.com/typography/free-web-fonts-1131610

Webshops im Trend – eine Bestandsaufnahme aus Designsicht Teil 2

18. Dezember 2013

Canvasco

 

Der Webshop von Canvasco, der bei den Red Dot Design Awards in der Rubrik Kommunikationsdesign ausgezeichnet wurde, wirkt durch die Kombination von einer mosaikförmigen Anordnung der Produkte und große Hintergrundbilder. Die Übermittlung von emotionaler Stimmung wird auch durch die durchgängige Gestaltung der Navigationselemente erzeugt.

 

 

Was die Struktur des Shops betrifft, wird hier eine klassische Web-Shop-Form verwendet, welche die Produkte in Mosaikform in mehreren Spalten aufzeigt. Dahinter liegen starke für sich sprechende Hintergrundbilder, welche Full-Size platziert sind. Die Produkte hingegen sind so darüber angelegt, dass sie sehr gut und klar zu sehen sind und eine gewisse Leichtigkeit in das Design bringen. Die Menüelemente haben eine durchgängige persönliche Sprache, in Flat Design gehalten, die in Kontrast zu den im Hintergrund sichtbaren räumlichen Bildern stehen.

 

 

Fazit: Klassische Struktur mit starken Hintergrundelementen und durchgängigem persönlich wirkenden Design. Geeignet für große Produktsortiments.

 

 

canvasco

quelle: canvasco

 

 

Flug zeug

 

 

Dieser Webshop von medani für das innovative Modelabel Flug zeug, das Taschen und Accessoires aus Schwimmwesten und Gurten von Flugzeugen herstellt, überzeugt durch das sympathische Design und die klare Struktur. Hier wird in der Farbgebung der Menüelemente & der Designstruktur die Corporate Identity von Flug zeug gekonnt übermittelt. Ein Slider auf der Startseite sorgt für das notwendige Branding, da hier Produkte und Messages gut präsentiert werden.

 

 

Unser Fazit: Klare Struktur mit gekonnter Gestaltung und gute Produktbilder. Klassische Web-Shop Form mit großem Slider, in der das Corporate Design überzeugend vermittelt wird und die Produkte gut präsentiert werden. Reif zum Abheben!

 

 

flug-zeug

quelle: Flug zeug

 

 

my own bike

 

 

Dieser Shop der Marke my own bike ist durch und durch gut gestylt. Die sympathische Wirkung, die speziellen Stärken und Qualitäten der Produkte übermittelt, passt gut zum Thema:  Es geht hier um persönlich gestaltbare Fahrräder.

 

 

Was hier zusammenstimmt ist ein Konglomerat von gut gewählten Designelementen, die gezielt den eigenen Spirit der Marke kommunizieren: Das starke Branding entsteht zum einen dadurch, dass die Fahrradbilder in den Hintergrund des Shops integriert wurden, und nicht wie bei anderen Websites in optisch abgetrennten Bereichen liegen.  Die Farbgebung von Hintergrund und Typografie passt optimal zu der stilvollen Optik der Fahrräder selbst, die Ledersättel und Gestänge in ähnlichen Farben haben. Die Menüführung ist dezent gehalten. Ein Konfigurator schafft es auf einem einzigen Ort die Vielzahl der verfügbaren Designoptionen darzustellen.

 

 

Unser Meinung: Starke persönliche Wirkung. Ästhetisch und emotional sehr ansprechend.

 

 

my-own-bike

quelle: my own bike

 

 

Shoe Guru

 

 

Das besondere des Shops von Shoe Guru ist, dass er visuell ein Geschäftslokal imitiert. Die Schuhe werden hier nämlich in eine Gesamtgrafik eingebunden, die ein homogenes Ganzes erzeugt und den Webshop wie ein Ladenregal aussehen lässt. Dass manche Schuhe im vollen Regal nicht mehr zu haben sind, und durch ein rotes Schild mit den Lettern „Sold Out“ ersetzt wurden schafft zusätzlich Sympathie.

 

 

Fazit: Eine kreative Möglichkeit einen Webshop persönlich zu gestalten. Ein Webshop mit sympathischem Kaufgefühl. 

 

 

shoe-guru

quelle: shoe guru

 

 

 

WP 3.8 veröffentlicht

16. Dezember 2013

Bereits am Donnerstag wurde das neue WordPress 3.8 Codename “Parker” veröffentlicht. Dabei hat WordPress wieder einmal einen großen Sprung gemacht und eine vollständig neue Verwaltungsoberfläche integriert. Auch das neue Standard Theme 2014 wurde mit der Version ausgeliefert. Im Backend setzt WordPress jetzt auf stärkere Kontraste in einem noch aufgeräumteren Layout. Vor allem aber wurde die Usability mit mobilen Geräten stark verbessert. Das neue Standard Theme Twenty Fourteen ist im Magazin Stil gehalten.

Mit Auslieferung der neuen WordPress Version mit neuem Backend wurde natürlich auch die Runderneuerung des WordPress Handbuchs von medani web & design notwendig. Auch das neue Handbuch für die WordPress Version 3.8 wird ab sofort bei Einschulung an unsere Kunden ausgeliefert.

Internet Explorer 11 Probleme

6. Dezember 2013

Mit dem letzten Windows Update auf Windows 8.1 ist auch der Internet Explorer 11 am Markt erschienen. Auf den 1. Blick bringt dieser einige Neuerungen und Verbesserungen mit. Auf den 2.ten Blick zeigt der IE11 aber große Probleme. So gibt es dokumentierte Probleme mit Unity Player, TinyMCE und CK Editor, WordPress, als auch mit den Suchergebnissen aus Google. Warum Microsoft einen derart Probleme verursachenden Browser auf dem Markt veröffentlicht, bleibt wohl allen ein Rätsel. 

Uns und unsere Kunden betrifft vor allem die Bearbeitung von WordPress Inhalten im Editor. Wir empfehlen allen Kunden mit Problemen im IE11 auf einen anderen Browser zu wechseln. Aktuell empfehlen wir hier den Einsatz von Google Chrome. 

Bleibt nur zu hoffen, dass es bald ein Update des Internet Explorer 11 gibt, welches die bestehenden Fehler behebt.

Besuch auf OMX und SEOkomm 2013

26. November 2013

Letzte Woche habe ich die OMX und tags darauf die SEOkomm in Salzburg besucht. Die SEOkomm fand zum vierten Mal statt und erstmal wurde dem Thema Online-Marketing ein eigener Tag mit zwei parallel zu bespielenden Vorträgen gewidmet. Das Ergebnis war eine bunte Mischung an spannenden Themen.

Begonnen hat es bei der EU-Cookie-Richtlinie, die de facto (noch) nicht einheitlich und EU-weit umgesetzt wurde, über die Wandlung von play.com von einer der größten eCommerce-Webseiten in UK zum drittgrößten Marktplatz in UK nach dem Kauf durch Rakuten 2011. Weiters habe ich einen Vortag von Thorsten Hubert von der Web Arts AG zum Thema Conversion Optimierung miterlebt, bei dem sehr spannende Use Cases vorgestellt wurden, wie Conversions in Online-Shop nachweislich verbessert werden können. Weiters gab es Tipps für die ideale Landing-Page bei Online-Shops, sehr allgemeine aber hilfreiche AdWords-Tipps und zum Abschluß 22 Conversion Tipps.

Die SEOkomm am Freitag startete (wie jedes Jahr, wie mir gesagt wurde) mit einer fulminanten Keynote von Marcus Tandler, in der in rasender Geschwindigkeit eine hohe Dichte in Information geliefert wurde, wie die Entwicklung von Google als Suchmaschine in verschiedenen Märkten, die Entwicklung von Google überhaupt (Stichwort wie wird sich die Suche in der Zukunft verändern und welche Auswirkungen hat das auch Suchmaschinenoptimierer), die Entwicklung von YouTube, Facebook und Google+.

Anschließend habe ich zwei Vorträge zum Thema Content-Marketing genossen, die sehr interessant waren und mir den Aufwand, der hinter richtig gutem Content-Marketing steckt erst so richtig klar gemacht hat. Markus Hövener von der Bloofusion Germany GmbH, dem ich auch schon bei diversen Webinaren als Redner lauschen durfte, hat uns anschließend verraten, wie man als Kunde an eine gute Suchmaschinenagentur gelangt, Nieten aussiebt und eine lange und für beide Seiten zufriedenstellende Partnerschaft erreichen kann. Im Umkehrschluß war das für uns als Suchmaschinen-Agentur natürlich ebenso sehr interessant. Der Tag wurde mit den Themen Linkqualität und Risikomanagement (gerade durch das Google-disavow-Tool in letzter Zeit aktuell) und 20 Links-Tipps beschlossen.

Danach ging es zur After Show Party auf der es Gelegenheit gab sich besser kennenzulernen und so vielleicht in Zukunft Kooperationen eingehen zu können.

Ich freue mich schon auf die OMX/SEOkomm 2014.

Webshops im Trend – eine Bestandsaufnahme aus Designsicht – Teil 1

19. November 2013

Wie in einem unserer letzten Artikel beschrieben, wird eCommerce immer wichtiger und dabei auch besonders die mobile Nutzung von eCommerce. Weil wir durch das Fortschreiten der technischen Möglichkeiten mobiles Internet immer mehr in unseren Alltag integrieren, ist es eine logische Folge, dass auch die Verwendung von Webshops parallel zunimmt.

Neue Herausforderungen für Webdesign

 

Mit dem Anstieg von eCommerce und dessen Nutzung auf unterschiedlichsten Devices wächst auch die Herausforderung der Webshops, überall und auf jedem Display vollfunktionell zur Verfügung zu stehen. Die einfache Bedienbarkeit – auf jedem Gerät! – steht dabei im Vordergrund. Denn es kommt ja genau beim Online Einkauf darauf an, dass jeder Schritt sicher, glatt, transparent und für den Kunden verständlich abgewickelt wird. An Platz für wichtige rechtliche Informationen darf es dabei auch nicht fehlen.

Zusätzlich ist es bei Webshops aus Designsicht außerdem wichtig eine Vielzahl von Produkten klar und gut organisiert darzustellen. Das mag bei kleinen Webshops und großen Bildschirmen relativ einfach zu erzielen sein. Steigt aber die Anzahl der angebotenen Produkte und variiert die Größe der Displays vom Studioscreen bis zur Mobiltelefongröße, braucht es mehr und mehr visuell gut durchdachte Navigationsstrukturen und optimales Design.

Soll der Webshop dabei auch einzigartig wirken und natürlich zusätzlich auch die Unternehmensphilosophie im Design optimal übermitteln, bekommt man als Webdesigner weitere Herausforderungen. Denn man kann davon ausgehen, dass alle diese Punkte die Wirkung auf Kunden und damit auch den Kaufeffekt stark beeinflussen.

Aktuell wird im Web viel getan, um all diesen neuen Herausforderungen gerecht zu werden.

Wir zeigen hier eine Auswahl spannender Beispiele, die diese Anforderungen an das Webdesign auf unterschiedliche Art lösen! Da mobile Geräte dabei immer wichtiger werden, zeigen wir viele der Screenshots diesmal aus der iPad Tablet-Portrait-View.

medani_diesel2

quelle: diesel.com


medani_diesel3

quelle: store.diesel.com

 

Diesel

Die aktuelle Diesel Webseite, die wir bereits in unserem letzten Artikel Webdesign Trends 2014 – Teil 2 diskutiert haben, ist visuell beeindruckend. Schon nach ein paar Klicks bekommt man das Gefühl man wäre im Kino, oder noch besser formuliert, fühlt man sich als wäre man direkt neben den Models auf der Show-Bühne. Dieses hautnahe Gefühl vermittelt Diesel durch die starke Betonung von hochqualitativen Fotos und Videos, die die Aufmerksamkeit durch gekonnte Platzierung so stark an sich ziehen, dass alle anderen Elemente regelrecht in den Hintergrund gedrängt werden. Das erzeugt den Effekt, dass die Aufmerksamkeit übermäßig stark geweckt wird, und man sich staunend immer mehr in die Website vertiefen will. Dass die Produkte dabei auch gut zur Geltung kommen, macht Diesel sehr geschickt. Fotos von Models und Produkten verschmelzen zu einem harmonischen Ganzen, und der Einkauf wird zum Erlebnis.

Der Webshop hingegen arbeitet ebenfalls mit großen emotionalen Bildern, rückt aber die Produkte ganz klar in den Vordergrund. Zu sehen ist eine klassische Webshop Aufteilung, die die einzelnen Produkte auf weißem Hintergrund gut zur Geltung kommen lässt. Die Typografie und die schwarze Gestaltung wurde von der Diesel Website übernommen. Hier steht aber im Gegensatz zur Corporate Website die Übersichtlichkeit und Klarheit stark im Vordergrund.

Fazit: hier werden Webshop und Corporate Website visuell und konzeptuell klar getrennt.

 

medani_bigCartel2

quelle: bigcartel shop

 

medani_bigCartel1

quelle: bigcartel shop

bigcartel Shop

Anders ist es beim bigcartel Shop. Hier verschmilzt die Inszenierung der Corporate Identity mit dem Webshop. Man sieht großflächige Fotos von Models mit Schlamm auf den Händen. Daneben Ausschnitte von Kleidungsstücken auf weißem Hintergrund. Die One Page Navigation ist dabei so gestaltet, dass die Bereiche zwar getrennt wahrzunehmen sind, die Inhalte aber gleichzeitig verschmelzen. Dadurch wird im Betrachter viel stärker als in anderen Webshops das Gefühl für die Corporate Identity der Marke vermittelt als in anderen Webshops.

Dass sich diese Art von Webshop besonders für eine geringe Anzahl von Produkten eignet, ist deutlich. Denn hier findet man sich nach einigen Sekunden bereits gut zurecht. Wären mehr Produkte und Kategorien unterzubringen, wäre dies hier neu zu lösen.

Fazit: sehr gut geeignet, um die Persönlichkeit des Kunden konsequent herauszuarbeiten. Bietet sich für kleinere Produktangebote an.

 

In unserem nächsten Artikel präsentieren wir weitere Beispiele von gelungenem aktuellem Webshop-Design. (Flug Zeug, Shoe Guru, Canvasco, MyOwnBike) 

Webdesign Trends 2014 – Teil 2

11. November 2013

4) Photographic Web / Videographic Web

 

 

Aktuell gibt es jede Menge Websites, die bildschirmfüllende Top aufgelöste Bilder oder auch Videos verwenden. Weil die Datenübertragung immer schneller wird, sind lange Ladezeiten dabei weniger ein Thema als bisher. Die Mode- und Designbranche freut sich darüber besonders. Denn Fotos können jetzt für sich sprechen und Websites werden immer mehr zu hochqualitativen E-Mags. Dass 2014 dieser Trend weiterhin aufblühen wird, ist uns klar!

 

 

medani_Diesel4

quelle: Diesel

 

 

DIESEL

Diesel verwendet in seiner aktuellen Homepage einen visuellen Katalog, der hochaufgelöste Bilder gekonnt inszeniert. Hier können wie als ob man sich direkt im Geschäft befindet, Taschen vergrößert werden. Gekonnt ist dabei die perfekte gestochen scharfe Qualität der Bilder und Videos! Sehen Sie selbst. 

 

 

medani_PeopleMartinLifkaPhotography4

quelle: Martin Lifka Photography

 

 

MARTIN LIFKA PHOTOGRAPHY

Auch medani lässt Bilder für sich sprechen und hat für den Fotografen Martin Lifka eine fotobasierte Full Screen Website produziert. Durch ein bildschirmfüllendes Navigationskonzept werden in einem WordPress basierten CMS die tollen Fotos des Fotografen gekonnt inszeniert.

 

 

medani-web-und-design-artikel6-bild8

quelle: Life According to Sam

 

 

LIFE ACCORDING TO SAM

Auf dieser Website des Films Life According to Sam ist die Besonderheit ein bildschirmfüllendes Video, das im Hintergrund ästhetisch top die Inhalte untermalt. Dass das photographic Web immer mehr zum videographic Web werden wird ist anzunehmen. Ein gelungenes Beispiel sieht man hier.

 

 

 5) Ecommerce

 

 

Dass Ecommerce auch 2014 im Web weiterhin große Relevanz haben wird, und seine Verbreitung weiterhin steigen wird, zeigte bereits unser Artikel Ecommerce im Vormarsch – Der Handel im Wandel. Ecommerce Websites aus der Designperspektive optimal ästhetisch zu gestalten, wird auch 2014 weiterhin eine Herausforderung sein. Denn Ecommerce Sites sind ja generell sehr informationsintensiv und die Darstellung der Inhalte muss deswegen optimal organisiert werden. Zusätzlich soll natürlich das persönliche Corporate Design des Shopbetreibers eindeutig kommuniziert werden. All diese Punkte im Design optimal und innovativ zu verankern, ist 2014 bestimmt ein äußerst wichtiger Trend.

 

 

6) Off Canvas

 

 

Ein Trend, der 2014 weiterhin stark zunehmen wird, ist Off Canvas. Dieser Trend bedeutet Inhalte teilweise außerhalb des Screens zu platzieren, um sie bei Bedarf einzublenden. Der Trend entsteht durch die Anforderung Inhalte gleichzeitig für mobile Geräte, überdimensionale Desktop Monitore und auch Touch Screens in unterschiedlichsten Bildschirmgrößen und Formaten zu optimieren. Damit steigt auch die Anforderung alle Inhalte übersichtlich und platzsparend aufzubereiten und zu platzieren.

 

 

Genau hier kommt der Off Canvas Designtrend ins Rennen, den es in einer einfachen Variante bei mobilen Geräten schon seit einiger Zeit gibt: Menübereiche werden hier Off Canvas gestellt und erst bei Betätigung eines Buttons eingeblendet. Sehr gängig ist hier zum Beispiel ein minimalistischer dreifach gestrichelter Button, der bei Klick ausgeklappt werden kann.

 

 

Zusätzlich wird diese Funktion aber auch vermehrt in einer komplexeren Form an anderen Stellen eingesetzt. Für das Design hat das den Vorteil, dass sehr reduziert gearbeitet werden kann und viel Freiraum bleibt, weil es so nicht mehr notwendig ist, alle Inhalte auf dem Screen unterzubringen. So können Bilder stärker wirken, und die Typografie kann für sich sprechen. Und oft erzeugt man mit dem gezielten Ein-und Ausblenden von Ebenen regelrechte Wow-Effekte.

 

medani_DadaabStories

quelle: Dadaab Stories

 

 

DADAABSTORIES

Ein sehr gelungenes Beispiel von On Screen / Off Screen Design ist die Website www.dadaabstories.org. Hier wird der gesamte Blogbereich im unteren Bereich des Screens außerhalb des Bildschirms platziert. Der Blogbereich wird erst eingeblendet, wenn man den entsprechenden Button klickt. Das ist ein großer Vorteil für die Suchmaschinenoptimierung, weil so eine äußerst große Menge von suchmaschinenrelevanten Informationen auf der Startseite platziert werden kann, und gleichzeitig eine klare, reduzierte und für sich sprechende Full Size Startseite möglich ist.

 

 

medani web und design - orange 2

quelle: Orange History

 

 

ORANGE HISTORY

Auf der Website Orange History, die wir in Teil eins bereits genannt haben, ist der Effekt sehr gut erkennbar. Hier bekommt man im Bereich „Full History“ eine weitere Menüebene, in der man durch Kategorien Inhalte filtern kann. Sie wird über einen dezenten Button am rechten Bildrand geschickt ausgeblendet. Die minimalistische Seite kann für sich sprechen.

 

 

medani_Goodweb2

quelle: WordPress GoodWeb Theme

 

 

WORDPRESS GOODWEB THEME

Auch WordPress Themes, wie das GoodWeb Theme verwendet Off Canvas Design auf unkonventionelle Art. Denn hier wird das Menü nicht nur auf mobilen Geräten ausgeblendet, sondern auch auf großen Desktop Monitoren. Der Vorteil ist dabei, dass man eine komplexe Menüstruktur platzsparend einsetzen kann. Der Nachteil ist, dass die Menü-Hauptrubriken nicht immer sichtbar sind, was eine erhöhte Aufmerksamkeit zum Navigieren voraussetzt.  

 

 

Quellen

http://www.cssdesignawards.com/

 

Webdesign Trends 2014 – Teil 1

31. Oktober 2013

Heute ist der 31. Oktober 2013. Dass sich zu diesem Zeitpunkt bereits mehrere Personen mit den Webtrends des kommenden Jahres auseinandergesetzt haben, ist klar. Zum Beispiel wenn man bedenkt, dass auch heuer wieder Weihnachten bereits im Oktober vor der Tür steht. Denn wo dort die Schaufenster in glitzernder Pracht zu sehen sind, florieren auch im Web äußerst attraktive Zukunftsvisionen für die Zeit nach Weihnachten 2013, und besonders die Webdesign Trends für das Jahr 2014.

 

 

Zum Beispiel in einer Vielzahl von Blogartikeln auf Designplattformen, wo man als Ankündigung für das Jahr 2014 Begriffe wie „flat design“, „one page“, „full width screen“, „parallax“, „responsive“, „single page“,  „story-telling“, „neon“, „retina ready“, „clean“, „infinite scroll“ oder „big background images“ findet. Welche Design-Webtrends wir 2014 besonders angesagt finden, zeigen wir hier!

 

 

medani web und design - Dole Earth

quelle: Dole Earth

 
 

1) Storytelling im Web und seine vielfältigen Möglichkeiten   

 

 

Die heuer besonders aktuell gewordenen One-Page Navigationsstrukturen und die Möglichkeit bildschirmfüllend Bilder und auch Videos im Web einzubinden, hat einen Hype florieren lassen, der auch 2014 weiterhin en vogue sein wird: das Storytelling.

 

 

Storytelling bedeutet, wie der englische Name zeigt, Geschichten erzählen. Geschichten zu erzählen ist an sich in der Medienbranche nichts Neues: Sie sind seit Jahrzehnten die Basis für erfolgreiche Werbefilme,  Print Werbekampagnen, Adventure Games oder auch illustrierte Animationsvideos, die in den letzten Jahren verstärkt ins Web eingebunden werden. Aktuell aber werden Stories verstärkt auch direkt im Web erzählt. Oder anders ausgedrückt: Texte, Bilder, Animationen und Videos werden im Web durch intelligente Navigationsstrukturen so eingebunden, dass Werbefilm- oder Bildgeschichten- ähnliche Stories damit erzählt werden, die auch noch den Vorteil haben, dass man die Lesegeschwindigkeit und die Tiefe der Informationen selbst bestimmen kann, indem man schneller oder langsamer zum nächsten Abschnitt scrollt, oder sich in bestimmte Informationen mehr vertieft als in andere.

 

 

Dass es dabei unendlich viele Möglichkeiten gibt, ist eine Freude für Webdesign-Agenturen wie medani und auch besonders für Kunden, da es ein großes Pool an Möglichkeiten gibt, die speziellen Stärken und Qualitäten eines Unternehmens kreativ und verständlich herauszuarbeiten. Vier Beispiele von erfolgreichem Storytelling sind uns bei medani besonders aufgefallen.

 

 

Dole Earth

Diese Website überzeugt besonders durch ihren gekonnt inszenierten Realitätsgrad und die vielen Möglichkeiten zur Interaktivität, die sie dem Benutzer bietet. Denn hier kann man sich aus der Perspektive eines Besuchers durch die Landschaft einer Bananenplantage bewegen. Man ist umgeben von Büschen, Häusern, Werksgebäuden und Menschen und kann wie in einem Adventure Game da anhalten wo man mehr erfahren will. An einer Stelle zum Beispiel trifft man auf einen Plantagenarbeiter, der am Wegrand steht. Klickt man auf sein Bild, öffnet sich ein Video, in dem die gleiche Person über ihren Alltag auf der Plantage erzählt. An einer anderen Stelle erfährt man weitere informative Details über die Arbeit in der Plantage. Zusätzlich gibt es eine Landkarte, die man an jeder Stelle der Website einblenden kann, und die Orientierung auf der Plantage zum Adventure Erlebnis macht und an eine alte Landkarte einer Piratengeschichte erinnert. Dass dabei die Corporate Identity von Dole optimal herausgearbeitet wurde, und bei diesem Web-Erlebnis mitvermittelt wird, ist ein weiterer Pluspunkt dieser Arbeit. Unser Prädikat: sehr gelungen! Bild dazu: siehe oben. 

 

 

medani web und design - KITKAT

quelle: Kit Kat

 

 

KitKat 4.4

In dieser Website hat KitKat alle Hebel gedreht, um dem Besucher das Wasser im Mund zusammenlaufen zu lassen. Denn die einzelnen Abschnitte der Seite, die durch eine beschauliche One-Page Navigation verbunden werden, zeigen in Animationen leckere Ausschnitte vom Weg eines verpackten KitKats in den Mund eines Menschen, und das, allein durch gekonnt eingesetzte animierte Produktbilder. Navigiert man auf der Seite von oben nach unten, schlüpft das KitKat aus der Verpackung, enthüllt sein Waffelinnenleben und verkleinert sich durch menschliche Bissspuren, wie man sie zum Beispiel vom Apple Logo kennt. Durch ein dezentes aber stilvolles Bröselmenü auf der rechten Bildschirmseite, kommt man wieder zu den einzelnen Szenen. Unser Eindruck: köstlich!

 

 

medani web und design - orange 2

quelle: orange history

 

 

orange history

Die Marke Orange hinterlässt mit einem gelungen Beispiel von zukunftsträchtigem Webdesign einen gekonnten Abschiedsgruß: eine minimalistisch designte Timeline mit den geschichtlichen Entwicklungen der Telekombranche, von der ersten Telegrafennachricht 1794 bis zu den letzten Entwicklungen von Orange vor der Markenübernahme durch drei. Besonders ist hier die minimalistisch designte Navigationsstruktur auf der rechten Seite des Screens. Unsere Meinung: vertrauensbildend und gekonnt inszeniert!

 

 

medani web und design - Wildlife

quelle: Wildlife

 

 

Wildlife

Basiert auf Fotocollage- und Vektorgrafik-basierten Illustrationen, bewegt man sich hier als Astronaut mit einer gekonnt platzierten One-Page Navigation durch eine bizarre Weltraumlandschaft in der in Mitten von Raketen, Astronauten und Planeten die persönlichen Services, Leistungen und Klienten der Design-Agentur, die sich auf dieser Website präsentiert, inszeniert werden. Überdimensionale Fonts und plakativ gesetzte Grafiken, die teilweise durch Animationen wie im Weltraum schwebend bewegt werden, erzeugen beim Wandern von Kapitel zu Kapitel ein Gefühl, als ob man sich Mitten in einem Science Fiction Roman befinden würde. Unsere Meinung: mutig, neuartig und abenteuerlich!

 

 

2) Individualisiertes Flat Design

 

 

Dass Flat Design auch 2014 weiterhin die vorherrschende Designsprache bleiben wird, liegt auf der Hand, denn dieser Designhype befindet sich auch Ende 2013 noch in voller Blüte. Was in Zukunft hier aber immer mehr zum Thema werden wird, ist, neue Arten zu finden, Websites die mit Flat Design gestaltet sind von anderen abheben. Denn Flat Design ist wie bereits in unserem Artikel über dieses Thema beschrieben, durch seine reduzierte zweidimensionale Farb- und Formenwelt stärker eingeschränkt als andere Designsprachen. Legen wir diesen Gedanken um auf die zukünftigen Entwicklungen, wo immer mehr Webpages Flat Design verwenden werden, wird es 2014 immer mehr eine Kunst einzigartig zu sein und in Erinnerung zu bleiben. Welche Möglichkeiten es dafür gibt, haben wir bereits in unserem Artikel Flat Design beschrieben.

 

 

3) One Page Design

 

 

Eine Tendenz, die sich 2014 weiterhin stark entwickeln und verbreitern wird, ist das One-Page Design, das oft anderen Trend wie dem Storytelling als Basis dient. Auch diesen Trend haben wir bereits ausführlich in einem unserer Designartikel beschrieben, nämlich in unserem letzten, wo es um schicke Effekte mit CSS3 und HTML5 geht. Hier haben wir One-Page Websites unter die Lupe genommen und gezeigt, was besonders zielführend ist, um die richtige Mischung aus gutem Design und Benutzerfreundlichkeit zu erzeugen.

 

 

Was an dieser Stelle zusätzlich interessant ist, ist, dass es sich hier wieder zeigt, wie stark technische Neuerungen und Designtrends in Verbindung stehen. Denn der One-Page Hype basiert wiederum auf den technischen Möglichkeiten von HTML5, CSS3, Ajax und Java Script, mit dem diese neuen Navigationsstrukturen möglich geworden sind. Lesen Sie mehr zum One Page Design in unserem letzten Artikel, hier.

 

 

Weitere Webtrends für 2014 folgen nächste Woche im zweiten Teil dieses Artikels: On/Off Canvas, Ecommerce und Photographic Web.

 

 

Webdesign: Schicke Designeffekte mit HTML5 & CSS3 – Teil 2

25. Oktober 2013

One Page Websites und die Kunst Usability und gutes Design optimal zu kombinieren

 

 

Durch die Möglichkeit mit CSS3 und HTML5, Java Script und Ajax div-Elemente auf unzählige Arten zu animieren, haben sich Navigationsstrukturen entwickelt, die in dieser Art neuartig sind. Ein aktuell sehr verbreitetes Beispiel davon sind One-Page Websites, die auf einer einzigen Seite aufgebaut sind. Navigiert man über die Inhalte, bewegen sich die sichtbaren Teile der Seite klassischerweise nach oben und unten, so dass der gewählte Ausschnitt im Zentrum ist. Auch wenn tolle filmartige Effekte durch die Bewegungen entstehen, ist es eine Kunst – was die Benutzerfreundlichkeit angeht – die Gratwanderung zwischen klar und verwirrend, zwischen hip und undurchsichtig, zu Gunsten von Design UND Userfreundlichkeit zu entscheiden.

 

 

Dabei ist es eine Kunst, die Informationen so zu platzieren, dass das Design ästhetisch wirkt, alle Inhalte verständlich organisiert werden, und man sich im wunderbar rollenden Screen gut zurechtfindet. Dass es dabei einige sehr gelungene Beispiele gibt, zeigen wir hier.

 

 

medani-web-und-design-artikel6-bild5

quelle: Whole World Water

 

 

Die Website der Kampagne Whole World Water besticht durch äußerst elegantes, zeitgemäßes und reduziertes Design. Gleichzeitig kann trotz einer relativ großen Menge von Inhalten die Orientierung bewahrt werden. Dies liegt vor Allem daran, dass die Headerelemente so lange am oberen linken Bildrand bleiben, bis das Kapitel endgültig wechselt. Auch die auffällige groß gesetzte Typografie wirkt als Orientierungsmerkmal.

 

 

medani-web-und-design-artikel6-bild6

quelle: Joseph Brot vom Pheinsten

 

 

Trotz der vielfältigen Informationen, ist diese äußerst ästhetische und sympathische Wiener Website der Bäckerei Joseph Brot durch das fixe Menü im oberen Bereich durchwegs klar überschaubar. Die große gut gesetzte Typografie, die sich auf allen Seitenteilen als grafisches Kernelement durchzieht, gibt dabei auch hier Orientierung. Persönliche Atmosphäre schaffen auch die Hintergrundbilder, die Brotkrümel, die als Backgroundelemente jedem Teilbereich einen weiteren persönlichen Touch geben. Die Seite wird übrigens von webfeuer, unserem Social Media Partner betreut.

 

 

medani-web-und-design-artikel6-bild7

quelle: bigcartel

 

 

Diese One-Page Website des Labels bigcartel arbeitet mit sehr reduziertem Design und hat auch einen kleinen integrierten Webshop. Plakative aussagekräftige Fotos und geschickt platzierte grafische Icon- und Typografie Elemente erzeugen ein schönes Gesamtwerk, das durch Zen-artige Ruhe und präzis pointierte Blickfänge besticht. Die Orientierung wird durch dezent gesetzte Navigationselemente erleichtert, wie etwa Pfeile und Buttons.

 

 

medani-web-und-design-artikel6-bild8

quelle: Life According to Sam

 

 

Auf dieser Webpage für den Feature Film Life According to Sam liegt die Besonderheit in der Platzierung der Inhalte, sie scrollen nämlich von allen Seiten, auch schräg und horizontal. Wegen dem schlichten reduzierten Design, in dem stark mit plakativen Bildern und feinen Textelementen und auch mit viel Freiraum gearbeitet wird, bleibt die Navigation trotz den extravaganten Platzierungen relativ überschaubar. Die Seite überzeugt auch durch ihr tabletfreundliches und platzsparendes Menü, das sich per Klick ausbreitet und wieder einzieht.

 

 

100% CSS basierte Icons

 

 

Die Zeiten sind vorbei, als Pixelbild basierte Icons bei geringer Vergrößerung der Bildschirmauflösung verpixelt dargestellt wurden. Heute gibt es neben Icons die als Webfonts geladen werden und damit beliebig skaliert werden können, auch andere die zu 100% mit CSS direkt “gezeichnet” werden. Das ist möglich, seitdem mit CSS auch geometrische Formen direkt dargestellt werden können, ohne auf Grafiken zurückgreifen zu müssen.

Neben klassischen Dreiecken, Quadraten und Herzen, mit denen diese Funktion gestartet ist, sind aktuell durch die ehrgeizige Feinarbeit von unzähligen Webdesignern und Entwicklern auch sehr komplexe stilvolle Formen möglich. In der Galerie one-div gibt es eine Vielfalt von gelungenen Beispielen, die teilweise auch animiert sind!

 

 

medani-web-und-design-artikel6-bild1

quelle: one-div

 

 

medani-web-und-design-artikel6-bild4a

quelle: peculiar

 

 

medani-web-und-design-artikel6-bild3

quelle: doug neiner

 

 

Quellen

http://www.cssdesignawards.com/

http://www.1stwebdesigner.com/css/css-icons-logos/

Webdesign: Schicke Designeffekte mit HTML5 & CSS3

17. Oktober 2013

Einleitung

 

 

Die kreativen Möglichkeiten im Webdesign haben sich in den letzten Jahren explosiv durch die technischen Fortschritte von HTML5 und CSS3 verbeitert. HTML5 ist dabei inzwischen Standard und CSS3 wird so häufig eingesetzt, dass es zumindest inoffizieller Standard ist. Wir zeigen hier eine Auswahl von interessanten CSS3 Effekten, die das Arbeiten mit dem Web auf ein Neues – und wieder einmal in der Geschichte des Webdesigns – besonders spannend machen!

 

 

Animierte Infografiken

 

 

Durch die Möglichkeiten mit CSS3 komplexe Formen zu zeichnen und mit dem Bildformat .svg auch größenunabhängige Vektorbilder in Websites einzubinden, ergeben sich auch für interaktive Grafiken Neuerungen. Besonders zu Gute kommen diese technischen Erweiterungen nämlich informationsintensiven Websites, die durch Informationsgrafiken benutzerfreundlicher werden.

 

 

Weil Infografiken nun sowohl direkt mit CSS auf und für den Screen gezeichnet werden können und vektorbasierte .svg Bilder Pixelbilder ersetzen, gibt es keine Grenzen was die Bildschirmauflösung der Bilder betrifft. Grafiken können damit in unzähligen Geräten Retina ready (hochauflösend auch in starker Vergrößerung auf kleinen Screens) perfekt dargestellt werden. Es gibt keine ausgefransten Kanten mehr, sondern schmeidige Linien, Ecken und Kurven.

 

 

medani-web-und-design-artikel5-Bild1

quelle: the guardian

 

Auch in aktuellen WordPress Themes werden animierte Infografiken eingesetzt, wie zum Beispiel im Theme Bee.

 

 

Button Transitions

 

 

Was bis vor kurzem schwer ohne Flash im Web möglich war, kann jetzt auch auf andere Art realisiert werden. Buttons bleiben nicht länger statische zweidimensionale Boxen, die beim Mouse Over die Farbe verändern. Was mit CSS möglich ist, zeigen wir hier. Geht man auf dieser Seite mit der Maus auf einen Textlink (hier in rot), wird dieser in der Desktop-Ansicht  mit einem auffälligen Roll Over Effekt herausgehoben. Unsere Meinung: Sehr schick!

 

 

medani-web-und-design-artikel5-bild1a

quelle: webdesignerdepot

 

 

Markante Artikel-Überschriften strukturieren die schlicht gehaltene Seite grafisch. Die eingebundene Animation sorgt für den Wow-Effekt.

 

 

medani-web-und-design-artikel5-bild1b

quelle: elmastudio / sam brown

 

  

Die Kategorie-Buttons werden hier mit diesem Transition Effekt wie eine Filmklappe von links unten nach rechts oben bewegt. Außerdem werden die Portfolio-Felder darunter wie mit Kaleidoskopen bewegt. Beide Effekte sind alleine mit CSS hergestellt und verzichten zur Gänze auf Javascript oder Ajax.

 

 

medani-web-und-design-artikel5-bild3

quelle: cssdesignawards / trama

 

 

Bewegt man die Maus über das Home-Logo, legt das runde Logo eine 360° Umdrehung zurück. Auch dass die Bilder bei Mouse Over smooth vergrößert werden, ist ein mittlerweile schon sehr verbreiterter Effekt, der ebenfalls der Buttons Transition Effekte von CSS zu verdanken ist.

 

 

medani-web-und-design-artikel5-bild5

quelle: webdesignerdepot

 

 

 

Quellen:

 

1) http://www.elmastudio.de/

2) http://www.the-webdesign.net/

3) http://www.cssdesignawards.com/

 

 

  • Dr. Rainer Grass: „medani web & design stand mir in höchst professioneller Weise bei der Planung und Umsetzung meiner Homepage zur Seite. Individuelle Beratung, hohe Qu...
Kundenlogo: Kuenstlerbuero Kundenlogo: Flugzeug Kundenlogo: Anna-fine-web Kundenlogo: Musikverein
Facebook Logo Twitter Logo Tupalo Logo Yelp Logo
office@medani.at | +43 1 95 787 40