Добро пожаловать в пятый эпизод. Сегодняшний подкаст от Джейсона Беирда, дизайнера пользовательского опыта в Mailchimp, и автора книги Sitepoint «Принципы красивого веб-дизайна» .
В этом эпизоде Джейсон рассказывает об основных принципах дизайна.
DesignFestival Podcast Episode # 5 — Видео — Универсальное обращение от SitePoint на Vimeo .
Скачать этот эпизод
Вы можете скачать этот эпизод в виде отдельного файла MP4:
- Подкаст DesignFestival # 5: Универсальный призыв (MP4, 43:10, 137 МБ)
Вы можете подписаться на подкаст Design Festival напрямую или через iTunes — добавьте подкаст Design Festival в iTunes .
Резюме Эпизода
- Основополагающие правила: основные принципы проектирования
- Планировка: структура, сетка, правила, элементы сбора
- Цвет: однотонный, аналогичный, бесплатный,
- Текстура
- Типография:
- образность
- «Писать на принципах» — нарушать правила
- «Дизайнерское мышление»
Аудио стенограмма
Здравствуйте, меня зовут Джейсон Беирд . И сегодня я собираюсь поговорить с вами о мимолетном мифе о всеобщей привлекательности . Итак, этот подкаст, который я записал для DesignFestival.com , основан на докладе, который я дал в прошлом месяце в Атланте на конференции под названием LessConf .
Для тех из вас, кто не знает, кто я, я дизайнер пользовательского опыта в компании под названием MailChimp . Это делает электронный маркетинг. Это поставщик услуг электронной почты. И я также написал книгу под названием «Принципы красивого веб-дизайна», в которой, если вы выходите из DesignFestival, вы, возможно, видели рекламу SitePoint . Оригинал этой книги вышел в 2007 году. Второе издание вышло только в ноябре. Итак, все обновлено на 2011 год.
И причина, по которой я начинаю с этого, заключается в том, что большинство выступлений, которые я даю, сосредоточены вокруг содержания этой книги. И на этот раз с мимолетным мифом о всеобщей привлекательности я немного отошел от этого. Мне было интересно услышать, потому что я всегда говорил о тех базовых принципах дизайна, которые действительно очень важны.
Но это — некоторый совет, который я думаю, что все новые дизайнеры должны услышать в конечном счете, и даже великие дизайнеры должны напоминать время от времени.
Итак, теперь, когда вы знаете, что я делаю и что я сделал, позвольте мне рассказать вам, что я хочу сделать. Моя цель номер один в жизни, к которой я стремлюсь, — создавать вещи, которые большинство людей считают нормальными. Конечно, нет! Я хочу создавать вещи, которые, по крайней мере, некоторые люди (больше, чем просто моя жена или моя мама) думают офигенно. Я хочу, чтобы люди любили и твитнули о том, что я делаю. Так что это одна из самых захватывающих вещей в работе с MailChimp.
Есть так много людей, которые так любят этот бренд, что они не только носят наши шляпы и глупые рубашки, но и делают несколько снимков себя в них и пишут в Твиттере об этом. Наш тупой стиль на сайте и чувство юмора не всем нравятся. И мы называем этих людей вечеринками. Но люди, которые любят MailChimp, действительно любят MailChimp.
Итак, до того, как я начал работать в MailChimp, я работал в нескольких веб-агентствах малого и среднего бизнеса, занимаясь дизайном и созданием внешнего интерфейса. Я работал на многих сайтах, таких как этот, Банк Южной Каролины и Траст . Это сайт, над которым я работал в компании, в которой работал до MailChimp. И если вы выполняете проектные работы для банка, страховой компании, адвоката или компании, предоставляющей студенческие займы, это должно выглядеть хорошо. Это не должно быть весело или увлекательно, но это должно выглядеть профессионально и корпоративно, иначе люди не будут доверять ему, особенно если веб-сайт является первой точкой контакта для клиентов. В противном случае люди могут подумать, что это какая-то фишинговая попытка таких сомнительных парней, как эта. Мне нравится сайт. Я собираюсь оставить это здесь на мгновение.
Я не знаю, дизайнер вы или разработчик, или менеджер проекта, или профессионал в области пользовательского опыта. Неважно, какова ваша должность, вы, вероятно, хотите создавать вещи, которые люди любят. Я знаю, что. И я уверен, что все вы также должны время от времени начинать защищаться, доказывая, что ваш продукт или услуга заслуживают доверия. Таким образом, дизайн очень помогает в этом. Это лицо. Это впечатление от вашего продукта или услуги. Если мы хотим, чтобы люди любили то, что мы делаем, первое впечатление должно быть отличным.
Поэтому в этой заметке я упомянул LessConf . Прежде чем выступить в этом году, я присутствовал на прошлогодней конференции, конференции 2010 года. И Кэмерон Молл была одним из выступавших там. Он дизайнер, которым я давно восхищался, но никогда не слышал, как он говорит.
Выступление Кэмерон Молл на LessConf 2010 было о хорошем и отличном дизайне. Итак, ключевыми моментами его выступления было то, что великолепный дизайн вызывает сильный эмоциональный отклик. Вы можете любить это или можете ненавидеть это, но отличный дизайн не может быть проигнорирован. Это одна из отличительных черт этого.
Еще одно замечание о великолепном дизайне заключается в том, что он оправдывает его создание. Каждое решение, принятое в великолепном дизайне, принимается по причине, и все сделано намеренно.
Наконец, отличный дизайн вдохновляет других дизайнеров. Я думаю, что это один из ключей к популярности таких сайтов, как Dribbble. Мы хотим показать нашу работу другим дизайнерам. Мы хотим показать нашу работу нашим коллегам. Они наши самые жесткие критики. И если вы можете вдохновить их, кроме получения обратной связи от них, мы сделали все лучше.
Итак, как нам это сделать? Как нам добиться действительно великолепного дизайна и как мы можем использовать дизайн, который выделяется среди наших конкурентов и заставляет наших клиентов любить нас?
Ну, многие люди, если вы спросите дизайнеров, скажут: «Вам нужно мыслить нестандартно». Да, верно? Вы слышите это все время. И это такое злоупотребление клише. Я ненавижу термин «мыслить нестандартно». Но все знают, что это означает творческий подход к решению проблем. Но с дизайном проблема в том, что большинство людей не знают, что такое стандартный подход. Итак, прежде чем мы сможем понять, что значит думать «нестандартно» относительно дизайна, мы должны знать, что это за коробка.
И это действительно то, о чем моя книга. Принципы красивого веб-дизайна разбивают тему на пять глав — макет, цвет, текстура, тип и образы. Итак, почему я хотел бы научить вас думать внутри коробки в книге о дизайне? Ну, это потому, что принципы дизайна, они имеют универсальную привлекательность. Они широко приняты. И они являются отличной основой для дизайна.
Итак, вот быстрая, быстрая версия основных принципов проектирования, просто чтобы дать вам представление о том, что значит думать внутри коробки.
Во-первых, когда речь идет о макете, мы хотим попытаться достичь баланса. И есть два разных способа сделать это. Мы можем идти с чувством симметричного баланса и асимметричного баланса. Симметричный довольно очевиден. Можете ли вы разделить его на середину и иметь в композиции обе стороны одинакового веса?
Асимметричный немного сложно понять. На этом плакате справа от нас изображен огромный фламинго. И затем, у нас есть этот всплывающий пузырь, и есть другие маленькие текстовые пузыри и эти крошечные фламинго внизу. Но этот плакат — отличный пример асимметричного баланса. Чтобы понять, что это на самом деле означает, все, что вам на самом деле нужно сделать, это поставить палец под нижнюю часть этого плаката прямо в центре и сказать мне, думаете ли вы, что он упадет с вашего пальца влево или право. Если это произойдет, если вы проведете этот небольшой тест на своем веб-сайте и почувствуете, что он упадет с одной стороны экрана, чем с другой, то это не совсем сбалансировано. Это странная тема для разговора, вещи, имеющие вес и все такое, но это важно для веб-сайтов. Много раз, когда дизайн не выглядит хорошо, это потому, что он не сбалансирован.
Еще одним ключевым предметом макета является концепция единства, которая также может быть достигнута двумя способами. Мы можем достичь единства через близость. Вещи, которые находятся близко друг к другу, ощущаются как единое целое. То же самое относится к вещам, которые расположены близко друг к другу, или имеют одинаковый цвет, или повторяются каким-то образом.
Это, я знаю, просто маленькие пятна краски, но единство очень важно, особенно для вещей, которые мы хотим, чтобы люди видели как единое целое. Элементы списка, вот почему мы используем пули. Навигационные структуры — вот почему мы придаем такой же внешний вид. Мы хотим, чтобы все части одной и той же навигации были одинакового размера, имели одинаковый фон, чтобы люди видели их как одну сущность. Итак, это концепция единства.
Самым важным в макете является концепция акцента. И есть много разных способов сделать акцент — через размещение элемента на странице, через контраст (различия между элементами), изоляцию (взятие чего-либо и отталкивание от других элементов на странице), продолжение (это когда мы видим линию, наши глаза склонны следовать этой линии к следующей точке) и концепции пропорции (игра различий в размере, другая проблема контраста).
Итак, принимая во внимание эти вещи, где на этой картинке, которую вы видите здесь, к какому стулу ведет ваш глаз? Я не должен был говорить стул. Куда ваш глаз сразу прыгает на этой картинке? Для меня и, вероятно, для остальных из вас мой взгляд немедленно переходит на этот правый нижний стул. И причина этого в том, что наш мозг действительно хорош в выявлении крошечных различий между визуальными элементами. Мы сразу обнаруживаем аномалии. Я называю это «глюками в матрице».
Если вы разрабатываете сайт, вы контролируете эти глюки и, следовательно, у вас есть контроль над разумом. Вы можете фактически направить взгляд пользователя на страницу. И это наша основная роль как дизайнеров. Мы хотим рассказать историю. Мы хотим показать людям, где искать первым, а где искать вторым. Таким образом, мы контролируем повествование.
Также у нас есть бизнес-цели. Нам нужно, чтобы люди нажимали на наш призыв к действию, иначе мы не получим одобрения от нашего босса. Таким образом, акцент, как я уже сказал, является, вероятно, наиболее важной концепцией макета.
Итак, еще один из тех примеров, которые я показал, имеет отношение к сайтам или приложениям. Итак, как это относится к веб-дизайну? Что ж, принципы дизайна, такие как близость, непрерывность и единство, говорят о взаимоотношениях визуальных объектов. Вот почему так важно получить весь контент и компоненты и выполнить предварительную работу IA. Теперь, когда у вас есть все эти карты на столе, пришло время установить некоторую структуру.
Таким образом, это помогает использовать правило третей, или типографский, или простой шаблон на основе столбцов (например, здесь), чтобы помочь с этим. И за последние пять лет, с тех пор как я начал писать первое издание, сетевое проектирование в сети действительно стало нормой. Вы можете поблагодарить таких людей, как Хой Винь, Марк Фултон и Ричард Раттер, за помощь в этом переходе.
Существует множество советов и приемов при проектировании в сетке, например, знание того, что деление контента на треть (то есть отношения одна треть, две трети) имеет универсальную привлекательность, поэтому большинство систем сеток на основе столбцов делятся на три.
Здесь вы видите простую сетку из 12 столбцов, основанную на сайте 960.gs Натана Смита . Сетки действительно были необходимы для печати дизайна в течение многих лет. Такие книги, как « Сетевые системы в графическом дизайне» Джозефа Мюллера-Брокмана и «Создание и разрушение сетки» Тимоти Самары, были популярны в течение долгого времени. Но только в прошлом году Хой Винь опубликовал действительно замечательную книгу под названием « Упорядочение при беспорядке», которая является первой из известных мне книг, посвященных использованию сеток в Интернете.
Таким образом, большинство разработчиков доводят дизайн до этого момента, до конца первой главы. Разработчики любят структуры, структуры, правила, формулы и принципы — и я тоже. Так работает мой мозг.
Но затем мы подошли к понятию цвета. И многие люди действительно запуганы концепцией выбора цветов. Но есть много формул и проверенных методов для выбора великолепных цветовых комбинаций; большая часть этого начинается со старого доброго обычного цветового круга, о котором мы все узнали в начальной школе.
Вы можете видеть здесь, что есть три основных типа цветовых схем. Первый — это однотонная цветовая схема . Вот где вы берете один цвет в любом месте цветового круга и комбинируете его с оттенками или оттенками этого цвета для создания цветовой схемы.
Следующим типом цветовой схемы является аналогичная цветовая схема . И вот где мы берем одну треть среза цветового круга, как будто это был пирог. Вы можете взять до трети этого пирога. Вы используете этот фрагмент, чтобы выбрать цвета для дизайна вашего сайта.
Теперь третий тип цветовой схемы является дополнительным . Их обычно сложнее всего укротить, потому что дополнительные цвета противоположны друг другу на цветовом круге. И поэтому они в основном самые разные цвета, которые мы выбираем друг от друга. С ним немного сложно работать. Но тогда, это обеспечивает действительно хорошие результаты. И есть много разных вариаций дополнительных цветовых схем. Разделяются комплементарные , триадные и тетриадические цветные схемы.
Но придерживаться этих цветовых схем — отличный способ оставаться внутри коробки и придумать некоторые цвета, которые на самом деле работают вместе для веб-сайтов, а не выбирают их случайным образом, что делают многие люди, не являющиеся дизайнерами, и это точка сбоя ,
Следующая глава — это текстура. И для меня текстура — очень важная часть в дизайне для веба, потому что HTML по умолчанию плоский. Это линейно. Он основан на куче прямоугольников. И наш мир не так. Это 3D. Это нелинейно. Он содержит все виды интересных форм и линий и текстур.
Таким образом, вы можете использовать текстуру, чтобы создать глубину, предложить движение и вызвать чувства в вашем дизайне. Это часто упускают из виду, но это очень важно.
Как важно? Ну, когда вы сидите в туалете, вы бы предпочли рулон туалетной бумаги или наждачной бумаги, висящий на стене? Разница с вашими нижними регионами заключается в том эффекте, который оказывает текстура.
Так недавно мой друг, Морган, ведущий блог о декорировании, попросил совета по редизайну. Она знает, как разрабатывать, и она собиралась сделать редизайн сайта сама, но она не знала, куда она хочет идти в направлении. Она не знала, чего она хотела. У нее было несколько примеров некоторых сайтов, которые ей нравились, и поэтому она прислала мне электронное письмо и объяснила: «Это сайты, которые меня действительно вдохновляют, и я хочу включить некоторые аспекты этого в мой редизайн».
Итак, это первый блог под названием Young House Love (кстати, моя жена тоже любит этот блог). Это блог пары «сделай сам». Это базовый дизайн блога, своего рода красивый шаблон. Следующий сайт, который она прислала мне, был этот, Decor8Blog.com . Ладно, немного девчачьи, вроде записок. А третьим был DesignSpongeOnline.com, еще один отличный блог о дизайне.
И когда я просматривал все три из них (я еще раз здесь для вас), Young House Love, Blog Decorate и Design Sponge Online, когда я смотрю на все три из них, все они имеют свою большую особенность картинки. У них тонны текстуры, и у них есть элементы, которые выглядят так, как будто они были наклеены на страницу. Это очень хитрый, сделай сам, альбом для вырезок. Вместо того, чтобы использовать эти сайты индивидуально в качестве вдохновения, я посоветовал ей пойти в ремесленный магазин. Возьмите несколько записок и начните с этого.
Это своего рода основа, вдохновение, очевидно, для текстуры всех этих трех сайтов. И если вы начнете с этого, если вы начнете с вдохновения за сайтами, которые вам нравятся, вы обязательно найдете что-то, что хотя бы немного уникально.
Переходя от текстуры, следующая глава книги — типография (глава 4). Типография, как и концепция верстки, это еще один глубокий предмет, в который вы действительно можете погрузиться. И если дизайн — это лицо, как я уже говорил, то типография — это голос вашего бренда. Итак, есть чему поучиться. Нужно сделать много ошибок, и есть большой потенциал, используя типографику для вашего дизайна.
Итак, главное, что нужно знать, это то, что есть все разные семейства шрифтов, например, с засечками, без засечек, с фиксированной шириной, рукописными шрифтами и шрифтами новизны. Вам также необходимо знать, что вы хотите ограничить количество шрифтов, используемых на ваших сайтах. Вы не хотите использовать более двух или трех семейств шрифтов в дизайне. Вы хотите по возможности избегать китчевых новизных шрифтов. Но это так глубоко, как я хочу, чтобы войти в типографику
Продолжая, последняя глава книги о образах. И, по сути, вам нужно знать, что вы хотите выбрать изображения, которые действительно поддерживают ваш контент, и вы хотите получить их из законных источников. Если вы можете делать свои собственные фотографии или создавать свои собственные иллюстрации, отлично. Если нет, вы можете найти много ресурсов в стоковой фотографии. Обычно вы можете найти иллюстрации и тому подобное для использования в своем дизайне. Ключ должен найти изображения и иллюстрации, которые действительно поддерживают ваш контент. Вы не просто добавляете их для чутья.
И если вы будете следовать принципам дизайна, теории цвета, сделать правильный выбор типографии до этого момента, вы действительно можете ожидать, что придумаете что-то, что, по крайней мере, так хорошо. Это просто тема WordPress. Это может быть любая тема WordPress. Дело в том, что это очень привлекательный дизайн. Это просто. Это выглядит хорошо. Большинство людей увидят это и скажут: «Это очень хорошо». Многие люди, вероятно, скачают эту тему и будут использовать ее для дизайна своего сайта. Но если у него есть универсальная привлекательность, то, вероятно, за ним не стоит и настоящая любовь .
Позвольте мне двигаться дальше и рассказать вам небольшую историю, пока вы привлекли ваше внимание. Кто из вас любит готовить? Я делаю. Я всегда использовал рецепт, когда готовлю. Я обнаружил, что если я начинаю проявлять творческий подход на кухне и делать замену, вещи редко бывают хорошими.
Мне нужен кулинарный эквивалент принципов дизайна. Моя жена с левым полушарием с другой стороны (вы видите здесь с ее мамой. Вот откуда она получает большую часть своих кулинарных отбивных), она только что закончила докторскую диссертацию по химической инженерии. Итак, она примерно такая же умная, как и они. И она может готовить вещи, которые она только что попробовала раньше. На прошлой неделе она посмотрела на то, что у нас было в холодильнике, и решила, что собирается собирать картошку с морским гребешком. Нет рецепта. Она никогда не делала их раньше. Она просто взбила их. И они были великолепны! Это было похоже на лучший картофель с морским гребешком, который у меня когда-либо был.
Итак, возвращаясь ко мне и рецептам, Эми и я используем много сайтов рецептов. Мы используем сайт под названием AllRecipes.com, потому что их библиотека огромна, и у них есть пользовательские рейтинги, поэтому она помогает вам устранить плохие. Рецепты с самым высоким рейтингом на AllRecipes.com, они, как правило, довольно безопасные ставки. И тот факт, что за них проголосовали «за» или «против», означает, что они имеют довольно универсальную привлекательность, как та тема WordPress, которую я только что показал вам. Но есть и отрицательная сторона.
О Боже мой! Они сделали это! Кто-то создал лучшую в мире лазанью. Это пять звезд и 5 389 отзывов. Я сделал этот рецепт один раз. Это было для Эми на специальный ужин однажды ночью. Я следовал рецепту к письму. Это была не самая плохая лазанья, которую мы когда-либо имели, но на самом деле это была просто лазанья. Это было лучше, чем замерзший Стоффер лазанью вы получаете в продуктовом магазине, но это было определенно довольно «Мех».
Фактически, большинство из проверенных пятизвездочных рецептов, которые мы нашли, являются такими. Они простые, простые и они никого не обидят. Они не слишком острые, не слишком игривые, не слишком ничего. Дизайн такой же. Следование принципам поможет вам создать нечто, имеющее универсальную привлекательность, но универсальная привлекательность подобна мягкой лазаньи.
Итак, как мы можем это исправить? Писая принципы. Если мы применяем индивидуальность, вдохновение, самовыражение, креативность, реакцию, художественную ценность, если это наши цели, то мы должны нарушать некоторые правила.
Этот писсуар, который вы видите здесь, является фонтаном Марселя Дюшана . Марсель Дюшан был художником. Он был частью кубистского движения. И он создал это произведение искусства, которое на самом деле представляет собой просто писсуар, повернутый на бок с подписью и датой на стороне. Он создал это произведение искусства, чтобы сместить фокус искусства с физического ремесла на интеллектуальную интерпретацию. И многие люди видят это: « Ого! Они просто взяли писсуар, поместили его в художественную галерею и назвали его искусством. »
Многие люди говорят, что DuChamp — чурбан. Он не настоящий художник. Он взломан. Но если вы посмотрите на его другие работы, вы увидите, что он действительно знает об искусстве и теории цвета и живописи и художественных движениях его дней. Хотя он любит нарушать правила. Это его новая нисходящая лестница 1912 года.
Как это выглядит, когда мы нарушаем правила Интернета? Ну, может быть, это выглядит примерно так. Это сайт под названием Generator X. И для меня это потрясающе красиво. Это определенно не у каждого чашка чая, и эта цветовая гамма довольно яркая. Но это круто, потому что фон меняется каждый раз, когда вы перезагружаете сайт. Это довольно интересно, потому что это сайт о программно-модулированном дизайне.
Этот дизайн был довольно сумасшедшим и нарушающим правила, это интересный дизайн. Этот сайт взят из книги Курта Клонинджера « Новые стили для веб-дизайнеров ». Я очень рекомендую эту книгу. Здесь много примеров сайтов, которые действительно нарушают правила.
Но нарушение правил не должно быть таким крайним. Он является еще одним примером сайта, который нарушает некоторые правила того, что у нас есть для веб-дизайна. Где находится навигация по сайту? Вы действительно не видите это. Вы действительно не знаете, что здесь происходит. Вы видите, что есть полоса прокрутки. И вы видите этот вопросительный знак внизу страницы. И зная, что я знаю о концепции продолжения, мой взгляд сразу же сводится к этому вопросительному знаку. Я думаю, что ваш, вероятно, тоже. Так что, если вы прокрутите страницу, вы получите это — довольно интересное поведение для веб-сайта.
Многие люди по-настоящему весело проводили время за рамками экспериментов с подобными конструкциями. Речь идет только об использовании того, что мы знаем о макете, цвете и текстуре, и о том, чтобы немного изменить правила; взять некоторые из них и сломать их.
Следующий пример — это веб-сайт Beer Camp для South by Southwest 2011 . Он создан людьми из « Включить в Вашингтон», и они создали интерес, используя пропорции и преемственность. Если вы заметили, что если вы посмотрите в центр, все становится все меньше и меньше. И поэтому, когда вы начинаете прокручивать страницу, вы фактически прокручиваете в этот маленький крошечный квадрат. И я даже не собираюсь отдавать его полностью, но если вы продолжите прокручивать и прокручивать, то в конце будет приятный маленький сюрприз. В этом есть тема. Так что это просто действительно интересный дизайн. Это не вписывается в коробку хорошей цветовой схемы. Это отличный пример монохромного дизайна, но он нарушает некоторые правила того, что мы считаем типичным веб-сайтом, который будет работать для любой другой компании или мероприятия.
Итак, эти три примера, как моя жена и ее гребешок, — это дизайнеры, которые что-то попробовали или что-то услышали. Они увидели что-то и вдохновились. Они — проекты, которые не основаны на рецепте, но знание дизайна очевидно во всех трех из них.
Дизайн — это взятие стандарта и его скручивание, чтобы создать что-то уникальное. Итак, знаменитый графический дизайнер, Тибор Калман — это он там с некоторыми из своих противоречивых работ — он однажды сказал: «Я всегда пытаюсь заставить людей отучиться от того, что они изучают в школе».
Итак, если мы собираемся стать лучшими дизайнерами, если нам придется разучиться тому, чему мы научились, с чего бы нам даже начинать изучать правила? Ну, ответ на это все вокруг вас. Не зная или не исходя из базовых принципов, все может пойти очень, очень неправильно.
Я собираюсь показать вам несколько примеров дизайнеров, которые также нарушают правила. И я собираюсь быстро пройтись по этим трем примерам, потому что я не хочу, чтобы ты пошел и посмотрел их или что-то еще.
Этот первый пример изменился. Сайт не намного лучше. Я работал над сайтом для компании, которая продает запчасти для оборудования общественного питания около года назад, когда я нашел это. Я сделал скриншот этого. Это так отвратительно. И то, что я вижу, когда смотрю на это, является просто полным незнанием принципов дизайна. Пропорция все выключена. Здесь нет реального чувства баланса. Там происходит много разных шрифтов, и это просто не говорит мне, что это за компания или кто они. Я просто вижу этот шар, плавающий как масляный шар. И это на самом деле флэш-анимация, кстати. И затем, если вы используете слово «навигация по сайту» на своем сайте в качестве изображения, вы знаете, что делаете это неправильно! Итак, я знаю, что все они на самом деле не нарушают принципы дизайна, а просто разбивают примеры того, каким должен быть веб-дизайн.
Это следующий пример. Цветовая схема все неправильно. Шрифты, там много разных шрифтов. Есть некоторые проблемы с контрастом на странице. И действительно, все сводится к цветовой гамме, градиентам, бликам, мягким краям и многому другому.
Но это сайт, о котором у друга друга возникла техническая проблема. И это буквально то, что они просили — какое дополнение им нужно было включить платежи на свою страницу в Интернете. Таким образом, это был веб-сайт, на котором они пытались разместить надстройку на странице. Действительно ли вы доверяете этому сайту свою кредитную карту, возвращаясь к концепции банковского сайта или сайта электронной коммерции? Доверяете ли вы этому сайту, чтобы иметь возможность доверять им? Если серьезно, мне бы не хотелось, если бы была возможность что-то купить. И это проблема.
Таким образом, этот сайт (следующий сайт) немного более заслуживает доверия. Это несколько профессионально выглядит. Другой, я уверен, что вы говорите: «Фуууу…». Это сайт, над которым я действительно работал. Это был план хостинга для одной из первых компаний, в которой я работал после колледжа. Мы не разрабатывали сайт. Кто-то еще сделал. И мы должны были сделать техническое обслуживание. Как ни странно, нам пришлось добавить электронную торговлю на сайт еще в 2004 году. И тогда я подумал, что это ужасно, просто сочетание красного и пурпурного цветов, которые не совсем дополняют друг друга. И снова здесь шрифты повсюду. Это веб-сайт, основанный на таблицах, созданный еще в 2004 году. И этот сайт все еще жив во всей своей ослепительной красе.
Для меня очевидно, что у людей, которые проектировали так, у них нет принципов. Они не начинаются с основания. Итак, если бы мы нанесли эти рисунки на кривую колокольчика, то они оказались бы здесь с болезненной стороны. Вы не хотите быть там.
Итак, изучение принципов проектирования важно, потому что это приводит вас в счастливую среду. Если вы будете следовать принципам дизайна, вы получите эту безопасную среднюю область. Но когда вы начинаете нарушать правила, когда узнаете о дизайне, вы начинаете создавать уникальные вещи. Все действительно плохие и действительно великолепные дизайны нарушают правила, но великолепные дизайны делают это намеренно .
Хотя иногда есть некоторые правила, которые мы не можем согнуть. У нас есть фирменные цвета или, может быть, нам нужно работать с конкретным шрифтом. Это может быть хорошо. Чарльз Имс, известный дизайнер мебели и архитектор, сказал, что дизайн во многом зависит от ограничений ». И это действительно так. Как дизайнер, ограничения действительно помогают процессу проектирования, а не мешают ему. Это отнимает много вашего процесса принятия решений.
Я большой поклонник дизайна и архитектуры середины века. И одна из самых больших икон мебели середины века — Eames Chair. Он был разработан дизайнером Чарльзом Имсом еще в 1956 году Германом Миллером . И более 50 лет спустя, это все еще очень популярный стул продаж от Германа Миллера. Это уникально, но оно превосходит все ограничения того, каким должен быть стул. И примерно в то же самое время, в начале 50-х, было много дизайнеров, которые выпускали стулья, которые действительно сильно отличаются от того, что вы ожидаете от стула. И это тоже были значки дизайна, но вы больше не видите их в домах, потому что они исчезли. Они действительно не соответствовали ограничению того, каким должен быть стул. Они либо не были удобны, либо не практичны. Так что иногда ограничение — это хорошо.
Другим известным архитектором был Ле Корбюзье . Он был дизайнером, архитектором. И он славится своей стандартизацией и эстетичностью машин. Корбюзье создал пять точек современной архитектуры. Здесь вы можете видеть, что он считает, что все здания должны быть построены на сваях над землей. Он был очень конкретным со своими правилами. Он полагал, что у всех зданий должна быть терраса на крыше, зеленое пространство, чтобы заменить зеленое пространство, которое занимало здание. Он считал, что необходимые ему укладки дают зданию возможность иметь свободный фасад. Иметь как можно больше окон и иметь открытые планы этажей.
Итак, большая часть работы, которую вы видите этим архитектором, придерживается этих принципов, этих руководящих принципов. Но даже Корбюзье знал, когда пришло время изменить некоторые принципы, даже свои собственные правила. Он отказался от каждого из своих принципов, которые вы здесь, с этой часовней Роншам . Он был построен в 1954 году во Франции.
У многих корпоративных дизайнерских работ столько ограничений, что трудно быть креативным. Трудно вырваться и нарушить правила. Корпоративные компании, они на самом деле не доверяют своим дизайнерам раскрашивать линии и создают обширные фирменные документы, детализирующие все дизайнерские решения, связанные с любой печатью, веб или видео, которые имеют отношение к компании. Иногда даже для компании хорошо разбить их всех. Как правило, в большинстве документов о стандартах на бренды логотип довольно четко обозначен, что вы можете и не можете с этим сделать.
В MailChimp у нас есть дизайнерская лаборатория талантливых художников и иллюстраторов. И все время они делают сумасшедшие вещи с Фредди фон Шимпом. Это наш талисман. Первоначально он был нарисован Джоном Хиксом . И это некоторые из перестановок Фредди с разных экранов и футболок для журналов, которые придумали дизайнерские лаборатории. И это логотип компании, с которой постоянно играет компания, которая занимается дизайном лаборатории. Я испытываю огромное восхищение и уважение к этим парням, но на самом деле они просто нарушают правила и вносят изменения. Дизайнерская лаборатория отслеживает эти вещи. И они всегда получают много любви в Твиттере, когда меняют экран входа в систему.
Еще несколько недель назад, 4 мая, самым популярным экраном регистрации всех времен был этот, вход в систему чемпионата мира, который мы сделали. Итак, мы делаем это не только с логотипом, но и с талисманом Фредди. Мы также сделали это недавно со всем сайтом. Дизайнерская лаборатория отвечала за сайт продукта, MailChimp.com; команда взаимодействия с пользователем (где я работаю) отвечает за само приложение.
Сайт недавно был полностью переработан. Это пошло от этой классической, безопасной, дополнительной цветовой схемы, которая долгое время хорошо работала для MailChimp. Это очень разные. Цвета усиливаются. Там гораздо больше внимания на иллюстрации. Текст мы сократили. Мы удалили все шрифты, кроме Helvetica. Так что это совершенно другое направление, совершенно другой взгляд.
Как только они придумали этот редизайн для сайта продукта, они передали бутылку дизайна команде пользователей, чтобы применить то же самое к приложению. Итак, еще раз, это приложение для него. Опять очень бежевый нейтральный. Это определенно имеет универсальную привлекательность. Никто не собирался обижаться на этот дизайн приложения. А потом, это было после. Схожая структура и множество вещей одинаковы, но это совершенно новый вид.
У нас было несколько жалоб от людей, которые говорили, что цвета слишком жирные. Один человек даже сказал, что у него болит голова, и это нечто, если вы разрабатываете вещи, вы не хотите этого слышать. Вы хотите, чтобы люди любили то, что вы делаете. Но с этими несколькими негативными реакциями у нас было много «вау» отзывов. У нас было много людей, которым действительно очень нравится редизайн.
И классная вещь в этом процессе редизайна состоит в том, что те цвета, которые у нас были раньше, beiges и что-то еще, они настолько укоренились в CSS, что если вы хотите изменить цвет, вам придется изменить его в 50 миллионах мест. Но когда мы изменили дизайн, мы также стандартизировали многие из наших стилей таким образом, что позволили нам изменить вещи одной строкой здесь и там. И это позволило нам добавить еще одну функцию, о которой люди давно спрашивали, — это совместный брендинг. Таким образом, мы смогли разрешить людям изменять фон заголовка, цвета кнопок и многое другое на сайте. Это одна из предопределенных тем в MailChimp.
И поэтому, для тех немногих людей, которые действительно ненавидели цветовую схему, которую мы создали, или, возможно, она просто не работала для них, и они хотели, чтобы она соответствовала цветам их компании, мы можем позволить им сделать это. Так что, независимо от того, являются ли они вечеринками или нет, они могут создать что-то вроде этого.
Возвращаясь к тем принципам, о которых я говорил ранее, они на самом деле не столько принципы, сколько ограничения. Таким образом, следование им, как и соблюдение любых ограничений для проекта, позволит вам создавать привлекательные дизайны. Но плохой дизайн непреднамеренно нарушает правило, в то время как отличный дизайн намеренно нарушает, по крайней мере, некоторых.
Таким образом, вы должны нарушать правила хотя бы в одной из этих категорий. Вы должны нарушить правила компоновки, цвета, текстуры, типа или изображения. Но помните, что дизайн решает проблемы. Все эти логотипы, которые вы видите здесь, являются знаковыми логотипами Saul Bass. Он один из самых плодовитых дизайнеров иконок нашего времени. На самом деле, вы, наверное, знаете каждую марку здесь, даже не видя логотипа. У нас есть Bell, у нас есть AT & T, United Airlines, Avery, Continental Airlines, United Way, Minolta и Girl Scouts.
Таким образом, он учится, как донести свое послание визуально и творчески, не используя слова. Итак, это действительно то, что мы хотим сделать.
Еще один пример, который я считаю Фредди фон Шимпом, и ценю эту стену бананов. И это было разработано Стефаном Сагмайстером, который известен тем, что он выдвигал свои короткие сообщения пословиц инновационными способами. У этого на стене есть скрытое сообщение. Он повесил их всех, как они, когда они были зелеными. И когда они созрели, они раскрыли сообщение.
Есть два разных возраста бананов, которые он использовал, когда делал эту стену, и это было очень намеренно. Он сказал, что уверенность в себе дает хорошие результаты.
Моя жена рассказала мне на днях о дизайне. Она работала над чем-то. Самое неприятное в дизайне — это то, что нет правильного ответа. Я думаю, что это то, что я действительно люблю в дизайне. Неважно, что вы разрабатываете, вы не можете бояться рисковать. Вы должны знать правила, чтобы не допускать ошибок, подобных тем нескольким примерам, которые я приводил ранее, но вам также нужно иметь некоторую уверенность и время от времени совершать какие-то безумные поступки.
Тот же самый парень, который придумал это, также сказал, что « вы можете получить художественный опыт перед Рембрандтом… или перед частью графического дизайна ». Самое важное, что нужно помнить, это то, что мы предоставляем визуальный опыт нашим посетителям и нашим пользователям, независимо от того, хотим мы этого или нет. Это может быть формальный или тот, который сосредоточен на принципах и предназначен для обращения к массам, или тот, который выходит за рамки этих принципов. Выбор действительно остается за вами.
Итак, я собираюсь закончить этот разговор еще одной цитатой. Это не от дизайнера, не от архитектора или кого-то в этом роде. Это на самом деле от Вилли Вонка, из всех мест. В первом фильме о Вилли Вонке Джин Уайлдер говорит: «Мы — создатели музыки, и мы — мечтатели мечты».
Возможность выдвигать пиксели вокруг того, что видят миллионы людей, — удивительная сила. Это подарок. Если мы разрабатываем вещи, которые имеют универсальную привлекательность, и люди думают, что это нормально, мы действительно оказываем себе плохую услугу. Мы упускаем возможность сделать гораздо больше. Итак, я призываю всех вас изучить принципы дизайна. Изучите правила. А затем выясните, как вы можете их сломать, как вы можете придумать некоторые инновационные и уникальные идеи.
Спасибо за просмотр.