Пользователь
0,0
рейтинг
19 апреля 2009 в 15:03

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

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

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

05. Сдержанность и деликатность


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


Примеры утонченных эффектов в веб-дизайне


Легкие градиенты на сайте “Things”

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

quality_15

Падающие тени на сайте Icon Dock

Сайт Icon Dock — это оплот утонченных эффектов. Пиксельные блики, градиенты и падающие тени. Но в данном примере мы остановимся подробнее именно на тени. Она сделана небольшой и с повышенной прозрачностью, просто чтобы подчеркнуть блок с содержимым и ненавязчиво привлечь к нему внимания. Это красивый пример.

quality_16

Утонченные текстуры фона: сайт Scouting for Girls

Текстурный фон может решить судьбу вашего дизайна. Часто фон лишь отвлекает и сильно снижает качество дизайна. Поэтому обычно имеет смысл использовать легкие и утонченные текстуры. На сайте Scouting for Girls текстура фона удивительным образом сочетается с общим стилем и качеством дизайна.

quality_17

Следы времени: сайт Viget Advance

Я не думаю, что дизайн может быть слишком утонченным. Любые детали, неважно насколько они деликатные, будут заметны и произведут определенный эффект, даже независимо от того, разглядит их пользователь или нет. В этом примере блога Viget Advance на фоне видны некоторые следы времени, всего лишь небольшие признаки износа, но без них бумага выглядела бы плоской и скучной. Эти небольшие изъяны делают текстуру более достоверной и реальной.

quality_18

Акварель на сайте WebDesignerWall

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

quality_19

Легкие цветочные орнаменты: сайт Dara’s Garden

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

quality_20

Советы по использованию утонченных средств дизайна


По-моему, утонченные детали помогают сделать шаг от хорошего дизайна к дизайну великолепному. Если вы думаете, как привнести в ваш дизайн нечто особенное, утонченные детали — ваш выбор. Вот несколько рекомендаций, о которых необходимо помнить, используя в дизайне утонченные детали.
  • Используйте многослойность
    Никогда не ограничивайтесь одним шаблоном или текстурой, делайте детали разнообразными.
  • Экспериментируйте с прозрачностью и цветом
    Иногда даже значение непрозрачности 3% может сыграть вам на руку.
  • Не парься, будь смелым
    Не бойтесь, что получится слишком утонченно или слишком размыто.

06. Используйте весь потенциал цвета


Люди часто судят о цветах со своей колокольни, и они неправы. Если вам нужно решить, какие цвета будут хорошо смотреться на данном сайте, необходимо принимать решение основываясь на бренде, основной теме сайта и настроении, которое должна создавать цветовая схема.

Превосходное использование цвета в веб-дизайне


Недвижимость может быть красочной: сайт Oypro

В сайте Oypro мне нравится то, что его создатели доказали — сайт, посвященный «скучной» теме, необязательно должен иметь скучный дизайн. Увы, слишком часто при создании корпоративных сайтов дизайнерам не разрешается использовать смелые и своеобразные решения. Кажется, заказчикам просто необходимо, чтобы их сайт был простым, плоским и серым. Но этот дизайн доказывает, что можно создать деловой корпоративный сайт, не сдерживая своих творческий порывов.

quality_21

Цвета должны быть уместными: сайт Tennessee Summertime

Summertime in Tennessee — это живой, яркий и очень теплый сайт. Что и требуется от сайта, рекламирующего летний отдых. Здесь играет много разных цветов, но все они «в тему». Качественные сайты имеют цветовую схему, где все цвета служат на пользу общей идее. Иногда дизайн становится лучше за счет очевидного выбора цветов, хороший тому пример — Hell Design, он бы не возымел должного эффекта, если бы там использовался иной цвет, чем огненно-красный.

quality_22

Разнообразные фоны: Saturized Studio

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

quality_23

Советы по использованию цвета в дизайне


Цвет — это всегда хорошая область для исследований и испытания различных возможностей и вариаций, но есть несколько вещей, о которых важно не забывать, выбирая цвета и цветовые схемы.
  • Экспериментируйте
    Сайт на «скучную» тему не должен иметь скучную цветовую схему.
  • Добавьте разнообразия
    Попробуйте использовать для создания красочных фонов градиенты, шаблоны и кисти. Фон не будет выглядеть хорошо только за счет цвета.
  • Придерживайтесь темы
    Старайтесь, чтобы цвета были уместны для продукции или услуг, которым будет посвящен сайт.

07. Делать нечто, чего никто раньше не делал


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

Из этой затеи может получиться создание чего-то бесподобно прекрасного, или чего-то, что не выдерживает никакой критики. Между успехом и провалом очень тонкая грань; я имею в виду, что есть причины, по которым что-либо никогда не создавалось, и обычно это потому что идея была вздорной. Дизайнер должен иметь смелость, чтобы отступить от того, что всем дорого и мило, и вот несколько примеров тому:

Уникальная навигация на сайте MB Dragan

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

quality_24

Сайт Visualbox и его Очень Визуальная Навигация

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

quality_25

Сразу к делу, сайт Nikola Mircic

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

quality_26

Советы по стремлению к чему-то новому


Примеры, приведенные выше, не задумывались как «источник вдохновения» для уникальных идей, это просто несколько сайтов, которые кажутся мне совершенно уникальными. Правда состоит в том, что невозможно просто смотреть вокруг в поиске новых идей, на самом деле, это порочная практика. Так что вы можете просто проигнорировать весь этот раздел, если вы стараетесь выдумать что-то новое!
  • Это должно быть уместным
    Если вы собираетесь сделать что-то совершенно новое и уникальное, сначала спросите себя: «А это вообще имеет смысл?» и «Это будет соответствовать назначению сайта?». Если ответом будет «Да», то вперед!
  • Забудьте все, что вы знали!
    Ну хорошо, может быть, не все — базовые принципы забывать не нужно, но нет смысла искать вдохновения для новых идей, возможно вы просто выбрали не то направление.
  • Держите марку
    Я думаю, если ваша новая идея выглядит и работает хорошо, то вам будет гораздо проще убедить всех, что она имеет право на существование.

Что для вас «качественный дизайн»?


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

