О чем должен помнить веб дизайнер при рисовании макета

За всю свою практику веб разработок приходилось работать с разными дизайнерами. Несомненно все талантливы по своему, но многие не знают особенности верстки сайтов и технические аспекты, с которыми сталкивается программист. Попробую их здесь расписать.

1. Arial Narrow.

Так любимый многими дизайнерами шрифт "Arial Narrow" есть далеко не на всех компьютреах и вместо него отображается "Arial", который более широк.

Оригинал Arial Narrow:

В отсутствии Arial Narrow используется Arial:

2. Соотношение сторон изображений.

Современные цифровые фотоаппараты выдают изображения с соотношением сторон 4:3. Поэтому не надо рисовать фотогалереи абы как придется. Да, программно можно изменить картинку под те размеры, которые вы нафантазировали, но придется пожертвовать частью изображения. Вам же не понравится, если при загрузке в социальную сеть вашу фотографию обрежут так, что вы будете без какой-то части тела.

3. Навигация

Кроме заголовка страницы часто пользователь видит путь, где он находится. Не забывайте рисовать этот путь.

4. Формат исходного макета.

В интернете используется растровая графика, поэтому не надо рисовать макеты в Corel Draw или Adobe Illustrator, если вы все-таки это сделали, то будьте добры перевести все в PSD или сразу нарежьте для верстки.

5. Favicon

"Favicon" - это значок сайт. Отображается рядом с адресом сайта в браузере, на вкладках браузера, в выдаче Яндекса слева от названия сайта. Favicon имеет размеры 16х16 пикселей и формат ico. Когда есть favicon сайт выглядит более презентабельным, его проще найти, когда открыто много вкладок и при поиске сайта в поисковиках.

6. Sharp

Дизайнеры, пожалуйста, не ставьте в фотошопе свойство "Sharp " для текста, который не будет картинкой. Во-первых, ваш макет будет отличаться от живого сайта. Во-вторых, не будет вопросов как делать те или иные тексты на сайте - т.к. шрифты большого размера на сайте будут отображаться "лесенкой". И в третих, при верстке можно обойтись без фотошопа, определяя шрифт на глаз.