{"id":194,"date":"2019-02-02T15:39:41","date_gmt":"2019-02-02T15:39:41","guid":{"rendered":"http:\/\/devblog.cssec.de\/?p=194"},"modified":"2019-02-02T15:39:41","modified_gmt":"2019-02-02T15:39:41","slug":"gui-konzepte-erstellen-mit-pencil","status":"publish","type":"post","link":"https:\/\/www.cssec.de\/blog\/2019\/02\/02\/gui-konzepte-erstellen-mit-pencil\/","title":{"rendered":"GUI-Konzepte erstellen mit Pencil"},"content":{"rendered":"

Hallo,<\/p>\n

inzwischen ist mein gr\u00f6\u00dferes Projekt, indem ich lediglich ein gr\u00f6\u00dferes Team unterst\u00fctzt habe, zu Ende. Daher erstelle ich wieder eigene Anwendungen, mit allen Schritten, wie Analyse, Konzeption, Entwicklung, Test, Dokumentation – einfach alles, was so zum Erstell-Zyklus einer Anwendung geh\u00f6rt.<\/p>\n

Dazu geh\u00f6rt ja meist auch entweder einen Klick-Dummy zu erstellen, oder ein GUI-Design. Jetzt kann man sicherlich bei Web-Anwendungen das ganze \u00fcber HTML machen und mit Default-Werte f\u00fcllen, bei Desktop- oder Embedded-Anwendungen sieht das meist schwieriger aus.<\/p>\n

Vor etlichen Jahren, als der Cutworks-Webshop konzipiert wurde, wurde ein Usability-Konzept als Wireframe von Centigrade <\/a>erstellt, was eigentlich genau richtig war, um die wesentlichen Sachen ohne gro\u00dfartig mit Farben ins Detail zu gehen, zu visualisieren. Mit welchem Tool Sie das erstellt haben, wei\u00df ich leider nicht mehr, aber die Art und Weise hat mir damals sehr gut gefallen. Im Web habe ich dann mal gesucht, ob es Freeware oder Open-Source-Software gibt, die solche Wireframe-Grafiken erstellen kann und dabei bin ich auf das Pencil-Projekt<\/a> von Evolus gesto\u00dfen, was f\u00fcr viele Betriebssysteme, d.h. sowohl Linux, Mac OS als auch Windows zur Verf\u00fcgung steht.<\/p>\n

Damit kann man wirklich erstklassig Gui-Konzepte erstellen und in verschiedene Formate exportieren. Inzwischen hat sich Pencil wirklich stark gemausert, es bietet in der aktuellen Version auch die M\u00f6glichkeiten, eigene bzw. fertige Collections einzubinden und Cliparts online zu suchen, mit denen man seine GUI-Entw\u00fcrfe noch einfacher und sch\u00f6ner erstellen kann. Neben „Desktop-Guis“ k\u00f6nnt ihr auch Webseiten-Layouts, IPhone \/ IPad-Layouts und noch viele andere Arten von GUI’s entwerfen. So k\u00f6nnt ihr in wenigen Minuten Oberfl\u00e4chen gestalten und in PNG, PDF, Inkscape-Dateien, OpenOffice-Dokumente oder als Webseite exportieren.<\/p>\n

Hier mal zwei Beispiele:<\/p>\n

\"\" \"\"<\/p>\n

Die Bedienung ist relativ selbst-erkl\u00e4rend, lediglich mit dem Einbinden von eigenen Bildern hatte ich anfangs Probleme. Bilder bindet ihr ein, indem man diese per Drag & Drop ins Pencil zieht. Eine andere M\u00f6glichkeit habe ich bisher noch gar nicht gefunden.<\/p>\n

Sogar einer meiner Kunden nutzt das inzwischen um seine Ideen den Entwicklern zu pr\u00e4sentieren.<\/p>\n

In K\u00fcrze werde ich mal ein kurzes Tutorial \u00fcber Pencil online stellen, damit ihr Eure ersten Gui-Entw\u00fcrfe erstellen k\u00f6nnt.<\/p>\n","protected":false},"excerpt":{"rendered":"

Hallo, inzwischen ist mein gr\u00f6\u00dferes Projekt, indem ich lediglich ein gr\u00f6\u00dferes Team unterst\u00fctzt habe, zu Ende. Daher erstelle ich wieder eigene Anwendungen, mit allen Schritten, wie Analyse, Konzeption, Entwicklung, Test, Dokumentation – einfach alles, was so zum Erstell-Zyklus einer Anwendung geh\u00f6rt. Dazu geh\u00f6rt ja meist auch entweder einen Klick-Dummy zu erstellen, oder ein GUI-Design. Jetzt […]<\/p>\n","protected":false},"author":1,"featured_media":251,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"_links":{"self":[{"href":"https:\/\/www.cssec.de\/blog\/wp-json\/wp\/v2\/posts\/194"}],"collection":[{"href":"https:\/\/www.cssec.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cssec.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cssec.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cssec.de\/blog\/wp-json\/wp\/v2\/comments?post=194"}],"version-history":[{"count":1,"href":"https:\/\/www.cssec.de\/blog\/wp-json\/wp\/v2\/posts\/194\/revisions"}],"predecessor-version":[{"id":253,"href":"https:\/\/www.cssec.de\/blog\/wp-json\/wp\/v2\/posts\/194\/revisions\/253"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.cssec.de\/blog\/wp-json\/wp\/v2\/media\/251"}],"wp:attachment":[{"href":"https:\/\/www.cssec.de\/blog\/wp-json\/wp\/v2\/media?parent=194"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cssec.de\/blog\/wp-json\/wp\/v2\/categories?post=194"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cssec.de\/blog\/wp-json\/wp\/v2\/tags?post=194"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}