Design | t3n News News, Infos, Tipps und aktuelle Artikel zu Design 2014-11-26T08:44:24Z t3n Redaktion http://t3n.de/tag/design Frameless: Dieser Full-Screen-Browser für iOS erleichtert euch das Prototyping http://t3n.de/news/frameless-full-screen-browser-ios-581136/ 2014-11-26T08:44:24Z
Mobile Browser sind nicht gerade gut geeignet, um damit Prototypen zu entwickeln – zu viele störende Elemente sind im Weg. Frameless will das jetzt ändern – der Full-Screen-Browser für iOS ist …

Mobile Browser sind nicht gerade gut geeignet, um damit Prototypen zu entwickeln – zu viele störende Elemente sind im Weg. Frameless will das jetzt ändern – der Full-Screen-Browser für iOS ist speziell für Entwickler gedacht.

Frameless: Ein Browser für Entwickler

Frameless will Designern die Arbeit erleichtern. (Grafiken: iTunes)
Frameless will Designern die Arbeit erleichtern. (Grafiken: iTunes)

Prototypen auf mobilen Browsern durchtesten ist wahrlich kein Vergnügen. Die Browser-Bar und die Scrollbars, die Tastatur – irgendwas ist immer im Bild. So wie viele Entwickler hat das auch Jay Stakelon aus Los Angeles gestört, weshalb er sich kurzerhand eine Lösung ausgedacht hat: Frameless – einen Full-Screen-Browser für iOS.

Mit Frameless lassen sich alle störenden Elemente des Browsers ausblenden und per Gestensteuerung wieder einblenden, wenn gewünscht. Was bleibt, ist der komplette Bildschirm des iOS-Geräts als Spielwiese für eure Prototypen. Als Gesten zur Steuerung stehen Swipen, das Tippen mit drei Fingern oder das Schütteln des Geräts zur Verfügung.

Prototypen-Entwicklung mit Frameless

Neben klassischen HTML-Prototypen arbeitet Frameless nach Angaben von Stakelon auch problemlos mit Framer Studio zusammen. Was einige Entwickler vielleicht vermissen könnten, ist die Möglichkeit, URIs abzuspeichern, um so schneller darauf zugreifen zu können.

Den Code von Frameless hat Stakelon auf GitHub veröffentlicht, die App selbst hat es vor zwei Tagen offiziell in den App-Store geschafft. So schlicht, aber eben auch überzeugend wie den Browser hat Stakelon übrigens auch den schön gestalteten Walkthrough gehalten, für den er auf das Onboard-Projekt von Mike Amaral zurückgegriffen hat. Und so macht das Projekt alles in allem einen runden und ausgefeilten Eindruck.

via news.layervault.com

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Florian Blaschke
Flow: Schickes Eingabegerät für Designer und Entwickler mit Gestensteuerung http://t3n.de/news/flow-schickes-eingabegeraet-fuer-580847/ 2014-11-25T11:35:53Z
Flow soll künftig der Maussteuerung Konkurrenz machen. Das schicke Eingabegerät lässt sich per Metallrad, Touch- und Gestensteuerung bedienen. Insbesondere Designer, Entwickler und Gamer sollen …

Flow soll künftig der Maussteuerung Konkurrenz machen. Das schicke Eingabegerät lässt sich per Metallrad, Touch- und Gestensteuerung bedienen. Insbesondere Designer, Entwickler und Gamer sollen davon profitieren.

Aus drei mach eins, haben sich die Entwickler des Berliner Startups Senic wohl gedacht, als sie an der Entwicklung von Flow saßen. Das Eingabegerät soll die Maus nicht komplett ersetzen, wohl aber ergänzen. Versprochen wird eine intuitivere Steuerung, etwa, wenn es um Photoshop oder Games geht. Neben dem drehbaren Metallrad, können die per Bluetooth verbundenen Geräte über Touch- und Gestensteuerung bedient werden.

Flow soll für mehr Intuition und Präzision bei der Bedienung von Geräten sorgen. (Foto: Senic/Indiegogo)
Flow soll für mehr Intuition und Präzision bei der Bedienung von Geräten sorgen. (Foto: Senic/Indiegogo)

Das schicke Eingabegerät sucht derzeit auf der Crowdfunding-Plattform Indiegogo nach finanzieller Unterstützung. Knapp die Hälfte des Kampagnenziels von 50.000 US-Dollar sind bereits nach einem Tag erreicht. Noch bis zum 3. Januar 2015 können Interessierte ihren Beitrag dazu leisten, dass aus dem aktuellen Prototyp ein fertiges Gerät wird. Anvisierter Liefertermin ist Juni 2015. Derzeit steht Flow für 99 US-Dollar zum Verkauf. Der spätere Ladenpreis soll sich auf 150 US-Dollar belaufen.

Flow soll präzise Steuerung ermöglichen

