Webdesign | t3n News News, Infos, Tipps und aktuelle Artikel zu Webdesign 2014-04-06T08:11:31Z t3n Redaktion http://t3n.de/tag/webdesign SVGMagic: Automatischer SVG-Fallback für deine Webseite http://t3n.de/news/svgmagic-svg-fallback-out-of-the-box-535992/ 2014-04-06T08:11:31Z
SVG-Grafiken sind seit Responsive Webdesign und Retina-Display kaum hoch wegzudenken. Fall-Back-Lösungen sind jedoch ein hartes Stück Arbeit. Mit SVGMagic soll sich das ändern – wir zeigen euch w ...

SVG-Grafiken sind seit Responsive Webdesign und Retina-Display kaum hoch wegzudenken. Fall-Back-Lösungen sind jedoch ein hartes Stück Arbeit. Mit SVGMagic soll sich das ändern – wir zeigen euch wie.

SVGMagic: Fall-Back-Lösung für Browser ohne SVG-Unterstützung

Das SVG-Format hat in letzter Zeit ein wahres Comeback erfahren. Das teilweise für tot erklärte Vektor-Format erfreut sich spätestens seit Retina-Displays einer erhöhten Popularität, und auch für den Einsatz im als verlustfrei skalierendes Grafikformat sind SVG eine gute Wahl.

Wie bei vielen schönen Dingen im Web hat auch diese Technologie ihre Schattenseiten. Insbesondere der Support von älteren Browsern, aber auch einigen mobilen Plattformen, lässt hier zu wünschen übrig. Der technische und organisatorische Aufwand für Fallback-Lösungen überwiegt hier nicht selten die Vorteile, die mit dem Einsatz von SVG erzielt werden können.

Das jQuery-Plugin SVGMagic nimmt dir diese Probleme ab und leistet dabei ganze Arbeit. Es untersucht deine Webseite und liefert bei Bedarf vollautomatisch eine Fall-Back-Lösung für Browser ohne SVG-Unterstützung. Hierfür sammelt SVGMagic die URIs der SVG-Grafiken und sendet sie an eigene Server. Diese laden die Grafiken runter und erstellen PNG-Grafiken, deren URIs dann im Austausch an den Client zurückgeschickt werden.

SVGMagic Funktionsweise
SVGMagic untersucht deine Webseite und tauscht bei Bedarf SVG-Grafiken durch PNGs aus. (Grafik: SVGMagic)

Die verarbeiteten Grafiken werden auf den Servern von SVGMagic gespeichert, um später eine schnellere Verarbeitung zu ermöglichen. SVGMagic beschränkt sich dabei nicht nur auf Elemente im DOM, sondern kann zusätzlich Grafiken im Stylesheet deiner Webseite austauschen.

SVGMagic einbinden

Das Einbinden von SVGMagic ist äußerst simpel. Nachdem das jQuery-Plugin eingebunden ist, muss es beim Document-Ready-Event aufgerufen werden. Alles andere passiert automatisch.

$(document).ready(function(){
$('img').svgmagic();
});

Um Ladezeiten bei der Verarbeitung der SVG-Grafiken zu überbrücken, bietet das Skript zusätzliche Konfigurationsmöglichkeiten, wie das automatische Einbinden einer Preload-Grafik. Bei Bedarf kann sämtliche Kommunikation mit SVGMagic über https erfolgen.

$('img').svgmagic({
preloader: "/style/ajax-loader.gif",
secure: {true/false},
callback: placeTime
backgroundimage: true
});

SVGMagic ist eine sehr bequeme Lösung für Webworker, die den Aufwand eines eignen Fallbacks scheuen, aber dennoch nicht auf die Vorteile von SVG verzichten können oder wollen. Auf der offiziellen Webseite von SVGMagic kannst du dir selbst ein Bild von der Bibliothek machen. Eine ähnliche Lösung für automatisch generierte Responsive Images bietet dir Mobify.

]]>
Ilja Zaglov
iWork: Apple frischt Office-Suite für Mac, iCloud und iOS auf http://t3n.de/news/iwork-update-537560/ 2014-04-02T05:18:00Z
Der US-Technologiekonzern Apple hat sein hauseigenes Office-Paket iWork aktualisiert. Das Update umfasst unter anderem Veränderungen der Benutzeroberfläche und bringt eine Funktion zum Betrachten...

Der US-Technologiekonzern Apple hat sein hauseigenes Office-Paket iWork aktualisiert. Das Update umfasst unter anderem Veränderungen der Benutzeroberfläche und bringt eine Funktion zum Betrachten schreibgeschützter Dokumente mit.

iWork: Geschützte Dokumente lesen und Retina-Support

Am Abend hat neue Versionen seiner iWork-Apps für Mac-Computer, und iCloud bereitgestellt. Mit den Updates stehen Neuerungen sowohl für das Textverarbeitungsprogramm Pages, den Excel-Klon Numbers als auch das Präsentationstool Keynote in den entsprechenden App Stores gratis zur Verfügung. Erst vor einigen Monaten hatte Apple seine hauseigene Office-Suite mit einer neuen Optik und (umstrittenen) Funktionen überarbeitet.

iWork für Mac, iOS und iCloud gibt es jetzt in neuer Version. (Foto: Apple)
iWork für Mac, iOS und iCloud gibt es jetzt in neuer Version. (Foto: Apple)

Während Apple jetzt weitere kleine Änderungen an der vorgenommen hat, wurden die iWork-Apps vor allem um viele neue Funktionen ergänzt. Die wichtigsten: iWork-Dokumente können künftig auch dann von Nutzern freigegeben und von anderen gelesen werden, wenn sie schreibgeschützt sind – nur das Bearbeiten der Dokumente ist dann nicht möglich. Zudem unterstützt die browserbasierte iWork-Oberfläche jetzt die hochauflösenden Retina Displays.

Das ist neu in Pages, Numbers und Keynote

Wie den jeweiligen Updatebeschreibungen zu entnehmen ist, hat Apple auch seine Apps um eine ganze Reihe neuer Funktionen erweitert. So bietet Pages zum Beispiel fortan eine verbesserte Unterstützung für AppleScript, EPUB-Export und EndNote (inklusive Zitate in Fußnoten), eine optimierte Medienübersicht inklusive Suchfunktion und ein verbessertes Textfeldverhalten. Auch Formatierungen in Zusammenhang mit Stilen und Abschnitten sollen jetzt leichter zu Handhaben sein. Die Tabellenkalkulation Numbers kommt unter anderem mit neuen Druckoptionen und einer optimierten Kompatibilität zu Excel-Dokumenten daher. Das PowerPoint-Pendant Keynote hat Apple mit neuen Animationen und Übergängen sowie einer Unterstützung für animierte GIF-Bilder versehen. Die meisten Änderungen betreffen alle Plattformen, eine vollständige Liste ist immer in den Updatebeschreibungen im App Store zu finden.

Apple, Microsoft, Google: Der Kampf ums digitale Büro

Erst im Herbst hatte Apple seine lange stiefmütterlich behandelte iWork-Suite überarbeitet. So gab es nicht nur neue Apps für das Mac-Betriebssystem, sondern mit for iCloud auch erstmals eine entsprechende Weboberfläche. Damit schloss Apple zur Konkurrenz um Google und Microsoft auf, die solche Lösungen schon länger bieten. Anfang der Woche hat Microsoft hingegen seine Office-Suite für das iPad veröffentlicht. Nutzer hatten Apple damals für große Teile der Generalüberholung kritisiert, da der Konzern zahlreiche beliebte Funktionen in den iWork-Apps für OS X entfernte. Inzwischen hat Apple versprochen, das Feedback ernst zu nehmen und kontinuierlich neue Funktionen bereitzustellen.

]]>
Daniel Hüfner
Wenig Usability, mehr Werbung? Produkt-Designerin verteidigt neuen Facebook-Newsfeed http://t3n.de/news/facebook-newsfeed-design-layout-kritik-537078/ 2014-03-31T09:27:23Z
Wenig Usability, mehr Werbung? Das werfen Kritiker dem neuen Facebook-Newsfeed vor. Die Produkt-Designerin Julie Zhou verteidigt jetzt das neue Layout.

Wenig Usability, mehr Werbung? Das werfen Kritiker dem neuen Facebook-Newsfeed vor. Die Produkt-Designerin Julie Zhou verteidigt jetzt das neue Layout.

Facebook-Verantwortliche reagiert auf Usability-Kritik des neuen Newsfeeds

Der neue Facebook-Newsfeed. (Screenshot: Facebook)
Der neue Facebook-Newsfeed. (Screenshot: Facebook)

