Пользователь
0,0
рейтинг
28 января 2009 в 17:09

Дизайн → Памятка дизайнеру сайтов

Вторая версия статьи, расширенная и дополненая.

Большая часть готовилась для моего выступления на «РИТ: Клиентские технологии», куда я, к сожалению, не доехал.

 

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

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

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



Вначале думаем, потом делаем


Это очень простое и часто нарушаемое правило. Особенно молодыми дизайнерами.

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

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

Вначале думаем, потом делаем
Пример быстрого наброска и полученного результата

От большего к меньшему, от общего к частному


Это второе простое правило. И оно также часто нарушается.

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

Это правило целиком применимо ко всем аспектам и жанрам дизайна.

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

Пример пошагового уточнения и доработки макета
Пример пошагового уточнения и доработки макета от общего к частному.

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

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

Итак, подытожим: «От большего к меньшему, от общего к частному».

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


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

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

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

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

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

Масштабируемость


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

Отображение эластичного сайта на различных мониторах
Отображение эластичного сайта на различных мониторах

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


«Сжатие-растяжение»


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

min


Первое, с чего нужно начать — это найти минимальное сжатие сайта.

Минимальная ширина сайта, безусловно, определяется задачами сайта и его целевой аудиторией. Фактически сейчас есть только два минимальных параметра: 760 px и 990 px. Первый оптимален для корпоративных сайтов либо ресурсов, рассчитанных на самую массовую и разношерстную аудиторию (например, массовые сервисы: почтовые, поисковые, новостные и т.п.). Второй подходит для сайтов имиджевого и промоушен назначения.

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

max


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

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

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

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

Запас на рост сайта


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

Поэтому:

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

Пример «безболезненного» изменения/добавления 
древовидной навигации первого и второго уровня
Пример «безболезненного» изменения/добавления древовидной навигации первого и второго уровня

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

Пример «безболезненного» перемещения, 
изменения/удаления блоков сайта
Пример «безболезненного» перемещения,
изменения/удаления блоков сайта


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

Шрифтовая схема


Большая часть сайтов смотрится цельно и завершенно при построении дизайна на основе одного-трех шрифтов.

Базовый шрифт  — основной шрифт материалов сайта.

Акцидентный — шрифт для заголовков.

В некоторых случаях вводятся дополнительные шрифты для:
  • меню и навигации;
  • блоков выделения (важной информации, цитат, выносок);
  • для мелкого текста, с целью повысить читабельность.


Дизайнер должен спланировать единую общую схему размеров отступов/заступов для всех элементов на сайте, иерархию заголовков и навигационных элементов (например, для древовидного меню или облака тегов). Она должна быть цельной и использоваться на всех страницах сайта.

Всё последующее оформление информации на сайте должно строится на базе общей схемы.

Шрифтовая схема на примере сайта ValueTech
Шрифтовая схема простого корпоративного сайта

Реакция на пользователя


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

Рассмотрим типичные элементы.

Навигация


Фрагмент макета сайта, на котором показаны три состояния навигации
Фрагмент макета сайта, на котором показаны три состояния навигации: обычный вид меню, пункт меню при наведенном курсоре, выделение текущего раздела.

В зависимости от типа и масштабности сайта, нужно показать ряд состояний пункта навигации.

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


При этом минимальный набор для всех элементов навигации, включая переключатели и элементы управления — это нормальный и активный вид. Т.е. минимум, для всех управляющих и навигационных элементов это — «вкл./выкл.».

Различные состояния элемента навигации
Различные состояния элемента навигации

Ссылки


Ссылки, расположенные в тексте, всегда подчеркнуты и должны отличаться по цвету от основного текста.

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

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

Ссылки с дополнтельными свойствами


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

Таких иконок требуют ссылки:
  • альтернативное получение данных (RSS, PDA, версия для печати)
  • скачивание файлов, расположенных на сервере
  • обращение к популярным ресурсам (Яндекс, Google, Flickr, LJ, картографические сервисы, Википедия и т.п.)
  • e-mail адресов
  • открытие форм
  • открытие ссылки в новом окне


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

Псевдо-ссылки


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

Пример использования псевдоссылок
Один из примеров использования псевдоссылок.

Табы


Табы — это некоторая смесь элемента навигации и элемента управления.

Для них учитываем состояния:
  • таб неактивен
  • наведен курсор (opt)
  • загрузчик содержания (opt)
  • таб активен


Фрагмент сайта, на котором видны сразу три состояния табов.
Фрагмент сайта, на котором видны сразу три состояния табов: активный таб, наведен курсор и обычное, неактивное, состояние.

Курсор


Предусматриваем реакцию курсора при наведении. Особенно, если речь идет о нестандартных элементах управления, таких как навигация, псевдо-ссылки и табы (hand), подсказки (help), изменение размера элемента и перетаскивание.

Оформление содержания


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

Именно изучая информацию пользователь проводит самую большую часть своего времени на сайте. И именно по этой причине нужно уделить оформлению содержания должное внимание.

Задачи сайта и его содержание всегда разное. Поэтому оформлять это содержание также всегда нужно по разному.

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

Элементы содержания


Сразу нужно сказать, что предусмотреть заранее все возможные варианты оформления нельзя. Мы рассмотрим лишь типичные.

Например, для корпоративного сайта:
  • абзац текста;
  • иерархия заголовков трех-четырех уровней;
  • ссылки, псевдо-ссылки;
  • элемент выделения важной информации;
  • цитата;
  • ненумерованный список;
  • нумерованный список;
  • вложенные списки;
  • иллюстрация на полосу, в текст;
  • таблица или несколько их типов;
  • файлы для скачивания;
  • выноски;
  • оформление маргиналий, если такие используются;
  • подача информации в 2–3 колонки (зависит от сетки);
  • простая форма.


