brma. STYLE GUIDE of Brmadesign.com Continue reading STYLE GUIDE for BRMADESIGN.COM CONTENT 01 Brand Visuals 02 Spacing 03 Typography

Transcription

1 STYLE GUIDE of Brmadesign.com My manifesto is to create Functional & Beautiful solutions clean, typographically nice, organised, harmonised and polished. This is a summary of design essentials and patterns which I use in my personal portfolio Brma Design. Continue reading

2 Brand Visuals (I.) Logotype + Bretislav Mazoch Ideas Me, a UX/UI Designer Solution Brma Solution Recommended Sizes B&W (Light BG) W&B (Dark BG) Colour 2 (Brma Purple BG) Colour 3 (Brma Green BG)

3 Brand Visuals (II.) Typeface & Brand Colours AaBbCc Aa About Lato Typeface abcde fghij klmno pqrst uvwxyz ABCDE FGHIJ KLMNO PQRST UVWXYZ?! => $ :;,.* the Typeface Lato is a sans serif typeface family started in the summer of 2010 by Warsaw-based designer Łukasz Dziedzic ( Lato means Summer in Polish). In December 2010 the Lato family was published under the Open Font License by his foundry typoland, with support from Google. When working on Lato, Łukasz tried to carefully balance some potentially conflicting priorities. He wanted to create a typeface that would seem quite transparent when used in body text but would display some original traits when used in larger sizes. He used classical proportions (particularly visible in the uppercase) to give the letterforms familiar harmony and elegance. At the same time, he created a sleek sans serif look, which makes evident the fact that Lato was designed in 2010 even though it does not follow any current trend. The semi-rounded details of the letters give Lato a feeling of warmth, while the strong structure provides stability and seriousness. Male and female, serious but friendly. With the feeling of the Summer, says Łukasz. BRMA Green New Beginnings, Abundance Green is a very down-to-earth color. It can represent new beginnings and growth. It also signifies renewal and abundance. Green can have a balancing and harmonizing effect, and is very stable. Brighter greens are energizing and vibrant. Primary #1DD1A1 RGB (29, 209, 161) Secondary #0652DD RGB (6, 82, 221) Tertiary #1B1464 RGB (27, 20, 100) BRMA Blue Calmness, Responsibility Blue is used extensively to represent calmness and responsibility. Blue is also associated with peace and has spiritual and religious connotations in many cultures and traditions. * Colours inspired by colours palettes ** Meaning of colours rewritten from BRMA Purple Creativity, Royalty Purple is associated with creativity and imagination. Dark purples are traditionally associated with wealth and royalty, can give a sense of wealth and luxury.

4 Brand Visuals (III.) Style in Use Examples of how can be used essential brand elements in customized graphics: 1. iconography in brand style, 2. typographically stylized information, 3. possible graphics patterns and reuse. ABOUT ME, Me asdesigner. I transform ideas into working digital solutions. Responsibly. With a good care. Based on years of experience. I m especially interested to help projects focused on healthcare, smart technologies or sport. You can reach me at bretislav.mazoch@gmail.com

5 Spacing Grid System & Spacing Dummies Grid System based on grid system of px Divisions, px Subdivisions, 10 px Gap Spacing Helpers XXXL XXL XL L M S XS XXS XXXS 256px 128px 64px 32px 16px 8px 4px 2px 1px Helpers in Use FOUND HIMSELF TRANSFORMED One Morning, When Gregor From troubled dreams, another morning From troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. What s happened to me? he thought.

