Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Prototype Selate
ESTETYKA
DESIGN JAKO CECHA
PRODUKTU:
W znaczeniu podstawowym design jest wyglądem czegoś, co
powstało na podstawie projektu [...] W...
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...
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ń do...
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łe...
ZŁOTY PODZIAŁ W PRAKTYCE
ZŁOTY PODZIAŁ NA WWW
PROBLEMY
JEDNOSTKI BEZWZGLĘDNE
A RESPONSYWNOŚĆ
JEDNOSTKI WZGLĘDNE
A RESPONSYWNOŚĆ
JEDNOSTKI WZGLĘDNE
A TYPOGRAFIA
BITMAPY A RESPONSYWNOŚĆ
SKALOWANIE
2 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, ...
FIBONACCI NA WWW
SIATKA
MODUŁ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...
RODZAJE KROJÓW PISMA
Kroje szeryfowe dwuelementowe:
renesansowa:
barokowa:
klasycystyczna:
Kroje szeryfowe jednoelementowe...
RODZAJE KROJÓW PISMA
Kroje bezszeryfowe:
groteski:
neogroteski:
kroje geometryczne:
kroje humanistyczne:
Pisanki:
kaligraf...
RODZAJE KROJÓW PISMA
Ksenotypy:
zdeformowane:
obrazkowe (dingbats):
Kroje cyfrowe:
ocr:
fonty ekranowe:
pikselfonty: eboy ...
LEGIBILITY
LEGIBILITY:
obejmuje swym zakresem wszystkie techniki typograficzne,
mające na celu umożliwienie jak najlepszej i najszybs...
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
ksz...
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Ł...
www.snook.ca/technical/colour_contrast/colour.html
CYFRY I ZNAKI SPECJALNE
Encje
WEB SAME FONTS
Przyzwyczajenie!
www.w3schools.com/cssref/css_websafe_fonts.asp
WEB SAFE FONTS
ICON FONTS
Font Awesome, ...
READABILITY
READABILITY:
oznacza stopień łatwości czytania złożonego tekstu,
zrozumienia jego znaczenia i przesłania w określonej
sytu...
TEKST SIECIOWY - PROBLEMY:
»» Rozdzielczość. Nawet drukarki o niskiej
rozdzielczości (300 dpi) drukują tekst dużo bardziej...
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 WIERSZU
Column layout
JUSTOWANIE I DZIELENIE
MARGINESY I WCIĘCIA
Content chunks
ZAPOBIEGANIE BŁĘDOM SKŁADU
Liquid layout
NAJCZĘSTSZE BŁĘDY SKŁADU:
»» rzeka – nieproporcjonalny odstęp między wyrazami,
będące skutkiem justowania blokowego;
»» ch...
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 wiz...
EPILOG
ARTYSTA = PROJEKTANT
DEVELOPER = DESIGNER
DESIGNER = DEVELOPER?
„Dla mnie dobry projekt oznacza jak najmniej projektowania.
Proste jest lepsze niż skomplikowane. [...]
Dyskretne jest lep...
Upcoming SlideShare
Loading in …5
×

EPI Interfejs użytkownika - lab. 6

919 views

Published on

Published in: Design
  • Be the first to comment

  • Be the first to like this

