Sketch vs. Photoshop Umstieg auf sketch - Next Level für brandung?

Mit Photoshop UI gestalten?

Macht das wirklich Sinn?

Photoshop für Web: Fluch und Segen
  • Multifunktionswerkzeug
  • Grenzenlose Gestaltung
  • An erster Linie für Fotografen, Composer, Retuscher, Illustratoren etc.
  • Tastenkürzel wie eigene Westentasche
  • Kennt man besser als seine Freundin / Frau / Freund / Mann
  • Aber Web?
"Adobe Photoshop [əˌdoʊbi ˈfəʊtəʊʃɒp] ist ein Bildbearbeitungsprogramm für (vorrangig) Pixelgrafiken des US-amerikanischen Softwarehauses Adobe Systems."

Sketch

"Sketch ist made for web - icon - UI - UX - mobile - product - icon- designers

Like you and me.

Sketch

H

A

M

M

E

R

Features

Software

  • Kleine Software Datei (22,4 MB)
  • Vektorbasiertes System
  • Kein Abo-System
  • Einmalig 99$
  • Aktuell leider nur für Macs

Bedienoberfläche

  • Aufgeräumt
  • Clean & Simple
  • Alles Nötige für Webdesign
  • Erweiterbar mit Plugins
  • Artboards (= Zeichenflächen wie bei PS)

Performance

  • Kleine Arbeitsdateien
  • Auch bei x-beliebigen Artboards effektiv
  • Alle Templates eines Projektes in EINER Datei

Clipboard Fill

  • Effizientes Bildeinfügen in Layouts
  • Einfach Bild aus dem Internet kopieren
  • Direkt in eine Form einfügen
  • Ohne Schnittmasken etc.
Bild aus z.B. Google kopieren
Direkt in eine Form im Layout einfügen

Craft by InVision

  • Kein Lorem Ipsum notwendig
  • Clevere und realitätsnahe Platzhalter-Texte und -Bilder
  • Nahtloses und Effizientes Prototyping direkt in Sketch
  • Synchronisierung mit InVision
  • Direkt aus Sketch in InVision hochladen, Prototypes verfeinern
  • Eigene Datenbanken für Platzhalter-Texte o. -Bilder definieren
  • Asset-Austausch mit Kollegen
  • Styleguide-Erstellung aus Elementen aus den Layouts
  • Extrem Effizient und Zeitsparend
Eigene automatisierte Platzhalter-Texte und -Bilder. Oder aus dem Internet
Horizontales Vervielfachen und automatisierte Platzhalter-Texte u. -Bilder
Vertikales Vervielfachen.

Icon Font

  • Benutzung eigener oder vorgefertigter Iconfonts beim Layouten
  • Keine Vektorgrafik, oder Icons als Smartobjects nötig
  • Direkte Benutzung des Iconfonts, wie später in der FE-Umsetzung
Auswahl des Icons direkt aus dem Iconfont
Auswahl der Iconfont-Sets über Menüleiste

Prism

  • Automasiertes Generieren von Farbpaletten
  • Versehen mit cleveren Farbnamen
  • Namen auch personalisierbar
  • Export als CSS für FE (CSS, SASS variables, Swift, etc)
Generierung der Farbpalette
Export der Farbwerte
Frontend freut sich über Vorgaben. Design freut sich über Einhaltung der Farbwerte

Measure

  • Automatisierte Messung von Maßen und Abständen
  • Abstände zwischen Objekten messen lassen
  • Abstände zu Rändern und sonst wo
  • Optimal für Styleguides, FE Vorgaben etc.

Auto Layout

  • Extrem effizientes und zeitsparendes Plugin
  • Automatisierte Adaption eines Layouts in unterschiedliche Device-Größen
  • 1x Layoutelemente vorbereiten - x-Mal adaptieren
  • von mobile bis Desktop - Extrem effektic
Nahtlose Übertragung des Layouts in alle Devices möglich
Schnelles und effizientes Arbeiten
Auch geeignet für bildlastige Layouts

Principles

  • Animationen für Prototypen direkt in Sketch
  • Perfekt um den Wunsch dem FE zu präsentieren
  • intuitiv zu bedienen
Einfache Zeitleiste
Clevere und einfache Animationen von Screen zu Screen

Zeplin

Hand-Off Tool

Mehr von Thomas

Next Level für brandung?

Kosten

  • Einmaliger Preis von 99$
  • Preisrabatt bei Teambestllungen
  • Kein Abo-Sytem wie bei Adobe
  • Andere Lösungen werden überflüssig und entsprechend entfallen Zahlungen (z.B. webflow)

Produktivität

  • Fast "All-in-One" Produkt
  • Gestaltung von Webprojekten optimiert für Web
  • Erweiterbar durch kostenlose Plugins die die Produktivität steigern
  • qualitative Ergebnisse

Effizienz

  • Automatisierte Vorgänge, die Effizienz steigern
  • Nahtlose Verknüpfung von Prozessen in wichtigen Tools (z.B. InVision, Zeplin)
  • Endlich eine Lösung für mögliche Hand-Off Prozesse
  • Kein Bedarf an anderen Lösungen wie z.B. webflow

Mögliche Wege bzw. Hürden oder Contras

  • Umstieg von gelerntem und vertrautem auf eine neue Software
  • Gewöhnungszeit für alle Designer
  • Sketch nur für Macs
  • Photoshop braucht man für komplexere Bildwelten, Grafiken etc. immer noch
  • Empfohlen: Ins kalte Wasser springen, einfach machen
  • Bedienung ist gängig, schnell gelernt
  • Learning by Doing
  • Nicht passende Zeit abwarten, sondern loslegen

.

.

.

"Manche wollen es, manche wünschen es und andere verwirklichen es."

Michael Jordan

.

.

.

.

Level 1 (Photoshop) done!

Created By
Enes Baskaya
Appreciate

Made with Adobe Slate

Make your words and images move.

Get Slate

Report Abuse

If you feel that this video content violates the Adobe Terms of Use, you may report this content by filling out this quick form.

To report a Copyright Violation, please follow Section 17 in the Terms of Use.