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

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

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

веб-дизайн

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

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

Sans Serif vs Serif

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Автор: Connor Turnbull

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

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

Хотите научиться создавать шикарные дизайны сайтов?

Получите бесплатную пошаговую обучающую систему по веб-дизайну

Получить

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (49)

  1. Татьяна

    Статья об ошибках в дизайне сайта очень актуальна. Спасибо

  2. Александр

    Спасибо за материал! Как раз работаю над сайтом и советы пригодятся.

  3. Александр Багров

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

    • sergey

      Уже давно имеется возможность использовать нестандартные шрифты на сайте, даже если их нет у пользователя…и таких технологий немало…:)

      • Андрей

        ага, пример технология svg

        • Александр Багров

          Вы действительно считаете, что технолония svg реальный конкурент технологии TrueType в области шрифтов?

          • Андрей

            Нет не считаю, привел просто пример, так как эта векторная технология мне пришлась по душе

      • Александр Багров

        Я имею в виду не те шщрифты, которые вы используете в своих заголовках и с которыми работаете, как с изображениями. А шрифты TrueType.
        Можно, конечно, заставить пользователя установить такие шрифты, предоставив ему ссылку на сответствующий источник, или поместив шрифт на свой сайт. Но это снижает вероятность их активного использования.
        Хотелось бы знать, какие конкретно технологии вы имеете в виду. Укажите?

        • Андрей

          Например есть сайт http://www.fontsquirrel.com/
          где можно конвертировать любой шрифт в соответствующие форматы и в стилях прописывать ссылку на этот шрифт. Если знаете англицкий разберетесь…

  4. Ирина

    Я еще в самом начале пути и многое просто в новинку, спасибо за полезный материал.

  5. CMora

    Спасибо, отличные рекомендации. Остался только вопрос о соотношении 1 к 1,62. Как все-же и где оно может применяться?

  6. Наталья

    Очень актуальная тема шрифтов и разметки текста.
    спасибо за материал.

  7. eugene_lit

    Спасибо за информацию, очень полезная. Правда перевод немного неказистый, но это ничего.

  8. Виталий

    Ничего нового. Статья для поступающего в 1-й класс школьника. Это прописные истины — азбука вебстроительства. Более того — считаю, что все индивидуально для каждого сайта. Бывает, что и нестандартно поступить надо и это оправдывает.
    Да и вообще считаю, что дизайн сайта сейчас выходит на второе место. На первом месте — контент.
    Будьте оригинальнее Андрей, а то статья похожа на то, чтобы вас не забывали.

    • Николай

      Виталий! Ты, наверное гуру? Тогда зачем зашел на этот сайт?

    • Антон

      Контент на первом месте для поисковиков, а качественный дизайн — это не просто набор красивых картинок, а наличие стиля, удобства для пользователя, грамотная подача (выделение) самого главного в этом самом контенте. Встречают все-таки «по одежке», но чтобы проводить «по уму», надо привлечь посетителя этой самой одежкой, иначе он до контента так и не доберется,а просто-напросто свалит с корявого трудночитаемого сайта, где дизайн «на втором месте»

    • Виктор Рог

      Виталий, данная статья есть перевод. Виталий, мы Вам крайне признательны, кстати говоря, за Ваше мнение. Т.к. благодаря таким пользователям как Вы, мы понимаем, что именно нужно Вам давать.

      Обязуемся быть более оригинальными;) Для этого мы и создавали свой блог, собственно.

  9. Дмитрий Денисов

    Ошибки плохо, но мы на них учимся!

  10. Анатолий

    Спасибо за информацию. Я технарь, а вот дизайн у меня страдает) Учусь.

  11. vik

    Благодарю за статью, 1,62 попробую на практике.

  12. Николай

    Спасибо! Очень актуально!

  13. Евгений

    Thanks a lot guys! Как всегда (второй год вас читаю) полезная и доступно изложенная информация. Давно не комментировал, позвольте с опозданием поздравить с новым дизайном сайта, очень симпатично. Я — любитель Джумла, но Вордпресс, конечно, тоже уважаю. Думаю, многим была бы интересна статья о разных CMS, их отличиях, плюсах и минусах. Ещё раз спасибо и удачи вам в ваших проектах.

  14. Николай

    Очнь интересно и думаю многим, в том числе и мне будет полезно.
    Спасибо.

  15. Андрей

    Хорошая статья, спасибо. Меня мучает вопрос: использовать ли «резиновую» тему (которая растягивается по ширине экрана) или нет. Никак не решу. Но лично самому не нравится, когда на широкоформатном мониторе сайт занимает лишь треть пространства.

  16. Юрий

    Здравствуйте!
    Да, Вы верно это подметили, что разметка текста – одна из самых важных характеристик дизайна.

  17. Андре

    Забыли сказать про соотношение фона и яркости шрифта. Он не должен резать глаз, т.е. должен быть легко читаемый.

  18. Вера

    Я очень рада всем Вашим публикациям. Спасибо. Very good.

  19. Sasha

    ахаха))
    раздел «Недостаток контрастности» —
    правильный ответ: «Правильно, СПРАВА!»
    PS белый шрифт на чёрном фоне — это если надо, чтоб перед глазами фон в полосочку с полчаса маячил

    • Игорь

      Поддерживаю. «Недостаток контрастности» в разумных пределах это совершенно не недостаток, скорее наоборот.

  20. Александр Багров

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

    • Сергей Кувиков

      RE: Автор: Connor Turnbull

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

      Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.
      ======================================
      Парни просто перевели и подредактировали , и источник уточнили, что костить-то их?

      • Виктор Рог

        Сергей, на самом деле мы очень даже хотим видеть мнения и отзывы самых разных окрасок.
        Это дает нам понимание того, какой именно контент писать/переводить для Вас.

  21. Игорь

    Действительно полезно, спасибо!)

    Особенно «Забывая, зачем вы это делаете» — жизненное.

  22. Марина

    Спасибо за полезную информацию!

  23. Сергей

    Насчёт статьи для первоклассников — иногда и обычные вещи нужно несколько раз прочитать чтоб в голове уложилось — особенно для начинающих! Столько инфы новой получаешь когда создаёшь свой первый сайт что голова может треснуть наверно :) )
    Спасибо за статью!

  24. Любовь

    Спасибо за интересную стать о дизайне!!!

  25. Павел Ипатов

    Думаю, что сильно приувеличено значение дизайна.
    Подумайте, ведь первая же прокрутка прячет дизайн навсегда.
    А сайты, у которых страницы не надо скролить, очень редки.

  26. Аделя - Живые рецепты

    Все очень обстоятельно и отлично проиллюстрировано. Спасибо

  27. Эдуард

    Спасибо за статью!
    Добрый совет никогда зря не пропадает!!!:)

  28. Игорь

    Хорошая статья!

  29. БЛОGГЕР

    Статья хорошая, но не оригинальная. В отношении контраста. Иногда излишний контраст утомляет глаза.

  30. Александр

    Хорошие советы)спасибо большое!

  31. Святослав

    Статья ни о чем!
    Все просто — учитесь на примерах выдающихся мастеров, делайте похожие работы, совершенствуйтесь САМИ. В учебниках талант не найдешь… он либо есть, либо его нет.

  32. ПереводыСтатей.рф

    Нам так понравился Ваш перевод, что мы его украли :-D
    Искренне надеемся, что Вам эта идея понравится!
    Ваша статья опубликована тут переводыстатей.рф/?p=170
    P.S. Мы очень хотим с Вами сотрудничать!
    P.P.S. Также искренне верим, что эта идея понравится Вашим уважаемым читателям!

    • Виктор Рог

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

  33. Татьяна

    В учебниках талант не найдешь, в работах тоже, но прочитать и обратить на это внимание стоит!

    ОГРОМНОЕ спасибо за все статьи!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree