design, веб дизайн

[info]le_dantu


Как дела в "Студии Ле-Дантю"?

+1


Принципы дизайна для сайтов госуслуг
design, веб дизайн
[info]le_dantu

1. Начните с потребностей* потребностей пользователя, а не государства


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

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

Пример

design_uk_1

Хороший пример того, как дизайн создается исходя из потребностей пользователя, — это страница об НДС. Большинство пользователей попадает на нее после поиска по словосочетанию «ставка НДС». Поэтому мы сделали ответ на этот вопрос самым большим и заметным элементом на странице. Таким образом, пользователь моментально находит ответ на свой вопрос. Если же пользователь ошибся с запросом, то справа от основного содержания мы расположили ссылки на похожие материалы. В итоге страница получилась простой и ясной, но притом содержит всю необходимую информацию, которая вам может понадобиться.

В России

design_uk_2

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

2. Избавьтесь от календаря и прогноза погоды

Государство должно делать только то, что оно умеет лучше всего. Если кто-то делает что-то лучше – поделитесь этим с пользователем. Если мы можем предоставить ресурсы (например, API), которые помогут другим людям решить их проблемы – сделайте это. Мы должны сконцентрироваться на основе основ.

Мы сможем предоставить лучшие услуги и сохранить деньги, если будем делать только то, что умеем лучше всего.

Пример

design_uk_3

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

В России

design_uk_4

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

3. Сначала анализ, потом дизайн

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

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

Пример

design_uk_5

Проследить путь пользователя сайту – это прекрасный способ понять, что пользователю реально нужно от вашего сервиса. В этом вам помогут такие сервисы, как Google Analytics. Также мы используем А/В тестирование, чтобы понять, как цвет элементов меню влияет на поведение пользователя.

В России

design_uk_6

Глядя на количество отделов, которые отвечают за создание и поддержку сайта Государственной Думы РФ, верится с трудом, что там кто-то ведет сбор и анализ информации о посетителях.

4. Упрощайте работу пользователя

Сделать что-то сложное выглядящим просто – легко. Сделать что-то сложное простым в использовании намного сложнее – особенно, когда в основе лежит сложная система. Но именно это мы и должны делать!

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

Пример

design_uk_7

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

В России

design_uk_8

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

design_uk_9

А вот с помощью такой лаконичной формы вы можете пожаловаться на действия сотрудников полиции Ставропольского края РФ.

5. Быстрее запустите, быстрее улучшите

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

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

Пример

design_uk_10

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

В России

design_uk_11

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

6. Используйте то, что работает

Доступный дизайн – это хороший дизайн. Мы должны создавать продукт, который будет как можно более интегрированный, понятный и читабельный. Если для этого нужно будет пожертвовать красотой – да будет так! Мы не должны бояться очевидных решений. Придумать что-то новое в веб-дизайне – это не самоцель нашей работы. Наоборот, мы должны очень четко представлять ожидания пользователей от сервиса.

Мы делаем дизайн для всей страны – не только для тех, кто уже привык пользоваться интернетом. Фактически те люди, которые больше всего нуждаются в наших услугах, это зачастую те, кто считают их сложными в использовании. Если мы задумаемся об этих людях с самого начала, то в итоге создадим лучший сайт для всех!

Пример

design_uk_12

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

design_uk_13

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

В России

design_uk_14

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

7. Учитывайте контекст

Мы не делаем дизайн для веба, мы делаем дизайн для людей. Мы должны серьезно задуматься о контексте, в котором они пользуются нашими услугами. Они в библиотеке? Они заходят на сайт с телефона? Они только слышали о Facebook’е или уже пользовались им? Они никогда не пользовались интернетом до этого?

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

Пример

design_uk_15

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

В России

design_uk_16

Наличием мобильной версии может похвастаться большинство сайтов федеральных органов власти. Так, можете почитать новости с мобильной версии сайта МВД. А вот мобильной версии на сайте Госуслуг еще нет.

8. Создавайте услуги, а не сайты

Наш сервис не начинается и не заканчивается на сайте. Он может начинаться с поисковика и заканчиваться в почтовом отделении. Мы должны учитывать это в дизайне, даже если не можем это контролировать. И мы должны иметь в виду, что в какой-то момент эта ситуация может измениться.

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

Пример

