Kategorien
Apps Inspiration Programmierung Showcases

Mockups: 50+ kostenlose Design-Ressourcen für deine Präsentation

Du kennst das. Du hast eben begonnen, an der Kunden-Website zu arbeiten, da will der Kunde schon mal sehen, wie das so aussehen wird, am besten auch gleich auf mehreren Geräten. Und natürlich so, dass er sich darunter was vorstellen kann.

Oder will dein Chef die App, an der du gerade die ersten Umsetzungsschritte vornimmst, jetzt schon aussagekräftig vermarkten? Ober benötigst du gar selber für deine tolle Idee zu einem Kickstarter-Projekt ein Mockup deiner App, das die Leute überzeugt und zum Investieren animiert? Egal, ob diese oder ähnliche Szenarien, du benötigst etwas, das es noch gar nicht gibt. Zauberei. Das ist ein Fall für Dr. Web.

Wir haben uns in die Weiten und die Tiefen des Webs begeben und unsere Netze ausgeworfen. Hängen geblieben sind fast 60 Dienste und Vorlagen auf Foto- oder Vektorbasis, mit denen deine Präsentation zumindest potenziell ein Erfolg werden kann. Sagen wir es so: Wenn du trotz unserer Hilfe keinen Erfolg haben solltest, lag es an was anderem ;-)

Abschnitt #1: Dienste

Placeit

placeit
Erstellt von/für:   placeit

Device Art Generator

device-art-generator

Erstellt von/für:   Android Developers

Mockuphone

mockuphone

Erstellt von/für:   mockuphone

ShapeItApp

shapeitapp

Erstellt von/für:   shapeitapp

Am I Responsive

am-i-responsive

Erstellt von/für:   responsivedesign

Abschnitt #2: Fotorealistische PSD-Mockups

iPhone Mockups

iphone-mockups-by-regy-perlera

Erstellt von/für:   Regy Perlera

iPad & iPhone 5s Mockups

ipad-&-iphone-5s-mockups-by-regy-perlera

Erstellt von/für:   Regy Perlera

iPhone 5s Mockup in Gold

iphone-5s-mockup-gold-by-christoph-gromer

Erstellt von/für:   Christoph Gromer

Flat iPhone 5S Mockup

flat-iphone-5S-mockup-by-george-vasyagin

Erstellt von/für:   George Vasyagin

iPad Mini

ipad-mini-by-kenny-sing

Erstellt von/für:   Kenny Sing

Nexus 5 Mockup

nexus-5-mockup-by-kreativa-studio

Erstellt von/für:   Kreativa Studio

Xperia Mockup

xperia-mockup-by-josé-polanco

Erstellt von/für:   José Polanco

Notemockup2

notemockup2

Erstellt von/für: webvilla

Surface 2

surface-2-by-sam-withey

Erstellt von/für:   Sam Withey

iPhone 5 Foto-Mockup

iphone-5-photo-mockup-by-brandon-brown

Erstellt von/für:   Brandon Brown

Notemockup3

notemockup3

Erstellt von/für:   webvilla

iPhone & MacBook Pro

iphone&probook-by-anpsthemes

Erstellt von/für:   anpsthemes

iPad 3

ipad-3-by-brandon-brown

Erstellt von/für:   Brandon Brown

Nexus 5

nexus-5-by-vector-square

Erstellt von/für:  Vector Square

Nokia Lumia 2520

nokia-Lumia-2520-by-andrii-sydorov

Erstellt von/für:   Andrii Sydorov

Iphone 5S & 5C Mockup

iphone-5s-&-5c-mockup-by-gwénolé-jaffrédou

Erstellt von/für:   Gwénolé Jaffrédou

iPhone 5

iphone-5-by-paul-flavius-nechita

Erstellt von/für:   Flavius Nechita

iPad Mockup

ipad-mockup-by-petter-berg

Erstellt von/für:   Petter Berg

Macbook Mockup

macbook-mockup-by-petter-berg

Erstellt von/für:   Petter Berg

