moja mama nevedela čo je komfort, tvoja zase neví co je náš workflow

Moja mama nevedela čo je komfort, tvoja zase neví čo je náš workflowfront-end developer & webdesigner

SCRFullservisová digitálna agentúraZakladajúci člen ADMAB.Bystrica / BA / Barcelona

(KO)MÉDIA2014 | Created by SCR | 11/2014

webdesigner

Tomáš Pinka


front-enddeveloper

Tomáš Stankovič


5

story.Created with passion for digital


Created with passion for digital



Workflow.1. Porozumieť značke2. Kick of meeting - Brief3. Návrh webu4. Feedback od klienta5. Dopracovanie pripomienok6. Feedback od klienta7. Dopracovanie pripomienok8. Testing8. Front-end coding9. Testlink pre klienta10. Testing11. Dopracovanie pripomienok12. Back-end coding



Porozumieť produktu / značke

Referaty.sk – škola, vzdelávanie, štúdium

Zdielanie informácii, pomoc pri štúdiuŠtudenti stredných škôlHistoricky silný brand



Kick-of Meeting = Brief

Charakteristika službyBudúce smerovanie službyBiznis modelUser flowSite mapTypové stránky



Návrh webu #1

Mood research = stanovenie smeruŠtruktúra a obsah webuStanovanie KPI = pridaj referatGrafický návrh webu


Chladné!


Návrh webu #2

Mood research = stanovenie smeru Štruktúra a obsah webu Stanovanie KPI = pridaj referát Grafický návrh webu


Ó, Áno!

webdesign.




Responsive & Grid

Bootstrap a čo je to?

Responsive



Grid

Čo sú to breakpointy? Globálne breakpointy sú zle.



CSS pixel vládne všetkým! Ó, toto si zapíšem


83% dizajnérov má problém.

iPad má veľké rozlíšenie. Nie, nedostanem na nom desktop web.

27

Nie, nie! Ô, áno!

28

y

x x

y

y

Nie, nie! Ô, áno!


Design simplicity. Content First!

Použiteľnost a dostupnosť informácii

Kompozícia, farby, typografia, grid, Fotografia Flat design Viac priestoru okolo prvkov Menej dekorácií Platí aj v interakcii užívateľa s interface Dostupnosť informácii



UX Design - mysli na tie dotyky

Desktopové elementy na mobile bolia!

50px x 50px je nutné minimum! Mobilný web musí mať okraje!



Typografia

Stavebný kameň

Dostupné kvalitné fonty Webfonty (Google Fonts, Typekit …) Vlastné fonty (CSS @font-face) Opatrnosť, správna dôraznosť, kombinovanosť



Ikonografia, illustrácie

Ikonky, ikonky, ikonky…

Namiesto slov Podpora slov Estetické ladenie Podpora brandu, produktov



Menu

Informácie skryté alebo dostupné

Mobile first prístup Hamburger menu



Take a break - drink Coffee.

Dobrú výberovu kávu

Vyvinuté telo Správna acidita Chute čerešní Chute mliečnej čokolády Chute lásky ❤



Farby

Pastelové farby

Veľké farebné plochy Farebné schémy Kontrast Biele plochy



CSS3, HTML 5

Čerešničky na torte

Podpora interaktivity - lepší používateľský zážitok Nahradenie flash technológie - CSS3 Animácie Dobrá podpora prehliadačov

Ľudia s IE sú zvyknutý, že internet vyzerá blbo.



Testovanie

Nie prehliadač nestačí. Nie nestačia ani 2 breakpointy.

Testujeme počas celého vývoja. Čo najviac prehliadačov a zariadení.


.! Komunikácia Spolupráca Učenie sa navzájom Podpora Disciplína


fb:scr.creative.studiosinstagram:scr_studiosweb:www.scr.sk

48

Ahoj.Ďakujeme.


moja mama nevedela čo je komfort, tvoja zase neví co je náš workflow

Technology