Йозеф брокман модульные системы в графическом дизайне


Главное

Осознанность и HTML/CSS 🔗

Если вы читаете этот опус, то вы, наверное, не настоящий сварщик.

Возможно, вы уже научились открывать и закрывать теги, но до осознанного их применения в соответствии со стилями и спецификациями дорастает не каждый верстальщик.

Умение интуитивно ощущать собственные ошибки очень важно. Это чувство означает, что вы быстро замыкаете цикл обратной связи и учитесь на ошибках.

Не решайте костылями проблемы в вёрстке, а понимайте, что верстаете и как это делать правильно.

Учить матчасть
Что делать

Методически задавать себе вопрос: а не хню ли я делаю?

Как проверить

Проверяется прохождением темы

☆ Собственные проекты 🔗

Это лучшая практика. Стоит верстать и программировать самостоятельно, хоть в начале пути, хоть уже устроившись на n-нную работу. Так обкатываются изучаемые подходы, если в рабочих проектах их невозможно применить. Так — запрещёнными приемами и интересными решениями — компенсируется рутина.

Здесь фиксируются знания всех остальных тем. Рабочие задачи редко соответствуют уровню знаний. Они либо сильно проще и унылее, либо требуют обширного понимания темы, например, когда надо сверстать что-то простое в большом, запутанном проекте.

Возьмите идею, которая касается лично вас и интересна именно вам. Не делайте рандомный сайт «Калькулятор внутреннего и внешнего радиуса луковых колечек с одной луковицы в зависимости от их количества». Помните о собственном интересе — это единственный рабочий инструмент. Свой проект может быть глупым, но он обязан быть осмысленным и интересным вам. Иначе ничего не выйдет.

Что делать

Можно делать статичный сайт. Можно закрутить Можно изваять псевдо-приложение с помощью

Как проверить

Зайти к себе в гитхаб и посмотреть есть ли там проект.

Проектирование и системное мышление 🔗

Отрядом книг уставил полку,
Читал, читал, а всё без толку… Александр Пушкин

Знания — не сила. Умение ими пользоваться — возможно. Бороться с возрастающей энтропией сложностью разрабатываемых систем (помним, что вёрстка это тоже система) можно структурируя знания и код, используя методологии и определяя принципы проектирования.

Усвоив хотя бы несколько, можно заочно стать программистом.

Инкапсуляция

Основа всего ООП. Компоненты, которые могут измениться, должны быть отделены от системы, которая останется неизменной.

Применимо к вёрстке:

Попытки изоляции стилей в CSS без веб-компонентов это неисчерпаемый источник приключений.

Модульность кода

Организация программы из небольших независимых блоков, структура и поведение которых подчиняются определённым правилам.

Применимо к вёрстке:

Безболезненное использование компонента вёрстки где угодно (привет, архитектура).

Повторное использование

Классы должны быть достаточно абстрактны и независимы, чтобы можно было быстро создать новые без необходимости что-то переписывать или бороться с уже решёнными проблемами.

Применимо к вёрстке:

(Привет, сниппеты).

Принцип открытости/закрытости

Однажды разработанная реализация класса в дальнейшем требует только исправления ошибок, а новые или изменённые функции требуют создания нового класса.

Применимо к вёрстке:

Не изменять изначально написанные компоненты, а расширять их модификаторами (привет, bem).

DRY

Каждая часть знания должна иметь единственное, непротиворечивое и авторитетное представление в рамках системы.

Применимо к вёрстке:

Компонент один, раз и навсегда; модификаторы не повторяются (привет, осознанность).

KISS

Принцип, запрещающий использование более сложных средств, чем необходимо.

Применимо к вёрстке:

Верстать только необходимыми тегами и стилями (привет, семантика).

Хватит!
Что делать
Ещё
  • 👓Википедия
  • 📖Стив МакКоннелл
  • 📖Роберт Мартин
  • 📖Мартин Фаулер
Как проверить

Проверяется освоением тем и И всем остальным.

Английский язык 🔗

Yes, please.

Можно будет наконец-то читать любые книги и документацию, задавать вопросы на «Стэковэрфлоу», общаться с иностранными коллегами и заказчиками, понимать англоязычные мемчики и заставлять других голосовать за вас рублём.

