Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

Website-Konzeption: Mobile first und responsive Sites

Wireframes erstellen – Smartphone Version

Testen Sie unsere 2016 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Das Zeichenprogramm OmniGraffie dient der Erstellung von Wireframes für die Smartphone-Version der Website basierend auf den zuvor erstellten Scribbles. Im Internet stehen hierfür zahlreiche Templates als Vorlagen zum Download zur Verfügung.
10:35

Transkript

Für das Erstellen der Wireframes unserer neuen Site für den Trendfrisör verwende ich persönlich jetzt das Programm OmniGraffle. Auf die genauen Funktionen dieses Programms kommt es gar nicht an, Sie können das mit jedem beliebigen Zeichenprogramm tun, meinetwegen auch mit PowerPoint, wenn Sie sich damit wohlfühlen. Wichtig ist, wir bauen beim Wireframe ausgehend vom Scribble die konkreteren Funktionen. Wir sehen noch eher, wie die ganze Website am Ende wirklich aussehen wird. Sie können hier mit dem Programm beliebige Kästen zeichnen, können hier einfach anfangen, das Logo zu zeichnen, beschriften das mit "Logo". Sie kopieren diesen Kasten, verwenden es auch gleichzeitig als Bildkasten, setzen hier unten ein weiteres Bild hin, passen die Größe an und schreiben noch einen Text dazu. So kann das Ganze dann aussehen. Das ist sehr nüchtern, einfach und wenig hübsch, das soll es auch nicht sein, wichtig ist, ein Wireframe soll nicht das Design vermitteln, sondern nur die Anordnung der Elemente. Die Größenverhältnisse soll es klar machen und es soll Ihnen vor allem beim Konzipieren helfen zu merken, ob Ihre Seite so funktioniert oder ob Sie etwas vergessen haben. Etwas schöner wird es natürlich, wenn Sie ein Template verwenden, also eine Vorlage, die für Wireframes für fast alle Zeichenprogramme verfügbar sind. Suchen Sie einfach mal bei Google nach dem Stichwort "Template", "Wireframe" und dann den Namen des Zeichenprogramms, Sie werden sicher schöne finden. Ich persönlich habe hier das Wireframe&UIKit von Herrn C.Rowe eingebunden. Das habe ich angepasst, weil es für Illustrator gemacht war, damit es auch für OmniGraffle passt. Das ist auch alles sehr hübsch gestaltet, wie ich finde. Sie haben alle Elemente, die Sie brauchen, die dann schon ein bisschen schöner sind, womit Sie dann sehr schnell arbeiten können und nicht alles von Hand zeichnen müssen. Wichtig ist, dass Sie als Maßeinheit Pixel verwenden. Bei OmniGraffle kontrolliere ich das hier bei den "Units", und sehe, dass ich auf Pixel eingestellt habe. Das soll so sein, also keinesfalls auf Zentimeter arbeiten, sondern immer mit Pixeln. Ich möchte auch, dass das Bild ein bisschen größer wird, das ist mit einer Seite ein bisschen klein. Ich werde mehr Platz nach unten brauchen, weil ich schon weiß, dass ich eine sehr lange Seite habe, also eine Website, die aus nur einer HTML-Webseite besteht. Das heißt, nach unten gebe ich mir auf jeden Fall zwei Seiten. So, nun möchte ich loslegen und mir Führungslinien für die Smartphone-Version anlegen. Die möchte ich bei 480 Pixeln Breite haben. Die Breite von 480 Pixeln ist mittlerweile üblich, einige Leute arbeiten zwar noch mit den 320 Pixeln, die die ersten iPhones haben, das kann man auch machen. Ich denke aber, dass die Geräte langsam so selten werden, dass die meisten doch breitere Bildschirme haben, weshalb wir mit diesen 480 Pixeln Breite arbeiten können. Wenn wir so konzipieren, ist das auf einem Gerät mit 320 Pixeln normalerweise auch immer noch sehr gut zu lesen und bedienen. Was ich auch gleich hier noch ergänze, sind weitere Führungslinien mit zehn Pixeln Abstand zum Rand. Das mache ich, damit ich bei den Texten vor allem sicherstelle, dass die nicht ganz am Rand sind und ich eine Orientierung habe. Der Grund ist, dass es nicht gut aussieht und schlecht lesbar ist. Wenn der Text direkt an den Rand anschließt, kann man es nur schlecht lesen und wenn Sie dann noch ein Smartphone mit Rahmen haben, der vielleicht, auch den Screen noch etwas verdeckt, kann man den Text nicht mehr lesen. Daher sollten Sie also immer einen Sicherheitsabstand einhalten, zumindest für Texte. Nun zeichne ich mir auch noch die Screen-Höhe mit ein. Damit ich weiß, wie viel die Leute auf den ersten Blick sehen, wenn Sie auf die Seite kommen. Ich gehe bei 480 einmal hin und lasse dort eine Linie. Das ist die Höhe der alten iPhones. Es schadet nicht, das auf einem Blick zu haben. Es ist keine Linie, an der ich etwas Festes mache, aber ich will gerne wissen, was die Leute von der Höhe sehen werden und dann setze ich die nächste Linie auf 568 Pixel. Wir müssen noch herunterscrollen, damit wir dort hinkommen, und Sie sehen auch gleich etwas sehr Praktisches, nämlich dieses "Snap to Grid", also das "automatische Schnappen" der Elemente, die ich bewege, auf die Rasterlinien. Aber ich komme hier nicht auf die 568, die ich gerne hätte. Wenn ich das so genau haben möchte, gehe ich wieder auf "Grid", schalte das "Snap to Grid" aus, setze meine Linie da, wohin ich sie haben möchte, nämlich auf die 568 Pixel, und schalte die Funktion wieder ein, weil sie praktisch ist. Sie sehen, es hat sich einiges getan. Ich habe zum Beispiel die Überschrift größer gemacht, die war mir noch etwas zu klein. Ich habe hier unten das Formular fertig gemacht und noch Platzhalter für Text und Bilder eingefügt. Beim Bauen der Wireframes fallen einem immer wieder Sachen auf, die einem beim Scribble gar nicht aufgefallen sind. Das Formular gefällt mir noch nicht so gut, ich stelle nämlich fest, es fehlt die Überschrift. Man weiß gar nicht, wofür es überhaupt da ist und eigentlich muss der Wunschtermin an erster Stelle stehen. Sie wollen ja erst wissen, ob ein Termin frei ist, bevor Sie Ihren Namen oder E-Mail-Adresse hergeben. Eine weitere wichtige Sache bei den Wireframes ist, dass man hier ja auch eben schon in Pixeln rechnet, wo einem dann Dinge auffallen, wie dass dieser Button hier eigentlich zu klein ist. Ich schaue mir hier einmal an, wie es aussieht. Ich sehe hier auch eine ganz krumme Größe, die durch das Skalieren der Elemente zustande gekommen ist. Wichtig ist aber, dass 32 Pixel in jedem Fall zu klein ist. Die gängige Empfehlung ist, dass ein Button mindestens 44 Pixel groß sein sollte, damit man mit dem Finger gut darauf tippen kann. Ich ändere das hier jetzt also auf 44 Pixel, sieht auch gar nicht so viel größer aus, aber in der Usability wird es eine ganz große Erleichterung sein, weil man so den Button gut trifft. Eine weitere Zahl: Wenn man daneben noch einen Button setzt, sollte man mindestens einen Millimeter Abstand zum nächsten Element nehmen. Das ist in Pixeln immer etwas unterschiedlich je nach Screen, aber wenn man zehn Pixel Abstand lässt, dann ist man normalerweise auf der sicheren Seite. Wichtig ist, dass wir immer in Pixeln rechnen, denn das Zeichnen in Zentimetern ist eigentlich nie sinnvoll, weil man nie weiß, wie groß das Element jeweils auf dem Screen dargestellt wird. Aber am Ende ist für die Usability die Größe in Zentimetern natürlich schon wichtig, denn wenn ich die Buttons so eng aneinander habe, dass ich da nicht hinkomme, kann ich das natürlich in Zentimetern und nicht in Pixeln angeben. Hier aber müssen wir uns auf die Pixel beschränken und legen die immer so an, dass wir einfach auf der sicheren Seite sind. Zusammenfassend noch einmal: Buttons 44 Pixel groß machen, zehn Pixel zum nächsten Button Platz lassen, dann sind Sie immer auf der sicheren Seite. Wenn das Wireframe fertig ist, wollen Sie es ja auch präsentieren. Das können Sie im Grafikprogramm machen, aber in den meisten Fällen ist es sinnvoll, das in einer anderen Form zu präsentieren. Sie exportieren es zum Beispiel als Bild und verschicken es. Sie können es sogar ausdrucken und zu einem Gespräch mit dem Kunden mitbringen, aber ich empfehle, denen, die damit nicht so viel zu tun hatten, das in einer etwas modifizierten Version zu präsentieren, nämlich das in eine Art Rahmen einzubauen, damit man eine Vorstellung davon hat, wie das auf dem Gerät dann wirklich aussehen wird. Dazu verwende ich hier wieder eine Vorlage, in der ich schon verschiedene Elemente darin habe. Ich habe hier ein kleines iPhone. Ich habe hier ein kleines iPad und einen Desktop-Computer. Wir schauen uns jetzt aber nur diese iPhone-Variante an. Ich bin auf 100 Prozent Größe und ich kopiere mir jetzt aus meinem Dokument alle Elemente. Das heißt, ich sage "Strg+A", um alles auszuwählen, ich sage "Strg+C", um es zu kopieren, gehe zu meinem Fenster, in dem das Template liegt, füge hier alles wieder ein und sehe, dass es viel zu groß ist. Sicherheitshalber gruppiere ich das Ganze auch noch einmal. Das heißt, rechte Maustaste darauf, "Group", dann geht mir auch kein Element verloren, wenn ich skaliere. Ich möchte das jetzt nämlich kleiner machen. Wenn ich das einfach so mache, hier anpacke und das Ganze kleiner mache, funktioniert das zwar eigentlich ganz gut, aber die Texte sind viel zu groß. Ich mache es noch einmal rückgängig, gehe jetzt hier zu "Geometry" und stelle "Scale Stroke and Font" an. Wenn ich jetzt nochmals skaliere, dann sehe ich, dass auch die Schrift kleiner wird. Das heißt, die Schrift wird jetzt proportional verkleinert mit meinen Objekten, die hier sonst noch darin sind. Das ist einfach eine große Arbeitserleichterung in dem Programm, da ich das relativ schnell anpassen kann. Ich sehe jetzt hier meine Seite quasi in dem Rahmen dieses Gerätes, das steht unten noch ein bisschen heraus. Deshalb hebe ich die Gruppierung wieder auf, sage "Ungroup", schneide unten einfach die letzten Objekte weg und damit sieht das doch schon präsentabel aus. Auch jemand, der noch nicht viel mit Wireframes gearbeitet hat, kann sich jetzt hier vorstellen, wie seine Website auf so einem mobilen Gerät aussieht.

Website-Konzeption: Mobile first und responsive Sites

Konzipieren Sie Websites, die für unterschiedlichste Geräte – vom Smartphone bis zum Fernseher – geeignet sind und lernen Sie die Werkzeuge und Programme kennen, die hier zum Einsatz kommen.

1 Std. 32 min (18 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Exklusiv für Abo-Kunden
Erscheinungsdatum:17.12.2014
Aktualisiert am:14.07.2017

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!