Web- und Screendesigns effizient gestalten mit Sketch

Die Konzeption einer Website oder deren Relaunch geht einher mit der Entwicklung und Erstellung von Screendesigns. Auf Basis dieser Screendesigns leitet der Webentwickler die Templates für die Umsetzung der Website ab. Innerhalb des Responsive Webdesigns können hierzu eine Vielzahl von Screendesigns für die unterschiedlichen Viewports anfallen. Je nach Umfang und Anforderung können diese Screens für Desktop, Tablet und Smartphone sein. Dabei gilt es sowohl den Landscape- sowie Portraitmodus ebenfalls zu berücksichtigen – wobei diese lediglich die Auswertung des Seitenverhältnisses des Browserfensters darstellt und nicht die Abhängigkeit des Devices darstellt.

Responsive Webdesign benötigt viele Screens

Gerade diese Vielzahl an notwendigen Screens sind zeitintensiv zu erstellen und wurden bisher in den zeroseven design studios in Adobe Photoshop realisiert. Um bei Screendesigns, insbesondere für die mobilen Ansichten effizienter und schneller zu werden, waren wir auf der Suche nach einem Tool, um das Webdesign einfacher zu gestalten, ohne dabei Abstriche im Design und der Handhabung machen zu müssen. Adobe Photoshop bietet zahlreiche Werkzeuge sowie Effekte und ist eigentlich in der Bildbearbeitung führend, jedoch für die Anforderungen eines modernen Webdesigns nur bedingt optimal einsetzbar.

Unsere Praktikantin Amelie Chupin kam während ihres Studiums an der Hochschule für Gestaltung Schwäbisch Gmünd mit verschiedenen Tools für das UI Design in Berührung, unter anderem mit Sketch, was den Anlass bot, das Programm als Alternative zu den Adobe Programmen zu testen.

Sketch im Test bei der Erstellung von Screendesigns

Sketch ist ein vektorbasiertes Programm, dass sich auf digitale Medien spezialisiert hat. Es eignet sich daher, ebenfalls pixelbasierte Projekte zu gestalten. Hierfür kann man zwischen Vektor und Pixeldarstellung umschalten.

Sketch ähnelt dem Grundaufbau von Adobe und ist damit sehr intuitiv bedienbar. Alle Grundwerkzeuge, die es in Adobe gibt, sind auch in Sketch enthalten. Die Logik, mit verschiedenen Ebenen zu arbeiten, ist ebenfalls vorhanden. Demzufolge kann man nach einer kurzen Kennenlernphase schnelle und ansprechende Ergebnisse erzielen.Durch viele Voreinstellungen und Templates wird das Suchen nach dem richtigen Format und dem passenden Grid gespart, sodass man direkt in der richtigen Auflösung loslegen kann.

Sketch iOS UI Design Templates
Sketch iOS UI Design Templates

Voreingestellte Artboards (entsprechen den Zeichenflächen in Illustrator) umfassen unter anderem die Größen von Desktop HD, Desktop, Tablet und Mobile und lassen sich beliebig erweitern.

Artboards
Voreingestellte Artboards für die Bildschirmgrößen Desktop HD, Desktop, Tablet und Smartphone

Ein weiterer Vorteil in Sketch ist das Erstellen von Symbolen. Beispielsweise lässt sich so eine Navigation, die auf jedem Screen auftritt, einmal erstellen und beliebig oft auf unterschiedlichen Artboards einfügen. Wird die Navigation im Nachhinein verändert, reicht es, das Symbol zu ändern. Alle Symbole werden dann auf den Artboards aktualisiert. 
Es gibt außerdem schon einige iOS Symbole in Sketch, wie zum Beispiel unterschiedliche Keyboards, Status Bars, Alert Views und vieles mehr, die die Arbeitszeit verringern und es ermöglichen realistische Screens zu erstellen.

Die gängigsten Stile (Transparenz, Schatten, Füllung, Weichzeichner) werden übersichtlich rechts angezeigt, um alle Elemente schnell zu bearbeiten.

Gängigste Stile wie Transparenz, Schatten, Füllung und Weichzeichner

Des Weiteren lassen sich durch die App „Sketch Mirror“ die Artboards direkt auf dem Smartphone anzeigen und testen. Dadurch erübrigt sich, mühsames verschicken von Screens.

Sketch Mirror App

Die Artboards sind ebenfalls über den Browser abrufbar und werden wie in der App live aktualisiert.

Die Exportoptionen ermöglichen es, unterschiedliche Formate, Größen und Qualitäten in einem Arbeitsschritt zu exportieren.


