BOOTCAMP WEB DESIGN I UX
hell-o b00tC@mp
Grzegorz Róg
@grzegorzrog
BOOTCAMP WEB DESIGN I UX
Technologie w sieci - Pojęcia
Mobile first
Responsive Web Design
Podstawy i UX
1
Proces projektowania
Prototypowanie
Trendy
Projekt interfejsu
Podstawy Photoshopa pod UI
Grafika i formaty
Treść i architektura informacji
Atomowe komponenty
Projekt UI
2
BOOTCAMP WEB DESIGN I UX
Podstawy HTML
Podstawy CSS
Zasoby w Projektowaniu
Typografia w sieci
Kolory w sieci
Praktyczny projekt
HTML i CSS
3
BOOTCAMP WEB DESIGN I UX
Nowe konstrukcje CSS3
Tranzycje i animacje
Praktyczny projekt
Zaawansowany CSS
4
Media Queries i RWD
BOOTCAMP WEB DESIGN I UX
SASS
Emmet
Narzędzia developerskie
Narzędzia
5
Nowy model layoutu
Promocja stron WWW
BOOTCAMP WEB DESIGN I UX
Graficy oraz osoby projektujące interfejsy
Początkujący webmasterzy
Osoby które zlecają przygotowanie strony
Dla kogo jest ten Bootcamp?
5
Programiści i koderzy
Osoby kierujące zespołami
Dla każdego!
BOOTCAMP WEB DESIGN I UX
NOWOCZESNE STRONY WWW
Kilka pojęć...
Grzegorz Róg
@grzegorzrog
Server-Side
TECHNOLOGIE - POJĘCIA
To grupa technologii działających na serwerze i obsługujących żądania wysyłane np. przez przeglądarkę. Back-end – określenie technologii Server Side, tych które „działają na zapleczu” i użytkownik nie widzi bezpośrednio wyniku.
Client-Side
To grupa technologii działających po stronie użytkownika, tzn. w przeglądarce.
Front-end – określenie technologii Client Side, tych które bezpośrednio wpływają na to co widzi użytkownik.
PHP, ASP.NET, Java, MySQL, PostgreeSQL, SQL Server.
HTML, CSS, JavaScript, ActionScript
PHP
TECHNOLOGIE - POJĘCIA
Języki serwerowe NIE są widoczne po stronie klienta i można z ich pomocą wykonywać bezpieczne operacje
JavaScript
Języki client-side są widoczne dla klienta i każdy może je podejrzeć oraz zmodyfikować
Baza Danych
Działa po stronie serwera - dane w bazie, takiej jak MySQL czy SQL są bezpieczne i trwałe.
Cookies
Ciasteczka działają po stronie klienta - są zapisywane w pamięci podręcznej przeglądarki na dysku.
Współpraca z bazą danych
TECHNOLOGIE - POJĘCIA
POST
PHP
OK?
Baza Danych - oprogramowanie na serwerze, w aplikacjach WWW służy do przetrzymywania informacji i danych jak np. lista użytkowników, artykuły, posty, komentarze
Najważniejsze komponenty do uruchomienia strony WWW?
TECHNOLOGIE - POJĘCIA
HOSTING
Serwer WWW
Baza Danych
DOMENA
W technologii ASP.NET
lub PHP (Apache)
serwer dedykowany
Serwer współdzielony
Upload
Download
> Przekierowana na serwer WWW z pomocą rekordu DNS
NOWOCZESNE STRONY WWW
Gotowe rozwiązania czy autorski kod?
Technologie Client-Side
TECHNOLOGIE - POJĘCIA
HTML
(ang. HyperText Markup Language) – język wykorzystywany do tworzenia stron internetowych. Głównymi elementami języka HTML są znaczniki (tagi), które opisują strukturę dokumentu (strony internetowej).
CSS
(ang. Cascading Style Sheets) – język wykorzystywany do opisu warstwy prezentacji stron internetowych - stylów.
JavaScript
skryptowy język programowania najczęściej stosowany na stronach internetowych. Skrypty napisane w JavaScript uruchamiane są w przeglądarce użytkownika.
Czym jest HTML5?
TECHNOLOGIE - POJĘCIA
HTML5 często funkcjonuje nie tylko jako kolejna specyfikacja HTML i jego znaczników, ale także jako określenie wszystkich nowoczesnych technologii działających po stronie przeglądarki, najczęściej z wykorzystaniem JavaScript i CSS3.
Can I use - narzędzie, które pozwala sprawdzić możliwości przeglądarki pod kątem implementacji nowości w HTML5.
- HTML Shiv - pozwala na użycie nowej semantyki HTML5 w starszych przeglądarkach IE.
- Modernizr - jedna z najlepszych bibliotek oferująca wsparcie dla nowych standardów w starszych przeglądarkach oraz łatwą detekcję wspieranych nowych możliwości
- Selectivizr - podobny do Modernizr, z większym naciskiem na CSS i dobrą emulacją IE
- Video.js
- IE7.js - wsparcie dla starszych wersji IE6-8, jak kanał alfa
- Fallback.js - biblioteka zapewniająca wsparcie dla wszystkich ładowanych z zewnątrz skryptów
Czym są Frameworki
i biblioteki JavaScript
TECHNOLOGIE - POJĘCIA
Dużą popularnością cieszą się rozmaite gotowe rozwiązania oparte o język JavaScript. Pomyśl o nich jak o gotowych komponentach w swoim projekcie. Jeśli chcesz użyć na stronie zegarka w JS możesz pobrać aktulaną datę, sformatować ją, dostosować do stref czasowych etc., albo po prostu skorzystać z gotowca, mógłaby być to biblioteka ZegarekJS.
Popularne rozwiązania to:
- jQuery - framework wykorzystywany w większości stron WWW, pozwala przyspieszyć i uprościć podstawowe operacje JS na stronie np. wskazywanie konkretnych elelementów HTML ($)
- AngularJS - rozbudowany framework oferujący niezwykle ciekawe możliwości stosowany także w dużych projektach
- Polymer - bardzo ciekawy, nowoczesny framework rozwijany przez Google, stosowany nie tylko w projektach Material Design
- Bootstrap - bardzo rozbudowany i popularny framework, poza samymi bibliotekami HTML i CSS, zawiera też szereg gotowych komponentów JavaScript, jak przyciski, popupy, formularze
- EmberJS, BackboneJS, Knockout, ExtJS
TECHNOLOGIE - POJĘCIA
UX
UI
USER EXPERIENCE (UXD/UED/XD)
Ogół procesów polegających na ułatwieniu użytkownikowi korzystania z aplikacji/strony WWW, na które składają się poprawa użyteczności, dostępności, optymalizacja ergonomii
i innych elementów.
DOSTĘPNOŚĆ (ACCESIBILITY) - polega na wdrożeniu ułatwień dla osób z niepełnosprawnościami (niedowidzących etc.)
USER INTERFACE
Interfejs użytkownika - czyli to, co widzi użytkownik w przeglądarce - przyciski, style, formularze, kolory i inne komponenty strony WWW.
UI
TECHNOLOGIE - POJĘCIA
UX
NOWOCZESNE STRONY WWW
Inspiracje!
Grzegorz Róg
@grzegorzrog
MOBILE FIRST
Mobilna rewolucja
Grzegorz Róg
@grzegorzrog
Czym jest podejście Mobile First?
RESPONSIVE WEB DESIGN
Mobile First to skoncentrowanie procesu projektowego na najmniejszym ekranie a następnie skalowanie naszego projektu w górę. Na chwilę obecną jest to smartfon, może już wkrótce zegarek?
użytkowników na świecie korzysta z internetu TYLKO z urządzenia moblinego
25%
2014 ROK
urządzenia mobilne generują więcej ruchu w sieci niż komputery przenośne i stacjonarne.
Dlaczego Mobile First?
MOBILE FIRST
Ponieważ pozwala skoncentrować się na
Najważniejszych funkcjonalnościach
bo łatwiej jest dodawać niż odejmować kod
Ponieważ możesz skoncentrować się na
hierarchii informacji
Mobile is not about making things smaller!
MOBILE FIRST
Projektowanie pod dotyk
MOBILE FIRST
Istnieje szereg wytycznych związanych z projektowaniem interfejsów pod urządzenia dotykowe. Warto wziąć pod uwagę następujące sugestie:
- Na urządzeniach dotykowych nie ma stanu hover
- Interakcje mobilne dają większe możliwości niż mysz
- Pamiętaj o minimalnym rozmiarze > 5 mm
- Rozmiar dla wygodnych przycisków to 44 px
- Wykorzystaj różne gesty, które znają użytkownicy
- Stwórz samouczek, jeśli używasz mało popularnych gestów
Referencja: static.lukew.com/TouchGestureGuide.pdf
Wskazówki
MOBILE FIRST
- Hierarchia elementów - nadaj elementom odpowiednią wagę
- Czytelność - powiększ fonty, zadbaj o interlinię i 35-40 znaków w linii
- Powiększ elementy interaktywne jak przyciski z myślą o dotyku
- Nie polegaj na elementach hover i rozwijanych menu
- Optymalizuj skrypty i grafiki dla szybkiego ładowania
- Testuj na urządzeniach w rzeczywistych warunkach
- Unikaj bladych i neutralnych kolorów w interfejsie
Web
vs
Native
WEBOWE = RWD
NOWOCZESNE STRONY WWW
Responsive Web Design
Grzegorz Róg
@grzegorzrog
Problem współczesnego designera
RESPONSIVE WEB DESIGN
Warto sprawdzić: https://en.wikipedia.org/wiki/Display_resolution
Fragmentacja urządzeń
RESPONSIVE WEB DESIGN
slashgear.com
Platformy...
RESPONSIVE WEB DESIGN
Czym jest Responsive Web Design?
RESPONSIVE WEB DESIGN
Responsive Web Design to technika, która pozwala dostosować stronę WWW do różnych rozdzielczości, tak, aby poprawnie wyświetlała się na wielu urządzeniach i ekranach.
poprawnie =/= tak samo
Pixel
ANATOMIA EKRANÓW
Najmniejsza fizyczna składowa ekranu
Rodzielczość
Stosunek szerokości do wysokości ekranu w pixelach
Aspect Ratio
Proporcje - stosunek szerokości do wysokości ekranu
Rozmiar
Przekątna podawana w calach
DPI
Gęstość pikseli - ilość pikseli na cal
Przeglądarka a ekran?
RESPONSIVE WEB DESIGN
Zapomnij o urządzeniach!
Jak projektować?
RESPONSIVE WEB DESIGN
Sprawdź http://bradfrost.com/demo/ish/
Podstawowe techniki RWD
RESPONSIVE WEB DESIGN
Fluid
Polega na wykorzystaniu jednostek relatywnych do określenia rozmiarów kontenerów na stronie WWW. Stosujemy np. %, rem, em, zamiast px
Media Queries
Tworzymy instrukcje warunkowe, które dopasowują style strony WWW w zależności od szerokości ekranu lub urządzenia.
Proces tworzenia stron WWW
PROCES PROJEKTOWANIA
PRACA KONCEPCYJNA
AGREGOWANIE I STRATEGIA TREŚCI
DESIGN / DEVELOPMENT
TESTY
OPTYMALIZACJA
PUBLIKACJA
UŻYTKOWNICY I TESTY
PROMOCJA - SEM / SEO / SOCIAL MEDIA
Treść i architektura informacji
Grzegorz Róg
@grzegorzrog
TREŚĆ NA STRONACH WWW
Markdown i inne schematy
TREŚĆ NA STRONACH WWW
Markdown to zyskujący popularność sposób zapisu treści tak, aby można było łatwo i w zautomatyzowany sposób przekształcić je w kod, na przykład HTML.
Warto sprawdzić: http://www.noisli.com/
Czym są Wireframe'y?
TREŚĆ NA STRONACH WWW
Struktura strony
Wireframe >> Mockup >> Prototyp
Elementy wizualne
Interakcje
Sposoby tworzenia Wireframe'ów
- Szkicowanie (papier, flipchart)
- Narzędzia graficzne (Photoshop, Illustrator
- Narzędzia do prototypowania np. Balsamiq
- Aplikacje na urządzenia przenośne (Proto)
Warto sprawdzić: https://balsamiq.com/
Podstrona - projekt tekstowy
TREŚĆ NA STRONACH WWW
Projektowanie tekstowe pozwala skupić się na tym, co najważniejsze - czyli na treści na Twojej stronie oraz jej rozmieszczeniu i relacji.
W pierwszych etapach pracy z właściwą treścią zrezygnuj z elementów designu po by niepotrzebnie się nie rozpraszać.
PROTOTYPOWANIE
!
hi-fi kontra lo-fi
PROTOTYPOWANIE
Prototypowanie lo-fidelity to tylko nieco więcej niż Wireframe'y. Poza określeniem położenia elementów na prototypach o małej szczegółowości możemy dodać elementy jak oznaczenie ikon, grafik, pola formularzy etc.
Prototyp hi-fidelity posiada większy stopień złożoności i może przypominać prawie gotową grafikę dla strony WWW, może też zawierać proste interakcje i przejścia.
Prototypy lo-fi można także określić mianem Mockupów
Prototypuj FLOW
Prototypujemy!
PROTOTYPOWANIE
NOWOCZESNE STRONY WWW
Podsumowanie pracy koncepcyjnej
Grzegorz Róg
@grzegorzrog
NOWOCZESNE STRONY WWW
CELE BIZNESOWE SERWISU
UŻYTKOWNICY I TESTY
AGREGOWANIE TREŚCI
PRZYGOTOWANIE MAPY STRONY
TWORZENIE WIREFRAMÓW PODSTRON
TWORZENIE MAKIET Z TREŚCIĄ
ROZPISANIE FLOW - PRZEPŁYWÓW
PROTOTYPOWANIE
NOWOCZESNE STRONY WWW
Atomowe komponenty
Grzegorz Róg
@grzegorzrog
Nie tworzymy stron WWW - projektujemy systemy oparte o komponenty.
Projektowanie w oparciu o atomy
ATOMOWE KOMPONENTY
Atomy
Molekuły
Organizm
Atomy
ATOMOWE KOMPONENTY
Najmniejsze elementy projektowe, które stanowią fundament mechanizmów funkcjonowania strony WWW.
Przykładowe atomy:
- pole wyszukiwania
- logotyp
- label
- ikona
- obrazek
- ...
Molekuły
ATOMOWE KOMPONENTY
Atomy tworzą spójną całość jaką są molekuły - większe całości tworzące spójną, sensowną całość, mogące występować w obrębie naszej witryny w różnych miejsc
Przykładowe atomy:
- wyszukiwarka
- avatar z nazwą użytkownika
- kafelek ze zdjęciem i opisem
- ...
Organizm
ATOMOWE KOMPONENTY
https://dribbble.com/manyo
Molekuły składają się na gotową całość, jaką jest strona w ramach Twojego serwisu WWW. Myśląc o każdym z elementów serwisu w kontekście odrębnego molekułu pozwala projektować a także zmieniać interfejsy stron WWW w sposób elastyczny.
Technologia, która jako pierwsza umożliwiła tego typu myślenie jest CSS, dzięki któremu możemy oddzielić warstwę dokumentu (markup - HTML) od warstwy prezentacji (stylów - CSS).
Graficzne biblioteki komponentów
ATOMOWE KOMPONENTY
Wykorzystanie bibliotek Adobe Creative Cloud pozwala na sprawną organizację komponentów w aplikacjach graficznych oraz ich współdzielenie w obrębie aplikacji Adobe.
Zalety:
- Dowolność twórcza
- Kompatybilne między aplikacjami CC
Wady:
- Tworzone jedynie przez grafików
- Konieczność implementacji
- Czasochłonność
Rozwiązania bazujące na HTML/CSS
ATOMOWE KOMPONENTY
Istnieje wiele narzędzi, które dają nam możliwość projektowania bezpośrednio w przeglądarce. Dzięki temu możemy łatwo przetestować komponenty
Zalety:
- Ograniczenia technologii
- Łatwość tworzenia dla każdego
- Gotowy kod aplikacji
- Oszczędność czasu
Wady:
- Pewne narzucone rozwiązania
- Podstawy kodowania mile widziane
Gratulacje!
Stworzyłeś Style Guide
Warto sprawdzić: http://styleguides.io/examples.html
Czym jest Style Guide?
ATOMOWE KOMPONENTY
Style Guide - Przykłady
ATOMOWE KOMPONENTY
- https://dribbble.com/shots/1669299-Airbnb-UI-Toolkit-Web/attachments/263198
- https://ratnacahayarina.files.wordpress.com/2014/03/kfc.pdf
- http://www.bbc.co.uk/gel
- https://www.mozilla.org/en-US/styleguide/websites/sandstone/
- https://disqus.com/pages/style-guide/#logo
- http://brand.uber.com/typography/hierarchy/#about
- http://fbrctr.github.io/
- https://frontify.com/styleguide
- http://bjankord.github.io/Style-Guide-Boilerplate/
NOWOCZESNE STRONY WWW
Projektowanie w oparciu
o zasoby
Grzegorz Róg
@grzegorzrog
UI Kits
PROJEKTOWANIE W OPARCIU O ZASOBY
Stockowe fotografie
PROJEKTOWANIE W OPARCIU O ZASOBY
Ikony
PROJEKTOWANIE W OPARCIU O ZASOBY
Gotowe szablony
PROJEKTOWANIE W OPARCIU O ZASOBY
Zalety
Przyspiesza pracę
Mniejszy budżet
Doświadczenie innych
Brak unikalności
Trudność w adaptacji
Brak kompletnych źródeł
Wady
NOWOCZESNE STRONY WWW
Typografia w sieci
Grzegorz Róg
@grzegorzrog
NAZEWNICTWO
Font
Czcionka
Krój pisma
Warto sprawdzić:
Hierarchia dzięki typografii
TYPOGRAFIA W SIECI
Nagłówek 1
Nagłówek 2
Nagłówek 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam efficitur venenatis tortor et efficitur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam nec venenatis eros. Mauris sagittis, augue a fermentum tempus, arcu velit facilisis nunc, id dictum dolor nibh non turpis. Morbi augue nulla, luctus nec massa eu, aliquam vestibulum massa.
Sed pulvinar magna ac quam auctor, quis semper lorem suscipit. Nam ut lacinia odio. Mauris eget mattis felis. Fusce commodo nisi dui, non imperdiet mauris tincidunt quis. Cras ac vulputate libero. Phasellus id turpis mi. Curabitur ullamcorper nec erat nec suscipit.
Skąd przeglądarka bierze fonty?
TYPOGRAFIA W SIECI
Fonty, które renderuje przeglądarka, są domyślnie zaczytywane z systemu użytkownika, co oznacza, że muszą być zainstalowane, aby poprawnie wyświetlały się na stronie WWW.
Na stronie możemy podać wiele rodzin, które będą wykorzystane jako tzw. fallback, lub skorzystać z generycznych _sans i _serif
Wyświetlanie fontów z CSS
TYPOGRAFIA W SIECI
Bezpieczne fonty
TYPOGRAFIA W SIECI
Arial
Courier New, Courier
Garamond
Georgia
Lucida
Tahoma
Times New Roman, Times
Trebuchet
Verdana
Palatino
Bezpiecznych webowych fontów możesz używać bez przeszkód na każdej stronie i w każdej aplikacji, ponieważ są one preinstalowane w systemie użytkownika, a co za tym idzie, będą poprawnie wyświetlały się bez konieczności dołączania ich do strony na każdej platformie.
Często stosuje się ten zestaw fontów jako tzw. fallback. Są one także poprawnie renderowane w klientach pocztowych.
Reguła @font-face
TYPOGRAFIA NA STRONACH WWW
Jak korzystać?
Możesz wykorzystać regułę @font-face, aby osadzić dowolny font, który posiadasz, na Twojej stronie WWW
Pamiętaj!
Muszą na to zezwalać zapisy licencyjne danego fonta
Hostowane fonty
TYPOGRAFIA NA STRONACH WWW
Osadzanie fontów
Fonty hostowane najczęściej korzystają z fragmentu kodu JavaScript na naszej stronie.
Wykorzystanie web vs desktop
Pamiętaj o tym że aby projektować interfejs, musisz mieć font zainstalowany w systemie.
Warto sprawdzić: fonts.google.com typekit.com webtype.com typography.com
KERNING
PODSTAWOWE POJĘCIA
Odległość pomiędzy jedną parą znaków
TRACKING
Odległość pomiędzy wszystkimi parami znaków
LEDING (INTERLINIA)
Odległość pomiędzy wierszami tekstu
WYRÓWNANIE
Do prawej, lewej strony i justowanie
Rytm - Grid
FONTY NA STRONACH WWW
Warto sprawdzić: gridlover.com/app
Długość linii tekstu
FONTY NA STRONACH WWW
Warto sprawdzić: http://www.microsoft.com/typography/ctfonts/wordrecognition.aspx
Rozmiary fontu na stronie
TYPOGRAFIA NA STRONACH WWW
16px = 1em
rem?
TYPE RAMP
FONTY NA STRONACH WWW
Określa rytm fontów na stronie WWW - nie jest w żaden sposób narzucony, jednak różne języki projektowania zawierają podpowiedzi dotyczące wykorzystania popularnych krojów.
Type Ramp może być także elementem księgi znaku, jeśli projektujesz dla zleceniodawcy.
1.61803399...
TYPOGRAFIA NA STRONACH WWW
Rytm w typografii interfejsu można określić biorąc pod uwagę pewne uniwersalne zasady, takie jak złoty podział, lub inne matematycznie zbliżone do ideału.
Warto sprawdzić narzędzia:
FONTY NA STRONACH WWW
Czym jest Open Type?
Warto sprawdzić: http://clagnut.com/sandbox/css3/
Czym są
Icon Fonty?
TYPOGRAFIA NA STRONACH WWW
Przegląd fontów
TYPOGRAFIA NA STRONACH WWW
Pobierz fonty Google z https://github.com/google/fonts/
- Open Sans
- Lato
- Ubuntu
- Droid
- PT Mono
- Roboto
- Gravitas One
- PT Serif
- Old Standard TT
Pozostałe (sprawdź myfonts.com/topwebfonts/)
- Proxima Nova
- Museo sans
- Futura
- Sofia Pro
- San Francisco (iOS/Mac)
- Avenir
- Frutiger
- Gill Sans
Dodatkowe wskazówki
FONTY NA STRONACH WWW
Czytanie na ekranie jest trudne. Zadbaj o wysoki kontrast.
Nie używaj WIELKICH LITER poza nagłówkami
Fonty sans i serif czyta się równie wygodnie
Długie linie sprzyjają szybkiemu czytaniu, ale ludzie wolą krótsze
Rozbijaj tekst na wersy, korzystaj z wypunktowań
Największy komfort zapewnia linia 40-60 znaków
Pamiętaj, aby treść była wartościowa!
... jeszcze więcej wskazówek ;)
FONTY NA STRONACH WWW
Traktuj słowa w tekście jak cegiełki, korzystaj z lorem ipsum
Odstępy w tekście są jak pauzy, zaczerpnięcie powietrza
Im mniejszy font wybierzesz, tym większe odstępy są potrzebne
Zadbaj o odpowiednią kolorystykę dla różnych urządzeń
Jeśli nie musisz - nie baw się kerningiem ;)
Pamiętaj o różnych orientacjach na urządzeniach mobilnych
NOWOCZESNE STRONY WWW
Kolory w sieci
Grzegorz Róg
@grzegorzrog
Ile kolorów ma Internet?
KOLORY W SIECI
Prehistoria - 256 kolorów (bezpieczna paleta webowa)
Teraz - przynajmniej 16,8 mln kolorów (98% użytkowników w 2014)
1 bit = 2 kolory (czarny / biały)
2 bit = 2*2 = 4, 4 bit = 2*2*2*2 = 16 etc, 8 bit = 256
Notacja
KOLORY W SIECI
System heksadecymalny = szesnastkowy
#RRGGBB
0-9 / A-F
https://en.wikipedia.org/wiki/Web_colors
Notacja w CSS
KOLORY W SIECI
Czym jest koło kolorów?
KOLORY W SIECI
Rok 1666 - Isaac Newton dokumentuje pryzmat kolorów białego światła w postaci koła.
Primary colors
Secondary colors
Tertiary colors
Żółty, niebieski, czerwony
Powstały ze zmieszania kolorów podstawowych
Powstały ze zmieszania kolorów podstawowych
z najbliższym kolorem dopełniającym
Zasady koła kolorów
KOLORY W SIECI
Warto sprawdzić: https://color.adobe.com
Profile kolorystyczne i kalibracja
KOLORY W SIECI
Kalibracja sprzętowa
Kalibracja software'owa
sRGB
Wskazówki do kolorów i kalibracji
KOLORY W SIECI
Zawsze korzystaj z profilu sRGB do sieci
Pamiętaj o opcji proof colors w oprogramowaniu
Ustaw gammę w monitorze na 2.2
Ustaw profil kolorów w oprogramowaniu na sRGB
Ustaw temperaturę raczej na 6500K niż 5500K
Uważaj na odcienie szarości w projekcie
Więcej o kalibracji sprzętowej:
Czerwony
miłość
ważne
ostrzeżenie
Żółty
uwaga
optymizm
szczęście, zabawa
Pomarańczowy
entuzjazm
kreatywność
ciepło
ambicja
Różowy
Młodość
pasja, romans
wrażliwość
delikatność
Zielony
sukces, szczęście
natura
bezpieczeństwo
Niebieski
zaufanie, honor
profesjonalizm
spokój, harmonia
Filolet
spokój, ciepło
wartość, nobliwość
moc, duchowość
Zapamiętaj
KOLORY W SIECI
Korzystaj z narzędzi takich jak Adobe Color
Twórz własne biblioteki kolorów oraz fotografuj schematy
Kolory przeciwstawne będą zawsze wizualnie atrakcyjne
Zachowaj kontrast dla większej czytelności
Stosuj kontrast aby przyciągnąć uwagę użytkownika
Eksperymentuj (tylko jeśli wiesz co robisz;)
Pamiętaj o profilach kolorów i kalibracji monitora
NOWOCZESNE STRONY WWW
Grid - projektowanie w oparciu o siatkę
Grzegorz Róg
@grzegorzrog
International Typographic Style - Swiss
Warto sprawdzić: https://goo.gl/J8qfdz
Różne zastosowania siatki
PROJEKTOWANIE W OPARCIU O SIATKĘ
Podstawowe zalety
PROJEKTOWANIE W OPARCIU O SIATKĘ
Warto sprawdzić: http://gridsetapp.com
Stabilny layout
Przewidywalna długość linii
Łatwa implementacja
Frameworki
i wytyczne projektowe
PROJEKTOWANIE W OPARCIU O GRID
Bootstrap
Foundation
%
Fluid Grid
Zapamiętaj!
PROJEKTOWANIE W OPARCIU O GRID
Siatkę stosujemy aby zachować spójny układ i proporcje
Grid możesz ustalić samodzielnie i trzymać się określonych wartości
Tak zwany Fluid Grid jest korzystny w przypadku skalowania stron
Siatka pozwala zachować rytm w treści na stronie WWW
Siatkę możesz ustawić w każdej aplikacji do projektowania
Frameworki wykorzystują grid do systematyzowania struktury
Nie bój się eksperymentować!
NOWOCZESNE STRONY WWW
Praca w zespole
Grzegorz Róg
@grzegorzrog
Design
Development
PRACA W ZESPOLE
KANAŁY KOMUNIKACJI W ZESPOLE
PRZYDATNE NARZĘDZIA
ORGANIZACJA PLIKÓW I ZASOBÓW
WSPÓLNY JĘZYK
KANAŁY KOMUNIKACJI
1
Tickety
PRACA W ZESPOLE
Systemy do tworzenia tzw. ticketów pozwalają na efektywną pracę oraz ustalanie hierarchii ważności w ramach poszczególnych zadań.
Bieżąca
komunikacja
PRACA W ZESPOLE
Możesz skorzystać ze Skype lub użyć dedykowanych narzędzi do komunikacji w zespole.
Wspólny język
PRACA W ZESPOLE
Odpowiednia struktura i nazewnictwo warstw może być przydatne w późniejszym procesie kodowania strony i przy eksporcie CSS.
O krok dalej z aplikacjami graficznymi...
PRACA W ZESPOLE
Technologie takie jak bezpośredni eksport grafik wektorowych z Adobe Illustrator czy możliwość kopiowania kodu CSS z warstw, a także narzędzie Adobe Extract pozwalają agregować i tworzyć komponenty bezpośrednio z aplikacji graficznych, będących branżowym standardem.
NOWOCZESNE STRONY WWW
Wydajność stron WWW
Grzegorz Róg
@grzegorzrog
NOWOCZESNE STRONY WWW
Promocja i pozycjonowanie
Grzegorz Róg
@grzegorzrog
Copy of UX1
By eduweb
