{"id":7038,"date":"2017-03-10T11:00:57","date_gmt":"2017-03-10T11:00:57","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=7038"},"modified":"2017-04-06T20:46:55","modified_gmt":"2017-04-06T19:46:55","slug":"organized-designing-ui","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/organized-designing-ui\/","title":{"rendered":"How To Be More Organized While Designing UI"},"content":{"rendered":"

After working 4 years in the field of digital design I got obsessed with tidying up and sorting information. This lead to the creation of a systematic approach for designing user interfaces.<\/p>\n

It is an object-oriented, programming-inspired approach, a collection of various ideas that are universal. Use it for working with your favourite design software or for coding. It helps to connect designers with programmers and puts them on the same page \u2014 better communication leads to a better understanding and creating better things.<\/p>\n

<\/div>
<\/svg><\/div>

\"It is an object-oriented, programming-inspired approach, a collection of various ideas that are universal.\"<\/p><\/span><\/blockquote>\n

This approach is used mainly at a later designing stage, usually during finetuning of the project when you have more time to think about the relationships in your visual system. Utilising in the early stages of the project while prototyping and wireframing would mean an easier adaptation into both designing and programming.<\/p>\n

Of course, the general idea of visual collections and their application into the design process is old news. I was inspired by Material Design<\/a>, SCSS variables<\/a>, Macaw<\/a>, Origami<\/a>, Atomic Design<\/a> and various pattern libraries.<\/p>\n

My Intentions Are\u00a0Pure<\/h2>\n

While working on larger-scale projects I got fed up with the troublesome designing process in Sketch because of the lack of structure. Although the latest updates (like nesting symbols) and styles plugin in Craft<\/a> made some progress in the right direction, it still doesn\u2019t reach the level necessary for a flawless workflow. To get a better picture, here are some examples:<\/p>\n

Clear Overview Of Variables<\/strong><\/p>\n

I want to have a clearer overview and to see what kinds of rounded corners<\/em>, font sizes<\/em>, font colors<\/em> or background colors <\/em>I am using, to avoid ending up with 20 various text sizes or 50 shades of grey.<\/p>\n

\"What<\/a>

What is this mess?<\/p><\/div>\n

Grouping Of Styles<\/strong><\/p>\n

Which parts of the design are linked with certain changes in variables? I want to define which font is suitable for certain cases \u2014 a sans-serif for the UI styles and serif for larger texts to ensure better readability. In another example: having 2 types of typography styles \u2014 one version for light backgrounds and one for dark ones.<\/p>\n

\"Um\u00a0\u2026<\/a>

Um\u00a0\u2026 which font do I use for\u00a0what?<\/p><\/div>\n

Pairings of Variables<\/strong><\/p>\n

I want all of my 16px font sizes of Karla to have a height of 1.2, regardless of it being a paragraph, a note, an item description or a quote.<\/p>\n

\"Trying<\/a>

Trying to maintain the same font-weight\/line-height combo is a struggle.<\/p><\/div>\n

<\/p>\n

Changing Only One Variable<\/strong><\/p>\n

I want to make a small change in the middle of the project with a 50+ artboards and I don\u2019t want to go through all of them. Let\u2019s say I want to change a font for all of the headings in one place and see it synchronized in each heading style.<\/p>\n

\"But<\/a>

But I just want to change the headline\u00a0font\u2026<\/p><\/div>\n

<\/p>\n

I realized that I keep repeating the same course of action in every project\u2013 like using the main font color, the secondary font color and disabled font color. I also realized I don\u2019t have any control of the visual hierarchy I have created. That\u2019s why I tried to automate the changes I applied the most.<\/p>\n

Basic Principles<\/h2>\n

Everything Is An Object<\/strong><\/p>\n

Every layout consists of objects \u2014 headers, footers, headlines, buttons, dropdowns, links. You can think of these objects as separate entities and design them on their own.<\/p>\n

\"1WN9WWdfij0e__yevOQ5h9Q\"<\/a><\/p>\n

<\/p>\n

Properties for Everything<\/strong><\/p>\n

Everything has its own properties. Every headline has its own color, size or line height. Every button has a certain size, background color or font. That\u2019s how it works in code. Why not use this way of thinking while designing?<\/p>\n

\"1NKtW53ya82qSuPj8qzyZrw\"<\/a><\/p>\n

Inheritance Of Properties<\/strong><\/p>\n

Here comes the real fun. You create basic building blocks, the swatches <\/strong>variables\u2014 <\/strong>i.e. $font-size-s<\/em>, $grey-500<\/em>, $border-radius-s <\/em>or $sans-serif<\/em>.
\nAll of it together forms a basic building library of variables that you combine to create a visual hierarchy.<\/p>\n

\"Some<\/a>

Some basic building\u00a0blocks<\/p><\/div>\n

Then you could create some categories<\/strong> variables, let\u2019s say, $font-size-main, $color-link-secondary<\/em>, $border-radius-secondary <\/em>or $font-headlines<\/em>. They would act as middlemen between the base swatches and your objects. Assign those variables to various uses and situations, just like in SCSS.<\/p>\n

Finally, you apply those inherited variables on the objects \u2014 buttons, paragraphs, headlines, list item names, list item descriptions, quotes, etc\u2026 And voil\u00e0:<\/p>\n

\"1yv5Hp8FvCoHLn4g0_wMD4w\"<\/a><\/p>\n

<\/p>\n

Be Prepared For Everything<\/strong><\/p>\n

You can design every possible type (main, secondary, clear or lined button) or state (disabled, normal, hover button) of an object. It takes some effort but it doesn\u2019t take much time and you will be prepared. Maybe you will thank yourself later.<\/p>\n

\"You<\/a>

You can design every possible type of an\u00a0object<\/p><\/div>\n

How To Use This While Designing<\/h2>\n

The basic approach is to organize your stuff and think about all the relationships. The next level would be to hack or improve our tools to support this system, thus making us more productive.<\/p>\n

For example, styles cannot be inherited in Sketch like in SCSS. That\u2019s why I create visual styles for every visual combination.<\/p>\n

\"I<\/a>

I create visual styles for every visual combination I am\u00a0using.<\/p><\/div>\n

To change just the size of the list items descriptions, I inevitably change all the objects that use the same text style, even though I would like to change only the specific item. I have to change all objects that use the font-size-s <\/em>at once.<\/p>\n

Imagine a node based editor<\/strong> (something like Mindnode<\/a>) in which you can see and maintain the visual relationships of your projects. It would be able to read SCSS files and connect to Sketch to update your shared styles.<\/p>\n

\"1OGZHqea-Rmlvq4RWm-Lj2w\"<\/a>

A node based editor like this could help maintain visual hierarchy.<\/p><\/div>\n

Examples Of\u00a0Use<\/h2>\n

<\/p>\n

<\/p>\n

\"1E0MGQfWdqEvnqt_xKBE9vg\"<\/a>Fonts<\/strong><\/p>\n

You can have a $sans-serif<\/em> font for UI and headlines, $serif<\/em> for longer texts and $display<\/em> for fancier occasions.<\/p>\n

\"1fuM_NM3OvbFm73IWk3BZFg\"<\/a><\/p>\n

<\/p>\n

\"1vfPPEgikRDpcO-r-wC69w\"<\/a>Font Sizes and Line Heights<\/strong><\/p>\n

In this example line heights are paired with particular fonts of particular font sizes (For example: Every 12 px Karla font should have a line height of 1.8, while 14px should have a line height of 1.75, 16px of 1.6 etc\u2026.)<\/em>. You can think of them separately but their are inevitably connected. And remember \u2014 bigger font sizes need smaller line heights, because they seem proportionally larger. You could also differentiate between one lined objects (with line height: 1) and multi lined objects (with specific line heights), so you can set their paddings appropriately.<\/p>\n

\"1pPM4-z5425nzyVaaPssphg\"<\/a><\/p>\n

<\/p>\n

Colors<\/strong><\/p>\n

Like I mentioned before, when choosing colors for UI typography I realized I am always in need of some basic, secondary and disabled font colors with continuity throughout the whole project.<\/p>\n

Define your basic color palette by shading the colors that you use. Pick more shades of a color at the ends of the spectrum \u2014 you\u2019ll need them for finer details in light or dark interfaces<\/p>\n

Why Think Like\u00a0This<\/h2>\n

<\/p>\n

<\/p>\n

Easier to Maintain<\/strong><\/p>\n

\"1H6vPIYCCH-8z2j0RKCnrqw\"<\/a>Creating a system of relationships and styles gives you more control in your work. Collections of objects serve as an overview or documentation, enabling you to change things really fast. It\u2019s easier to put together a page from some objects than starting with a blank page. It\u2019s also easier to assemble new designs a long time after you haven\u2019t worked on the project or if you have to hand it down to another designer.<\/p>\n

<\/p>\n

<\/p>\n

Better Consistency<\/strong><\/p>\n

\"15ABd_E4mMOnaUqdMJ66k3g\"<\/a>Using a basic set of objects and parameters forces you to use a lesser amount of types of paragraphs, headers, footers, modals, buttons, or list items that you would use if you made something from scratch. Use something from your library first and if it doesn\u2019t work, create a new object. This makes your work more consistent. You will never have 6 types of almost the same text color <\/em>again.<\/em><\/p>\n

<\/p>\n

<\/p>\n

Easier To Understand<\/strong><\/p>\n

\"14_xv6AQgUAmufr6DcMBPKQ\"<\/a>Consistency is also better for users. Using just the right amount of styles in UI will not make them feel overwhelmed. By saying just the right amount <\/em>I mean the level of simplicity depends on the complexity of an interface?\u2014?you could easily screw up a page with complex content if it has a simple design.<\/p>\n

Example File<\/h2>\n

\"186XLxnLKWTSWdtLtAM1TYg\"<\/a><\/p>\n

<\/p>\n

There is a myriad of options how to create a visual hierarchy. You can download here<\/strong><\/a> a Sketch file with some examples of mine (you\u2019ll need a Karla <\/em>font, which you can download here on Google Fonts<\/a>).<\/p>\n

Have fun!<\/p>\n

This article was originally published on Marek's Medium page<\/a>.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"

After working 4 years in the field of digital design I got obsessed with tidying up and sorting information. This lead to the creation of a systematic approach for designing user interfaces. It is an object-oriented, programming-inspired approach, a collection of various ideas that are universal. Use it for working with your favourite design software or for coding. It helps… Read More ￫<\/a><\/p>\n","protected":false},"author":107,"featured_media":7039,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-7038","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-viewpoint"],"acf":[],"yoast_head":"\n\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\n\n\n\n\t\n