Kategorien
Design Inspiration Showcases UI/UX

Frische Brise: 29 kostenlose User-Interface-Mockups für mobile Designs

Smartphones sind das interessanteste Zielgebiet für Webdesigner. Die Nutzung nimmt stetig zu. Erst auf der eben abgelaufenen Google I/O gab der Suchmaschinenriese bekannt, dass die Zahl von rund 26 Millionen Chrome-Mobilusern im letzten jahr inzwischen auf über 300 Millionen gewachsen ist. Ein Ende dieses Trends ist derzeit nicht absehbar. Es ergibt daher massiv Sinn, sich in sachen Webdesign stark auf mobile Geräte zu fokussieren, jedenfalls sicherzustellen, dass das in Mache befindliche Design auch auf den kleinen Begleitern ordentlich laufen wird. Um das Umparken im Kopf nicht nur automobil, sonder auch designmobil voran zu treiben, haben wir hier einen Haufen kostenlose User-Interface-Mockups für mobile Designs für Sie vorbereitet.

Inspiration im Quadrat – hier entlang.

UI Kit Re-app

ui kit
Erstellt von/für:  Anton Skugarov
Lizenz:  Kostenlos für private Zwecke einsetzbar

Marvel Resources

marvel
Erstellt von/für:  Murat Mutlu
Lizenz:  Kostenlos für private Zwecke einsetzbar

Ero UI

ero
Erstellt von/für:  Radek Jedynak
Lizenz: Attribution, nicht kommerziell

Mobile UI Kit

mobile
Erstellt von/für:  NIMIUS
Lizenz:  Kostenlos für private Zwecke einsetzbar

iPhone Gold UI Kit

gold
Erstellt von/für:  Tintins
Lizenz:  Kostenlos für private Zwecke einsetzbar

UI

ui
Erstellt von/für:  Eldar Burnashev
Lizenz:  Kostenlos für private Zwecke einsetzbar

Online Store Design

online store
Erstellt von/für:  Shab Majeed
Lizenz:  Kostenlos für private Zwecke einsetzbar

Mobile Wireframe Kit

wireframe
Erstellt von/für:   PixPivot
Lizenz:  Attribution, nicht kommerziell

Dribbble IOS App

dribbble
Erstellt von/für:   Creative Boxx
Lizenz:  Kostenlos für private Zwecke einsetzbar

Facebook Messenger for iOS 7

facebook
Erstellt von/für:  Sanjay Patel
Lizenz:  Kostenlos für private Zwecke einsetzbar

Music Player

music
Erstellt von/für:  Anton Skugarov
Lizenz:  Kostenlos für private Zwecke einsetzbar

iOs7 App Design Concept

map
Erstellt von/für: Hector Pinkman
Lizenz:  Kostenlos für private Zwecke einsetzbar

iPhone Vector Wireframing Toolkit

wireframe2
Erstellt von/für: Michelle
Lizenz:  Kostenlos für private Zwecke einsetzbar

Flat Mobile App

flat
Erstellt von/für:  Asgar khan
Lizenz:  Attribution, nicht kommerziell

Flybi App

flybi
Erstellt von/für:   Moe Saad
Lizenz:  Attribution, nicht kommerziell

Paul McCartney ‚New‘ Inspired Free App UI

paul
Erstellt von/für:  Ruaridh Currie
Lizenz:  Attribution, nicht kommerziell, keine Derivate

iOs App for Like Shop

fashion
Erstellt von/für:  Lokesh Dave
Lizenz:  Attribution Non-commercial

Travely iOS Mobile

travely
Erstellt von/für:  Alberto Valentin
Lizenz:  Kostenlos für private Zwecke einsetzbar

iBeacon App

ibeacon
Erstellt von/für:  Jana de Klerk
Lizenz:  Kostenlos für private Zwecke einsetzbar

Shopping App Notification Screen

shopping
Erstellt von/für:  Fuxxo Works
Lizenz:  Kostenlos für private Zwecke einsetzbar

Music Application

music2
Erstellt von/für:  Charline Bestard
Lizenz:  Kostenlos für private Zwecke einsetzbar

Checkout Reimagined

checkout
Erstellt von/für:  George Vasyagin
Lizenz:  Kostenlos für private Zwecke einsetzbar

Instagram for iOS Concept

instagram
Erstellt von/für:  Karl O’Brien
Lizenz:  Kostenlos für private Zwecke einsetzbar

Social App

social
Erstellt von/für:  Alberto Valentin
Lizenz:  Kostenlos für private Zwecke einsetzbar

Flat UI Kit

