Design dla estetycznie ograniczonychZbigniew Cisiński

zbigniew (at) cisinski.com

O czym będzie

• podstawowe elementy i zasady designu

• skupimy się na UI

• będzie “po naszemu”

• typografia

• animacje

Designer

Dlaczego?

Dobra i zła wiadomość

Design

Elementy designu

• kolor

• tekstura

• figura

• kształt

• przestrzeń

Kolor

Koło kolorów

Koło kolorówKolory podstawowe

Koło kolorówKolory drugorzędne

Koło kolorówKolory trzeciorzędne

Koło kolorówKolory ciepłe i zimne

zimne

ciepłe

Koło kolorówTinta, odcień, ton

czysty kolor

tinta

ton

odcień

Koło kolorówPrawdziwy widok

KoloryKolory wystające i chowające się

KoloryKolory wystające i chowające się

KoloryKolory wystające i chowające się

Lorem Adipiscing QuamSed posuere consectetur est

Lorem Adipiscing QuamSed posuere consectetur est

Nullam quis risus eget urna mollis ornare vel eu leo. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Nullam quis risus eget urna mollis ornare vel eu leo. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

KoloryObrazy impresjonistów

KolorySubtelne różnice

Click here Click here

Na co uważać• profile kolorów

• niedoskonałości monitorów

• klienta

• moda

• ślepota na barwy

• przyjęte konwencje

• kontrast

KoloryKontrast

To jest bardzo niski kontrast

To jest dobrze dobrany kontrast

1.3 5.3

Dobór koloru

• branding

• max 5

Metody doboru koloruMonochromatyczny

Metody doboru koloruAnalogiczny

Metody doboru koloruKomplementarny

Metody doboru koloruPółkomplementarny (Split-Complementary)

Metody doboru koloruTriadyczny

Metody doboru koloruTetradyczny

Dobór koloru• narzędzia w sieci

• colorschemedesigner.com

• kuler.adobe.com

• https://designschool.canva.com/blog/100-color-combinations/

Dobór koloruhttps://designschool.canva.com/blog/100-color-combinations/

Dobór koloruhttps://designschool.canva.com/blog/100-color-combinations/

Dobór koloruhttps://designschool.canva.com/blog/100-color-combinations/

Dobór koloru• narzędzia w sieci

• colorschemedesigner.com

• kuler.adobe.com

• https://designschool.canva.com/blog/100-color-combinations/

• po tagach

• metody doboru

Animacje

The Animation

The Animation

AnimacjeEasing

czas

wartość

0

3

6

9

12

Duration

Rola animacji• prowadzą oko użytkownika

Rola animacji• prowadzą oko użytkownika

• budują model mentalny

Rola animacji• prowadzą oko użytkownika

• budują model mentalny

• tłumaczą zmiany w UI

Rola animacji• prowadzą oko użytkownika

• budują model mentalny

• tłumaczą zmiany w UI

• nadają charakter

Rola animacji• prowadzą oko użytkownika

• budują model mentalny

• tłumaczą zmiany w UI

• nadają charakter

• sugerują dostępność

Rola animacji• prowadzą oko użytkownika

• budują model mentalny

• tłumaczą zmiany w UI

• nadają charakter

• sugerują dostępność

• skupiają uwagę

Rola animacji• prowadzą oko użytkownika

• budują model mentalny

• tłumaczą zmiany w UI

• nadają charakter

• sugerują dostępność

• skupiają uwagę

• sprawiają, że UI wydaje się naturalnie reagować

Animacja• nie jest łatwo stworzyć coś, co ma sens

• muszą być spójne

• animacje systemowe

• płynne

• interaktywne i nie przeszkadzające

• mieć sens w danym kontekście

Typografia

TypografiaFonty szeryfowe i bezszeryfowe

Czytelność• szerokość

• szeryfowe fonty są czytelniejsze

• wysokość linii

• kapitalizacja wyrazów

• odległości między znakami

• izolacja problemu

• 1 font

• systemowy

Niestandardowe fonty

• licencja

• naprawa

• dobór

Charakter fontu

Charakter fontu

Niestandardowe fonty

• serwisy z gotowymi wzorcami

• najlepiej zestawić nieszeryfowe fonty dla nagłówków z szeryfowym dla tekstu

Przestrzeń i układ

Przestrzeń i układWyrównanie optyczne

Przestrzeń i układWyrównanie optyczne

Przestrzeń i układWyrównanie optyczne

