Webdesign flow. From project to working website
-
Upload
mateusz-ziarko -
Category
Design
-
view
536 -
download
3
description
Transcript of 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
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
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
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
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
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
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
KROK 1: KONCEPT
Kraków 2012 8
Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki Stosowanej
Rys 2. Makieta projektu
Rys 2. Makieta projektu
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
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
Rys 4. Grafika poglądowa, połączenie makiety i istniejącego projektu
Rys 5. Projektowanie, etap 1
Rys 6. Projektowanie, etap 2
Rys 7. Projektowanie, etap 3
Rys 8. Projektowanie, etap 4
Rys 9. Projektowanie, etap 5
Rys 10. Projektowanie, etap 6
Rys 11. Projektowanie, etap 7
Rys 12. Projektowanie, etap 8
Rys 13. Projekt
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
Rys 14. Projekt na którym umieszczono tzw. gridy
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
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
Rys 16. Struktura kodu HTML naszej strony
Rys 17. Tak powinna wyglądać nieostylowana strona w przeglądarce
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
Rys 18. Przykładowy arkusz LESS
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
Rys 19. Przykładowy dokument JS
Rys 20. Funkcjonująca strona internetowa
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
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)
RESPONSYWNY = NOWOCZESNY
W jaki sposób projektować responsywnie?
Kraków 2012 35
Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki Stosowanej
Rys 22. Strona internetowa uruchomiona np. w Google Chrome
Rys 23. Strona internetowa uruchomiona w iOS Simulator (iPad)
Rys 24. Strona internetowa uruchomiona w iOS Simulator (iPhone)
RESPONSYWNY = NOWOCZESNY
W jaki sposób przygotowywać responsywny kod
HTML?
Kraków 2012 39
Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki Stosowanej
Rys 24. Struktura kodu HTML naszej strony
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
Rys 25. Wykorzystanie Media Query w arkuszu LESS
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 */}
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*/}
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*/
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
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/
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/
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/
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
Rys 28. Projekt z wygenerowanymi przez GuideGuide grid’ami
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
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
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
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
Podsumowanie
Kraków 2012 56
Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki Stosowanej
Pytania?
Kraków 2012 57
Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki Stosowanej
Dziękuję za uwagę
Kraków 2012 58
Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki Stosowanej