• Free consultations 24/7
  • Иконка телефона +1 (310) 933-4443
    Поддержка: Онлайн

    Ждем вашего звонка :)

    Наше рабочее время:

    Mon — Fri, 8am — 2am (EST)

    Поддержка: Офлайн

    Будем онлайн через: 2h 34 min

    Наше рабочее время:

    Mon — Fri, 8am — 2am (EST)

Тренд: имитация «Metro-дизайна» а-ля Microsoft.

My Kind Of Phone

My Kind Of Phone

Известно, что за последние несколько лет компания Microsoft значительно поменяла дизайн своих программных продуктов. Основой эстетики новой операционной системы Windows 8, релиз которой планируется в октябре этого года, стал Metro. Давайте взглянем, как мы можем использовать некоторые эстетические принципы такой актуальной темы в веб-дизайне, а также на то, где и как такой образ уже используется.

Что такое Metro?

Metro это имя, данное общей дизайнерской концепции, используемой в текущем и следующем поколении операционной системы от Microsoft, в визуальной подаче приборной панели Xbox 360, в дизайне некоторых сайтов. Команда дизайнеров продемонстрировала, что концепция создана под влиянием языка общественного транспорта, который акцентирует внимание на типографике и иерархичности визуальной подачи информации. Microsoft выделяет четыре основных принципа нового дизайнерского языка: типографика, движение, честность, «да – контенту, нет – цвету».

  1. Типографика. Основой пользовательского интерфейса являются пиктограммы, которые состоят только из текста. Символы различаются только размером, шрифт, ширина и другие свойства сохраняются. В результате сокращения площади графики в пользу шрифта, Metro провозглашает использование текста на всех уровнях. Подобная иерархичность может применяться при минималистичном дизайне сайта, где размер шрифта представляется единственным различием между разделами. Объединение стилей текста и последовательной расстановки пробелов является основой типографических принципов Metro.
  2. «Да – контенту, нет – цвету». В связи с перечисленными особенностями содержание играет в Metro большую роль, нежели другие способы визуального проектирования. Вы столкнетесь с контент-ориентированными конструкциями, которые в основном состоят из текста. Если вы удаляете со своего сайта «хроматическую» составляющую, то особое внимание необходимо уделить содержанию текстов (это особенно актуально для блогов). Дизайн таких страниц эффективно работает на экранах небольших размеров, нисколько не теряя в своей цельности.
    Google

    Google

    BBC

    BBC

  3. Движение. В новом языке добавлена возможность «горизонтального скроллинга». В компании Microsoft считают, что это как нельзя лучше демонстрирует эффектность и текучесть дизайна. Текст компонуется и излагается в горизонтальном направлении, что заставляет пользователя двигать картинку. Подобная «фишка» популярна в мобильном дизайне в связи с развитием технологии сенсорного экрана.
  4. 4.     Authentically Digital («полностью цифровой»). Концепция Metro демонстрирует свою цифровую природу. Так, например, иконка адресной книги может выглядеть как список контактов в телефоне, а не как блокнот. Таким образом, соблюдая принцип «да – контенту, нет – цвету» удаляется идея, которая не несет смысловой нагрузки.

Концепция Metro была создана прежде всего для разработки программного обеспечения, но ее основные постулаты уже проникли в веб-дизайн.

  • My Kind of Phone  (английский блог, посвященный Windows Mobile) – здесь вы можете видеть также пиктограммы «движение» (как в метро). Если навести на них мышью, появляется текстовый блок.
  • ВВС – сайт придерживается принципов концепции и довольно смело использует типографику.
  • Google/Gmail – используется только один цветовой акцент, однако типографика и пробелы применяются довольно щедро.

Posted on 11.09.2012

Category: Дизайн web-сайта

Article tags

Вы дизайнер?

Join Us

всего в сообществе

~150.1k дизайнеров


Related Articles

Дизайн сайта: секреты воздействия на эмоции посетителей

Дизайн web-сайта

Создание сайта Создание сайта — вполне распространенное явление в современном мире. Ресурсы необходимы для...

Позвони мне, позвони!

Дизайн web-сайта, Разработка (html5, css и т.п.)

Раз уж мы постоянно говорим на тему дизайна сайтов, то обойти стороной такой вопрос,...