MacBook Air Mockup

macBook-air-mockup

Erstellt von/für:   ninetofive

MacBook Air Mockup

macBook-air-mockup-1

Erstellt von/für:   ninetofive

The Desk Template

the-desk-template

Erstellt von/für:  Jérémy Paul

iPhone 5 schwebend

iphone-5-levitation

Erstellt von/für:   Jérémy Paul

iPhone 5 3D

iphone-5-3d

Erstellt von/für:   Jérémy Paul

iPhone 5s

iphone-5s-mockup

Erstellt von/für:   graphicburger

Macbook Air Screen

macbook-air-screen

Erstellt von/für:   pixeldima

iPhone5 fotorealistisch

iphone5-photo-realistic-mockup

Erstellt von/für: Tomas Korosi

Desktop-Ständer

phone-Holder

Erstellt von/für: Danny Johnson Junior

3D iPhone

3d-iphone

Erstellt von/für: nickmurphy

Abschnitt #3: Vektor-basierte PSD-Mockups

Ipad Air Mockup

ipad-air-mockup

Erstellt von/für:   blugraphic

iPhone

iphone-by-graph-concepts

Erstellt von/für:   Graph Concepts

Minimal Flat Iphone5

minimal-flat-Iphone5-by-rahul-dass

Erstellt von/für:   Rahul Dass

Samsung Galaxy S4 

samsung-galaxy-s4

Erstellt von/für:   Valentin Scholz

Simple Flat iPhone 5S Vektor

simple-flat-iphone-5s

Erstellt von/für:   Alberto Ziveri

Nexus 5 

nexus-5-by-greg-moore

Erstellt von/für:   Greg Moore

Samsung Mobile 

samsung-mobile-by-monkeytempal

Erstellt von/für:   monkeytempal

iPhone und Android 

iphone-and-android-by-billy-kiely

Erstellt von/für:   Billy Kiely

Apple-Armada im Flat Design

flat-apples-devices

Erstellt von/für:   Michal Jakobsze

BlackBerry Z10

blackberry-z10

Erstellt von/für:   graphicburger

Smartphones

smartphones

Erstellt von/für:   Jérémy Paul

Nexus 5 in Flat

nexus-5-flat

Erstellt von/für:   Christian Björkman

Flat Showcase mit mehreren Geräten

flat-showcase-presentation

Erstellt von/für:   victorsosea

 Illustrator-Vorlage mit verschiedenen Geräten

mobile-devices-illustrator-template

Erstellt von/für: uxkits

Diverse Mobilgeräte im Flat Design

flat-mobile-devices

Erstellt von/für: Herr Henning

HTC One

htc-one

Erstellt von/für: Ben Mildren

iPhone 5c, gewohnt farbenfroh

iphone-5c-colorful

Erstellt von/für: Anton Kudin

Nexus 7

nexus-7

Erstellt von/für: Tim Gale

(Der Beitrag wurde im April 2019 zuletzt geprüft und um tote Links bereinigt.)

Kategorien
Essentials Freebies, Tools und Templates

Remote Debugging: Mobile Webseiten am PC oder Mac untersuchen

Beim Entwickeln von mobilen Webseiten kommt man irgendwann unweigerlich an den Punkt, an dem man auf dem Smartphone oder Tablet die Entwicklertools im Browser starten möchte, um das HTML und CSS genauer untersuchen zu können.

Dieser Beitrag zeigt Ihnen, wie Sie Webseiten auf Android- und iOS-Geräten mit den Browserentwicklertools auf einem PC oder Mac untersuchen können, und zwar weitgehend mit Bordmitteln und ohne die Installation zusätzlicher Software wie Android SDK, Adobe Edge Inspect oder Weinre (WEb INspector REmote).

Die Hardware

Bevor Sie loslegen, überprüfen Sie kurz die Hardware. Sie benötigen:

  • Smartphone oder Tablet mit Android oder iOS
  • USB-Kabel, um das Gerät mit dem Rechner zu verbinden
  • Mac mit OS X oder PC mit Windows (oder beides)

