28 мая 2011, Я.Субботник в Киеве Вадим Пацев "CSS3 в руках дизайнера" О докладе: Прототипирование на HTML/CSS. Обзор CSS3 техник, которые помогут дизайнерам отказаться от графических редакторов. Сейчас время сложных интерфейсов в вебе. Рисовать их в графических редакторах неэффективно. Современный CSS позволяет делать макеты прямо в браузере. Как это можно сделать? Чем это эффективнее привычных инструментов? Какие плюсы дает этот подход в масштабе всего проекта?

1. CSS3 в руках дизайнера
Вадим Пацев
Легкий и быстрый
Я.Субботник, Киев, 28 мая 2011 года
понедельник, 30 мая 2011 г.

2. HTML-прототип
снимает наибольшую
часть вопросов
понедельник, 30 мая 2011 г.

3. А как же кнопки,
подложки и градиенты?
3
понедельник, 30 мая 2011 г.

4. понедельник, 30 мая 2011 г.

5. Какая из кнопок нарисована
в редакторе?
5
понедельник, 30 мая 2011 г.

6. 6
понедельник, 30 мая 2011 г.

7. http://www.webstuffshare.com/2010/04/photoshop-effect-vs-css3-properties/
7
понедельник, 30 мая 2011 г.

8. 8
понедельник, 30 мая 2011 г.

9. CSS3 для работы
с графикой:
— multiple Backgrounds;
— gradients;
— drop shadows;
— rounded Corners;
— RGBA.
8
понедельник, 30 мая 2011 г.

10. http://desandro.com
понедельник, 30 мая 2011 г.

11. Как в CSS:
— Несколько раз text-shadow
http://desandro.com
понедельник, 30 мая 2011 г.

12. http://shakenandstirredweb.com/playground/blur/
понедельник, 30 мая 2011 г.

13. Как в CSS:
— text-shadow
— transition
— transform
http://shakenandstirredweb.com/playground/blur/
понедельник, 30 мая 2011 г.

14. http://shakenandstirredweb.com/playground/depth-of-field-2/
понедельник, 30 мая 2011 г.

15. Как в CSS:
— text-shadow
— transform
— box-shadow
— transitions
— border-radius
http://shakenandstirredweb.com/playground/depth-of-field-2/
понедельник, 30 мая 2011 г.

16. http://dl.dropbox.com/u/921159/Keyboard/page.html
12
понедельник, 30 мая 2011 г.

17. http://lab.jeffbatterton.com/iphone-css3/
13
понедельник, 30 мая 2011 г.

18. http://graphicpeel.com/cssiosicons
понедельник, 30 мая 2011 г.

19. понедельник, 30 мая 2011 г.

20. “Cascading Style Sheets can create a
great deal of artwork now, without
reliance on bitmap graphics.”
John Nack, Principal Product Manager at Adobe
понедельник, 30 мая 2011 г.

21. Сейчас с использованием CSS можно создавать
в том числе и достаточно сложные
графические объекты, не используя
растровую графику.
John Nack, Principal Product Manager at Adobe
понедельник, 30 мая 2011 г.

22. Но у меня уже есть
инструмент.
Зачем мне еще один?
17
понедельник, 30 мая 2011 г.

23. 18
понедельник, 30 мая 2011 г.

24. Все хорошо, но...
18
понедельник, 30 мая 2011 г.

25. 19
понедельник, 30 мая 2011 г.

26. А давай попробуем
перекрасить все
ссылки в черный
19
понедельник, 30 мая 2011 г.

27. 20
понедельник, 30 мая 2011 г.

28. А как выглядит если
будет 100 писем?
20
понедельник, 30 мая 2011 г.

29. 21
понедельник, 30 мая 2011 г.

30. еще
Ад авай их ч ерез
одкр асим
п
стр очку
21
понедельник, 30 мая 2011 г.

31. 22
понедельник, 30 мая 2011 г.

32. А мо
жет
отст сдел
уп м аем
пись ежд
мам у
и
22
понедельник, 30 мая 2011 г.

33. 23
понедельник, 30 мая 2011 г.

34. ыдви гается
А к ак в лька?
пане
вот эта
23
понедельник, 30 мая 2011 г.

35. 24
понедельник, 30 мая 2011 г.

36. А в телефоне как
оно будет ?
24
понедельник, 30 мая 2011 г.

37. 25
понедельник, 30 мая 2011 г.

38. А теперь давай во
всех вариантах
поменяем иконки
25
понедельник, 30 мая 2011 г.

39. 26
понедельник, 30 мая 2011 г.

40. CSS3 для
прототипирования:
— pseudo classes;
— media Queries;
— transitions;
— animation.
26
понедельник, 30 мая 2011 г.

41. Зебра на CSS3
27
понедельник, 30 мая 2011 г.

42. Какой следующий шаг?
28
понедельник, 30 мая 2011 г.

43. 29
понедельник, 30 мая 2011 г.

44. Печеньки:
— можно кликать;
— текст как в браузере;
— в одном прототипе все варианты и экраны;
— в одном прототипе интерфейсы под разные
устройства;
— легко редактировать;
— анимация, переходы, эффекты;
— над прототипом можно работать совместно;
— можно использовать в производстве.
29
понедельник, 30 мая 2011 г.

45. Спасибо
30
понедельник, 30 мая 2011 г.

46. Вадим Пацев
Легкий и быстрый
basvasilich@yandex-team.ru
@basvasilich
понедельник, 30 мая 2011 г.