Что верстальщики хотели бы донести до веб-дизайнеров?

Question

[Тостерянка]

Я, веб-дизайнер, имею базовые знания по верстке, и конечно же знаю "правила хорошего тона работы в Photoshop". Однако, чувствую, что верстальщики иногда всё равно меня недолюбливают :)

Обращаюсь ко всем верстальщикам: о чем забывают и что не учитывают веб-дизайнеры, даже которые вроде как "в теме"? :)
Также обращаюсь к веб-дизайнерам: поделитесь ресурсами и литературой, которые вы почитываете, чтобы всегда оставаться "в теме".

P.S. Я ожидала увидеть не самые типичные ошибки безголовых дизайнеров-фрилансеров...

Answer 1

[Сергей ZSA]

Прошел через все стадии создания web-проектов начиная с копирайтинга, заканчивая back-end и настройку серверов. В итоге остановился на front-end + чуть-чуть дизайн (но это не значит, что плохо знаю фотошоп))).

Что мне было делать лень, как дизайнеру:
1. Прикладывать файлы со шрифтами
2. Архивировать работу
3. Писать комментарии к дизайну
4. Присылать исходники иконок (если используется пак)
5. Рисовать :hover :active :focus и тп для элементов, которые это 100% требуют
6. Общаться с тугим верстальщиком, который не может отличить iline от inline-block
7. Корректировать работу, если это просит верстальщик

Что я понял, когда перешел на другую сторону:
1. Я хочу архив с адекватными шрифтами (идеал - ссылку на шрифт в goolge fonts или подобном сервисе, где есть сразу все форматы шрифтов)
2. Я хочу хотя бы .zip потому что инет в России не всегда и везде качественный и я могу быть не дома, когда хочу скачать и посмотреть диз, а он весит 300мб
3. Я хочу несколько .psd если лендос/сайт большой (экранов в 25-30 или больше). Разбивайте на 7-10 экранов максимум каждый .psd потому что не у всех верстал 8-16 гигов оперативки
4. Я хочу состояния :hover :active (пожалуйста!!! пусть уж без :focus, сам его придумаю)
5. Я хочу ссылку на пак с иконками, если они использовались в дизайне
6. Я хочу комментарии пусть даже в .txt если там что-то из-под чего-то должно выезжать при наведении/клике и тп
7. Я хочу группы в макете с адекватными названиями, а не сплошняком все слои и/или группы "Группа 1 и тп"
8. Я хочу минимум скрытых слоёв/групп в шаблоне (если группа не может донести суть - писать в .txt для чего она)
9. Я хочу каждую часть текста по отдельности, а не заголовок (60px желтый отступ от абзаца с помощью межстрочного интервала) вместе с абзацем (18px белый с межстрочным интервалом не равным заголовку). Хочу чтоб был отдельно абзац и отдельно заголовок (подзаголовок, без разницы как называть)
10. Я хочу отдельно каждую картинку, а не слитый воедино фон шапки с изображением товара/курса/др.
11. Я хочу большой векторный логотип отдельно от шаблона
12. Я хочу прозрачность, чтоб сделать png, а не "Режим наложения"->"Умножение" (обязательно адекватно мягко по контуру вырезанный объект, а не ступенька из пикселей)
13. Я хочу общаться с дизайнером, если у меня есть его контакт
14. Я хочу мобильную версию, если она должна быть у сайта
15. Я хочу бесшовную текстуру отдельно от документа, если есть фон, который имеет свойство повторяться (его в "Наложение узора" обычно ставят в стилях слоя)
16. Я хочу скайп дизайнера в макете чтоб связаться с ним))) Главное нарисуйте так, чтоб его не принять за элемент сайта и не заверстать случайно

Ну как-то так. Думаю список можно ещё пополнить, но уже о некотором сказали.

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

Comments

[Сергей ZSA]

CyberKatze: ещё ни разу не видел, чтоб дизайнер юзал Git. Чаще всего это PS и максимум creative clound. На счет 16 - эх... объясните дизайнерам, что такое доки, если многие умудряются совершать 15 вышеприведенных ошибок.

[larka_skaz]

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

Answer 2

[Денис Инешин]

Designing for Web
Памятка дизайнеру сайтов
8 простых способов улучшить типографику в вашем дизайне