Durch Plugins lässt sich Sketch noch weiter optimieren. Das Craft Plugin von Invision zum Beispiel, umfasst unterschiedliche Tools, die sowohl alleine als auch im Team Vorteile bieten. Zum einen kann man mit Craft verschiedenen Content generieren, seien es Fotos, Namen oder Daten. Sketch lässt sich dabei mit einer Stock Plattform, Dropbox oder lokalen Ordnern verbinden. Auch lässt sich der gesamte Content einer Website in die Gestaltung integrieren.
Durch Sync lassen sich Farbschemen, Textformate und Buttons konzipieren, die dann allen Designs des Teams zur Verfügung stehen.
Ein Nachteil von Sketch ist, dass bei größeren Dateien die Performance leidet und die Software nicht mehr flüssig läuft. Außerdem stellt sich einfaches Maskieren als umständlich dar.

Test-Fazit

Abschließend können wir folgendes Fazit ziehen: Sketch ist bestens für Web- und App-Design geeignet. Übersichtliche Darstellung und einfache Werkzeuge ermöglichen es, schnelle Konzepte und Screendesigns zu erstellen. Plugins erweitern das Tool um einige Funktionen und bilden so im Wesentlichen einen Mehrwert beim Generieren von Content und der Zusammenarbeit im Team. Im Bereich des Webdesigns lässt sich Photoshop vollkommen mit Sketch ersetzen, jedoch wird das Tool die umfassenden Möglichkeiten der Bildbearbeitung von Adobe Photoshop nicht erreichen.

Social Media Automation mit dem TYPO3 CMS

Wie wäre es also, wenn Social Media Engagement automatisch und direkt aus dem TYPO3 Backend zu steuern ist?

Mittlerweile besteht Einigkeit darin, dass Social Media Engagement nicht „mal eben nebenbei“ erledigt werden kann. Viele Unternehmen haben erkannt, dass es nicht ausreicht, einen technikaffinen Mitarbeiter mit der Betreuung von Facebook, Twitter & Co. zu beauftragen und diese dort intuitiv agieren zu lassen. Sie haben erkannt, dass Social Media eine Strategie voraussetzt und es wichtig zu wissen ist, welche Themen, Plattformen für das Unternehmen Relevanz haben und von wem diese diskutiert werden. Dementsprechend haben sich die Social Media Kanäle als Instrumente im Marketing-Mix etabliert, die sowohl fachliche als auch finanzielle Ressourcen benötigen.

Trotz dieser positiven Entwicklung stellt das Social Media Engagement immer noch eine zeitintensive Disziplin dar, welche die Rufe nach Tools zur Unterstützung nicht verstummen lassen.

Der Markt bietet zahlreiche Werkzeuge, jedoch keine um aus einem Contentmanagementsystem wie TYPO3 heraus zu agieren.

Zu schön um wahr zu sein?

Nicht mit unserer TYPO3 Social Media Automation Extension.

Die TYPO3 Extension der zeroseven design studios mit seinen RSS-Feeds ist die Basis für die einfache Social Media Automation.

Mit der Social Media Automation Extension werden relevante Inhalte einfach und bequem, zentral im TYPO3 Backend gepflegt. Im Anschluss hieran können diese Inhalte automatisiert über einen RSS-Feed in Social Media Kanäle wie Facebook, Twitter, XING, Instagram und Pinterest geteilt werden.

Die Steuerung direkt aus TYPO3 heraus bietet einige Vorteile, da der relevante Content bereits im TYPO3 CMS hinterlegt ist und somit doppelte Datenbestände vermieden werden können. Darüber hinaus steht eine Hashtag-Library zur Verfügung, die es ermöglicht häufig verwendete Begriffe zu definieren und eine einheitliche Schreibweise sicherzustellen. Bei Bedarf können diese Hashtags ausgewählt werden.

TYPO3 Social Media Automation Extension im Backend

Mit dieser TYPO3 Social Media Automation Extension gelingt wieder die Fokussierung auf das Wesentliche der Arbeit. Mit wenigen Klicks wird ein einfacher und flexibler Automationsworkflow realisiert, der den Social-Media-Prozess schneller sowie produktiver gestaltet. Dabei werden keine Programmierkenntnisse benötigt.

TYPO3 Social Media Automation Extension im Backend

Publikation

Inhalte können mit TYPO3 Social Media Automation Extension direkt aus dem Backend des TYPO3 CMS terminiert und gestaffelt publiziert werden. Status-Updates lassen sich damit über die Zeit verteilt veröffentlichen, um möglichst viele Empfänger aus der relevanten Zielgruppe anzusprechen.

Distribution

Ein Inhalt – zum Beispiel der Hinweis auf einen neuen Blogbeitrag – lässt sich automatisch auf mehreren Social-Media-Plattformen zeitgleich oder zeitversetzt veröffentlichen.

