Design by HTML
Upcoming SlideShare
Loading in...5
×
 

Design by HTML

on

  • 1,080 views

Slides from #yasubbotnik, slightly enhanced for online publication.

Slides from #yasubbotnik, slightly enhanced for online publication.

Statistics

Views

Total Views
1,080
Views on SlideShare
1,080
Embed Views
0

Actions

Likes
2
Downloads
7
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Design by HTML Design by HTML Presentation Transcript

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