Podstawy projektowania do Internetu - wybrane elementy strony www

48
Podstawy projektowania do Internetu nr.3 „Wybrane elementy strony” Tomasz Kwiatkowski 3pracownia.diz.pl 3pracownia.wordpress.com ASP Gdańsk, Wydział Architektury i Wzornictwa, 23.10.2013

Transcript of Podstawy projektowania do Internetu - wybrane elementy strony www

Page 1: Podstawy projektowania do Internetu - wybrane elementy strony www

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

Graficzny interfejs użytkownikaTypografiaKolor

Page 3: Podstawy projektowania do Internetu - wybrane elementy strony www

Przycisk

Page 4: Podstawy projektowania do Internetu - wybrane elementy strony www

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
Page 6: Podstawy projektowania do Internetu - wybrane elementy strony www
Page 7: Podstawy projektowania do Internetu - wybrane elementy strony www
Page 8: Podstawy projektowania do Internetu - wybrane elementy strony www
Page 9: Podstawy projektowania do Internetu - wybrane elementy strony www
Page 10: Podstawy projektowania do Internetu - wybrane elementy strony www
Page 11: Podstawy projektowania do Internetu - wybrane elementy strony www
Page 12: Podstawy projektowania do Internetu - wybrane elementy strony www
Page 13: Podstawy projektowania do Internetu - wybrane elementy strony www
Page 14: Podstawy projektowania do Internetu - wybrane elementy strony www

Hiperłącze

Page 15: Podstawy projektowania do Internetu - wybrane elementy strony www

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

Ikony

Page 17: Podstawy projektowania do Internetu - wybrane elementy strony www

„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
Page 19: Podstawy projektowania do Internetu - wybrane elementy strony www
Page 20: Podstawy projektowania do Internetu - wybrane elementy strony www

Typografia

Page 21: Podstawy projektowania do Internetu - wybrane elementy strony www

T T

Page 22: Podstawy projektowania do Internetu - wybrane elementy strony www

monospacedcursivefantasy

Page 23: Podstawy projektowania do Internetu - wybrane elementy strony www

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

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

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

Arial Comic Sans MSGeorgiaImpactTimes New RomanTrebuchet MSVerdana

Page 27: Podstawy projektowania do Internetu - wybrane elementy strony www

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

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

Puść mą dłoń! Gnij schab, frytkę! Zwóź żel!

Page 30: Podstawy projektowania do Internetu - wybrane elementy strony www

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

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
Page 33: Podstawy projektowania do Internetu - wybrane elementy strony www

Kolory

Page 34: Podstawy projektowania do Internetu - wybrane elementy strony www
Page 35: Podstawy projektowania do Internetu - wybrane elementy strony www
Page 36: Podstawy projektowania do Internetu - wybrane elementy strony www
Page 37: Podstawy projektowania do Internetu - wybrane elementy strony www
Page 38: Podstawy projektowania do Internetu - wybrane elementy strony www
Page 39: Podstawy projektowania do Internetu - wybrane elementy strony www
Page 40: Podstawy projektowania do Internetu - wybrane elementy strony www
Page 41: Podstawy projektowania do Internetu - wybrane elementy strony www
Page 42: Podstawy projektowania do Internetu - wybrane elementy strony www

Pozostałe

Page 43: Podstawy projektowania do Internetu - wybrane elementy strony www
Page 44: Podstawy projektowania do Internetu - wybrane elementy strony www
Page 45: Podstawy projektowania do Internetu - wybrane elementy strony www
Page 46: Podstawy projektowania do Internetu - wybrane elementy strony www

Zadanie:Wprowadź poprawki do swojego projektu.

Page 47: Podstawy projektowania do Internetu - wybrane elementy strony www

Dziękuję za uwagę

Page 48: Podstawy projektowania do Internetu - wybrane elementy strony www

Ź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,