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


Webdesign flow. From project to working website

Design

Transcript of Webdesign flow. From project to working website