Что вы думаете о нотации Гарретта?

Саша Киссель
10 ноября 2008

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

А. Г.

Любая нотация требует изучения сначала разработчиком схемы, затем ее читателем. В нотации Гарретта лично я сломался на треугольничке и трапеции. Сразу вспомнил институтские мучения с блок-схемами.

Хотя я совершенно не возражаю против использования любой нотации в отдельно взятом коллективе, в собственных структурных схемах мы используем минимальный набор: прямоугольник, он же со скругленными краями, стрелки, возможно, легкие объединяющие плашки или рамки. При этом самый частый элемент схемы (страница в нотации Гарретта) вполне может быть представлен только своим названием без рамки:

Заметьте также легкое улучшение места соединения стрелок, ранее упомянутое в совете о паутине на схеме.

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

Твитнуть

Отправить

Мне кажется, что для такого проектирования вполне подойдет UML-диаграмма состояний (State Chart).

Во-первых, UML — мощная нотация, позволяющая много что показать (условия переходов, аргументы, ограничения, время…)

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

В-третьих, по стандарту, состояния можно показывать на д. деятельности (Activity), что позволяет отображать, кроме самих переходов, еще и сложную динамику.

Алех Зибру
10 ноября 2008

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

Виктор Глушенков
10 ноября 2008

Николай, а в чем, по-вашему, смысл использования любой нотации, которую необходимо изучать? Преимущество в таком случае исключительно в том, что исключается неоднозначность трактовки схемы. Но это является преимуществом при выполнении двух условий: нотация используется правильно, схема без нотации создана плохо. В любом другом случае формализованные схемы проигрывают. В качестве иллюстрации сравните ваш вариант и предложенный Артемом. Обратите внимание, откуда выходят стрелки на его схеме. Информативность такой схемы существенно выше, а нотация понятна любому. («Интуитивно понятный» — запрещенный в моем лексиконе термин :)

Николай Товеровский

11 ноября 2008

Виктор, схема Артема (вы же ту что со скриншотами имели в виду?) мне тоже нравится. Но, отвечая на ваш вопрос, хотелось бы спросить у Артема: «А как вы делаете такие схемы?» Я думаю, что рисуют в графическом редакторе. А это, во-первых, не каждый умеет, а во-вторых, это долго.

Большим плюсом UML является наличие огромного количества готовых CASE-средств. Многие даже включают средства прямого и обратного проектирования (получения кода из диаграммы и диаграммы из кода соответственно).

И, повторюсь, считаю, что UML вещь настолько распространенная, что можно считать, что ее знают все.

Дмитрий Зимин
11 ноября 2008

Виктор, есть один важный нюанс. «Нотация» (если так можно выразиться) Артема хорошо подходит, по его же словам, для описания структуры сайта. И только структуры. Преимущества же стандартных нотаций в другом. Они позволяют описывать ещё и процессы. При этом «понятность» такой схемы не так сильно зависит от способностей человека, разрабатывающего её. Артем и его команда в этом спецы, им проще выбрать наиболее подходящий способ для каждой конкретной ситуации. А представьте каково, например, С++ программисту, который в интерфейсах не очень-то силен. Ему нужны готовые средства (все равно что АКП для обычного непрофессионального водителя).

И смысл изучать специальные нотации тоже есть. Вы же используете профессиональный сленг в разговоре с коллегами? Это и есть «специализированный» интерфейс. Его сначала нужно освоить, зато потом он упрощает и убыстряет работу.

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

Виктор Глушенков
12 ноября 2008

Дмитрий, если взглянуть на перечисленные Артемом элементы: «прямоугольник, он же со скругленными краями, стрелки, возможно, легкие объединяющие плашки или рамки», то этот набор кажется лишенным специфики веб-дизайна. Линия, связывающая два объекта, изображает связь; стрелка — переход; плашка группирует объекты — это естественные образы для человека. Здесь используются скорее изобразительные приемы. А в более формализованных нотациях часто встречаются элементы, смысл которых неочевиден, если не прочитать документации. Например, что означает трапеция на гриле из нотации Гаррета?

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

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

Проверим теорию Николая: Артем, вы знаете УЯМ?

А. Г.

12 ноября 2008

Виктор, по крайней мере, я понимаю, о чем вы, даже когда-то рисовал диаграмму классов :-)

Сейчас нотацию не читаю, это точно.

Иван Неслуховский
14 ноября 2008

