Как стать автором
Обновить

О дизайне, или почему полиграфистам нечего делать в вебе

Время на прочтение 4 мин
Количество просмотров 1K
*Слегка подкорректированная статья из моего ЖЖ, думаю, здесь она больше к месту*

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

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

В общем, ну для начала дали мне небольшое задание на вёрстку. Доска объявлений для сайтеца. Присылают мне… JPEG размером 4 на 3 тысячи пикселей. При этом с достаточно сложной графикой. Что за...? Да дайте мне нормальный исходник в PSD! Угу. Начальство списывается с дизайнером, и через несколько минут в моей рабочей папке оказывается PSD-шничек. Одно название, а не PSD-шник. Тоже 4 на 3 тысячи пикселей, и, естественно, одним слоем. Где нормальные слои, чтобы я могла нормально нарезать те же графические фоны? Как вообще он это делал? Выяснилось — дизайнер вообще не вебер, он полиграфист (причём не ахти какой, но об этом далее). И всё рисовал в… Adobe Illustrator'е, из коего бездумно (не подумав даже о разрешении экрана) экспортировал во все остальные форматы! Не, я всё понимаю, для полиграфии такая графика есть самое оно, ибо её можно отмасштабировать как угодно и распечатать на чём угодно, она зависит не от фиксированного положения точек, а от нарисованных геометрических фигур, их пропорций и положения. НО! Веб-сайт как таковой привязан к экрану, к тем самым точкам. И именно поэтому, щас скажу одно правило. Если вы делаете сайты не на векторном flash'е (а в этом ничего хорошего нет ИМХО), ТО:

дизайните (на худой конец — отдавайте на вёрстку) сайты ТОЛЬКО в редакторах растровой графики!


Photoshop рулит. Да на худой конец даже MS Paint сойдёт, хотя без поддержки слоёв всё равно порой туго. А если привыкли уже рисовать в векторе и иначе не можете — ну тогда хотя бы потрудитесь экспортировать нормально.

Ну ладно, заставили дизайнера ещё помучиться. Присылает он на следующий день некое подобие слоёв. Хоть текст от подложек поотделял, и то хорошо. Другое дело, что ВСЕ подложки были слиты в одну, а это не есть гут. И простым замазыванием-копипастом там не отделаешься. Потому что эти подложки на странице являли собой сложную систему градиентов. Как горизонтальных, так и вертикальных. Вертикальные вызвали у меня ещё один приступ нецензурной брани. Ибо как ещё, если не матом, объяснить, что это на печати ширина-высота постоянны, извращайся как хочешь. А высота каждой веб-страницы отличается от остальных — ибо мы делаем всего лишь ШАБЛОН, а какой длины будет его наполнение, заранее не известно. Соотетственно, исходящая из центра и растягивающаяся на всю ширину страницы градиентная заливка нам ну никак не пойдёт. Аналогично и с заливкой отдельных текстовых блоков, мы же не считаем, что они все должны быть прям уж одинаковой длины, верно? Соответственно, вот вам ещё одно правило:

Сайт — не статичная картинка! Прежде чем наворачивать кучу всякого, подумайте, как всё это будет смотреться при разном наполнении.


Бороться с этим пришлось долго и нудно, ведь, повторюсь, всё это было слито в один слой. Попыталась как-то сделать с этим страницу, в конечном итоге, глядя на эту порнографию, забила. Для начала выдрала из верха страницы небольшой кусочек, где подложка была горизонтальной. Сделала это основным фоном верстаемой html-ки, причём прописала ей на время фиксированную высоту, чтобы просто что-то было видно… открыла в браузере и сделала скриншот. На этот скриншот уже в Фотошопе наложила скопированный с оригинала слой с заголовками столбцов (почему эти заголовки графические — скажу далее, тоже не ахти какое решение), и оттуда уже стала нарезать графику. Извращение, правда?

Так, вот, почему графические заголовки. Вообще, честно скажу, как сторонник чёткой информативности, быстроты загрузки, и вообще как человек, долго сидевший на gprs-е с отключенными картинками… я НЕ ЛЮБЛЮ графические меню, заголовки и так далее. А верхом маразма считаю меню на flash при отсутствии карты сайта или ещё какой альтернативы. Попробуйте отключить картинки, и вы поймёте, почему. Куда лучше текстовая ссылка, а под ней уже какая душеньке угодно графическая подложка. Так нет же, тут дизайнер наворотил, начисто отрезав саму возможность подобного. Дело в том, что для заголовка страницы, меню и подзаголовков (состоящих из картинки и подписи) юзается один и тот же шрифт. Начисто отсутствующий в стандартной поставке любой ОСи. А посему, если прописать отображение текста этим шрифтом, то большинству юзеров будет вместо него показано непонятно что. Да, это на печати глубоко пофиг, а в Вебе о юзерах таки позаботиться надо. В данном случае мне пришлось сделать всё графикой, прописав alternative text для бескартиночников. Но всё равно это порнография, ИМХО. Так что — ещё одна вещь, которую рекомендую зарубить себе на носу:

Не злоупотребляйте графикой.


Стандартные шрифты тоже красивы, а поисковик скорее заметит текстовый заголовок, чем alt к картинке.

И ещё. Опять же, если не делать статичные странички на народе.ру, что есть позавчерашний день, то пора бы наконец узнать, что большинство элементов веб-страницы генерируются автоматически, а посему много элементов делаются по одному образцу и имеют стандартное оформление. Я сказала, СТАНДАРТНОЕ! А то на тех блоках с графическими заголовками, которые, по идее, должны одним скриптом по одному образцу выводиться, ещё и рамки были. В одном блоке отступ этой рамки — 20 пикселей, в другом — 15, в третьем оно вообще непонятно куда уехало. А поскольку оно было органично вписано в заголовки и возиться с переделкой мне как-то не хотелось, рамки тоже были убраны вообще. Да, заголовки из-за разных размеров картинок к тексту тоже несколько неровно лежат. И надо ли мне указывать скрипту вывода, что вот именно в ЭТОЙ ячейке надо изменить положение содержимого? Мораль сей басни такова:

Соблюдайте единую стилистику. Пожалейте автоматику.


И научитесь, наконец, юзать инструмент «выравнивание», наличествующий в любом серьёзном графическом редакторе.

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

Полиграфистам НЕЧЕГО делать в веб-дизайне!
Теги:
Хабы:
+9
Комментарии 65
Комментарии Комментарии 65

Публикации

Истории

Ближайшие события

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн
Геймтон «DatsEdenSpace» от DatsTeam
Дата 5 – 6 апреля
Время 17:00 – 20:00
Место
Онлайн