Beispiele für Anwendungen, bei denen Flow später punkten soll, zeigen die Entwickler auf der Indiegogo-Seite. Ziel ist es insbesondere, eine intuitive und präzise Steuerung zu ermöglichen. Bei Photoshop ist es etwa möglich, über das Scrollrad die Größe des Werkzeugs zu regeln, ohne das Menü nutzen zu müssen. Ebenso auf einfachen Knopfdruck oder Wischen sollen Befehle wie Undo oder das Speichern eines Dokuments ausgeführt werden können. Die Gestensteuerung über den eingebauten Infrarotsensor soll durch Wischen von links nach rechts etwa Musiktitel vorspulen können, durch die Bewegung von unten nach oben kann die Lautstärke erhöht werden.

Flow ist 15 Millimeter hoch und hat einen Durchmesser von 70 Millimetern. Das mobile Eingabegerät verfügt über austauschbare Batterien, die jeweils mehr als vier Monate halten sollen. Der drehbare Ring besteht aus Aluminium, der Rest des Geräts aus Kunststoff. Gesteuert wird über den Metallring (360 Grad), den Infrarotsensor und die Touchfläche, die sich mit Kurzbefehlen belegen lässt. Flow beruht auf einer offenen Plattform. Entwickler haben dadurch die Möglichkeit, weitere Applikationen mit Flow umzusetzen.

via futurezone.at

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Jörn Brien
10 kostenlose Logo-Vorlagen, die das Designerherz höher schlagen lassen http://t3n.de/news/10-kostenlose-logo-vorlagen-578747/ 2014-11-23T08:03:52Z
Gut gemachte Logos bleiben im Gedächtnis und repräsentieren Marken in einzigartiger Weise. In diesem Artikel zeigen wir euch frei verfügbare PSD-Logo-Vorlagen, die ihr direkt verwenden oder als …

Gut gemachte Logos bleiben im Gedächtnis und repräsentieren Marken in einzigartiger Weise. In diesem Artikel zeigen wir euch frei verfügbare PSD-Logo-Vorlagen, die ihr direkt verwenden oder als Inspiration für eigene Ideen nutzen könnt.

Unverwechselbar: Kostenlose Logo-Vorlagen für eure Projekte

Egal, ob als Symbol des eigenen Unternehmens, für den Blog, als Emblem, Qualitätssiegel oder beliebige weitere Verwendungszwecke – Logos sind Wiedererkennungsmerkmale, die eine eindeutige Identifikation schaffen und somit im besten Fall in unverwechselbarer Art aus der Masse herausstechen. Kaum ein bekanntes Unternehmen hat ein Logo, das man nicht im Halbschlaf erkennen und mit einer Dienstleistung, einer Ware oder Person in Verbindung bringen würde.

Die im Folgenden vorgestellten PSD-Templates bilden eine kreative Mixtur verschiedener Typen von Logos. Darunter befinden sich solche im Vintage-Design, andere im modern anmutenden verchromten Look, und wieder andere sind elegant oder minimalistisch oder besonders poppig. Unter den gezeigten Vorlagen sind solche, die direkt für eigene Projekte übernommen werden können und andere, die ein schon bestehendes Logo in einem ganz anderen Licht erscheinen lassen und zum Ausprobieren anregen.

Logo-Vorlagen als PSD-Files

old school
Embroidered heißt bestickt, und eben diesen Effekt visualisiert die PSD-Vorlage sehr originalgetreu. Das Mockup lädt dazu ein, das eigene Firmenlogo anstelle des Schriftzugs „Embroidered LOGO PSD MOCKUP“ einzusetzen. Statt des Stoff-Hintergrunds können natürlich auch andere Hintergründe integriert werden. Auch die Hintergrundfarbe kann leicht angepasst werden. (Bild: graphicburger.com/embroidered-logo-mockup)
security
In den Farbvarianten grün, rot und blau wird wird der Schutzschild angeboten, dessen Schattierungen und Farbverläufe so gesetzt sind, dass ein hochwertiger dreidimensionaler Effekt erzielt wird. Die PSD-Vorlage setzt sich aus diversen Layern zusammen. Beschriftung und Zahlen können im Handumdrehen verändert werden. (Bild: graphicsfuel.com/2010/08/download-security-shield-badge-and-icons-in-3-colors)
holz
Logo-Vorlagen aus Holz können sehr elegante Resultate hervorbringen. Mit dieser PSD-Vorlage bekommt das eigene Logo sogar eine dritte Dimension und sieht aus wie aus dem vollen Baumstamm geschnitzt. Wie bei der bestickten Vorlage ist auch diese Version prädestiniert dafür, den „WOOD-CRAFT“-Schriftzug auszutauschen und stattdessen das eigene Firmenlogo in Holzoptik auf sich wirken zu lassen. (Bild: graphicburger.com/3d-wooden-logo-mockup)