Comments

[Тостерянка]

Спасибо! Мало нового, но очень много полезного :)

Answer 3

[Ольга Грабко]

Если опустить банальности....
Узнайте (если еще не знаете) о композиции слоев и комментариях в фотошопе. О композиции слоев особенно.
Текст пиксель-в-пиксель от края до края блока и больше места не предусмотрено - считайте, что он не влез.
Рисуя версию для мобилы шириной 320, держите в уме, что ее растянут до 650-760.
Рисуя версию для планшета, держите в уме, что ее скорее всего будут и тянуть в большую сторону, и сжимать в меньшую по ширине. Не надо делать элементы совсем впритык, оставьте место для маневра.
Помните, что у видео-проигрывателей и карт есть элементы управления (и если вы вдруг решили наложить перекрывающий карту слойчик и в нем инфу - покажите, что вы планируете делать с элементами управления).
Комментируйте состояния (или соответствующе называйте слой) - просто три кнопки/ссылки разного цвета - это просто три разные кнопки/ссылки.
Помните, что у полей форм есть состояния: обычное, в фокусе, заполнено, заполнено правильно (по желанию), заполнено не правильно, disabled, некоторые поля требуют пояснений по заполнению. У самой формы есть состояния - отправлена успешно, ошибка - не правильно заполнена, ошибка - не отправлена хз почему. Покажите ответы формы, если у вас формы и на странице, и во всплывашках, и хз где еще - покажите для каждого вида. В макетах надо показать все виды полей (хотя бы основные), а не только те два текстовых поля, которые требуются в конкретной форме "заказать звонок".
Типовая текстовая страница должна содержать оформление основных текстовых элементов (заголовки, абзацы, списки всех видов, таблицы, картинки и их взаимодействие с окружающими элементами. А не только заголовок и пару абзацев.
256 оттенков серого и текст размеров 12, 13, 14, 15, 16, 18, 20, 22, 24, 26 итд. конечно держат верстальщика в тонусе, но все же старайтесь несколько ограничивать палитру и количество стилей текста. Будет неплохо, если в них даже будет какая-то логика.
Используя все доступные начертания парочки шрифтов в макете помните, что парочка шрифтов по 8-10 начертаний - это 16-20 подключаемых шрифтов, а не 2.
Иконки и картинки смарт-объектами - это удобно, очень.

Answer 4

[Николай Громов]

https://github.com/nicothin/web-design — самый большой из известных мне списков по теме.

Answer 5

[Ярослав IKARUS]

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

Я бы рекомендовал дизайнерам поверстать свои же собственные макеты :)) я думаю это даст вам определенный уровень просветления

Comments

[Ярослав IKARUS]

CyberKatze: пойди объясни это им. Они же все художники, у них свое видение мира.

[Нерон Лордов]

Проблема обоих сторон в нежелании понять другую сторону. Часто вижу нытье верстальщиков типа "Вот бы эти криворукие дизайнеры попробовали сами сверстать свой дизайн". Про художников и свое видение мира - это уже неадекват) Без этого видения развития бы вообще не было в графической культуре. И на будущее - дизайн это не творчество, а решение проблем наименьшими средствами в области визуальной коммуникации) Другое дело, что проблемы бывают творческие, но их решения всё равно будут формализацией сложного уравнения из пожеланий заказчика и возможностей технологий.

Answer 6

[sim3x]

Собственно, никакх проблем нет
Реализовать можно все что угодно

Вопрос всегда в необходимости того или иного выкрутаса для бизнеспроцесса

А главный совет - получайте фидбек по своей работе как можно чаще и действуйте итеративно

Answer 7

[Павел]

самое главное что бесит: ширина макета. Когда к тебе человек приходит с макетом который делал дизайнер , а сам долек и от дизайна и от верстки. И говорит надо сделать один в один как на psd , а там ширина 2200 .... , а есть такие твердолобые что даже не понимают что такое разрешение монитора.

Answer 8

[zooks]

Вкратце: дизайн должен быть продуманным, в едином стиле для всех элементов и по сетке.
Рекомендации по PSD:
i-love-psd.ru

Comments

[Тостерянка]

Опять-таки элементарные вещи. Не знала только про zip.

Answer 9

[monochromer]

Вадим Макеев. О чем смеются верстальщики.