strokoff
Признаки плохого веб-дизайна
Сегодня я хочу рассказать о некоторых замечаниях, подводных камнях и показать пару примеров плохого тона в веб-дизайне. На примере посмотрим, какие ограничения и особенности есть при проектировании веб-дизайна, его художественном исполнении. Данный пост будет полезен для дизайнеров и менеджеров работающих с дизайнерами и ведущими проекты в сфере веба и мобильных приложений.
1. Текст vs картинка с текстом
При верстке веб сайтов, доступные огромные возможности для различных ухищрений с отображением текста, возможностей море, но не без ложки дегтя. В целом, мы можем подгрузить на сайт любой доступный шрифт и при наличии необходимых форматов, мы даже можем обеспечить поддержку IE8+. Но есть пара особенностей, которые усложняют отображение текста на устройствах. Первичные проблемы возникнут с отображением текста залитого градиентом, к счастью есть замечательное свойство у CSS -webkit-background-clip: text; но это только для веб-кита, а есть еще куча мобильных устройств и замечательный браузер IE. При разработке к примеру сайтов промо акций для всей России, такое просто невозможно забывать, а если к тексту применен еще и радиальный или более «дизайнерский» градиент, то мы остаемся бессильны. Лучше сразу не выдумывать «костылей» для сайта и вставлять такой текст картинкой. Но если такое еще использовать для всех заголовков, можно свести с ума верстальщика и сильно увеличить «размер» сайта из-за множества картинок. Вторая вещь, с которой часто возникают проблемы, это тень текста, у верстальщика есть возможность только указать ее смещение по x, y и уровень размытия и все, и плюс десяток теней для шрифтов на сайте и у вас начнутся тормоза при прокрутке на мобильных устройствах и некоторых пк. В фотошопе у дизайнера возможностей для таких манипуляций куда больше и играть они с значениями этими любят. Дизайнерам на заметку
Заливка градиентом текста и тени у шрифтов, в веб-дизайне — плохо
2. Интерфейсы
Конечно, можно сказать, что кнопки и интерфейсы можно рисовать каждый, как хочет и на все воля дизайнерская. Но есть пара подводных камней. Первое, это размер кнопок. Если сделать кнопки очень красивыми и уникальными, то как и с шрифтами, придется каждую нарезать отдельно, что опять же — время. Если же в компании существует поточная штамповка макетов к примеру для админок и личных кабинетов, то дизайнерам стоит обзавестись PSD UI набором интерфейсов, для быстрого прототипирования макетов.
Пример кнопок, которые не поддаются трансформации
На данный момент (2015) год идет повальная тенденция и мода на flat дизайн. Т.е. плоский, отличительные черты его в использовании плоских элементов, как правило без теней. Или с длинными плоскими тенями.
Пример flat-интерфейса
Кстати очень много иконок дизайнеры могут найти здесь http://www.flaticon.com/ и заранее подготовить себе набор элементов, в дальнейшем отдельные иконки, в формате svg ускорят верстку сайта, а также будут гарантировать четкость всех элементов на retina дисплеях. Данный подход не говорит о том, что всем массово стоит переходить на flat (хотя в мобильном рынке так по сути и есть) ускорение загрузки страниц, увеличивает конверсию, оптимизации над сайтом\приложением проводятся на самых разных уровнях. Забавное сравнение двух подходов к дизайну, вы можете посмотреть здесь http://www.flatvsrealism.com/
Помимо всего, не стоит в дизайне забывать и о том, что у кнопок и вообще разных элементов могут быть различные состояния, и не все дизайнеры об этом заботятся. Набор стандартных состояний для кнопки: обычная, при наведении, при клике, отключенная, а еще может быть множество других, к примеру, процесс загрузки, статус ошибки и т.п. Если вам дали макет, без таких подробностей, вряд ли кто-то станет это потом вспоминать, а в компании с корпоративным критинизмом и вовсе такой вопрос, может вылиться в целую дискуссию, на тему «какой должна быть эта кнопка при наведении». Дизайнеру на заметку
Предварительная подготовка элементов управления интерфейсом, значительно экономит время на разработку проекта.
3. Сетка и типографика
В издательском деле и при верстке печатной продукции, существует огромное количество правил набора и верстки текста для дизайнера, типа «не делай коридоров, не оставляй висячих строк, не переноси фамилию и инициалов на разные строки и т.п.» В веб дизайне к сожалению возможность управлять коридорами, отсутствует, как и возможность играться отдельно в предложениях с кернингом, и выключкой. И за висячими строками тоже не уследишь, в полиграфии формат конечный известен. В вебе, в конечном формате смотрят на сотне устройств и предсказать поведение текста везде невозможно. По этому при проектировании, стоит учитывать то, что к примеру на формате 1980 (HD) и 1024 (прим. ipad) высота контента будет разной, и дизайн при этом не должен развалиться, такая проблема существует и изображений с конкретной картинкой
Дизайнеру на заметку
Фон в виде большой картинки хорош, но возможность его растягивать отсутствует.
Тоже самое относится и к блокам, при изменении разрешения, непонятно как их растягивать и ужимать. Эту проблему частично решает использование сетки, вообще использование сетки в веб-дизайне это хороший тон. Количество колонок в сетке может быть любое, но самым распространенным вариантом является 12 колоночная верстка. 12 именно потому, что это число без остатка делится на 2,3,4,6 и позволяет наиболее гибко управлять расположением информационных блоков.
Пример 12 колоночной сетки на веб-дизайне
Скачать файлы шаблонов сеток для веб-дизайна, можно например здесь 960.gs .
4. Фотошоп VS браузеры.
В фотошоп есть все инструменты, для того, чтобы реализовать любой творческий потенциал, но к сожалению в вебе, именно для творческого потенциала и художественного оформления, мало что, заточено. При разработке макетов, стоит помнить, что браузеры ничего не знают, про функции фотошопа по рендерингу шрифтов. Различные виды рендеринга Crisp, Smooth и т.п. есть только в фотошопе. В браузере их нет и каждый браузер решает сам, как лучше ему и как может он отрендерить данный шрифт, не последнее слово в этом процессе еще играет операционная система пользователя.
Также стоит избегать приемов с использованием наложения слоев. Таких фишек как в фотошопе типа «multply, soft light, difference и т.д. просто нет. Все слои с режимами наложения, перед сдачей на верстку, обязательно должны быть растрированы и элементы сведены в 1 слой.
Также хороший дизайн выдают продуманные отступы. Не стоит забывать визуально проводить линии и располагать элементы на сетке и согласно «этическим нормам», вы же не набираете заголовки с табуляцией в начале. Так и отступы между заголовками и параграфами, иконками и текстом, внутренними отступами в кнопках и прочем, при своем единстве, делают дизайн более аккуратным и привлекательным.
На этом все, пишите, буду рад дополнить статью вашими примерами.