Рыба


Рыба

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

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

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

P.S.


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

 

Об авторе


Павел Колодяжный. Арт-директор и основатель дизайн-бюро «make».
Специализируется на разработке интернет-сайтов и проектировании интерфейсов.
Общий стаж в дизайне — 9 лет. Как автор и со-автор причастен к появлению на свет более сотни сайтов и около трех десятков интерфейсов. Среди работ есть проекты для таких компаний, как Sunbay Software, Space Andventures, Pulsar Software Systems, Canon Inc., Yandex, Yamaha Motors. Не смотря на прежние достижения считает, что самые интересные проекты еще впереди.

 

Благодарности


Всем моим коллегам и сотрудникам, так как все примеры это фрагменты работ нашего бюро.
Евгению Чепорову, который подтолкнул меня к созданию статьи.
Владу Денисову, который помогал мне с иллюстративными примерами.

Ярославу Трофимову (из Inspire) за советы и конструктивную критику текстов.

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

Всем пользователям Живого Журнала и Хабрахабра, за комментарии, отзывы и вопросы, благодаря которым я доработал и расширил этот материал.
Павел Колодяжный @iderins
карма
139,3
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Дизайн

Комментарии (229)

  • +9
    спасибо
    • НЛО прилетело и опубликовало эту надпись здесь
      • 0
        Согласен. Отличный материал.
  • +7
    Отличная статья.
    В принцепи ничего нового — но все перечиаленно в одном месте — удобно.
    Спасибо.
  • +14
    Прочитав это руководство, я почерпнул для себя гораздо больше практических приемов, чем в ководстве сами знаете кого. Спасибо.
    • +18
      Сами знаете кто писал в предисловии что ководство не содержит практических приемов, а только лишь пищу для ума. Если он есть конечно же ((:
    • +3
      Ну, переплюнуть Ководство я цели не ставил =)
      Но приятно слышать, что понравилось.
      • +1
        Вы забыли о главном:

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

        Очень, очень плохо.

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

        А всего-то надо — подумать.»

        Рома Воронежский «Про ластики». www.narisoval.ru/faq/lastiki.html
        • 0
          Отличный текст.

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

          А «зачем» это куда более обширная тема. Так сказать выход на следующий качественный уровень.
          Многим не хватает даже перечисленного в статье.
      • –4
        Сейчас мастеру надоем указкой по рукам. ;)
        Статья хорошая.

        Но я все равно не понимаю, как:
        На сайте www.make.com.ua/light/
        >Безусловно, что мы сможем провести весь комплекс работ: проектирование удобного дизайна, разработку зрелищного оформления, xhtml-верстку

        54 Errors, 50 warning(s)

        Из-за чего у меня в FF 3.0 страница «расползлась» как могла. 3-я колонка видна наполовину и без горизонтального скролинга.

        Как вы с yandex-ом работали? У него ошибок нет ;)
        • –4
          После такого, как-то и статье не особо доверяешь ;)
          • –3
            А при чем тут html-верстка, в принципе?

            Как это касается смысла статьи?

            Да и как это касается временной заглушки на нашем сайте, тоже.
            Заглушка, по определению, делается быстро и просто.
            • +1
              Я тоже не могу понять вас ;) (как менеджер)

              Какая политика компании.

              Вы делаете сайты для клиентов, соблюдая стандарты w3 и тут же для себя делаете заглушку с полностью противоположной «работой» политике компании.
            • 0
              пишу с уважением к автору.

              посмотрев на упомянутый сайт — просто, без валидации, понял, что будь я заказчиком хоть капельку разбирающимся в верстке (ну или просто имеющим здравый смысл), не обратился бы в контору, имеющую такой сайт, как www.make.com.ua/light/ (см. колонки текста в правой части страницы)

              смысла статьи это касается, на мой взгляд, напрямую: статья посвящена принципам разумного дизайна страниц, автор претендует на профессионализм, а сайт конторы, на который дана ссылка, не вызывает ощущение профессионализма (по крайней мере, верстальщика и принимавшего верстку).

              то есть, нарушен пункт статьи о разрешениях экранов — не продумано отображение материала на типичных разрешениях. (у меня на 1280* возникли вопросы, но куда важнее, на типичнейшем и дико распространенном 1024* ситуация с версткой имеет те же проблемы).
              что думает пользователь, видящий «съеденную» правую колонку при отсутствии горизонтальной прокрутки? лично мне пришло в голову только чукотское «баг, однако», после чего я с большим трудом поборол желание закрыть страницу и никогда на нее не возвращаться.

              хочу, так же, уточнить:
              1. почему горизонтальные размеры лучше указывать в процентах, а не в em?
              2. откуда взят постулат о пунктирном подчеркивании? (это удобно и логично, просто раньше не встречалось мне)
              3. зачем на www.make.com.ua/light/ проигнорирован постулат о необходимости цветового выделения ссылок и ряд других постулатов, описанных в статье?
              • 0
                Как сказал автор — это «заглушка» :)
                Я считаю, что даже заглушка своего «лица», должна быть технически и технологически идеальна. :) Можно даже «без дизайна» вообще.

                Кстати акцент заглушки как раз на технологический дизайн был сделан.
            • 0
              Вот к примеру политика Лебедева: лучший валидатор — браузер (это его имхо)
              Спорить не буду.
              Просто потом интересно наблюдать за новыми работами. То там «полезло», то там. В «скорости» ошибки убираются, но если бы изначально политика компании была поставлена правильно, я думаю такого не было бы.

              Лебедев всегда повторяет — да у нас дизайн классный (спорить тоже не буду). Съедят и так.
              А выходит, не все едят. Потом уходят Нокиа и т.п. В недоумении он пишет — да пошли все на йюг, они не понимают мастера. :)
              Я не хочу язвить, я выражаю свою точку зрения с точки зрения менеджмента. Чтобы никто не наступал потом на те же грабли.
        • 0
          Про 3-я колонку :) понял. Это уже вопрос к юзабилити оказался :)
          Но все равно не снимает ответственности за 54 ошибки :)
          • –4
            Кстати Лебедев вставляет свой «скроллинг» (js) и имхо он прав в этом отношении.
            Прочитав эту статью, я понял, что это недоработка «юзабилити» ;)
            • 0
              Я не расшифровал этот смысл.

              1
              При чем тут лебедев и его скроллинг?

              2
              Как это связано со статьей?
              • 0
                В статье был тезис про юзабилити.
                Если вы называете сайт компании «заглушкой», то можно не обращать внимание.

                И вообще, я часто не понимаю. Очень много дизайн студий просто плюют на свои сайты. Не понятно. Я понимаю, клиенты понятие не имеют про юзабилити, w3 и т.п. Но это все же «лицо» компании ;) хоть и «заглушка».
      • –5
        Может уберете ошибки с сайта, там работы на 5 минут ;)
        Ведь например работы из портфолио без ошибок ;) (или почти без ошибок)
        • 0
          Зачем?

          Эта заглушка выполняет свою функцию, переделывать её нужно.
          Не не саму её, а запускать нормальный сайт.
          • 0
            Странно, вы говорите, что хорошо относитесь к критике.
            А исправить несколько ошибок не хотите?

            Знаете, даже заглушку надо делать «показательно». Вы не согласны?
            Спустя рукава ;)?
            Вы же претендуете на серьезность. Тогда любую работу надо делать «показательно» и на 100%

            Там «переделать» (исправить) на 10 минут работы.

            P.S. Не вам. Тем кто поставили минусы. Очень часто все разглагольствуют по поводу опечаток и ошибок и… «минусуют», когда обращают внимание на ошибки «в стандартах».
            Извините, но это какое-то лицемерие.
            Если уж грамотность то везде ;)
    • +1
      Правильно. Без прописных истин (правил, которые описаны в статье автора) не возможно понять другие (правила, которые описывает Артемий Лебедев). В добавок, ководство в общем о дизайне, а не только о веб-дизайне.

      Простым языком: вы подчеркнули больше, потому что знали меньше. Всё в мире относительно.
  • +5
    Карандаш — лучший друг web-дизайнера!
    • +19
      Голова и руки — лучший друг веб-дизайнера!
      • +3
        Сто процентов.

        Но я говорил о способе фикцации идей ) а не о их генереции.
      • –1
        Ага, главное голова, это не то что в армии «Лопата — друг солдата».
      • 0
        то же самое можно сказать о практически любо профессии
        • 0
          100%
    • 0
      Планшет :-)
    • 0
      Фотошоп :)
      • +2
        Это всего лишь инструмент )
        • +1
          Как и голова, руки и т.д. :)
          • 0
            Ну, голова первичнее фотошопа.
            Фотошоп инструмент головы =)
            • 0
              однозначно. но для художника даже не голова, а виденье. то что другие не замечают между суетой, а внутренне чего то хочется. вот дизайнер и вытаскивает наружу, что хочется внутренне. одним словом угол зрения, подход и отсутствие звездной болезни — вот слагаемые успешной работы дизайнера.
              а фотошоп или поинт — это дело десятое.
              полагаю сайт должен быть «мягким» и не агрессивным. тогда пользователю хочется задержаться немного. а там уже начинается шнырье по страницам и находжение изюминок или мин, которые должны быть на каждой странице.
              • 0
                Все верно.

                За исключением того, что дизайнер — ни в коем случае не художник.
              • 0
                дизайнеру нужна голова, чтобы не зазнаваться) как и всем, вобщем-то
            • 0
              И эстетичнее))
            • 0
              Поправлю, головой многие кирпичи бьют. Скорее разум.
              Хотя про инструменты тоже не мешало бы, например в другой статье, рассказать людям. ;)
          • 0
            Инструментом должно чем-то пользоваться, чем вы будете пользовать мозг?)
            • 0
              Тут целая взаимосвязь, не раскрывать же образ до последней ступени взаимодействия с сигналами мозга.
              Точно без физического вмешательства :)
              • 0
                Ложкой, ложкой его, после варки… :)
  • 0
    Молодчина.
    Глубоко!
    • +1
      Не знаю на сколько глубоко.
      Материал можно было бы серьезно расширить, что и планирую.

      Но приятно услышать, что понравилось =)
  • 0
    Спасибо за отличную статью.
  • 0
    Несмотря на конъюнктурно-унылое название статья оказалось на удивление толковой. Обычно такие названия дают своим блогопостам вчерашние нубы, а в нашем случае автор настоящий профи. Целая лекция, есть на что опереться при обучении новичков. Спасибо.
  • 0
    Вот это суперпупер круто! По-другому и не скажешь. Полезно будет многим абсолютно точно.
  • 0
    В избранное.
  • 0
    Для меня в закладки)
  • 0
    Все подробно описано. Автору спасибо!
  • 0
    Всё по теме и приятно читать! Спасибо. Особенно понравилось про рыбу, даже не замечал раньше. Всё врем этот Lorem Ispum…
  • 0
    В принципе ничего нового, но приятно когда всё одним «пучком» и доступно для каждого!
    Респект!
  • 0
    Молоток Паш, хорошо изложил, для новичков — отличное руководство.
    Берись за продолжение :)
    • 0
      Спасибо.

      На самом деле это только завершенная часть.
      Еще многое в черновом виде.

      Что-то нужно написать, что-то в черновом, а что-то расширить.
  • НЛО прилетело и опубликовало эту надпись здесь
  • +1
    знаете дал бы миллион плюсов за этот пост, думаю так и без меня сделают. Лично я с огромной радостью передам этот материал своим дизайнерам ибо актуально до жути
    • 0
      Спасибо =)
      Приятно, что кому-то нравится и полезно.
  • +5
    Эта заметка — отличный пример того как надо оформлять статьи на habrе
    • 0
      Спасибо.
      На самом деле, Хабр, накладывает ограничения на внешний вид, и статья всё равно выглядить не так, как писалась.
  • 0
    Недопечатка в фамилии «Деисову» =)
    А статья отличная!
    • +1
      Спасибо, поправил, а то Влад обидится )
  • 0
    Хорошая памятка. Большую часть делаешь по наитию, однако, когда это написано на бумаге/экране или попросту озвучено — легче воспринимается.
    • 0
      100%
      Для того и сделано, чтобы мозг разгрузить.
  • +2
    На самом деле все верно, все четко. При этом нет «дешевого пафоса Ководства». Мне, как руководителю отдела разработки в веб студии, очень понравилось. Хочется заставить читать своих дизайнеров. И еще ъочется узнать, как Вы своих заставляете рисовать от «общего к частному» — поделитесь!

    Спасибо Павел! + Вам и статье.

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

    • +1
      Если Вы считаете что большинство мелочей не упомянутых в этой статье является актуальным дополнением общей картины?!
      Для Вас есть отличный повод продолжить данную статью. :)
      • +1
        Ох! Давно мечтаю найти в себе силы и время. От идей ПРЕТ! Можно книгу написать)
        • +1
          Я искренне понимаю Вас :)))
          • 0
            Это приятно! Черт побери!
            Жаль только что не все из нас писатели или хоть мало-мальски адекватные блоггеры..)
    • 0
      Приятно слышать.
      Особенно от коллеги.

      А «Ководство», это всё-таки другая история, imho.
      • 0
        Согласен. Цели иные)
    • +1
      Расширять статью, конечно, есть куда. Что я и планирую сделать.

      А как заставляю? Да в прямом смысле затавляю =) точнее ону уже сами привыкли.

      Приходит заказ, совещаемся, анализируем, берем бумагу, портим её, пока не найдем решение, приступаем к рисованию.
      Обычный процесс.
      • 0
        Бумагу мы тоже портим :) Вот только в основном Идеей, Концепцией, Сценарием. До сетки как-то не доходит…
    • 0
      Зачем заставлять? Просто объясните.
      • 0
        Потому, что студия, достигнув определенного уровня должна предоставлять гарантированный результат, в гарантированные сроки. Не больше, не меньше.

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

        Это точно вопросы методологии, технологического процесса в студии.
        В том числе и организация процесса.
  • +1
    Спасибо автору! Наверное, одна из лучших статей с начала года. Статья в закладки. Must read, must have.
  • 0
    Прекрасная статья. Спасибо. Узнал много нового (наверное потому, что не дизайнер) и интересного (потому, что интересно же!).
    Хорошо подана мысль про «ортогональный дизайн» — когда добавление функциональности не должны нести за собой кардинальное изменение предыдущих схем.
    • 0
      Да, это распространеная проблема. Когда для добавления пункта меню или блока на сайте, приходится рисовать новый дизайн, или «прилепливать» находу.

      Многие дизайнеры считаю, что сайт делается на века и развиваться не будет.

  • +1
    Далеко не всегда стоит так строго относится к существующей сетке. Все-таки сетка помогает дизайнеру, а не контролирует его мозг :-).
    • 0
      Да, а автор-то молодец конечно, очень правильный документ. Я бы еще про порядок с документами и слоями добавил, а то грешит наш брат.
      • +1
        Гм…
        Работа со слоями и организация файлов
        как для передачи в работу, так и для отчета по работе проделанной за день,
        в каждой компании своя.

        Можно былобы рассмотреть. Есть смысл подумать.
        Но панацеи не будет.
        • 0
          Главное чтобы без мешанины из «Слой 517» вместе с «Layer 69», да еще и без папок слоев, в файле 018.psd. Это реальный пример, воспроизведен по памяти.

          Дело не в конкретной системе, а в ее наличии :-).
          • 0
            Ну дык это просто азы работы в фотошопе.

            Кстати, их тоже мало кто применяет =)
            Хотя фолдеры и названия слоёв рулят, факт.
  • 0
    Почитал и подумал: нужно бы распечатать и оставить на видном месте… Спасибо автору!
  • 0
    Я не дизайнер, но даже мне интересно. Спасибо.
  • 0
    Большое спасибо автору! Очень приятно читать такие статьи!
  • 0
    Для начинающих дизайнеров самое то.
    • +1
      Вы знаете, я бы не написал эту статью,
      если бы мне за всю мою карьеру чаще всего встречались те дизайнеры, которым бы она не помешала.

      При чем среди них большая часть была не начинающие.

      Именно эта необходимость (повторять коллегам день за днем простые правила) и заставила меня эти правила записать.
      • +1
        Мне иногда и самому себе приходится эти правила напоминать) Правда многие из них уже используются на автомате.
  • +1
    не упомянули о горизонтальной сетке — высоте строки
    • +1
      Горизонтальная сетка — это вещь непростая.
      Особенно в сайтах с маштабируемыми шрифтами.

      Эту тему в 1-2 абзацах не изложишь.

      По-этому пришлось ограничится общим понятием сетки (с горизонтальным и вертикальным модульным членением).

      Использование её в работах — уже немало.
      • 0
        это верно
  • –1
    О! Отлично!
    /me добавил статью в закладки
  • –2
    это верно
  • –1
    Очень
  • +1
    На самом деле эта статья должна называться «Что должен знать человек, чтобы называть себя хоть как-то „веб-дизайнером“. Потому что если человек не знает этих основ то он хуй с горы, а не дизайнер.
    Сама статья отличная.
  • 0
    Хорошая памятка, сам подумывал что-нибудь такое написать. Вот относительно «рыбы» у меня уже есть материал. Очевидно, скоро опубликую.
    • 0
      Спасибо.

      А на счет рыбы очень интересно.
      С удовольствием прочту.
  • 0
    Спасибо!)))
  • 0
    Очень хорошая статья — всё чётко, по делу!

    Единственное, я бы поспорила с безальтернативным «В наше время, когда у всех пользователей самые различные мониторы, есть смысл делать преимущественно «резиновые» сайты». Во многих случаях это не нужно и даже вредно — ничего кроме увеличения трудозатрат такое решение нам не принесёт. Другое дело, что всегда нужно *принимать во внимание* тот факт, что мониторы у пользователей разные.
    • 0
      Спасибо.

      А на счет «есть смысл» и «принимать во внимание» тоже верно подмечено.
      Это мы стремимся к созданию «максимально-правильных сайтов». И это 90% наших решений.
      Но в тех случаях, где это целеобрано, можно делать фиксированно. Так делает весь Запад, поголовно.
      И я тоже об этом подумывал ))
    • –1
      Я бы даже сказал что не только есть смысл, а нужно делать сайты «резиновыми» в большинстве случаев!
  • 0
    огромное спасибо!!!
    Как раз сейчас нужна была статья по модульной сетке +1
    • 0
      Пожалуйста ))
      Но я убежден, что вопросы модульной сетки я коснулся только поверхносто.
      Именно на уровне «памятки».
      • 0
        Да, кстати, сразу очень захотелось услышать от вас о модульной сетке подробно. Может быть, развернёте тему в следующей статье?
        Ну или хотя бы в конец этой несколько ссылок, что хорошего прочитать на тему.
        • +1
          Надо будет подумать.
      • 0
        (с) «А мне много и не надо» =+)
  • 0
    Читая такие статьи, становится обидно что не являешься дизайнером. Ничего в этом не понимаю, но моя точка зрения что статья отличная!:-) Пойду чего нибудь нарисую…
  • 0
    спасибо, многое известно, но все в одном месте мне и многим другим пригодится.
  • 0
    Спасибо, отличная статья. Дам стажерам почитать =)
    • 0
      Ее не только стажерам читать нужно. Засвою жизнь сделал много проектов, был и ведущим дизайнером, и обычным говнорисовальщиком. Статью — на стенку. Надо с нее хороший читшит сделать и в рамку поместить. Разве-что пару мелких пунктиков добавить.
      • 0
        Спасибо =)

        А на счет пунктиков скажите, добавлю.
        Я и так планировал её расширять.
        • 0
          Хорошо было бы почитать подробно о марджинах и падингах, будь они неладны, об оптимальном расположении полезного контента — в фокусе внимания и восприятия юзера, о контрастности цветовых схем текста, фона, элементов дизайна; о влиянии размера шрифта и его формы на уровень восприятия информации. Наверное, я много хочу?))
      • 0
        Согласен. Постоянно что-то важное забывается.
        К примеру, некоторое время назад для себя вывел такое правило: от верха страницы до полезного контента как правило не должно быть больше 500px — в некоторых случаях неоправданная роскошь (особенно при разрешении 1024 х 768). И, блин, тут же наступил на эти грабли…
        • 0
          У меня тоже такое бывает. Особенно когда заказчик хочет вверху страницы слайд-шоу никому не нужных стыренных с гугла картинок — приходится локти кусать… К сожалению себе. А потом, подумав немного, приходишь к итогу. Чего хочет — того и получит. Намного проще сделать так как хотят, чем навязывать свое мнение. Скажи любому человеку, что он не шарит ничего в дизайне или даже в банальном подборе цветов — это сродни тому, что ты обозвал его болваном. А этого, наверное, никто не любит=)
  • –1
    в жж Евгения Чепорова zhekich.livejournal.com/ найден «Trojan-Clicker.HTML.IFrame.ey»
  • 0
    Супер. Спасибо огромное!!!
  • +1
    Вот это материал, вот это объем работы проделал автор. Однозначно в избранное для повторных чтений!
    Автору огромное спасибо, надеюсь на продолжение цикла. :)
  • +2
    Ааафигенно! ) Все знал, но в одном месте — сокровище )
    Плюсик и луч света в карму
    • 0
      Спасибо )
  • +1
    Молодец!
    • 0
      От тебя это приятно слышать.
      Спасибо.
  • 0
    Про модульные сетки бы подробную информацию найти. Может кто знает где поболее изучить эту тему?
  • 0
    Такая концентрация здравого смысла на одной странице вызывает сильное, но приятное удивление:)
    Искрение спасибо Вам!

    • 0
      Приятно услышать, пользуйтесь на здоровье.
  • –1
    Класс! :)
  • 0
    полезно, интересно и очень подробно ;)
  • 0
    Я, видимо, первый дочитал до самого конца. :)
    Во-первых — спасибо, во-вторых — «конскрутивную» критику стоит исправить.
    • 0
      ))) Спасибо
  • +2
    Отличная статья! Пиши еще! Давно не читал ничего такого внятного про веб-дизайн!
    • 0
      Приятно такое услышать от коллег.
      Особенно, если твой материал находят полезным и внятным.
  • 0
    статья просто супер! огромное спасибо!
  • 0
    Отлично! Всем начинающим и не только дизайнерам в избранное.
    А вам желаю успехов, портфолио нравитсо :-)
  • 0
    Ух ты, как все кратко, ясно и красиво изложено. Очень понравилось, причем во многом благодаря легкому и качественному изложению.
  • НЛО прилетело и опубликовало эту надпись здесь
    • НЛО прилетело и опубликовало эту надпись здесь
      • 0
        Ага.

        Ну нельзя сказать, что он некорректно отображается. Так было задумано.
        И в любом случае это заглушка.

        Нормальный сайт только по-тихоньку формируется тут.
        • 0
          Не убирайте пожалуйста строчечку «Во время создания этого сайта ни один дизайнер не пострадал.»
          Позитивно!!!
    • 0
      )))) вы путаете

      Посмотрите на ссылку (web.***.make.com.ua), это не рабочий сайт, а набор сверстанных шаблонов.
      В том виде, котором они были разработаны.
      Для демонстрации дизайна и верстки.

      А заказчик, к сожалению, свой сайт так и не запустил.
      Уже полгода контент пишут.
  • 0
    статься отличная! но вот по ссылке на сайт make у меня открывается страничка, содержимое которой не влезает в экран моего ноута… FF 3.0.1

    а как же пункт про «Общая композиция не должна нарушаться ни при каком разрешении монитора у посетителя.»,?
    • 0
      Спасибо за отзыв, а о нашей заглушке, согласен, она задумана так, что нарушает всяческие правила.
      • 0
        а каким образом можно понять, что так и задумано?
        • 0
          Например, прочитав P.S. к статье:
          Приведенные требования не являются догмой. От любых правил иногда можно отступать. Только делать это нужно не по незнанию, а осознанно.
          Т.к. делая так, я знал, какие правила нарушаю, но делал это намеренно )))
  • 0
    Спасибо, за материал. Отличный Учебник для новчика — добавил в закладки.
    • 0
      Рад, что понравилоь.

      Но я не претендовал на учебник.
      Скорее это действительно памятка, что нужно помнить, и нельзя забывать, проектируя дизайн.
      • 0
        Я надеюсь не обедил?
        Понимаете бывает очень трудно начинающим доходчиво объяснить все и сразу…
        может это мне кажется но если бы такой материал попадался начинающим дизайнерам с ними было бы проще работать :-) Теперь знаю куда отправлять если не будут понимать! :-)
        • 0
          Вот и славно, что пригодилась.
          Какие обиды? Пусть статья послужит на пользу.
  • 0
    С такими статьями за Хабр можно быть спокойным!
    +1 благодарность за четкую и ясную статью.
  • 0
    Добавлю еще один пункт: основная функциональность сайта должна быть доступна и при отключенном у посетителя JavaScript.

    //Пришло в голову после посещения сайта студии
    • 0
      Если сайт — просто информация — тогда соглашусь с вами. Но если сайт предоставляет собой сервис, где без джаваскрипта — никак? Как в таких ситуациях? Делать обычную версию? Дорого получится.
      • 0
        Блин, весь контент сайта находится в той же странице. Он просто скрыт — можно было при отключенном JS его просто не скрывать.
        • 0
          Тут с вами полностью согласен. Эт уже излишество
    • 0
      p.s. А со включенным JS он почему-то медленно грузится.
  • 0
    Отличная статья!
    По поводу же самого сайта автора: сайт абсолютно недоступен без JavaScript.
  • 0
    Отличная статья!
    По поводу же самого сайта автора: сайт абсолютно недоступен без JavaScript.
    • 0
      Я думаю, что пользователей с отключенным джаваскриптом меньше, чем пользователей 5-го ИЕ. О пятом Ие вообще никто не вспоминает. Как думаете?
      • +1
        Думаю, что это совсем не так.
        Из-за повальной вездесущей анимированной рекламы, некоторые люди ходят с отключенным JavaScript, включая его только для «проверенных» сайтов.
        Опера умеет это делать «out of the box», у Firefox есть популярное расширение NoScript (не зря, наверное, популярное).
        • 0
          Если честно, то я никогда не отключаю js так как люблю его. Иногда эта любовь взаимная=))
          Я полностью осознаю серьезность этого дела, это как секс без презерватива снезнакомой деыушкой, но все-же. Я не поверю вам, если скажете, что везде отключаете дж.с. на незнакомых сайтах.
      • +1
        Я отключаю JS для всех незнакомых сайтов, они грузятся намного быстрее и не пытаются взорвать мне мозг рекламой.
  • 0
    спасибо за статью.
    Давно искал подобное, уже думал сам написать, просто надоело, когда дизайнер кидает тебе макет, который сверстать нормально очень трудно и геморно.
  • 0
    Отличная статья, прочитал на одном дыхании.
    Большой респект за то что информация очень правильная и изложена на доступном и легкочитаемом языке :)
    • +1
      возможно это из за темы, или браузер специфик, но:
      сайт вашего дизайн бюро не имеет горизонтального скорллбара и при 100% масштабе — больше половины содержимого просто отрезается.

      Opera 9.61
      • 0
        прошу прощения :) не обратил внимание на то как работают кнопки навигации
  • 0
    Спасибо. Очень хорошо написано.
  • 0
    Превосходная статья.
    Каждый день бы по такой статье
    • 0
      Спасибо.

      Но на каждый день меня не хватит =)
      Хотя эту можно былобы разделить на 3-4 отдельных.
  • 0
    супер!
    я хоть и не дизайнер, прочитал все с удовольствием. спасибо.
  • 0
    Мега круто!
    Очень классная и наглядная статья.
  • 0
    Можно проявить снобизм?
    У вас на сайте (www.make.com.ua) в пункте «Нашли чем гордиться!» не нужно ли запятой перед «чем»?
    • –1
      Конечно можно. И конечно нужно! )
      Благодая другим мы замечаем свои ошибки.

      Не уверен только, что это имеет прямое отношение к статье.
      • –1
        Ох нахвалил-то себя! Не на званном ужине, ей богу, хватит рекламничать.
        • 0
          Просто не путайте критику со снобизмом )
          • 0
            Сноб — человек, поведение и вкусы к-рого определяются стремлением не отстать от моды и постоянно придерживаться манер буржуазно-аристократического круга, «высшего света».

            Здесь такой люд, что всегда пол ветки занимает обсуждение опечаток автора. Выпендрежная манера поумничать перешла все границы.
  • 0
    Отлично. И примеры красивые.
    • 0
      Спасибо.
      А примеры, кстати все базированы на наших работах.
      Опубликованных либо готовящихся к сдаче.
  • 0
    Спасибо. Отличная статья. И оформление на высоте.
  • 0
    Огромное вам спасибо за эту статью! Я не дизайнер, но подобного рода статьи расширяют кругозор. И лично я почерпнул отсюда немало нового — еще раз вам спасибо :)
    • +1
      Добавлю: очень многое из этого было известно заранее, но именно грамотная подача материала, этакий «all-in-one» — сыграла свою решающую роль :)
      • 0
        Рад, что статья пришлась полезной и понравилась.
  • 0
    Спасибо! Лаконично и просто написано, для кого-то может стать повседневным руководством
    • 0
      Пожалуйста.
      Это здорово, что кто-то ей будет пользоваться.
  • 0
    спасибо
  • 0
    спасибо… в избранное
  • 0
    Да, уж… Вот это работу Вы проделали для написания данной статьи. Только за один этот факт — Вам «респект и уважуха». А, если учесть, что статья супер-мега полезная, респект Вам вдвойне!
    • +1
      Рад, что понравилось и явилась полезной.
      Значит всё не зря ))
      • 0
        Конечно, нельзя. Вроде, на первый взгляд, никаких «смелых идей» и инновационных решений, только прописные истины. Но именно они, на мой взгляд, и влияют на всё.
        • +1
          Так в том-то и дело, что статья действительно является «памяткой», обобщающей, что не стоит забывать при разработке. Не новый метод, а просто «сверочный лист».
  • 0
    У меня после таких статей начинаются депрессии, кажется что если был нулем, то пошел в минус.
    • 0
      Гм… почему? Зачем?
      • 0
        Ну как сказать почему и зачем. Если ходить в кожанке и спортивных штанах, то прочитав данным материал можно смело сказать что все идиоты, а я могу делать лучше. Но когда же сам стараешься делать что-то, понимаешь как все не просто. Материал очень хорош, приятен и полезен конечно. Но посмотрев ваши работы я начинаю думать что не могу делать вообще ничего. Потому после таких статей, посещений сайтов а-ля cssmania я начинаю депрессировать, так как я понимаю куда нужно рости, и как я мал.
        • 0
          Упорство, терпение и все получиться. Дипрессии начнутся когда поймете что почти никому этот хороший дизайн и не нужен, посмотри на запад. там никто не замарачивается, фетиш в дизайне присущ восновном exСНГ. Так что настраивайтесь работать для себя в первую очередь.
        • 0
          Вы думаете у меня не бывает таких минут?
          Я тоже знаю достаточно студий и дизайнеров, после просмотра чьих работ я могу впасть в дипрессию.

          Всё завист от того, что и кого брать за планку.

          Для меня неудоворенность — признак того, что мне есть куда расти и развиваться.
          И того, что я способен развиваться.
        • +1
          Недавно Тёме задали вопрос:
          Всё время кажется, что я буду хуже и не смогу добиться профессиональных успехов из за недостатка знаний. И такая неуверенность во всём… как поднять самооценку и поверить, что всё получиться?
          Его ответ мне очень понравился:
          Я вас уверяю — любой самый крутой дизайнер на свете, когда заходит в дизайнерский отдел в книжном магазине, чувствует себя никчемным бездарем. Все уже сделано, все такое красивое, всего так много.
          Но стоит выйти из книжного магазина — и ты понимаешь, что нужен.
          • 0
            Вот-вот! В самую точку.
  • 0
    Паша, дай pdf! :) Я тебя и тут достану :)
    • 0
      Дай мне пару дней, пришлю.
      Я не забыл )))
  • 0
    Спасибо! Отличная работа!
  • 0
    Благодарю за статью, как раз хотел начать делать сайт для своего портфолио.
  • +1
    Очень хорошо и по делу :) В той части, где речь идет о дизайне, — почти нет возражений (по поводу шрифтов можно поспорить; думаю, что базовый шрифт на сайте все-таки должен быть системным). А вот что касается контента… его оформление — далеко не самое главное. Если у сайта грамотная информационная архитектура, то даже заурядное оформление ее не испортит. Как и не спасет отличное оформление сайт, где к информации относятся просто как к большому массиву данных, структурированных лишь по визуальным признакам.
    • 0
      Спасибо.

      1

      Для меня «оформление содержания», «структурирование содержания» и «информационная архитектура» — вещи неразрывно связанные меду собой.

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

      2

      На счет шрифтов, я не касался названий гарнитур. Я только говорил, что шрифт должен быть 1-2, максимум 3.
      Для основного набора и элементов акциденции (заголовков, выделений, цитат). И в примерах показани именно стандартные шрифты. Я даже удивился, когда вы об этом упомянули )
  • +1
    Да, со шрифтами в примерах все нормально. Просто меня сбило с толку это «трех» и тот факт, что шрифтовая схема вообще обсуждается :) По поводу информационной архитектуры — я пока не пойму, разная ли у нас с Вами терминология или все-таки понимание отличается. В ближайшее время я опубликую свою статью об ИА с конференции RIW 2008 — возможно, у Вас появится желание продолжить обсуждение этой темы :)
    • 0
      Там описано, почему бывает трех:

      Первые два — это заголовки, выделения и основной набор текста

      Третий (а иногда и четвертый, пятый) могут вводится для навигации, для блоков <code> (моноширинный), для очень мелкого текста (подбирается другой шрифт, вместо основного, в целях увеличить читабельность).
      • +1
        Погодите-ка, для Вас «разные шрифты» — это одна и та же гарнитура, но при разных кегле, цвете, начертании? Но ведь это просто разные стили! Я же говорю именно о шрифтах (читайте — гарнитурах). Их, Вы считаете, тоже может быть три и более?

        И еще вопрос к здравому смыслу: зачем делать «очень мелкий» (и уже по определению трудно читаемый) текст? Для красоты и стройности композиции? Кстати, подозреваю, что 90% пользователей давно научились пользоваться сочетанием клавиш Ctrl+ в браузере :)
        • 0
          Нет.
          Вы невнимательно читаете.

          1

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

          Я как-раз-таки и считаю, что гарнитур в макете может быть крайне-малое количество.
          Перечислил основные комбинации, начиная самые распространеные схемы (1-2 шрифта),
          и упомянул, почему в некоторых случаях допустимо введение дополнительных.

          2

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

          Например,
          весь сайт построен на Arial (который хорошо смотрится в обычные 12 пунктов и выше),
          но в подвале идут более мелкие копирайты (например 10 пунктов), и Arial без сглаживания просто превратится в кашу, но зато родственная Verdana в этом размере смотрится превосходно, а главное не выбивается из стиля.
          Или пример не с подвалом, а с подписями к картинкам.

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

  • 0
    Не заметил, что бы в статье говорилось, что не нужно выделять посещенные ссылки из меню сайта, и когда они являются «системными» (например, «вход/выход»).
    • 0
      Гм… Вы правы.

      Я рассматирвал разные случаи. И в типичном наборе посещенные сылки не числились.
      Т.е. поступил по принципу: сообщил как нужно, но не сообщил, как нельзя.

      В любом случае об этом сказано, только в другой форме.
  • 0
    Учитывая, что данный текст является памяткой дизайнеру, очень смущает в топовой картинке черная надпись «дизайнеру» на темно-синем фоне. Дизайнер должен думать(!), как много раз появлялось тут выше… Не должно быть в памятке дизайнеру таких непрофессиональных огрех.
    • 0
      А в чем именно-то огрех? Не совсем пойму.
      То, что на картинке намеренно-лучше читаются ключевые «Памятка дизайнеру сайтов»?
      Да терпимое, imho, нарушение. Ведь картинка — всего-лишь дубль заголовка, для привлечения внимания.
      И контраст в любом случае достаточный, чтобы читаться.
  • 0
    А что там у вас с правым полем?
    • 0
      Понажимайте на ссылки «Кто такие?», «Что делаем?», «Как связаться».
      • –1
        Как-то это сложно — нет привычного горизонтального скроллинга, и два раза вопрос «что делаем». Есть какое-нибудь правило дизайна о том, что надо делать привычно?
    • 0
      Это не ошибка сайта, это ошибка «юзабилити» :)
  • 0
    А что это за новостной сайт в примере, хотелось бы на него посмотреть «вживую».
    • 0
      Там в примерах много сайтов, которые готовятся к публикации.
      Новостной сайт наполняется для запуска, например.
  • 0
    Спасибо, статья замечательная, разместили у себя для внутреннего пользования. Будем учить новых сотрудников.

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

    p.s. Конечно все ссылки проставили.
    • 0
      Рад, что понравилось.
      Конечно размещайте.
    • 0
      Не забудьте про верстку своего сайта :)

      Не забывайте, что PASSED способствует бизнесу и напоминает самому себе как правильно ;)
  • 0
    Спасибо за интересную статью!
    • 0
      Да всегда пожалуйста! =)
  • 0
    Отличная статья, Павел!
  • –2
    Жаль. 90% комментов — простое спасибо. Обсуждения технологического порядка почти нет.
    Хотя статья в целом очень неплохая. Спасибо :)))
    • 0
      Дык статья никаким образом и не касалась «технологического порядка».
      Список правил, которые не нужно забывать в работе. Не более.

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

      Наверное нет.
  • 0
    Вещь, автору спасибо… буду мучать наших дизайнеров :)
    А то любимое дело 3-4 сетки на сайта, плюс побеги а как этот элемент при наведении себя ведет.

    Материал заслуживает, того, что давали его на «курсах».
    • 0
      Дык материал для курса и готовился.
      Об этом написано в самом начале статьи )))
  • 0
    все очень правильно собрано и проиллюстрировано
    добавлю в букмарки для нашей молодежи
    • 0
      Рад, что понравилось и пригодилось )
  • 0
    Не подскажете какая модульная сетка используется на скринах? Заранее спасибо ;)
    • +1
      В каждом из примеров — различная сетка.
      В кадом из случаев, подбиралась и рисовалась индивидуально под проект, в зависимости от задач.

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