TYPO3 Social Media Automation Extension im Backend

TYPO3 Social Media Automation Extension im Backend

Social Media Automation für eine Vielzahl an Plattformen

Facebook und Twitter Automation

Über die RSS-Feeds der TYPO3 Social Media Automation Extension und unseren Automationsdienst lassen sich zwei mögliche Varianten der Automation auf Facebook und Twitter realisieren. In der ersten Variante werden Status-Updates mit Text, Bild und Links ermöglicht. Mit der zweiten Variante lassen sich Fotos auf der Facebook Fanpage oder Twitter direkt aus TYPO3 veröffentlichen. Welche Variante gewählt wird, steht frei und es kann zwischen ihnen gewechselt werden.

XING Automation

Durch den speziell für XING optimierten RSS-Feed der Social Media Automation Extension für das TYPO3 CMS können Mitarbeiter, diesen in ihr Profil einbinden. Mit jeder neuen Meldung teilen diese Mitarbeiter neue Nachrichten automatisch in deren XING-Netzwerk und werden damit als glaubwürdiger Markenbotschafter des Unternehmens wahrgenommen und erzielen damit eine hohe Reichweite.

Instagram und Pinterest Automation

Die TYPO3 Extension stellt Fotos mit Beschreibung und Link automatisch auf den Fotoplattformen bereit. Damit wird lediglich auf die Bilder zugegriffen, die in TYPO3 gepflegt bzw. in der Dateiliste hinterlegt sind. Das spart Zeit durch die Vermeidung von zusätzlichen Uploads auf den jeweiligen Plattformen.

Haben wir Ihr Interesse geweckt?

Perfekt! Gerne stellen wir Ihnen in einem persönlichen Termin die Extension unverbindlich und kostenlos vor.
Am besten kontaktieren Sie uns noch heute – wir freuen uns auf Sie!

Auslandssemester 2.0: Zwischenruf aus Mexiko Episode III

Die 26 meist erwarteten Tage im Jahr – Auslandssemester goes Volksfest

Es ist Freitagabend, wir lassen die Uni hinter uns und genießen den Start in das Wochenende. So machen wir uns gegen 21 Uhr auf den Weg zur Feria. Dabei handelt es sich um ein wahnsinnig großes Volksfest hier in León. Das Feria-Volksfest wird während dem 14. Januar und 8. Februar gefeiert wird.

Gespannt, was mich dort erwartet, bin ich für ziemlich alles gewappnet. Das Erste was ich sehe sind Menschen, Menschen und noch mehr Menschen. „Vielleicht ist Freitag nicht der geeignete Tag, um sich dort in Ruhe umzuschauen“ – denke ich mir. Angesteckt von der mexikanischen Gelassenheit begebe ich mich aber voller Vorfreude in das Getümmel und werde natürlich nicht enttäuscht.

Es gibt unglaublich viele verschiedene Schauplätze: So gibt es z. B. täglich Konzerte mit regionalen Künstlern, regelmäßige „Ilusion on Ice“-Shows, Zirkusvorstellungen, Feuerwerk, Rodeo, verschiedenste Ausstellungen, Ballettvorführungen, ein Pavillon mit Kunsthandwerk und nicht zu vergessen der traditionelle Lucha Libre: Eine Form des professionellen Wrestling, die in Mexiko entwickelt wurde. Eine eindrucksvolle Parade am Jahrestag der Stadt, unzählige Fahrgeschäfte sowie Viehschauen gehören außerdem zu diesem traditionellen Fest.

Banda Konzert auf der Feria in Leon
Aufgrund der großen Anzahl an Veranstaltungen, Aktivitäten und Attraktionen zählt die Feria zu den wichtigsten hier in Mexiko. 1876 wurde sie zum ersten Mal gefeiert. Der Anlass damals war, der Gründung der Stadt zu gedenken. Seit diesem Zeitpunkt hat sich das Fest zu einem Event entwickelt, das hier alle mit Spannung erwarten. Aus diesem Grund sind die Monate Januar und Februar, zu den am meist ersehnten Monaten in León geworden.

Klar, dass diese ganzen Menschenmassen hier auch irgendwann mal Hunger haben und auch mein Magen knurrt schon bald. Gut, dass es dafür eine extra eingerichtete Essenszone gibt. Hier gibt es alle mexikanischen Spezialitäten, die man sich nur vorstellen kann: Tacos, Quesadillas, Tortas, Gorditas, Huaraches.

