Пользователь
0,0
рейтинг
17 апреля 2009 в 18:55

Что такое качество в веб-дизайне: примеры и рекомендации. Часть 1 перевод

Несколько выдающихся примеров и рекомендаций по созданию качественного дизайна веб-страницы или блога

quality

Многие люди склонны описывать предоставляемые ими услуги по веб-дизайну как «качественные». Но что означает здесь слово «качество», как определить, является дизайн качественным или нет? Что ж, я вижу несколько способов определить качество применительно к сфере веб-дизайна. Ведь если однажды определить, что позволяет создавать качественный веб-дизайн, можно использовать эти же приемы для оттачивания собственного стиля.

Чтобы объяснить, как я понимаю качество в дизайне веб-сайтов, я собрал несколько рекомендаций и примеров.

01. Расстояние между объектами на странице


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

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

Примеры удачного расположения элементов


Отличное расположение элементов на сайте Good.is

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

quality_1

Очень удачные расстояния между элементами на сайте Digital Mash

Если правильно расположить элементы на странице друг относительно друга, они будут выглядеть намного привлекательнее и на них будут чаще кликать. Сайт Digital Mash — отличный пример очень дружелюбного дизайна.

quality_2

Масса свободного места на сайте Creatica Daily

И снова — расстояния между объектами очень помогают выделить контент, чтобы он мог говорить сам за себя. Тут не так уж много содержания на странице, но создатели сайта не побоялись оставить большие свободные пространства. Если у вас на странице всего несколько строчек текста, это совсем не значит, что им нельзя отвести много места.

quality_5

Много пространства на сайте Postbox

Если взглянуть на сайт Postbox повнимательнее, можно заметить, какие отступы тут сделаны по краям — на самом деле они по 60 пикселей. Казалось бы, это многовато, но в действии выглядит просто отлично.

quality_3

Неправильные расстояния между объектами


Основная ошибка при определении расстояний между элементами контента — прижимание их к краям страницы. Неважно, насколько стильными являются сами объекты, — если втиснуть их на страницу слишком много, она сильно потеряет в стиле и качестве.

Пример недостаточных расстояний между объектами

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

Пример плохого расстояния между элементами

Советы по правильному расположению объектов


Решение о том, сколько свободного места использовать на странице, приходится принимать заново в каждом конкретном случае. Поэтому нужно тренировать глазомер, чтобы уметь определять корректное расстояние, необходимое вокруг каждого элемента, и использовать это знание в дизайне. Это нелегко, но приходит с практикой.
  • Использование в дизайне сетки с направляющими линиями
    Использование сетки определенно помогает понять всю важность расстояний между объектами.
  • Пытаться снова и снова
    Методом проб и ошибок вы сможете определить, какими должны быть отступы.
  • Свободное пространство — не значит потраченное впустую
    Если у вас на странице есть пустое пространство, вовсе необязательно, что его нужно заполнять.
  • Лучше меньше, да лучше
    Чем пытаться вместить на страницу побольше, сделайте на ней поменьше содержания, добавьте свободного места и размещайте только жизненно важную информацию.


02. Совершенство до последнего пикселя


