medani web & design wien Logo
 

Kategorie "Allgemein"

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”

 

 

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

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.

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/

 

 

PrestaShop 1.6 Vorschau

3. Oktober 2013

Alles neu macht der Mai? Bei PrestaShop beginnt der Frühling diesmal etwas früher.

 

Mit der kommenden Version der Nr. #1 Online Shop Software wird vieles aus einem neuen Blickwinkel betrachtet. Hauptaugenmerk bei der kommenden PrestaShop 1.6 Version ist dabei vor allem die mobile Nutzung. So spendiert PrestaShop nicht nur ein neues auf Twitter Bootstrap basierendes responsive Standard Template, sondern bringt auch eine komplett neue Verwaltungsoberfläche. Auch das neue Backend wird responsive und damit mit mobilen Geräten gut bedienbar.

 

Zusätzlich wurde die Usability wieder um 2 Stufen erhöht und auch die Performance verbessert. So tut sich nicht nur unter der Haube des beliebten Online Shop Systems einiges. Einen kleinen Eindruck in die nächste Generation der Online Shop Software PrestaShop gab es kürzlich auf der E-Commerce Messe in Paris. Das dabei entstandene Preview Video wollen wir Ihnen natürlich nicht vorenthalten.

 

 

10 Jahre WordPress II – Hintergründe einer Erfolgsstory

1. Oktober 2013

[…] from the beginning I envisioned a structure where for-profit, non-profit, and not-just-for-profit could coexist and balance each other out. It’s important for me to know that WordPress will be protected and that the brand will continue to be a beacon of open source freedom […] Matt Mullenweg, 9. September 2010, 15:11

 

Die erste WordPress Version hatte nur 275 KiloByte, und wurde von Matt Mullenberg und Mike Little durch eine Weiterentwicklung einer Blogsoftware entwickelt. Der offizielle Geburtstag von WordPress ist der 27.5.2003.

 

WordPress-Counter

 

WordPress heute

Heute, 10 Jahre später, ist WordPress das meist verbreitete Content Management System (CMS) weltweit. Es gibt über 68 Millionen Installationen und es sind mehr als 1.800 freie Themes verfügbar. Namhafte  Firmen, Institutionen und Berühmtheiten wie die Rolling Stones, Sony, Adidas, CNN oder die New York Times verwenden heute für ihre Webseiten WordPress.

 

Eine vom WordPress Codex, der offiziellen Knowledge-Base der weltweiten WordPress Community, betriebene Seite dokumentiert die Anzahl der Downloads der aktuellen WordPress Grundinstallation WordPress 3.6, die als Grundlage für jede auf diesem System basierende Website dient. Dort verzeichnen sich am heutigen Tag  11.217.268 Downloads, eine bemerkenswerte Zahl, bedenkt man, dass diese Version erst am 1.8.2013 von WordPress veröffentlicht wurde.

 
 

Die Hintergründe

WordPress ist nicht ohne Grund so populär geworden wie es heute ist. Entlang der 10-jährigen Entwicklung sind viele Meilensteine und spezifische Qualitäten zu beobachten, die dieses System so besonders und beliebt machen. Wir wollen eine Auswahl von diesen hier zusammenbringen und diskutieren, da sie den besonderen Erfolg von WordPress verständlich machen.

 

Technologische und Konzeptuelle Meilensteine

Seit 2003 gab es immer wieder technologische Entwicklungen, die WordPress grundlegend verbesserten, und von einer einfachen Blogsoftware zu einem komplexen Content Management System ausreifen ließen. Es reicht ein kurzer Überblick über einige davon, die wir am wesentlichsten erachten:

 
  • 2004 WordPress 1.2: das  Pluginsystem wurde entwickelt. Ab diesem Zeitpunkt war es möglich unabhängige Zusatzmodule zur Standard-Funktionalität von WordPress dazu zuschalten, die die Möglichkeiten des Systems auf vielfältige Weise erweitern.
  • 2005 WordPress 1.5: Das WordPress Themesystem wurde integriert. Vordefinierte Designs, Funktionen und Inhalte können damit in wenigen Mausklicks in die eigene WordPress Installation integriert werden.
  • 2006: Das 1. WordCamp, das offizielle Treffen der weltweiten WordPress Community wurde veranstaltet. Hier kommen laufend eine Vielzahl von hochmotivierten Webentwicklern zusammen, deren gemeinsames Ziel es ist das Potenzial von WordPress zu erweitern.
  • 2007 WordPress 2.3: Widgets wurden integriert. Seither ist es möglich zusätzliche Inhaltsmodule zentral zu verwalten und auf verschiedenen Stellen der Website spielend leicht einzubinden.
  • 2009: Socialmedia-Features können durch die Einbindung von BuddyPress einfach integriert werden
  • 2011 WordPress 3.3: Ein gemeinsamer Medienuploader für alle Medien erleichtert die Verwaltung von Inhalten sehr
  • 2012 WordPress 3.5: der Medienupload wurde vereinfacht, die Darstellung auf mobilen Geräten wurde durch die Retina Darstellung optimiert
 