Seit einigen Wochen sehen sich viele Nutzer wieder einem veränderten Newsfeed-Design auf Facebook konfrontiert – selbstverständlich wurde seitdem nicht nur gelobt, sondern häufig auch Kritik an dem Redesign öffentlich. Einer dieser Kritiker ist der Blogger Dustin Curtis, der vorwirft, das vorherige Newsfeed-Layout der aktuellen Version zugunsten von Werbeeinnahmen abgewiesen zu haben. Curtis empfand die User-Experience bei dem Vorgänger als deutlich besser, da seiner Meinung nach sämtliche Informationen effektiver vom Nutzer auf einer Seite gescannt werden konnten. Der Blogger schrieb auf dcurt.is, dass die Seitenaufrufe durch das neue Layout in Mitleidenschaft gezogen wurden  –  Nutzer klickten weniger in andere Bereiche wie den Facebook-Pages oder -Events. Der damalige Newsfeed wurde eingestampft, weil er ganz einfach „zu gut funktionierte“.

„The new Newsfeed was performing too well.“ - Dustin Curtis

Facebook reagierte anschließend auf Kritiken wie diese, speziell aber auf die Vorwürfe von Dustin Curtis. Julie Zhuo, „Product Director“ bei Facebook, verteidigte auf Medium die Veränderungen. Laut Zhuo hätte der verworfene Newsfeed für einen gesteigerten Umsatz gesorgt, allerdings wurden besonders auf Bildschirmen mit geringer Auflösung einige Elemente nicht richtig angezeigt. Die Facebook-Mitarbeiterin sagt, dass beispielsweise bei älteren 10-Zoll-Netbooks viele Postings nicht vollständig sichtbar waren. Zumal fördere die aktuelle Version die Interaktionen unter den Nutzern – Bilder sind beispielsweise stärker hervorgehoben. Zhuo schreibt: „Das Design, das wir vor einem Jahr testeten, war für die Mehrheit der Menschen nicht besser.“

Facebook-Newsfeed: Auch der Algorithmus wurde verändert

Eine ganz andere Kritik, die im Zuge der Überarbeitung des Newsfeeds laut wurde, befasst sich mit der eingebrochenen Reichweite von Facebook-Pages. Der Newsfeed wurde nicht nur optisch angepasst, auch der Algorithmus hinter dem Bereich wurde verändert. Laut Facebook sollen Nutzer vordergründig qualitative Inhalte ausgegeben bekommen. Insofern setzen die Macher vor allem auf Nachrichten, anstatt auf unterhaltende Inhalte. Der Grund scheint klar: Seitenbetreiber sollen künftig mehr Geld in Anzeigen investieren.

via futurezone.at

]]>
Andreas Weck
Sticky Footer mit variabler Höhe im Responsive Webdesign? Kein Problem! http://t3n.de/news/sticky-footer-display-table-536687/ 2014-03-29T14:03:52Z
Einen Sticky Footer umzusetzen, ist nicht besonders schwierig. Kniffliger wird es, wenn er in einem responsiven Design verwendet werden soll. Wie ihr das einfach und mit wenig Code per display:table.. ...

Einen Sticky Footer umzusetzen, ist nicht besonders schwierig. Kniffliger wird es, wenn er in einem responsiven Design verwendet werden soll. Wie ihr das einfach und mit wenig Code per display:table löst, zeigen wir hier.

Normalerweise soll der Footer einer Website bei kurzen Inhalten am unteren Ende des Browserfensters kleben. Die passende Lösung dafür lautet „Sticky Footer“. Sie hält den Footer am unteren Browserfenster – ist der Inhalt länger, verhält er sich ganz normal und rutscht aus dem Sichtbereich.

Sticky Footer und Responsive Design? Normalerweise etwas schwierig

Bei den meisten Lösungen für dieses Problem muss der Footer eine feste Höhe besitzen. Das ist beim suboptimal und mit viel Probieren verbunden. Schrittweise wird getestet, wann der Footer andere Höhen braucht. Mit der CSS-Eigenschaft display:table lässt sich dieses Problem der Höhenanpassung elegant und ohne viel umgehen. Das HTML-Markup für den Inhalt sieht so aus:

<header class="page-row">
<h1>Site Title</h1>
</header>
<main class="page-row page-row-expanded">
<p>Page content goes here.</p>
</main>
<footer class="page-row">
<p>Copyright, Lorem ipsum dolor sit amet, consetetur sadipscing elitr, [...] Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</footer>

Der Code sollte selbsterklärend sein. Hier jetzt der CSS-Code:

html,
body { height: 100%; }
body {
display: table;
margin:0;
padding:0;
width: 100%;
}
.page-row {
display: table-row;
}
.page-row-expanded { height: 100%; }

Und das war's auch schon. Damit habt ihr eure Site mit einem Sticky Footer ausgestattet, der variabel in der Höhe ist. html und body werden auf die gesamte Höhe ausgebreitet, auch wenn es eigentlich zu wenig Inhalt gibt – soweit unterscheidet es sich nicht von anderen Lösungsmöglichkeiten. Im nächsten Schritt wird mit display:table für den body die Voraussetzung für den Trick geschaffen, der auf display:table-row basiert. Und jetzt wird es spannend:

Die drei horizontalen Inhalts-Level werden durch display:table-row zu Tabellenzeilen. Der Container, der eventuell zu wenig Inhalt für den Footer hat, bekommt über der Klasse .page-row-expanded eine Höhe von 100 Prozent. Und das ist der Trick: Dieser Inhaltscontainer nimmt sich jetzt den verbliebenen Platz der anderen Tabellenzeilen. Der Footer ist damit mindestens am unteren Ende des Viewports. Hier könnt ihr euch eine Demo anschauen.

Sticky Footer mit display:table – Das Beste: Der Browser-Support

Die Eigenschaft display:table ist schon ziemlich alt. Es gibt sie seit HTML 4.01. Dementsprechend gut sieht auch der Browser-Support aus. Es könnte nur Probleme geben, wenn ihr einen Internet Explorer unterstützen möchtet, der älter ist als Version 8. Eine noch kürzere Lösung für einen Sticky Footer mit variabler Höhe ist mit Flexbox möglich, dann allerdings mit schlechterem Browser-Support.

Was haltet ihr von dieser Lösung? Habt ihr vielleicht sogar eine noch bessere?

via galengidman.com

]]>
Florian Brinkmann
Responsive Webdesign: Browserunterstützung und Tools [t3n-Video-Workshop] http://t3n.de/news/responsive-webdesign-tools-browser-536196/ 2014-03-25T12:45:09Z
Heute führen wir auf t3n.de die Video-Serie weiter, in der wir euch in Zusammenarbeit mit Galileo Press Video-Workshops zu verschiedenen Themen für Webentwickler und Digitalarbeiter präsentieren... ...

Heute führen wir auf t3n.de die Video-Serie weiter, in der wir euch in Zusammenarbeit mit Galileo Press Video-Workshops zu verschiedenen Themen für Webentwickler und Digitalarbeiter präsentieren. Das heutige Thema: „Responsive Webdesign: Browserunterstützung und Tools”.

Die Media-Queries in CSS3 werden leider nicht von älteren Internet-Explorer-Versionen unterstützt. Im t3n-Video-Workshop erfahrt ihr genauer, welcher Browser was unterstützt. Außerdem gibt euch Trainer Peter Kröner mit an die Hand, womit bei älteren Browsern nachgeholfen werden kann. Weiterhin bekommt ihr allerlei Tipps zu anderen Helfern, die die Arbeit mit responsive erleichtern.

Noch mehr Video-Workshops

Noch nicht genug zum Thema Webentwicklung? Hier gelangst du zum letzten Teil unserer Serie. Darin bekommst du einen Einblick in Suchmaschinenoptimierung für WordPress.

html5-css3-trainingIn den nächsten Video-Workshops wird es um Themen aus den Bereichen WordPress, SEO und Facebook-Marketing gehen. Wer mehr zum Thema HTML5 & CSS3 erfahren will, der kann sich kostenfrei zum Beispiel knapp eine Stunde Videos aus dem Training (Affiliate-Link) von Peter Kröner anschauen.

]]>
Johannes Schuba
Wagtail: Flexibles Django-Open-Source-CMS mit Fokus auf Usability http://t3n.de/news/wagtail-flexibles-django-cms-534836/ 2014-03-17T14:46:14Z
Wagtail ist ein CMS, das auf dem Python-Framework Django basiert und den Fokus auf große und komplexe Webprojekte legt. Der Vorteil: ein CMS für den Inhalteersteller, das aber auch für Entwickler.. ...

