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
Top Related