Один из пользователей сделал плагин для CMS-платформы WordPress, который позволяет использовать информацию с сайта GOV.UK в любом посте или странице на WordPress.

В России

design_uk_17

Сайт государственных услуг Москвы демонстрирует один из лучших примеров решения проблем пользователей, а не просто создания сайтов. Спасибо департаменту информационных технологий Москвы!

9. Будьте последовательными

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

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

Пример

design_uk_18

На данный момент мы выпустили два сервиса: GOV.UK и «Внутри правительства». Сравнив страницы этих двух сервисов, вы легко поймете, что мы имели в виду под последовательностью в дизайне.

В России

design_uk_19

Сайты министерства транспорта РФ и министерства обороны РФ красноречиво демонстрируют отсутствие даже намека на последовательность.

10. Обратная связь улучшает сервис

Мы должны делиться тем, что делаем, всякий раз, когда можем. С коллегами, с пользователями, со всем миром. Делитесь кодом, делитесь дизайном, делитесь идеями, делитесь намерениями, делитесь ошибками. Чем больше людей посмотрит сервис, тем лучше он станет. Грубые ошибки будут обнаружены, лучшие альтернативы предложены, планка требований будет поднята.

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

Пример

design_uk_20

Это пример страницы, которая иллюстрирует множество из этих принципов в действии.

design_uk_21

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

В России

design_uk_22

Если вы хотите направить свои предложения по улучшению дизайна сайта Государственной Думы РФ, то для начала вам нужно войти в раздел «Разработка и сопровождение сайта». И только там в самом низу есть волшебный электронный адрес design@duma.gov.ru.

Данная статья является переводом публикации о принципах дизайна для интернет-сервисов государственных структур, написанного командой, отвечающей за редизайн сайта государственных услуг правительства Великобритании. Перевод и комментарии про приложение данных принципов в России сделаны интернет-агентством «Далее» специально для AdMe.ru за что им огромное спасибо!
  • Leave a comment
  • Add to Memories

Тренды в дизайне логотипов 2012
design, веб дизайн
[info]le_dantu

Портал LogoLounge.com опубликовал доклад о мировых тенденциях в области дизайна логотипов на 2012 год.


LogoLounge, самый авторитетный портал о логотипах, ежегодно анализирует все присланные в редакцию работы и определяет тренды на год.

Для подготовки обзора на 2012 год основатель LogoLounge Билл Гарднер (Bill Gardner) с коллегами просмотрели несколько десятков тысяч логотипов и выбрали те, которые определяют основные направления дизайнерской мысли в айдентике в текущем году.

Кластеры иконок




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

Прозрачные цепочки




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

Акварель




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

Чипсы




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

Анаглифы




Никогда еще два цвета не несли такой универсальный набор направлений. Смещенные красное и синее изображения – символизация общеизвестного псевдо 3D. Эта оптическая техника была изобретена еще в далеких 1850-х во Франции. Если посмотреть на такое изображение через линзы конкретного цвета, вы увидите либо одно, либо другое изображение.
Естественно, для того, чтобы смотреть на логотип очки не нужны - всё и так видно. Но данный приём говорит о двойственности выбора. Лого говорит зрителю, что он может сделать выбор одного либо другого, но никак не оба одновременно. Также концепция подразумевает, что ответственность за выбор логотип делегирует потребителю. Поскольку это достаточно новый подход в дизайне логотипов и коммуникациях бренда, потребителю потребуется немного времени, пока он расшифрует коммуникационное послание.

Выборочная резкость




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

Ткань




Мода на пересекающиеся волокна началась еще в прошлом году, но теперь приобрела качества тренда. Подход призван продемонстрировать концепцию объединения разнонаправленных векторов в единую плоскость, как нити объединены в полотно.

Завитушки




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

Ростки




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

Кожура




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

Резьба в сферах




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

Приложения




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

Мозаики




Кто внимательно следит за ежегодными отчетами о трендах в дизайне логотипов, тот заметит, что данный стиль не новый и в частности очень похож на пиксельный тренд 2011 года. В мозаиках несколько геометрических фигур собраны в картины повторяющихся узоров. Часто элементы имеют общую цветовую гамму, что создает эффект наложения и прозрачности. Логотипы варьируются от очень сложных до очень простых, созданных всего из нескольких элементов. Помимо своей красоты, такие логотипы доносят концепцию силы в количестве, подчеркивают многогранность, точность, кропотливость и аккуратность.

