Мои правила хорошего тона в веб-дизайне

Правило №2:
Перед сохранением файла сверни все слои

При открытии файла совсем не круто видеть вот это:

neok

Что начинаем делать? Все правильно: весь этот ад (который чем-то напоминает русские буквы в урлах из-за чего вместо ссылки зачастую получаем вот это не читаемое говно — ru.wikipedia.org/wiki/ %D0%9F%D0%BE%D1%85% D0%BC%D0%B5%D0%BB%D1%8C%D0%B5%D0%9) начинаем сворачивать и вспоминать нежные слова, которые сегодня можно было бы посвятить товарищу дизайнеру:

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

А вот это видеть очень круто:

ок

Сворачивайте правильно!
Не только основную папку группы, но и все подпапки

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

right


Хоткеи

Чтобы свернуть быстро и правильно (см. выше) не нужно кликать на абсолютно все папки на панели слоев в надежде ничего не забыть свернуть. Достаточно всего лишь зажать [alt] и кликнуть по слою основной группы.

keyboardПервый раз [alt] + клик — все слои группы, включая подпапки (и папки в подпапках и тд) свернулись. Еще раз [alt] + клик — и все слои группы, включая все вложенные подпапки развернулись.

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


Немного о русском

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

  • в софте. Во-первых, почти весь софт криво локализован. Вот, например, панелька фотошопа CS5 «автовыбор: слой / группа» переведена наоборот. Если ставим «группу» — выбирает слой, если «слой» — выбирает группу.

    Во-вторых, знать ITишный сленг и основные слова (Edit, copy, layer, footer, background, button, bottom, left и другие) просто необходимо веб-дизайнеру (html/css состоит из этих слов).

    Поэтому крайне не рекомендую русский софт (не только фотошоп и люстру).

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

    Оффтоп: когда копирайтеры пишут на форумах с ошибками (ни сленгом, ни с опечатками, а именно с ашибками) — терпеть ненавижу

  • в урлах. Урлы с кирилицей — моветон. Зачастую вместо нормального текста в ссылке вот этот ад, который даже не помещается в строку браузера: ru.wikipedia.org/wiki/%D0%9F%D0%BE%D1% 85%D0%BC%D0%B5%D0%BB%D1%8C%D0%B5%D0%9F%D0%BE%D1%85%D0%BC
  • в названиях файлов. Рабочие файлы нужно называть по-английски (только не транслитом). Попросите кодера подписать рабочий файл по-русски, да еще и с большой буквы — и в ту же минуту будете расстреляны грозным взором оппонента.

Мои правила хорошего тона в вебе:

#1 — Убери бренд
#2 — Сверни слои
#3 — Никакого липсума
#4 — Никаких секретов
#5 — Отдай иконки (в моей книге)
#6 — Про панель слоев
#7 — Пронумеруй варианты

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

Оставить комментарий

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

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.
12 комментариев

Тот случай, когда все, у кого нет таких правил хорошего тона – редиски)

Дело привычки, не более.

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

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

Добавлю в список ссылок, которые даю заказчику, когда он спрашивает, что требовать от дизайнера. Больше, чем этот кавардак со слоями, бесят только режимы наложения, отличные от normal и размеры вида "399px" и "16,432px".

Про русский софт согласен. Годится только в качестве оружия против "красных глаз".

Больше, чем этот кавардак со слоями, бесят только режимы наложения, отличные от normal и размеры вида "399px" и "16,432px"

«16,432» ни один дизайнер в здравом уме не поставит. Уверен, что никто сам не поставит и «16,4». Такое периодически делает сам фотошоп.
Почему — я не очень в курсе, и от этого бесит еще сильнее 🙂

Замечала, что такое происходит при позиционировании группы (в которой есть и текстовый блок) через «Free Transform». Выделяешь группу — указываешь угловую точку — вводишь точное значение — «Enter» — и... вдруг панелька показывает дробный размер шрифта :). Так не всегда, но часто. Самое плохое в этом (по крайней мере у меня так), что невозможно потом поставить прежний размер (всё время выдает дробное значение). Приходится создавать новый текстовый слой.

Алексей, хочу добавить еще одно "спасибо" в копилку благодарностей от читателей, "подсевших" на Ваш блог :). У Вас не только очень крутые работы, но и действительно крутые практические советы из разряда "кратко о важном". Спасибо.

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

Перенес вопросы (переместил комменты) в отдельную заметку http://alexeybychkov.com/2015/12/17/guides/

PS. Про баг с пагинацией понял, спасибо. Поправим

Не нашла более подходящей заметки под свои вопросы, потому всё же напишу снова здесь (запись про адаптивный дизайн скорее для заказчиков, не хочу там "засорять" страницу)

Огромное спасибо за лайфхак со сворачиванием слоев! Подозревал, что правилом хорошего тона для дизайнера является красифо оформленная панель слоев, поэтому замучивался при любых правках от заказчика раскрывать/закрывать большие ветки слоев... Это просто гениально! Сэкономлю х10 времени...