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

Якоб Нильсен – это успешный программист и инженер, работающий в сфере веб-дизайна. Главным его достижением является основание компании «Nielsen Norman Group» совместно с бывшим вице-президентом фирмы «Apple Computer» Дональдом Норманном. Наибольший опыт Нильсен получил во времена работы в компании «Sun Microsystems» на должности ведущего инженера. Также он являлся специалистом по юзабилити (теория о целесообразности и удобстве использования предмета по отношению к заявленной цели).

Вся деятельность Якоба Нильсена направлена в первую очередь на то, чтобы сделать работу в сети Интернет для пользователей максимально удобной и доступной. Он автор множества полезных изобретений и владеет тридцатью одним патентом. Также в арсенале Якоба Нильсена немало книг на темы веб-дизайна, пользовательских интерфейсов, структуры сайтов и многие другие. Одна из самых известных его книг – «Веб-дизайн». Его работа, однако, не ограничивается разовыми внедрениями и изобретениями. В частности, в журнале “Internet World”, а также на нескольких сайтах Якоб Нильсен ведёт собственные рубрики и выступает в качестве консультанта по вопросам, относящимся к его компетенции.

За этим высококлассным специалистом давно закрепилось прозвище «адвокат пользователей», коим он сам себя окрестил. Ввиду тех достижений, которых он добился в своей работе по борьбе с «тёмной стороной Интернета», это не оспаривается никем.

Первая книга Якоба Нильсена, изданная в России в 2000 году – «Веб-дизайн» (в оригинале: «Designing Web-Usability») – по сей день является лучшим пособием по основам юзабилити. Однако практическое применение этой теории наилучшим образом описано во второй книге автора – «Homepage Usabiliti: 50 Web-sites Deconstructed». Здесь проведён анализ пятидесяти главных страниц на сайтах ведущих организаций и компаний с целью определения уровня удобства пользования ими для посетителей.

Свою активную деятельность в создании теории по построению качественного веб-дизайна Якоб Нильсен начал с заявления о том, что 90% всех сайтов имеют крайне ужасный и отталкивающий пользователей дизайн.

10 принципов успешного интерфейса сайта

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

1. Главное в интерфейсе – его простота. Упрощение навигации и фильтрация от ненужной информации сделают сайт намного привлекательнее.
2. Большое значение имеет скорость загрузки сайта. Достичь этого можно при помощи совмещения небольших страниц с использованием быстрых серверов.
3. Не последнюю роль в наполнении сайта играет лаконичность используемого контента. Вся информация, представленная на веб-страницах, должна строго соответствовать тематике самого сайта. Ничего лишнего!
4. Важно сделать сайт удобным для пользователей со всех уголков планеты. Интернет по определению – интернационален. В этой связи нежелательно использовать на страницах выражения из местных диалектов или термины, понятные узкому кругу лиц.
5. Для хорошего сайта необходим удобный поисковик, позволяющий легко ориентироваться посетителю. Якоб Нильсен рекомендует разместить его в правом верхнем углу главной страницы.
6. Целесообразнее использовать программное обеспечение, уже проверенное и применяемое как минимум 2 года. Самые последние технологии зачастую несовершенны и могут повредить работе сайта.
7. Информация о самом сайте непременно должна быть размещена на главной странице. Не стоит заставлять пользователя искать это вручную.
8. Необходимо на видном месте разместить расценки на предлагаемые сайтом товары или услуги в том случае, если сайт имеет коммерческую направленность.
9. Обязательно стоит позаботиться о том, чтобы в браузере можно было увеличить размер шрифта. Многие пользователи имеют плохое зрение.
10. Регулярное обновление сайта позволит удержать на нём большинство постоянных посетителей, а также привлечь внимание новых.

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

А вы читали книги Якоба Нильсена? Что думаете вообще про него?

P.S. Постовой. Если вы не знаете где купить фотошоп, то можете обратиться в infoservice: специальные цены на Adobe и Corel!
Качественные услуги от компании Гидрол-Руфинг – полимерная гидроизоляция, ремонт и монтаж кровли, подземная гидроизоляция.
Советуем попробовать чаи Млесна – элитный цейлонский чай.

© Дизайн Мания, 2010. | Нет комментариев | Категория Персоналии, Статьи.

Интересные статьи по теме

• Ошибка 404: Изящное решение (14)
• Как преодолеть творческий кризис у дизайнеров? (12)
• Cветовые эффекты для сайтов (14)
• Тренды веб-дизайна в 2009 году. Часть1 (13)
• Типографика для веб (8)