6 Typography (I.) Typeface AaBbCc Lato Light (72 pt) Aa Lato Bold (192 pt) Weights (36 pt) Lato Hairline Lato Thin Lato Light Lato Regular abcde fghij klmno pqrst uvwxyz ABCDE FGHIJ KLMNO PQRST UVWXYZ?! => $ :;,.* Lato Light (27 pt) Lato Medium Lato Semibold Lato Bold Lato Heavy Lato Black abcde fghij klmno pqrst uvwxyz ABCDE FGHIJ KLMNO PQRST UVWXYZ?! (%)[#]{@}/&\<-+ => $ :;,.* Lato Light (19 pt) Lato Typeface

7 Typography (II.) Type Scale Base Size 14 px = 1em Scale Perfect Fifth * (+ 3 help scales) Scales Example Type Scale 5.063em / 70px (78px) * Type Scale 3.998em / 55px (63px) * Type Scale 2.827em / 39px (47px) * Type Scale 1.999em / 27px (35px) * Type Scale 1.571em / 22px (30px) Type Scale 1.414em / 19px (27px) * Type Scale 1.214em / 17px (25px) Type Scale 1em / 14px (22px) * Type Scale 0.857em / 12px (16px)

8 .SupHeading-01 FOUND HIMSELF TRANSFORMED.SectionNumber.SectionHeading.Perex ❶ / SECTION From troubled dreams, he found himself transformed in his bed Typography (III.).Heading-01 One Morning, into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly. Font Styles When Gregor.PerexLast What s happened to me? he thought..subheading-01 From troubled dreams, another morning.heading-04.subheading-04 One Morning, When Gregor Samsa Woke From troubled dreams, another morning....paragraph From troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. From troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly..paragraphlast His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. What s happened to me? he thought..heading-05 One Morning, When Gregor Samsa Woke.SupHeading-02 FOUND HIMSELF TRANSFORMED IN HIS BED From troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly..heading-02 One Morning, When.Heading-06 One Morning, When Gregor Samsa Woke.Heading-Hero Gregor Samsa Woke.ListWithDots What s happened to me? It wasn t a dream. UX/UI..SubHeading-02 From troubled dreams, another morning From troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections..listwithdotslast.listwithndashes.listwithndasheslast His room, a proper human room although a little too small. What s happened to me? It wasn t a dream. His room, a proper human room although a little too small..italicdecoration asdesigner..supheading-03.heading-03.subheading-03 FOUND HIMSELF TRANSFORMED IN HIS BED One Morning, When Gregor Samsa Woke From troubled dreams, another morning.listwitharrows.listwitharrowslast.link-01.link-02 What s happened to me? It wasn t a dream. His room, a proper human room although a little too small. Link1 to website Link2 to website.mainnavigation Client projects Me asdesigner Contact Blog From troubled dreams, he found himself transformed in his bed into a horrible.link-03 Link3 to website.buttonlightbg.buttondarkbg vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections..prominent.subtleprominent.subtle.calltoaction Prominent text UI DESIGN Sep 2015 Summary Process Solution Continue reading.buttonote BUTTON (a note).buttonote BUTTON (a note)

9 Shades** + Fibonacci... Shades** + Fibonacci... Shades** + Fibonacci... Colours (I.) Colour Palettes 89 % 34 % 21 % 3 % 89% 34 % 21 % 3 % 89 % 34 % 21 % 3 % Primary* Secondary* Tertiary* #1DD1A1 #0652DD #1B1464 RGB (29, 209, 161) RGB (6, 82, 221) RGB (27, 20, 100) Just Fibonacci % 55 % 34 % 21 % Hover Visited 13 % 8 % 5 % 3 % Greys Main Text Subtle Text Disabled Text Links # #110D40 #839EB2 #C9C9C9 #0652DD RGB (0, 0, 0) RGB (17, 13, 64) RGB (131, 158, 178) RGB (201, 201, 201) RGB (6, 82, 221) Case Studies... Epro Auntie Knitter Masaryk University #8AA1B8 #B8CFE5 #E5F4FF #A5A5A5 #DDD #F5F4F3 #FFA74A #FFE09E #FFFAF0 #001D38 #FBBE00 #0F0A26 #EAAD1A #1A1A1A #FF6F1A * Base colours gathered from flat colours palettes ** Shades generated by

10 Colours (II.) Gradients Gradient 1 #1DD1A1/ #23FFC4 Gradient 2 #127F62 / #23FFC4 Gradient 3 #23FFC4 / #F8FEFC Gradient 4 #1B1464 / #4533FF Gradient 5 #1B1464 / #23FFC4 Gradient 6 #4533FF / #23FFC4

11 Assets (I.) UI Elements THIS SECTION IS in progress...

12 Assets (II.) Reusable Symbols THIS SECTION IS in progress...

13 Assets (III.) Photos & Images THIS SECTION IS in progress...

14 STYLE GUIDE for BRMADESIGN.COM The Author HELLO, I M Bretislav Mazoch, UX/UI Designer. I design web apps and information systems. Helping project teams to turn ideas into digital solutions. Functional & Beautiful. MY PORTFOLIO Explore selected examples of my work and learn about my design process at MY DESIGN BLOG I write about UI/UX design to help designers create great & highly usable products. MY LIFE & WORK IN ENGLAND My adventurous personality was calling me for abroad experience. Because of that, in 2015 I moved to Bristol. I started there from scratch, but with a solid effort, I found a job in a software company. Thanks to that, I promoted from preparing sandwiches (my than 22K NHS users. You can read more about my English story at very first temporary job in England) to a UI Designer of a clinical software with more (in Czech for now)