Закрученные дуги




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

Братские серии




Данная тенденция была отмечена еще в прошлые года (вспомним логотип Мельбурна), но сейчас приобрела особую популярность. Суть данного тренда в том, что создается не один логотип, а серия, объединенная графической формой. При этом каждый элемент имеет своё стилистическое оформление.

Cпасибо ADME.ru!

VW проехался по фотографиям в Facebook
design, веб дизайн
[info]le_dantu

Агентство McCann Istanbul разработало интерактивную кампанию Volkswagen Amarok в социальной сети Facebook.


Volkswagen Amarok - это универсальный автомобиль для любых целей и дорог. Он может проехать абсолютно везде: от горной местности до городских джунглей. Он может даже проехать в Facebook.

  • Leave a comment
  • Add to Memories

Архивные кадры
design, веб дизайн
[info]le_dantu

Редкие и очень важные моменты из прошлого.


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

Два десятка редких архивных фотографий, связанных с самыми разными людьми и событиями прошлого века.



Один из первых МакДоналдсов.



Джон Леннон дает автограф рядом со своим убийцей Марком Чапменом за несколько часов до своей смерти.



Начало строительства новой бразильской столицы - города Бразилиа.



Встреча Адольфа Гитлера и Папы Римского Пия XI (Акилле Ратти).



Элвис Пресли во время службы в армии.



The Beatles в самом начале своей карьеры.



Усама бен Ладен во время визита в Лондон со своей семьей в начале 70-х.



Развал Берлинской стены.



Представитель куклукс-клана в операционной одной из больниц Алабамы.



Эволюция бутылки Coca-Cola (слева-направо: 1899, 1900, 1915, 1916, 1957, 1986 годы).



Альберт Эйнштейн в группе ученых.



Встреча Чарли Чаплина и Махатмы Ганди.



ЭНИАК (ENIAC, сокр. от Electronic Numerical Integrator and Computer — Электронный числовой интегратор и вычислитель) — первый широкомасштабный электронный цифровой компьютер. Построен в США в 1946 году.



Группа The Beatles в 1957 году - Джону Леннону - 16 лет, Джорджу Харрисону и Полу Маккартни - 15 лет.



Первая команда Google - 1999 год.



Одна из редких фотографий Титаника 1912 год.



Момент, когда Джорджу Бушу младшему сказали о террактах 11 сентября.



Че Гевара и Фидель Кастро.



Начало строительства статуи Спасителя в Рио.

4.04 С днем веб-мастера!
design, веб дизайн
[info]le_dantu


Сегодня, 4.04 день веб-мастера.

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

Сегодняшняя дата, кстати, выбрана не случайна, как вы уже наверное заметили, — 4 апреля (4.04) похоже на 404 ошибку, именно в честь нее выбрана эта дата.
Так же, сегодня международный день Интернета, в России он празднуется 30 апреля, но международный — именно сегодня.

С праздником!

Тенденции веб-дизайна в 2012 году
design, веб дизайн
[info]le_dantu

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

1. Реагирующий веб-дизайн.

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


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

2. Фиксированное навигационное меню.

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


jQuery позволяет очень быстро достичь этого эффекта. Хотя это можно сделать и с помощью CSS. Большинство статичных навигационных меню в 2011 году следовали за навигацией пользователя от страницы к странице. И все же в новом примере Саймон Уитс (Simon Wuyts) вывел фиксированное навигационное меню на новый уровень.


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

3. Круги

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


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


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

4. Векторная графика.

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


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


А вот другой сайт с персонажем — Freelanceswitch. Этого маленького учёного на сайте можно найти множество раз, причём в самых разных вариациях. Этот тренд выделяет совершенно новое направление эстетики при создании сайта. И, если 2011 год показал нам хотябы что-то, то 2012 год будет полон этих весёлых векторных логотипов.

5. Многоколоночные меню.

Бывает, что сайт содержит огромное количество ссылок. Как следствие, стандартный тип навигации становится перегруженным ссылками. Поэтому наверху страницы располагайте ключевые ссылки.


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


Очевидно, преобразования в стандартной навигации — важный вопрос, который стоит перед каждым.

6. jQuery/CSS3/HTML5-анимация.

