Частые ошибки в веб-дизайне

Дата публикации: 2011-08-14

ошибки веб-дизайна

Все мы делаем ошибки. Это – человеческая натура. Однако в индустрии веб-дизайна множество элементов можно выполнить неправильно при помощи всего-навсего нескольких внесенных поправок, необходимых для того, чтобы они стали выдающимися. Это касается всего – от типографской разметки текста до отступов, где единственный символ может радикально испортить весь проект. К счастью, если вы в состоянии определить самые частые ошибки, несколько щелчков мышью и касаний клавиатуры могут спасти тонущий корабль. Сегодня мы рассмотрим некоторые из них, которых должен остерегаться любой дизайнер.

веб-дизайн

Типографская разметка текста

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

Sans Serif vs Serif

Я предполагаю, что читатель знает, что за шрифт serif font.

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

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Узнать подробнее

Не имеется в виду, что смешивание шрифтов serif и sans-serif никогда не срабатывает. В действительности, в некоторых случаях это смотрится довольно хорошо, особенно когда эти типы шрифтов используются на различных уровнях иерархии. Например, A List Apart применяет шрифт serif для заголовка, используя при этом sans-serif для основного контента.

разметка текста

Количество шрифтов

Другая крупная ошибка, о которую спотыкаются некоторые дизайнеры – это использование множества разных семейств шрифтов вместо тщательно подобранной пары. Применение многих шрифтов может привести к разобщенному дизайну, разрушающему читабельность вашего контента. Употребление одного семейства шрифтов на уровень визуальной иерархии дизайна вместо многошрифтового содержимого в общем создает красивую шрифтовую схему, которая смотрится гораздо более единой, чем куча наудачу отобранных стилей.

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

Недостаток контрастности

Главный вопрос, который может появиться – это недостаток контраста между типографской разметкой текста и фоном. Таким образом, возникнет настоящая проблема читабельности, так как некоторым пользователям будет трудно различить два набора цветов. Возьмите приведенный ниже пример. Что легче читать, то, что написано слева или справа? Правильно, слева!

контрастность

За контрастностью не стоят сложные теории. Вы не станете писать черным по черному фону, потому что не различите, где написанное, а где фон. Единственное предложение заключается в том, чтобы сделать цвет текста максимально противоположным фону, не вредя другим эстетическим качествам, во избежание разочарования со стороны пользователя. Тема Ellipsis в области верхнего заголовка демонстрирует хороший контраст. Подошли бы сюда вместо этого розовый или пурпурный цвета?

контрастность

Отступ, поля и интервалы

Мы больше не боремся с маленьким мониторами (здесь имеются в виду в основном настольные мониторы, не смартфоны). Вместо этого мы живем с 21-дюймовыми экранами и плаваем по Сети при разрешениях более высоких, чем HD, что дает дизайнерам больше пространства для работы. Следовательно, вам совсем не нужно чувствовать себя стесненно и посвящать больше пространства отступу и полям в целях улучшения эстетического вида своего проекта. Возьмите, к примеру, дизайн Apple; в нем используется много белого пространства, сосредотачивая весь цвет и действие на представляемом контенте. Не то, чтобы я имел в виду, что вам нужно много белого пространства, но ваш проект мог бы выиграть в контрастности от такого разделения, когда можно было бы легко отличить все друг от друга.

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Узнать подробнее

Важно применять как можно более постоянные и равные интервалы на протяжении всего проекта, как во внутренних отступах, так и во внешних полях. Для примера посмотрите приведенную внизу диаграмму. Нижняя половина смотрится гораздо лучше, потому что все поля одинакового размера в 18px. Все выровнено по одной сетке разметки. Она четкая, каждая область отделена от других, и не обязательно тратить впустую какое-либо пространство.

Отступ, поля и интервалы

Решетчатые системы

Точно так же сетка – это важная черта самых успешных веб-дизайнеров. Применение сетки упорядочивает и делает дизайн аккуратным при использовании последовательных внутренних полей. В проекте, основанном на сетке, все отлично организовано. Этого раздела нет в этой статье, потому что не применять ее было бы ошибкой, но сочтите сетку решением проблемы, когда чувствуете, что ваши проекты не имеют успеха в содействующей области.

Сохранение устаревших ценностей

Индустрия веб-дизайна быстро шагает вперед, постоянно появляются новые разработки. Одной из самых худших вещей, которая может повредить вашему дизайну, являются продолжение разработок и дизайна способами, популярными несколько лет назад. В 2003г. у Microsoft Frontpage был инструмент для "таблиц разметки" ("layout tables"), но ни один хороший разработчик никогда не осмелился бы открыть тэг таблицы во имя разметки. Точно так же забавные анимированные GIF’ы и фоновая музыка прошлого десятилетия – это серьезное табу. Да, и даже не думайте об использовании рамок в качестве части своего веб-проекта. При всех современных проблемах юзабилити (простоты использования) и прочие вопросы – да и вообще сейчас так уже не делается.

Сохранение устаревших ценностей

Пропорции и размер

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

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

Пропорции и размер

Вы, возможно, также слышали о божественной пропорции, или "золотом сечении". Пока не каждый проект обязан подходить под этот принцип, большей части стандартных дизайнов, возможно, следует попробовать его любой ценой. Соотношение 1 к 1,62 (в закругленной фигуре) общеизвестно как золотое соотношение, и не просто применяется в веб-дизайне, несмотря на то, что мы заслуживаем некоторого уважения за его использование.

Золотое сечение представляет равновесие в веб-дизайне с тех пор, как люди к нему привыкли; отношение длины предплечья к длине кисти – 1 к 1,62, как и в человеческой улыбке. Счесть кого-либо привлекательным тоже можно, основываясь на золотом соотношении, отчего мы относимся к нему как к "естественному". Придерживаясь его, можно сделать веб-проект хорошим и успешным, так как он более понятен пользователю.

Забывая, зачем вы это делаете

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

Автор: Connor Turnbull

Источник: http://webdesign.tutsplus.com/

Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Узнать подробнее