LERNENDE Leitfaden Sketch-Design & Prototyping Tool Eric Marty - Seite 1 von 15
←
→
Transkription von Seiteninhalten
Wenn Ihr Browser die Seite nicht korrekt rendert, bitte, lesen Sie den Inhalt der Seite unten
Leitfaden
LERNENDE
Sketch-Design & Prototyping Tool
Eric Marty
Seite 1 von 15
Inhaltsverzeichnis
3 Einleitung
4 Swisscom Digital Experience
5 Erste Schritte
6 Artboards exportieren
7 Arbeiten mit Grid
8 Symbole in Sketch
9 Strukturierung von Dokumenten
10 Klickbare Prototypen
11 Dropbox
12 Sketch Cloud
13 Feedback und Testing
14 Arbeittools
15 Websiten
Seite 2 von 15
Einleitung
Wir begleiten unterschiedlichste In diesem Dokument findest du
Vorhaben in der Ideen Phase. Dabei verschiedene Hinweise zu unserer
unterstützen wir Projekte insbeson- Arbeitsweise. Ebenfalls findest du
dere beim schärfen ihrer Ideen, beim am Schluss eine Liste mit den wich-
Prototyping, User Testing und Design. tigsten Tools und Websites für dieses
Wir von Enterprise Online Experience Projekt.
haben das Ziel, jedem Nutzer ein Grundlegende Dinge wie Regeln,
aussergewöhnliches Erlebnis zu Arbeitszeit usw. befinden sich in der
bieten. Projekt-Präsentation.
Wir achten konsequent auf den Kun-
denfokus und schaffen damit Erleb- Hier gehts zur Powerpoint
nisse, mit denen wir unsere Kunden
begeistern möchten.
Dieses Dokument leitet dich dabei
durch die einzeInen Arbeitsschritte
und dient dir als Anleitung. Ebenfalls
dient es dir als Starthilfe im Projekt.
Nutze es und versuche davon zu
profitieren. Natürlich ist es erlaubt
nachzufragen. In erster Stelle solltest
du jedoch selbstständig in diesem
Nachschlagewerk nachschauen.
Seite 3 von 15
Swisscom Digital Experience
Die Swisscom Digital Experience SDX ist ein Framework. Ein Frame-
(SDX) ist unser Ansatz zur Kreirung work ist eine allgemeine Vorgabe,
einzigartiger Digitalerlebnisse, die die jegliche Details über die einzel-
wie Swisscom einzigartig aussehen, nen Komponenten bereithält. Das
sich anfühlen und verhalten. heisst für uns als Designer, Details
Mit dem SDX können Produktmana- wie Grösse, Abstände, Farbe usw.
ger, Designer, Entwickler und andere Zusätzlich bietet es für die Ent-
Experten digitale Anwendungen effi- wickler der Website bereits fertige
zienter erstellen. Der Ansatz, Kompo- Code-Fragmente, welche sie bei ihrer
nenten wiederzuverwenden, anstatt Arbeit einsetzen können.
sie neu zu erstellen, verbessert nicht
nur die Konsistenz und Qualität
unserer Dienstleistungen. Es macht
Sie auch schneller, verbessert Ihre
Time-to-Market und spart schließlich
Geld.
Aus diesem Grund arbeiten wir strikt
nach SDX. Dadurch ist es wichtig,
dass du dich auch daran hältst. Nur
so können wir einen „einheitlichen
Look“ garantieren.
Sämtliche Komponenten sind im
Sketch in der SDX Library hinterlegt.
Dort kannst du jederzeit auf sie zu-
greifen und sie verwenden. Das wird
dir viel Zeit ersparen.
Link zu SDX:
www.digitalexperience.swisscom.ch
Seite 4 von 15
Erste Schritte
Um deinen geplanten Prototypen
in Sketch umzusetzen musst du
zuerst ein neues Artboard erstellen.
Ein Artboard ist die sogenannte
Arbeitsfläche in Sketch. Hierzu gibt
es bereits vordefinierte Grössen vom
Programm. Wir verwenden jedoch Artboard erstellen
meistens ein custom Artboard.
Das Artboard Tool findest du oben in
Mit der Grösse 1440x1000px und
der Toolbar
1280x1000px. Die Höhe ist dabei
jedoch variabel. Die Breite spielt
dabei die wichtigere Rolle. Diese ist
begränzt bei Computerbildschirmen.
Nach unten ist es jedoch immer
möglich zu „scrollen“.
Das Artboard Werkzeug findest du
oben in der Werkzeugleiste. Falls
du es noch nicht dort platziert hast,
gehe zu: View -> customize Toolbar
und wähle „Artboard“ aus.
Zu einem neuen Artboard gehört
natürlich auch immer ein Header
und ein Footer dazu. Platziere sie
zu beginn im Dokument. Sämtliche
Komponenten findest du dabei in der Custom Artboard
integrierten Business Center Library.
Wähle eines von dir zuvor erstellten
Diese musst du jedoch zuerst in den
Artboards aus und baue deinen Pro-
Einstellungen verknüpfen.
totypen darauf auf.
Seite 5 von 15
Artboards exportieren
Die Artboards, Designs kannst du in
verschiedene Formate exportieren.
Die gängigsten davon sind PNG und
JPG.
Achte auf die gewünschte Auflö-
sung. Bei Sketch Files, die bei einer
Präsentation gezeigt werden sollten.
Empfehlen wir dir bei „Size“ 2x aus-
zuwählen.
Ein Artboard exportierst du wie
folgt: Gehe zu „make exportable“
auf der rechten Seite. Treffe die not- Einstellungen treffen
wendigen Einstellungen und expor-
tiere anschliessend das gewünschte Damit dein Artboard auf dem Ziel-
Artboard. medium auch korrekt dargestellt
wird solltest du korrekte Einstellun-
gen treffen.
Exportieren
Export vorbereiten Mit diesem Button exportierst du
dein Artboard.
Artboard für Export vorbereiten
Seite 6 von 15
Arbeiten mit Grid
Das wir unseren einheitlichen Look
beibehalten können nehmen wir
uns ein Grid zur Hilfe. Ein Grid ist ein
Raster mit vorgegeben Abständen,
welcher uns bei der Positionierung
der einzelnen Elemente hilft. Seine
Hauptaufgabe besteht jedoch darin,
dass das User Interface Responsive
ist. Das tut er, da er die Abstände
stets gleichhält.
Achte darauf, dass du stets das rich- Grid auswählen
tige Grid für dein Artboard (Seite 5) In der SDX (Seite 4) Library kannst
verwendest. Das heisst bei 1440px du unter „Grid“ die entsprechende
auch das Grid mit 1440px. Grösse wählen.
Zusätzlich achten wir auf eine
saubere Verwendung von Abständen.
Generell immer mit Zahlen, welche
sich in der 8ter-Reihe befinden. Das
heisst 8px, 16px, 24px usw.
Gesetzer Grid
Nachdem du das Grid auf dem
Artboard platziert hast, kannst du
Transparenz verringern, damit dich
Abstand zu Objekt die Streifen nicht irritieren.
Ebenfalls ist es möglich den Abstand
mit „alt“ zwischen zwei Objekten zu
messen.
Seite 7 von 15
Symbole in Sketch
Symbole sind dafür da Elemente,
die du in deiner Datei mehrmals be-
nötigst als „ Preset“ abzuspeichern.
So musst du z.B. gewisse Elemente
nicht nochmals von Grund auf neu-
gestalten. Sämtliche SDX (Seite 4)
Library-Komponenten sind als Sym- Symbol erstellen
bole abgespeichert. Gib deinen Symbolen einen einmali-
Ein Symbol erstellst du, indem du gen Namen
dein gewünschtes Objekt auswählst
und nachher in der Werkzeugleiste
„Create Symbol“ klickst.
Mit Symbolen kannst du deine Do- Erstelltes Symbol
kumente sauber Strukturieren und Symbol mit Namen
eine gute Übersicht behalten.
Es ist auch möglich Objekte zu
Gruppieren, anstatt ein Symbol zu
erstellen. Gruppen bieten sich eher
für einmalige, zusammengehörige
Elemente an.
Symbole helfen dir deine Arbeit Erstellte Gruppe
schneller zu erledigen ohne müh-
Gruppe mit Namen
sames wiederholen der gleichen
Arbeitsschritte. Du kannst sie dabei
so oft verwenden wie du willst.
Liste der Symbole Liste der Symbole
Symbole erstellen in der Werkzeug- Auflistung deiner erstellten Symbole
leiste
Seite 8 von 15Strukturierung von
Dokumenten
Eine saubere Strukturierung deines
Dokuments basiert darauf, ob es für
jemanden, der das Dokument zum
ersten Mal öffnet ebenfalls verständ-
lich ist.
Das kannst du erreichen, indem du
sämtliche Komponenten (Symbole,
Gruppen etc.) verständlich benennst.
Z.B den Button zum Absenden einer
Datei benennst du „button_submit“
usw.
Korrekter Aufbau
Die einzelnen Elemente/Gruppen
sollten verständlich benennt sein.
Seite 9 von 15Klickbare Prototypen
In Sketch besteht die Möglichkeit,
die fertigen Prototypen klickbar zu
machen. Klickbar heisst, z.B. einzelne
Flächen (Buttons) oder ganze Seiten
reagieren auf einen Mausklick. So-
fern sie mit einem anderen Artboard Gesetzter Hotspot
verbunden sind, geschieht eine dem- Ein gesetzter Hotspot
entsprechende Reaktion.
Um einen Bereich auf deinem Art-
board (Seite 5) klickbar zu machen,
benötigen wir einen Hotspot. Ein
Hotspot macht einen bestimmten
Bereich klickbar.
Das Hotspot-Tool findest du in der
Werkzeugleiste (Toolbar). Ziehe ihn
am gewünschten Zielort auf und
verbinde ihn mit einem auf einem
anderen Artboard gelegenen Hot-
spot. Gehe nun zu „preview“, um das
Verhalten des Prototyps zu testen.
Ebenfallls ist das eine Simulation der
erstellten Website
Hotspot in Werkzeugleiste Hotspots verlinken
Einen Hotspot findest du in der Ein gesetzter Hotspot kanst du mit
Toolbar anderen verbinden
Seite 10 von 15Dropbox
Damit wir unsere Dateien wieder- Unsere Sketch Dateien speichern wir
finden und sie im Verlust eines unter 01_Sketch_Files. In diesem be-
Crashes gesichert sind, speichern finden sich weitere Unterordner mit
wir sämtliche Dateien auf Dropbox. einem bestimmten Thema. Meistens
Aus diesem Grund lege dir bitte so wirst du nur mit diesem Ordner
schnell wie möglich einen Account Arbeiten
auf Dropbox zu. Sämtliche Dateien werden folgend
Ebenfalls haben wir die Dropbox wie abgespeichert:
folgt aufgeteilt:
TagMonatJahr_Thema_Initialen
01_Sketch_Files
02_Experience Beispiel:
03_Keynote 090218_Leitfaden_EM
04_SDX
05_Projektstart Link zu unserer Dropbox
EOX Ablage
Dropbox Account erstellen
www.dropbox.com
Ordnerstruktur Benennung
Die Ordner legen wir wie im oben- Alle Dateien werden immer gleich
stehenden Bild ab. Unterteilt in abgespeichert.
einzelne Themen.
Seite 11 von 15Sketch Cloud
Sketch Cloud ist ein Service, mit
dem sich jeder anmelden kann, um
Sketch-Dokumente anzuzeigen, her-
unterzuladen und zu kommentieren,
die öffentlich freigegeben wurden,
oder privat direkt von Sketch aus.
In Sketch Cloud hochgeladene Doku-
mente können entweder über einen
Link oder privat angezeigt werden.
Deine mit Sketch erstellten Prototy-
pen kannst du mit dem setzen eines
Hotspots (Seite 10) klickbar machen.
Du kannst dabei einzelne oder ganze
Seiten miteinander verbinden. So
kannst du einen Eindruck bekommen,
wie sich der Prototyp verhalten wird.
Anschliessend kannst du sie auf der
Sketch Cloud hochladen.
Upload in Cloud
Hier kannst du dein Dokument hoch-
laden
Seite 12 von 15Feedback und Testing
Unsere Prototypen testen wir um
rasch Feedback zu erhalten, ob unsre
Ideen verständlich sind.
Aus diesem Grund ist es wichtig von
möglichst vielen Personen eine Rück-
meldung einzuholen. Manchmal
erkennen diese Probleme, die wir
selbst nicht erkennt hätten.
In Team besprechen wir deshalb
unsere Prototypen in der UX Gilde.
Die UX Gilde ist ein Treffen verschie-
dener interner UX Experten, die uns
Feedback zu unseren Prototypen
geben.
Manchmal absolvieren unsere
Prototypen ebefalls ein Testing mit
Geschäftskunden. Das ist ein sehr
wichtiger Bestandteil, da es schluss-
endlich die Geschäftskunden sind,
welche unsere Produkte benutzen.
Seite 13 von 15Arbeittools
Sketch Sketch ist ein Design Tool um vektor basierte Prototypen
und Grafiken zu erstellen
Sketchcloud Sketch Dokumente mit anderen teilen, downloaden und
kommentieren
Adobe Indesign Gestalten von Layouts und Dokumenten
Adobe Illustrator Gestalten von Illustrationen und Grafiken
Adobe Photoshop Bearbeitung von Grafiken und Fotos
(Für Mockups)
Adobe Premiere Videos schneiden, bearbeiten und gestalten
Adobe After Effects Animationen und Effekte
Adobe Experience Design von User Experience und
Prototyperstellung
Powerpoint Präsentationssoftware
Keynote Alternative zu Microsoft Powerpoint
Teams Interne Kommunikation
InVision Digitale Produktdesign Plattform, Sketch Prototypen mit
anderen teilen
Evernote Organisationstool für deine Notizen
(andere Tools möglich)
Seite 14 von 15Websiten
Dribbble Inspirations - und Feebackquelle für Designs
Behance Inspirationsquelle für Designs
Unsplash Lizenzfreie Bilder zur kommerziellen Nutzung
Pexels Lizenzfreie Bilder zur kommerziellen Nutzung
Freepix Lizenzfreie Grafiken und mehr zur kommerziellen
Nutzung
Adobe Color CC Abmischen von Farben
Google Fonts Lizenzfreie Schriften von Google
Dafont.com Lizenfreie Schriftensammlung
Seite 15 von 15Sie können auch lesen
