-
В следующих нескольких уроках я бы хотел познакомить вас с графическим дизайном
-
и набором приемов, которые помогут вам более эффективно взаимодействовать визуально
-
Посмотрите на этот пример:
-
Это сплошной неразделенный текст.
-
Что мы могли бы сделать с ним с точки зрения типографики, чтобы улучшить и как понять, что мы сделали это хорошо?
-
Единственная вещь, которую мы можем сделать - добавить несколько пробелов (пустых строк) в дизайн
-
и, как пишет Роберт Брингхерст:
-
“Некоторое пространство должно быть узким, другое пространство может быть широким,
-
некоторое пространство должно быть пустым, а остальное должно быть заполнено”.
-
Давайте очистим одно пространство и заполним другое.
-
И, как мы видим, после добавления нескольких пустых строк мы смогли применить графический дизайн так,
-
что заметные куски (похожие по смыслу) объединены вместе, а остальные отделены от них.
-
Готов поспорить, что мы могли бы сделать больше.
-
Чтобы мы могли бы еще тут сделать?
-
Давайте рассмотрим использование типографских приемов и контраст размера, которые наполняют смыслом и выстраивают иерархию (взаимосвязь).
-
и как описывает это Эдвард Тафти: Информация состоит в различиях, которые порождают смысл
-
Здесь мы добавили немного масштаба и веса
-
- вы знаете, это может быть и не самым лучшим приглашением на Земле с точки зрения дизайна, но это позволяет вам понять
-
что вы можете получить, применив некоторые типографские приемы к вашему дизайну.
-
Конечно, вы не хотите позволять себе лишнего, но мне очень нравится этот пример.
-
Я взял его из книги Дженнифер Тидвелл “Разработка пользовательских интерфейсов”,
-
которую я настоятельно рекомендую и продолжу приводить примеры из этой книги в этом видео.
-
У меня есть две копии, но я рекомендовал эту книгу так часто,
-
что оба экземпляра сейчас на руках и вам придется поискать ее.
-
Часто хороший графический дизайн - это как хорошая игра актеров или как хорошие очки -
-
остается незамеченным, потому что контент читается легко и беспрепятственно.
-
Конечно, иногда мы замечаем хороший дизайн или хорошую игру актеров,
-
которые нам понравились или потому что сумели передать хорошую идею.
-
Но мы замечаем это по другой причине, нежели плохой дизайн или плохую игру актеров.
-
Мы замечаем плохой дизайн когда сталкиваемся с ним.
-
Например, когда очки грязные, поцарапанные или выписанные по неправильному рецепту.
-
Мы вынуждены щуриться, чтобы понять, что за вещь перед нами, и это не всегда осознанно -
-
иногда это совсем небольшая помеха, это было бы заметно подсознательно, но мы все равно щуримся,
-
и дизайн - это попытка предоставить легкий доступ к информации, которая важна для нас.
-
Для того, чтобы сделать это, я думаю, есть три главные цели графического дизайна:
-
Первая цель - передать людям структуру, относительную важность и связи (взаимоотношения)
-
Вторая цель заключается в установлении темпа взаимодействия, чтобы привлечь людей,
-
помочь сориентироваться и помочь заглянуть глубже.
-
И третье - использовать графический дизайн, чтобы передать информационное сообщение -
-
придать смысл, стиль и вдохнуть жизнь в контент.
-
Чтобы подумать об этом, я хотел бы показать четыре главные страницы различных сайтов.
-
Это The New York Times.
-
Google.
-
Craigslist.
-
и The Webby Awards.
-
И я думаю, что в этих четырех случаях каждый из них действительно эффективно использует инструменты графического дизайна,
-
некоторые немного более очевидно, чем остальные.
-
Давайте посмотрим их снова. В этот раз я придам страницам размытость,
-
чтобы подчеркнуть иерархию и убрать акцент с текста.
-
Вот размытая страница The New York Times и мы видим,
-
что общая иерархия страницы все еще довольно ясна.
-
Вы видите заголовок,
-
интересное изображение, чтобы привлечь нас, множество статей,
-
навигацию слева и строку навигации наверху.
-
Это размытая страница Google и размытие говорит нам что-то об отличительных чертах:
-
даже с небольшой размытостью выделенная строка поиска и панель навигации
-
исчезают в фоне, как и все остальные панели навигации.
-
Это нормально, потому что большинство людей видят экран, то, возможно, они понимают, что они должны делать.
-
В определенном смысле, самая важная роль выделения верхнего навигационного бара -
-
это ключевая возможность нажать на другие пункты меню, чтобы добраться до других разделов.
-
Логотип Google, с одной стороны, даже изрядно размытый, все еще прекрасно читается.
-
Известный минимализм этой страницы заставляет сложный web казаться легко управляемым.
-
И в дополнение к этому, основные цвета помогают подчеркнуть легкость всей страницы.
-
В качестве небольшого отступления: вот настоящий Google из тех времен,
-
когда Ларри Пейдж и Сергей Брин получали кандидатскую степень в Стэнфорде.
-
Они построили их первый жесткий диск используя блоки Лего,
-
и я вполне уверен, что именно отсюда были взяты фирменные цвета Google
-
или они были вдохновлены блоками Лего.
-
Это главная страница Craigslist.
-
Многие люди подумают, что я, наверное, сумашедший, когда думаю, что это неплохой образец графического дизайна.
-
Ко всему прочему, это страница выглядит так, как будто была сделана примерно в 1996 году,
-
и, в действительности, так оно, возможно, и есть, за исключением небольших улучшений в контентной части.
-
Другая причина, по которой люди критикуют Craigslist - это то,
-
что на странице много аббревиатур, а также других вещей,
-
что создает впечатление безвкусицы, тяжеловесности или можно подумать, что страница создана для экспертов.
-
Но множество пользователей этого сервиса возвращаются вновь,
-
и что вы видите на размытой версии, так это то, что страница очень хорошо передает информационную иерархию.
-
И снова мы хорошо видим логотип в верхней части страницы,
-
календарь.
-
Мы видим как административная часть вещей отделена и также помещена в левую часть страницы.
-
В центре мы видим контент, разделенный по категориям,
-
а справа - другой тип навигации.
-
На четкой версии страницы мы видим, что все на своих местах.
-
Это The Webby Awards.
-
Как и на всех четырех страницах, вы видите, что цвет используется редко, но очень эффективно.
-
Большая часть страницы - черно-белая.
-
Основную часть цвета мы видим слева внизу,
-
там где расположен блок с красным текстом, который говорит вам посмотреть самые свежие материалы на сайте.
-
Слева наверху мы видим немного цвета для иконок социальных сетей, которые ведут на соответствующие сайты.
-
И снова, мы видим явный навигационный блок слева,
-
заголовок слева наверху, заголовок страницы в центре и контент под ним и,
-
наконец, главный навигационный блок вверху почти по всей ширине страницы.
-
Когда вы думаете об этом, все четыре страницы,
-
которые расположены на одних из самых посещаемых сайтах в Сети, используют простые визуальные приемы,
-
чтобы передать организацию и иерархию информации и задержать ваш взгляд на странице.
-
Они используют оформление, компоновку, цвет.
-
И это в буквальном смысле простые приемы.
-
Меня постоянно удивляет, какие возможности доступны с их помощью.
-
Их сочетание обеспечивает направление, темп и посыл сообщения, о которых мы говорили вначале.
-
А это, в свою очередь, помогает людям читать, ориентироваться и разбираться в море информации.
-
Есть настольная игра, которая рекламируется с помощью слогана:
-
“Минута, чтобы узнать, целая жизнь, чтобы освоить”.
-
И эта фраза великолепно подходит к графическому дизайну.
-
Вы можете начать использовать эти принципы прямо сейчас и надеюсь, эти видеоуроки помогут вам начать.