Wagtail ist ein CMS, das auf dem Python-Framework Django basiert und den Fokus auf große und komplexe Webprojekte legt. Der Vorteil: ein CMS für den Inhalteersteller, das aber auch für Entwickler erweiterbar bleibt. Wir stellen es euch kurz vor. Es wird auch als das Python-Gegenstück zu Ruby on gehandelt: Django. Das mit geschriebene MVC-Framework wird unter anderem von Pinterest, Mozilla, der Washington Times und Instagram eingesetzt. Nicht zuletzt wegen der guten Eignung, komplexe Webprojekte umsetzen zu können. Genau auf diesen Zug springt ein neues auf, das neben bekannten Django-Größen wie Mezzanine oder Fein erstrahlen will: Wagtail.

Das Open-Source-CMS-Wagtail zeichnet sich durch gutes UI-Design und damit verbunden eine einfache Bedienung aus. Es ist voll responsive und somit auch geeignet, um Inhalte unterwegs zu kreieren. Möglich macht das ein ziemlich guter Inline-Editor, der euch das Erstellen und Editieren von Texten erleichtert – und genau da sieht Wagtail seine größte Stärke.

Dabei versucht Wagtail, die Besonderheiten, die große und komplexe Webprojekte mit sich bringen, zu bedienen. Durch die Verwendung von Django sind das Hinzufügen und die Eigenentwicklung von weiteren Features kein großer Aufwand – vor allem, da Wagtail mit dem Hingergedanken auf Weiterentwicklung spezifiziert wurde – hat sich Django doch gerade die Wiederverwendbarkeit auf die Fahne geschrieben.

Hinter dem CMS steht Torchbox, eigentlich eine Drupal-Agentur mit Sitz in England. Sie bietet auch ein Video-Showcase zur Webseite des „Royal College of Art“ an – realisiert mit Wagtail.

Ihr findet Wagtail natürlich auch auf GitHub.

Wie steht ihr zu CM-Systemen, die auf Python setzen? Habt ihr schon mal ein Django-CMS eingesetzt?

]]>
Mario Janschitz
t3n 100: Die 10 wichtigsten Köpfe in den Kategorien „Webdesign“ und „Webentwicklung“ http://t3n.de/news/t3n-100-10-wichtigsten-koepfe-533766/ 2014-03-17T12:31:39Z
In t3n 34 haben wir die 100 wichtigsten deutschsprachigen Köpfe im Web vorgestellt. Die jeweils zehn wichtigsten Personen aus den Kategorien „Webdesign und Frontend“ sowie „Webentwicklung“...

In t3n 34 haben wir die 100 wichtigsten deutschsprachigen Köpfe im Web vorgestellt. Die jeweils zehn wichtigsten Personen aus den Kategorien „Webdesign und Frontend“ sowie „Webentwicklung“ stellen wir euch jetzt vor.

Mit den t3n-100-Ranking zeigen wir auf einen Blick, wer die wichtigsten deutschsprachigen Treiber der Digital-Branche sind. Um dabei für Übersicht zu sorgen, ist das Ranking in zehn Kategorien mit entsprechenden Top-Ten-Rankings aufgeteilt. In jeder Kategorie finden sich zehn Köpfe, die aus dem deutschsprachigem Raum (Deutschland, Österreich und Schweiz) stammen. Hier stellen wir euch die Kategorien „Webdesign und Frontend“ sowie „Webentwicklung“ vor. In den nächsten Tagen veröffentlichen wir die weiteren Rankings auf t3n.de.

Webdesign und Frontend

1. Oliver Reichenstein

reichenstein-oliver

Er ist visueller Visionär und Gründer der Agentur Information Architects. Mit seinem minimalistischen Design beweist er nicht nur beim iA-Writer: weniger ist mehr.

2. Vitaly Friedman

friedman-vitaly

Das Smashing Magazine ist eine Bank in Sachen und Frontend. Friedman hat aber nicht nur die Design-Website mitgegründet, sondern glänzt auch mit erlesenen Artikeln, Büchern, Vorträgen und Designs.

3. Eva-Lotta Lamm

lamm-eva-lotta

4. Marc Thiele

thiele-mark

5. Peter Kröner

kroener-peter

6. Peter Müller

mueller-peter

7. Jens Grochtdreis

grochtdreis-jens

8. Christian Schäfer

schaefer-christian

9. Ellen Bauer

bauer-ellen

10. Dirk Jesse

jesse-dirk

Webentwicklung

1. Jan Lehnardt

lehnhardt-jan

Er hat den Quellcode-Button im Browser entdeckt, als er noch ganz klein war. Heute werkelt er an CouchDB und Hoodie – meist im Berliner Co-Working-Space Co-Up.

2. Robert Lemke