Типографика для веб сайта – достаточно важный элемент дизайна, который в рунете выражен как-то не очень сильно. Данный вопрос чаще поднимается на англоязычных зарубежных дизайнерских блогах, у нас внимание ему практически не уделяется. Нет, конечно при создании макета большинство дизайнеров думает о типографике сайта – шрифтах, оформлении, но уж очень  скромно и мало. Потому, наверное, в рунете можно по пальцам посчитать количество проектов с яркой креативной и нестандартной типографикой, больше стандартного унылого “серого” дизайна:( Возможно, именно по этому Дмитрий Наумов решил поделиться интересным гостевым постом о типографике.  Дима по совместительству, кстати, является автором весьма полезного проекта Converlab – “Дизайн. Юзабилити. Конверсия.” Итак, 9 советов по типографике веб сайта:

1. Выбор шрифта

От выбора шрифта зависит очень много. Дизайн шрифта определяет настроение, передает «характер», да и вообще оказывает сильное влияние на восприятие. Выбирайте тот шрифт, который соответствует стилю и концепции вашего сайта. Например, для «традиционного» дизайна пойдет традиционный шрифт с засечками, вроде Times Roman, для «современного» дизайна может подойти шрифт без засечек — Arial или Helvetica;

2. Размер шрифта

Особо важен размер шрифта основной части текста. Заголовок (подзаголовки) может быть гротескно большим и неуклюжим, но основной текст должен быть комфортным, что возможно только при оптимальный размерах. Обычно это 12-16 px;

3. Набор стилей

Шрифт не должен быть однообразен, серую массу читать не приятно. Разработайте систему стилей для заголовков и подзаголовков (H1, H2, H3 и т.д.), цитат, основного текста и тому подобное. Используйте для этого различные размеры шрифта, варианты его начертания, возможно для контраста в этих целях используйте еще один шрифт (специально для заголовков или цитат);

4. Акцент

Важные места по тексту обязательно нужно выделять — жирным или курсивом. Главное в этом не переусердствовать. Акцент он на то и акцент потом что должен использоваться дозировано;

5. Ширина столбца

В традиционной типографике большое внимание уделяется ширине колонки, по этой причине текст разбивают на колонки в газетах и журналах. Если строка слишком длинная, читать ее не удобно. Потому что приходится слишком далеко переводить взгляд от конца одной строки до начала следующей. Короткая строка тоже не хорошо. Оптимальная длина строки лежит в диапазоне 70-140 знаков;

6. Интерлиньяж (Leading)

Интерлиньяж (Leading) — расстояние между строками. Если оно маленькое, это отрицательно сказывается на читабельности. Слишком большой Leading тоже ничего хорошего не сулит. В общих случаях, вам скорее всего подойдет интерлиньяж на 2-4 пункта больше чем размер шрифта;

7. Общая структура страницы

В идеале должна на странице должна использоваться единая сетка. Таким образом можно добиться гармоничного вида всего сайта в целом. Старайтесь использовать общие правила и стили (которые вы придумали) на всем сайте;

8. Цвет и контраст

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

9. Белое пространство

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

—–

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

P.S. Постовой. Качественный и надежный датацентр – аренда и размещение серверов.
Если заболел ваше питомец, поможет вызов ветеринара на дом – клиника Биоконтроль.
Милые дамы с красивыми ножками могут купить колготки в интернет-магазине в Москве.

© Дизайн Мания, 2010. | Комментариев - 8 | Категория Статьи, Типографика.

Интересные статьи по теме

• Подбираем шрифт для сайта с помощью онлайн сервисов (2)
• Типографика для веб (8)
• Логотипы и типографика (4)
• Вредные привычки HTML верстки (8)
• 10 схематических (sketchy) шрифтов для веб-дизайнеров (7)

Сайт без фавикона (favicon), как корабль без флага. Фавикон – неотъемлемая часть бренда сайта, его имиджа и идентификации. Кстати, посмотрите на выдачу какой-нибудь поисковой системы (например, Яндекса). Вы обязательно обнаружите рядом с заголовками найденных страниц и документов фавиконки. Т.е. фавикон, это еще и фактор повышающий кликабельность вашего сайта в результатах поиска. Поэтому, без фавикона никуда!

Как изготовить фавикон? Процесс условно можно разделить на 2 этапа:

1. Изготовление фавикона или нахождение уже готового;
2. Установка его на сайт.

К первой задаче, как было обозначено, может быть несколько подходов. Если вы по каким-то причинам вы не хотите изготавливать favicon сами, вам лень, нет времени или не умеете, а пробовать и эксперементировать желания нет, его можно найти на одном из сайтов-библиотек готовых фавиконов. Главный недостаток этого варианта – вряд-ли ваша иконка окажется оригинальной. Скорее всего она уже используется на десятках, а то и сотнях или тысячах сайтов. Поэтому, в данном случае, актуальным вопрос: “Нужен ли такой фавикон вообще?”. По мне, так этот элемент обязательно должен быть уникальным, даже если он прост как “3 копейки”. Поэтому, от этого варианта лучше отказался и изготовил фавикон собственными руками. Давайте на этом процесс остановимся подробнее.

Начать изготовление фавикона можно в графическом редакторе или с помощью специально сервиса. В первом случае необязательно прибегать к помощи десктопного приложения (например, Photoshop), можно воспользоваться бесплатным онлайн растровым графическим редактором. Все что вам нужно – создать документ 16х16 пикселей и что-нибудь на этом “холсте” изобразить. Залить фон, попробовать что-то нарисовать “карандашом” или поставить какой-нибудь символ или букву. На скриншоте пример “шедевра”, который я начал изображать с помощью сервиса Pixlr:

Результат можно сохранить в формате “.gif” или “.png”.

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

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

Какой бы из вариантов вы бы не выбрали, создание фавикона дело не очень сложное и интересное. Установка так же проблем не доставит. После того как вы сохраните готовую иконку на компьютере, ее можно будет конвертировать в формат “.ico”, или использовать файлы “.gif” или “.png”. Принципиальной разницы не будет, практически любой вариант при желании в последующем можно будет анимировать. Остается последнее – залить фавикон в “корень” сайта (с именем favicon) и добавить фрагмент кода в head секцию:

<link rel=”shortcut icon” href=”путь_к_иконке/favicon.ico” />

(Если у вас фавикон формата отличного от “.ico”, нужно указать нужный тип файла)

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

P.S. Постовой. Читаем и смотрим про Web-дизайн в стиле ретро – интересная статья!
Важный шаг в раскрутке это поисковая оптимизация сайта или блога.
Полезный онлайн журнал handmade – все, что сделано своими руками.

© Дизайн Мания, 2010. | Комментариев - 12 | Категория Статьи.

Интересные статьи по теме

• Стикеры на сайт “Скидки и распродажа” (5)
• Оригинальные генераторы бэкграунд (background) (3)
• Онлайн архив бесплатных иконок (3)
• Красивые тематические иконки от yellowicon (1)
• Красивые и стильные темные иконки (1)

Сегодня у нас еще один гостевой пост от Игнашова Евгения, который представляет проект Candysign: создание сайтов, иконок, проведение сетей, программирование.
Эти строки читают творческие люди или те, кто себя к ним причисляют? Если да, то им наверняка знакомы времена, как сумасшедшего креативо-извержения так и творческого застоя. Мне, по крайней мере знакомы (будем считать, что это говорит о том, что я настоящий творец :)) Застой у нас, дизигнеров может случаться по великому множеству причин, как-то: спать охота, заказчик тупой, муза покинула или любимая песня в винампе закончилась. У каждого своё. Возникает вопрос: “Как же, блин, всё-таки безболезненно подстегнуть креативность и творческое мышление?”. Честно говоря, я действительно считаю, что можно как-то выделить из общей массы вариантов, несколько, которые действуют наиболее эффективно и на наибольшее количество людей.