Am besten funktioniert die im Folgenden beschriebene Vorgehensweise auf Macs unter OS X ab 10.8, denn dort können Sie ohne viel Aufwand sowohl iOS- als auch Android-Geräte untersuchen. Auf PCs hingegen kann man nur Androids debuggen und muss zunächst einen USB-Treiber für das Gerät installieren, was Windows in der Regel allerdings automatisch erledigt.

Remote Debugging mit Android-Geräten (für Win und OS X)

Zum Debuggen von Webseiten auf Androids benötigen Sie folgende Software:

  • als Browser: Googles Chrome ab V28 auf beiden Geräten
  • auf dem PC oder Mac die Chrome-Erweiterung ADB
  • PC mit Windows (ideal 7) oder Mac mit OS X (ab 10.8)
  • unter Windows: USB-Treiber für das Android-Gerät

Und los geht’s.

1. Die Chrome-Erweiterung ADB installieren

Im Chrome auf dem PC oder Mac installieren Sie zunächst die Erweiterung mit dem schönen Namen „ADB“, die innerhalb von Chrome die „Android Debug Bridge“ zur Verfügung stellt und Ihnen damit die Installation des kompletten Android SDK erspart.

Zur Installation der Erweiterung suchen Sie im Chrome Web Store einfach nach den Buchstaben „ADB“ oder klicken auf den Direktlink, den Sie weiter unten bei den „Links zum Beitrag“ finden. Unter Windows 8 klappt die Installation aus dem Chrome Webstore nicht, aber bei Github gibt es genaue Anweisungen zur manuellen Installation. Einen Link dazu finden Sie ebenfalls am Ende des Beitrags.

Nach der Installation der ADB-Extension finden Sie im Chrome rechts oben einen kleinen grauen Androiden.

01-chrome-adb-installed

2. Debugging auf dem Android-Gerät erlauben

Auf dem mobilen Gerät müssen Sie das Debugging gleich zwei Mal erlauben, und zwar einmal in den Einstellungen des Gerätes und einmal im mobilen Chrome. Gehen Sie zunächst in die Einstellungen des Gerätes und erlauben bei den Entwickler-Optionen das USB-Debugging.

02-s2-usb-debugging-quer

Ab Android 4.2 sind die Entwickler-Optionen standardmäßig versteckt. Um sie einzublenden, rufen Sie in Einstellungen die Option Info zum Gerät (4.2) bzw. Über das Telefon (ab 4.3) auf. Dort tappen Sie dann sieben Mal auf die Buildnummer. Unglaublich aber wahr. Nach Absolvierung dieses Rituals gehen Sie wieder eine Seite zurück und finden dann dort die Entwickler-Optionen, in denen Sie wie oben beschrieben das USB-Debugging aktivieren können.

Starten Sie jetzt Chrome auf dem Android-Gerät und aktivieren Sie im Menü Einstellungen - Entwickler-Tools die Option Web-Debugging über USB, indem Sie auf die Option tappen und dann rechts oben den Schiebeschalter auf Ein stellen. [EDIT 2013-11-26: Falls diese Option nicht vorhanden sein sollte, machen Sie einfach mit Schritt 3 weiter. Siehe Kommentar weiter unten.]

03-s2-chrome-web-debugging-ein

Danach rufen Sie im mobilen Chrome die Seite auf, deren Quelltext Sie gleich am PC oder Mac untersuchen möchten.

3. Geräte verbinden und Quelltext untersuchen

Zum Verbinden der Geräte stöpseln Sie unter OS X einfach das USB-Kabel ein und bestätigen eventuelle Sicherheitsabfragen.
Auf dem Android-Gerät erscheint die Meldung Als Mediengerät verbunden und oben in der Statusleiste wird oben links das USB-Symbol sichtbar. Eine eventuelle Meldung „Es wurde keine Software auf Ihrem PC gefunden, die das Gerät erkennt“ können Sie ignorieren bzw. mit OK bestätigen. Es funktioniert trotzdem.

