Webdesign flow. From project to working website

of 58 /58
Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii Biomedycznej Katedra Informatyki Stosowanej GRAFIKA DLA POTRZEB INTERNETU OD PROJEKTU DO STRONY INTERNETOWEJ Mateusz Ziarko Kraków 2012

description

Presentation dedicated for speech at AGH-UST about webdesign flow.

Transcript of Webdesign flow. From project to working website

Page 1: Webdesign flow. From project to working website

Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki Stosowanej

GRAFIKA DLA POTRZEB INTERNETUOD PROJEKTU DO STRONY INTERNETOWEJ

Mateusz Ziarko

Kraków 2012

Page 2: Webdesign flow. From project to working website

PLAN PREZENTACJI

1. Od czego zacząć?

2. Krok I: Koncept

3. Krok II: Projekt

4. Krok III: HTML5 + CSS3 + jQuery

5. Responsywny = Nowoczesny

6. Dobre praktyki

7. Podsumowanie i pytania

Kraków 2012 2

Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki Stosowanej

Page 3: Webdesign flow. From project to working website

OD CZEGO ZACZĄĆ?

Każdy, nawet początkujący webdesigner powinien:

• umieć obsługiwać jakiś program graficzny, w którym można wygenerować grafikę rastrową

• wiedzieć jak wygląda kod HTML i w jaki sposób budowane są strony

• mieć chociaż trochę wyczucia estetycznego

• posiadać oczy

Kraków 2012 3

Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki Stosowanej

Page 4: Webdesign flow. From project to working website

OD CZEGO ZACZĄĆ?

Polecane programy graficzne:

• Adobe Photoshop

• Adobe Fireworks

• GIMP, dla masochistów ;)

Poza tym, możliwe jest to w:

• Adobe Illustrator

• COREL DRAW

Kraków 2012 4

Rys 1. Programy z pakietu Adobe Creative Suite

źródło: http://veerle-v2.duoh.com

Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki Stosowanej

Page 5: Webdesign flow. From project to working website

KROK 1: KONCEPT

Nie ma dobrego i przemyślanego projektu bez:

• dokładnego wywiadu i zbadania targetu przygotowywanego projektu

• rozpoznania istniejącej konkurencji

• przygotowania makiety przedprojektowej

• konsultacji z klientem

Kraków 2012 5

Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki Stosowanej

Page 6: Webdesign flow. From project to working website

KROK 1: KONCEPT

Dlaczego warto przygotować koncept?

• pozwoli nam to uniknąć zmian układu projektowanej aplikacji w późniejszych fazach

• daje wstępny pogląd

• umożliwia dopasować layout do możliwości back-endu

Kraków 2012 6

Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki Stosowanej

Page 7: Webdesign flow. From project to working website

KROK 1: KONCEPT

Jak budujemy koncept?

• obieramy odpowiedni dla nas układ

• postępujemy tak jakbyśmy projektowali

produkt końcowy, jednak nie nakładamy

żadnych efektów ani obrazków

• wypełniamy koncept przykładową treścią

Kraków 2012 7

Rys 2. Makieta projektu

Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki Stosowanej

Page 8: Webdesign flow. From project to working website

KROK 1: KONCEPT

Kraków 2012 8

Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki Stosowanej

Rys 2. Makieta projektu

Page 9: Webdesign flow. From project to working website

Rys 2. Makieta projektu

Page 10: Webdesign flow. From project to working website

KROK II: PROJEKT

Przed rozpoczęciem projektu

• należy przemyśleć jakich bazowych kolorów

będziemy chcieli użyć

• tworzymy paletę kolorów w naszym

programie graficznym, aby były one zawsze

pod ręką

Kraków 2012 10

Rys 3. Paleta kolorów przeznaczona dla projektu

Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki Stosowanej

Page 11: Webdesign flow. From project to working website

KROK II: PROJEKT

Przed rozpoczęciem projektu

• decydujemy, jaki kolor będą miały nagłówki,

odnośniki i wszystkie kluczowe elementy

• zbieramy chociażby poglądowe materiały,

którymi będziemy w przyszłości wypełniać

stronę tj. teksty, obrazki, itd.

Kraków 2012 11

Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki Stosowanej

Rys 4. Grafika poglądowa, połączenie makiety i istniejącego