У меня есть предложение поэкспериментировать. Давайте каждый нарисует и пришлет комментарием схему, описывающую эту вот страницу с советом в виде нотации Гарретта (-;

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

Сергей Долгов
20 ноября 2008

Соглашусь с Иваном: недавно мы поставили в коллективе педагогов одной школы эксперимент на выявление умения пользоваться граф-схемами. Мама дорогая! Кто только что под этим ни понимает — и немудрено, у нас даже разработчики, которые «в хвост и в гриву», и те не могут договориться. Тогда мы сделали эксперимент «на понимание» — дали текст, попросили его представить в виде граф-схемы и потом восстановить текст. Как, думаю, вы догадались, результат сильно отличался от источника.

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

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

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

И как совершенно правильно было сказано в посте про паутину: схема — это путь от «дано» до «результата». И этот путь должен четко прослеживаться.

Иван Неслуховский
21 ноября 2008

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

Посмотрите на пример (http://www.jjg.net/ia/visvocab/files/metafilter_ia.pdf, PDF), который автор нотации дает на своей странице, этот пример ничего не объясняет, многие обозначения так и остались «за кадром», хотя и так одолевают сомнения в их необходимости. В нотации акцент ставится на конкретную страницу, увязать ее в сложную структуру почти невозможно без избыточного увеличения информационного шума.

	Ваш комментарий	Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа. Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным. Вот такой веб 2.0.

Имя и фамилия	обязательны полностью для публикации комментария
Электронная почта	адрес не будет опубликован
Ваши соображения
Иллюстрация	гиф или джипег шириной не более 700 пикселей

Похожие советы Представление информации₁₅₇ Управление проектом₃₃₂ Формат: диаграмма₇₉ Носитель: сайт₅₃₄ Носитель: программа₇₄ Носитель: бумага₁₄₈

3 • 4 • 5 • 1 •

3 • 2 • Зачем читать книги из совета о «науке» юзабилити, когда приглашать дизайнера в проект и как определить хороший референс для тренировки насмотренности Талант в успехе дизайнера, что почитать о дизайне продуктов, трудоустройство выпускников школ бюро Вакансия визуализатора 2 • 2 • 3 • 1 • 2 • 4 • С подходами к адаптивной вёрстке вроде все уже разобрались, но вот с отображением табличных данных понятно не всё 8 • Почему на шкале большинства термометров цифры написаны по обе стороны делений? 1 • 6 • 4 • 2 • Хочу сделать красивый блог с пошаговыми рецептами 7 • 1 • 7 • 4 • 2 • 6 • 5 • 14 • 3 • 5 • 8 • 3 • Числа, кратные 5 или 10 кажутся больше, чем остальные 4 • 6 • 6 • 5 • 1 • 1 • 2 • 2 • 6 • 2 • 13 • 6 • 19 • 4 • 7 • 4 • 3 • 46 • 10 • 4 • 16 • 7 • 2 • 6 • 5 • 3 • 15 • 2 • 6 • 2 • 11 • 10 • Есть 10 объектов, в каждом объекте 3 зоны, в каждой зоне 2-5 температурных датчиков 4 • 14 • 5 • 6 • 8 • 8 • 4 • 3 • 8 • 2 • 5 • 5 • 7 • 4 • 8 • 6 • 2 • 2 • 7 • 7 • 5 • 5 • 1 • Поскольку одни люди привыкли мерить время цифрами, а другие циферблатами, мне кажется разумной идея добавить в интерфейсы телефонов пиктограммы с часами 2 • 5 • 15 • 9 • 5 • 8 • 10 • 12 • 3 • 3 • 4 • 29 • 7 • 7 • 10 • Существует ли какая-то система нотации для моделирования пользовательского интерфейса, которая бы позволяла обозначать такие свойства элементов, как «резиновость», сохранение выравнивания по какой-либо оси? 10 • 7 • 7 • 11 • 8 • 11 • 16 • 2 • 2 • 4 • 4 • 6 • 1 • Что вы думаете насчет Google Chart API? 6 • 4 • 12 • 6 • 3 • 3 • 14 • 15 • 6 • 8 • 15 • 11 • 9 • 4 • 11 • 4 • 4 • 7 • Что еще может служить для упрощения навигации в метро? 16 • 2 • 15 • 4 • 5 • 11 • 1 • 7 • 9 • 17 • 4 • 5 • 3 • 6 • 11 • 2 • 13 •

Ушли из компании, но хотите вернуться Страшно запускать свой курс Хочется схантить сотрудника у клиента Невозможно собрать портфолио 1 • Джун спорит Трудно презентовать работу Нанимают идиотов Начальники меняют задачу Сотрудники спорят из-за денег 4 • Завышенный план Энтузиаст задолбал Хочется большего от жизни «Мидлы» не приживаются Хочется всё выбросить и начать проект с нуля Нанимать — боль Пора спланировать год Предновогоднее затишье Как правильно оценить сроки в задаче и в них уложиться? Как флексить в графдизайне 1 • Почему разработчик зарабатывает больше дизайнера? 2 • Как «Календарь дел» согласуется с принципом «Не впритык»? 2 • Каким образом вы копите различные знания в виде текста, картинок, видео? 2 • Токсичный суперсотрудник Нет онбординга Сотруднику нужна великая цель Новичок хочет много денег Слишком ответственная сотрудница Взять проект за месяц до запуска Мечтаете о четырёхдневке Страшно уйти в отпуск Зарплата за результаты Сложно спорить с руководством Работаю по 10—13 часов Опыт большой, а работу не найти Забрать дела за одну неделю Простудились, а работать нужно Не берут после тестового 1 • Ничего не успеваю Гипотез много, денег мало 1 • Операционка бесит Сотрудник не оформляет работу Не поднимают зарплату Нужен дизайнер Страшно взяться за серьёзную задачу Стажёры превратили работу в ад Хочется расстаться с клиентом Коллеги отвергают улучшения 1 • Карьерный план разрушен Мания контроля Вот-вот уволят Руководитель микроменеджерит Вокруг пиздец Я плачу, сделайте по-моему Нет обратной связи от руководителя У клиента бардак в бизнесе Некогда рассказывать о работе Некогда поменять инструмент Человек пропал и не передал работу Босс разломал планы Как улучшить процесс модерации 1 • Нервотрёпка под Новый год Критика демотивирует 2 • Начальники разрывают на части Отвлекают на работе Встречи сжирают всё рабочее время Второстепенный проект Нет сил, чтобы сделать Забытая задача 1 • Как сделать сайд-проект? Новые сотрудники круче меня, как ими управлять? Начальник наваливает задачи под конец дня Всё хорошо, надо увольняться Как уйти в отпуск, если без меня работа встанет? Как решать конфликт с клиентом, если исполнитель накосячил? Команда теряет задачи. Что сделать? 1 • Как избавиться от синдрома самозванца? 3 • Что делать, если всё плохо, но я ничего не предпринимаю? Как улучшить себя? Работа идёт не с заказчиком напрямую, а с посредником Как больше зарабатывать Максим, как вы всё успеваете? Как сделать то, не знаю что Сотрудник постоянно факапит 3 • Задача провалена Поддержка достала руководителя 1 • Бесконечные правочки по договору 4 • Сколько времени тратите на планирование реализации «фичи» и сколько времени на написание самого кода? Руководитель тянет всё сам Менеджер клиента ничего не решает Аврал сразу в двух проектах 1 • Как вы оцените с технической точки зрения новый редактор публикаций в «Деле Модульбанка»? 3 • Неделя провалена 1 • Как перестать работать на праздниках? Сделали раньше дедлайна Директор компании оттягивает сроки проектов Какие технологии вы бы порекомендовали для создания статичных и не самых сложных сайтов 2 • Мы провалили дедлайн и просто работаем дальше. Это ок? Как объяснить значимость фичи разработчику? 1 • Задача уже в работе, и тут выясняется, что исполнитель не понимает, что нужно сделать, хотя сам взял задачу Расскажите об обязанностях технического директора в бюро. Вторая часть: встречи один на один Не жрать говно Бесхозная задача Как быть, если твой руководитель некомпетентнее или незаинтересованнее тебя? Тайные знания о делегировании, часть 2 Пофлексить не получается Тайные знания о делегировании, часть 1 Реализатор назвал срок, который вам не нравится Как искать баланс между пользой для команды и пользой для себя? 1 • Как организовать процесс сдачи задачи и код-ревью в рамках спринта? Стоит ли менять работу, если уже порядком поднадоело, но есть новые проекты и в целом хоть какой-то прогресс ощутим? Что такое непрерывная доставка? Как написать аккуратный код? Часть четвёртая: ответственность В каком направлении думать 2 • Как и когда зарождающийся стартап в процессе своего развития должен подходить к вопросу имплементации билинга? Зафиксировать первые эмоции Новичок в команде считает, что стандарты качества продуктов низкие, а знания и опыт устарели из-за инертности 3 • Как быть разработчикам, которые хотят получать больше денег, но не хотят разбираться в бизнесе? Всё просто 2 • Что делать, если меня, технического директора, потихоньку отстраняют от дел? 1 • Как материально подготовиться к смене профессии? Как написать аккуратный код? Часть третья: заменяемость Не ухожу Вкачать щупальце Есть СТО, он классный, но при этом редко выходит в свет. Насколько, на твой взгляд, это может быть важно или полезно компании в целом? Вселенная в голове Как быть, если всё моё время уходит на разработку всё новых и новых фич? 1 • Книга под рукой Как написать аккуратный код? Часть вторая: связность 1 • Как написать аккуратный код? Часть первая: зацепление 3 • Почему лучше разделить фронтенд и бэкенд? 7 • Что показывает уровень развития инженерной культуры? 2 • Разработчик, который не думает, а просто делает — не нужен? 5 • Как следить за качеством кода? Часть третья: процессы 4 • Срочно оставить след 2 • Пароль на комп 4 • Как следить за качеством кода? Часть вторая: метрики Измерение себя Как следить за качеством кода? Часть первая: зачем Всё рядом Как быстро упорядочить хаос? 1 • Несколько месяцев назад меня повысили из обычного разработчика до «тимлида» 1 • Как правильно, эффективно и уважительно ставить KPI? Как находить время для публикации кейсов? 3 • Существует ли способ проверить компетентность веб-разработчика, если сам ничего не понимаешь в этом? Передать заказ и ничего не заработать? Как менеджеру ставить задачи, чтобы ротация в команде не заставляла пережёвывать все задачи устно по 100 раз? Что выбрать: беги или дерись? 1 • Тупые правила 10 • Где провести границу MVP? 1 • Как ослабить прокрастинацию? 2 • Как организовать работу удалённой команды разработчиков? Как перестать переделывать Как не путать маркеры 3 • Как донести подход HADI до руководства? 4 • Гугль-док, чтобы упорядочить командное обсуждение 1 • Как мотивировать своего начальника? Как резать фичи на основе экспериментов? 3 • Как найти себе замену 1 • Собственная база знаний 4 • Советы об управлении разработкой Люди допускают ошибки. В чём корень проблем? 2 • Как вылезти из технарей в управленцы? Что такое текущая инициатива? Как не тонуть в текучке и развивать проект? В бюро есть таймтрекинг для сотрудников? 5 • На мои письма очень неохотно отвечают 1 • Как формулировать цель спринта? 4 • Насколько точным должен быть распорядок дня? Как можно измерить уровень владения навыком? 2 • Что прочитать или как себя настроить, чтобы перейти от делания самому к делегированию? 1 • Как вы ведёте список дел? Есть ли инструмент для документации замечаний второй стороны переговоров? Как вы верифицируете оценку сроков от сотрудника? 1 • Как мотивировать без денег Как вы относитесь к программам слежения за экранами сотрудников? В процессе создания сайта клиент не даёт всей нужной информации для наполнения 1 • Принцип «Прямо сейчас» Вы не обязаны соглашаться 2 • Как вести документацию по дизайну Как флексить. Перенести на следующую итерацию 1 • Как флексить. Не выходить в надсистему В коллективе принято ставить разнообразную музыку в качестве рингтонов 4 • Если принимается решение флексить фичи, как вы поступаете с ними в дальнейшем? Подрядчик скрывает стадию готовности проекта Как флексить. Отступить от идеала 6 • Как защищать ОЧЕНЬ простые дизайнерские решения? 1 •

Как же мне сделать систему, удобную и понятную для конечного пользователя?

3 • Как флексить: сделать говно Как работать с классическими компаниями. Параллельная структура Как флексить. Заменить решение Как работать с классическими компаниями? Как работать с классическими компаниями? Как работать со слабомотивированными кадрами. Как мотивировать 1 • Как работать со слабомотивированными кадрами? Как флексить. Убрать в гаражик Как организовать личный рост? Часть вторая: иллюзия альпиниста Как организовать личный рост? 3 • Как флексить. Рассогласовать Как профессионально вырасти? Как вырасти профессионально? 2 • Кто клиент? 1 • Как сделать все дела за день? 2 • Как избавиться от авралов? Как одному человеку работать над несколькими проектами? Должен ли менеджер читать хотя бы по диагонали документы, которые он передаёт от исполнителя заказчику? Как флексить. Уменьшить глубину проработки Что делать, если нет идей для собственного сайта? 3 • Как флексить. Снизить управляемость Что отвечать на «А вот здесь что-то шрифт нечитабельный» 2 • Как флексить. Метод «Зафиксировать» Дизайнер — это булочник 3 • Как влезать на профессиональную территорию коллег, чтобы они видели в этом пользу, а не угрозу? 1 • Зачем сначала платить себе? Как справляться с желанием всё бросить 2 • Как не позволять музе влиять на дедлайны? Что делать дизайнеру сайтов, если он не умеет рисовать иконки? 4 • Как правильно реагировать на смешки? 6 • Что ещё нужно знать о «сделать»? У нас в студии разработан и активно используется движок сайтов 6 • Как получить результат в мире клиента? 3 • Как получить результат в мире клиента? 2 • Что такое результат? Что значит «сделать»? 1 • Как работать с разработчиками на стороне клиента? 3 • Как человеку, мечтающему стать бюрошником, поможет высшее образование? 13 • Как объяснить, что задача не стоит потраченного на неё времени? 1 • Николай, расскажите, как преодолеваете желание спать? 1 • Сделать не удаётся, должен ли клиент оплачивать это время? Как обсуждать личные планы, когда они идут вразрез с рабочими? 3 • Как в бюро подходят к вопросу времени на просмотр фильма или чтение книги Как ФФФ связан со скрамом? 2 • Как планировать время, когда дел очень много? 2 • Решение задачи любым подходящим способом. Получение результата волшебным образом 2 • Что делать с проектами «для себя»? 1 • Как сделать мнение дизайнера в компании более значимым? 2 • С чего начать работу над созданием сайта? 1 • Стоит ли клиенту учить дизайнера уму-разуму? 1 • Зачем редактору уметь всё? 1 • Хотим привлечь специалистов с опытом 2 • Хочется всё старое выбросить и сделать заново 2 • Часто слышу от разработчиков: «покажите пример» 6 • Как вы стимулируете соблюдение сроков вашими сотрудниками? 1 • Каждый тащит одеяло на себя, пытаясь убедить остальных работать в той или иной программе 5 • Как оценивать доработки после запуска? Как использовать ФФФ при создании визуальной части дизайна? 2 • Уговаривать отложить проект или вручить дизайнеру, чтоб хоть видимость работы была? Что делать, если заказчик не заказывает логотип или фирстиль, но он нужен? 2 • Задания описывает менеджер проекта, но совершенно безграмотно Как без глубоких знаний в дизайне выбрать хорошего дизайнера? 3 • Как настоять на обстоятельном обсуждении до начала работы? 3 • Можно ли применить принцип ФФФ для видео? 1 • Как мотивировать клиентов работать быстрее, если им «не горит»? О Скетче и Пиксельматоре 4 • Баги неконтролируемо увеличивают срок разработки 5 • С чего начинать разработку контента для сайта? 1 • Показывать цены на сайте или заманивать в офис продаж? 6 • Как помочь себе на этапе полировки деталей? Каким программным обеспечением вы пользуетесь, когда удалённо показываете работу заказчику? 1 • В прошлый раз вы разобрали лучшие работы второго набора в Школу стажёров. Как вам остальные? Как вам вступительные задания в Школу стажёров второго потока? 1 • Во всех организациях, где мне довелось работать, регулярно собирают деньги на дни рождения 8 • Как организовать превращение макета в продукт? 3 • Интересно узнать о разных способах «сделать» Как избежать простаивания сотрудников, когда не хватает заказов? Можно ли в 31 год начинать карьеру дизайнера с нуля? 10 • Задачи с несколькими решениями. Как выбирать? 3 • Как работать с дизайнером, который не справляется со своей основной задачей? 1 • Постоянно сыплются сообщения о багах 4 • Необходим ли эйчар в небольшой веб-студии? 1 • Как бороться с нехочухой? 3 • Клиент предлагает некомпетентные правки 3 • Как помочь начальнику научиться ставить задачи, если он не читает советы? 3 • Что такое «рисование в стол»? 1 • Что такое точка «невозврата»? 2 • Сколько времени занимает подготовка совета? 1 • Давайте соберём в одном посте студии и фрилансеров, которые работают по принципам ФФФ 48 • Как внедрять правила внутреннего распорядка? 1 • Как отразить в дизайнерском плане поддержку разработки? Как мотивировать членов команды работать над проектом вместе? 1 • Сколько проектов даётся в работу на одного дизайнера в бюро? 5 • Наиболее эффективный путь развития — узкая специализация, не правда ли? 3 • Как искать работников, если не разбираешься в тонкостях и тематике направления? 2 • Как правильно ставить задачу? 6 • Какую систему управления проектами вы используете? 19 • Идти полностью в руководство либо совмещать? Как вводить новых сотрудников в команду? Как вы поступаете, если спустя полгода клиент просит о доработках на сайте? Как из верстальщика вырастить суперзвезду? 2 • Как сделать так, чтобы сотрудники следовали внутренним стандартам? 1 • Что почитать по управлению проектами? 4 • Как в ФФФ снизить стоимость проекта, если клиент ограничен в бюджете? Что вы отвечаете заказчику, который делает много замечаний? 4 • Чем отличается классическая парадигма тасков от недельных итераций? 1 • 5 • Уместно ли тестирование на этапе, когда проект уже готов к запуску? 1 • Как правильно построить свой личный рабочий процесс? 1 • Как быть, если арт-директор не принимает обоснованное решение дизайнера? 5 • Как лучше всего составить ТЗ на сайт? 1 • Эффективно ли начинать этап программирования параллельно с этапом визуального дизайна? 1 • Дизайнер обижается на то, что арт-директор вносит правки в его работу перед сдачей 1 • Могли бы вы опубликовать вторую часть «экспресс-концепции», посвящённой организации проекта? Что должен содержать макет сайта, который передают на вёрстку? 11 • Как не утонуть, когда никто не показывает твои ошибки и не подталкивает на развитие? 3 • Как быть, когда хочется делать следующие доработки по новым знаниям, но и от стиля не хочется отклоняться? Есть 40—50 тыс. рублей на хороший сайт, как лучше их потратить? 5 • Как быть, если проектировщик, дизайнер или программист срывает сроки 4 • Поделитесь соображениями, как работать, путешествуя 8 • 1 • Как в бюро ставят задачи? 6 • Несмотря на то, что между нами была договорённость о работе по ФФФ, клиент был в бешенстве 5 • Надоело работать без сна и отдыха. Что посоветуете? 2 • Согласование замечаний Можно ли в договоре добавить пункт, что срок увеличивается пропорционально времени на согласование дизайна? 5 • Как вы объясняете и убеждаете заказчика в необходимости наполнения сайта «умелыми руками»? 3 • Как в бюро отвечают на вопросы «А почему ещё не готово?» и как борются со срывами сроков? 4 • Как вы в договоре описываете понятие ФФФ? 6 • До запуска проекта остаётся немного времени и этот человек, проанализировав рынок, принимает решение переработать полностью дизайн проекта 1 • С недавних пор у нас в студии появился менеджер проектов 7 • На веб-сервис заходит определённое количество потенциальных пользователей, разворачиваются и уходят Как реагировать на категорические заявления клиента о том, что авторский надзор и помощь наших программистов не нужны 2 • Артём, расскажите, как вы договариваетесь с заказчиками работать по флекс-скоупу? 13 • Как в больших студиях организована работа над проектами с точки зрения папок, файлов, серверов и т. д. 9 • Как рассчитывается бюджет проекта? 10 • Как вы оцениваете объём работ по будущему проектированию интерфейса? 8 • Когда работаешь над большим проектом, иногда вдруг понимаешь, что некоторые вещи надо было делать совсем по-другому 3 • Подскажите, при создании сайта что раньше должно быть — дизайн или программирование? 9 • 5 • 1 • 11 • Меня беспокоит проблема хранения, структуризации и передачи информации в рамках одного проекта 8 •

Дата‑классный пример: причины задержек в Нью-йоркском метро Диаграмма футбольных трансферов. Процесс 1 • 3 • 4 • 2 • Инфографика про губернаторов Иркутской области. Вторая часть 2 • 2 • 3 • Какие отступления от географической реальности допустимы на транспортных схемах? Первая часть 4 • 4 • 12 • 3 • 4 • 4 • 2 • 1 • Хочу сделать красивый блог с пошаговыми рецептами 7 • 4 • 3 • 3 • 4 • 1 • 1 • 6 • 2 • 5 • 4 • 6 • 2 • 3 • 2 • 2 • 13 • 4 • 3 • 4 • 6 • Есть 10 объектов, в каждом объекте 3 зоны, в каждой зоне 2-5 температурных датчиков 4 • 6 • 4 • 2 • 5 • 5 • 2 • 7 • 7 • 5 • 5 • 1 • Поскольку одни люди привыкли мерить время цифрами, а другие циферблатами, мне кажется разумной идея добавить в интерфейсы телефонов пиктограммы с часами 2 • 15 • 12 • 3 • 4 • 29 • 7 • 10 • Существует ли какая-то система нотации для моделирования пользовательского интерфейса, которая бы позволяла обозначать такие свойства элементов, как «резиновость», сохранение выравнивания по какой-либо оси? 10 • 7 • 7 • 11 • 4 • 1 • Что вы думаете насчет Google Chart API? 6 • 3 • 6 • 8 • 11 • 4 • 7 • 4 • 5 • 1 • 7 • 5 • 3 • 6 • 11 •

3 • 1 • Фиолетовый цвет в новом дизайне советов не уместен 1 • 1 • Куда поставить ссылку: на поля или в текст? 2 • 3 • Стоит ли использовать выворотку в вебе и полиграфии? 1 • 1 • 1 • Как расположить 30 видеороликов? 2 • 2 • 1 • 1 • 3 • 1 • Сайты для слабовидящих 2 • 1 • Как оформить портфолио маркетологу? 1 • 2 • 4 • 2 • 2 • 3 • 5 • 2 • 1 • 4 • 1 • 3 • Как правильно в мобильных приложениях ставить ссылки? 1 • 1 • 3 • 1 • 2 • 4 • 2 • 4 • 1 • 3 • 1 • 2 • 3 • 3 • 2 • 3 • 3 • 1 • 2 • 5 • 1 • 1 • 3 • 2 • 1 • 1 • 5 • 2 • 2 • Сдала курсач в Школе редакторов 5 • 8 • 1 • Инфографика про губернаторов Иркутской области. Вторая часть 2 • 4 • 3 • 5 • Нужно, чтобы эти элементы были на странице, но получается сумбур. Четвёртая часть 3 • Нужно, чтобы эти элементы были на странице, но получается сумбур. Третья часть 1 • Нужно, чтобы эти элементы были на странице, но получается сумбур. Вторая часть 1 • 1 • При создании макета сайта зарылся в детали и упустил самое главное. Третья часть 5 • При создании макета сайта зарылся в детали и упустил самое главное. Вторая часть 4 • Как сделать, чтобы человек не ушёл с сайта, докрутив страницу до конца? 1 • 3 • 4 • 4 • 2 • 2 • 2 • 3 • 9 • Интернет-магазин принудительно отправляет пользователя в корзину с формой оформления товара 7 • Расскажите об ушках, цитатах и фактоидах 1 • Как верстать текстовые блоки с иллюстрациями? 2 • 7 • Что нужно знать о подписях в вёрстке? 2 • Как работают элементы управления в вёрстке 3 • 8 • 9 • 12 • Зачем нужны страницы «О компании» и «Команда». 2 • Что должен знать дизайнер об интерлиньяжах, полях, отступах, кеглях, выравниваниях и модульных сетках? 9 • Как лучше всего решить эту задачу, если текст нужно разделить на анонс и основной текст? 2 • 1 • Я не понимаю, как должен быть устроен мир — в смысле сохранения предпочтений 2 • 4 • 1 • 4 • Занимаюсь разработкой интерфейса веб-приложения, в некоторых местах надо показать числовой коэффициент 3 • За какими вещами нужно следить, чтобы при загрузке страница выглядела прилично? 1 • С чего начать изучение ЦСС? 1 • Как сделать, чтобы блок при прокрутке залипал у верхней границы окна браузера? 5 • 10 • Можно ли заверстать несколько разноширинных элементов через равные промежутки в резиновом контейнере? 1 • Как быстро придумать простой логотип для своего сайта? 1 • 3 • Чем отличается блог с комментариями от блога с отключенными комментариями? 3 • Удачное ли решение на сайте в поле пароля указывать, что нажат капслок, как на Маке? 6 • 8 • 6 • 3 • 9 • 11 • 3 • Как поступить правильно по отношению к читателю и поисковикам? 7 • Карусели и слайдеры 10 • 5 • 3 • 2 • 4 • Как вы храните данные для многоязычных сайтов? 3 • 4 • Что делать, если он совершил какие-то действия, а после этого заходит в свой профиль, где уже есть сохранённые данные? 5 • 5 • 2 • 3 • Как правильно сделать подчёркивание многострочного текста, чтобы линия была в три пикселя? 1 • 5 • 4 • Каким способом можно сделать загрузку кастомных шрифтов приятной? 6 • Артём, объясните, пожалуйста, в чём преимущество div перед table 5 • 5 • 5 • 8 • Как размыть объект? 2 • Как выровнять картинку внутри дива по центру, если её ширина больше ширины дива? 4 • Как правильно разделять разряды чисел? 4 • 6 • Артём, как вы подключаете стили для ИЕ? 3 • 7 • 2 • 7 • Стоит ли наращивать вложенность тегов для структурированности кода? 6 • Хочу сделать смену языка на сайте без перезагрузки страницы (и без аякса) 5 • Как на сайте бюро реализована разрядка у прописных букв? 5 • 14 • 4 • Хотим переделать свой и-магазин пиротехники 3 • Действительно ли необходимо цитаты внутри предложения заключать в тег q? 2 • Год назад запустил личный проект «Либретто опер» 2 • Расскажите, пожалуйста, о типах индикаторов загрузки 13 • 1 • Чем обосновано дублирование основного меню в «подвале»? 4 • Необходимо разработать интернет-магазин китайского чая 2 • Хочется, чтобы много красивых картинок на сайте быстро загружались 14 • 5 • В каких единицах стоит задавать размеры шрифта? 8 • 1 • Используете ли вы готовые ЦМС? 3 • 1 • 3 • Как правильно делать подчёркивание ссылок другим цветом? 6 • 1 • 5 • Как в ЦСС работать с родителями? 3 • 2 • Веб-студия рисует дизайн сайта и для выпадающего меню упорно делает пунктирную ссылку 4 • Как вы относитесь к «отложенным товарам» в интернет-магазинах? 3 • 1 • Как верстать ссылки вида http://site.ru/#news, чтобы при нажатии на них сайт не загружался заново? 2 • 16 • Как вы обходитесь без проверки на робота? 8 • 4 • 9 • 2 • 4 • Проблема в том, что ширина таблиц зависит от контента 5 • 2 • 5 • 3 • Как бы вы расставили ссылки в этих новостях с сайта glavbukh.ru? 1 • 1 • Клиент настаивает на длинных-длинных страницах текста в десятки экранов 4 • 2 • 1 • 3 • 5 • Какой делать фавыконку сайта: просто 16×16 или содержащую в себе разные размеры? 10 • 3 • 4 • 2 • 3 • 3 • 7 • 1 • Есть ли какие-то простые, самые базовые принципы по подбору цветовых схем для сайта? 3 • 6 • Без продвижения в поисковиках мы завтра же закроемся 2 • 3 • 1 • 7 • 2 • Дизайнер старательно вырисовывает в макете кнопку, похожую на его любимую в его ОС 4 • 3 • 1 • 4 • 5 • Есть форма, и есть поле ввода, куда пользователь вводит контактный телефон 3 • 2 • 4 • Сейчас хотя бы уж Джаваскрипт работает у всех? 7 • Как писать цены по-английски? 1 • 4 • 5 • 3 • 6 • 2 • 4 • Иногда люди, когда пытаются оценить, насколько выгодно расположены элементы на форме, рисуют линию, по которой якобы глаз скользит 2 • 5 • 2 • Раз уж интерфейс — зло, нужна ли вообще интернет-магазину корзина? 7 • 5 • 4 • 5 • 10 • 6 • 4 • 1 • Собираем и наполняем сайт одному дилеру известной автомобильной марки по гайдлайнам представительства 1 • 1 • 5 • 3 • 2 • 5 • 6 • Хозяин конторы принимает все решения относительно любого дизайна и вообще 3 • 3 • У меня с коллегой возник спор относительно того, какой элемент интерфейса нужно использовать для разлогинивания пользователя в интернете 7 • 6 • Какой должна быть вёрстка сайта — резиновой или фиксированной? 4 • 5 • 7 • 5 • Поскольку мне никто ничего не написал, пообщаюсь сам с собой 5 • 3 • 1 • Подскажите, пожалуйста, как правильно называть header и footer на сайтах по-русски? 1 • 3 • Я вот заметил, что на некоторых сайтах стали использовать статические баннеры 4 • 6 • 4 • 5 • Как вы относитесь к ссылке «наверх»? 12 • 3 • 4 • 5 • Если пользователь при авторизации на сайте трижды неправильно ввёл пароль, то на его электронную почту автоматически высылается письмо с ссылкой на восстановление 5 • 5 • Скажите, как отучить дизайнера лезть в код? 4 • 10 • Имеет ли смысл ставить кнопку «купить» в списке продуктов в интернет-магазинах? 22 • 3 • Зачем формы авторизации часто делают во всплывающих лайтбоксах 2 • Клиент хочет на сайте цветок. Железно 4 • 6 • Когда пользователь нажимает «Скачать файл», у него не открывается новое окно или же вкладка. Значит, ссылку на скачивание тоже надо подчёркивать пунктиром? 3 • 1 • 3 • 5 • 4 • Артём, пытаюсь не допустить настойчивого предложения сделать выключку текста по ширине в вебе 10 • 11 • 8 • 5 • Заметил, что в Советах вы часто используете капитель 3 • 7 • В каком лице формулировать ссылки и баблы на сайте? 5 • При запросе восстановления пароля сайты высылают подтверждение, при нажатии на ссылку генерируется новый пароль и высылается второе письмо 7 • Стоит ли обозначать ссылки, которые что либо меняют простым наведением курсора, волнистой линией? 5 • 3 • 4 • 4 • 17 • 14 • 6 • Что вы думаете по поводу наличия пункта «главная страница» в основном меню сайта? 9 • 4 • 1 • 5 • 2 • 6 • Почему у вас на сайтах везде используется английский перевод в урл, а в блоге — транслит? 6 • 5 • 5 • 8 • 2 • 5 • 1 • 4 • 4 • 7 • 10 • 7 • 6 • 1 • 10 • 2 • 6 • 3 • 5 • 5 • 6 • Почему бы не отвести часть правой стороны экрана под корзину? 13 • 5 • 8 • 3 • Как вы относитесь к новому формату форумов — вопросных систем? 3 • Артём, стоит ли учитывать различие регистров букв в адресах страниц? 11 • 2 • 2 • 7 • 8 • 4 • 13 • 12 • 6 • 5 • 2 • 19 • 4 • 2 • 7 • 4 • 3 • 7 • У меня есть сайт о Джумле 4 • 13 • 1 • 23 • Хотелось бы узнать ваше мнение о правиле «главная страница сайта должна умещаться на одном-двух экранах монитора» 3 • 5 • 10 • 9 • 4 • 2 • 2 • 1 • 7 • 4 • 7 • 3 • 5 • 9 • 2 • Что скажете о работе «Информационных архитекторов»? 1 • 6 • 5 • 3 • 2 • Хотелось бы услышать советы по минималистическому дизайну и по дизайну интернет-магазинов 5 • Почему на artgorbunov.ru курсор над горизонтальным скроллбаром имеет вид «движение во все стороны»? 8 • 12 • Подскажите, при создании сайта что раньше должно быть — дизайн или программирование? 9 • 3 • 13 • 6 • 2 • Как вы относитесь к иконке RSS? 8 • 1 • 4 • 3 • 2 • 3 • 5 • 8 • 1 • 9 • 8 • 8 • 6 • 4 • 11 • Для чего нужна висячая пунктуация в вебе? 6 • 4 • 7 • 3 • 11 • 6 • 1 • Шесть тезисов об идеальной электронной книге 12 • 1 • 22 • 6 • 2 • 23 • 9 • 12 • 15 • 3 • 4 • Довольно часто веб-страница должна содержать заведомо большое количество информации 2 • 1 • 9 • 6 • Как вы считаете, стоит ли причислять смайлы к знакам пунктуации? 6 • 1 • 5 • 12 • 2 • 1 • 7 • 8 • 10 • 5 • Делаем открытый сервис «Сколько стоит хороший сайт?» 7 • 10 • 12 • 3 • 6 • 9 • 29 • 7 • 7 • 9 • Существует ли какая-то система нотации для моделирования пользовательского интерфейса, которая бы позволяла обозначать такие свойства элементов, как «резиновость», сохранение выравнивания по какой-либо оси? 10 • 7 • 9 • 12 • 10 • 7 • 12 • 13 • 7 • 16 • 8 • Как можно указать, что все это — PDF, не ставя иконку у каждой ссылки или просто подпись? 7 • 8 • 11 • Какое, по вашему мнению, самое лучшее решение для страницы faq? 7 • 8 • 22 • 7 • 4 • 8 • 6 • 8 • 3 • 9 • 4 • 4 • 10 • Есть ли смысл оформлять подчеркиванием все ссылки вне основного текста? 16 • 20 • Сет Годин только что опубликовал ссылку на результаты исследования движения глаз во время просмотра информации 5 • 7 • 6 • 15 • 1 • 3 • Что вы думаете насчет Google Chart API? 6 • 4 • 6 • 3 • 3 • Стоит ли при проектировании интерфейса опираться на вариант, что в будущем размеры экранов будут продолжать расти? 4 • 10 • 3 • 11 • 14 • 10 • 11 • 6 • 8 • 7 • 15 • 11 • 11 • 4 • 8 • 11 • 1 • 2 • Что изображать на инфоскроллере, чтобы он был действительно информативным? 7 • 2 • 8 • 15 • 7 • 4 • 4 • 9 • 5 • 4 • 11 • 1 • 7 • 3 • 15 • 12 • 9 • 4 • 12 • 17 • Все почтовые программы делятся на два класса: а-ля веб и а-ля десктоп-приложение 6 • 4 • 12 • Оправдана ли замена слова в меню или тексте на его синоним, если это исключает возможные ошибки при чтении? 17 • 15 • Сначала я думал, что 12 пунктов — это, может быть, 12 пикселей, но не так все просто 8 • 11 • 3 • 2 • 23 • 11 •

4 • 3 • Как правильно в мобильных приложениях ставить ссылки? 1 • 1 • 2 • 1 • Я не понимаю, как должен быть устроен мир — в смысле сохранения предпочтений 2 • 3 • 5 • 2 • Как вы относитесь к иннициативе Микрософта по выводу ИЕ 6 с рынка? 3 • 1 • Расскажите, пожалуйста, о типах индикаторов загрузки 13 • 15 • 5 • 4 • Почему на Айфоне при нажатии шифта не меняется регистр на самой клавиатуре? 7 • Где должна быть настройка программ на Ай-ОСе 4 • Некоторый механизм управляется с планшета с тач-интерфейсом 7 • 4 • 7 • Иногда люди, когда пытаются оценить, насколько выгодно расположены элементы на форме, рисуют линию, по которой якобы глаз скользит 2 • 19 • 19 • 7 • Печатаю я текст и вдруг обнаруживаю, что делаю это в неправильной раскладке 10 • 4 • 7 • 2 • 8 • 2 • 9 • 10 • 7 • А вот в чём вы делаете макеты интерфейсов? 19 • 11 • 15 • 11 • 13 • 7 • 2 • 5 • 22 • 10 • 3 • 2 • 4 • 5 • 1 • 23 • 10 • В своей книге Алан Купер неодобрительно высказывается о таком явлении, как файловая система в компьютерах 24 • 7 • 9 • 21 • 4 • 11 • 7 • 6 • 3 • 16 • Стоит ли при проектировании интерфейса опираться на вариант, что в будущем размеры экранов будут продолжать расти? 4 • 8 • 7 • 9 • 7 • 16 • 9 • Все почтовые программы делятся на два класса: а-ля веб и а-ля десктоп-приложение 6 • 8 • 5 • Оправдана ли замена слова в меню или тексте на его синоним, если это исключает возможные ошибки при чтении? 17 • 20 • 23 •

2 • 3 • 6 • 4 • Как сделать крутой плакат, в котором сообщается о скидке на товар в новом дизайне? 1 • Стоит ли использовать выворотку в вебе и полиграфии? 1 • 4 • 2 • 9 • 5 • 3 • 9 • 5 • 3 • 1 • 1 • 4 • 3 • 9 • 2 • У меня афиша. Не знаю, как улучшить. Беспокоит пустое пространство слева 2 • 1 • На основе ролика о распознавании инсульта создан плакат. Вторая часть 1 • 4 • 3 • 2 • 5 • 5 • 3 • 2 • 2 • 1 • 2 • 7 • 2 • 4 • Делаю визитку для хозяина автомастерской. Вторая часть 6 • 4 • Что-то можно улучшить? Или всё хорошо? Вторая часть 4 • 3 • 1 • 6 • Инфографика про губернаторов Иркутской области. Вторая часть 2 • Может быть такое выравнивание или это грубая ошибка? Третья часть 3 • Может быть такое выравнивание или это грубая ошибка? Вторая часть 3 • 7 • 2 • 4 • Что может сделать редактор со своим текстом с точки зрения вёрстки? 8 • 2 • 6 • 4 • 12 • 2 • Как, по-вашему, должны выглядеть современные руководства по фирстилю и брендбуки? 2 • 4 • 16 • Максим, посоветуйте книги 4 • 2 • 2 • 6 • 3 • 1 • 1 • 7 • 1 • 1 • Как писать цены по-английски? 1 • Иногда люди, когда пытаются оценить, насколько выгодно расположены элементы на форме, рисуют линию, по которой якобы глаз скользит 2 • 1 • 8 • 6 • 11 • 5 • 3 • У меня вопросы по матчасти 5 • 5 • Поскольку мне никто ничего не написал, пообщаюсь сам с собой 5 • «В. И. Ленин» или «Ленин В. И.»? 4 • 1 • 14 • 2 • 3 • 3 • 13 • 3 • 12 • 4 • 1 • Я перевожу книгу Эдварда Тафти «Envisioning Information» 12 • 1 • 2 • 6 • 3 • 4 • 4 • 12 • 2 • 4 • 10 • 5 • 4 • 4 • 2 • 7 • Хотел бы узнать ваше мнение по поводу размещения двух логотипов на визитке 3 • Как вы считаете, стоит ли причислять смайлы к знакам пунктуации? 6 • 15 • 10 • 13 • 3 • 3 • Банальное перечисление языков через запятую не подходит, работодателя интересует уровень владения каждым из языков. 12 • 29 • 10 • Огромными буквами название (например «Аленький цветочек») и ниже в 3-5 раз меньшим шрифтом суть этого магазина — «продуктовый», «одежда» и так далее 14 • 7 • 16 • 16 • 2 • 4 • 12 • 13 • 15 • 21 • 8 • 4 • 4 • 4 • 6 • 5 • 13 •

Недавно всплыло

Выбранные элементы списка, как не забывать принципы из советов бюро и когда нужен логотип 1 • О тексте как базовом элементе 6 • 1 • Правдивость 3 •

Комментарии

Ваш комментарий

Недавно всплыло