Я боролся с названием этой статьи. Это должно быть: «10 распространенных ошибок, которые делают художники-графики, которые думают, что они веб-дизайнеры, и передают вам файл PhotoShop без какого-либо понимания среды». Не очень быстро, но именно это я и имел в виду.
В этом посте есть серьезное замечание. Неважно, выходите ли вы с точки зрения дизайна или разработки, те же ошибки совершаются людьми, которые называют себя «веб-дизайнерами». Итак, вот мой список любимых мозгов…
1. Не принимайте во внимание окно просмотра браузера
Проблема с плоскими макетами PhotoShop заключается в том, что они имеют фиксированную высоту и ширину, а браузер — это окно с переменными размерами. Это особенно проблематичная концепция для тех, кто имеет опыт работы в полиграфическом дизайне.
HTML / CSS кодер должен знать, что происходит, когда браузер расширяется или уменьшается за пределы размеров вашего макета. Фоновая плитка? Это исчезает в пробел? Размеры элементов изменяются? Является ли ширина переменной, но только в определенных пределах? Ваш дизайн не завершен, пока у вас нет ответов на эти вопросы.
Что бы вы ни делали, не пытайтесь ограничить поведение браузера. Однажды дизайнер попросил меня открыть новое окно браузера с фиксированными размерами, чтобы их дизайн работал. Браузер не был проблемой …
2. Обеспечение фиксированной высоты и ширины
В идеальном мире весь контент будет написан до создания дизайна. Этого не происходит, и даже если это произойдет, текст, безусловно, изменится. К сожалению, начинающие дизайнеры редко учитывают влияние добавления или удаления текста из элемента. Их 5 строк текста «Lorem Ipsum» идеально сочетаются, и они счастливы.
Навигационные структуры особенно важны. Подумайте, что происходит, когда страницы добавляются и удаляются с сайта — есть ли место для дополнительных пунктов меню?
3. Делать предположения о пользовательском опыте
Из-за того, что у вас 24-дюймовый монитор 1920 × 1080, не значит, что у всех пользователей одинаковое оборудование. В мобильном мире еще хуже — дизайнеры и разработчики редко думают об устройствах, отличных от собственного смартфона.
4. Субпиксельные макеты
Ваш графический макет 300 DPI никогда не будет выглядеть одинаково на экране 72 DPI. Браузеры показывают целые пиксели; Вы не можете отрендерить половину пикселя.
5. Нет понимания стеков шрифтов
Типография в Интернете становится все проще, но по-прежнему невозможно использовать любой шрифт, который вы пожелаете. Не каждая ОС / браузер поддерживает шрифт, который вы хотите использовать. Некоторые коммерческие шрифты не могут быть распространены. Некоторые из них не очень хорошо работают на экране, даже если в PhotoShop он выглядит великолепно с разрешением 10,5 точек.
6. Не учитывая практические аспекты разработки
Типичный пример: заголовки с причудливыми шрифтами и эффектами, которых можно добиться только с помощью графики. Хорошо, если на вашем сайте 5 страниц, но что, если на нем 500 страниц? Как насчет 5000? Дизайнеры вскоре осознают свою ошибку, когда их просят создавать 57 уникальных названий каждый день.
Последовательность является еще одним фактором. Если вы используете значки размером 96px 2 , не меняйте их на 98px 2 на другом макете, потому что вы не можете заставить один значок выглядеть правильно.
7. Забыть о ссылках
Ссылки являются основой Интернета. Если вы не различаете ссылки по цвету и / или стилю, вы создаете фундаментальные проблемы для своих пользователей.
Многие эксперты по юзабилити утверждают, что текст с синим подчеркиванием должен использоваться во всех ситуациях. Я не обязательно согласен с этим ограничением, но, что бы вы ни делали, никогда, никогда, никогда не используйте текст с синим подчеркиванием для чего-то, что не является ссылкой!
8. Нет мыслей для анимации или эффектов
Одним из худших аспектов макетов PhotoShop является то, что они не могут отображать типичные эффекты HTML, CSS или JavaScript, такие как ролловеры или анимация. Это хороший аргумент для того, чтобы не использовать графический пакет при представлении своих идей: работающий прототип браузера обеспечит более реалистичные ожидания .
9. Причудливые или недоступные элементы управления
Контроль формы скучен. Почему бы нам не превратить это текстовое поле в карат?
Элементы управления формой могут быть неинтересны, но браузеры могут легко их отобразить, и пользователи их понимают. Есть случаи, когда вашему приложению требуется уникальный элемент управления, который недоступен в стандартном HTML, но эти ситуации являются скорее исключением, чем нормой.
Поклонники прогрессивного улучшения скажут вам, что модные слайдеры или палитры цветов хороши, но убедитесь, что под поверхностью используется стандартный HTML. Ваше приложение будет продолжать работать, если у пользователя отключен JavaScript.
10. Небольшая оценка технологий
HTML и Flash одинаковы — они в браузере, верно?
С помощью Flash вы можете делать вещи, которые практически невозможны в HTML (хотя HTML5 надеется изменить это). Точно так же вы можете делать вещи в HTML, которые нецелесообразны во Flash. Вы напрашиваетесь на неприятности, если не обсуждали технологии с клиентом и разработчиком.
Достаточно моего разглагольствования. Какие аспекты начинающих веб-дизайнов раздражают вас больше всего?
(Сердитые дизайнеры теперь должны перейти к 10 распространенным ошибкам, совершаемым начинающими веб-разработчиками …)