Undsoft.com

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

Разработка макетов под веб имеет свою специфику, что не всегда учитывается дизайнерами. Иногда приходится просить переделывать. Довольно часто бывает нужно объяснять, что я, как программист, смогу реализовать, а что — нет.

В этой статье я рассмотрю основные моменты, которые следует учитывать дизайнеру при разработке макета сайта. Будем надеяться это упростит жизнь, как дизайнеру, так и программисту, который будет потом работать с этим макетом.

Итак, вот они, эти самые моменты.

0. Все можно сделать

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

Но на практике — многие решения бывают слишком «дорогими» с точки зрения временных затрат или доступности для пользователя.

Пример — эффекты шрифтов. Предположим вы нарисовали что-то с красивым вдавленным текстом.

Нет ничего невозможного. Программист может сделать так, чтобы этот текст с макета остался текстом на веб-страничке и сохранил при этом эффект вдавливания. Но для этого ему придется использовать дополнительные технологии и/или это будет работать не во всех браузерах — некоторые пользователи увидят обычный текст без вдавливания.

Программист также всегда может взять и просто сохранить это картинкой. Выглядеть будет абсолютно также, но пользователь не сможет выделять и копировать текст, а поисковые системы (Google, Yandex) не смогут «увидеть» этот текст на странице. На практике так поступают достаточно часто.

Я это все к тому, что советы ниже не являются абсолютными. Сделать можно все, что угодно, просто соизмеряйте стоит ли оно того. Если это «фишка» сайта или еще какой-нибудь важный момент, напрягайте программиста, если это не критично и можно заменить на более удобное решение — почему бы так не поступить?

1. Шрифты

У дизайнера на компьютере — множество красивых шрифтов. Однако, на компьютерах пользователей этих шрифтов может не оказаться. У пользователей Windows, Linux и MacOS разные наборы стандартных шрифтов. Возможно, тот шрифт, о котором вы думаете как о стандартном, есть далеко не у всех.

Есть список шрифтов, которые вы можете спокойно использовать и которые найдутся у пользователей разных систем. Они называются web safe fonts. Arial и Times New Roman являются такими «безопасными» шрифтами, в то время как Myriad Pro и Calibri — нет.

Опять же — нет ничего невозможного. Логотип компании с  красивым шрифтом программист может вставить картинкой. При необходимости может использовать JavaScript.

Можно сделать так, чтобы, если у пользователя есть задуманный шрифт, то отображаться будет он, а если нет — то какой-нибудь стандартный. Но это требует времени, а иногда и объяснений заказчику, почему у него сайт отображается не так, как макет

2. Сглаживание шрифтов

В Фотошопе есть несколько вариантов сглаживания шрифтов: Sharp, Crisp, Strong, Smooth. В браузерах используется системное сглаживание, которое обычно работает иначе, чем сглаживание в Фотошопе.

Шрифт на макете и на странице скорее всего будет выглядеть немного по-разному в любом случае, но вы можете уменьшить отличия, поставив сглаживание на Smooth или Crisp. Обычно этот вариант, который наиболее похож на то, что предлагает браузер.

Разные сглаживания в Photoshop и моем браузере (Firefox, Windows 7).

3. Другие характеристики шрифтов

При работе со шрифтами не стоит полагаться на градации насыщенности шрифта — во многих браузерах вообще существует только два состояния насыщенности: уже жирный и еще нет.

Не стоит пользоваться Faux Bold — в браузере это можно будет повторить только увеличив насыщенность шрифта, а это не будет выглядеть так же красиво.

Но есть и хорошие новости. Множество остальных настроек из фотошопа для текста можно реализовать и в браузерах:

• капитель
• межстрочные и межбуквенные интервалы
• курсивное и наклонное начертание для любых шрифтов (фактически Faux Italic из фотошопа)
• отступы первых строк в абзаце
• другое начертание для первой буквы или первой строки абзаца

Продолжение

Видимо на меня напала графомания, потому что я планировал осветить тему в одном посте. Но раз уж этот пост получился достаточно большим — разобьем тему на несколько.

Ожидайте продолжение.