lemke-robert

Wer über TYPO3 spricht, muss über Robert Lemke sprechen: Leidenschaftlicher Espresso-Trinker, , Coach und Consultant.

3. Lukas Kahwe Smith

smith-lukas-kahwe

4. Benjamin Eberlei

eberlei-benjamin

5. Chris Heilmann

heilmann-chris

6. Nils Adermann

adermann-nils

7. Henri Bergius

bergius-henri

8. Bastian Allgeier

allgeier-bastian

9. David Zülke

zuelke-david

10. Pierre Joye

joye-pierre

]]>
Florian Brinkmann
iOS 7.1 ist da: Apple bringt CarPlay und verbessert Benutzeroberfläche http://t3n.de/news/apple-ios-7-1-carplay-homescreen-533553/ 2014-03-10T17:57:21Z
Apple hat das Update mit der Versionsnummer 7.1 für iOS freigegeben. Darin wird das neue Auto-Interface CarPlay eingeführt. Außerdem wurde der weit verbreitete Homescreen-Bug behoben und das User.. ...

Apple hat das Update mit der Versionsnummer 7.1 für iOS freigegeben. Darin wird das neue Auto-Interface CarPlay eingeführt. Außerdem wurde der weit verbreitete Homescreen-Bug behoben und das User Interface an einigen Stellen verfeinert.

Größtes Highlight: Auto-Integration „CarPlay“

Etwas später als erwartet hat heute das neue iOS-Update freigegeben. In Version 7.1 führt Apple eine ganze Reihe neuer Features ein. Allen voran steht die neue für im Auto. Das auf den Namen CarPlay getaufte System sorgt dafür, dass iPhones zukünftig besser in das OnBoard-Entertainment-System von großen Autoherstellern integriert werden.

Apple bessert mit iOS 7.1 an einigen essentiellen Punkten nach.
Apple bessert mit iOS 7.1 an einigen essentiellen Punkten nach.

Endlich: Homescreen-Bug behoben

Außerdem soll nun der sogenannte Homescreen-Bug behoben worden sein. Der sorgte dafür dass der bei vielen Geräten mit iOS 7 willkürlich abstürzte. Der Nutzer bekommt dabei immer nur das Apple-Icon zu sehen, so als ob das iPhone komplett neu starten würde.

iOS 7.1: Der Changelog des neuen Apple-Updates ist lang. (Screenshot: iTunes)
iOS 7.1: Der Changelog des neuen Apple-Updates ist lang. (Screenshot: iTunes)

Außerdem gibt es dutzende weitere Neuerungen, etwa bei der Funktionsweise von Siri (Befehle können nun wie bei einem Walkie-Talkie aufgenommen werden, während man die Home-Taste gedrückt hält) oder eine neue Monatsansicht für den Kalender. Auch bei der Nutzeroberfläche von iOS hat Apple an einigen Schrauben gedreht und einige Dialoge und Elemente neugestaltet, und damit einige Kritikpunkte von iOS ausgemerzt.

iOS 7.1.: Update wird ab sofort ausgeliefert

Das Update steht ab sofort zur Verfügung und ist etwa 270 Megabyte groß. Bis alle Geräte das Update über die Over-the-Air-Funktion entdeckt haben kann es noch ein bisschen dauern. Solange kann das Update aber bereits via iTunes heruntergeladen und installiert werden.

]]>
Moritz Stückler
Krit: Studenten planen Feedback-Plattform für Webdesigner http://t3n.de/news/krit-dribbble-alternative-533382/ 2014-03-10T10:01:27Z
Krit will sich als Feedback-Plattform für Designprojekte positionieren. Designer können dort ihre Arbeit vorstellen und sich gegenseitig Ratschläge erteilen.

Krit will sich als Feedback-Plattform für Designprojekte positionieren. Designer können dort ihre Arbeit vorstellen und sich gegenseitig Ratschläge erteilen.

Krit: Designer können eigene Projekte vorstellen und die Arbeiten von Kollegen kommentieren. (Bild: Krit)
Krit: Designer können eigene Projekte vorstellen und die Arbeiten von Kollegen kommentieren. (Bild: Krit)

Krit: Feedback-Plattform setzt auf konstruktive Kritik