Übrigens gibt es für Logos sogar Trends. Die für dieses Jahr angeblich hoch im Kurs stehenden Stilrichtungen für Logos haben wir für euch in im Artikel „Logo-Design: Diese 15 Trends erwarten euch 2014“ in einer Galerie zusammengetragen. Und wenn ihr euch nach den Logo-Vorlagen gleich auch noch an eure Visitenkarten machen wollt, haben wir auch da Inspiration für euch.

via www.freepik.com

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Marcel Seer
Smarte Kladde für Designer: Moleskine macht aus Papierskizzen fertige Vektorgrafiken http://t3n.de/news/smart-notebook-designer-580287/ 2014-11-21T06:00:53Z
Mit einer Kladde, die aus analogen Papierskizzen digitale Vektorgrafiken macht, will der italienische Notizbuchanbieter Moleskine die Designer-Herzen höher schlagen lassen. Was sie kann, was sie …

Mit einer Kladde, die aus analogen Papierskizzen digitale Vektorgrafiken macht, will der italienische Notizbuchanbieter Moleskine die Designer-Herzen höher schlagen lassen. Was sie kann, was sie kostet und ob's sie noch rechtzeitig vor Weihnachten gibt, erfahrt im Artikel.

Wenn es ein Werkzeug unter Designern gibt, dass sich dem immensen Digitalisierungsdruck bis heute tapfer erwehrt, dann ist es das gute, alte Sketch- beziehungsweise Notizbuch. Die Haptik, das taktile Gefühl beim Zeichnen. Es gibt nicht wenige Gründe, den analogen Schaffensprozess im Kreativumfeld beizubehalten. Geht es nach dem Willen von Moleskine, soll sich das aber jetzt ändern – zumindest ein bisschen.

Smart Notebook verwandelt Skizzen in Vektorgrafiken

In Zusammenarbeit mit Photoshop-Macher Adobe hat der bekannte Hersteller von Notizbüchern heute ein speziell für Designer entwickeltes Sketchbook vorgestellt, das analoge Zeichnungen in vollwertige Vektorgrafiken konvertieren soll. Die Idee: Knipst ein Nutzer zum Beispiel eine fertige Zeichnung über die dazugehörige Moleskine-App ab, wird diese automatisch digitalisiert und in ein angebundenes Konto von Adobes Speicherdienst Creative Cloud übertragen.

Möglich wird das durch spezielle Seitenmarkierungen an den Ecken des Notitzbuchs, wodurch die App den Zeichenbereich eigenständig erkennen, begradigen und vektorisieren kann. Die sowohl als .jpg- und .svg-Datei ausgegebenen Zeichnungen können vom Nutzer anschließend entweder in Photoshop oder Illustrator geöffnet werden.

Moleskine Smart Notebook: Preise und Verfügbarkeit

Das Smart Notebook kann ab sofort über den EU-Store von Moleskine vorbestellt werden. Der Preis liegt dort derzeit bei rund 25 Britischen Pfund, was in Euro umgerechnet circa 30 Euro exklusiv Versandkosten entspricht. Als Liefertermin gibt Moleskine den 15. Dezember an. Ein Weihnachtsgeschenk, über das sich Designfreunde sicher freuen dürften.

via techcrunch.com

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Daniel Hüfner
Pixactly: Wie gut kennst du deine Pixel? http://t3n.de/news/pixactly-pixelschubser-579144/ 2014-11-17T16:40:03Z
Wer mit Programmen wie Photoshop arbeitet, der kann es: Das exakte Abschätzen von Pixelabständen und -größen. Das kleine Spiel Pixactly hilft euch dabei, noch besser zu werden. Wie das …

Wer mit Programmen wie Photoshop arbeitet, der kann es: Das exakte Abschätzen von Pixelabständen und -größen. Das kleine Spiel Pixactly hilft euch dabei, noch besser zu werden. Wie das funktioniert, zeigen wir euch in diesem Artikel.

Wer schnell arbeiten möchte und nicht unbedingt die exakten Pixelabstände von der Software angezeigt bekommt, der muss oft schätzen. Gerade beim Positionieren von Elementen auf einer Leinwand in Photoshop oder Pixelmator benötigt der Designer ein gutes Augenmaß. Wobei Pixelmator eine durchaus nutzbare und angenehme Option bietet: nämlich die Anzeige von Abständen zu anderen grafischen Objekten.

Jedoch, auch bei der Webentwicklung muss auf so eine Hilfestellung meistens verzichtet werden, außer man nutzt xScope oder andere Tools die ein Ausmessen erleichtern, aber ganz ehrlich: Wer startet ein Programm, um mal schnell ein DOM-Element mal schnell 187 Pixel nach unten zu verschieben? Denn hier gilt meistens: Trial-and-Error. Und genau hier hilft euch ein kleines Spiel namens Pixactly.

Pixactly: Lässt euch Abstände besser schätzen

