Все мы делаем ошибки. Это – человеческая натура. Однако в индустрии веб-дизайна множество элементов можно выполнить неправильно при помощи всего-навсего нескольких внесенных поправок, необходимых для того, чтобы они стали выдающимися. Это касается всего – от типографской разметки текста до отступов, где единственный символ может радикально испортить весь проект. К счастью, если вы в состоянии определить самые частые ошибки, несколько щелчков мышью и касаний клавиатуры могут спасти тонущий корабль. Сегодня мы рассмотрим некоторые из них, которых должен остерегаться любой дизайнер.
Типографская разметка текста
Разметка текста – одна из самых важных характеристик дизайна. В большей части проектов текст доминирует, так что хорошо подобранные шрифты могут стать ключом к раскрытию потенциала вашей темы. Существует множество ошибок, совершаемых новичками или бывалыми дизайнерами, которые могут просто ухудшить привлекательный в прочих отношениях вид типографской разметки текста на странице.
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
Узнать подробнее
Веб-дизайн. Быстрый старт
Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma!
Смотреть видео
Статья об ошибках в дизайне сайта очень актуальна. Спасибо
Спасибо за материал! Как раз работаю над сайтом и советы пригодятся.
Ну, откуда вы взяли на практике большое количество шрифтов? Разработчик еще может найти большую кучу, но у него нет никакой уверенности, что аналогичные шрифты будут у посетителей сайта, который он разрабатывает. Выбор доступных невелик: реальных всего штук шесть.
Уже давно имеется возможность использовать нестандартные шрифты на сайте, даже если их нет у пользователя…и таких технологий немало…:)
ага, пример технология svg
Вы действительно считаете, что технолония svg реальный конкурент технологии TrueType в области шрифтов?
Нет не считаю, привел просто пример, так как эта векторная технология мне пришлась по душе
Я имею в виду не те шщрифты, которые вы используете в своих заголовках и с которыми работаете, как с изображениями. А шрифты TrueType.
Можно, конечно, заставить пользователя установить такие шрифты, предоставив ему ссылку на сответствующий источник, или поместив шрифт на свой сайт. Но это снижает вероятность их активного использования.
Хотелось бы знать, какие конкретно технологии вы имеете в виду. Укажите?
Например есть сайт
где можно конвертировать любой шрифт в соответствующие форматы и в стилях прописывать ссылку на этот шрифт. Если знаете англицкий разберетесь…
Я еще в самом начале пути и многое просто в новинку, спасибо за полезный материал.
Спасибо, отличные рекомендации. Остался только вопрос о соотношении 1 к 1,62. Как все-же и где оно может применяться?
Очень актуальная тема шрифтов и разметки текста.
спасибо за материал.
Спасибо за информацию, очень полезная. Правда перевод немного неказистый, но это ничего.
Ничего нового. Статья для поступающего в 1-й класс школьника. Это прописные истины — азбука вебстроительства. Более того — считаю, что все индивидуально для каждого сайта. Бывает, что и нестандартно поступить надо и это оправдывает.
Да и вообще считаю, что дизайн сайта сейчас выходит на второе место. На первом месте — контент.
Будьте оригинальнее Андрей, а то статья похожа на то, чтобы вас не забывали.
Виталий! Ты, наверное гуру? Тогда зачем зашел на этот сайт?
Контент на первом месте для поисковиков, а качественный дизайн — это не просто набор красивых картинок, а наличие стиля, удобства для пользователя, грамотная подача (выделение) самого главного в этом самом контенте. Встречают все-таки «по одежке», но чтобы проводить «по уму», надо привлечь посетителя этой самой одежкой, иначе он до контента так и не доберется,а просто-напросто свалит с корявого трудночитаемого сайта, где дизайн «на втором месте»
Виталий, данная статья есть перевод. Виталий, мы Вам крайне признательны, кстати говоря, за Ваше мнение. Т.к. благодаря таким пользователям как Вы, мы понимаем, что именно нужно Вам давать.
Обязуемся быть более оригинальными;) Для этого мы и создавали свой блог, собственно.
Ошибки плохо, но мы на них учимся!
Спасибо за информацию. Я технарь, а вот дизайн у меня страдает) Учусь.
Благодарю за статью, 1,62 попробую на практике.
Спасибо! Очень актуально!
Thanks a lot guys! Как всегда (второй год вас читаю) полезная и доступно изложенная информация. Давно не комментировал, позвольте с опозданием поздравить с новым дизайном сайта, очень симпатично. Я — любитель Джумла, но Вордпресс, конечно, тоже уважаю. Думаю, многим была бы интересна статья о разных CMS, их отличиях, плюсах и минусах. Ещё раз спасибо и удачи вам в ваших проектах.
Есть такая у нас статья.
Вот ссылка: «10 Самых используемых CMS (систем управления контентом)» —
Очнь интересно и думаю многим, в том числе и мне будет полезно.
Спасибо.
Хорошая статья, спасибо. Меня мучает вопрос: использовать ли «резиновую» тему (которая растягивается по ширине экрана) или нет. Никак не решу. Но лично самому не нравится, когда на широкоформатном мониторе сайт занимает лишь треть пространства.
Здравствуйте!
Да, Вы верно это подметили, что разметка текста – одна из самых важных характеристик дизайна.
Забыли сказать про соотношение фона и яркости шрифта. Он не должен резать глаз, т.е. должен быть легко читаемый.
Я очень рада всем Вашим публикациям. Спасибо. Very good.
ахаха))
раздел «Недостаток контрастности» —
правильный ответ: «Правильно, СПРАВА!»
PS белый шрифт на чёрном фоне — это если надо, чтоб перед глазами фон в полосочку с полчаса маячил
Поддерживаю. «Недостаток контрастности» в разумных пределах это совершенно не недостаток, скорее наоборот.
Не согласен также с оценкой вариантов Bad/Good.
Вариант Good симметричен, обычен, а по сему не запоминается зрительно. Вариант Bad атипичен, а поэтому акцентирует на себе внимание и легче выделяется среди других. То есть, больше подходит, если есть желание сделать сайт не типовым.
RE: Автор: Connor Turnbull
Источник:
Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.
======================================
Парни просто перевели и подредактировали , и источник уточнили, что костить-то их?
Сергей, на самом деле мы очень даже хотим видеть мнения и отзывы самых разных окрасок.
Это дает нам понимание того, какой именно контент писать/переводить для Вас.
Вы полагаете, что веб-дизайн — это только шапка страницы?
Действительно полезно, спасибо!)
Особенно «Забывая, зачем вы это делаете» — жизненное.
Спасибо за полезную информацию!
Насчёт статьи для первоклассников — иногда и обычные вещи нужно несколько раз прочитать чтоб в голове уложилось — особенно для начинающих! Столько инфы новой получаешь когда создаёшь свой первый сайт что голова может треснуть наверно
)
Спасибо за статью!
Спасибо за интересную стать о дизайне!!!
Думаю, что сильно приувеличено значение дизайна.
Подумайте, ведь первая же прокрутка прячет дизайн навсегда.
А сайты, у которых страницы не надо скролить, очень редки.
Вы полагаете, что дизайн — это только шапка страницы?
Все очень обстоятельно и отлично проиллюстрировано. Спасибо
Спасибо за статью!
Добрый совет никогда зря не пропадает!!!:)
Хорошая статья!
Статья хорошая, но не оригинальная. В отношении контраста. Иногда излишний контраст утомляет глаза.
Хорошие советы)спасибо большое!
Статья ни о чем!
Все просто — учитесь на примерах выдающихся мастеров, делайте похожие работы, совершенствуйтесь САМИ. В учебниках талант не найдешь… он либо есть, либо его нет.
Нам так понравился Ваш перевод, что мы его украли
Искренне надеемся, что Вам эта идея понравится!
Ваша статья опубликована тут переводыстатей.рф/?p=170
P.S. Мы очень хотим с Вами сотрудничать!
P.P.S. Также искренне верим, что эта идея понравится Вашим уважаемым читателям!
Честно говоря, не понял, какой вид сотрудничества Вы имеете в виду?
В учебниках талант не найдешь, в работах тоже, но прочитать и обратить на это внимание стоит!
ОГРОМНОЕ спасибо за все статьи!