Webseiten, auf denen ihre Projekte vorstellen und sich mit anderen Kollegen austauschen können, gibt es viele. Geht es aber nach drei amerikanischen Studenten, fehlt es diesen Plattformen an wirklich hilfreicher Kritik. So ist es beispielsweise nett, auf der Startseite von Dribbble zu landen, eine kritische Auseinandersetzung mit der Arbeit finde dort in vielen Fällen allerdings nicht statt. Daher planen die Studenten jetzt eine eigene Plattform, die genau dafür da sein soll.

Unter dem Namen Krit soll eine Feedback-Plattform entstehen, auf der Designer ihre Projekte anderen Kollegen vorstellen können. Ziel ist es, einen kritischen Austausch zwischen Nutzern anzuregen. Erscheint ein Element beispielsweise unpassend, könnte ein Nutzer direkt einen Kommentar dazu abgeben. So sollen auch Details beleuchtet werden und eine kritische Haltung entstehen, von der alle Nutzer profitieren können. Die Macher versprechen auch, dass Bilder niemals in der Größe reduziert werden. Immerhin würde das kaum zur Fokussierung auf Details passen.

Krit: Feedback-Plattform soll demnächst starten

Krit soll darüber hinaus durch eine simple Oberfläche punkten. Der Fokus soll klar auf den vorgestellten Projekten liegen. Einen kleinen Einblick verschaffen euch die Mockups der Seite, die ihr in unserer Bildergalerie findet. Außerdem haben die Macher ein kleines Video gedreht, das ihr unterhalb dieses Artikels findet. Handfeste Hinweise zur geplanten Seite finden sich dort allerdings nicht.

Während die Zielsetzung von Krit sicher spannend klingt, müssen interessierte Designer sich noch etwas gedulden. Einen Starttermin gibt es noch nicht. Wer will, kann auf der Krit-Webseite seine E-Mail-Adresse hinterlassen, um zum Start benachrichtigt zu werden. Ob Krit tatsächlich tiefgreifendere Diskussionen als bestehende Portfolio-Seiten bieten wird, bleibt abzuwarten. Entscheidend ist hierbei nicht nur die Intention der Macher, sondern vor allem die Beteiligung der Community. Wir werden sehen, ob Krit tatsächlich eine ausreichend große und kritikfreudige Nutzerbasis anziehen kann.

]]>
Kim Rixecker
Webdesign: 12 spannende und interaktive Storytelling-Webseiten, die Scroll-Activated-Animations nutzen http://t3n.de/news/scroll-activated-animations-531913/ 2014-03-08T16:17:20Z
Scroll-Activated-Animations – durch Scrollen aktivierte Animationen – entwickeln sich derzeit zu einem Trend der Web-Entwicklung. Wir zeigen euch zwölf spannende Beispiele für die Anwendung...

Scroll-Activated-Animations – durch Scrollen aktivierte Animationen – entwickeln sich derzeit zu einem Trend der Web-Entwicklung. Wir zeigen euch zwölf spannende Beispiele für die Anwendung dieser Technik.

Scroll-Activated-Animations: Auch für Corporate Webseiten bestens geeignet

Jedes Jahr werden Webseiten technisch anspruchsvoller und spannender. Animationen tragen ihren Teil zu diesem Öko-System bei und werden durch neue Technologien und findige Webworker immer ausgefeilter und spannender. Dieses Jahr zeichnet sich ein besonderer Web-Trend ab, der von einer Kombination aus Scroll-aktivierten und Lazy-Load-Animationen geprägt ist.

Mit diesen Effekten lassen sich spannende und interaktive Storytelling-Webseiten entwickeln, die nicht nur als Technik-Spielerei, sondern auch für Corporate-Webseiten bestens geeignet ist. Einige der schönsten Beispiele für den neuen Webdesign-Trend haben wir für euch zusammengestellt.

GMC Sierra 2014 – Scroll-Activated-Animations par excellence

GMC Sierra 2014
GMC präsentiert mit einer beeindruckenden Multimedia-Präsentation, was der neue Sierra zu bieten hat. (Screenshot: t3n)

GMC zeigt, was man mit Web-Technologien und dem richtigen Material erreichen kann. Die Webseite kombiniert hochwertige Sound-Effekte und beeindruckende CGI-Animationen, um den neuen Sierra-Pickup in Szene zu setzen.

Areal Plankstadt
Die Produktseite von Areal Plankstadt nutzt Scroll-Activated-Animations. (Screenshot: t3n)

Areal Plankstadt wirbt mit einer Kombination aus interaktiver, illustrierter Infoseite und fotorealistischen Elementen für freie Baugebiete.

Fluger Design

