podstawy projektowania do internetu - wybrane elementy strony www
TRANSCRIPT
![Page 1: Podstawy projektowania do Internetu - wybrane elementy strony www](https://reader034.vdocuments.pub/reader034/viewer/2022052304/558c4611d8b42aea348b46bd/html5/thumbnails/1.jpg)
Podstawy projektowania do Internetunr.3 „Wybrane elementy strony”
Tomasz Kwiatkowski 3pracownia.diz.pl 3pracownia.wordpress.comASP Gdańsk, Wydział Architektury i Wzornictwa, 23.10.2013
![Page 2: Podstawy projektowania do Internetu - wybrane elementy strony www](https://reader034.vdocuments.pub/reader034/viewer/2022052304/558c4611d8b42aea348b46bd/html5/thumbnails/2.jpg)
Graficzny interfejs użytkownikaTypografiaKolor
![Page 3: Podstawy projektowania do Internetu - wybrane elementy strony www](https://reader034.vdocuments.pub/reader034/viewer/2022052304/558c4611d8b42aea348b46bd/html5/thumbnails/3.jpg)
Przycisk
![Page 4: Podstawy projektowania do Internetu - wybrane elementy strony www](https://reader034.vdocuments.pub/reader034/viewer/2022052304/558c4611d8b42aea348b46bd/html5/thumbnails/4.jpg)
Prawo Fittsa
„czas potrzebny na przesunięcie się do określonego celu, zależy od rozmiaru celu i dystansu do niego”
![Page 5: Podstawy projektowania do Internetu - wybrane elementy strony www](https://reader034.vdocuments.pub/reader034/viewer/2022052304/558c4611d8b42aea348b46bd/html5/thumbnails/5.jpg)
![Page 6: Podstawy projektowania do Internetu - wybrane elementy strony www](https://reader034.vdocuments.pub/reader034/viewer/2022052304/558c4611d8b42aea348b46bd/html5/thumbnails/6.jpg)
![Page 7: Podstawy projektowania do Internetu - wybrane elementy strony www](https://reader034.vdocuments.pub/reader034/viewer/2022052304/558c4611d8b42aea348b46bd/html5/thumbnails/7.jpg)
![Page 8: Podstawy projektowania do Internetu - wybrane elementy strony www](https://reader034.vdocuments.pub/reader034/viewer/2022052304/558c4611d8b42aea348b46bd/html5/thumbnails/8.jpg)
![Page 9: Podstawy projektowania do Internetu - wybrane elementy strony www](https://reader034.vdocuments.pub/reader034/viewer/2022052304/558c4611d8b42aea348b46bd/html5/thumbnails/9.jpg)
![Page 10: Podstawy projektowania do Internetu - wybrane elementy strony www](https://reader034.vdocuments.pub/reader034/viewer/2022052304/558c4611d8b42aea348b46bd/html5/thumbnails/10.jpg)
![Page 11: Podstawy projektowania do Internetu - wybrane elementy strony www](https://reader034.vdocuments.pub/reader034/viewer/2022052304/558c4611d8b42aea348b46bd/html5/thumbnails/11.jpg)
![Page 12: Podstawy projektowania do Internetu - wybrane elementy strony www](https://reader034.vdocuments.pub/reader034/viewer/2022052304/558c4611d8b42aea348b46bd/html5/thumbnails/12.jpg)
![Page 13: Podstawy projektowania do Internetu - wybrane elementy strony www](https://reader034.vdocuments.pub/reader034/viewer/2022052304/558c4611d8b42aea348b46bd/html5/thumbnails/13.jpg)
![Page 14: Podstawy projektowania do Internetu - wybrane elementy strony www](https://reader034.vdocuments.pub/reader034/viewer/2022052304/558c4611d8b42aea348b46bd/html5/thumbnails/14.jpg)
Hiperłącze
![Page 15: Podstawy projektowania do Internetu - wybrane elementy strony www](https://reader034.vdocuments.pub/reader034/viewer/2022052304/558c4611d8b42aea348b46bd/html5/thumbnails/15.jpg)
Niebieski 50%
Czerwony 13%
Czarny 12%
Szary 12%
Zielony 6%
Brązowy 5%
Purpurowy 2%
![Page 16: Podstawy projektowania do Internetu - wybrane elementy strony www](https://reader034.vdocuments.pub/reader034/viewer/2022052304/558c4611d8b42aea348b46bd/html5/thumbnails/16.jpg)
Ikony
![Page 17: Podstawy projektowania do Internetu - wybrane elementy strony www](https://reader034.vdocuments.pub/reader034/viewer/2022052304/558c4611d8b42aea348b46bd/html5/thumbnails/17.jpg)
„Lubią nas a my lubimy znowu innychLubią nas drabina głupich sięga niebaLubią nas i więcej nic już nie potrzeba namBo lubią nas
I tylko czasem kiedy zsikam sięWątpię czy lubią mnie”
Lech Janerka „Lubią nas”
![Page 18: Podstawy projektowania do Internetu - wybrane elementy strony www](https://reader034.vdocuments.pub/reader034/viewer/2022052304/558c4611d8b42aea348b46bd/html5/thumbnails/18.jpg)
![Page 19: Podstawy projektowania do Internetu - wybrane elementy strony www](https://reader034.vdocuments.pub/reader034/viewer/2022052304/558c4611d8b42aea348b46bd/html5/thumbnails/19.jpg)
![Page 20: Podstawy projektowania do Internetu - wybrane elementy strony www](https://reader034.vdocuments.pub/reader034/viewer/2022052304/558c4611d8b42aea348b46bd/html5/thumbnails/20.jpg)
Typografia
![Page 21: Podstawy projektowania do Internetu - wybrane elementy strony www](https://reader034.vdocuments.pub/reader034/viewer/2022052304/558c4611d8b42aea348b46bd/html5/thumbnails/21.jpg)
T T
![Page 22: Podstawy projektowania do Internetu - wybrane elementy strony www](https://reader034.vdocuments.pub/reader034/viewer/2022052304/558c4611d8b42aea348b46bd/html5/thumbnails/22.jpg)
monospacedcursivefantasy
![Page 23: Podstawy projektowania do Internetu - wybrane elementy strony www](https://reader034.vdocuments.pub/reader034/viewer/2022052304/558c4611d8b42aea348b46bd/html5/thumbnails/23.jpg)
Core fonts for the Web : Andale Mono, Arial, Arial Black, Comic Sans MS, Courier NewGeorgia, Impact, Times New Roman, Trebuchet MS, Verdana, Webdings (Microsoft 1996)
Adobe web type : Minion Web, Minion Web Italic, Minion Web Bold, Myriad Web, Myriad Web Italic, Myriad Web Bold, Myriad Condensed Web, Myriad Condensed Web Italic,Caflisch Script Web, Mezz Web Bold, Penumbra Serif Web, Giddyup Web (Adobe)
Monotype ESQ Fonts: Bookman Old Style, Gill Sans, New Gothic, Rockwell (Agfa)
![Page 24: Podstawy projektowania do Internetu - wybrane elementy strony www](https://reader034.vdocuments.pub/reader034/viewer/2022052304/558c4611d8b42aea348b46bd/html5/thumbnails/24.jpg)
Wójt dźgnął boży puch, sześć frań, milkę.Mknął boży puch. Jeść stóg z lędźwi Frań?Puść mą dłoń! Gnij schab, frytkę! Zwóź żel!Tknę łój, wapń. Dość! Uf! Gryź chleb,miąższ!Znajdź pchły, wróżko! Film "Teść" gębą suń!Mnich zwlókł żerdź. Puść tą boję! Gań syf!Sklną chów żab? Jim, puść dłoń! Zgryź fetę!Aj, pech! Struś dźgnął ćmę FBI! Koń lży wóz.Tchórz w KGB. Sądź płoć! Fajny mężuś i leń.Bądź waść gej, chroń kumpli! Złóż syf, tnę!
![Page 25: Podstawy projektowania do Internetu - wybrane elementy strony www](https://reader034.vdocuments.pub/reader034/viewer/2022052304/558c4611d8b42aea348b46bd/html5/thumbnails/25.jpg)
Windows: Times New Roman, Georgia, Arial, Verdana, Trebuchet MS, Tahoma, Courier New, Andale Mono
Apple Mac OS: New York, Palatino, Times, Chrcoal, Chicago, Geneva, Helvetica, Lucida Grande, Courier, Monaco
Unix/Linux: Bitstream Vera Serif, New Century Schoolbook, Times, UtopiaBitstream Vera Sans, Helvetica, Lucida, Bitstream Vera Mono, Courier
![Page 26: Podstawy projektowania do Internetu - wybrane elementy strony www](https://reader034.vdocuments.pub/reader034/viewer/2022052304/558c4611d8b42aea348b46bd/html5/thumbnails/26.jpg)
Arial Comic Sans MSGeorgiaImpactTimes New RomanTrebuchet MSVerdana
![Page 27: Podstawy projektowania do Internetu - wybrane elementy strony www](https://reader034.vdocuments.pub/reader034/viewer/2022052304/558c4611d8b42aea348b46bd/html5/thumbnails/27.jpg)
Arial Verdana Helvetica Georgia Times Tahoma Times New Roman Trebuchet MS Lucida Grande Geneva Lucida Sans Unicode
![Page 28: Podstawy projektowania do Internetu - wybrane elementy strony www](https://reader034.vdocuments.pub/reader034/viewer/2022052304/558c4611d8b42aea348b46bd/html5/thumbnails/28.jpg)
Dzieci: 12-14 punktów
Młodzież: 10-12 punktów
Standard: 10-12 punktów
Osoby starsze i z wadą wzroku: 12-14 punktów
![Page 29: Podstawy projektowania do Internetu - wybrane elementy strony www](https://reader034.vdocuments.pub/reader034/viewer/2022052304/558c4611d8b42aea348b46bd/html5/thumbnails/29.jpg)
Puść mą dłoń! Gnij schab, frytkę! Zwóź żel!
![Page 30: Podstawy projektowania do Internetu - wybrane elementy strony www](https://reader034.vdocuments.pub/reader034/viewer/2022052304/558c4611d8b42aea348b46bd/html5/thumbnails/30.jpg)
Puść mą dłoń! Gnij schab, frytkę! Zwóź żel!Puść mą dłoń! Gnij schab, frytkę! Zwóź żel!
![Page 31: Podstawy projektowania do Internetu - wybrane elementy strony www](https://reader034.vdocuments.pub/reader034/viewer/2022052304/558c4611d8b42aea348b46bd/html5/thumbnails/31.jpg)
Puść mą dłoń! Gnij schab, frytkę! Zwóź żel!Puść mą dłoń! Gnij schab, frytkę! Zwóź żel!
![Page 32: Podstawy projektowania do Internetu - wybrane elementy strony www](https://reader034.vdocuments.pub/reader034/viewer/2022052304/558c4611d8b42aea348b46bd/html5/thumbnails/32.jpg)
![Page 33: Podstawy projektowania do Internetu - wybrane elementy strony www](https://reader034.vdocuments.pub/reader034/viewer/2022052304/558c4611d8b42aea348b46bd/html5/thumbnails/33.jpg)
Kolory
![Page 34: Podstawy projektowania do Internetu - wybrane elementy strony www](https://reader034.vdocuments.pub/reader034/viewer/2022052304/558c4611d8b42aea348b46bd/html5/thumbnails/34.jpg)
![Page 35: Podstawy projektowania do Internetu - wybrane elementy strony www](https://reader034.vdocuments.pub/reader034/viewer/2022052304/558c4611d8b42aea348b46bd/html5/thumbnails/35.jpg)
![Page 36: Podstawy projektowania do Internetu - wybrane elementy strony www](https://reader034.vdocuments.pub/reader034/viewer/2022052304/558c4611d8b42aea348b46bd/html5/thumbnails/36.jpg)
![Page 37: Podstawy projektowania do Internetu - wybrane elementy strony www](https://reader034.vdocuments.pub/reader034/viewer/2022052304/558c4611d8b42aea348b46bd/html5/thumbnails/37.jpg)
![Page 38: Podstawy projektowania do Internetu - wybrane elementy strony www](https://reader034.vdocuments.pub/reader034/viewer/2022052304/558c4611d8b42aea348b46bd/html5/thumbnails/38.jpg)
![Page 39: Podstawy projektowania do Internetu - wybrane elementy strony www](https://reader034.vdocuments.pub/reader034/viewer/2022052304/558c4611d8b42aea348b46bd/html5/thumbnails/39.jpg)
![Page 40: Podstawy projektowania do Internetu - wybrane elementy strony www](https://reader034.vdocuments.pub/reader034/viewer/2022052304/558c4611d8b42aea348b46bd/html5/thumbnails/40.jpg)
![Page 41: Podstawy projektowania do Internetu - wybrane elementy strony www](https://reader034.vdocuments.pub/reader034/viewer/2022052304/558c4611d8b42aea348b46bd/html5/thumbnails/41.jpg)
![Page 42: Podstawy projektowania do Internetu - wybrane elementy strony www](https://reader034.vdocuments.pub/reader034/viewer/2022052304/558c4611d8b42aea348b46bd/html5/thumbnails/42.jpg)
Pozostałe
![Page 43: Podstawy projektowania do Internetu - wybrane elementy strony www](https://reader034.vdocuments.pub/reader034/viewer/2022052304/558c4611d8b42aea348b46bd/html5/thumbnails/43.jpg)
![Page 44: Podstawy projektowania do Internetu - wybrane elementy strony www](https://reader034.vdocuments.pub/reader034/viewer/2022052304/558c4611d8b42aea348b46bd/html5/thumbnails/44.jpg)
![Page 45: Podstawy projektowania do Internetu - wybrane elementy strony www](https://reader034.vdocuments.pub/reader034/viewer/2022052304/558c4611d8b42aea348b46bd/html5/thumbnails/45.jpg)
![Page 46: Podstawy projektowania do Internetu - wybrane elementy strony www](https://reader034.vdocuments.pub/reader034/viewer/2022052304/558c4611d8b42aea348b46bd/html5/thumbnails/46.jpg)
Zadanie:Wprowadź poprawki do swojego projektu.
![Page 47: Podstawy projektowania do Internetu - wybrane elementy strony www](https://reader034.vdocuments.pub/reader034/viewer/2022052304/558c4611d8b42aea348b46bd/html5/thumbnails/47.jpg)
Dziękuję za uwagę
![Page 48: Podstawy projektowania do Internetu - wybrane elementy strony www](https://reader034.vdocuments.pub/reader034/viewer/2022052304/558c4611d8b42aea348b46bd/html5/thumbnails/48.jpg)
Źródła:Książki:Nielsen Jakob, „Projektowanie funkcjonalnych serwisów internetowych”, Helion, Gliwice 2003Boguska-Torbicz Anna, Kasperski Marek, „Projektowanie stron www, użyteczność w praktyce”, Helion, Gliwice 2008Mączyńska-Frydryszek,A., Jaskólska-Klaus, M., Maruszewski, T., . „Psychofizjologia widzenia”WWW:www.uxbite.com, gajdaw.pl
Obrazy:smashingmagazine.com, www.hongkiat.com,