Понадобятся мотивация и практика. Достаточно уметь связывать два слова и можно отправляться на письменные и устные коммуникации — только там можно научиться связывать больше трёх слов. Тренировать технологические навыки можно в личных проектах-песочницах, а общение только с живыми людьми.

Из баловства вполне помогают упражнения со словарём LinguaLeo, книги и кино.

Что делать

В TeamDev: спросить у Маши академического совета.

Как проверить

В TeamDev: Маша тестирует. В Кембридже: тест

Заинтересованность в обучении 🔗

Это не строчка в резюме, а осваивание новых и переосмысление старых подходов с доказательством их применения в работе или собственных проектах. Долгая работа в веб-студии или энтерпрайзе выжигает любознательность напрочь.

Научитесь не просто штудировать всё, а искать закономерности и общие паттерны в разных областях знаний. Так будет легче и веселее учить новое.

Все профессионалы тренируются и учатся. За учёбу никто не платит. Вы занимаетесь ею, чтобы вам платили за основную работу — и платили хорошо.

Не забывайте:
  • труднее учиться, если уже считаешь себя учёным;
  • практика и впечатления — простой способ закрепить изученное;
  • знания, за которые платите вы, а потом платят вам, усваиваются лучше;
  • ↵ бумажные книжки лучше электронных;
    • ↵ читайте то, что интересно узнать и то, что можете прочитать;
      • ↵ книги на русском понятны, читаются быстро и лучше запоминаются;
Что делать
Как проверить

Осваивать больше, чем здесь.

Знать как верстают другие 🔗

Надо смотреть внутрь всего, что выглядит и работает хорошо. Надо уметь замечать то, что хорошо свёрстано. Способность читать и понимать код, который писали не вы, очень важна, если вы работаете в команде или участвуете в открытых проектах.

Elementary
  • 📖Дэвид Макфарланд «Большая книга CSS»
  • 📖Дэн Сидерхолм «CSS3 для веб-дизайнеров»
  • массово поглощать статьи в духе
  • сохранять себе чужие
Intermediate
  • 📖Лиа Веру «Секреты CSS. Идеальные решения ежедневных задач»
  • подписаться на других
  • читать от корки до корки журналы вроде
  • регистрироваться во всех мыслимых и немыслимых социалках и узнавать как они в целом свёрстаны и оформлены;
  • инспектировать вёрстку каждого_встречного_компонента;
  • экспериментировать и рефакторить у себя;
  • находить баги на чужих сайтах;
  • сохранять себе чужие и свои сниппеты.
Advanced
  • устраивать холивары на «Хабре».
Что делать

Почаще открывать исходный код просматриваемых сайтов.

Как проверить

Сделать что-то так, как уже удачно сделали на каком-нибудь популярном сайте.

Junior Stack Overflow Developer 🔗

Это не нелепая шутка, а суровая реальность. Опять же, всё выучить невозможно, поэтому умейте хорошо гуглить и правильно формулировать вопросы коллегам, а не гадайте на кофейной гуще.

Задавать вопросы — не стыдно. Стыдно просидеть весь день и не написать ни строчки, потому что чего-то не понял.

Для тренировки можно перестать задавать вопросы, не найдя на них ответ самостоятельно.

А ещё Гугл следит, насколько крутые и специфические запросы вводит пользователь, и начинает обрабатывать его как потенциального кандидата.

Что делать

Гуглить как гугл

$ git know --basics 🔗

Всегда используйте версионирование. Хоть в команде, хоть в одиночку. Практика частых коммитов, возможности смотреть историю изменений и прочая красота сильно помогает. Каждый рабочий проект начинайте с репозитория. Учебные или личные проекты храните в личном «Битбакете» — там бесплатные приватные репозитории. Что-то особо клёвое можно вынести в публичный «Гитхаб».

Ключевые моменты:
  • создание, синхронизация, слияние;
  • конфликты и их разрешение;
  • частота и чистота коммитов;
  • откатывание и перенос коммитов;
  • инструменты для интеграции с редактором.
Что делать

Всегда использовать версионирование.

