Войти в аккаунт
Хотите наслаждаться полной версией, а также получить неограниченный доступ ко всем материалам?

5 правил хорошего дизайна для web

5 правил хорошего дизайна для web

Приходится ли Вам работать с дизайном, который присылает сам клиент (дизайн выполняется не вашей студией)? Всегда ли получается реализовать тот полёт фантазии, который изображен на PSD? Возможно даже, Вам знакома ситуация, когда, чисто технически, точно сверстать присланный материал не получалось. Припомнили?

Хотели бы Вы, чтобы дизайнер понимал верстальщика, продолжая и дальше мыслить своими художественными категориями, не вдаваясь во все эти "аштиэмэлы" и "цээсэсы"? Обеспечивал верстальщика качественным материалом для вёрстки, который является одним из основных факторов влияющих на время и качество вёрстки?

Соблюдение приведённых пяти правил достаточно, чтобы найти общее понимание с клиентом (предоставте ему эти правила и поясните, что только при их выполнении можно гарантировать 100% соответствие нарисованного со свёрстаным), а так же обеспечить продуктивную совместную работу дизайнера и кодера.

Правило №1: Учитывать динамическое изменение информации в блоке.

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

Правило №2: Текст должен быть в отдельном слое (не растеризованном).

При вёрстке дизайна HTML кодеру необходимо определить все свойства текста (размер, название шрифта, межбуквенное и межстрочное расстояние, высоту линии и т.д.). При растеризации текстового слоя текст становится картинкой, а значит теряет все свойства перечисленные выше. На рисунке, пример растеризованного текста (информация о свойствах отсутствует).

Правило №3: Не использовать сглаживание и размытие на тексте.

Используя нестандартный шрифт для текста (см. рисунок), вы должны понимать, что он может быть не установлен у посетителя. В таком случае текст будет выводиться стандартным шрифтом (который определяется в настройках браузера). У вас же всё будет отображаться, как вы и планировали (у вас же этот шрифт установлен). Используйте нестандартный шрифт для элементов, которые на сайте будут картинками, в других случаях используйте стандартные шрифты, входящие в поставку ОС Windows.
Существует возможность загрузить шрифт пользователю на компьютер (правда, это может быть заблокированно) и технология sIFR(за ссылку спасибо Льву Эйдинову), однако стабильным оба этих способа назвать я немогу. От этого правило №4 считаю по прежнему актуальным.

Правило №5: Все элементы дизайна должны быть в независимых слоях.

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

Источник: habrahabr.ru

{{ rating.votes_against }} {{ rating.rating }} {{ rating.votes_for }}

Комментировать

осталось 1800 символов
Свернуть комментарии

Все комментарии (0)

×
Заявите о себе всем пользователям Макспарка!

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

Оплата данного размещения производится при помощи Ставок. Каждая купленная ставка позволяет на 1 час разместить рекламу в специальном блоке в правой колонке. В блок попадают три объявления с наибольшим количеством неизрасходованных ставок. По истечении периода в 1 час показа объявления, у него списывается 1 ставка.

Сейчас для мгновенного попадания в этот блок нужно купить 1 ставку.

Цена 10.00 MP
Цена 40.00 MP
Цена 70.00 MP
Цена 120.00 MP
Оплата

К оплате 10.00 MP. У вас на счете 0 MP. Пополнить счет

Войти как пользователь
email
{{ err }}
Password
{{ err }}
captcha
{{ err }}
Обычная pегистрация

Зарегистрированы в Newsland или Maxpark? Войти

email
{{ errors.email_error }}
password
{{ errors.password_error }}
password
{{ errors.confirm_password_error }}
{{ errors.first_name_error }}
{{ errors.last_name_error }}
{{ errors.sex_error }}
{{ errors.birth_date_error }}
{{ errors.agree_to_terms_error }}
Восстановление пароля
email
{{ errors.email }}
Восстановление пароля
Выбор аккаунта

Указанные регистрационные данные повторяются на сайтах Newsland.com и Maxpark.com