Когда дизайн «довели до ума», это видно сразу. Иногда все зависит от мельчайших деталей, которых многие могут даже не заметить. «Совершенством до последнего пикселя» я называю метод, когда пристальное внимание уделяется линиям, краям и границам. Можно вставить просто линию, а можно добавить небольшие детали, будь то легкие градиенты, простая тень шириной в 1 пиксель или блик — и ваша работа действительно будет выделяться. Некоторые дизайнеры, известные таким подходом: Коллис Таед (Collis Ta'eed), Дэвид Леггетт (David Leggett) и Вольфганг Бартелме (Wolfgang Bartelme).

Примеры «совершенства до пикселя»


Внимание к деталям на сайте Envato

Ниже я вырезал несколько примеров. В Примере 1 вы можете видеть, что у зеленой плашки имеется светло-зеленая граница шириной 1 пиксель. В Примере 2 использована легкая градиентная тень внутри блока и белая граница шириной 1 пиксель сверху. Умно — использовать тень, чтобы создать впечатление блика сверху. На зеленой поверхности на заднем плане имеется небольшая и очень легкая тень, которая позволяет привлечь внимание к чистым и четким деталям внутри белого блока, расположенного ниже. Хотя кажется, что таких деталей немного, они действительно помогают создать впечатление, что все на странице слегка блестит полировкой, создается чувство трехмерного реализма, словно предметы были помещены поверх страницы, а не на плоский статичный макет.

quality_6

Внимание к деталям на сайте Tutorial9.net

Дэвид Леггетт знает толк в сглаживании пикселей. Его недавний редизайн сайта tutorial9.net — это смешение множества методов сглаживания пикселей. В Примере 1 вы можете видеть, как он сделал, чтобы вкладки выглядели чуть более гладкими, всего лишь добавив наверх простой 1-пиксельный блик. В Примере 2 использован ряд методов. Падающая тень на иконке фотоаппарата, использование светотени на белом участке, 1-пиксельный блик наверху панели навигации.

quality_7

Совершенные до пикселя кнопки и разделители на сайте RedBrick Health

Красивая панель навигации, созданная Райаном Шерфом (Ryan Scherf) — это еще один пример использования пиксельного совершенства для создания качественного веб-дизайна. У розовой кнопки сделан 1-пиксельный блик, а разделительные линии между ссылками проработаны так же качественно и детально: как вы можете видеть, вместо того, чтобы использовать просто серые линии-разделители, Райан добавил вниз 1-пиксельные блики, чтобы все не выглядело плоским и двумерным.

quality_8

Пиксельное совершенство не чуждо и гранжу: сайт AvalonStar

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

quality_9

Советы по совершенству деталей в дизайне


Здесь главное — практика. Как вы могли видеть в примерах, такая простая вещь, как высветленная линия шириной 1 пиксель может добавить стиля и глубины вашим работам, вам не нужно прибегать к умопомрачительным объемным деталям и градиентам, чтобы создать впечатление чего-то действительно объемного.
  • Внимание к мелким деталям
    Мелкие детали, дополняющие содержание страницы — ключ к успеху.
  • Мыслите в пикселях
    Границы, градиенты, линии, тени и т.п. не должны быть огромными, чтобы производить должный эффект.
  • До и После
    Сравнивайте результаты своей работы: как выглядит страница до и после применения различных эффектов. Тогда вы сможете увидеть, насколько они действенны.

P.S. Читайте в следующей статье: Что такое качество в веб-дизайне: примеры и рекомендации. Часть 2.
Поговорим о примерах хорошо продуманной типографики.
Перевод: Liam
Ольга @habratchanka
карма
91,6
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое

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

  • 0
    Ух ты!
    Спасибо за статью, было интересно
    • +8
      в вот тебе и продолжение
      wefunction.com/2009/04/quality-within-web-design/
      • 0
        Спасибо
      • +1
        Странно. что автор топика не указал первоисточник :(
        • 0
          видимо еще не успел
          (http://habrahabr.ru/blogs/design/57552/#comment_1545947)
        • 0
          внизу вообще то указана ссылка на оригинал, а эта статья — перевод ;)
          • 0
            внизу = под статьей.
  • +8
    Мне всегда было приятно читать подобные прописные истины :)

    Имхо, чтобы выдавать хороший продукт, надо чувствовать каждую мелочь, надо чувствовать сам дизайн… я не могу это объяснить в двух словах, к этому должна быть предрасположенность…
    • 0
      Именно потому что у меня ее нету я туда и не лезу, хотя отличить хороший от плохого могу, но создать хороший дизайн, увы… С кодом у меня как-то ближе.
  • 0
    хорошие примеры, хорошо написано.
  • +5
    Иллюстрации с примерами тоже стильно сделаны.
    И качественно, судя по однопиксельному блику. (;
    • 0
      да, стрелки Example модные
  • 0
    Хорошее замечание по поводу мелких деталей. Мелочи часто играют главную роль.
  • 0
    Мелкие детали это очень важно, из мелких деталей и получается хорошая работа.
    Но мой опыт показывает что нет никаких четких правил в дизайне каждый случай особый, что хорошо в одном случае может быть плохо в другом.
  • НЛО прилетело и опубликовало эту надпись здесь
  • +2
    а где же картинки с примерами «как делать не надо»?
  • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    Инетересно было бы почитать нечто подобное про юзабилити в веб-приложениях.
  • +1
    Пиксельное совершенство улыбнуло… Насколько помню себя, то ещё лет 7-8 назад увеличивал до пикселизации практически каждый участок и «вылизывал» все сочленения. Да, осбственно, и мои друзья-коллеги тем же отличаются. Несколько забавно видеть теперь, спустя годы, подобные простенькие советы, когда в рунете повсеместно властвует техдизайн, и пиксельный причёс — неотъемлемый атрибут современного дизайна, то бишь стандарт де факто.
  • –2
    Простите, но вы сейчас продвигаете в виде стандарта качества пару стилей 2.0 Многим заказчикам в России они вообще не нравятся )
    • +1
      Тут продвигается не Веб2.0, а грамотное расположение и качественная работа над границами…

      И вообще, веб 2.0 не характеризуется только бликами и «мокрым полом» :)
      • 0
        Ну, я так скажу: вот эти картинки характеризуются, как веб 2.0 со своими канонами расположения контента и хрестоматийными рюшками.
        • НЛО прилетело и опубликовало эту надпись здесь
    • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    Что значит качественные сайты в понимании большинства современных веб-студий — ну.., в общих чертах работать будет, но если вдруг что обращайтесь ещё!
  • 0
    Даже на примерах стрелки, указывающие на области, сделаны очень качественно. :)
  • +1
    автор вдохновление случаем черпал не отсюда
    (http://wefunction.com/2009/04/quality-within-web-design/)

    пс: хотя я перешёл с хабры на твой блог (несмотря на то что это уже читал в оригинале)
    пс2: как хаброеффект?
    • –1
      статья — перевод, тут эта ссылка указана как оригинал :)
      Пока +250 чел пришло с этой статьи.
  • +2
    ладно, пойду рисовать однопиксельные блики
  • 0
    Ваши скриншоты выглядят значительно лучше оригиналов!!!

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

    Поделитесь секретом? Картинки аж прыгают с экрана прямо в сердце =)
    • 0
      Действительно. Сам хотел спросить, на картинках всё более гладкое и красивое… в чём секрет?
    • 0
      На сколько я смог разгдялеть, там, кажется так:
      делается окружность белая, потом тень внутрь маленькую, и наружу побольше. Всё, что вне кружности делается размытие.
  • 0
    Да уж, автор далек от дизайна. Про сетку вообще улыбнуло. Сетка и пропорции это уже давно прописные истины в дизайне, просто самоучки веб-дизайнеры о них как бэ не знают на начальном этапе и зачем то вглядываются в однопиксельные полоски.
  • 0
    Не подскажите что это за чудные шрифты?


  • 0
    В неформальных обсуждениях все вышеописанное чаще всего выражают одним словом — «отпидорасить картинку» :)
    • 0
      Двумя :)
      • 0
        отпидораситькартинку
        • 0
          Паясу говорит «шлифануть»
      • 0
        напидорить =)
    • 0
      выдрочить
  • +2
    Честно говоря, ожидал намного большего. Большая статья, а по существу написано очень мало. Про расстояние ещё ладно, но вот «Совершенство до последнего пикселя», которое, как оказалось, заключается в добавлении мини-бликов везде где можно, вызвало чувство недоумения: «И это всё???»
  • +3
    имхо, качественный дизайн — это когда смысл вкладывается, а не когда все «отпи… рашено» до блеска…
    • +2
      Согласен, по-моему автор не совсем правильно подобрал название. Не буду влазить в глубокие рассуждения, но дизайн, это не только прорисовка, есть еще кучу вещей и поважнее… А качественный дизайн, это когда конечный продукт удовлетворяет всем требованиям поставленным к нему не только с визуальной, но и, скажем, с коммерческой стороны. Суммируя все вышеизложенное, основополагающий фактор в дизайне — логика.
    • 0
      абсолютно согласен, ибо супер-пиксельные блики это круто, но далеко не главное. Смысл, юзабилити не стоит забывать. А это лишь картинка
  • 0
    Ух. Красотень!
  • НЛО прилетело и опубликовало эту надпись здесь
  • +1
    Вопрос на засыпку, а есть ли такие удачные примеры для подрожания среди отечественных разработчиков сайтов? Или все-же такое новаторство сугубо прерогатива буржуев?
    • НЛО прилетело и опубликовало эту надпись здесь
      • 0
        Ну да, конечно. Россия никогда не знала инноваций, все технические прорывы шли исключительно с Запада!11 Закавыка в том, что не надо мыслить технологически вторично, иначе — фарватер. Впрочем, кому-то это нравится…
        • НЛО прилетело и опубликовало эту надпись здесь
          • 0
            ЕРЖ detected
  • +1
    Меня смущает перевод терминов. «Расстояние между объектами на странице» у нас чаще всего называют «воздухом», более официально — «контрформой», фразы «совершенство до последнего пикселя» и «неправильные расстояния» ставят в тупик, имхо название статьи вводит в заблуждение, это всё показатели исполнительского мастерства и владения инструментом, что является необходимым, но не является достаточным условием хорошего веб-дизайна, есть еще решаемая всеми этими красивостями задача, месидж и т.д. У отечественной школы дизайна есть более адекватные термины, суть рекомендаций: разберитесь с модульной сеткой и будьте педантичны, примеры интересные, за них спасибо.
  • 0
    поля удобно задавать в процентах, а внешний блок ограничивать по ширине. тогда можно добиться такого эффекта, что на большом мониторе поля большие, а на мелком — пропорционально уменьшаются.
    например: smileg.akmedia.ru — поизменяйте ширину окна.
    • 0
      оффтоп:
      «вэб-страницы», «сэлфлинки» — как-то это не по-русски, что ли. Или слишком по-русски?
      Пэнтхаус, пэнис, сэлекция… :)
      • 0
        Пэрсик!
      • 0
        я вхожу в коаллицию против претеснения буквы «э» ;-)
        ведь эта буква в этих словах звучит потрясающе клёво %-)
    • 0
      Буквы немноо пляшут при самом ресайзе, но вообщем неплохо смотриться.
  • НЛО прилетело и опубликовало эту надпись здесь
  • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    Поресайзте окно на https://www.redbrickhealth.com/ очень интересный эфект там зарыт.

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