WordPress und seine intuitive Art

“Wir wollen, dass unsere Kunden die Werkzeuge, die sie von uns bekommen auch bedienen können.”
Omar Medani, medani gmbh

 

Dass WordPress so erfolgreich geworden ist, liegt auch an der intuitiven Benutzeroberfläche des Systems. Es verfügt über eine visuell sehr klar strukturierte Bedienoberfläche, die auch Personen, die wenig mit dem Computer arbeiten in wenigen Augenblicken verstehen. Die Editoren der Inhalte von Seiten und Beiträgen sind ähnlich wie verbreitete Word Editoren wie Microsoft Word zu bedienen. Auch Bilder können spielend leicht über Drag und Drop auf den gewünschten Stellen der Seiten positioniert werden. Die gute Bedienbarkeit wird laufend verbessert. In der Version WordPress 3.8. ist ein Front End Editor geplant, mit dem man direkt über die Oberfläche der Website Inhalte verändern kann, und nicht mehr über die dahinter liegende Verwaltungsoberfläche (Back End) arbeiten muss.

 

Auch die Verwendung von Themes (vordesignte Basis-Vorlagen mit integrierten Funktionen) erleichtern die Bedienbarkeit enorm. Dadurch ist es möglich in wenigen Stunden hochwertige und technologisch ausgefeilte Webseiten zu realisieren, die mit speziellen Kenntnissen von Design, HTML und CSS auch rasch für die individuellen Bedürfnisse von einzelnen Projekten adaptiert werden können.

 

Happy Birthday WordPress Teil III folgt in Kürze

Quellen

webdesigner 07-08/2013, s41
eldiario.es
WordPress notable Users
WordPress Codex download Counter
http://glueckpress.com/1692/wordpress-geschichten-anfang

 
 

Flat Design – Der Webdesign Trend 2013 und wie man Flat Design zielführend einsetzt

3. September 2013

Spätestens seit der Veröffentlichung des Microsoft Windows 8 Betriebssystems, das die langjährige Vorreiterrolle von Apple als die designaffine Benutzeroberfläche mit überraschend frischem Wind kontrastierte, ist der Begriff Flat Design in der Designwelt in aller Munde. Man muss diesen Begriff nicht kennen, um zu bemerken, dass in dem flächigen, minimalistisch designten und auf wenige Farbflächen reduzierten Betriebssystem Einiges grundlegend anders ist als bis dahin.

windows-oberflaecheapple-oberflaeche

Im Vergleich: Apple und Windows Benutzeroberfläche 2013. [quelle v.l. n. r. :  microsoft.com, apple.com]

Wie man dieser neuartigen Darstellungsform gegenüberstehen mag ist natürlich subjektive Geschmackssache. Trotzdem ist es äußerst interessant zu beobachten, dass sich diese Designrichtung 2013 wie ein regelrechtes Lauffeuer im Webdesign abgebildet hat. Wir wollen hier den Fragen nachgehen, was dieser Trend ist, warum er gerade heute in dieser Form erscheint, und ganz besonders, wie Flat Design zielführend für Kundenprojekte eingesetzt werden kann.

Was ist Flat Design?