Например, вы – дизайнер (хотя, скорее всего так и есть) и у вас тот самый застой, а народ требует и даже периодически названивает с вопросом: “Ну чё там?”. Наиболее действенный лично для меня метод трансформации в боевую дизайнерскую единицу это, как не странно, выжидание. Да, действительно поговорка “утро вечера мудренее” справедлива. Сидите вы предположим в час ночи рисуете что-то, но чуете, что, как говорится, не прёт. И порыва нет, и подолгу торчите на одном месте, с целью довести его до идеала, и прочее. Кто учился в художке или тупо ходил в кружок в детстве, тому наверняка преподаватель при таких же моментах советовал отойти минут на 10-15 от своего рисунка и просто отвлечься другими делами. Отвлекаясь, образ рисунка частично уходит у вас из головы и потом вы, так сказать, с новым свежим взглядом смотрите на своё детище и сходу видите то, чего не замечали при пристальном часовом разглядывании.

Муза также может вернуться и при созерцании чего-нибудь/кого-нибудь прекрасного. Но непременно не просто прекрасного или вызывающего умиление как, например, маленькие дети, щенки, котята или голые тётки, а “тематически прекрасного”. Т.е. неплохо ознакомиться с работами старших товарищей, коллег по цеху, тех, кого вы считаете своим духовным наставником, Гуру и прочих. Желательно поискать схожие по теме работы, а не просто  картинки зырить. Щас наверно некоторые думают мол: “На что это он намекает, стервец? Спереть чужие идеи предлагает?”. Отвечу прямо и честно, не кривя душой – нет ). Я клоню к, опять таки, всем известной поговорке “Учись у многих, не подражай никому”. Даже великие, на этапе своего становления у кого-то учились, в чём-то черпали вдохновение, что-то употребляли… Ежели при вас простом дизайнере есть ваш личный арт-директор, то можно и к нему обратиться, пускай з/п отрабатывает. Не стремайтесь ходить по портфелям качественных веб-студий и учиться у них.

Напомню ещё раз, что нужно именно учиться, а не воровать. Да, грань тонка, да иногда червь бездарности так и точит, падла: “Сопри, сопри, интернет большой, никто не спалит”. Роль этого червя иногда могут заменять не слишком совестливые коллеги по цеху, мол: “А чё? Я всегда так делаю и ничего”. Тут должно включаться ваше дизайнерское самолюбие, коего у каждого дизигнера обычно хватает.

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

Преодолевать этот творческий кризис можно ещё и генерируя заведомо не самые оригинальные идеи (что-то вроде “мозгового штурма”). То есть просто накидывая некий рабочий материал процентов 70 которого в дальнейшем отсеяться сами-собой. Но, по крайней мере, это даст вам некий вектор по которому уже можно идти не тратя время впустую. Например, по той же булочной можно сразу для себя уяснить, что делать сайт в тёмных тонах не сильно-то логично, следовательно, надо делать в светлых либо нейтральных тонах. Цвета бывают тёплые и холодные, думая про то какая должна быть идеальная булка вы непременно наткнётесь на мысль, что она должна быть свежей, пышной, и непременно ТЁПЛОЙ. Цепь логических рассуждений можно продолжать и дальше, периодически записывая или зарисовывая (кому как удобнее) стоящие идеи. Поразмыслив над придуманным мною же заказом, я пришёл к некоторым вполне логическим выводам. Короче в итоге мы имеем:

1. Фон сайта для булочной может быть телесного цвета (знаете такой розово-светло-коричневый) или его оттенков.
2. С неким персонажем (баба по центру)
3. Цвет текста тоже можно сделать тёплым
4. Ну и добавить свежести позволят холодные цвета где-то сверху (голубое небо или типа того).

Согласитесь, с этим уже можно начинать работать. Не так ли?

—–

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

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

P.S. Постовой. Читаем про DIP 2.0 – Новый сервис для хранения закладок.
Где развлечься в Киеве? Полная Афиша Киева онлайн, новости и статьи о Киеве.
Полезная статья про то как раскрутить форум – обсуждаем и делимся опытом.

© Дизайн Мания, 2010. | Комментариев - 12 | Категория Статьи.

Интересные статьи по теме

• Якоб Нильсен – известный специалист по юзабилити (0)
• Ошибка 404: Изящное решение (14)
• Cветовые эффекты для сайтов (14)
• Фрактальные кисти для Photoshop (3)
• Формы для фотошопа (custom Photoshop shapes) (0)

Приветствую всех, сегодня в Дизайн Мании гостевой пост про Типографику, представлен Лежневым Дмитрием (aka meekman), который по совместительству является генеральным директором компании Cifronet.

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

