Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Про веб-дизайн для программистов

Avatar for Ivan Gromov Ivan Gromov
September 10, 2014
Programming
0
66

Про веб-дизайн для программистов

О том, что дизайн это не только HTML и CSS, но и думать головой
Avatar for Ivan Gromov

Ivan Gromov

September 10, 2014
Tweet

More Decks by Ivan Gromov

See All by Ivan Gromov
водная лекция про Интернет, HTTP и все такое
Avatar for Ivan Gromov summerisgone
0
51

Other Decks in Programming

See All in Programming
Deep Dive into ~/.claude/projects
Avatar for Yuya Hirayama hiragram
14
13k
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
Avatar for Yuuki Takahashi yktakaha4
2
970
ご注文の差分はこちらですか？ 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
Avatar for Kenji Kono konokenj
3
570
ISUCON研修おかわり会 講義スライド
Avatar for Yuki Yata arfes0e2b3c
1
460
可変変数との向き合い方 $$変数名が踊り出す$$ / php conference Variable variables
Avatar for Gunji gunji
0
160
iOS 26にアップデートすると実機でのHot Reloadができない？
Avatar for Aoi Umigishi umigishiaoi
0
140
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
Avatar for 武田 憲太郎 kentaroutakeda
2
1k
Model Pollution
Avatar for Henning Schwentner hschwentner
1
160
Goで作る、開発・CI環境
Avatar for Shinpei Mine sin392
0
260
PicoRuby on Rails
Avatar for makicamel makicamel
2
140
リバースエンジニアリング新時代へ！
GhidraとClaude DesktopをMCPで繋ぐ/findy202507
Avatar for @tkmru tkmru
3
920
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
Avatar for Kuu fumiyakume
4
710

Featured

See All Featured
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
328
39k
Making Projects Easy
Avatar for Brett Harned brettharned
116
6.3k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
77
5.9k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
3.9k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
512
110k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
267
13k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
273
40k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
282
13k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
430
65k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
140
7k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
248
1.3M

Transcript

  1. Веб-это платформа

  2. None
  3. None
  4. None

  5. Пользователи очень разные •  Десктопы •  Смартфоны на Android, iPhone

    •  Планшеты •  Kindle, Blackberry •  iWatch, умная одежда •  Банкоматы, терминалы •  Голосовой интерфейс •  Текстовый браузер 5

  6. Техника безопасности 1.  Браузеры 2.  Деградация 3.  Устройства 4.  Экраны

    5.  Шрифты 6.  Асинхронность 7.  Контролы 6
  7. None

  8. Инструменты для тестирования •  http://modern.ie/ - бесплатные виртуалки с IE7-10

    •  SauceLabs - Selenium и Unit тесты в облаке, ручное тестирование •  Browserstack - то же самое + больше мобильных устройств 8

  9. 2. Деградация: обычный пользователь 9

  10. 2. Деградация: JS отключен 10

  11. 3. Устройства

  12. None

  13. 4. Экраны Инструмент: CSS Media Query 13

  14. 5. Шрифты ಠﭛಠ Это - тема для отдельного разговора 14

  15. 6. Асинхронность 15

  16. 7. Контролы Здесь нарисованы кнопки, но на самом деле я

    говорю про поле загрузки файлов 16

  17. Как не сойти с ума?

  18. Подходы для организации процесса •  Graceful Degradation •  Progressive Enhancement

    •  Mobile First •  Feature Detection 18

  19. Graceful Degradation Это способность продолжать работу в случае отказа компонентов.

    Это про отказоустойчивость.

  20. Progressive Enhancement Progressive Enhancement - методология от простого к сложному.

    От главного к деталям. 20

  21. Mobile First (Отзывчивый веб- дизайн в переводе) Mobile First -

    сделать 1 сайт для всех устройств 1.  Гибкий макет на основе сетки (flexible, grid-based layout) 2.  Гибкие изображения (flexible images) 3.  Медиазапросы (CSS3 media queries) 21

  22. 2. Modernizr Так называемый “Feature Detection” <html class="js no-touch postmessage

    history multiplebgs boxshadow opacity cssanimations csscolumns cssgradients csstransforms csstransitions fontface localstorage sessionstorage svg inlinesvg no-blobbuilder blob bloburls download formdata ..."> 01. 02. 03. 04. 05. 22

  23. Перерыв

  24. Эмпатия •  Другие люди совсем не такие, как я •

     Их интересует не то, что интересует меня •  Они мыслят иначе, чем я •  Они знают то, что я не знаю •  Они оценивают события по критериям, которые мне не известны и чужды 24

  25. Если вы не согласны, у вас проблемы с эмпатией

  26. Design heuristics Эвристика от Рольфа Молича и Якоба Нильсена 1.

     Отображение статуса системы 2.  Соответствие между системой и реальным миром 3.  Свобода действий и контроль 4.  Единообразие и стандарты 5.  Профилактика ошибок 26

  27. Design heuristics Эвристика от Рольфа Молича и Якоба Нильсена 1.

     Видимость, а не переходы 2.  Гибкость и эффективность использования 3.  Эстетика и минимализм 4.  Помощь и документация Это набор эвристик для примера. По сути это - чеклист. 27

  28. Отображение статуса 28

  29. Профилактика ошибок 29

  30. Свобода 30

  31. Дизайнеры - обычные люди Поэтому с ними нужно работать совместно

  32. Литература •  Школа разработки интерфейсов Яндекса •  Ководство Артемия Лебедева

    •  Искусство мыть слона Влада Головача •  Алан Купер 32

  33. Выводы •  веб-дизайн - это не только и не столько

    html+css •  именно дизайн определяет лицо системы, за которым скрыты труд менеджеров, backend-разработчиков и многих других людей •  дизайн делается для пользователей, они бывают очень разные •  не забывать про разные платформы в продакшне 33