Das englische Adjektiv flat hat in der deutschen Übersetzung zahlreiche Bedeutungen, die viel über den Begriff Flat Design aussagen: eben, flach, platt, breit, glatt. Aber auch kontrastarm, flau und sogar geschmackslos. (quelle: dict leo). Die ersten Begriffe beschreiben schön die formalen Eigenschaften dieses Designtrends, nämlich eine zweidimensionale und flächige Gestaltung, ebene und großzügige räumliche Gestaltung, die den Verzicht auf Verläufe und Imitationen des dreidimensionalen Raums erfordert. Klare detailarme Flächen, sowie einfarbige breite Farbflächen und Formen. Gerade im Webdesign ist dies sehr deutlich zu sehen. Waren bis vor Kurzem noch dreidimensionale Buttons mit aufwendigen Verläufen und erhabenem Aspekt am Puls der Zeit, auch bezeichnet als Skeuomoporhic Design, steht heute ein einfaches plakativ gefärbtes Rechteck mit einem einfachen Schriftzug. Wo auf der einen Seite ein Notizbuch mit möglichst realitätsgetreuen Lederimitaten, Nähten und Einschublaschen, die virtuelle PC Welt fast kitschig vertraut erscheinen lässt, steht heute ein abstrahiertes flächiges Konglomerat an aneinandergereihten Farbfeldern.

button-skeumoprhicbutton-flat

Im Vergleich: Button im Skeuomorphic Design (li) und im Flat Design (re)

Die weiteren oben genannten Begriffe kontrastarm, flau und geschmacklos, deuten ebenfalls auf wichtige Teilbereiche des Phänomens hin, die natürlich entstehen können, wenn zu viele klare Flächen ungeschickt kombiniert werden. Beim Design ist es wichtig, auch diese Punkte im Auge zu behalten, da gerade bei reduzierter Gestaltung besonderes Gespür und Know-how notwendig ist, um die richtige Wirkung zu erzeugen. Wie man Flat Design zielführend für individuelle Websites und Online Shops einsetzen kann, darauf gehen wir deshalb später noch intensiv ein.

Warum Flat Design gerade heute?

Zur Entstehung von Flat Design und dem Zusammenhang zur heutigen Zeit gibt es verschiedene Zugänge. Manche Autoren und Blogger setzen den Ursprung von Flat Design eindeutig mit Microsoft in Verbindung, und dessen Notwendigkeit sich visuell im Corporate Design der User Interfaces vom Zugpferd Apple zu unterscheiden, das mit dem Betriebssystem OSX den Trend zu dreidimensionalen durch Materialnachbildungen geprägtem Design und lebensnahen Imitaten von Gegenständen die Designwelt prägte. Dass Windows deshalb mit einer komplett anderen Ästhetik startete, ist hier eine plausible Erklärung. (quelle: webdesigner 7/8/2013, S6)

Ein weiterer Grund ist sicher die Notwendigkeit, die Darstellung des Designs, an die oft noch reduzierten Möglichkeiten der vielfältigen mobilen Geräte anzupassen. Fotorealistisches Design verlangt stets hochauflösende Bilder und Grafiken, die mühselig in verschiedenen Formaten designt und herausgerechnet werden müssen, um dann verpixelt auf dem einen oder anderen Gerät nach langer Ladezeit zu erscheinen. Hier ist Flat Design ein großer Fortschritt, da sich die klaren einfachen Formen mühelos an unterschiedlichste Formate anpassen lassen und auch auf kleinen Displays durch ihren plakativen Charakter gut zu sehen sind. Auch die Ladezeiten sind bei Flat Design eindeutig geringer, da Designs oft zur Gänze im CSS definiert werden können, und Grafiken wenn überhaupt nur sehr spärlich brauchen. Das bis dahin oft verwendete Skeuomorphic Design basiert auf hochauflösenden Grafiken. (quelle: webdesigner 7/8/2013, S28-29)

Ein weiterer Aspekt kann im kulturellen Zusammenhang gesehen werden, wenn man sich die globale Entwicklung der Städte, des Berufslebens und des Tagesablaufs von vielen Menschen betrachtet. Öffnungszeiten werden tendenziell länger, mehr Tätigkeiten werden generell in kürzerer Zeit realisiert, und mehr Menschen leben auf engerem Raum zusammen. Zwischen Geschwindigkeit und Bewegung ist Flat Design ein starker und erfrischender Kontrast und eine klare Antwort auf eine Gesellschaft in Veränderung.

Flat Design zielführend einsetzen

Damit Flat Design für Kundenprojekte erfolgreich eingesetzt werden kann, ist Feingefühl und Design Know-how nötig. Denn leicht kann die Gefahr bestehen, dass oben genannte unvorteilhafte Adjektive zur Realität werden.

Wichtig für eine positive Anmutung von Flat Design ist viel Raum rund um die farbigen Flächen herum. Viel Weißraum hilft, die flächigen alleine für sich stehende klaren Flächen aufzulockern und leicht zu machen, und insgesamt für eine freundliche Stimmung zu sorgen, die für das Corporate Design von vielen Unternehmen sehr wichtig sein kann.