Unter Windows werden nach dem Einstöpseln des USB-Kabels zunächst die Treiber für das Android-Gerät installiert. Im Idealfall passiert dies automatisch und sie brauchen dafür nichts, außer ein paar Minuten Geduld. Falls die Installation aus irgendeinem Grunde nicht klappen sollte, müssen Sie den USB-Treiber für das Androidgerät manuell installieren. Einen Link für Windows OEM USB Treiber finden Sie am Ende des Beitrags.

Nach dem Verbinden der Geräte starten Sie im Chrome auf dem PC oder Mac die weiter oben installierte Erweiterung ADB, indem Sie zunächst auf den grauen Androiden klicken und dann auf den Befehl Start ADB. Daraufhin färbt sich der Android grün.

04-chrome-adb-view-targets

Klicken Sie auf das jetzt grüne Android-Symbol und wählen Sie im ADB-Menü die Option View Inspection Targets. Chrome öffnet die Seite chrome://inspect, auf der Sie eine URL eingeben und damit auf dem mobilen Chrome einen neuen Tab öffnen können. Darunter werden im mobilen Chrome bereits geöffnete Seite gelistet. Sie können sie untersuchen, indem Sie auf den Link Inspect hinter dem Namen der Seite klicken.

Die folgende Screenshot-Montage zeigt auf der linken Seite die Developer Tools im Chrome auf dem Desktop, in denen das HTML-Element für das Menü ausgewählt wurde. Auf der rechten Seiten sehen Sie, wie das auf dem Desktop-Chrome selektierte Element im Chrome auf dem Android-Gerät hervorgehoben wird. Änderungen in den Developer Tools auf dem Desktop werden live und in Farbe im mobilen Browser umgesetzt. Remote Debugging.

05-chrome-devtools-desktop-webseite-mobile

Remote Debugging mit iOS-Geräten (nur OS X)

Zu Analyse von Webseiten auf iOS-Geräten benötigen Sie mindestens iOS 6 und einen Mac. Der wesentliche Unterschied liegt darin, dass das Debugging im Safari stattfindet und nicht im Chrome.

Gleich zu Beginn der Hinweis, dass Sie statt eines echten iOS-Gerätes auch den in der Programmierumgebung Xcode enthaltenen iOS-Simulator benutzen können. Die folgenden Schritte können Sie also auch dann abarbeiten, wenn Sie gerade weder ein iPhone noch ein iPad zur Verfügung haben. Xcode selbst können Sie aus dem Appstore heraus installieren. Im Menü Xcode - Open Developer Tool wird dann der iOS-Simulator gestartet.

1. Im Safari die Entwicklertools aktivieren

Zunächst aktivieren Sie im Safari auf dem Mac und auf dem mobilen Gerät (oder im iOS-Simulator) die Entwicklertools. Auf dem Mac finden Sie dazu in den Einstellungen im Abschnitt Erweitert die Option Menü "Entwickler" in der Menüleiste anzeigen.

06-safari-einstellungen-erweitert

Im iOS-Gerät gehen Sie in die Einstellungen - Safari - Erweitert und aktivieren dort mit dem Schieberegler die Option mit dem unscheinbaren Titel Webinformationen. In der englischen Version heißt der Befehl Web Inspector.

07-ipad-einstellungen-safari-erweitert

2. Geräte verbinden und Quelltext untersuchen

In diesem Schritt verbinden Sie iOS-Gerät und Mac mit dem USB-Kabel. Danach öffnen Sie auf dem Mac den Safari und finden dort im Menü Entwickler relativ weit oben das per USB-Kabel angeschlossene Gerät und bzw. oder den iOS-Simulator.

08-safari-entwicklermenü-ios-devices

Für die gefundenen Geräte werden alle im Safari geöffneten Webseiten angezeigt. Ein Klick auf die gewünschte Seite, und schon sehen Sie auf dem Mac die Entwicklertools mit dem Quelltext der auf dem mobilen Safari geöffneten Webseite. Auch hier werden Änderungen in den Entwicklertools auf dem Mac sofort im mobilen Safari umgesetzt.