EPI Interfejs użytkownika - lab. 6

  1. 1. Prototype Selate
  2. 2. ESTETYKA
  3. 3. 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
  4. 4. JEDNOSTKI I MIARY
  5. 5. 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
  6. 6. RETINA
  7. 7. JEDNOSTKI WZGLĘDNE: »» wysokość x »» firet »» złoty podział
  8. 8. 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
  9. 9. FIRET / EM: kwadrat, którego bok ma długość odpowiadającą wielkości aktualnie użytego stopnia pisma / Wikipedia
  10. 10. 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
  11. 11. ZŁOTY PODZIAŁ W PRAKTYCE
  12. 12. ZŁOTY PODZIAŁ NA WWW
  13. 13. PROBLEMY
  14. 14. JEDNOSTKI BEZWZGLĘDNE A RESPONSYWNOŚĆ
  15. 15. JEDNOSTKI WZGLĘDNE A RESPONSYWNOŚĆ
  16. 16. JEDNOSTKI WZGLĘDNE A TYPOGRAFIA
  17. 17. BITMAPY A RESPONSYWNOŚĆ
  18. 18. SKALOWANIE 2 x większa bitmapa waży 3-4 x więcej!
  19. 19. ROZWIĄZANIA
  20. 20. FLEXBOX
  21. 21. FLEXBOX
  22. 22. MULTIPLE COLUMNS
  23. 23. THE ONE PIXEL RULE
  24. 24. RESPONSYWNE BITMAPY: »» picture »» srcset »» JS, PHP »» progressive enhancement ... jeszcze jesteśmy w lesie
  25. 25. PROGRESSIVE ENHANCEMENT + 1,5 RULE
  26. 26. mobile.smashingmagazine.com/2014/02/03/ one-solution-to-responsive-images/ alistapart.com/article/mo-pixels-mo-problems
  27. 27. SVG + ICON FONTS
  28. 28. 2. PROPORCJE, CZYLI HARMONIA
  29. 29. 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
  30. 30. FIBONACCI NA WWW
  31. 31. SIATKA MODUŁOWA
  32. 32. SIATKA W PRAKTYCE
  33. 33. MAGAZINE LAYOUTS
  34. 34. KONSEKWENCJA!
  35. 35. Z ZAŁOŻENIA RESPONSYWNA
  36. 36. 3. TYPOGRAFIA
  37. 37. 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
  38. 38. RODZAJE KROJÓW PISMA Kroje szeryfowe dwuelementowe: renesansowa: barokowa: klasycystyczna: Kroje szeryfowe jednoelementowe: egipcjanka:
  39. 39. RODZAJE KROJÓW PISMA Kroje bezszeryfowe: groteski: neogroteski: kroje geometryczne: kroje humanistyczne: Pisanki: kaligraficzne: niedbałe: inne:
  40. 40. RODZAJE KROJÓW PISMA Ksenotypy: zdeformowane: obrazkowe (dingbats): Kroje cyfrowe: ocr: fonty ekranowe: pikselfonty: eboy gamma, Bangalore, header
  41. 41. LEGIBILITY
  42. 42. LEGIBILITY: obejmuje swym zakresem wszystkie techniki typograficzne, mające na celu umożliwienie jak najlepszej i najszybszej identy- fikacji znaku. / J. Mrowczyk
  43. 43. HINTING: dokładne określenia położenia pikseli krawędzi znaku poprzez przyciąganie ich do siatki
  44. 44. ANTYALIASING: „rozmywanie” krawędzi poprzez rozjaśnianie pikseli granicznych w celu uzyskania łagodnych przejść między kształtem a tłem
  45. 45. JAK ZAPEWNIĆ DOBRĄ ODRÓŻNIALNOŚĆ?
  46. 46. KSZTAŁT I STOPIEŃ PISMA – HINTING
  47. 47. KSZTAŁT I STOPIEŃ PISMA – ANTYALIASING
  48. 48. 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łaodróżnialnośćśredniaodróżnialnośćdobraodróżnialność Luckiesh (1915) Tinker / Patterson (1931)
  49. 49. www.snook.ca/technical/colour_contrast/colour.html
  50. 50. CYFRY I ZNAKI SPECJALNE Encje
  51. 51. WEB SAME FONTS Przyzwyczajenie!
  52. 52. www.w3schools.com/cssref/css_websafe_fonts.asp
  53. 53. WEB SAFE FONTS
  54. 54. ICON FONTS Font Awesome, ...
  55. 55. READABILITY
  56. 56. READABILITY: oznacza stopień łatwości czytania złożonego tekstu, zrozumienia jego znaczenia i przesłania w określonej sytuacji / J. Mrowczyk
  57. 57. 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ę.
  58. 58. CO SIĘ ZMIENIŁO?: »» Rozdzielczość  RETINA »» Pozycja  URZĄDZENIA MOBILNE »» Odblask  KINDLE, E-INK
  59. 59. CZYTANIE Z EKRANU MONITORA JEST OK. 25%-30% WOLNIEJSZE
  60. 60. PISMO DZIEŁOWE: odmiana pisma zaprojektowana do składów ciągłych / blog Pracowni Liternictwa i Kaligrafii ASP w Krakowie
  61. 61. CZEGO UŻYWAĆ? »» przyzwyczajenie - web safe fonts »» minuskuły »» szybko wyświetlane »» Google Fonts »» Typekit etc.
  62. 62. JAK ZAPEWNIĆ DOBRĄ CZYTELNOŚĆ?
  63. 63. WYRÓŻNIKI
  64. 64. LINIA BAZOWA
  65. 65. LICZBA ZNAKÓW W WIERSZU Column layout
  66. 66. JUSTOWANIE I DZIELENIE
  67. 67. MARGINESY I WCIĘCIA Content chunks
  68. 68. ZAPOBIEGANIE BŁĘDOM SKŁADU Liquid layout
  69. 69. 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).
  70. 70. DOSTĘPNOŚĆ
  71. 71. fdc.org.pl/wcag2/
  72. 72. Użytkownik powinien móc dobrze widzieć bądź słyszeć treści — mieć możliwość oddzielenia informacji od tła.
  73. 73. Nie należy projektować treści w taki sposób, aby prowokować ataki padaczki.
  74. 74. Kolor nie jest wykorzystywany jako jedyny wizualny sposób przekazywania informacji [...] czy też wyróżniania elementów wizualnych.
  75. 75. EPILOG
  76. 76. ARTYSTA = PROJEKTANT
  77. 77. DEVELOPER = DESIGNER
  78. 78. DESIGNER = DEVELOPER?
  79. 79. „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

×