До настоящего момента использование шрифтов отличных от тех, которые установлены вместе с операционной системой, означало использование изображений, флеша или других обходных путей. Однако создатели браузеров дали дизайнерам карты в руки, внедрив свойство @font-face CSS, которое позволяет прописывать ссылку на любой файл шрифта, в результате чего он будет использоваться на страницах сайта.

Тут же возникла проблема с компаниями разработчиками и дистрибуторами шрифтов: большинство из них отказались выдавать лицензии на использование своих raw-шрифтов на веб-страницах, опасаясь пиратства. Введение свойства @font-face усилило такие опасения, заставив обе стороны искать удовлетворительные для всех решения. Некоторые из них уже доступны, некоторые еще в стадии разработки. Это расширенные лицензионные соглашения с конечным пользователем шрифтов, а также сервисы третьих сторон, предоставляющие встраиваемые шрифты, например Typekit, Typotheque и Kernest. Веб-дизайнеры более свободны в выборе шрифтов, а шрифтовые компании и разработчики получают деньги за свою работу. Проблема решена? В принципе да.

Совершенно новый мир

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

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

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

Контекст и значение

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

Широко используемые системные шрифты, например, Georgia, Verdana и Arial, настолько вездесущи, что уже не ассоциируются ни с чем кроме «веба». Будучи неспособными добиться желаемого эстетического эффекта из-за скудного выбора шрифтов, мы имели время сосредоточиться на читабельности. Во многом из-за этого работа для веб строилась по принципу «сделать и забыть», частично из-за стремительного развития полиграфии, а также из-за того, что в веб-дизайне нет таких точных правил типографики, как в дизайне полиграфической продукции.

Муки выбора

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

Знаменитый дизайнер шрифтов Зузана Личко (Zuzana Licko) однажды сказала: «Каждый лучше читает то, что читает чаще». Речь идет о приобретенных навыках. Это объясняет, почему выбор шрифта самая сложная задача типографа: чтение это субъективное относительное действие. Для прочтения длинного абзаца, написанного готическим шрифтом, который считался «читаемым» столетия назад, понадобится намного больше времени, чем если бы использовался простой шрифт из семейства Serif или Sans Serif, независимо от того, читаем мы с листа или с монитора.

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

Далее следует перечень характеристик и методов, которые следует иметь в виду, имея дело с растущим миром веб-шрифтов.

Отличное руководство по выбору и комбинированию шрифтов

Задумываясь о покупке новых шрифтов, следует помнить, что выгодным приобретением станут известные шрифты. Выбирайте такие, которые подходят под общее понятие читабельности – те, которые мы используем и видим ежедневно. Пусть это будут шрифты, лежащие в «диапазоне читаемости» (возможно, следует использовать прямоугольную систему координат). Чем дальше отходить, тем сложнее будет читаться дизайн. Кстати, не стоит забывать, что многие шрифты занимают промежуточное положение между читаемыми и нечитаемыми.

КОНТРАСТ

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

РАБОТА С ОСНОВНЫМ ТЕКСТОМ

Bobulate использует TypeTogether’s Skolar через Typekit.

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

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

ПРОЧТИ МЕНЯ!

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

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

СУТЬ СООБЩЕНИЯ

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

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

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

С ЗАСЕЧКАМИ И БЕЗ ЗАСЕЧЕК

В шрифтах Bodoni и Futura буквы выглядят очень по-разному, однако их структура основана на одних и тех же геометрических принципах.

Одним из самых простых способов достижения баланса и контраста в типографике является комбинирование шрифтов семейства Serif и Sans Serif. Эта простая и легко подбираемая комбинация при правильном выборе шрифтов способна заставить текст выглядеть гармонично.

Это не строгое правило, однако шрифты одного и того же дизайнера иногда хорошо сочетаются вместе. Как в двух картинах одного и того же художника, в двух шрифтах одного дизайнера прослеживается его рука. Например, шрифты Эрика Грилла (Eric Gill) Perpetua и Gill Sans хорошо сочетаются, так как имеют несколько одинаковых штрихов и линий. Также хорошо сочетаются шрифты, специально разработанные для комбинирования, например Meta Sans и Meta Serif.

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

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

Baskerville и Futura, “old” противопоставлено “new.”

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

ЭКСПЕРЕМЕНТИРУЙТЕ СО СТИЛЯМИ

В семействах наподобие Proxima Nova от Марка Саймонсона (Mark Simonson) шрифты имеют несколько типов интенсивности, что обеспечивает различные гибкие типографические возможности при создании дизайна.

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

В БИБЛИОТЕКУ!

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

ДЕНЕЖНЫЕ ВОПРОСЫ

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

ДОВЕРЯЙТЕ ИНТУИЦИИ

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

ТОЛЬКО ВПЕРЕД!

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

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

Перевод статьи: On Web Typography (Джейсон Санта Мария).

От себя хочется поблагодарить и сказать спасибо за перевод Лежнева Дмитрия (aka meekman), который предоставил его специально для Дизайн Мании. Получилось, как мне кажется, достаточно интересно – лично я никогда не задумывался особо на типографикой проекта, выбирая для сайта стандартные шрифты, а тут оказывается все намного сложнее. Дизайнерам и верстальщикам будет очень полезно почитать. Дмитрий, кстати, тоже в какой-то степени причастен к веб-дизайну, поскольку его компания  Cifronet занимается разработкой сайтов – умной инвестицией для любого бизнеса!

P.S. Постовой. Внимание! супер-акция для блоггеров «Поговорим об Аукро» – выиграй ноутбук HP!
Заходим на интересный проект и читаем всё о блоггинге.
Интересуетесь кадровым обслуживанием? Звоните, расскажем подробнее.

© Дизайн Мания, 2010. | Комментариев - 8 | Категория Статьи, Типографика, Шрифты.