Damit trotz der reduzierten Gestaltung für Individualität gesorgt ist, bekommt die richtige Wahl der Typografie einen hohen Stellenwert. Schriften besitzen für sich starke Aussagekraft, und diese werden, wie auch Designmagazine wie webdesigner oder screenguide, bestätigen noch stärkere Wirkung, wenn sie sich in einem derart reduzierten Raum befinden. Damit die besondere Identität Ihrer Firma trotz der minimalistischen Gestaltungsart eindeutig zu erkennen ist, empfiehlt es sich aussagekräftige Web Fonts zu verwenden, die diese Identität passend erzeugen.

wombats

Flat Design mit aussagekräftiger Typografie und gezielt eingesetzten Schattenbereichen
im medani Projekt Wombats.

Damit wichtige Schaltflächen und Inhaltsbereiche gut zu sehen sind, kann es durchaus zielführend wichtig sein an der einen oder anderen Stelle Schatten einzusetzen. Damit kann die Übersicht verstärkt werden, und dafür gesorgt werden, dass Buttons auch klar und schnell als solche erkennbar sind.

Bei Fotos empfiehlt es sich Tiefenschärfe gezielt einzusetzen. Damit kann die Eindimensionalität der flachen Formen mit der nötigen Tiefe kontrastiert werden. Ihre Bilder kommen hier noch besser zur Geltung, wenn sie nicht detailreich sind, sondern sich durch ein gelungenes Spiel von Tiefenschärfe ganz klar von den flachen Formen abheben und dadurch das Raumgefühl vergrößern.

Es ist zielführend, die Wirkung von Design auf jede Anforderung genau abzustimmen. Wir freuen uns, Sie hier beraten zu können und das passende Design für Ihren Unternehmenszweck mit Ihnen und für Sie zu erarbeiten.

medani ist PrestaShop Partneragentur

8. Mai 2013

medani web & design ist die erste Webagentur Österreichs, die für das französische Online-Shop System PrestaShop zertifiziert wurde. Daraus ergeben sich für unsere Kunden einige Vorteile.

medani web & design verwendet Olin – das neue Premium Naturpapier von Antalis

21. März 2013

medani web & design entwirft Printdesigns und ist dabei ständig auf der Suche nach optimalen Papieren für Geschäftsdrucksorten. Olin – das neue Premium Naturpapier von Antalis eignet sich hervorragend für sämtliche Printprodukte. Angefangen von Geschäftsdrucksorten wie Visitenkarten, Briefpapiere, Kuverts über Mailings bis hin zu Broschüren ist dieses Premiumpapier aufgrund seines großen Sortiments das passende Druckmedium.

Antalis, der führende europäische Papiergrosshändler, lanciert sein neues Premium Naturpapier Olin. Das umfassende Sortiment der neuen Papierlinie bietet optimale Druckeigenschaften, eine grosse Auswahl an Weisstönen, Flächengewichten und Oberflächenbeschaffenheiten sowie eine schöne Haptik und Optik. Das FSC-zertifizierte Naturpapier überzeugt zudem durch ein gutes Preis-Leistungsverhältnis.

Umfangreiche Produktpalette

Es handelt sich dabei um ein Premium Naturpapier mit besten Druckeigenschaften. Es ist in vielen verschiedenen Flächengewichten von 40 gm2 bis 400 gm2 erhältlich. Von 80 gm2 bis 150 gm2 ist es Preprint tauglich. Mit seinen fünf Weissnuancen (Absolute white, High white, Natural white, Cream, Ivory) deckt es ein breites Spektrum ab. Das Papier hat eine spezielleHaptik und ist in den drei Oberflächenstrukturen Smooth, Regular und Rough erhältlich. Es ist das derzeit kompletteste Premium Naturpapier auf dem Markt.

Gute Eigenschaften dank Eukalyptus

Mit dem aus Eukalyptusfasern gefertigten Papier können optimale Druckerzeugnisse erzielt werden. Die Farben leuchten kräftig, aber doch sehr natürlich. Zudem haben die Olin-Papiere eine gute Opazität (Lichtundurchlässigkeit).

Das ideale CI-Papier