pixactly
Pixactly: Ein Spiel für Pixelschubser. (Screenshot: t3n)

Die Idee hinter Pixactly ist denkbar einfach: Es werden euch Längen- und Breiten-Angaben vorgegeben und ihr müsst dann ein Rechteck der gegebenen Größe, per Drag-&-Drop, zeichnen.

Nachdem ihr das Rechteck aufgezogen habt, bekommt ihr Feedback, um wie viele Pixel ihr euch verschätzt habt. Das Spiel hat insgesamt fünf Runden, über die ihr jeweils Punkte sammelt.

Fazit: Pixactly

Dieses kleine Spiel ist durchaus geeignet um das Auge an die eigene Auflösung des Monitors zu gewöhnen. Da Pixactly nur für Desktop-Größen konzipiert wurde, könnt ihr es nicht wirklich auf dem Smartphone spielen, dort wäre allerdings das Üben nicht so sinnvoll.

Pixactly findet ihr übrigens hier.

Habt ihr die fünf Runden fehlerfrei geschafft?

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Mario Janschitz
20 wunderschöne Visitenkarten-Vorlagen für Photoshop http://t3n.de/news/20-wunderschoene-576832/ 2014-11-16T11:05:55Z
Visitenkarten haben auch und vielleicht gerade im Zeitalter der Sozialen Netzwerke noch ihren Platz. Ganz besonders, wenn es sich um solche Kunstwerke handelt, wie die PSD-Templates, die wir euch …

Visitenkarten haben auch und vielleicht gerade im Zeitalter der Sozialen Netzwerke noch ihren Platz. Ganz besonders, wenn es sich um solche Kunstwerke handelt, wie die PSD-Templates, die wir euch in diesem Artikel vorstellen.

Visitenkarten können eine erfrischende Abwechslung sein im heute scheinbar alles beherrschenden Strudel der Xing- und Linkedin-Profile. Mittlerweile heben sie sich von der breiten Masse ab und wissen in vielen Fällen durch Kreativität oder atemberaubendes Design zu überzeugen. Der Wahl der Schriften, Farben und Formen, aber auch des Formats und der Anordnung sind bei der Erstellung von Visitenkarten keine Grenzen gesetzt. Die Profile in den Sozialen Netzwerken sind dagegen starr und für jeden Nutzer durch den Code, der der jeweiligen Anwendung hinterliegt, in gewisser Weise vereinheitlicht und wenig individuell. Gedruckte Visitenkarten hingegen sind nur durch die Phantasie des Designers limitiert. Aber seht selbst.

Kostenlose Visitenkarten als PSD-Files

Das Praktische an den hier vorgestellten Visitenkarten ist, dass sie sich nicht nur bestaunen, sondern auch bearbeiten lassen. Alle in diesem Artikel gezeigten Karten sind über die jeweils angegebene Quelle frei verfügbar. Die PSD-Files lassen sich in bearbeiten und so auf die eigenen Bedürfnisse anpassen.

Ungewöhnlich für Visitenkarten - ein Design im Hochkantformat. Klar und gleichzeitig verspielt. Dezenter schwarz-weiß-grau Look angereichert durch markantes Farb- und Formenspiel (Bild: zcool.com.cn/gfx/ZMTk3ODA0.html).
Ungewöhnlich für Visitenkarten – ein Design im Hochkantformat. Klar und gleichzeitig verspielt. Dezenter schwarz-weiß-grau Look angereichert durch markantes Farb- und Formenspiel macht diese Karte zum Hingucker (Bild: zcool.com.cn/gfx/ZMTk3ODA0.html).
Peppiges, auffälliges Desgin - Visitenkarten, die auf jeden Fall in Erinnerung bleiben. Insbesondere auch durch die vielen Farbvarianten, mit denen hier kombiniert wird (Bild: freepsdfiles.net/print-templates/creative-business-card-psd-template).
Peppiges, auffälliges Desgin – Visitenkarten, die auf jeden Fall in Erinnerung bleiben. Insbesondere auch durch die vielen Farbvarianten, mit denen hier kombiniert wird (Bild: freepsdfiles.net/print-templates/creative-business-card-psd-template).
Schlicht und elegant präsentiert sich diese Visitenkarte im Vintage-Look. Anstatt wie eine gewöhnliche Visitenkarte mit schwarzem Druck auf weißem Papier mehr wie ein Werbeflyer daherzukommen, wirkt dieses Exemplar wie die Mitgliedskarte eines exklusiven Klubs. (Bild: freebiesgallery.com/business-card-template).
Schlicht und elegant präsentiert sich diese Visitenkarte im Vintage-Look. Anstatt wie eine gewöhnliche Visitenkarte mit schwarzem Druck auf weißem Papier mehr wie ein Werbeflyer daherzukommen, wirkt dieses Exemplar wie die Mitgliedskarte eines exklusiven Klubs. (Bild: freebiesgallery.com/business-card-template).
Eine weitere Visitenkarte im Hochkantformat. Die Anordnung der Elemente erinnert leicht an die Aufmachung einer Zigarettenschachtel. Hier muss der Empfänger zwei Mal hinsehen, was einen bleibenden Eindruck hinterlässt. (Bild: graphicsfuel.com/2011/05/business-card-psd-templates)
Eine weitere Visitenkarte im Hochkantformat. Die Anordnung der Elemente erinnert leicht an die Aufmachung einer Zigarettenschachtel. Hier muss der Empfänger zwei Mal hinsehen, was einen bleibenden Eindruck hinterlässt. (Bild: graphicsfuel.com/2011/05/business-card-psd-templates)
(Bild: psdgraphics.com/psd/abstract-hi-tech-design-business-card-template)
Diese Visitenkarte schreibt sich Hightech auf die Fahnen und transportiert diese Aussage auch wunderbar: Die schwarz-weiß-lila Kombination wirkt modern. Dazu passt die metallisch geschliffen anmutende Grafik im Hintergrund, ebenso wie das Breitbildformat und die nicht abgerundeten Ecken optimal. (Bild: psdgraphics.com/psd/abstract-hi-tech-design-business-card-template)

