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


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


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


http://veerle-v2.duoh.com/

http://veerle-v2.duoh.com/

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


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


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


KROK 1: KONCEPT

Kraków 2012 8




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


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


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


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


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


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


Rys 18. Przykładowy arkusz LESS

Rys 18. Przykładowy arkusz LESS


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


Rys 19. Przykładowy dokument JS

Rys 19. Przykładowy dokument JS

Rys 20. Funkcjonująca strona internetowa


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

Kraków 2012 33




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


Rys 21. Strona uruchomiona w iOS Simulator (iPhone)


W jaki sposób projektować responsywnie?

Kraków 2012 35


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)


W jaki sposób przygotowywać responsywny kod

HTML?

Kraków 2012 39




W jaki sposób przygotowywać responsywny

arkusz CSS (LESS)?

Kraków 2012 41


Rys 25. Wykorzystanie Media Query w arkuszu LESS


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


Listing 1. Przykład użycia Media Queries

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


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


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*/}


Jak zbudować własne Media Query?

• po pierwsze określamy medium jakie nas

interesuje

Kraków 2012 45


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*/

http://www.w3.org/TR/CSS21/media.html

http://www.w3.org/TR/CSS21/media.html


Jak zbudować własne Media Query?

• po pierwsze określamy medium jakie nas

interesuje

• po drugie określamy jego parametry

Kraków 2012 46


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

http://www.w3.org/TR/css3-mediaqueries/

http://www.w3.org/TR/css3-mediaqueries/

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/

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/




W czym testować strony responsywne?

• urządzenia docelowe

• iOS Simulator

• Opera Mobile Emulator

• Google Chrome

Kraków 2012 49


Rys 26. Ikona programu iOS Simulator

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

http://techblog.willshouse.com/

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


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


http://pxtoem.com/

http://pxtoem.com/

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


Rys 29. Logo języka LESS

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

http://pxtoem.com/

http://pxtoem.com/

http://blog.bulaj.com/

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


Rys 30. Panel programu LESS.app

http://pxtoem.com/

http://pxtoem.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://crunchapp.net/

Kraków 2012 55


Rys 30. Panel programu LESS.app

http://pxtoem.com/

http://pxtoem.com/

Podsumowanie

Kraków 2012 56


Pytania?

Kraków 2012 57


Dziękuję za uwagę

Kraków 2012 58


Design

Webdesign flow. From project to working website