(495) 925-0049, ITShop интернет-магазин 229-0436, Учебный Центр 925-0049
  Главная страница Карта сайта Контакты
Поиск
Вход
Регистрация
Рассылки сайта
 
 
 
 
 

Как не поссориться с верстальщиком, или 10 правил хорошего тона в web-дизайне

Источник: habrahabr
AlexSharpz

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

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

Чуть не забыл: огромная просьба об ошибках (грамматических, пунктуационных и т.д.) писать в личку, либо в комментарии. Заранее спасибо.


1. Не плоди лишних слоев

image

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

Уделив 10 минут своего времени на "чистку" файла, вы не только сможете избежать неожиданных результатов верстки, но и неприятных моментов в общении с верстальщиком.

2. Прикрепи несистемный шрифт к проекту

image

Вы дизайнер и, конечно же, у вас есть куча крутых шрифтов на все случаи жизни. Но, к сожалению, Photoshop не прикрепляет их к PSD-файлу. В итоге, на машине, где не будет шрифтов, которые вы используете, в файле останутся только шейпы в форме надписей. Т.е. редактировать их как текст верстальщик уже не сможет. Да, и вставлять в макет текст в виде картинки - моветон. Для этого давно придумали @font-face.

Будьте ближе к людям - закиньте все несистемные шрифты в папку с проектом.

3. Называй фаилы латиницей

image

При экстпорте файлов с PC на MAC файлы часто теряют свои названия. Все из-за разной кодировки в операционных системах. Если не хотите доставить коллеге лишних неудобств - называйте файлы так, чтобы не возникло никаких проблем. Да, и смотрится "layout" круче, чем макет.

4. Систематизируй макет

image

Это, наверное, единственная вещь, которую верстальщик никогда не простит дизайнеру. Люди воспитанные кодом, в основном, не любят беспорядка в работе. Не заставляйте их капать кипящей слюной на клавиатуру - раскидайте слои по папкам. Все-таки, вам как человеку, который делал это все с нуля будет легче, чем тому, кто впервые видит макет.

5. Используй целые значения

image

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

Во-вторых - не все браузеры поддерживают дробные значения величин. А посему, они просто округляются до целого, и при просмотре сверстанной страницы всё равно "будет по-нашему".

В-третьих - в конце концов, чем вас не устраивает текст, набранный, допустим, 24-м кеглем, а не 23,875-м?

6. Используй ZIP архивы

image

Снова вспоминая про владельцев "яблочных" машин, стоит сказать, что почти все архиваторы на MAC-ах криво распаковывают RAR. Возникает куча проблем с названиями, кодировкой, и т.д.

Не усложняйте жизнь верстальщику и себе - пакуйте проект в ZIP.

7. Старайся реже использовать растр

image

Растр в работе намного "деревяннее", чем векторные (или псевдо-векторные) элементы. Шейпы намного более гибкие и удобные в работе, и у них много преимуществ перед растром.
Мало ли что придется подправить.

8. Учи код

image

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

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

9. Грамотно сохраняй файлы

image

Алгоритм обработки изображений при сохранении в Photoshop не идеален, и подходит, скорее, для сохранения фотографий, или макетов для печати. Для веба всегда сохраняйте файлы через "Save for Web and Devices…". Это существенно сократит размер файла, а на качестве изображения никак не скажется.

10. Общайся с коллегами

image

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

Спасибо за внимание. Надеюсь статья окажется полезной. До встречи.

Ссылки по теме


 Распечатать »
 Правила публикации »
  Написать редактору 
 Рекомендовать » Дата публикации: 23.07.2012 
 

Магазин программного обеспечения   WWW.ITSHOP.RU
VMware Horizon 7 Standard : 10 Pack (CCU)
IBM Domino Enterprise Server Processor Value Unit (PVU) License + SW Subscription & Support 12 Months
Delphi Professional Named User
Quest Software. SQL Navigator for Oracle
Microsoft Office 365 Персональный 32-bit/x64. 1 ПК/MAC + 1 Планшет + 1 Телефон. Все языки. Подписка на 1 год.
 
Другие предложения...
 
Курсы обучения   WWW.ITSHOP.RU
 
Другие предложения...
 
Магазин сертификационных экзаменов   WWW.ITSHOP.RU
 
Другие предложения...
 
3D Принтеры | 3D Печать   WWW.ITSHOP.RU
 
Другие предложения...
 
Новости по теме
 
Рассылки Subscribe.ru
Информационные технологии: CASE, RAD, ERP, OLAP
Безопасность компьютерных сетей и защита информации
Новости ITShop.ru - ПО, книги, документация, курсы обучения
Программирование в AutoCAD
Компьютерный дизайн - Все графические редакторы
Вопросы и ответы по MS SQL Server
Мастерская программиста
 
Статьи по теме
 
Новинки каталога Download
 
Исходники
 
Документация
 
 



    
rambler's top100 Rambler's Top100