Das Premium Naturpapier ist europaweit unter dem Namen Olin verfügbar, was insbesondere internationalen Unternehmen die Beschaffung vereinfacht. Das FSC-zertifizierte Papier eignet sich für sämtliche Printprodukte: Von Geschäftsdrucksachen über Mailings und Broschüren bis hin zu Beipackzetteln oder Büchern. Aufgrund seines breiten Spektrums sowie der schönen Optik und Haptik ist Olin als CI-Papier besonders geeignet. Zu den Papieren sind auch passende Briefumschläge erhältlich.

Olin ist per sofort exklusiv und weltweit bei Antalis verfügbar. Papiermuster können bei uns www.medani.at unter support@medani.at oder +43 1 95 787 40 angefordert werden.

Olin-Foto-Webseite

Newsletter – Künstlerbüro

24. September 2012

medani web & design hat für Künstlerbüro einen individuellen Newsletter designed. Das Künstlerbüro informiert  mit seinem aktuellen Weihnachtsnewsletter seine Kunden, dass es nur noch 99 Tage bis Weihnachten sind und für die diesjährigen Mitarbeiterfeste, Kundenveranstaltungen sowie Krampuskränzchen viele herausragende Musiker & Top-Entertainer bereit  stehen und über das Büro gebucht werden können. Weiters erinnert das Künstlerbüro  an die bevorstehenden Highlights der kommenden Herbst- und Wintermonate und gibt seinen Kunden einen erfrischenden “TV-Tipp der Woche”.

Detailseite

kb_nl

Flug Zeug – präsentiert sich mit einem neuen Webauftritt

medani web & design hat für das Unternehmen Flug Zeug eine innovative Webseite kreiert. Flug Zeug vereint außergewöhnliche Mode- und Designprodukte mit Airline-Touch und verbindet ganz im Zeichen des Vintage-Trends auf originelle Art und Weise Luftfahrt und Accessoires. Dabei werden Materialien aus der Luftffahrtindustrie am Körper getragen oder im eigenen Zuhause als Designmöbel in Szene gesetzt. Der User kann über den Onlineshop, die gewünschten Produkte auswählen und per Mausklick bestellen. Auf der Startseite werden die Produkte mit ansprechenden Fotos beworben. Die Kunden können Flug Zeug auch auf facebook finden und erhalten dort Updates zu aktuellen Produkten und Events rund um Flug Zeug.

Bei der Webseite von Flug Zeug kommt der Onlineshop PrestaShop zum Einsatz. Dieses Shopsystem verfügt über eine große Anzahl von Funktionen, eine einfache Handhabung viele Optionen & Tools für die persönliche Anpassung

.

www.flug-zeug.at

Projektbeschreibung

Flug zeug 1

Kolya v Somogyi goes online

21. September 2012

1342

Mit dem neuen modernen Webdesign der Webseite kann Kolya v Somogyi seinen Kunden die textilen Kostbarkeiten optimal präsentieren. Die User gewinnen über das Menü links einen guten Überblick über die Produktpalette des Unternehmens. Der Kunde findet alle wichtigen Informationen zu den Produkten bequem per Mausklick.

Bei Kolya v Somogyi´s Webseite kommt das CMS (Content Management System) WordPress zum Einsatz. Durch dieses Content Management System können die Inhalte der Webseite wie Artikel, Texte und Bilder bequem aktualisiert und erneuert werden.

Kunde:
Website:
Leistungen:
Umsetzung:

Flug Zeug – präsentiert sich mit einem neuen Webauftritt

20. September 2012


Flug zeug 1
Flug zeug 2
Flug zeug 4
Flug zeug 3



Das frische, jugendliche Design der Webseite von Flug Zeug soll junge Kunden ansprechen, die den Vintage-style der Accessoires von Flug Zeug schätzen. Die Produkte mit ihrem typischen Airline-Touch heben sich so von den Mitbewerbern deutlich ab. Beim Design der neuen Webseite wird mit einem ansprechenden Blauton gearbeitet der auch im Logo zu finden ist.

Bei der Webseite von Flug Zeug kommt PrestaShop – ein Online Shopsystem zum Einsatz. In diesem Onlineshop kann der User ganz bequem die gewünschten Produkte online bestellen.

Kunde:
Website:
Leistungen:
Umsetzung:

Mobiles Webdesign versus Responsive Webdesign

11. September 2012

