{"id":221,"date":"2012-06-25T17:13:11","date_gmt":"2012-06-25T17:13:11","guid":{"rendered":"http:\/\/highgradelab.com\/themes\/attractor\/layouts\/extended\/?p=196"},"modified":"2023-08-10T16:23:57","modified_gmt":"2023-08-10T14:23:57","slug":"modular-design-with-gui-libraries","status":"publish","type":"post","link":"https:\/\/birdux.studio\/en\/modular-design-with-gui-libraries\/","title":{"rendered":"A more effective workflow with GUI Libraries"},"content":{"rendered":"<p><strong>Or: A different approach in creating visual designs for web and mobile applications.<\/strong><\/p>\n\n\n\n<p>Nowadays, as websites are turning more and more towards behaviour-driven applications, a polished, overall screen design of every page makes - in our opinion - no sense at all.<\/p>\n\n\n\n<p>We can spend time more effectively and increase work on the concept and behaviour of the product instead of spending weeks pushing pixels. The concept and behaviour include interaction design, flow and user experience with rough scribbles and sketches or high-fidelity wireframes.<\/p>\n\n\n\n<p>This does not mean that we believe visual design is not necessary or significant instead, we believe visual design is part of the UX. Our goal, however, is to keep it agile and slim.<\/p>\n\n\n\n<p>We are both fans of modular design and discovered we have the same approach when creating visual designs. Our similar processes led us to come up with something we call GUI libraries.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">GUI libraries and their benefits<\/h2>\n\n\n\n<p>A GUI library can replace a full-blown page-to-page screen design but will require an overview of the site in the form of wireframes or scribbles.&nbsp;<\/p>\n\n\n\n<p><strong>The advantages of GUI libraries:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The designer must think closely about and decide what elements are in use.<\/li>\n\n\n\n<li>A GUI library provides a good overview of all existing elements.<\/li>\n\n\n\n<li>This overview will increase consistency and a coherent visual language throughout the entire design process, even if you (or someone else) continue to work on it years later.<\/li>\n\n\n\n<li>A GUI library is expandable and modular and thus perfect for agile projects.<\/li>\n\n\n\n<li>The library functions as documentation, making the lives of developers and fellow designers easier.<\/li>\n\n\n\n<li>Stressful and nerve-racking Photoshop layer terror will be a thing of the past, as will font-searching, colour-picking and other tedious tasks.<\/li>\n\n\n\n<li>Last but not least - it is a much faster process than designing all the main pages or even every single damn page in Photoshop!<\/li>\n<\/ul>\n\n\n\n<p>If we reach a point in the project where there is uncertainty about the look of a specific page or the behaviour of an element we can sketch it out with scribbles or wireframes and have an answer more quickly than when working with high-fidelity visual designs of entire pages.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The importance of Master Layouts for GUI libraries<\/h2>\n\n\n\n<p>We work with GUI Libraries as an addition to one or two visual Master Layouts - finetuned screen designs of pages defined by the client. The Master Layouts define the general and global site layout as the grid, typography, colour scheme and universal elements such as header and footer, as well as page types.<\/p>\n\n\n\n<p>When creating the page types in a Master Layout we also answer key questions like the following:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>What will the column layout of our page types look like?<\/li>\n\n\n\n<li>What are the sizes of the columns in the different layout types?<\/li>\n<\/ul>\n\n\n\n<p>We provide answers by defining a grid and creating a visual composition with a visible grid that can demonstrate the usage of the grid and the different column widths. The information will prevent developers and fellow designers from having to dive deeply into a Photoshop file having to search for layer #666. Instead, they will receive the information at one glance at the document. It's easy to use!<\/p>\n\n\n\n<p>We present Master Layouts to the client. It informs them about the look and feel of the site and can also answer important questions concerning the entire product. It is a good foundation the client can use to provide feedback.<\/p>\n\n\n\n<p>Once the Master Layout is approved we begin work on our GUI Library. The library may be one or two Photoshop files, containing ALL of the elements used within the product.<\/p>\n\n\n\n<p><strong>A GUI library could include:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>colour specs with hexadecimal definitions<\/li>\n\n\n\n<li>a typographic sample with all text variations such as headlines, paragraph text and links<\/li>\n\n\n\n<li>list elements, list header, even and odd list rows..etc<\/li>\n\n\n\n<li>tables<\/li>\n\n\n\n<li>all icons<\/li>\n\n\n\n<li>buttons (in all states)<\/li>\n\n\n\n<li>the primary call to action and secondary actions<\/li>\n\n\n\n<li>image sizes, image ratios and formats&nbsp;<\/li>\n\n\n\n<li>default images, e.g. avatars<\/li>\n\n\n\n<li>all form elements&nbsp;<\/li>\n\n\n\n<li>system feedback, e.g. error messages, warnings and notifications<\/li>\n\n\n\n<li>etc<\/li>\n<\/ul>\n\n\n\n<p><strong>The bonus:<\/strong>&nbsp;as your GUI library begins to fill up, your design documentation will become visible. At the end of the process, it will be complete and ready to scale when you add new elements.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Our workflow in detail - a summary<\/h2>\n\n\n\n<p>Summed up our workflow looks like the following:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Wireframes and the flow of the site (in the best case)<\/li>\n\n\n\n<li>Master Layout with universal design definitions such as colour, typography, grid and global product elements (e.g. header and footer). We design one or two full visual screen designs depending on the site.<\/li>\n\n\n\n<li>Client feedback and approval<\/li>\n\n\n\n<li>GUI Library set-up and design<\/li>\n\n\n\n<li>Optional graphics and image exports for the development team<\/li>\n<\/ol>\n\n\n\n<p>This workflow works quite well for us as well as our clients. What does your workflow look like? We are curious to learn from fellow designers and developers!<\/p>","protected":false},"excerpt":{"rendered":"<p>Attractor theme is extremely customizable, fully responsive and HiDPI ready WordPress theme based on a well structured framework which allows you [&#8230;]<\/p>\n","protected":false},"author":2,"featured_media":9347,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"off","_et_pb_old_content":"<strong>Or: A different approach in creating visual designs for web and mobile applications.<\/strong>\nNowadays, as websites are turning more and more towards behavior driven applications, a polished, overall screen design of every page makes \u2013 in our opinion \u2013 no sense at all.<!--more-->\n\nCan't we spent the time more effective and work much more on the concept\/behavior site of the app (which means working on interaction design, flow and user experience with rough scribbles and sketches or hifi wire-frames) than spend weeks with the pixel-pushing-dance?\nThis does not mean we think visual design is not necessary and important. Rather visual design is also part of the UX and it is quite important but we want to keep it agile and slim.\n\nAs we both are fans of modular design and we found out that we have the same approach to do a visual design for a client we came up with our so-called GUI libraries.\nA GUI library could work as a replacement of a full overall- screendesign (requires mostly full flow of the site as wire-frames or scribbles)\nor as an addition (requires some additional fast scribbles of important sites or states)\nWe are convinced that creating a GUI library has lots of advantages:\n<ul>\n \t<li>you have to think about what elements are used<\/li>\n \t<li>you really got a good overview of your elements<\/li>\n \t<li>thats why you will keep consistency and \u00e2\u20ac\u02dcone' visual language throughout the whole design pocess, even if you'll work on it one or two years later or someone else will<\/li>\n \t<li>it's expandable and modular thus it's perfect for agile projects<\/li>\n \t<li>it's easier for the developers and fellow designers and serves as a reference (YES! It's all about design documentation!)<\/li>\n \t<li>you avoid stressful, nerve-racking photoshop \u00e2\u20ac\u02dclayer-terror' , font-searching, color picking, etc\u2026etc.<\/li>\n \t<li>And last but not least \u2013 it's much faster than designing all the \u00e2\u20ac\u02dcimportant' pages or every single damn page!<\/li>\n<\/ul>\nIf there are no wire-frames or no scribbles like the site should behave or if something is unclear on a certain point we every time can come up with additional quick and fast scribbles or sketches of the page \/ unclear state.\n\nMostly we are working on GUI Libraries as an addition to one or two visual \u00e2\u20ac\u02dcMaster Layouts', \u2013 which are full visual Screendesigns.\n\nFirst, we come up with a so called visual master layout:\nThis is the layout we are presenting the client for the first time to receive feedback and here we define the basic and global site layout, like header, footer, site types and the grid, typography and color scheme.\n\nWithin the master layout you also have to think about and consider the following things:\n<ul>\n \t<li>Will there be pages with a one and\/or two or three column layout?<\/li>\n \t<li>What are the sizes of the columns in the different layout types?<\/li>\n<\/ul>\nTherefore we define a grid and make a visual comp with the grid visible (for development) to show off the usage of the grid and the different column widths. So the developer or fellow designer has not to look at layer '666\u00e2\u20ac\u00b2 deeply hidden inside the photoshop comp, he will get the information at one glance out of the document.It's easy to use!\n\nOnce this master layout is approved by the client we begin to create our GUI Library which consists of one or two large photoshop documents which consist ALL the elements which will be used on the site\/app like e.g:\n<ul>\n \t<li>a color spec with hexadecimal definitions (very useful to keep consistency and harmony if the color scheme will be extended in the future)<\/li>\n \t<li>a typographic sample with all kinds of headlines and paragraph text and links<\/li>\n \t<li>list elements, List header, even and odd list rows..etc<\/li>\n \t<li>tables<\/li>\n \t<li>all Icons<\/li>\n \t<li>buttons (in all states: default\/hover)<\/li>\n \t<li>primary call to actions and secondary actions<\/li>\n \t<li>thumbnail and Image sizes<\/li>\n \t<li>default Avatars<\/li>\n \t<li>forms<\/li>\n \t<li>errormessages, warnings and notifications<\/li>\n \t<li>etc<\/li>\n<\/ul>\nEt voil\u00c3\u00a1, so you'll get step by step to your design documentation!\n\nSo summarized in single steps, our whole workflow is the following:\n<ul>\n \t<li>in best -case: wire-frames and flow of site<\/li>\n \t<li>doing a master layout with basic color definitions, basic typography definitions, definition of grid and used columns, depends on the site if we make one or two full visual screen designs<\/li>\n \t<li>client approval<\/li>\n \t<li>kicking off the GUI \/Module Libraries<\/li>\n \t<li>optional exporting all the Grahic stuff for the development team<\/li>\n<\/ul>\nWe have to say this workflow works quite well for us and our clients.\nHow is your workflow? We are curious to learn from fellow designers and or developers! Which kind of design documentation do you use?","_et_gb_content_width":"","footnotes":""},"categories":[7,121],"tags":[3,4],"class_list":["post-221","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-user-experience-design","category-ui-design-system","tag-gui-library","tag-modular-design"],"_links":{"self":[{"href":"https:\/\/birdux.studio\/en\/wp-json\/wp\/v2\/posts\/221","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=221"}],"version-history":[{"count":0,"href":"https:\/\/birdux.studio\/en\/wp-json\/wp\/v2\/posts\/221\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/birdux.studio\/en\/wp-json\/wp\/v2\/media\/9347"}],"wp:attachment":[{"href":"https:\/\/birdux.studio\/en\/wp-json\/wp\/v2\/media?parent=221"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/birdux.studio\/en\/wp-json\/wp\/v2\/categories?post=221"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/birdux.studio\/en\/wp-json\/wp\/v2\/tags?post=221"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}