projektu

Page 12: Webdesign flow. From project to working website

Rys 4. Grafika poglądowa, połączenie makiety i istniejącego projektu

Page 13: Webdesign flow. From project to working website

Rys 5. Projektowanie, etap 1

Page 14: Webdesign flow. From project to working website

Rys 6. Projektowanie, etap 2

Page 15: Webdesign flow. From project to working website

Rys 7. Projektowanie, etap 3

Page 16: Webdesign flow. From project to working website

Rys 8. Projektowanie, etap 4

Page 17: Webdesign flow. From project to working website

Rys 9. Projektowanie, etap 5

Page 18: Webdesign flow. From project to working website

Rys 10. Projektowanie, etap 6

Page 19: Webdesign flow. From project to working website

Rys 11. Projektowanie, etap 7

Page 20: Webdesign flow. From project to working website

Rys 12. Projektowanie, etap 8

Page 21: Webdesign flow. From project to working website

Rys 13. Projekt

Page 22: Webdesign flow. From project to working website

KROK II: PROJEKT

Przygotowanie projektu do cięcia

• tak naprawdę odbywa się ono po części

jeszcze na etapie konceptu

• służą nam do tego tzw. grid’y

Kraków 2012 22

Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki Stosowanej

Rys 14. Projekt na którym umieszczono tzw. gridy

Page 23: Webdesign flow. From project to working website

Rys 14. Projekt na którym umieszczono tzw. gridy

Page 24: Webdesign flow. From project to working website

KROK II: PROJEKT

Cięcie

• kluczem dobrego pocięcia layoutu jest jak

najlepsze jego odwzorowanie za pomocą

CSS, bez konieczności przygotowywania

obrazków

• po przeprowadzeniu analizy, do wycięcia

konieczne jest: tło, logo, przyciski

switchera, logo w stopce

Kraków 2012 24

Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki Stosowanej

Rys 15. Obrazki, które powinniśmy otrzymać w wyniku cięcia

Page 25: Webdesign flow. From project to working website

KROK III: HTML5 + CSS3 + JQUERY

Struktura kodu HTML

• istotną rzeczą jest zbudowanie

odpowiedniej struktury kodu HTML

• ma w 100% umożliwiać odwzorowanie

projektu

• zadajemy sobie pytanie, czy strona ma być

responsywna?

Kraków 2012 25

Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki Stosowanej

Rys 16. Struktura kodu HTML naszej strony

Page 26: Webdesign flow. From project to working website

Rys 16. Struktura kodu HTML naszej strony

Page 27: Webdesign flow. From project to working website

Rys 17. Tak powinna wyglądać nieostylowana strona w przeglądarce

Page 28: Webdesign flow. From project to working website

KROK III: HTML5 + CSS3 (LESS) + JQUERY

Przygotowanie arkuszy stylów

• większość z nas wie jak wygląda poprawnie

sformatowany arkusz CSS

• dobrym nawykiem jest grupowanie definicji

oraz dzielenie arkuszy na mniejsze części

funkcjonalne

• my zastosowaliśmy składnię języka LESS

Kraków 2012 28

Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki Stosowanej

Rys 18. Przykładowy arkusz LESS

Page 29: Webdesign flow. From project to working website

Rys 18. Przykładowy arkusz LESS

Page 30: Webdesign flow. From project to working website

KROK III: HTML5 + CSS3 (LESS) + JQUERY

Skrypty JavaScript i jQuery

• dla poprawienia User Experience (UX),

dopiszemy także kilka prostych skryptów z

wykorzystaniem biblioteki jQuery

• w celu lepszego odwzorowania projektu,

wzbogacimy menu strony o kilka animacji

• za pomocą JS możemy także obsłużyć

responsywność naszej strony

Kraków 2012 30

Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki Stosowanej

Rys 19. Przykładowy dokument JS

Page 31: Webdesign flow. From project to working website

Rys 19. Przykładowy dokument JS

Page 32: Webdesign flow. From project to working website

Rys 20. Funkcjonująca strona internetowa

Page 33: Webdesign flow. From project to working website

KROK III: HTML5 + CSS3 (LESS) + JQUERY

http://www.webninja.eu/prototypes/responsive-showcase

Kraków 2012 33

Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki Stosowanej