Как проверить
  • а) на практике в работе;
  • б) показать тимлиду личный проект со всеми типичными сценариями.

Сниппеты 🔗

Множество мелких решений, миксинов и стилей для базовых элементов кочует из проекта в проект и с каждым разом шлифуется. Особенно хорошо, когда они открыты на гитхабе. Не стоит переживать, что там могут оказаться банальные вещи — всем плевать. Вам должно быть не плевать.

Изобретать велосипед плохо для дела, но хорошо для обучения.

А зачем это?
  • Сниппеты и примеры помогают относится к коду как к чему-то стоящему, а не как к одноразовым костылям.
  • Ведение набора заготовок тренирует принцип повторного использования кода.
  • Помогает делать запоминать подходы и совершенствовать полученные результаты.
  • Огромный довесок к резюме и репутации.
Что делать

Организовать git/gist и комитить самое любимое.

Как проверить

Зайти к себе в гитхаб и посмотреть есть ли там набор своих любимых миксинов.

Примеры кода 🔗

В дополнение к гитхабу со сниппетами и собственным проектом хорошо иметь запас примеров своих достижений. Это отдельные шаблоны или элементы, где вы ловко и изящно выкрутились.

Если вы ещё учитесь, интересное можно делать и в лабораторных работах — просто делайте их не по методичке, накручивайте там сок и выдавайте к скучным заданиям весёлый результат. Заодно получите хорошую репутацию у преподавателей, автомат на экзамене и даже внимание противоположного пола.

Не забывайте, что демка и скриншот — признак воспитанного человека.

Что делать
Как проверить

Зайти к себе в гитхаб и посмотреть есть ли там примеры.

Дело техники

Архитектурные методологии 🔗

Сначала архитектура. 80% времени надо думать, что где лежит, как работает и с чем взаимодействует. 10% записывать это. 10% переписывать это наново.

OOCSS всегда можно брать за основу, там низкий порог вхождения. Принципы BEM могут помочь избежать беспорядка, когда проект будет бесконтрольно разрастаться. «Атомный дизайн» тоже необходимо понять и вынести из него полезные для себя подходы.

Тема сложная. Но и вёрстка это не тупо. Здесь есть

Лирическое отступление

Частая ошибка тимлидов и руководства — ставить джунов в начало вёрстки большого проекта. «Надо по-быстрому заверстать», ага. Либо не соглашайтесь на это, либо из штанов выпрыгивайте, делая всё по правилам и требуя регулярных код-ревью. В лучшем случае после плохо организованной структуры вёрстки джуниора вскоре уволят. В худшем — будут за глаза ругать при каждом баге, ради которого нужно рефакторить всю вёрстку в радиусе километра.

Что делать

Сделать структурирование образом жизни.

Соорудить пример большого пустого проекта: посмотреть на какой-нибудь большой сайт и организовать под него папки и стили — буквально по десять коротких правил в каждом.

Как проверить

Показать тимлиду как лихо и ненапряжно расширяется тестовый проект.

Семантика и именование объектов 🔗

Структура сайта и смысл каждого объекта должен быть понятен прямо из исходного кода. Иерархия и названия подключаемых шаблонов, переменные и имена классов попадают под это же правило.

Одна из наиболее важных частей, о которой следует помнить при написании семантического и доступного кода — это сделать всё возможное, чтобы использовать стандартный язык разметки, что возвращает нас к пункту

Что делать
  • 1. Знать и
  • 2. Не сооружать div.wrapper если структура того не требует.
  • 3. Нормально называть классы.
Как проверить

Пройти 10 код-ревью подряд без замечаний о семантике и именовании объектов.

Документация 🔗

Странный пункт — требовать знание документации. Её достаточно единожды внимательно прочитать и забыть, чтобы спустя годы, во время какого-то затыка, вспомнить:

— Тю! Так это даже в документации есть!

Отвечают знатоки

Спецификации и черновики читать по желанию.

Что делать

Побыть «человеком дождя» один вечер.

Как проверить

Не валиться на незнании документации.

Препроцессоры 🔗

Увеличивают скорость работы, помогают в архитектуре, улучшают привычный способ организации стилей. Поначалу можно закопаться, зато потом будет приятно и незаменимо.

Надо не просто знать о существовании препроцессоров, но и уметь на практике всё от переменных и вложенности до циклов и переборов.

Забегая наперёд: всё настраиваем на автоматическую сборку. Так чтоб сразу красиво было.

Ага, вот эти ребята
Что делать

Делать вместе с и

Как проверить

Пройти 10 код-ревью подряд без замечаний об организации препроцессорных стилей.

Фреймворки и библиотеки 🔗

«Бутстрап» не везде канает, но знать его надо. Новичкам и тем, кому туго, надо заглянуть как он сделан внутри и разобраться с принципами — это поможет правильнее применять существующие сетки, компоненты, а не клепать велосипеды; даст примеры для подражания и иллюстрации некоторых, пускай и архитектурных подходов. Неуместное использование элементов фреймворка обрекает вас на бесконечные и презрительные код-ревью.

Прежде чем изучать «Бутстрап», убедитесь в том, что вы изучили препроцессоры и Все эти вещи куда полезнее.

Как множатся стандарты

Что делать

Расковыривайте всё, что попадается под руку.

Как проверить

Если вы больше не озираетесь по сторонам, задумывая втихаря написать собственный фреймворк или компонент для чужого, значит вы уже разобрались с существующими.

... и нужно 10 код-ревью подряд без замечаний о неверном использовании компонентов.

Интерфейсные шаблоны 🔗

Верстальщику стоит знать дизайн интерфейсов. Самих дизайнеров мало и их можно было бы задействовать исключительно на проектировании.

Главное в дизайне — композиция и незаметная простота интерфейса. Это всё легко достигается правильным использованием шаблонов проектирования, а это значит, что нужно уметь сразу «верстать красиво».

Минимум

Мы ещё вернёмся к дизайну, а пока послушаем парнишу, которого никто не любит:

Первые месяцы существования ВКонтакте я создавал весь код, графику, формулировки, интерфейсы, маркетинг. Совмещение позволило устранить расход времени на коммуникацию. Павел Дуров

Что делать

Количество разработчиков прочитавших книгу с уточкой пока что равняется количеству тех, кто досмотрел эту гифку до конца. И это не смешно.

Как проверить

Сделать интерфейс и принести его дизайнеру:

Доступность и надёжность 🔗

Сделав код понятным для программистов, недалеко и до того, чтобы подготовить его для людей и для машин, помогающих пользователям. В первую очередь это читалки экрана для людей, которым повезло не так сильно как нам. Во вторую, микроформаты и оптимизация для поисковиков. В третью, для мобильных устройств.

Работы здесь достаточно и это даст вам левел-ап, ощущение законченности кода и гордость за результат.

Hardcore

📖Joshue O Connor «Pro HTML5 Accessibility»

Можно попытаться опробовать всё самим: оценить видимость и размеры кнопок и ссылок, увеличить масштаб до 150%, всё проклацать табом, тестировать заполнение форм только клавиатурой, во всё пробовать попасть маленьким ноутбучным тачпадом, держа в руке капающий вареньем бутерброд, а другой рукой управляя трактором. Вслепую.

И можно скормить вёрстку

Что делать
Как проверить

Насобирать 10 скриншотов валидатора с правильной вёрсткой по насущным задачам.

Мобильность 🔗

Если вкратце, то надо проштудировать все Web Fundamentals и уметь отвечать на вопрос What Makes a Good Mobile Site?

Знать и уметь:
  • резиновые сетки;
  • принципы «перестройки сетки» и
  • @media, макро- и микробрейкпоинты;
  • отладка в эмуляторе и на телефоне;
  • организация кода разных версий: мобильной, планшетной, обычной.
Книжки
  • 📖Люк Вроблевски «Сначала мобильные!»
  • 📖Итан Маркотт «Отзывчивый веб-дизайн»
Сайты
Курсы
Что делать

Открывать всё на телефонах.

Как проверить

Собрать 5 беспроблемных резиновых сайтов.

Вёрстка текста 🔗

Освоить базовые принципы оформления текста необходимо всем, у кого есть клавиатура. Это занимает пару минут. Прямо сейчас:

© Максим Ильяхов

Разобрать
Hardcore
  • 📖Роберт Брингхерст «Основы стиля в типографике» — божественно
  • 📖Йозеф Мюллер-Брокманн «Модульные системы в графическом дизайне» — прямоугольно
Что делать

Поверстать текст красиво хотя бы один раз и потом уже не отпустит.

Как проверить

Попросить у дизайнера тестовое занятие после освоения теории и самостоятельной практики.

Вёрстка форм 🔗

Компьютер не может причинить вред данным пользователя или своим бездействием допустить, чтобы данным был причинен вред. Первый закон проектирования интерфейсов

C заполняемыми пользователем формами нужно быть осторожными, внимательными и заботливыми.

HTML Forms Guide — там сколько всего интересного: табиндексы, автофокусы, подсказки, ограничения, html5 атрибуты полей для системной поддержки.

Уточка атакует

📖Дженнифер Тидвелл «Разработка пользовательских интерфейсов» — там и про формы, там про всё

Что делать
  • знать
  • верстать
Как проверить

Сделать тестовое задание.

Вёрстка писем 🔗

Всего лишь знание нескольких нюансов, хорошее отношение к электронной почте и несколько практических приёмов дают вам дополнительный ценный навык.

Как проверить

Сверстать письмо по шаблону или без и показать дизайнеру и тимлиду. И на телефоне тоже.

Веб-шрифты 🔗

— Теперь оно моргает при рефреше!

Со шрифтами до сих пор как-то всё коряво и все на это забивают.

Как проверить

Сделать песочницу, в ней замерить результаты через Devtools и показать всем результаты.

Фотошопы 🔗

Надо уметь правильно определять графику для экспорта, ловко её сохранять в любых размерах и оптимизировать PNG, SVG, JPG, понимая когда что нужно. Уметь переносить стили слоев в css руками или автоматом. Из самостоятельной работы нужны владения текстовыми и векторными инструментами.

Картинки
Инструменты
Лайк а босс
Что делать

Если нет рабочей задачи что-то поверстать, можно просто нагуглить пару сильно графических макетов и поверстать их. Поработать над уроками и ресурсами про Скетч.

Как проверить

Не получать от дизайнера жалоб на джипеги и неправильно порезанные картинки на 3 проектах.

SVG 🔗

Уметь встраивать, генерировать, анимировать, управлять содержимым и редактировать без привлечения специально обученных дизайнеров. Как в графическом редакторе, так и в текстовом.

Обязательно уметь собирать всё в спрайты.

Что сделать

Взять у дизайнера заковыристое задание.

Как проверить

Показать результат в браузере дизайнеру и код тимлиду.

Иконочные шрифты 🔗

Лучше использовать SVG, но на многих проектах шрифтовые иконки прижились в виду примитивной простоты использования.

Есть нюансы правильной конвертации: полученный шрифт должен хорошо выравниваться, содержать лигатуры и легко встраиваться несколькими способами в любой объект на странице. Иначе это плохой шрифт.

Что делать
Как проверить

Сделать клёвый тестовый шрифт или, если задача рабочая, пройти код-ревью без замечаний.

Быстрый инструментарий 🔗

IDE, «Саблайм», «Атом», «Брэкетс», с emmet или без, да хоть вообще vim — Главное, чтобы вы там удобно и быстро писали всё, что приходит в голову, а не вспоминали полчаса нужную комбинацию клавиш.

Помимо настройки редактора и его плагинов, нужно хоть в какой-то мере освоить слепую печать и насобачиться в хоткеях.

Что сделать

Найти свой редактор.

Как проверить

Уловить блеск в глазах тимлида, умиляющегося скоростью вашей работы.

Форматирование 🔗

В дополнение к инструментарию. Ровный код хорошо читается и вызывает ощущение надёжности, даже если он не работает.

Хорошо написанный код экономит время другим разработчикам. Следуйте чьему-то подходу или соблюдайте принятый в команде. Главное в этом деле — постоянство.

Что делать

Освоить правила, настроить редактор.

Как проверить

Пройти подряд 10 код-ревью без замечаний про форматирование.

Отладка 🔗

Режим отладки это теперь ваш ближайший друг и помощник.

Анализ
Скорость
Как проверить

Разоблачить на 3 сайтах в разработке проблемы с быстродействием и предложить их устранение.

Точность 🔗

Верстать надо так, чтобы PerfectPixel был не нужен.

Поначалу необходимы внутренние чеклисты и инструменты для валидации кода, которые дадут уйму подсказок и даже косвенно научат верстать лучше.

Соблюдайте размеры из макетов, если там они систематизированы, или сами следите, чтобы у вас в вёрстке всё было ровно. Можно воспользоваться чем-то вроде (и дизайнерам про это расскажите).

Что делать

Любить композиционное равновесие, ввести привычку работать по сеткам и уметь верстать.

Как проверить

Быть немного дизайнером.

Тестирование 🔗

Сейчас, когда неуклюжих браузеров перестало быть свыше 9000, а на Хабре статьи о кроссбраузерности не появлялись с 2011 года, сам термин «кроссбраузерно» наконец-то может означать «одинаково во всех браузерах». По возможности этого и надо добиваться.

Отображение в браузерах основной аудиторией надо проверять только на живых, установленных локально, браузерах. При необходимости — на виртуалках. Проверку телефонных и планшетных версий можно репетировать в эмуляторах, а потом обязательно повторить на устройствах. Для всего остального есть

Всё нужное по теме можно найти в документации «Мурзиллы»:

Было бы в высшей степени непрофессионально передавать на проверку QA заведомо дефектный код. А какой код является заведомо дефектным? Любой, в качестве которого вы не уверены! Роберт Мартин, «Идеальный программист»

Как проверить

Всегда всё проверяйте, не прикидывайтесь хорошими.

jQuery 🔗

В jQuery используется знак $. Вам это о чём-нибудь говорит?

Сама по себе jQuery — замечательная библиотека с развитой экосистемой плагинов. Многие считают её этаким стандартом для разработки сайтов. Но это библиотека, а не язык программирования.

В первую очередь изучить основы языка (или основы программирования, если об этом надо ещё раз повторять). Без понимания фундаментальных механизмов JavaScript не получится эффективно решать возникающие проблемы.

Если нужна только работа с DOM, то можно использовать что-нибудь более простое и может даже

<!-- TODO: добавить ещё ссылок про джейквэри -->

Что делать
Как проверить

С помощью личного проекта. Там должно быть что-нибудь клёвенькое. Самописный плагин, например.

Автоматизация

Компиляция, валидация, оптимизация и запуск должны быть переложены на сборщик. Gulp — уже хорошо. Можно разобраться с grunt.

  • $ npm
  • $ gulp
  • $ webpack — если вы уже совсем всё освоили и начали гаситься по джаваскрипту

Незаменимое дополнение к пункту про препроцессоры и Сборка собственных и рабочих проектов должна войти в естественный и привычный подход к организации вёрстки.

Как проверить

Удачно настроить 5 проектов разных конфигураций.

Настройка хостов и CMS 🔗

Просто научитесь настраивать хотя бы старые добрые WordPress и Bolt. Знайте htaccess и wamp/xamp. Попробуйте хипстерские jekyll, ghost. Шелестеть файлами по ftp тоже всё ещё надо. И ssh ещё живой.

Отдельной строкой npm и его друзья из секции выше.

Можно, например, упростить себе задачу с личным проектом и, установив какой-нибудь «Вордпресс», превратить его в нечто совершенно иное.

Как проверить

Показать результаты.

Программирование 🔗

Умение программировать даёт совершенно другое понимание происходящего, независимо от языка. Можно посмотреть наследования после освоения препроцессоров и поразмыслить о том, как же всё замечательно устроено.

Кажется, что нужно срочно учить JS (фронтенд как-никак), но можно начать и с более оформленного языка вроде Питона или Си — просто чтобы просто понять что да как.

Принципы проектирования мы уже знаем. Так ведь?

Что делать

Прогрессивные технологии 🔗

Наша базовая техническая прогулка подходит к концу. Далее вас ждут приключения.

Веб-компоненты, X-Tag, Polymer, Custom Elements и прочий Shadow DOM в том или ином виде пытаются появиться на свет уже третий раз. Это новый вариант создания модулей, который позволяет получить (почти) гарантированную инкапсуляцию кода, верстки, стилей и действительно удобный и стандартизированный интерфейс к ним.

Приживётся ли — пока не ясно. Понимание этих штук полезно как «взгляд в будущее» на то, какой станет вёрстка.

Что делать

Обкатывать вот это всё.

Мягенькие

Письменное изложение мыслей 🔗

Умейте писать кратко и по делу.

Письма коллегам, детали задач, описание коммитов, документация, комментарии в коде, сам код, ленивая переписка в чатике, записки на холодильник — везде надо писать хорошо.

Это может показаться неочевидным, но письменный формат помогает вытащить на поверхность идеи и мысли, структурировать и проверить их.

Что делать
  • 1. Начать ценить время других. Бессмысленные комментарии в коде или непонятные письма заставляют адресатов либо разбираться во всём самим, либо переспрашивать.
  • 2. Освоить этикет деловой переписки.
  • 3. Избегать формализмов и прочей ерунды.
  • 4. Прививать критичный взгляд на текст можно начиная с — там всё просто и увлекательно. Потом выбрать что-то посложнее.
  • 5. Вставлять гифки вместо текста.
Что сделать

Начать писать письма коллегам и друзьям.

Как проверить

Читать написанное вслух. Не получать замечаний по поводу комментариев к коду.

Общение по делу и критика 🔗

С окружающими нас дизайнерами и программистами есть о чём поговорить по делу.

Надо уметь излагать свои соображения, воспринимать и правильно формулировать критику, внимательно выслушивать даже самые требовательные замечания по делу и старательно отфильтровывать околесицу, которую вам могут привнести в дискуссию под видом собственного несгибаемого мнения.

Критика — основной инструмент в работе и обучении, в отличие от похвалы и лизоблюдства. Её никто не любит, но институт этикета не стоит на месте и наши заморские коллеги собрали некоторые свои соображения в книги:

  • 📖«Discussing Design»
    Adam Connor, Aaron Irizarry
  • 📖«Articulating Design Decisions»
    Tom Greever

Можно попробовать ворваться в общий «этикет для чайников», но и там всё сложно:

  • 📖«У них так принято»
    Росс Маккаммон
  • 📖«Не кладите смартфон на стол»
    Дороти Джонсон
Что делать
  • Ясно спрашивать.
  • Ясно отвечать.
  • Не перебивать.
Как проверить

Это будет заметно.


Источник: http://webmasters.teamdev.com/


Закрыть ... [X]

10 книг на русскомпро дизайн книги блог Софт Культуры Прически к костюму феи


Йозеф брокман модульные системы в графическом дизайне

Йозеф Мюллер-Брокман. Модульные сетки в графическом



Йозеф брокман модульные системы в графическом дизайне

«Модульные системы в графическом дизайне» Йозефа



Йозеф брокман модульные системы в графическом дизайне

Что такое модульные сетки и зачем они вам нужны



Йозеф брокман модульные системы в графическом дизайне

Выключка по левому краю - Блог Игоря Штанга



Йозеф брокман модульные системы в графическом дизайне

Модульные системы в графическом дизайне



Йозеф брокман модульные системы в графическом дизайне

Grid Systems in Graphic Design: A Visual Communication Manual



Йозеф брокман модульные системы в графическом дизайне

Le se relift chez e-artsup Grid system



Йозеф брокман модульные системы в графическом дизайне

Вёрстка это не тупо



Йозеф брокман модульные системы в графическом дизайне

Стена ВКонтакте



Йозеф брокман модульные системы в графическом дизайне

25 лучших программ для дизайнера интерьера



Йозеф брокман модульные системы в графическом дизайне

8 лучших стрижек для длинных волос (35-фото)



Йозеф брокман модульные системы в графическом дизайне

BurdaStyle: мода і стиль, викрійки, майстер-класи по рукоділлю



Йозеф брокман модульные системы в графическом дизайне

Дизайн Ногтей 2017 Фото Новинки