{"id":9437,"date":"2016-06-15T17:12:23","date_gmt":"2016-06-15T15:12:23","guid":{"rendered":"http:\/\/neu.thegeekettez.com\/?p=9437"},"modified":"2023-01-30T18:17:49","modified_gmt":"2023-01-30T17:17:49","slug":"uig-spring-conference-2016-breaking-down-software-based-barriers-in-the-design-process-with-sketch-app","status":"publish","type":"post","link":"https:\/\/birdux.studio\/en\/uig-fruehjahrstagung-2016-softwarebasierte-barrieren-im-designprozess-einreissen-mit-sketch-app\/","title":{"rendered":"Lecture: Breaking down software-based barriers in the design process"},"content":{"rendered":"

Last Wednesday, we gave a presentation at the UIG spring conference about a tool that has significantly simplified our design process: Sketch App<\/a>.<\/p>\n\n\n\n

Like many project teams, we are constantly asking ourselves where exactly we can start and what we can do to simplify and speed up the design process and optimise communication with the project team.<\/p>\n\n\n\n

As a concept\/design team, we often work remotely with our customers - so we don't always sit with the entire project team in one place. This actually works surprisingly well, but also brings its own challenges - especially in the\u00a0Handover of design documents<\/em>. The lecture was about precisely these challenges.<\/p>\n\n\n\n

Frankenstein lives - often on the www<\/h2>\n\n\n\n

Ultimately, it's about communication and documentation - and how to make it easier for us to create them. There are many different reasons why digital products, such as websites, online shops or applications, are so difficult to launch or relaunch. a)<\/strong> behave differently than expected\/planned and\/or b) <\/strong>look different than it was planned.<\/p>\n\n\n\n

If, for example, the fact that a digital product grows or is expanded (and it does in 99%) is ignored right from the start - or if a concept \/ layout is not well documented, for example - and also has gaps due to missing \"intermediate steps\" or elements that have not been thought through and defined to the end - this leads to sometimes marvellous interpretations of what is ultimately implemented. Everyone then does a bit of what \"suits\" them. The result is Inconsistency in interaction or UI patterns (everything works differently) and in visual design (everything looks different). In short: Congratulations, your product got \"frankensteined\"<\/em>.<\/p>\n\n\n\n

Inconsistency is a usability problem<\/h2>\n\n\n\n

Our users are the ones who suffer. Inconsistent behaviours of digital products and a diverse patchwork of UI elements cause confusion with sometimes high cognitive effort. In other words, usability can suffer considerably as a result.<\/p>\n\n\n\n

Good documentation is half the communication<\/h2>\n\n\n\n

We want to counteract this room for interpretation and the resulting inconsistency.
For example, the \"sketch app\" software makes our design documentation and therefore communication much easier than the software we were using before.<\/p>\n\n\n\n

In other words, we have realised that there is software that is simply very well suited to communicating the design concept of a digital product to the rest of the team in a coherent way and thus simplifies these processes considerably - at least that is our experience.<\/p>\n\n\n\n

Because: the \"hurdles\" (barriers) are often in the\u00a0Loss of information\u00a0<\/em>The key is to find the \"handover point\" that occurs when one project team (e.g. concept) hands over the design document to the \"next\" project team (e.g. visual design) at a certain stage of the project. Between these two teams alone, the susceptibility to errors and irritations can get out of hand - not to mention the handover to technical development, which often has to make do with a pile of jpgs that do not cover many statuses or is forced to fight its way through too many individual documents in order to understand and \"read\" the overall concept. This is all very tedious.<\/p>\n\n\n\n

Of course, it is not the sole task of software to simplify processes. There is no such thing as a \"magic button\" that you press and everything will be great. The human factor plays the main role here.<\/p>\n\n\n\n

But with sketch it is considerably easier<\/em>It is much easier to create design documentation and pattern libraries than with Photoshop, for example - which was our faithful companion in the field of visual design until about two years ago. It is now also much easier to \"transfer\" e.g. UI patterns or wireframes in the conceptual \"shell\" into a visual design without loss of information or to refine them step by step, as everything is done in a single document.<\/p>\n\n\n\n

As I said, this presentation reflects our own experiences and the procedure is not suitable for every situation. In any case, it has helped us a lot to create good and seamless design documents - especially when it is clear that a visual layout is created in addition to the concept, which helps to counteract the risk of document confusion and transcription errors and the misunderstandings that often result.<\/p>\n\n\n\n

It remains exciting, because the web\/ UX\/ design industry is longing for products that are perfectly tailored to the specific requirements of the UI design process. Sketch is one of them.<\/p>\n\n\n\n

Links<\/h4>\n\n\n\n

https:\/\/www.sketchapp.com\/<\/a>
http:\/\/sketchtoolbox.com\/<\/a>
http:\/\/www.sketchappsources.com\/<\/a><\/p>","protected":false},"excerpt":{"rendered":"

Am vergangenen Mittwoch hatten wir auf der UIG Fr\u00fchjahrstagung einen Vortrag \u00fcber ein Tool gehalten, welches unseren Designprozess erheblich vereinfacht hat: Sketch App. Wir fragen uns \u2013 wie sicherlich ganz viele Projektteams \u2013 st\u00e4ndig, wo genau wir ansetzen k\u00f6nnen \u2013 bzw. was in unserer Macht steht, den Designprozess zu vereinfachen, zu beschleunigen und die Kommunikation mit […]<\/p>\n","protected":false},"author":2,"featured_media":9438,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"off","_et_pb_old_content":"Am vergangenen Mittwoch hatten wir auf der UIG Fr\u00fchjahrstagung einen Vortrag \u00fcber ein Tool gehalten, welches unseren Designprozess erheblich vereinfacht hat: Sketch App<\/a>.\n\nWir fragen uns \u2013 wie sicherlich ganz viele Projektteams \u2013 st\u00e4ndig, wo genau wir ansetzen k\u00f6nnen \u2013 bzw. was in unserer Macht steht, den Designprozess zu vereinfachen, zu beschleunigen und die Kommunikation mit dem Projektteam zu optimieren.\nOftmals arbeiten wir als Konzept \/ Design Team remote mit unseren Kunden zusammen \u2013 sitzen also nicht immer mit dem gesamten Projektteam an einem Ort. Dies klappt eigentlich erstaunlich gut, bringt aber auch nochmals ganz eigene Herausforderungen mit sich \u2013 vor allem in der \u00dcbergabe von Designdokumenten<\/em>. Genau um diese Herausforderungen ging es in dem Vortrag.\n\n

Frankenstein lebt \u2013 oft im www<\/h2>\nIm Endeffekt geht es um Kommunikation und Dokumentation \u2013 und wie es uns einfacher gemacht wird, ebendiese anzufertigen. Es gibt viele verschiedene Gr\u00fcnde daf\u00fcr, dass sich digitale Produkte wie z.B. Webseiten, Online Shops oder Applikationen beim Launch oder Relaunch a)<\/strong> anders verhalten als gedacht\/geplant und\/oder b) <\/strong>anders aussehen, als es geplant wurde.\n\nWenn z.B von Beginn an die Tatsache ignoriert wird, dass ein digitales Produkt w\u00e4chst, bzw. erweitert wird (und das tut es in 99%) \u2013 oder aber ein Konzept \/ Layout z.B. nicht gut dokumentiert ist \u2013 und auch noch L\u00fccken aufgrund fehlender \u201eZwischenschritte\u201c oder nicht zu Ende gedachter und definierter Elemente aufweist \u2013 f\u00fchrt dies zu teils herrlichen Interpretationen dessen, was letztendlich umgesetzt wird. Jede*r macht dann ein bisschen das, was ihr\/ihm so \u201epasst\u201c. Das Ergebnis sind: Inkonsistenz in Interaktions- oder UI Pattern (alles funktioniert anders) und im visuellen Design (alles schaut anders aus). Kurz: Congratulations, your product got \u201efrankensteined\u201c<\/em>.\n

