Prototype SelectIdeate
ESTETYKA
DESIGN JAKO CECHA PRODUKTU:W znaczeniu podstawowym design jest wyglądem czegoś, co powstało na podstawie projektu [...] W tym znaczeniu design przejmuje całą paletę stylów od wizualnych dziedzin sztuki, a więc może być design klasyczny, nowoczesny, futurystyczny...
W znaczeniu szerszym do wyglądu dochodzą takie cechy jak funkcjonalność i ergonomia.
/ Wikipedia
JEDNOSTKI I MIARY
JEDNOSTKI BEZWZGLĘDNE: » piksel » cal = 72 px » punkt = 1 px (dpi/ppi)
...czy na pewno?
1 cal = 72 punkty = 6 pica = 24, 8 mm
1 mm
1 punkt = 0,3528 mm
1 pica = 12 punktów = 4,2333 mm
RETINA
JEDNOSTKI WZGLĘDNE: » wysokość x » firet » złoty podział
WYSOKOŚĆ X:zależna od wysokości małych liter w danym kroju. 1 ex ma długość równą wysokości małych liter (bez wydłużeń dolnych) w danym kroju
/ taat.pl/typografia/jednostki.html
FIRET / EM:kwadrat, którego bok ma długość odpowiadającą wielkości aktualnie użytego stopnia pisma
/ Wikipedia
ZŁOTY PODZIAŁ:podział odcinka na dwie części tak, by stosunek długości dłuższej z nich do krótszej był taki sam, jak całego odcinka do części dłuższej.
/ Wikipedia
ZŁOTY PODZIAŁ W PRAKTYCE
ZŁOTY PODZIAŁ NA WWW
PROBLEMY
JEDNOSTKI BEZWZGLĘDNEA RESPONSYWNOŚĆ
JEDNOSTKI WZGLĘDNEA RESPONSYWNOŚĆ
JEDNOSTKI WZGLĘDNE A TYPOGRAFIA
BITMAPY A RESPONSYWNOŚĆ
SKALOWANIE2 x większa bitmapa waży 3-4 x więcej!
ROZWIĄZANIA
FLEXBOX
FLEXBOX
MULTIPLE COLUMNS
THE ONE PIXEL RULE
RESPONSYWNE BITMAPY: » picture » srcset » JS, PHP » progressive enhancement
... jeszcze jesteśmy w lesie
PROGRESSIVE ENHANCEMENT +1,5 RULE
mobile.smashingmagazine.com/2014/02/03/one-solution-to-responsive-images/
alistapart.com/article/mo-pixels-mo-problems
SVG + ICON FONTS
2.PROPORCJE,CZYLI HARMONIA
CIĄG FIBONACCIEGO:każdy następny element ciągu jest sumą dwóch poprzednich.
Wyrazy ciągu Fibonacciego to:0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610, 987, 1597, 2584, 4181.
/ Wikipedia
FIBONACCI NA WWW
SIATKAMODUŁOWA
SIATKA W PRAKTYCE
MAGAZINE LAYOUTS
KONSEKWENCJA!
Z ZAŁOŻENIA RESPONSYWNA
3.TYPOGRAFIA
ANATOMIA ZNAKU PISMA
wierzchołek górny
linia górna
linia bazowa
linia dolna
ramię ostroga grzbiet
występ
ziarno łuk
kreska poziomaakcentwspornik
firet noga poprzeczka trzon rozwidlenie
zawijas cyfry nautyczne
szeryf dolny kreska gruba
szeryf górny kreska cienka
wierzchołek dolny
wydłużenie dolne oko
wydłużenie górne
wysokość wersaliku
wysokość x
RODZAJE KROJÓW PISMA
Kroje szeryfowe dwuelementowe:
renesansowa:
barokowa:
klasycystyczna:
Kroje szeryfowe jednoelementowe:
egipcjanka:
RODZAJE KROJÓW PISMA
Kroje bezszeryfowe:
groteski:
neogroteski:
kroje geometryczne:
kroje humanistyczne:
Pisanki:
kaligraficzne:
niedbałe:
inne:
RODZAJE KROJÓW PISMA
Ksenotypy:
zdeformowane:
obrazkowe (dingbats):
Kroje cyfrowe:
ocr:
fonty ekranowe:
pikselfonty: eboy gamma, Bangalore, header
LEGIBILITY
LEGIBILITY:
obejmuje swym zakresem wszystkie techniki typograficzne, mające na celu umożliwienie jak najlepszej i najszybszej identy-fikacji znaku.
/ J. Mrowczyk
HINTING:
dokładne określenia położenia pikseli krawędzi znaku poprzez przyciąganie ich do siatki
ANTYALIASING:
„rozmywanie” krawędzi poprzez rozjaśnianie pikseli granicznych w celu uzyskania łagodnych przejść między kształtem a tłem
JAK ZAPEWNIĆ DOBRĄ ODRÓŻNIALNOŚĆ?
KSZTAŁT I STOPIEŃ PISMA – HINTING
KSZTAŁT I STOPIEŃ PISMA – ANTYALIASING
KOLOR I KONTRAST
CZARNY TEKST NA ŻÓŁTYM TLE
ZIELONY TEKST NA BIAŁYM TLE
NIEBIESKI TEKST NA BIAŁYM TLE
CZARNY TEKST NA BIAŁYM TLE
CZERWONY TEKST NA ŻÓŁTYM TLE
ZIELONY TEKST NA CZERWONYM TLE
CZERWONY TEKST NA ZIELONYM TLE
CZERWONY TEKST NA BIAŁYM TLE
CZARNY TEKST NA ŻÓŁTYM TLE
ZIELONY TEKST NA BIAŁYM TLE
NIEBIESKI TEKST NA BIAŁYM TLE
CZARNY TEKST NA BIAŁYM TLE
CZERWONY TEKST NA ŻÓŁTYM TLE
ZIELONY TEKST NA CZERWONYM TLE
CZERWONY TEKST NA ZIELONYM TLE
CZERWONY TEKST NA BIAŁYM TLE
zł
a od
różn
ialn
ość
śre
dn
ia o
dró
żnia
lnoś
ć d
obra
od
różn
ialn
ość
Luckiesh(1915)
Tinker / Patterson(1931)
www.snook.ca/technical/colour_contrast/colour.html
CYFRY I ZNAKI SPECJALNEEncje
WEB SAME FONTSPrzyzwyczajenie!
www.w3schools.com/cssref/css_websafe_fonts.asp
WEB SAFE FONTS
ICON FONTSFont Awesome, ...
READABILITY
READABILITY:oznacza stopień łatwości czytania złożonego tekstu, zrozumienia jego znaczenia i przesłania w określonej sytuacji
/ J. Mrowczyk
TEKST SIECIOWY - PROBLEMY: » Rozdzielczość. Nawet drukarki o niskiej
rozdzielczości (300 dpi) drukują tekst dużo bardziej » czytelny dla ludzkiego oka. » Pozycja. Aby odczytać tekst z ekranu, zmuszony
jesteś przyjąć inną od naturalnej pozycję ciała. » Odblask. » Migotanie obrazu. Jeśli Twój monitor odświeża
obraz z częstotliwością 60 Hz na sekundę, oznacza to, że obraz odtwarzany jest 60 razy na sekundę.
CO SIĘ ZMIENIŁO?: » Rozdzielczość RETINA » Pozycja URZĄDZENIA MOBILNE » Odblask KINDLE, E-INK
CZYTANIE Z EKRANU MONITORA JEST OK. 25%-30% WOLNIEJSZE
PISMO DZIEŁOWE:odmiana pisma zaprojektowana do składów ciągłych
/ blog Pracowni Liternictwa i Kaligrafii ASP w Krakowie
CZEGO UŻYWAĆ? » przyzwyczajenie - web safe fonts » minuskuły » szybko wyświetlane » Google Fonts » Typekit etc.
JAK ZAPEWNIĆ DOBRĄ CZYTELNOŚĆ?
WYRÓŻNIKI
LINIA BAZOWA
LICZBA ZNAKÓW W WIERSZUColumn layout
JUSTOWANIE I DZIELENIE
MARGINESY I WCIĘCIAContent chunks
ZAPOBIEGANIE BŁĘDOM SKŁADULiquid layout
NAJCZĘSTSZE BŁĘDY SKŁADU: » rzeka – nieproporcjonalny odstęp między wyrazami,
będące skutkiem justowania blokowego; » chorągiewki; » bękart – ostatni lub dwa ostatnie wiersze akapitu
przechodzące do kolejnego łamu; » sierota (lub szewc) – pierwszy wiersz nowego akapitu, po-
zostawiony na końcu poprzedniego łamu; » wdowa – jednowyrazowy wiersz na końcu akapitu (lub
wiersz o długości nie większej niż 7 znaków).
DOSTĘPNOŚĆ
fdc.org.pl/wcag2/
Użytkownik powinien móc dobrze widzieć bądź słyszeć treści — mieć możliwość oddzielenia informacji od tła.
Nie należy projektować treści w taki sposób, aby prowokować ataki padaczki.
Kolor nie jest wykorzystywany jako jedyny wizualny sposób przekazywania informacji [...] czy też wyróżniania elementów wizualnych.
EPILOG
ARTYSTA = PROJEKTANT
DEVELOPER = DESIGNER
DESIGNER = DEVELOPER?
„Dla mnie dobry projekt oznacza jak najmniej projektowania.
Proste jest lepsze niż skomplikowane. [...]
Dyskretne jest lepsze niż zachwycające.
Małe jest lepsze niż wielkie.
Lekkie jest lepsze niż ciężkie.
Jednobarwne jest lepsze niż kolorowe.
Harmonia jest lepsza niż dysonans. [...]
Neutralne jest lepsze niż agresywne.
Oczywiste jest lepsze niż to, czego trzeba szukać.
Niewiele elementów jest lepsze niż wiele.
System jest lepszy niż jego pojedyncze elmenty.”
/ D. Rams
Top Related