DESIGN SYSTEM

for

Designer & Developer

introduction

Long time ago

Horrible Things HAPPEN in The Past

No Standardisation
No Design Patterns
No Strong Foundations
Less Brand Identity
Not efficiency

After Years

Bad Design Experience
Bad User Experience
Products / Website
looks like Unprofessional

CSS Framework

960 Grid System

Twitter Bootstrap (Responsive)

UI KIT

Flat UI by Design Modo

http://designmodo.github.io/Flat-UI/

UI Kit Marketplace

CSS preprocessor

Technical Approach

Stylus, etc...

$prefix: "mobil";

.#{$prefix} {
    color: red;
    &.ford {
        color: black;
    }

    &.toyota {
        color: white;
        width: 120px;
        .innova {
            width: 100px;
            height: 100px;
        }
    }
}

With

.mobil {
    color: red;
}

.mobil.ford {
    color: black;
}

.mobil.toyota {
    color: white;
    width: 100px;
}

.mobile.toyota--innova {
    width: 100px;
    height: 100px;
}

Without

<<<< Auto Compile >>>>

Primary Button

Secondary Button

Error Button

$white: #ffffff;
$blue: #22c0f2;
$grey: #e6e6e6;
$black: #000000;
$red: #d74848;

.button {
    color: $white;

    &--primary {
        background: ligthen($blue, 100);
    }

    &--secondary {
        color: $grey-text;
        background-color: ligthen($black, 10);
    }    

    &--error {
        background-color: $red;
    }
}

<a class="button button--primary">Primary Button</a>
<a class="button button--secondary">Secondary Button</a>
<a class="button button--error">Error Button</a>

BEM (Block Element Modifier) METHODOLOGY

http://getbem.com/

Block

Elements

Modifiers

<div class="block">
    <div class="block__element">
        <a class="block__element__link block__element__link--active"></a>
    </div>
</div>

.block {
    &__element {
        /* Styles here */

        &__link {
            /* Styles here */

            &--hover {}
            &--active {}
        }
    }
}

Example: Form with input

Type Your Email & Join with 80,000 Subscribers

<div class="optin-form">
    <input class="optin-form__input" />
    <button class="optin-form__button" />
</div>

.optin-form {
    /* Styles here */
    &__input {
        /* Styles here */
    }
    &__button {
        /* Styles here */
        &:hover {
            /* Hover styles here */
        }
    }
}

Imagine Tree Structure

block
|__ first-element
|__ another-element

<div class="block">
    <div class="block__first-element"></div>
    <div class="block__another-element"></div>
</div>

.block {
    &__first-element {}
    &__another-element {}
}

Folder Structures

Main.scss

File Utama, import file partials dari folder

Abstracts

Kumpulan Variable, Function dan Mixins. e.g colors

Base

Kumpulan Base Style. e.g Typography, Font

Components

Kumpulan Components. e.g buttons, input, etc

Pages

Kumpulan Pages. e.g home, about-us, contact-us

themes

Kumpulan Themes. e.g app, admin, customer-support

LAYOUT

Kumpulan Layouts. e.g header, footer, sidebar

VENDOR

Kumpulan SASS dari vendor. e.g masonry, swiper, owl-carousel, etc

styleguides

Design Approach

~~Untuk Mempersulit Designer~~

~~Design Bukan Matematika~~

Standarisasi, Brand Identity, BERPRINSIP, Mempercepat Workflow

Simple StyleGuides

Detailed styleguides

https://polaris.shopify.com/

https://atlassian.design/

MORE DETAILED STYLEGUIDES

Click Next

Hey man you see that guy over there

He is lazy to explain more about styleguides on the current slide

Design system

Design Language or Design Patterns

ATOMIC DESIGN

http://bradfrost.com/blog/post/atomic-web-design/

We’re not designing pages, we’re designing systems of components.—Stephen Hay

ATOMS

Atoms adalah komponen dasar dan terkecil dari sebuah block.

molecules

Molecules adalah kumpulan dari beberapa Atom. Sifatnya kompleks karena harus ada ikatan yang kuat antar atom yang digabungkan. Mengkombinasikan atom butuh sense design.

Organism

Molecules adalah block dasar yang kuat dalam atomic design. Organisme adalah kumpulan molecules. Sama seperti molecules, organism mempunyai sifat yang kompleks.

Templates

Template adalah kumpulan organism yang jadi satu. Bentuk template lebih fungsional dan lebih bisa di mengerti. Template sama seperti layout.

pages

Pages adalah bentuk yang paling sempurna. Dimana content bisa di terapkan dalam context masing-masing.

Google Material Design

https://material.io/

Microsoft Fluent

http://fluent.microsoft.com/

references

50%

Developer

50%

Designer

Some people don't like change, but you need to embrace change if the alternative is disaster.

Elon Musk

Big Thank You

bit.ly/design-system-djavaweb