Weitere Ideen für Visitenkarten

Falls ihr nach Ansicht dieser Sammlung sehenswerter Visitenkarten auf den Geschmack gekommen seid, haben wir beispielsweise hier noch einige minimalistische Vorschläge: „Ein Augenschmaus: 50 minimalistische und inspirierende Visitenkarten“. Dass Visitenkarten nicht einmal aus Papier sein müssen, sondern dutzende andere Möglichkeiten parat halten, zeigen wir euch im Artikel „Tipps für kreative Visitenkarten und 50 inspirierende Beispiele“.

via www.freepik.com

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Marcel Seer
Auf der Suche nach passenden Fonts? TypeGenius zeigt dir, welche Schriften harmonieren http://t3n.de/news/typegenius-fonts-passende-schriftarten-578708/ 2014-11-16T07:55:30Z
TypeGenius zeigt euch, welche Schriftarten gut zueinander passen. So findet ihr in wenigen Sekunden gut harmonierende Fonts.

TypeGenius zeigt euch, welche Schriftarten gut zueinander passen. So findet ihr in wenigen Sekunden gut harmonierende Fonts.

TypeGenius zeigt euch, welche Fonts gut harmonieren. (Screenshot: TypeGenius)
TypeGenius zeigt euch, welche Fonts gut harmonieren. (Screenshot: TypeGenius)

TypeGenius: Genial einfach einen passenden Font finden

Dank Webfonts spielt Typografie auch im Webdesign eine immer größere Rolle. Dadurch steht ihr aber auch häufiger vor der Frage: Welche Schrift würde wohl zu diesem Font passen? Die Antwort darauf will euch TypeGenius liefern. Auf der minimalistischen Website wählt ihr dazu einfach eine Schriftart aus einer Liste aus und schon liefert euch TypeGenius eine Reihe von passenden Kombinationsmöglichkeiten.

Praktischerweise gibt es auch eine Suchfunktion, damit ihr nicht ewig durch die Liste scrollen müsst. Die verschiedenen Vorschläge werden nicht nur in Textform dargestellt, sondern auch mithilfe von Screenshots von Webseiten illustriert, auf denen die vorgeschlagene Kombination zweier Fonts eingesetzt wird. So habt ihr gleich einen Einblick, wie zwei Schriftarten zusammen aussehen.

TypeGenius: Dienst verlinkt auf Fonts und Beispielseiten

Um die Kombination nicht nur anhand des Screenshots zu begutachten, gibt es zu jedem Beispiel auch einen Quellenlink. Außerdem gibt es auch entsprechende Links auf Adobes TypeKit-Sammlung oder Google zu den jeweils genutzten Fonts. So könnt ihr direkt loselegen, wenn euch etwas gefällt.

TypeGenius ist ein praktischer und ungemein einfach zu bedienender Service. Wem die Auswahl an Fonts nicht ausreicht, der könnte sich auch den ähnlich gearteten Dienst Typ.io anschauen. Wer generell noch nach Schriftarten für ein Projekt sucht, der sollte einen Blick auf unseren Artikel „Fonts: 10 unserer Lieblings-Schriftarten für dein nächstes Design-Projekt“ werfen.

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Kim Rixecker
Die Basics des Responsive Webdesign in 9 schicken GIFs http://t3n.de/news/basics-responsive-webdesign-9-578560/ 2014-11-15T07:50:06Z
Wir zeigen euch die wichtigsten Prinzipien des Responsive Webdesign – in neun schicken GIFs aus der Feder des Designers Sandijs Ruluks von Froont.

Wir zeigen euch die wichtigsten Prinzipien des Responsive Webdesign – in neun schicken GIFs aus der Feder des Designers Sandijs Ruluks von Froont.