Интересные статьи по теме

• Тренды веб-дизайна в 2009 году. Часть1 (13)
• Тренды веб-дизайна 2009. Часть3 (7)
• Подбираем шрифт для сайта с помощью онлайн сервисов (2)
• Логотипы и типографика (4)
• Тренды веб-дизайна 2009. Часть2 (6)

Сегодня в Дизайн Мании гостевой пост от seo и просто блоггера Sk8er‘а. Исходный текст автора я чуть-чуть расширил небольшими размышлениями дабы он не казался слишком техническим.

Наверное, нет на свете ни одного ИТшника, который бы не слышал о выходе Windows 7, многие уже даже успели установить ее в качестве домашней винды. Я и сам нахожусь в процессе установки – купил недавно новый винчестер, 2 кулера для корпуса и нашел нужный мне дистрибутив операционной системы Windows 7. Не хватает только времени чтобы взять выключить все дела и работу, сконцентрироваться да раз и навсегда уйти с ужасной и громоздкой Vista. Так вот для тех, кто пока находится, как и я, в раздумьях предлагаю поставить себе мотивирующие обои на рабочий стол в стиле Windows 7, но вместо того чтобы их искать, мы постараемся нарисовать их самостоятельно в графическом редакторе Photoshop (английская версия).

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

Создадим новый файл (File>New) размером 1920px на 1200px, в поле “Background Contents” выбираем White. Далее выбиваем инструмент Rectangle Tool (U) и рисуем прямоугольник. Параметру Fill присваиваем значение 0% и идем в настройки слоя (Layer Style), далее переходим Styles > Gradient Overlay.

Выбираем Gradient Editor кликнув по градиенту, обратите внимание на коды используемых цветов:

В результате получится что-то вроде:

Используем эту же технику для создания еще одного слоя заднего фона. Опять создаем прямоугольник на весь экран. Для него так же выставляем значение Fill равное 0% и идем в настройки слоя (Layer Style), в пункт Gradient Overlay и выбираем другой цвет.

Должны получить:

Далее опять выбираем инструмент Rectangle Tool (U), выделяем прямоугольник чуть меньше и заполняем наш задний фон новым градиентом. Вновь ставим значение Fill для слоя равное 0%, переходим в настройки слоя и переходим в Gradient Overlay.

Итого имеем фон для обоев в стиле Windows 7:

Сейчас мы сделаем из всех слоев одну картинку, она и будет задним фоном. Выделяем их все (зажимаем Ctrl и кликаем на каждый слой) и нажимаем Ctrl+E, либо кликаем правой кнопкой мышки и выбираем пункт “Merge Layers”. У нас получился один объединенный слой. Далее делаем копию и переходим в Filter > Render > Lighting Effects.

У слоя настраиваем Blend Mode в режим Screen.

А так же настраиваем Blur в окне Filter > Blur > Gaussian blur.

Создаем новый слой и используя кисть рисуем нижнюю часть слоя. Цвет кисти: R:5, G:80, B:210.

Добавьте Layer Mask кликнув на кнопку Add Layer Mask, которая находится в нижней части панели слоев. Далее используйте кисть черного цвета со значением Opacity – 30%. Ей закрашиваете яркий синий цвет на нужных частях фона чтобы он особо не выделялся. В итоге должно получится так:

Выставляем Blend Mode в значение Luminocity.

Создаем новый слой. Выбираем ту же кисть, но белого цвета с параметром Opacity в 10%, что бы “засветить” низ слоя.

Ставим значение Blend Mode в Overlay.

Теперь первую часть урока о том как создать обои Windows 7 для рабочего стола можно считать законченным – дальше будем добавлять логотип системы.

P.S. Как зарегистрироваться на фотобанке Shutterstock.
Я люблю своих детей. По этому я покупаю детские велосипеды. Они будут рады велосипедам!
Наш интернет магазина предлагает духи ведущих европейских брендов.

Но дабы не разрывать урок создания обоев Windows 7 на 2 отдельных поста, разбиваю его на 2 страницы (Pages), переключайтесь по ссылке ниже и продолжаем учиться рисовать.

© Дизайн Мания, 2009. | Комментариев - 2 | Категория wallpapers, Статьи.

Интересные статьи по теме

• Отрисовка изображения в фотошопе с нуля с помощью Pen Tool (2)
• Обои для рабочего стола – сентябрь 2009 (4)
• Экшены (actions) для Photoshop – экономия времени (6)
• Формы для фотошопа (custom Photoshop shapes) (0)
• Уроки верстки – CSS подмена текста картинкой (6)

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

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

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

Выгоды работы с микростоками на лицо:

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

Примеры крупных и успешных фотобанков:

1. Istockphoto – праотец микростоковой индустрии
2. Shutterstock – работает по подписке
3. Fotolia – наибольшие обороты для фотографов, твердый бизнес
4. Dreamstime – от каждого по чуть-чуть
5. Pixmac – максимально упрощенное пользование сервисом

В каждом фотобанке что-то есть свое. Istockphoto – самые качественные фото, Shutterstock – самые дешевые цены, но очень много и малоприменяемых фото. Pixmac – самый легкий и понятный сервис, но еще мало фотографий. Пусть каждый выберет то, что ему необходимо – цена, качество, удобство.

Автор статьи – Андрей Юрлов (работает с Pixmac).

Спасибо Андрею за статью, она хоть и не большая получилась, но весьма познавательная. Можно сказать – пособие для начинающих. Я как-то давно уже касался темы исходных материалов для сайта – читаем статью про бесплатные картинки (headers) для сайта или блога.

А у вас есть опыт работы с фотобанками? Зачем использовали, каков результат? – пишите в комментариях.