Спасибо за внимание и ваши комментарии!
Перевод: Liam
Ольга @habratchanka
карма
91,6
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

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

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

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

  • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    Да, глаз радуется, когда смотришь на такие сайты.
    Но, как быть с дизайном приложений с веб интерфейсом? Ведь в этом случае юзер должен себя комфортно чувствовать в течении длительной работы с приложением. Все должно быть предельно удобно и понятно. Есть рекомендации по этому поводу?
    • НЛО прилетело и опубликовало эту надпись здесь
      • 0
        Безусловно у этих ребят можно перенять некоторые концепции и идеи, но веб не ограничивается одним гуглом, как и разнообразие веб приложений не ограничивается тем, что есть у гугла =)
      • +5
        Дизайнеры у гугла тоже используют «утончённые эффекты» :)
        В гмейле есть еле заметная тень у блока сообщений.


        • 0
          Разница в том, что западный дизайнер пишет «Экземпел», а русский «Тень у блока сообщения. О, у тебя жмыл на русском, а почему?
          • 0
            Не совсем понял вопроса. Почему у меня Гмейл на русском? В настройках указал :)
            А Тень у блока… написал, потому что сначала думал обойтись исключительно картинкой, но потом продублировал пояснение ещё и текстом.
            • –1
              Интересен ход мыслей. Автор не дублировал, а просто писал «Пример». Да, почему на русском, на английском неудобно?
              • НЛО прилетело и опубликовало эту надпись здесь
          • НЛО прилетело и опубликовало эту надпись здесь
        • +4
          Еле заметная кривая тень, и жуткое по своей убогости закругление.
  • 0
    Спасибо! Очень интересная серия постов!
  • +3
    Забудьте все, что вы знали! — Очисть свой разум, стань водой, как говорил Брюс Ли.

    Клиент. — Хочу розочки и бантик розовый. Клиенту. — «Идите в задницу, забудь про розочки»
    • 0
      +1 (Самый мудрый метод, но не всегда в наших реалиях осуществим.)

      Клиент должен хотеть не розочек, а повысить продажи и другие показатели, а уже способ выбирать студия.

    • +4
      «Клиент не знает, что он хочет, пока ему этого не покажут» (с) не помню, кто сказал, но согласен на все 100% :)
      • 0
        Немного недословная фраза Стива Джобса (высказывался он о фокус группах).
    • 0
      Надо просто сказать клиенту, что сайт это не произведение искусства, а один из его бизнес-инструментов, которым он может решить или автоматизировать какие-то свои бизнес-процессы :)
  • +4
    Всё это действительно симпатично.
    Существует такое множество факторов, которые делают дизайн качественным, что в этой статье я раскрыл лишь основные из них.
    Но это не так. Ни в одной из статей нет ничего о главном — логике интерфейса. Мало кому нравится пользоваться отпидорашенными, но запутанными и избыточно сложными интерфейсами. Очевидно, что об этом хорошо знают авторы тех клёвых сайтов, которые Лиам приводит нам в пример, но было бы отлично донести эту мысль до читателей. Логика — это скелет интерфейса, а градиенты и блики — макияж. Вот бы увидеть это в продолжении :-)
    • –1
      Согласен со вторым абзацем. Думаю в статье затронут только небольшой сегмент разнообразия красоты жизни. Мне, допустим не нравится вся эта пидарасня с градиентиками и сюсечками пусечками. Мне нравится сайт: www.ahmadtea.com/ ничего лишнего, сплошной текст и плашки и фотки, а для красоты — живописная картинка и ппц.
      И вообще мне нравится сайт хабры, тоже нету пидарасюсечек, точнее не было, пока не испортили турбомилк, своей бездарной рисуйнёй сайт.
      • +1
        Турбомилк — очень клёви!
        • +1
          Я нисколько не сомневаюсь в их крутизне, но не на хабре же розовых пудельков рисовать с желеобразной субстанцией на лбу) Взрослые же люди)
      • 0
        По мне так было-бы не плохо, если бы Хабр был с каким-нибудь техно-футуристическим дизайном (со всей прилагающейся пи**дарнёй, как говорят), но я попытался представить и понял, что на Хабре очень много мелких элементов, которые придётся постараться, чтобы гармонично вписать в какой-бы то ни было дизайн. Взять хотя бы блок комментария с его датой отправки, аватаром и именем автора, ссылкой на комментарий, в избранное, рейтингом, кнопкой ответа и т.д.
        • 0
          Тогда лучше технофутуристический скин, как бар яндекса иногда можно настроить, чтоб его в кукисах можно было бы включать и отключать.
  • НЛО прилетело и опубликовало эту надпись здесь
    • +1
      • +2
        Это иностранная Упячка?
      • 0
        Музыка там из FF7, если не ошибаюсь.
        Не понятно только, этот сайт специально такой занятный или кто-то действительно старался и делал, как лучше :)
    • –2
      Каг так, а вы не знаете? Жеш www.artlebedev.ru — кладезь некачественных сайтов))
      • –1
        Надеюсь ваши сайты лучше? И в портфолио у вас под 1000 работ? Тогда конечно ваше утверждение верно!
        • –5
          Мои сайты много хуже, и там даже до пяти десятков недотягивет) И, вы наверное удивитесь, я как-то не парюсь об этом) Мне за крутость сайтов не приплачивают, да и не склонен особо из кожи вон лезть, чтобы работы говном не назвали) потому зачем себя терзать, когда можно попить пифка и порадоваться жизни)
          • –1
            Тогда, увы, из Вас не получится профессионала :)
  • 0
    Клиент. — Хочу розочки и бантик розовый.
    Тык дадим клиенту красивый сайт с умеренным количеством розочек и бантиков.
    И клиент счастлив и команда спит спокойно.
    Но перед этим посмотрим все 3 части Что такое качество в веб-дизайне: примеры и рекомендации.
    (хотябы чтоб сайт в примеры некачественных не попал)
  • 0
    Качетсвенная статья. Спасибо за перевод и ссылку на оригинальный текст.
    • 0
      >качественная*
  • 0
    Не стоит забывать, про то что понятие «сдержанность» и прочее, оно варьируется от культуры к культуре. И то что «сдержанно» для одной, может быть совсем «несдержанно» для другой. Пример из жизни: восточноазиатские сайты :)

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

Интересные публикации