mexikanischen Spezialitäten Feria Leon
mexikanischen Spezialitäten Feria Leon
Nachdem der Hunger gestillt wurde, wird mir vorgeschlagen, in eine der unzähligen Bars und Restaurants auf dem Messegelände zu gehen. Dort würde „Banda“ gespielt werden und überhaupt sei es dort „padre“. Also gut, auf geht’s. Wenn ihr genauso wenig über Banda wisst, wie ich zu diesem Zeitpunkt, dann ist genau jetzt der richtige Zeitpunkt um das ganze Mal näher in YouTube zu erforschen, damit ihr eine Idee habt, welche musikalische Note mein Abend hatte. Getreu dem Motto der Feria für 2016 „Vive la Feria León“ verbringen wir einen wunderschönen Abend mit viel Gelächter unter mexikanischem Himmel und vergessen für einen Moment den Uni-Alltag während unseres Auslandssemesters.

So, dass war es mit meinem Einblick in das Oktoberfest auf mexikanisch.

„Juntos hacemos la fiesta“ – mit diesem Motto verabschiede ich mich für heute.

Bis bald,
Franzi

Auslandssemester 2.0: Zwischenruf aus Mexiko Episode II

“Saber para servir, servir para progresar”

Das ist der Leitspruch der Universidad de León und bedeutet so viel wie “Wissen, um zu dienen, dienen, um voranzuschreiten“.

Heute möchte ich Euch also von dem Uni-Alltag hier in Mexiko an der Universidad de León (UDL) berichten.

Am allerersten Tag meines Auslandssemesters werden zusammen mit den Koordinatoren des International Office die Kurse ausgewählt, die dann in dem sogenannten „Cuatrimestre“ belegt werden. Dabei müssen die Fächer, die in Deutschland an der Dualen Hochschule Baden Württemberg (DHBW) in diesem Semester anstehen, natürlich in Mexiko abgedeckt werden. Das heißt Stundenanzahl, ECTS und natürlich am wichtigsten der Inhalt der jeweiligen Materie müssen übereinstimmen. Die Kurse dann so zu legen, ohne dass sich Stunden bzw. Kurse überschneiden, kommt einem kleinen Kunstwerk gleich. Das System an der UDL ist so angelegt, dass man sich seine Kurse sowohl morgens, nachmittags oder auch abends legen kann. Denn viele Studenten müssen täglich einer Arbeit nachgehen, um sich das Studium finanzieren zu können. Die flexiblen Zeiten erleichtern den mexikanischen Studenten die Koordination da ungemein. Nach Abstimmung der Kurse mit dem Studiengangsleiter der DHBW kann’s dann am nächsten Tag aber auch schon losgehen.

Der Unterricht ist allgemein sehr verschult. Das macht sich unter anderem dadurch bemerkbar, dass die Klassen sehr klein sind. Der größte Kurs, in dem ich bin, hat z. B. nur 18 Studenten. In dem kleinsten Kurs sind inklusive mir, fünf Studenten. Zum Anderen ist die Unterrichtsmethode der Lehrer hier vergleichbar mit den Vorlesungen an der DHBW. Stellt Euch also bitte keinen großen Hörsaal vor, in dem der Dozent einen länger andauernden Monolog hält. Es ist eher mit einer Unterrichtsstunde im Dialog und mit Interaktion zu vergleichen, wie man es auch noch von der Schule her kennt.

Dieses Cuatrimestre belege ich unter anderem Kurse wie „Planeación de Mercadotecnia“, in dem während des Cuatrimestres ein komplettes Marketingkonzept ausgearbeitet wird, oder „Legislación de Medios“, der sich mit Medienrecht befasst. Die Kurse sind echt interessant, zum Teil muss man sich aber schon extrem konzentrieren, um den Inhalten auf Spanisch folgen zu können. Die Dozenten stehen einem aber immer sehr hilfreich zur Seite und erklären etwas zur Not auch dreimal, was hin und wieder auch schon mal vorkommt.

Wie ihr an den Bildern sehen könnt, muss man sich hier auch rein platztechnisch etwas einschränken, denn in den Kursräumen sind für gewöhnlich diese grünen Bänke. Und glaubt mir – sie sind genau so bequem, wie sie aussehen.

Kursraum während des Auslandssemesters an der Universidad de Leon

Zwischen den Unterrichtsstunden gibt es immer eine 10-minütige Pause, in der lautstark im ganzen Gebäude die aktuellen Charts abgespielt werden. In einer kleinen Cafeteria kann man sich in den Pausen auch verschiedenste kalte und warme Speisen zu sehr guten Preisen holen.

Hier wird im Auslandssemster gegessen - Mensa der Universidad de Leon

Ich hoffe, durch meinen kurzen Bericht konntet ihr einen kleinen Einblick in das Uni-Leben an der UDL bekommen.

Hasta pronto,
Franzi