P.S. Постовой. MakeUp интернет магазин парфюмерии доставка по Украине.
Хорошие часы elite mens watches – плюс к имиджу.
Смотрим сайты в одессе, актуально и по делу.

© Дизайн Мания, 2009. | Комментариев - 7 | Категория Статьи.

Интересные статьи по теме

• Лучшие бесплатные фотобанки и фотостоки (12)
• Свадебные рамки для фотошопа (1)
• Якоб Нильсен – известный специалист по юзабилити (0)
• Фрактальные кисти для Photoshop (3)
• Фотографии снежинок (7)

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

Ставьте ясные цели

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

Упражнение с измененным критерием приемки (modified acceptance criteria exercise) — самое простое и в то же время эффективное, что я знаю. Оно научит нас целеполаганию. Шустрые разработчики из разных сфер используют его, чтобы показать, зачем решать данную задачу и как она впишется в общую картину дела. Пару изменений и упражнение подходит для целеполагания в сайтостроении:

Пример запроса:

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

Пример схемы построения запроса:

*Мы хотим ______, потому что ________, чтобы  _________.

Пример соответствующих целей:

*Мы хотим увеличить посещаемость сайта на 20%, потому что нам нужно больше внимания со стороны потенциальных клиентов, чтобы привлекать минимум 8 контактов с клиентами в месяц.
*Нам нужно изменить внешний вид сайта на более современный, потому что мы должны бОльше соответствовать нуждам потребителей, чтобы поднять продажи на 10%.
*Мы хотим писать четыре статьи о нашей индустрии в месяц, потому что мы хотим помочь нашему рынку, с целью формирования минимум двух партнеров в месяц.

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

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

Организуйте страницы

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

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

Если у вас нет возможности заниматься этим самому или у вашей команды нет времени двигать карточки по столам всем вместе, то попробуйте сделать это с коллегами онлайн, заполняя таблицу. Вот пример работы неких умельцев для сайта Новозеландской компании, которая занимается инвестициями (цифры выдуманы), сделано в “Google Docs”:

Пример сортировки сайта посредством таблицы.

Если вы занимаетесь в данный момент редизайном, то найдите время поинтересоваться у веб-мастера сайта о посещаемости: какие страницы наиболее посещаемы, а которые наименее? Это классная возможность оценить качество наполнения страниц сайта и подачу их посетителю. После урежьте и объедините похожие страницы, отделите от них сложные и упростите.

Даже после обычного дизайна сайта, упражнение по карточной сортировке может значительно увеличить юзабилити (usability) и эффективность сайта. Этот ход можно практиковать, чтобы сайт постоянно оставался полезным посетителям. Я предлагаю читателю ознакомиться с другими способами выполнения карточной сортировки сайта и приглашаю ознакомиться с Boxes and Arrows’ card sorting guide, Usability.gov’s card sorting article или вообще целую книгу по карточной сортировке почитать.

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

Распределяйте информацию на странице

Следующий шаг: нам нужно понять визуальную иерархию информации на странице. Обратимся к распределению внимания — я называю это “карта внимания” — и к простейшей арифметике.

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

Пример назначения очков:

• Пятнадцать очков на четыре цели.

Пример результата:

• Описание услуг: 7 очков
• Выгода от использования: 4 очка
• Статьи о рынке в общем: 2 очка
• Новости по теме: 2 очка

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

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

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

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

Развивайте индивидуальность

Сильный архетип может создать сильнейшую моментальную эмоциональную привязку. Архетип[4] это набор характеристик и особых черт, общий для определенной группы людей, говорящих на любых языках и любой национальности, живущих на Земле. Каждый архетип обладает сильными и слабыми чертами, своими страхами и способностями. При применении этих аспектов индивидуальности в дизайне, люди будут чувственно идентефицировать себя с ним (с дизайном). Это создает запоминающийся образ и укрепляет доверие.

В книге The Hero and the Outlaw, авторы Margaret Mark и Carol S. Pearson захватывают 12 архетипов, отражающие почти любое проявление человеческой природы:

Архетипы:

• Святой
• Исследователь
• Мудрец
• Герой
• Изгой или вне закона
• Фокусник
• Обычный парень / обычная девчонка
• Любовник
• Шутник
• Сиделка
• Создатель
• Правитель

Если выберете изгоя (сразу вспоминаем Harley Davidson), то начинайте критиковать все, что было бы противно человеку с истинно неукрощенными нравами и принципами. Возможно, вас удивит количество новых идей, который можно получить размышляя на тему:

Идеи неукрощенного человека вне закона:

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

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

Бонус: Люди часто путают индивидуальные черты своей компании со своими собственными. Определите архетип главного начальника фирмы и других ключевых фигур, чтобы отделить их от личностных особенностей компании.

Определите нужное и заканчивайте

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

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

Пример скользящих весов для определения противоположных особенностей дизайна.

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

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

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

Создавайте уверенно

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

Автор: Daniel Ritzenthaler, оригинал статьи здесь.
Перевод: Рехимкулов Ринат, greystone@yandex.ru

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

P.P.S. Для любителей ночной жизни: Все клубы Москвы, афиши и новости.
Сайт про системы видеонаблюдения
Ответы на жизненные вопросы – 7ls.ru
Строительство частного дома – про колодец.

© Дизайн Мания, 2009. | 1 комментарий | Категория Статьи.

Интересные статьи по теме

• Тренды веб-дизайна в 2009 году. Часть1 (13)
• Тренды веб-дизайна 2009. Часть3 (7)
• Типографика для веб (8)
• Процесс разработки профессиональных логотипов (11)
• В защиту “Eye Candy” (3)

