Четверг, 18.08.2011, 13:46
Пользователь
Веб-дизайнеру на заметку - Простенькие советы, от Макарова Александра.
Учитывайте, что у всех пользователей разные мониторы
Подумайте, как ваш дизайн будет смотреться и вести себя, если размер монитора больше или меньше, чем размер макета.
Кстати, размер экрана — не одно и то же, что и размер окна браузера. При использовании разных браузеров дополнительное место занимается различными элементами интерфейса, своими для каждого браузера. К тому же, пользователь может и не разворачивать браузер на весь экран.
Да, упомяну на всякий случай: картинки с изменением размеров окна браузера не увеличиваются и не уменьшаются.
Учитывайте, что информации может стать больше или меньше
Веб — штука динамичесская, поэтому высота и иногда ширина блока с информацией, число пунктов меню и т.д. меняются. К примеру, если нарисовать круглую менюшку, добавить несколько пунктов впоследствии в неё будет невозможно.
Если используются нестандартные шрифты — приложите их к макету
Всё, что в макете написано нестандартным шрифтом в итоге отверстается картинкой.
Бывает, что заказчик хочет изменить некую надпись. Например, с "Статьи" на "Обзоры". При этом оказывается, что надпись сделана нестандартым шрифтом, а взять его негде.
Список стандартных для Windows шрифтов
* 'Arial', sans-serif;
* 'Arial Black', sans-serif;
* 'Comic Sans MS', fantasy;
* 'Courier New', monospace
* 'Franklin Gothic Medium', sans-serif
* 'Garamond', serif
* 'Georgia', serif
* 'Impact', sans-serif
* 'Lucida Console', monospace
* 'Lucida Sans Unicode', sans-serif
* 'Microsoft Sans Serif', sans-serif
* 'Palatino Linotype', serif
* 'Sylfaen', serif
* 'Tahoma', sans-serif
* 'Times New Roman', serif
* 'Trebuchet MS', sans-serif
* 'Verdana', sans-serif
Никогда не растеризуйте текст
Верстальщику очень неудобно перебивать текст вручную смотря на картинку.
Не используйте сглаживание и размытие на тексте до 18px
Текст сглаживается отнюдь не во всех браузерах. Во многих (Firefox, Opera) сглаживается только текст начиная с некоторого размера. Поэтому часто получается, что в макете изображено нереализуемое в виде мелкого сглаженного текста.
[spoiler] [/img]http://rmcreative.ru/img/for-designers/text.png[/img][/spoiler]
Если всё же решили показать сглаживание для крупного заголовка — используйте режим сглаживания Sharp.
[spoiler][/spoiler]
Добавлено (27.04.2009, 21:22)
---------------------------------------------
Не используйте тени у текста
Во-первых, кроме как картинкой или страшными ухищрениями не реализуется. Во-вторых, текст без тени читается гораздо лучше.
[spoiler] [/spoiler]
Не стоит сливать все элементы дизайна в один слой
Вместо слития слоёв раскладываем их по группам.
Давайте слоям и группам нормальные осмысленные названия
Имена слоёв вида "Layer 1" очень и очень затрудняют работу как верстальщика, так и самого дизайнера. Особенно сильно это ощущается, когда их количество переваливает за 10.
Используйте заметки (Notes) для описания не показанного на макете поведения
Как правило у верстальщика возникают вопросы о том, как должен вести себя сайт: как растягиваться при увеличении и уменьшении окна браузера, что должно оставаться на месте при прокрутке текста, что нет и т.д. В Adobe позаботились об этом включив в Photoshop такой замечательный инструмент как Notes.
[spoiler] [/spoiler]
Раскрашивайте слои
Для большей наглядности можно раскрасить слои разными цветами.
Использованы скриншоты с макета faZeful-а, скриншот сайта центра антикризисных технологий «Лист». |
|