Der US Präsidentenwahlkampf ist voll im Gange und wir erleben die öffentlichen Auftritte der beiden Kandidaten täglich mit. Während die beiden Kandidaten heiße Debatten führen, ist eine interessante Entwicklung der mobilen Webseiten Nutzung zu beobachten. Es zeigt sich, dass sich die beiden Kandidaten für zwei unterschiedliche Strategien entschieden haben. Während der republikanische Kandidat Mitt Romney mit seiner mobilen Website wirbt, hat sich der demokratische Barack Obama für eine Webseite mit responsive Design entschieden. Um festzustellen wie gut die beiden unterschiedlichen Webseiten funktionieren, bedarf es noch ein paar Fragen zu klären.

Warum spielen mobile Webseiten so eine große Rolle bei diesem Wahlkampf?

311 Millionen Menschen in den USA – die Hälfe der Erwachsenen – besitzen ein Smartphone. Dazu kommt, dass 28 % der Amerikaner in erster Linie über ihre mobilen Geräte ins World Wide Web gelangen. Somit bietet das mobile Internet eine große Chance für die Kandidaten eine breite Masse an Wählern zu erreichen und aus Internet-Usern auch Wähler zu machen. Es gibt heute bereits eine Vielzahl an Netzwerken über die potenzielle Wähler erreicht werden können. (Soziale Netzwerke, Email Kampagnen, SMS Kampagnen usw…)
Warum werden die Webseiten der Präsidentschaftskandidaten besucht?

Die Besucher suchen vordergründig Informationen über die Kandidaten, oder sie wollen mit Ihnen in Aktion treten. Dabei liest der User oftmals den Lebenslauf, die Hintergründe und die Einstellungen der Kandidaten weiteres interessieren sie sich auch für regelmäßige Updates und Blog Einträge. Die Kandidaten nutzen ihre offizielle Webseite auch dazu direkte Informationen bereitzustellen, die nicht über die Medien verzerrt wurden.

Der aktive User sucht Wege seinen Kandidaten bei der Wahl zu unterstützen. Dabei werden die Besucher der Seiten dazu aufgerufen Geld für die Kampagnen zu spenden, oder den Newsletter zu abonnieren. Aktive Benutzer wollen auch mit Ihrem Kandidaten über Soziale Medien in Kontakt treten, oder sie wirken oftmals freiwillig bei der Kampagne ihres Kandidaten mit.

Beurteilungskriterien: Layon´s Theorie der mobilen Motivation

Wie effektiv die Einflüsse von Romneys und Obamas Ansichten auf die bestehende Wirtschaft, Außenpolitik, Sozialpolitik und andere wichtige Bereiche sind, hängt von verschiedenen Kriterien ab. Kristofer Layon entwickelte dazu eine interessante Sichtweise, die auf die Maslowsche Bedürfnishierarchie aufbaut. Die Maslowsche Bedürfnispyramide ist eine sozialpsychologische Pyramide die menschliche Bedürfnisse und Motivationen beschreibt und diese zu erklären versucht. Herr Layon wendet die Maslowsche Theorie auf die Bedürfnisse der Mobile Web User an.

RWD_0080_pyramid

Bild: Pyramide 1

RWD_0079_pyramid-copy

Bild: Pyramide 2

RWD_0077_pyramid-copy-3

Bild: Pyramide 3

Zugriff:

An erster Stelle steht der reibungslose Zugang der User zum Internet. Das beste Webdesign bringt nichts, wenn der User die gewünschten Informationen nicht sehen kann. Bereits 28 % der US Amerikaner verlassen sich auf Ihre mobilen Geräte um ins Internet zu gelangen. Entscheidend dabei ist, dass der User findet was er sucht und die Informationsfülle nicht von seinem Gerät abhängt, sondern der Zugang zur Information von allen mobilen Geräten aus gleich gut ist.

Barack Obama

Barack Obamas mobile Webseite verfügt nicht über einen Link zu einer mobilen Version der Webseite, weil sie die gleiche Codebasis wie die Desktop Website besitzt. Bei einer responsive Website hat der User eine größere Change die gleichen Informationen wie auf der Website zu finden.

Mitt Romney

Bei Romneys Website werden die User über einen externen Link auf seine separate mobile Webseite verwiesen. Die mobile Website wurde von Designern unabhängig zur bestehenden Seite gestaltet und birgt einen wesentlichen Nachteil: Nur ein Teil der Informationen der originalen Webseite sind in der mobilen Version zu finden.