(”eye candy” переводится одним из словарей “ABBYY Lingvo” как «нечто симпатичное, привлекательное, приятное глазу (человек, вещь и т.д.)»; еще «Eye Candy» это название плагина к Adobe Photoshop с набором готовых эффектов. Прим. переводчика)

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

Взгляните, в какие «одежды» «одевают» дизайнеры сегодня обычную готовую структурированную информацию; или как термин «eye candy» снижает значительность как такового графического дизайна. Язык, на современном этапе, сужает понятие «дизайн» до простого «оформления», а так же разделяет «эстетику» и «удобность» (usability), как будто это две абсолютно разных области. Если мы переключимся от отдельных графических элементов, и будем уделять внимание общей эстетике – «науке о том, как мы познаем чувствами» – мы узнаем, что этой самой разницы между тем, как что-то работает и как оно выглядит, на самом деле не существует, она надумана.

Почему эстетика?

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

Более того, «эстетика исследует нашу эмоциональную зону по отношению к объекту или действию» (Wikipedia). Другими словами, эстетика это не только оформительские особенности кнопочек на интернет-сайтах и других визуальных эффектов, но еще и конкретная реакция посетителя на эти кнопочки. Итак, давайте сформулируем проблему: как выбранные дизайнерские решения влияют на понимание и чувства пользователя, и как последние влияют в конечном итоге на поведение?

Эстетика и восприятие.

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

На обеих кнопках написано «Поиск» на английском.

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

Аналогично следующее: грамотно спроектированные формы подтверждения пользователем действия (на сайте или в интерфейсе программы) имеют элемент, который пользователь должен отметить (check mark) и, скорее всего, там присутствуют оттенки зеленого: зеленый – хорошо; красный – плохо; жёлтый – стоит подумать. Дизайнер в своей работе должен учитывать то, как наш мозг понимает цвета, тени, оттенки, штриховки. Такие вещи пользователь обычно не замечает, пока какой-нибудь дизайнер не сделает глупости, как здесь:

«Вопрос успешно добавлен» гласит английская надпись в табличке.

В этом примере графическое оформление конфликтует со смыслом.

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

Все же, эстетика это не только функциональность, а оформление это не только визуальное удовольствие.

Эстетика и воздействие.

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

На обеих кнопках написано «Поиск» на английском.

С точки зрения восприятия – это кнопки. Обе – точно кнопки. Однако, если мы обратимся к изучению внимания, убеждения, выбора, счастья, познания и т.п., то выводы будут следующими: в среднем, более привлекательная кнопка более часто нажимаема большим количеством людей. В поддержку этой идеи могу привести комментарий к проблеме чувств нейробиолога António Damásio:

« … чувство это не роскошь: это выражение базовых механизмов регуляции жизнедеятельности, которое выработались с течением времени, и которое жизненно необходимо человеку. Оно играет ключевую роль во всех проявлениях познания, рассуждения и творчества. Что интересно – возможно, чувство принимает участие  в построении сознания … »

Бытует мнение, что некоторыми программами приятно пользоваться, потому что мы разработали их легкими и эффективными. Если мы подумаем на тему воздействия чувств на действия, правильнее будет сказать «вещи, которые приятны, будет легче и эффективнее использовать». Давайте объясню.

Это напоминает мне о …

Индивидуальность продукта влияет на наше восприятие. Вспомните поговорку «встречают по одежке». Это как раз то, над чем работает автомобилестроение уже много лет, вкладывая огромные деньги в создание продуктов, которые будут обладать четкими индивидуальными чертами, с которыми сравнивает себя человек. Почему автомобиль Dodge Ram кажется таким крепким? Что делает образ Mini Cooper таким забавным и веселым? Пока эти образные утверждения создатели будут подкреплять фактическими характеристиками машины – мы будем видеть реальное воплощение определенных качеств в этих  автомобилях.

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

У наших работ есть индивидуальные черты. Имейте ввиду:

- человек ассоциируют себя (или избегают этого) с конкретными чертами;

- доверие связано с индивидуальностью;

- восприятие и ожидания связаны с индивидуальностью;

- мы относимся к достаточно развитым технологиям как к людям;

- и так далее.

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

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

Если бы это была модель взрослого дворецкого, который не понимает половины того, что вы от него хотите и частенько делает не то, о чем просили, на него смотрели бы как на поломанного. Но у нас щенок, и он милый! Щенки не должны делать все, о чем их просят. Когда робот-щенок делает именно то, что ему скомандовали, мы чувствуем удовлетворение. «Смотри, он перевернулся!». Разве не отличный трюк для выхода на рынок?

Подумайте: какими чертами Вы наделите вашу разработку, и какие ожидания пользователя будет она собой воплощать?

Доверишься мне в этом?

Согласно исследованию, проведенному в 2002 году, «общий призыв сайта, который формируется из типографики, размер текста, композиции, цветов» это основной критерий оценки нашего доверия этому сайту.

В этом есть смысл. Вспомните, как Ваш собственный внешний вид (Ваша собственная эстетика) отражается на восприятии Вас окружающими; или как упаковка продукта влияет на наше восприятие содержание этой упаковки.

Сравните две эти колонки. Слева – бензоколонка у моего дома.

Я перестал на ней заправляться и езжу к другой. Почему? Обслуживание левой (или отсутствие такового) заставляет меня усомниться в доверии этой заправочной станции информации моей банковской карты. Вкратце: внешний вид воздействует на доверие.

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

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

Если сложить все это вместе, то …

Зачем вообще задумываться о восприятии? Взгляните на эту выдержку из исследования, представленного на CHI 2007:

« … пользователи по-разному оценивают идентичные результаты разных поисковых машин и такие оценки основаны на бренде … Участники исследования утверждали, что результаты поиска Google и Yahoo! превосходили по релевантности идентичные результаты Windows Live и аналогичных поисковых машин … »