Responsive Webdesign: Früher war alles leichter

Früher war alles einfacher: Webdesigner konnten sich an festen Größen und Standards orientieren und ihre Projekte entweder auf die Desktop-Ansicht oder das mobile Internet ausrichten. Diese Zeit ist vorbei – wer möchte, dass Nutzer egal an welchem Ort und egal, welches Endgerät sie nutzen, sorgenfrei die eigenen Inhalte konsumieren können, muss sich mit Responsive Webdesign auseinandersetzen. Und das ist manchmal gar nicht so einfach.

Sandijs Ruluks von Froont. (Bild: Twitter)
Sandijs Ruluks von Froont. (Bild: Twitter)

Sandijs Ruluks kennt das: Der Grafikdesigner aus Riga bezeichnet sich selbst als „Designer, der aus der Print-Welt in die Welt des Webs gekommen ist.“ Auch er hat sich die neuen Denk- und Gestaltungsmuster zunächst hart erarbeiten müssen. Zusammen mit Freunden hat er vor Kurzem Froont gegründet, eine Design-Plattform, auf der Webdesigner direkt im Browser arbeiten und mit anderen Designern kollaborieren können. Auf dem Froont-Blog findet sich auch das gemeinsam verfasste „Open Web Design Manifesto“.

Für alle, die ebenfalls manchmal Schwierigkeiten damit haben, das Responsive-Design-Konzept zu verstehen, hat Ruluks neun GIFs erstellt, die die wesentlichen Prinzipien einfach und schnell veranschaulichen. Freundlicherweise hat er sie uns zur Verfügung gestellt.

1. „Responsive Webdesign“ versus „Adaptive Webdesign“

Responsive und Adaptive Design sind ähnlich, aber eben doch nicht gleich. „Die beiden Ansätze ergänzen sich, daher gibt es hier kein ‚richtig oder falsch‘“, schreibt Ruluks. Die Unterschiede verdeutlicht das erste GIF:

 

responsive_webdesign_adaptive_webdesign

2. Der Flow

Je schmaler der Bildschirm des Endgerätes ist, auf dem der Content ausgespielt wird, desto mehr Elemente werden untereinander statt nebeneinander angeordnet. Alle späteren Inhalte rutschen entsprechend noch weiter nach unten. Das nennt man den Flow.

 

04_flow-vs-static-2

 

3. Relative Einheiten

Wenn die Größe des Bildschirms, auf der Inhalte angezeigt werden können, variiert, ist auch die Pixeldichte der angezeigten Fläche nicht mehr in Stein gemeißelt. Für Webdesigner macht es also Sinn, von festen Pixelvorgaben abzurücken und stattdessen relative Größeneinheiten zu definieren – wie etwa „50 Prozent des Screens“ oder „100 Prozent des Screens“. Diese passen sich dann an das jeweils genutzte Ausgabeformat an, wie das nächste GIF zeigt:

 

 

responsive_webdesign_prinzip_relative_einheiten

4. Breakpoints

Breakpoints definieren, an welchen Stellen das Layout einer Seite umbrechen darf. Auf diese Weise können Webdesigner sicherstellen, dass ein Umbruch im Design, etwa wenn sich die Seite verschmälert, nicht zu einem inhaltlichen Bruch führt. „Aber nutzt Breakpoints mit Umsicht“, warnt Ruluks, „wenn es schwierig ist zu verstehen, welche Inhaltselemente voneinander abhängen, können Breakpoints schnell für Chaos sorgen“.

 

03_with-breakpoints-vs-without-breakpoints-1

 

5. Maximal- und Mindestwerte

Dieses Prinzip verhindert, dass Inhalte auf dem Smartphone oder dem Tablet zu klein dargestellt werden – oder auf größeren Bildschirmen zu sehr in die Breite gehen. Einfach einen Pixelwert für die maximale Breite definieren und der Verzerrungs-Effekt bleibt aus.

 

07_max-width-vx-no-max-width-1

 

6. Verschachtelte Objekte

Hier werden mehrere inhaltliche Elemente innerhalb eines Containers gruppiert und können somit gemeinsam bewegt werden. Dies macht die Arbeit für Webdesigner oftmals einfacher, da sie nicht so viele Elemente einzeln bearbeiten müssen. Das folgende GIF veranschaulicht das Container-Prinzip:

 

05_nested-vs-not-nested-1

 

7. „Mobile First“ und „Desktop First“

Diese beiden Leitprinzipien des Responsive Webdesign geben an, welcher Startpunkt für das Design einer Webseite gesetzt wird: Beginne ich auf dem kleinen Screen und passe das Design für größere Auflösungen an – oder starte ich mit der Desktop-Version und arbeite mich zu den kleineren Smartphone-Größen vor? „Technisch gesehen gibt es keine großen Unterschiede. Leg los und schau, welcher Ansatz besser für dich funktioniert“, so Ruluks.

 