flat ui
Erstellt von/für:  Willy Masrur
Lizenz:  Attribution, nicht kommerziell

Soccer App

soccer
Erstellt von/für:  sm-artists
Lizenz:  Kostenlos für private und kommerzielle Zwecke einsetzbar

iOs UI Kit

ios
Erstellt von/für:  Georgian-Sorin Maxim
Lizenz:  Kostenlos für private Zwecke einsetzbar

Notify Login

notify
Erstellt von/für:    CreativeWings
Lizenz:  Kostenlos für private Zwecke einsetzbar

Online Store iPhone App Design

store
Erstellt von/für:   Ramotion
Lizenz:  Kostenlos für private Zwecke einsetzbar

(dpe)

Kategorien
Bilder & Vektorgrafiken bearbeiten Essentials Freebies, Tools und Templates Photoshop UI/UX

Marvel: Kostenloses Website-Prototyping für Photoshop-Dropboxer

Erstellen Sie Ihre Design-Prototypen mit Photoshop oder einer anderen Pixelschubse? Ich gebe zu, ich tue es. Und ich glaube kaum, dass sich das so schnell ändern wird. Der Kunde will immer zuerst einen grafischen Prototypen sehen. Der soll dann auch ein Stück weit funktionieren. Die neue Web-App Marvel kann diesen Prozess extrem beschleunigen. Wenn Sie Photoshop, Fireworks, Gimp oder was auch immer nutzen und Dropbox-Nutzer sind, sollten Sie dennoch nur dann weiterlesen, wenn Sie auch Websites erstellen…

marvelapp

Prototyping Online: Nicht ganz aufwandslos

Wird es sich in absehbarer Zeit ändern? Ich glaube nicht. Website-Prototypen lassen sich eben sehr schnell in Photoshop oder anderen Pixeleditoren bauen, entsprechende Kenntnisse vorausgesetzt. Da sehen sie dann ausdrucksstark aus und können Kunden vom Design überzeugen. Natürlich sind die so erzeugten Prototypen in keiner Weise interaktiv. Spätestens, wenn der Kunde die verschiedenen Bestandteile seines PSD-Webauftrittes mal in Aktion sehen will, wird es aufwändig. Ich nutzte in der Vergangenheit bereits mehrfach Powerpoint als Basis für die Präsentation klickbarer Prototypen im vollständigen Design, aber komfortabel ist das nicht. Der Aufwand ist zudem relativ hoch, so dass sich eine solche Vorgehensweise nur für größere Projekte lohnt.

Die neue Web- und iOS-App Marvel kommt spät, aber sie kommt und sie bedient genau diesen Anwendungsfall. Sie erstellen ein grafisches Mockup, vorzugsweise als PSD, aber auch jedes andere Bildformat geht, legen die einzelnen Bestandteile in Ihrer Dropbox ab und laden die Dateien in die Marvel-App. Dort können Sie dann mit einfachen Tools Hot-Spots definieren und Klickziele festlegen. Verschiedene Übergänge sorgen für Bewegung.

Das folgende Video zeigt die Funktionsweise sehr anschaulich:

Den größten Nutzen ziehen Sie aus Marvel, wenn Sie tatsächlich PSD-Prototypen erstellen und in Ihrer Dropbox ablegen. Marvel ist in der Lage, PSDs nativ zu lesen und zu behandeln, so dass der Schritt des Web-Exports komplett entfallen kann. Sie speichern einfach Ihre PSDs in der Dropbox, laden sie in Marvel und erstellen Ihren Klick-Prototypen.

Ändern Sie im weiteren Designprozess die PSDs, so werden die geänderten PSDs automatisch in den Marvel-Prototypen eingelesen. Das ist schon ein Knüller, wie ich finde.

Marvel: Ohne Dropbox-Vollzugriff tut sich nichts

Marvel erreicht dies allerdings nur, wenn Sie der App Vollzugriff auf Ihre Dropbox geben. Damit könnte Marvel theoretisch NSA-mäßig durch Ihre Dateien streifen und beliebiges Unheil anrichten. Natürlich versprechen die Marvel-Macher, dass sie niemals auch nur auf eine derartige Idee kommen würden. Dennoch, ich würde diese Berechtigung niemals erteilen.

Was ich mir allerdings vorstellen kann, und das wird sicherlich auch für Sie praktikabel sein, ist eine separate Dropbox, deren freier Speicher mit Sicherheit für komplexe Designs ausreichend sein würde. Zu dieser, rein für das Prototyping erstellten Dropbox gäbe ich Marvel bedenkenfrei Vollzugriff. Die Macher von Marvel versprechen, dass sie, sobald es die technische Möglichkeit gibt, entsprechend eingeschränkte Rechte anfordern werden. Bis dahin dürfte die Lösung mit der zweiten Dropbox ganz sinnvoll sein.