Старайтесь не использовать jQuery-эффекты в больших количествах. Веб- дизайн должен охватывать пользовательский опыт, эстетику и дополнять всё это анимацией. К счастью, прогресс библиотеки jQuery, а также CSS3 позволяют делать это, не перегружая кодом страницу.
jQuery прекрасен в разработке эффектов интерфейса браузеров, но, к сожалению, похвастаться 100% поддержкой. Но если использовать резервный вариант с CSS, вы обеспечите универсальность сайта.

7. Графические ленты и баннеры.

Этим элементам дизайна был предсказан рост и в 2011 году. Дизайнеры начали писать простенькие уроки по созданию страниц с лентами, баннерами, закладками и другими типами экранных значков. Массовое появление бесплатной информации послужило толчком к тому, что многие дизайнеры стали делать также.


Огромное число сайтов включило этот стиль в дизайн за короткие 6 месяцев. Бета-тестеры часто используют эти элементы для оформления версии программного обеспечения или приложения. Кроме того можно найти множество баннеров, оформленных в этом стиле. Чуть ниже вы найдете несколько лент в формате PSD, которые можно будет скачать, ну и использовать в ближайших проектах

Смотрите также Тренды в веб-дизайне: ленты и значки

8. Произвольные шрифты

Бесплатная онлайн-библиотека шрифтов Typekit предоставляет бесплатную пробную версию любому заинтересованному веб-дизайнеру. С помощью этого инструмента вы добавите JavaScript, который позволит вам использовать почти любой пользовательский шрифт в CSS-шаблон. В 2011 году популярность этого тренда росла, особенно среди дизайнеров на WordPress, которые пытались подчеркнуть индивидуальность шаблонов.
Раньше у Typekit не было нормальной поддержки и было довольно много багов. Сейчас им помогли в GoogleWebFonts, что сделало их очень популярными. Вы просто подбираете понравившийся шрифт и получаете код, который вам нужно подключить. Затем просто ссылаетесь на нужный шрифт в свойстве CSS font-family.


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

9. Инфографика.

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


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

10. Акцент на простоте.

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

Но для изменения макета при разработке с нуля не требуется концентрироваться на минимализме. Уделите немного времени для описания и зарисовки ваших идей по навигации, иерархии страниц, тексту и заголовкам и т.д. Небольшое планирование приведет к упрощению всего.

Заключение.

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

via


Photoshop CS6 Beta
design, веб дизайн
[info]le_dantu
image

Релиз новой версии Photoshop CS6 намечен на первую половину 2012 года. Бета версия уже доступна для скачивания (ссылка ниже)



Вышла (21 марта) бета Photoshop CS6.Скачать для Windows, для Mac, страница на Adobe Labs. Одна из главных фич — «поумневшое умное удаление (Content Aware Fill, Content Aware Remove)», когда можно удалить объект, а Photoshop его зальет проанализировав окружающие области. Присутствуют инструменты для работы с видео и 3d визуализацией. Обновлен интерфейс и движок Mercury Graphics Engine (MGE).

Релиз обещают в первой половине 2012 года, то есть совсем скоро.

Краткий видео обзор:

Интересный промо ролик и процесс его изготовления.
design, веб дизайн
[info]le_dantu

SOLIPSIST from Andrew Huang on Vimeo.



SOLIPSIST - Making Of from Andrew Huang on Vimeo.

  • Leave a comment
  • Add to Memories

Делаем рекламу рок-группы в ароматный глянец
design, веб дизайн
[info]le_dantu
  • Leave a comment
  • Add to Memories

Красиво Топчет! Сегодня 0 марта, посмотрим последний раз на снег!
design, веб дизайн
[info]le_dantu



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



Каждый зимний день Саймон Бек надевает снегоступы и идет гулять по замерзшим озерам Савойи. После 5-9 часов брожения по снегу его следы складываются в четкий геометрический рисунок. Размер каждого такого изображения достигает величины размером с три футбольных поля. Удивительная особенность рисунков на снегу заключается в том, что они приобретают 3D-эффект, если смотреть на них с высоты. Время существования шедевра на снегу определяет погода. Первый же сильный ветер или снег разрушает эти творения. Иногда Саймон Бек восстанавливает заметенную снегом картину, иногда приступает к созданию новой.

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

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







































По материалам ADME
  • Leave a comment
  • Add to Memories

You are viewing [info]le_dantu's journal