Fluger Design
Fluger Design. (Screenshot: t3n)

Fluger Design lädt Besucher dazu ein, die Webseite mit einem kleinen Flugzeug zu erkunden. Hierbei werden geschickt Comic-Elemente mit fotorealistischen Elementen kombiniert.

Scroll-Activated-Animations: Fillet

Fillet
Fillet nutzt Scroll Activated Animations. (Screenshot: t3n)

Fillet ist eine schicke Flat-Design-Webseite, die coole Transformationseffekte für die Präsentation typografischer Arbeiten nutzt.

Bizbrain

Bizbrain
Scroll-Activated-Animations bei Bizbrain. (Screenshot: t3n)

Bizbrain zeigt einen Onepager, der spannende Fakten mit interaktiven und animierten Infografiken kombiniert. Hier erfährst du nicht nur vieles über Kaffee, sondern siehst auch ein gutes Beispiel für den Scroll-Trend.

Kaipoche

Kaipoche
Die Webseite zum Kaipoche-Kait-Wettbewerb. (Screenshot: t3n)

Kaipoche befasst sich mit einem Kite-Festival, das im letzten Jahr stattgefunden hat, und nutzt eine bunte Cartoon-Welt mit Scroll-aktivierten-Animationen, Parallax-Scrolling und Lazy-Animationen.

Drugs and Alcohol on Campus

Drugs and Alcohol on Campus
Die interaktive Infografik „Drugs and Alcohol on Campus“. (Screenshot: t3n)

Ähnlich wie Kaipoche bietet Drugs and Alcohol on Campus ein gutes Beispiel für Scroll-aktivierte Inforgrafiken.

Adobe Muse CC

Adobe Muse Webseite
Der Produktseite von Adobe Muse. (Screenshot: t3n)

Adobe nutzt die neue Technik, um das neue Muse mit zurückhaltendem Design und klaren Pfaden in den Fokus des Betrachtes zu rücken und haucht Illustrationen mit Papier-Texturen durch die Scroll-Technik neues Leben ein.

Happy New Year 2014

Happy New Year
Interaktive Neujahrsgrüße mit Scroll-Activated-Animations. (Screenshot: t3n)

Neujahrsgrüße mal anders. Happy New Year 2014 zeigt eine wirklich nette und technisch anspruchsvolle Version einer Grußkarte.

Merry Christmallax

Merry Christmallax
Merry Christmallax nutzt Scroll-Activated-Animations. (Screenshot: t3n)

Eine weitere spannende Design-Story mit weihnachtlichem Schwerpunkt: Merry Christmallax, wo ihr die Entstehung einer weihnachtlichen Illustration begleitet, überzeugt durch beeindruckende Detailtreue.

Make Your Money Matter

Make Your Money Matter
„Make Your Money Matter“ versucht uns mit Scroll-Activated-Animations von den Leistungen einer Bank zu überzeugen. (Screenshot: t3n)

Make Your Money Matter ist Teil einer Promotion, die in einer spannenden Kombination aus Infografik und die Vorteile einer kleinen Bank gegenüber typischen Großbanken illustriert.

The Number 60

The Number 60
The Number 60 liefert spannende Fakten zum Thema Sonnenschutz und nutzt die Scroll Activated Animations Technik. (Screenshot: t3n)

Hast du dich schon immer gefragt, wofür eigentlich die Zahlen auf Sonnenschutzprodukten stehen? La Roche-Posay lüftet das Geheimnis um die Zahlen und weitere Sonnenschutz-Fakten in der liebevoll illustrierten Info-Webseite The Number 60.

Fazit: Scroll-Activated-Animations

Das Web ist stets im Wandel und präsentiert sich immer wieder in neuen Facetten. Neue Technologien und Anwendungsmöglichkeiten dehnen und brechen die Grenzen dessen, was eine Webseite leisten kann und geben Webworkern neue Möglichkeiten, spannende Projekte auf die Beine zu stellen. Was jetzt noch fehlt, ist die browserübergreifende Komformität, denn selbst bei aktuellen Versionen führender Hersteller (von Legacy-Browsern wollen wir hier gar nicht sprechen) ist die User-Experience bei der Benutzung der hier genannten Beispiele teilweise gravierend.

Wenn diese letzte Hürde genommen wurde, ebnet sich der Weg für diese fantastische Storytelling-Technik und weiteren zuvor undenkbare Lösungen. Wir jedenfalls sind gespannt.

]]>
Ilja Zaglov