09-safari-devtools-ipad-simulator

Fazit

Das Debuggen von Webseiten auf mobilen Geräten von einem PC oder Mac aus ist auch ohne zusätzliche Software recht einfach möglich und erleichtert die Optimierung ganz enorm.

Links zum Beitrag

Remote Debugging für Android:
Chrome downloaden
Die Erweiterung ADB im Chrome Webstore
ADB unter Windows 8 – manuelle Installation.
Windows OEM USB Treiber für Android
– Artikel „Remote Debugging on Android“

Remote Debugging für iOS:
Safari 7
Xcode mit iOS Simulator
– Artikel „Using Web Inspector to Debug Mobile Safari“

Links zu weiteren Tools

(dpe)

Kategorien
Webdesign

Kostenloses Ebook: „Tablet Web Design Best Practices“ mit vielen guten Tipps

Man wird den Damen und Herren bei Mobify in Kanada keineswegs die Expertise in Sachen mobiles Webdesign absprechen wollen, auch wenn man sich möglicherweise mit dem Cloud-basierten Konzept Mobifys nicht so recht anfreunden kann. Vor einiger Zeit ließen besagte Damen und Herren ihrer Expertise freien Lauf und stellten ein Ebook mit 30 Tipps, ein besonderes Nutzererlebnis auf Tablets zu schaffen, zusammen. Sie nennen es "Tablet Web Design Best Practices". Das 25-seitige Heftchen gibt es völlig gratis gegen die Bekanntgabe einer E-Mail-Adresse.

tabelt-web-design-best-practices-page

Tablet Web Design Best Practices: 30 Ways to Create Amazing Web Experiences on Tablets

Den größten Nachteil des ansonsten liebevoll gestalteten und mit nutzwertigen Informationen versehenen Heftchens will ich gleich zu Beginn erwähnen, denn es ist sicherlich für manch Interessenten ein Showstopper. Man kann es sich anhand des Titels und des Herkunftslandes an sich schon denken, dennoch sei deutlich darauf hingewiesen: Tablet Web Design Best Practices ist in englischer Sprache verfasst. Nicht in schwierigem, technischen Englisch, sondern eher so auf Mittelschul-Niveau, aber immerhin.

Stellt diese Hürde für Sie kein Problem dar, erhalten Sie einen kompakten Ratgeber, der vielfach auf der Basis von Ergebnissen einer oder mehrerer Studien Design-Tipps gibt, die Hand und Fuß haben. Mobify greift dabei nach eigenen Angaben auf die Erfahrungen aus dem erfolgreichen Umsetzen einiger großer Websites, darunter Starbucks, aber auch auf diejenigen der rund 75.000 Designer und Developer, die mit den Mobify-Tools arbeiten, zurück.

So verwundert es nicht, dass unter den Tipps solche sind, auf die man bei intensivem Nachdenken auch selber kommen würde und andere, mit denen zumindest ich nicht sofort um die Ecke gekommen wäre.

Tablet Web Design Best Practices: Two Parts to Rule Them All

In zwei Teile gliedert sich das Ebook. Im ersten Teil werden Tipps gegeben, wie man bestehende Desktop-Websites so verändern kann, dass sie auch auf Tablets sinnvoll nutzbar werden. Im zweiten Teil wird der nächste Schritt getan. Hier geht es darum, wie man vorgehen sollte, um tatsächlich auf Tablets optimierte Websites zu erhalten. Zumindest der erste Teil ist für jeden Seitenbetreiber relevant und sollte auf jeden Fall bearbeitet werden.

tablet-web-design-book-bottom

Die Gründe dafür sind durchschlagend. Mit erwarteten Verkäufen von einer halben Milliarde Tablets weltweit in 2013 und 2014 ist es fahrlässig, deren Nutzer nicht zumindest sinnvoll zu bedienen. Das umso mehr, als Tablet-Nutzer bei Online-Einkäufen 20 Prozent mehr Umsatz bringen als der durchschnittliche Desktop-Besucher.

