*Слегка подкорректированная статья из моего ЖЖ, думаю здесь она более уместна* Дизайнеров мало.
Хороших дизайнеров, которые не скрывают недостатки своей работы за простыми приемами, еще меньше.
Ну а хороших дизайнеров, понимающих специфику работы с Сети, в нашей глуши почти нет. Я даже не успел устроиться на новую работу — уже хотелось проклясть местного дизайнера.
Сейчас объясню почему.
Более того, это даже не узко профессиональное дело; С этим может столкнуться практически каждый, кто хочет сделать свою пагу в Интернете.
Если только вы не решите пойти по легкому пути, например, украсть шаблон для сайта из открытого кода или, того хуже, воспользоваться сервисом narod.ru, ставшим шедевром безвкусицы.
В общем, ну для начала мне дали небольшую задачу по верстке.
Доска объявлений для сайта.
Мне присылают. JPEG размером 4 на 3 тысячи пикселей.
Причём с довольно сложной графикой.
Что за.
? Дайте мне нормальный исходник PSD! Да.
Начальство связывается с дизайнером, и через несколько минут у меня в рабочей папке уже есть PSD-файл.
Одно имя, а не PSD-файл.
Тоже 4 на 3 тысячи пикселей и, естественно, в один слой.
Где нормальные слои, чтобы можно было нормально вырезать одинаковые графические фоны? Как он вообще это сделал? Оказалось, что дизайнер вовсе не Вебер, он печатник (причем не великий, но об этом позже).
И я всё нарисовал в.
Adobe Illustrator, из которого бездумно (даже не задумываясь о разрешении экрана) экспортировал во все остальные форматы! Нет, я все понимаю, для печати такого рода графики в самый раз, потому что ее можно масштабировать как угодно и печатать на чем угодно, это зависит не от фиксированного положения точек, а от нарисованных геометрических фигур, их пропорций.
и положение.
НО! Сайт как таковой привязан к экрану, к тем самым точкам.
И поэтому я сейчас расскажу вам одно правило.
Если вы не делаете сайты с использованием векторного флеша (и в этом нет ничего хорошего, ИМХО), ТО:
проектируйте (на худой конец, отправляйте на верстку) сайты ТОЛЬКО в редакторах растровой графики!Правила фотошопа.
На худой конец подойдет даже MS Paint, хотя без поддержки слоев все равно иногда сложно.
А если вы уже привыкли рисовать в векторе и по-другому не умеете, то хотя бы попробуйте экспортировать как следует. Ну да ладно, заставили дизайнера пострадать еще.
На следующий день он присылает какие-то слои.
По крайней мере я отделил текст от фона, и это хорошо.
Другое дело, что ВСЕ подложки были объединены в одну, а это не гут. И простым замазыванием и копипастом не отделаешься.
Потому что эти фоны на странице представляли собой сложную систему градиентов.
И горизонтальные, и вертикальные.
Вертикальные вызвали у меня очередной приступ нецензурной лексики.
Потому что как еще, как не матом, объяснить, что ширина и высота на печати постоянные, коверкай как хочешь.
И высота каждой веб-страницы отличается от других — ведь мы делаем только ШАБЛОН, и какой длины будет его содержимое, заранее неизвестно.
Соответственно, градиентная заливка, идущая из центра и растягивающаяся по всей ширине страницы, нам совершенно не подойдет. То же самое касается заполнения отдельных текстовых блоков; мы не думаем, что они все должны быть одинаковой длины, верно? Соответственно, вот вам еще одно правило:
Сайт – это не статичная картинка! Прежде чем добавлять кучу всего, подумайте, как все это будет выглядеть с разным содержимым.Мне пришлось долго и нудно с этим бороться, потому что, повторюсь, все это было слито в один слой.
Я пытался как-то сделать с этим страничку, но в итоге, посмотрев эту порнографию, сдался.
Для начала я оторвал небольшой кусочек верхней части страницы, где подложка была горизонтальной.
Я сделал это основным фоном набираемого HTML и на некоторое время присвоил ему фиксированную высоту, чтобы что-то было просто видно.
Я открыл его в браузере и сделал скриншот. На этом скриншоте я в фотошопе наложил на слой, скопированный с оригинала, заголовки столбцов (почему эти заголовки графические — расскажу позже, это тоже не лучшее решение), и уже оттуда начал обрезать графику.
Извращение, не так ли? Вот почему графические заголовки.
В общем, скажу честно, как сторонник четкой информативности, скорости загрузки и вообще, как человек, долгое время пользовавшийся gprs с выключенными картинками.
НЕ ЛЮБЛЮ графические меню, заголовки, и так далее.
И я считаю верхом безумия иметь флеш-меню при отсутствии карты сайта или какой-то другой альтернативы.
Попробуйте отключить изображения и вы поймете почему.
Гораздо лучше текстовая ссылка, а под ней любой графический фон, который душе угодно.
Ан нет, тут дизайнер накосячил, полностью отрезав саму возможность этого.
Дело в том, что для заголовка страницы, меню и подзаголовков (состоящих из картинки и подписи) используется один и тот же шрифт. Полностью отсутствует в стандартной комплектации любой ОС.
Поэтому если указать отображение текста этим шрифтом, то большинству пользователей вместо него будет показано что-то непонятное.
Да, в печати это не имеет особого значения, но в Интернете все равно нужно заботиться о пользователях.
В данном случае мне пришлось все делать с графикой, написав альтернативный текст для тех, у кого нет картинок.
Но это всё равно порнография, ИМХО.
Итак, есть еще одна вещь, которую я рекомендую отметить на своем носу:
Не злоупотребляйте графикой.Стандартные шрифты также прекрасны, и поисковая система с большей вероятностью заметит текстовый заголовок, чем альтернативный вариант изображения.
И далее.
Опять же, если вы не делаете статические страницы на People.ru, а это позавчера, то пора наконец узнать, что большинство элементов веб-страницы генерируются автоматически, и поэтому многие элементы выполнены по той же модели и имеют стандартный дизайн.
Я сказал СТАНДАРТ! А потом на тех блоках с графическими заголовками, которые по идее должен отображать один скрипт по одному примеру, были ещё и фреймы.
В одном блоке отступ этого кадра 20 пикселей, в другом 15, в третьем совершенно непонятно, куда он делся.
А так как оно органично вошло в заголовки и заморачиваться с переделкой как-то не хотелось, то и рамки вообще убрали.
Да, заголовки тоже лежат несколько неравномерно из-за разного размера картинок под текст. И нужно ли сообщать выходному скрипту, что именно в «ТОЙ ячейке» нужно изменить положение содержимого? Мораль этой истории такова:
Следуйте тому же стилю.И, наконец, научитесь пользоваться инструментом «выравнивание», который есть в любом серьезном графическом редакторе.Пожалейте автоматику.
Вот такая тирада.
Пожалуйста, не повторяйте ошибок, описанных выше.
В противном случае это только укрепит мнение о том, что
Принтерам НЕЧЕГО делать в веб-дизайне!Теги: #дизайн #ИМХО #веб-разработка #Чулан
-
Интернет-Магазин И Другие Обновления
19 Oct, 24