Что делает бренд, разве что воздействует на восприятие? В вышеприведенном исследовании одинаковые результаты воспринимались по-разному из-за атрибутики бренда: доверие этому бренду, его индивидуальность и наше восприятие его. И что в этом всем толку?

Запомните этот вопрос.

Привлекательное привлекает.

Ну, хорошо, согласимся уже, что восприятие действительно важно в дизайне конечного продукта. Но как же на счет «фактического» юзабилити: возможности быстрее выполнять задачи с помощью данной программы или просто с меньшими трудностями? Действительно ли привлекательный дизайн помогает решать подобные задачи? Такое предположение было подтверждено в исследовании, проведенного сначала в 1995, а затем в 1997 годах. Donald Norman описывает исследование подробно в соей книге «Эмоциональный дизайн».

Еще пример: исследователи из Японии установили два банкомата, «идентичных в функциональности, наборе кнопок и принципе работы». Разница была лишь в более привлекательной организации кнопок и положении экрана. И в Японии и в Израиле (где этот эксперимент позже повторили) исследователи наблюдали следующее: люди встречали меньше трудностей при работе с более привлекательным банкоматом. Он вообще работал лучше.

Нам осталось ответить на вопрос: почему более привлекательно организованный банкомат работал лучше по сравнению с практически идентичным?

Norman объясняет биологией эволюции и своими знаниями о принципах работы нашего мозга. Суть в том, что когда мы расслаблены, наш мозг более податливый и ему легче найти обходной путь для актуальной проблемы. В другой ситуации, когда мы напряжены или раздражены, в мозгу все размывается и мы видим только проблему. Сколько раз, в порыве раздражительности, вы пытались сделать одно и тоже и ждали положительного результата уже 17-й раз подряд?

Вот другое объяснение: то, что нам  нравится – должно работать. Справляться с проблемами, в которых есть что-то приятное, нам удается легче.

Связываем все вместе.

Последние исследования в сфере чувств находят свое отражение в тезисе: мы не можем разделить познание и чувства.

Другими словами: то, как мы думаем неразделимо с тем, как мы чувствуем.

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

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

Итак, важен ли «милый дизайн»?

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

В начале 1900-х,  «форма зависит от функций» было мантрой современной архитектуры. Frank Lloyd Wright изменил эту формулировку на «форма и функции должны быть единым, связанным как духовное целое» и демонстрировал свою идею на примерах природы.

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

Автор:  Stephen P. Anderson. Оригинал статьи – здесь.
Перевод:  Рехимкулов Ринат ( greystone@yandex.ru)

Мне 21 и я заканчиваю филологический факультет. Графикой заинтересовался в 14 лет, когда мало у кого в Муранске были компьютеры, а у меня был Mac с фотошопом версии 4.0. Ничего грандиозного пока не создал, поэтому решил соединить любимое и профессиональное: занялся переводами статей для россиян.

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

P.P.S. Постовой. Продать квартиру сегодня крайне сложно, но реально. Главное – грамотно использовать возможности сайтов о недвижимости.

Ищешь доменное имя? Регистрация доменов ru от 95 рублей.

Для любителей покера – пароли к приватным фрироллам.

© Дизайн Мания, 2009. | Комментариев - 3 | Категория Статьи.

Интересные статьи по теме

• Тренды веб-дизайна в 2009 году. Часть1 (13)
• Тренды веб-дизайна 2009. Часть3 (7)
• Типографика для веб (8)
• Курсы по графическому дизайну (бесплатная книга и рассылка) (6)
• Избавляемся от догадок в дизайне (1)

С вами опять тренды веб-дизайна:) Публикация всех статей слегка затянулось, как-то не было желания заниматься переводом англоязычных статей в последнее время, а в smashingmagazine как что-то напишут, так и задумаешься на минут 10 что бы это могло означать. Поэтому сегодня я постараюсь как можно более кратко рассказать обо всех оставшихся тенденциях веб дизайна в 2009году. Рассмотрим сегодня последних 15 экземпляров:

16. «Социальные» элементы дизайна

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

17. «Говорящая» навигация

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

Иногда в такой навигации можно встретить большие иконки, блоки имеют одинаковую высоту и ширину, а также используются специальные эффекты при наведении:

18. Динамические табы

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

Остальные тренды в статье рассмотрены весьма кратко.

19. Большие блоки для поиска

20. Визуальные категории (скорее всего, имеются ввиду иконки для разных категорий)

21. Картинки для авторов (аватарки, судя по всему)

22. Иконки и визуальные подсказки

23. Облако тегов

24. Иллюстрации в постах блогов

25. Акварель

26. Рукописные тексты

Кстати у меня в блоге есть 2 хорошие подборки:

• Красивые рукописные шрифты
• Рукописные русские шрифты

27. Ретро и винтажный стиль

Смотрите также винтажные кисти для Photoshop.

28. Органические текстуры, фотографические фоны

29. Значки

30. Ценники

31. Ленты

Вот такие вот модные дизайнерские приемы в этом году. Надеюсь, вам понравилась подборка. Остальные три статьи можно найти, скорее всего, чуть ниже в блоке «похожие по тематике посты».

P.S. Вы уже видели необычные техно татуировки?

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

Недвижимость за рубежом – хороший способо потратить деньги в период кризиса.

© Дизайн Мания, 2009. | Комментариев - 8 | Категория Статьи.

Интересные статьи по теме

• Тренды веб-дизайна в 2009 году. Часть1 (13)
• Тренды веб-дизайна 2009. Часть3 (7)
• Тренды веб-дизайна 2009. Часть2 (6)
• Якоб Нильсен – известный специалист по юзабилити (0)
• Фестиваль рекламы «Идея!» в Новосибирске (4)