Auf der anderen Seite dieser Chance steht das typische Website-Layout mit seinen 12 Pixel-Schriften und den nicht auf Touch ausgerichteten Schaltflächen und Formularen. Jeder Tablet-Nutzer wird zustimmen: Auf den allermeisten Websites macht das Surfen keinen Spaß. Dabei ist der Anwendungsfall des Internet-Surfens mit Abstand der wichtigste auf Tablets. Sind wir uns einig, dass es Handlungsbedarf gibt?

Und so beginnt das Ebook in seinem Teil 1 ganz praxisorientiert, fast schon hemdsärmelig und empfiehlt

  • Touch-Targets, also Elemente, die per Finger angewählt werden können, stets mindestens 44 x 44 Pixel groß zu machen,
  • auf durchgängige Touch-Bedienungsmöglichkeiten zu achten,
  • dafür zu sorgen, dass der Nutzer möglichst wenig schreiben muss,
  • kontext-sensitive Eingabemöglichkeiten zu schaffen und Auto-Correct oder automatische Großschreibung in Formularen auszuschalten,
  • die Standard-Textgröße und den Zeilenabstand zu erhöhen,
  • Icons als Font und Bilder auch in Retina-Auflösung einzubinden,
  • und vieles mehr.

In Teil 2 des Ebooks geht es dann darum, Web-Apps so zu gestalten, wie man das auch mit nativen Apps auf den jeweiligen Plattformen tun würde. Mit voller Optimierung auf die speziellen Möglichkeiten und Limitierungen eines Tablets.

Dazu gehören beispielsweise

  • dafür zu sorgen, dass Bilder in Seiten zoombar bleiben, ohne dass die komplette Seite zoomt,
  • die Navigation fest zu verankern, um sie persistent verfügbar zu halten,
  • ortsbasierte Möglichkeiten zu nutzen, um etwa logistische Fragestellungen leichter zu beantworten,
  • Schriftgrößen durch den Nutzer anpassbar zu gestalten,
  • viel mit Bildern zu arbeiten,
  • die Navigation absolut tablet-gerecht zu gestalten, etwa durch Auto-Hide oder Off-Canvas-Varianten,
  • besonders auf die sog. Hot Zones zu achten, diejenigen Bereiche, die man mit den Fingern besonders leicht erreichen kann auf einem Tablet,
  • und vieles mehr.

tablet-web-design-book-hot-zones

Natürlich, und wer würde das auch anders tun, verweisen die Autoren an vielen Stellen auf die entsprechenden Tools aus dem Hause Mobify und verlinken Tutorials, die zeigen, wie das Mobify-Konzept die entsprechende Umsetzung vorsieht.

Dennoch ist das Ebook nicht auf das Mobify-Konzept limitiert, sondern bietet durchaus allgemeingültige, dabei gute Tipps, die sicherlich den erfahrenen mobilen UI-Entwickler nicht aus den Socken hauen, aber Otto Durchschnittsseitenbetreiber und Feld-, Wald und Wiesen-Designer ein gutes Stück nach vorne bringen können – auf dem Weg in das Netz der Zukunft.

Abschließend will ich nochmal auf den Bezugsweg zurück kommen. Das Ebook steht, wie bereits erwähnt, kostenlos unter dem weiter unten genannten Link zur Verfügung. Um den Download zu ermöglichen, ist lediglich die Eingabe einer syntaktisch korrekten E-Mail-Adresse erforderlich, das ebenfalls vorhandene Feld "Name" kann ignoriert werden. Der Download wird zwar auch als Link per E-Mail zugeschickt, jedoch können Sie das Ebook schon unmittelbar nach Klick auf "Get the Guide Now" herunterladen. Die Gültigkeit der eingegebenen E-Mail-Adresse ist somit nicht Voraussetzung für den Download.

Links zum Beitrag

  • Downloadseite zum Ebook | Mobify
  • Startseite des Dienstes selber | Mobify