Przestrzeń i układDo linii

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod.

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam quis risus eget urna mollis ornare vel eu leo. Vestibulum id ligula porta felis euismod semper.

Aenean lacinia bibendum nulla sed consectetur. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper.

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Etiam porta sem malesuada magna mollis euismod. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper.

Przestrzeń i układDo linii

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod.

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam quis risus eget urna mollis ornare vel eu leo. Vestibulum id ligula porta felis euismod semper.

Aenean lacinia bibendum nulla sed consectetur. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper.

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Etiam porta sem malesuada magna mollis euismod. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper.

Przestrzeń i układMarginesy

Przestrzeń i układMit Złotego Podziału

1.61803398875

Przestrzeń i układMit Złotego Podziału

Przestrzeń i układMit Złotego Podziału

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Vulputate Pellentesque Commodo Etiam

Przestrzeń i układInne proporcje

• 1:√2

• 2:3

• 3:4

Przestrzeń i układUrządzenia mobilne

• Przykładowo:

• Google Nexus One - 0,6 (3:5)

• Macbook Pro - 0,625 (5:8)

• iPhone 4 - 0,66 (2:3)

• stare ekrany - 0,75 (3:4)

Przestrzeń i układJak wykorzystać proporcje w projektowaniu?

Przestrzeń i układJak wykorzystać proporcje w projektowaniu?

Przestrzeń i układJak wykorzystać proporcje w projektowaniu?

Przestrzeń i układJak wykorzystać proporcje w projektowaniu?

Przestrzeń i układJak wykorzystać proporcje w projektowaniu?

Przestrzeń i układJak wykorzystać proporcje w projektowaniu?

Przestrzeń i układJak wykorzystać proporcje w projektowaniu?

Przestrzeń i układJak wykorzystać proporcje w projektowaniu?

Przestrzeń i układJak wykorzystać proporcje w projektowaniu?

Przestrzeń i układJak wykorzystać proporcje w projektowaniu?

Przestrzeń i układSiatka

Przestrzeń i układSiatka

Przestrzeń i układSiatka

Przestrzeń i układPrzestrzeń negatywna

Przestrzeń i układPrzestrzeń negatywna

Przestrzeń i układPrzestrzeń negatywna

Przestrzeń i układPrzestrzeń negatywna

Przestrzeń i układPrzestrzeń negatywna

Przestrzeń i układPrzestrzeń negatywna

Przestrzeń i układPrzestrzeń negatywna

Zasady designu

Zasady designuRównowaga symetryczna

Aenean eu leo quam. Pellentesque ornare sem

lacinia quam venenatis vestibulum. Vivamus

sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Curabitur

blandit tempus porttitor. Maecenas faucibus

mollis interdum. Praesent commodo

cursus magna, vel scelerisque nisl

consectetur et. nisi erat porttitor ligula mauris

condimentum nibh

Zasady designuRównowaga asymetrycznaCum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec id elit non mi porta gravida at eget metus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Sed posuere consectetur est at lobortis. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur.

Zasady designuBliskość

Zasady designuPowtórzenie

Zasady designuPowtórzenie - rytm

Zasady designuKontrast

Wyróżnienie

Wyróżnienie• Przez złamanie zasad:

• bliskości - izolacja

Wyróżnienie• Przez złamanie zasad:

• bliskości - izolacja

• powtórzenia i rytmu, zaburzenie podobieństwa

Wyróżnienie• Przez złamanie zasad:

• bliskości - izolacja

• powtórzenia i rytmu, zaburzenie podobieństwa

• kontrast

Wyróżnienie• Przez złamanie zasad:

• bliskości - izolacja

• powtórzenia i rytmu, zaburzenie podobieństwa

• kontrast

• proporcje, skala, dominacja

Budowanie hierarchii

Budowanie hierarchii• appka randkowa dla fanów Star Trek - widok profilu

• “firmowe kolory”

• zdjęcia, głosowanie hot/not, ulubione odcinki wraz z linkami do opisu, dodawanie do znajomych, imię, nazwisko, nick

• kluczowa funkcjonalność: zdjęcia, głosowanie, dodawanie do znajomych

• design ma być “lekki”, ale “firmowy”, karta z widokiem profilu ma się zmieścić na 1 ekranie

• zdjęcie ma być kwadratowe i wyraźne

Podsumowanie

Design dla estetycznie ograniczonychZbigniew Cisiński

zbigniew (at) cisinski.com