Page 34: Webdesign flow. From project to working website

RESPONSYWNY = NOWOCZESNY

• responsywność oszczędza czas poświęcony

na projekt i wdrożenie mobilnej wersji

strony

• nie ma konieczności utrzymywania dwóch

instancji tych samych informacji

• zyskujemy w oczach potencjalnego klienta

tym, że jesteśmy na bieżąco z trendami, a on

zyskuje nową ‘zabawkę’

Kraków 2012 34

Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki Stosowanej

Rys 21. Strona uruchomiona w iOS Simulator (iPhone)

Page 35: Webdesign flow. From project to working website

RESPONSYWNY = NOWOCZESNY

W jaki sposób projektować responsywnie?

Kraków 2012 35

Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki Stosowanej

Page 36: Webdesign flow. From project to working website

Rys 22. Strona internetowa uruchomiona np. w Google Chrome

Page 37: Webdesign flow. From project to working website

Rys 23. Strona internetowa uruchomiona w iOS Simulator (iPad)

Page 38: Webdesign flow. From project to working website

Rys 24. Strona internetowa uruchomiona w iOS Simulator (iPhone)

Page 39: Webdesign flow. From project to working website

RESPONSYWNY = NOWOCZESNY

W jaki sposób przygotowywać responsywny kod

HTML?

Kraków 2012 39

Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki Stosowanej

Page 40: Webdesign flow. From project to working website

Rys 24. Struktura kodu HTML naszej strony

Page 41: Webdesign flow. From project to working website

RESPONSYWNY = NOWOCZESNY

W jaki sposób przygotowywać responsywny

arkusz CSS (LESS)?

Kraków 2012 41

Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki Stosowanej

Page 42: Webdesign flow. From project to working website

Rys 25. Wykorzystanie Media Query w arkuszu LESS

Page 43: Webdesign flow. From project to working website

RESPONSYWNY = NOWOCZESNY

Czym są Media Queries?

• służą do wyboru medium (urządzenia) na

którym ma być obsługiwany plik CSS lub

dany fragment kodu w pliku

• dzięki nim można określić np. wymiary

urządzenia czy też gęstość pikseli na ekranie

• są istotą responsywności

Kraków 2012 43

Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki Stosowanej

Listing 1. Przykład użycia Media Queries

@media screenand (min-width: 800px)and (min-height: 1024px) {      /* Styles */}

Page 44: Webdesign flow. From project to working website

RESPONSYWNY = NOWOCZESNY

Jak stosować Media Queries?

• można zdefiniować medium bezpośrednio

przy linkowaniu arkusza CSS w pliku HTML

• albo też wpleść w definicje CSS / LESS

wewnątrz pliku

• zdecydowanie polecam tę drugą opcję

Kraków 2012 44

Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki Stosowanej

Listing 2. Przykład użycia Media Queries

<link rel="stylesheet" media="screen and (min-width: 800px) and (min-height: 1024px)" href="example.css">

@media screenand (min-width: 800px)and (min-height: 1024px) {      /* Styles*/}

Page 45: Webdesign flow. From project to working website

RESPONSYWNY = NOWOCZESNY

Jak zbudować własne Media Query?

• po pierwsze określamy medium jakie nas

interesuje

Kraków 2012 45

Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki Stosowanej

Listing 3. Dostępne typy mediów

źródło: http://www.w3.org/TR/CSS21/media.html

all /*Wszystkie urządzenia*/braille /*Dotykowe czytniki brailla*/embossed /*Drukarka brailla*/handheld /*Urządzenia przenośne*/print /*Drukarki*/projection /*Projektory*/screen /*Urządzenia ekranowe*/speech /*Czytniki, syntezatory mowy*/tty /*Dalekopisy, terminale, itp.*/tv /*Telewizory*/

Page 46: Webdesign flow. From project to working website

RESPONSYWNY = NOWOCZESNY

Jak zbudować własne Media Query?

• po pierwsze określamy medium jakie nas

interesuje

• po drugie określamy jego parametry

Kraków 2012 46

Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki Stosowanej

Listing 4. Dostępne parametry dla mediów

źródło: http://www.w3.org/TR/css3-mediaqueries/