08_desktop-first-vs-mobile-first-3

8. Webfonts und Systemschriften

Die Wahl der eingebetteten Schriften kann einen Einfluss auf die Ladezeiten der Webseite haben. Während es Webfonts zwar in viel mehr Varianten gibt und sie eine Seite sehr schön individualisieren können, werden die in den Betriebssystemen der Nutzer vorinstallierten „System Fonts“, so Ruluks, „schnell wie der Blitz“ angezeigt – sofern die gewählte Systemschrift auch im Geräte-Setup des Nutzers angelegt ist.

 

06_system-fonts-vs-webfonts-1

 

9. Bitmaps und Vektoren

Wenn Logos und Grafiken eine kleine Dateigröße haben und dennoch gut skalieren sollen, ist es ratsam, auf Vektoren, zum Beispiel SVG-Dateien oder Icon Fonts, zurückzugreifen. Bilder im JPG-, PNG- oder GIF-Format müssen in der Regel optimiert werden und sind wesentlich größer. Doch können sie Details oder Effekte besser abbilden als Vektoren und nicht alle Browser unterstützen SVG-Formate. „Wählt also mit Bedacht“, so das Resümee von Sandijs Ruluks.

 

09_vectors-vs-images-1

Hier geht's zum Original-Beitrag „Nine Basic Principles of Responsive Webdesign“ von Sandijs Ruluk auf dem Froont-Blog. Hilfreich für euch ist vielleicht auch unsere Artikelreihe zum Einstieg in flexible Projekte mit Responsive Webdesign.

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Lea Weitekamp
Die Zukunft des Interface-Designs: Wie zwei neue Tools die Arbeit von Designern erleichtern könnten http://t3n.de/news/interface-design-atomic-zeplin-578535/ 2014-11-13T11:38:26Z
Mit Atomic und Zeplin befinden sich zwei spannende neue Tools für Interface-Designer in einer geschlossenen Beta-Phase. Beide Werkzeuge wollen die gemeinsame Arbeit am UI-Design vereinfachen und …

Mit Atomic und Zeplin befinden sich zwei spannende neue Tools für Interface-Designer in einer geschlossenen Beta-Phase. Beide Werkzeuge wollen die gemeinsame Arbeit am UI-Design vereinfachen und verbessern.

Interface-Design: Die beiden Tools Atomic und Zeplin sollen die Arbeit von Designern erleichtern. (Screenshot: Atomic)
Interface-Design: Die beiden Tools Atomic und Zeplin sollen die Arbeit von Designern erleichtern. (Screenshot: Atomic)

Es tut sich derzeit einiges für Interface-Designer. Neue Werkzeuge kommen auf den Markt und versprechen, die Arbeit schneller und einfacher zu machen. Mit Atomic und Zeplin befinden sich derzeit zwei weitere Tools dieser Art in der Entwicklung. Beide verfolgen interessante Ansätze, um die kollaborative Arbeit an Entwürfen auf einen neuen Level zu heben.

Atomic: Interface-Designer sollen einfache Versionsverwaltung bekommen

Zugegeben: Atomic ist vielleicht nicht unbedingt der kreativste Name für ein Startup. Das gleichnamige Produkt hat aber durchaus das Zeug, die Arbeit von UI-Designern deutlich zu erleichtern. Die Web-App will es Teams möglichst einfach machen, gemeinsam an Entwürfen zu arbeiten. Mit wenigen Klicks lassen sich bei Atomic interaktive Prototypen erstellen, um das Design direkt testen zu können. Diese Prototypen lassen sich aus der App heraus in Form eines einfachen Links teilen. So können Kunden oder andere Teammitglieder ohne zusätzliche Software sehen, wo die Reise hingehen wird.

Spannend sind aber auch die Möglichkeiten zur Versionsverwaltung. Über einen Slider können alle Veränderungen am Entwurf angezeigt werden. Außerdem könnt ihr auch einzelne Elemente eines Entwurfes anwählen und euch nur die Veränderungen an diesem Element anzeigen lassen. Darüber hinaus ist es möglich, eine Kopie von jedem Punkt in der Versionsgeschichte zu machen, und auf Basis dieses Entwurfs weiterzuarbeiten. Wer an dem Tool Interesse hat, kann sich auf der Atomic-Website per E-Mail über die Entwicklung und den laufenden privaten Beta-Test informieren lassen.

Zeplin: Mit wenigen Klicks zum Spec-Sheat für Entwickler

Um mit Zeplin zu arbeiten, müsst ihr zunächst eure Entwürfe von Sketch importieren. Dank einem Plugin funktioniert das direkt aus der Software heraus. Bis zur fertigen Version soll auch Photoshop unterstützt werden. Nach dem Import hilft Zeplin vor allem dabei, schnell und einfach Spec-Sheets und Guidelines für die App-Entwickler zu erstellen. Bei der Erstellung eines neuen Projektes könnt ihr auswählen, ob es sich um eine Web-, Android- oder iOS-App handelt. Je nach Zielgerät könnt ihr euch alle Maße der unterschiedlichen UI-Elemente in dem passenden Format anzeigen lassen.