Es ist ein Mythos, dass der mobile Internetuser nicht Zugriff auf alle Information der Desktop Webseite über sein mobiles Gerät will. Wichtige Fragen können dabei unbeantwortet bleiben und zu Verwirrung führen. Ein weiteres Problem ist das URL Management. Desktop Webseiten und mobile Webseiten haben verschiedene URLs. Das kann dazu führen, dass die Weiterverlinkung nicht gut funktioniert. Desktop Webseiten und mobile Webseiten mit gleicher URL erleichtern dem User wesentlich den Zugang zu gewünschten Informationen, egal welches Gerät der User verwendet.

Interaktion:

Der problemlose Zugriff auf eine Website ist Grundvoraussetzung für den User. Was passiert wenn der User auf der Website ist? Der Besucher muss sich auf der Seite zu Recht finden und mit dem Inhalt interagieren können. Die Navigation, im Besonderen bei mobilen Geräten sollte einfach funktionieren, sodass der User findet was ersucht.

Barack Obama

Bei dieser Seite kommt eine „left fly-out Navigation“ zum Einsatz: die Navigation öffnet sich links oben, wenn der User mit der Maus über einen Menüpunkt fährt. Da die Navigation sehr komplex ist entstehen weitere Probleme: die Website funktioniert auf einer Vielzahl von mobilen Geräten nicht. Plötzlich hat die Seite gar keine Navigation mehr. Um diese Probleme zu vermeiden bedarf es neuer Techniken, damit die Seite gut funktioniert.

Mitt Romney

Die relativ simple Navigation von Romneys Webseite steht im großen Kontrast zur Navigation von Obamas Webseite. Die Navigation liegt wie ein Armaturenbrett über der Seite und verfügt dazu über einen „Back-Button“ um zur Startseite zurück zu finden. Die Nachteile bei dieser Seite sind der limitierte Zugang zu Informationen. Die Effektivität der Seite leidet sehr darunter, dass bei jedem Klick eine neue Seite aufgebaut werden muss. 

Scrolling:

Scrollen ist eine interessante Funktion bei mobilen Webseiten, damit der User schnellen Zugang zu den Informationen hat.

Mitt Romney

Die Webseite hat eine akzeptable Seitenlänge und der User findet ohne große Verwirrung die gewünschten Informationen, außerdem muss der User nicht viel scrollen, um zu finden was er sucht.

Barack Obama

Die Website von Barack Obama verfügt über eine große Fülle von Informationen. Die gesuchten Inhalte sind oft sehr weit unten auf der Webseite zu finden, wodurch die Seitenlänge extrem lang wird. Der User verliert völlig den Überblick und die Seite wird impraktikabel. Es folgen lange Ladezeiten und die Performance ist unzumutbar.

Leistung:

Die durchschnittliche Website hat 1 MB, wobei 71 % der User mobiler Webseiten eine gleichschnelle sowie schnellere Performance der mobilen Webseite erwarten. Ganze 75 % der User verlassen eine mobile Website, wenn diese mehr als 5 Sekunden zum Laden benötigt. Um festzustellen wie gut eine Seite funktioniert, gibt es das Tool „Blaze.io“ welches die Performance prüft.

Mitt Romney

Romneys Mobile Webseite hat 687 KB und lädt ca. 8,75 Sekunden. Trotz der 5 Sekunden Marke ist die Seite kleiner als die Durchschnittsseite.

Barack Obama

Obamas Mobile Webseite hat 4,2 MB und lädt ca. 25 Sekunden. Bei solchen Ladezeiten entstehen große Zugangsschwierigkeiten. Die Seite lässt sich kaum rendern, weil sie einfach zu groß ist.

Verbesserung mobiler Webseiten:

Mobile Kommunikation: Es gibt eine Menge Möglichkeiten zur Verbesserung des mobilen Webdesigns. Der User kann mit dem Klicken eines Links einen Anruf auslösen. Diese Funktionalität auf Obamas Website gibt dem User die Möglichkeit einen Anruf in seinem Namen zu machen.
Durch die Verbesserungen der Formulare bei HTML5 ist es möglich ein passendes virtuelles Keyboard darzustellen. Jede Form der Erleichterung der Funktionalität kann zu mehr Kommunikation führen.

Geolocation ist eine sehr bedeutende Funktion über die der User relevante Informationen beziehen kann. Bei Obamas Website können die Benutzer auswählen in welchem Staat sie leben. Vielleicht führt diese Funktion einmal so weit, dass sie eine Art Identifizierung des Users wird. Die Funktion erspart auch Schritte beim Ausfüllen von Formularen und erschließt neue innovative Funktionen.

Touch Events:

Das Schöne an den Touchscreens mobiler Geräte ist, dass sie uns die Möglichkeit bieten direkt mit Inhalten zu interagieren und zusätzlich Spaß machen. Es können ganze Bildergalerien durchsucht werden, oder ein Überblick über die Ansichten der Kandidaten gefunden werden.
Es gibt noch unzählige Möglichkeiten von Verbesserungsmöglichkeiten, wie beispielsweise die Archivierung von Offline Daten oder Funktionen mit denen die Touch Screen Events noch besser genutzt werden können.

Wer gewinnt die Wahl?

Nach der Analyse der beiden Webseiten kann man nur schwer sagen wer die Wahl gewinnen wird. Bei beiden Webseiten wurde viel Mühe investiert, die Seiten in ein mobiles Erlebnis zu verwandeln und sie mobilfreundlich zu gestalten. Es bedarf weiterhin einer stätigen Verbesserung der mobilen Webseiten, um den User besser mit Information zu versorgen. Während wahrscheinlich das Webdesign die Wahl der Kandidaten nicht entscheiden wird, beeinflusst das Webdesign wesentlich wie die beiden Kandidaten von der Wählerschaft wahrgenommen werden. Bei webaffinen Wählern könnten die Webseiten die Wahl der Kandidaten entscheidend beeinflussen.

Quelle:

http://mobile.smashingmagazine.com/2012/08/22/separate-mobile-responsive-website-presidential-smackdown/

1001ideen – Das Online Schmuckportal geht online

3. September 2012

1001ideen hat von medani web & design ein neues Werbegesicht erhalten. Mit zarten Pastellfarben und schönen Produktbildern präsentiert sich der virtuelle Online Schmuckshop. Die Seite gliedert sich in 3 Bereiche. Es gibt eine Shopping Area sowie einen Tailormade Bereich und dazu noch einen Top Event Teil. Der User kann ganz einfach in der Shopping Area und dem Tailor Bereich nach originellen Schmuckstücken suchen und diese online bestellen. Zu allen Schmuckstücken gibt es eine ausführliche Produktbeschreibung sowie mindestens zwei große Produktbilder, damit der Kunde die richtige Wahl treffen kann. Im Top Event Bereich werden aktuelle Veranstaltungen angekündigt um den User auf interessante Events aufmerksam zu machen.



www.1001ideen.at

Projektbeschreibung



1001ideen 1

Max & Moritz hat eine neue Webpräsenz

Die neue moderne Webseite gibt dem Besucher einen guten Überblick über die Vielzahl von Dienstleistungen, die von der Gebäudereinigungsfirma Max & Moritz angeboten werden. Die Menüführung der Webseite ist sehr User-freundlich gestaltet damit sich der Kunde leicht zu Recht finden kann. Im Mittelteil der Seite wird der Kunde über ansprechende Fotos zu den Dienstleistungen weitergeleitet. Diese werden dann im Detail beschrieben. Ein grüner kompakter Footer rundet die Webseite ab und gibt Ihr das frische Aussehen. Im Footer findet der User einen Lageplan sowie die Adresse der Firma.

 

 

www.max-moritz.at

Projektbeschreibung

 

Max und Moritz 1

My Drinks & Co geht online

31. August 2012

My Drinks & Co geht mit einem neuen eleganten Online Shop online. Der Getränkeanbieter, der sich auf hochwertige Produkte wie edle Weine, kaltgepresste Olivenöle und feine Fruchtsäfte spezialisiert hat, bietet seinem Kunden die Möglichkeit die gewünschten Artikel problemlos online zu bestellen. Der Kunde findet sich durch die übersichtliche Menüführung auf der neuen Webseite leicht zu Recht. Das Design der Webseite besticht durch seine schönen Landschaftsaufnahmen im Hintergrund und durch seine Produktbilder. Der Kunde findet über das linke Menü zu den Kategorien: Weine, Olivenöl und Fruchtsaft. Unter dem animierten Slider werden die einzelnen Produkte präsentiert und der Kunde wird zum Warenkorb weitergeleitet. Es besteht auch die Möglichkeit einen persönlichen Account anzulegen mit dem der Bestellablauf optimiert wird.



www.mydrinksandco.com

Projektbeschreibung



My Drinks & Co 1

Kundenlogo: Kahlenberg Kundenlogo: Anna-fine-web Kundenlogo: Editel Kundenlogo: Flugzeug
Facebook Logo Twitter Logo Tupalo Logo Yelp Logo
office@medani.at | +43 1 95 787 40