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