Farben lassen in Zeplin benennen und tauchen anschließend unter dem Guidelines-Tab auf. Hier finden sich auch Angaben zu den genutzten Fonts. Diese Angaben lassen such direkt in einem passenden Format exportieren. Je nach Zielplattform findet der Export beispielsweise als XML- oder als CSS-Datei statt. Auch SASS und LESS werden unterstützt. Über die Kommentarfunktion habt ihr außerdem die Möglichkeit, auf bestehende Farben in euren Guidelines Bezug zu nehmen. Auch Zeplin befindet sich derzeit in einer geschlossenen Beta-Phase. Auf der Website des Tools könnt ihr eure E-Mail-Adresse hinterlassen, um euch für einen Beta-Zugang vormerken zu lassen.

Wenn ihr euch für die Gestaltung von Android-Apps interessiert, solltet ihr einen Blick auf den Artikel „UI-Design für Android: Technische Grundlagen und wertvolle Design-Tipps“ aus dem t3n Magazin Nr. 32 werfen.

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Kim Rixecker
iOS: Umfangreiche Übersicht liefert alle wichtigen Informationen zum App-Design http://t3n.de/news/ios-design-guidelines-578165/ 2014-11-12T10:47:42Z
Eine umfangreiche Übersicht zeigt euch, wie ihr iOS-Apps nach den offiziellen Vorgaben von Apple gestaltet. Von den verschiedenen Display-Größen bis zu häufig verwendeten UI-Elementen deckt der …

Eine umfangreiche Übersicht zeigt euch, wie ihr iOS-Apps nach den offiziellen Vorgaben von Apple gestaltet. Von den verschiedenen Display-Größen bis zu häufig verwendeten UI-Elementen deckt der Guide alle wichtigen Punkte ab.

iOS: Umfangreiche Guidelines für App-Designer

Der UI-Designer Ivo Mynttinen hat seinen Kollegen schon früher mit einem Cheat-Sheet für iOS-Apps geholfen. Das haben wir euch in unserem Artikel „Cheat-Sheets für App-Entwickler: Alle wichtigen Maße und Angaben für iOS, Android und Windows Phone“ vorgestellt. Jetzt legt Mynttinen noch einmal nach und hat eine umfangreiche Übersicht für iOS 8 erstellt. Seine iOS-Design-Guidelines geben euch alle wichtigen Informationen an die Hand, die ihr zur Gestaltung von iOS-Apps nach den Vorgaben von Apple benötigt.

Wie sein früheres Cheat-Sheet listet er zunächst die verschiedenen Display-Auflösungen der erhältlichen iOS-Geräte auf. Diesmal finden sich dort natürlich auch die neuen iPhones und iPads. Im weiteren Verlauf seiner iOS-Design-Guidelines geht Mynttinen unter anderem auf das Downsampling beim iPhone 6 Plus ein und verrät, welche Auflösung ein App-Icon auf den verschiedenen Geräten haben muss.

Wer sich eher für die Entwicklung als für die Gestaltung von iOS-Apps interessiert und Apple's neue Programmiersprache Swift lernen möchte, sollte sich unseren Einsteiger-Leitfaden zum Thema ansehen.

iOS-Design-Guidelines geben eine umfangreiche Hilfestellung zur Gestaltung von iOS-Apps. (Screenshot: iosdesign.ivomynttinen.com)
Die iOS-Design-Guidelines geben eine umfangreiche Hilfestellung zur Gestaltung von iOS-Apps. (Screenshot: iosdesign.ivomynttinen.com)

iOS-Design-Guidelines: Von der Typografie zu den Navigationslementen

Die Übersicht behandelt Typografie genauso wie Apples Farbpalette für iOS 8. Außerdem gibt es hilfreiche Hinweise zur Verwendung gängiger Navigationselemente wie Tool- oder Navigationsleisten. Bewegt ihr den Cursor über eine der Abbildungen, werden automatisch die Abstände und zusätzliche Informationen angezeigt. Dazu gibt es jede Menge Informationen zu den einzelnen UI-Elementen. Gekrönt wird die Übersicht durch eine Liste von hilfreichen Artikeln und Sammlungen von Icons und anderen UI-Elementen.

Wer sich mit der Gestaltung einer iOS-8-App beschäftigt, der sollte unbedingt einen Blick auf die umfangreiche Übersicht werfen. Die dargebotenen Information sind allemal hilfreich. Wenn ihr hingegen noch nach einer Inspirationsquelle sucht, empfehlen wir euch unseren Artikel „Flat Design in Apps: 10 inspirierende Beispiele“.

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Kim Rixecker