Роль HTML-вёрстки
в проектировании интерфейса Почты Яндекса


             Николай Яремко
О чём я сегодня хочу сказать



    Чем раньше начинаем
использовать HTML, тем лучше
    — глубже, точнее и наглядней —

 ...
Как обычно дело устроено?
Дизайнеры рисуют нам макет интерфейса

                  3
На макет смотрят менеджеры


    4
...и маркетологи



5
Если проект важный,
    то им интересуется
        весь Яндекс!




6
И разработчики, конечно!




7
Нужен кто-то, кто бы собирал
   коллективное знание.

 Кто-то, к кому можно было
прийти со спорным вопросом.


           ...
Проектировщик – источник
  знания об интерфейсе




            9
10
Это полная фигня.

Всё равно получается
     по-другому.


         11
12
Макет – источник
знания об интерфейсе




          13
Менеджер думает:
«Вроде похоже на то, что я имел в виду»
      «Ну это же только макет»
                   14
Воображение дорисовывает картинку.
При этом упуская все проблемные места.
                  15
Задача проектировщика
избавить команду от необходимости
    использовать воображение
                16
HTML-макет позволяет добиться
     высокой точности
Вопросы разработчиков

      «Как это будет резиниться»

  «Что произойдёт, если адрес будет
       длиной в 100 символов»...
Вместо того, чтобы отвечать
 на каждый такой вопрос, можно сделать HTML-макет,
где каждый сможет сам найти ответы на свои ...
«Что произойдёт, если нажать на кнопку?»
21
22
Чтобы такие макеты делать быстро,
   нужен какой-то фреймворк.




                23
Вопиюще невалидный HTML
В каждом файле правки, касающиеся
      только одного макета




                25
www.github.com/makiwara/protosome




               26
Чем раньше начинаем
использовать HTML, тем лучше
    — глубже, точнее и наглядней —

     получается дизайн.
             ...
HTML-макет
Готовый сервис
Худший сценарий
— страдает качество, дизайнеры и разработчики —

         вёрстка начинается
         только после того,
 ...
Дизайнер думает,
 что он справа.
Он знает, как надо!




             31
Верстальщик думает,
   что справа он.
Он знает, как не надо!




                32
33
Cамый ценный момент
в разработке интерфейса:

верстальщик начинает
    разговаривать
    с дизайнером
           34
Дизайнер,


         научиться так
      верстать несложно.

Без валидности, семантичности и
   поддержки всех браузеров.
...
Верстальщик,


за полчаса-час можно из любого
     макета сделать HTML.

  Проведите этот час вместе.


               36
Спасибо!
 Николай Яремко

       37
Upcoming SlideShare
Loading in …5
×

Design by HTML

775 views
719 views

Published on

Slides from #yasubbotnik, slightly enhanced for online publication.

Published in: Design, Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
775
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
8
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Design by HTML

  1. 1. Роль HTML-вёрстки в проектировании интерфейса Почты Яндекса Николай Яремко
  2. 2. О чём я сегодня хочу сказать Чем раньше начинаем использовать HTML, тем лучше — глубже, точнее и наглядней — получается дизайн. 2
  3. 3. Как обычно дело устроено? Дизайнеры рисуют нам макет интерфейса 3
  4. 4. На макет смотрят менеджеры 4
  5. 5. ...и маркетологи 5
  6. 6. Если проект важный, то им интересуется весь Яндекс! 6
  7. 7. И разработчики, конечно! 7
  8. 8. Нужен кто-то, кто бы собирал коллективное знание. Кто-то, к кому можно было прийти со спорным вопросом. 8
  9. 9. Проектировщик – источник знания об интерфейсе 9
  10. 10. 10
  11. 11. Это полная фигня. Всё равно получается по-другому. 11
  12. 12. 12
  13. 13. Макет – источник знания об интерфейсе 13
  14. 14. Менеджер думает: «Вроде похоже на то, что я имел в виду» «Ну это же только макет» 14
  15. 15. Воображение дорисовывает картинку. При этом упуская все проблемные места. 15
  16. 16. Задача проектировщика избавить команду от необходимости использовать воображение 16
  17. 17. HTML-макет позволяет добиться высокой точности
  18. 18. Вопросы разработчиков «Как это будет резиниться» «Что произойдёт, если адрес будет длиной в 100 символов» «Что произойдёт, если нажать вон туда» «Где мы покажем сообщение об ошибке» 18
  19. 19. Вместо того, чтобы отвечать на каждый такой вопрос, можно сделать HTML-макет, где каждый сможет сам найти ответы на свои вопросы. 19
  20. 20. «Что произойдёт, если нажать на кнопку?»
  21. 21. 21
  22. 22. 22
  23. 23. Чтобы такие макеты делать быстро, нужен какой-то фреймворк. 23
  24. 24. Вопиюще невалидный HTML
  25. 25. В каждом файле правки, касающиеся только одного макета 25
  26. 26. www.github.com/makiwara/protosome 26
  27. 27. Чем раньше начинаем использовать HTML, тем лучше — глубже, точнее и наглядней — получается дизайн. 27
  28. 28. HTML-макет
  29. 29. Готовый сервис
  30. 30. Худший сценарий — страдает качество, дизайнеры и разработчики — вёрстка начинается только после того, как дизайн закончен. 30
  31. 31. Дизайнер думает, что он справа. Он знает, как надо! 31
  32. 32. Верстальщик думает, что справа он. Он знает, как не надо! 32
  33. 33. 33
  34. 34. Cамый ценный момент в разработке интерфейса: верстальщик начинает разговаривать с дизайнером 34
  35. 35. Дизайнер, научиться так верстать несложно. Без валидности, семантичности и поддержки всех браузеров. 35
  36. 36. Верстальщик, за полчаса-час можно из любого макета сделать HTML. Проведите этот час вместе. 36
  37. 37. Спасибо! Николай Яремко 37

×