width (min/max)height (min/max)device-width (min/max)device-height (min/max)aspect-ratio (np. 16/9)device-aspect-ratio (np. 16/9)orientation (portrait/landscape)colorcolor-index (min/max, np. 256)monochromeresolution (np. 300dpi)scan (progressive/interlace)grid

Page 47: Webdesign flow. From project to working website

Kraków 2012 47

/* Smartphones (portrait and landscape) ----------- */@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {/* Styles */}

/* Smartphones (landscape) ----------- */@media only screen and (min-width : 321px) {/* Styles */}

/* Smartphones (portrait) ----------- */@media only screen and (max-width : 320px) {/* Styles */}

/* iPads (portrait and landscape) ----------- */@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {/* Styles */}

Listing 5. Przykłady Media Queries dla popularnych urządzeń źródło: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Page 48: Webdesign flow. From project to working website

Kraków 2012 48

/* iPads (landscape) ----------- */@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {/* Styles */}

/* iPads (portrait) ----------- */@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {/* Styles */}

/* Desktops and laptops ----------- */@media only screen and (min-width : 1224px) {/* Styles */}

/* iPhone 4 ----------- */@mediaonly screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) {/* Styles */}

Listing 6. Przykłady Media Queries dla popularnych urządzeń źródło: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Page 49: Webdesign flow. From project to working website

RESPONSYWNY = NOWOCZESNY

W czym testować strony responsywne?

• urządzenia docelowe

• iOS Simulator

• Opera Mobile Emulator

• Google Chrome

Kraków 2012 49

Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki Stosowanej

Rys 26. Ikona programu iOS Simulator

źródło: http://techblog.willshouse.com/

Page 50: Webdesign flow. From project to working website

DOBRE PRAKTYKI

Projekt

• projektujmy używając matematyki,

zachowując odpowiednie proporcje nasz

projekt będzie bardziej atrakcyjny

• pomocne w tym będzie narzędzie

GuideGuide

Kraków 2012 50

Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki Stosowanej

Rys 27. Panel rozszerzenia GuideGuide

Page 51: Webdesign flow. From project to working website

Rys 28. Projekt z wygenerowanymi przez GuideGuide grid’ami

Page 52: Webdesign flow. From project to working website

DOBRE PRAKTYKI

Piksele czy EM’y?

• EM’y są jednostkami miary wykorzystywanymi w typografii i odnoszą się do bazowego rozmiaru

czcionki

• warto je stosować ponieważ zawsze zachowamy proporcje czcionek kiedy zmienimy rozmiar

czcionki elementu <body>

http://pxtoem.com/

Kraków 2012 52

Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki Stosowanej

Page 53: Webdesign flow. From project to working website

DOBRE PRAKTYKI

LESS

• jest to język kompilowany do CSS

• wprowadza:

• bardziej ‘programistyczną’ składnię

• namiastkę dziedziczenia

• parametry i funkcje

• wiele innych feature’ów

http://lesscss.org/

Kraków 2012 53

Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki Stosowanej

Rys 29. Logo języka LESS

źródło: http://blog.bulaj.com

Page 54: Webdesign flow. From project to working website

DOBRE PRAKTYKI

LESS

• może być kompilowany ‘w locie’,

bezpośrednio na stronie internetowej

• bądź też za pomocą narzędzi stand-alone,

które umożliwiają np. auto-kompilację po

zapisie czy minimalizację plików

http://incident57.com/less/

Kraków 2012 54

Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki Stosowanej

Rys 30. Panel programu LESS.app

Page 55: Webdesign flow. From project to working website

DOBRE PRAKTYKI

LESS

• może być kompilowany ‘w locie’,

bezpośrednio na stronie internetowej

• bądź też za pomocą narzędzi stand-alone,

które umożliwiają np. auto-kompilację po

zapisie czy minimalizację plików

http://crunchapp.net/

Kraków 2012 55

Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki Stosowanej

Rys 30. Panel programu LESS.app

Page 56: Webdesign flow. From project to working website

Podsumowanie

Kraków 2012 56

Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki Stosowanej

Page 57: Webdesign flow. From project to working website

Pytania?

Kraków 2012 57

Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki Stosowanej

Page 58: Webdesign flow. From project to working website

Dziękuję za uwagę

Kraków 2012 58

Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki Stosowanej