Inkonsistenz ist ein Usabilityproblem<\/h2>\nDie Leidtragenden sind unsere Nutzer. Denn inkonsistente Verhaltensweisen von digitalen Produkten und ein vielf\u00e4ltiger Flickenteppich an UI Elementen sorgen f\u00fcr Verwirrung mit teils hohem kognitiven Aufwand. Sprich: Die Usability kann erheblich darunter leiden.\n

Gute Dokumentation ist die halbe Kommunikation<\/h2>\nDiesen Interpretationsspielr\u00e4umen und der darauf folgenden Inkonsistenz wollen wir entgegenwirken.\nUns z.B. macht die Software \u201esketch app\u201c unsere Designdokumentation und somit auch die Kommunikation erheblich leichter als die Software, die wir zuvor benutzt hatten.\nSprich: Wir haben festgestellt, dass es Software gibt, die einfach sehr gut geeignet ist, das Designkonzept eines digitalen Produktes schl\u00fcssig an das restliche Team zu kommunizieren und somit diese Prozesse erheblich vereinfacht \u2013 das ist zumindest unsere Erfahrung.\nDenn: die \u201eH\u00fcrden\u201c (Barrieren) sind oft im Informationsverlust <\/em>zu finden, der stattfindet, wenn ein Projektteam (z.B. Konzept) an einer gewissen Stufe des Projektes das Designdokument an das \u201en\u00e4chste\u201c Projektteam (z.B. visuelles Design) \u00fcbergibt. Alleine zwischen diesen beiden Teams kann schon eine Anf\u00e4lligkeit f\u00fcr Fehler und Irritationen \u00fcberhand nehmen \u2013 ganz zu schweigen von der \u00dcbergabe an die technische Entwicklung, die sich oftmals mit einem Stapel jpgs zufriedengeben muss, die viele Status nicht abdecken oder sich gezwungen f\u00fchlt , sich durch zu viele Einzeldokumente zu k\u00e4mpfen, um das Gesamtkonzept zu verstehen und \u201clesen\u201d zu k\u00f6nnen. Dies alles ist sehr m\u00fchsam.\n\nNat\u00fcrlich es ist nicht nur die alleinige Aufgabe einer Software, Prozesse zu vereinfachen. Einen \u201emagic Button\u201c den man dr\u00fcckt und alles wird super \u2013 den gibt es nicht. Der Faktor Mensch spielt hier die Hauptrolle.\n\nMit sketch ist es aber erheblich einfacher<\/em>, eine Designdokumentation und auch Pattern Bibliotheken anzulegen als z.B. mit Photoshop \u2013 welches bis vor ca. zwei Jahren unser treuer Begleiter im Bereich visuelles Design war \u2013 f\u00fcr die Konzeption haben wir wieder auf andere Tools zur\u00fcckgegriffen. Auch ist es somit nun um einiges einfacher z.B. UI Patterns oder Wireframes im konzeptuellen \u201eRohbau\u201c ohne Informationsverlust in ein visuelles Design zu \u201e\u00fcbertragen\u201c bzw. schrittweise zu verfeinern, da alles in einem einzigen Dokument geschieht.\n\nWie gesagt, spiegelt dieser Vortrag unsere eigenen Erfahrungen wieder und das Vorgehen ist auch nicht f\u00fcr jede Situation passend. Uns hat es jedenfalls sehr geholfen, gute und l\u00fcckenlose Design Dokumente zu erzeugen \u2013 vor allem, wenn klar ist, dass zus\u00e4tzlich zum Konzept noch ein visuelles Layout erfolgt und man somit unter anderem die Gefahr des Dokumenten Wirrwarrs und der \u00dcbertragungsfehler und den oftmals daraus resultierenden Missverst\u00e4ndnissen etwas entgegenwirken kann.\n\nEs bleibt spannend, denn die Web\/ UX\/ Design Industrie sehnt sich nach Produkten, die auf die speziellen Anforderungen des UI Designprozesses perfekt zugeschnitten sind. Sketch ist eins davon.\n

Links<\/h2>\nhttps:\/\/www.sketchapp.com\/<\/a>\nhttp:\/\/sketchtoolbox.com\/<\/a>\nhttp:\/\/www.sketchappsources.com\/<\/a>","_et_gb_content_width":"","footnotes":""},"categories":[11],"tags":[14,21,60,56],"class_list":["post-9437","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-studio-news","tag-mannheim","tag-sketch-app","tag-talks","tag-work-process"],"_links":{"self":[{"href":"https:\/\/birdux.studio\/en\/wp-json\/wp\/v2\/posts\/9437","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/birdux.studio\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/birdux.studio\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/birdux.studio\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/birdux.studio\/en\/wp-json\/wp\/v2\/comments?post=9437"}],"version-history":[{"count":0,"href":"https:\/\/birdux.studio\/en\/wp-json\/wp\/v2\/posts\/9437\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/birdux.studio\/en\/wp-json\/wp\/v2\/media\/9438"}],"wp:attachment":[{"href":"https:\/\/birdux.studio\/en\/wp-json\/wp\/v2\/media?parent=9437"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/birdux.studio\/en\/wp-json\/wp\/v2\/categories?post=9437"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/birdux.studio\/en\/wp-json\/wp\/v2\/tags?post=9437"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}