Marvel ist noch in der Beta-Phase und daher kostenlos verfügbar. Das Prototyping als Kernfeature soll auch in Zukunft kostenfrei bleiben, zusätzliche "Pro"-Features sind bereits pauschal angekündigt, ohne näher benannt worden zu sein. Diese Features sollen Geld kosten…

Schlussendlich ist Marvel heute eine interessante App, die all jene Designer näher anschauen sollten, die ihre Prototypen grafisch bauen. Wer ohnehin als erstes Vi anheizt, wenn der Kunde anfragt, der wird in Marvel keinen Nutzen erkennen können…

Links zum Artikel

Kategorien
Design HTML/CSS JavaScript & jQuery Programmierung

Schnell und flexibel HTML-Mockups erstellen mit RoughDraft.js

Während der Entwicklung einer Website kommt stets ganz früh schon der Moment, wo ein fertig aussehendes Layout mit Inhalten dargestellt werden muss. Diese Inhalte gibt es zu diesem Zeitpunkt meist nicht, weshalb Blindtexte und allgemeine Fotos herhalten müssen. RoughDraft.js erstellt solche „Blindinhalte“ inklusive des nötigen HTML-Gerüstes mit wenig Aufwand für den Entwickler.

roughdraftjs

RoughDraft.js: Viel Inhalt mit wenig Quelltext

RoughDraft.js ist ein Tool, welches Inhalte basierend auf individuellen Vorgaben automatisiert ausgibt. Nachdem die JavaScript-Bibliothek eingebunden und gestartet ist, reichen wenige Zeilen HTML, um beliebig viele Inhalte in unterschiedlicher Form zu erzeugen:

<div data-draft-repeat="20">
  <img data-draft-image="200/100" />
  <p data-draft-text="15/w"></p>
</div>

Die zu generierenden Inhalte werden ganz normal per HTML ausgezeichnet. Über Data-Attribute werden den Elementen Informationen übergeben, mit denen RoughDraft.js die Inhalte generiert. Im Beispiel wird ein DIV-Element erzeugt, welches 20 Mal wiederholt wird. Darin enthalten ist jeweils ein Bild mit 200 mal 100 Pixel Größe, gefolgt von einem Textabsatz, der aus je 15 Wörtern besteht.

Um die generierten Inhalte per CSS gestalten und gegebenenfalls mit Funktionen versehen zu können, lassen sich die HTML-Elemente auch mit Klassen und weiteren Attributen versehen.

Blindtexte und Bilder einbinden

Die verwendeten Blindtexte und Bilder bezieht RoughDraft.js aus verschiedenen Quellen. Für Texte steht neben dem klassischen „Lorem Ipsum“ unter anderem auch die Alternative „Bacon Ipsum“ zur Verfügung. Bilder können von den Seiten Placehold.it, Placekitten.com und etlichen weiteren bezogen werden. Die Quellen können je nach Vorliebe ausgewählt werden:

$(window).roughDraft({
  "author": "bacon",
  "illustrator" : "placehold"
});

Während die Größe der Bilder in Pixeln angegeben wird, gibt es für die Textlänge unterschiedliche Einheiten. Neben der Anzahl der Wörter eines Textes („#/w“) gibt es die Möglichkeit, die Anzahl der Sätze („#/s“) oder Absätze („#/p“) vorzugeben.

Außerdem existieren spezielle Textformate, zum Beispiel für die Ausgabe von Zahlen oder Benutzerinformationen:

<p data-draft-number="100-999"></p>
<p data-draft-user="email"></p>

Bei Zahlen ist es möglich, einen Zahlenbereich vorzugeben, aus der eine Zahl per Zufall ausgewählt wird. Bei Benutzerinformationen stehen verschiedene Ausgaben wie Name, E-Mail-Adresse, Telefonnummer und Land zur Verfügung.

Fazit: RoughDraft.js ist schnell eingebunden und bietet viele Möglichkeiten, um unterschiedliche Inhalte sehr individuell generieren zu lassen. Vor allem ist es einfach möglich, Veränderungen vorzunehmen. Die Länge der Texte oder Größe der Bilder ist im Nu geändert.

Der Entwickler hat übrigens schon Ideen, um weitere Inhalte wie Videos und Zitate per RoughDraft.js in HTML-Mockups einbauen zu können.

Links zum Beitrag

  • Quickly create and prototype a full interactive HTML mock-up | RoughDraft.js

(dpe)