DesignMojo http://designmojo.ru Веб-дизайн и создание сайтов Mon, 29 May 2017 15:13:36 +0000 ru-RU hourly 1 https://wordpress.org/?v=4.7.5 http://designmojo.ru/wp-content/uploads/2017/03/favicon-new3.png DesignMojo http://designmojo.ru 32 32 10 трендов в иллюстрации на 2017 год http://designmojo.ru/design/trends/10-trendov-v-illyustracii-na-2017-god/ http://designmojo.ru/design/trends/10-trendov-v-illyustracii-na-2017-god/#respond Mon, 29 May 2017 14:27:28 +0000 http://designmojo.ru/?p=8074 Нравится нам это или нет, но все мы находимся под влиянием тенденций. Это не значит, что вы должны бездумно следовать за ними, но важно знать, что они собой представляют. IStock by Getty Images — это не просто мировые лидеры в области фотографии, они также являются основным поставщиком иллюстраций на стоковом рынке. Таким образом, можно сказать, […]

Запись 10 трендов в иллюстрации на 2017 год впервые появилась DesignMojo.

]]>

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

IStock by Getty Images — это не просто мировые лидеры в области фотографии, они также являются основным поставщиком иллюстраций на стоковом рынке. Таким образом, можно сказать, что они находятся в идеальном положении для выявления новых тенденций в мире иллюстраций.

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

Зернистость

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

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

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

Рукописные геометрические фигуры

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

Линии немного шаткие, а цвет слегка неровный, но это лишь часть привлекательности этого очаровательного, характерного стиля.

Сюрреализм

Сюрреализм — это неожиданные сопоставления, сюрпризы и непоследовательности. И это стиль, который все больше становится популярным среди иллюстраторов.

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

Рукописные шрифты

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

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

Множественные экспозиции

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

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

Уникальные перспективы

Когда привлекательные образы становятся все более важными для онлайн-успеха, дизайнеры ищут новые точки зрения на затасканные темы. Иллюстраторы, в свою очередь, все чаще берут пример с селфи-культуры, GoPro, дронов и носибельной техники, чтобы включить идею персонализированных перспектив и «точки зрения» (POV) в свое искусство.

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

1980-е

Отличительные стили 1980-х, возродившиеся в последних хитовых шоу типа «Очень странные дела», возвращаются в мир иллюстраций с удвоенной силой.

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

Палитры, вдохновленные Instagram

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

И эти Insta-стили также влияют на работу иллюстраторов, принося, таким образом, неестественные цвета и высокую контрастность в их работы.

Золото

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

Плоский дизайн 2.0

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

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

Если же вы хотите увидеть все эти тенденции в действии, то всегда можете в Getty Images, чтобы вдохновиться работами других иллюстраторов.

Источник   Автор: 

Запись 10 трендов в иллюстрации на 2017 год впервые появилась DesignMojo.

]]>
http://designmojo.ru/design/trends/10-trendov-v-illyustracii-na-2017-god/feed/ 0
Как привлечь внимание через цвет в веб-дизайне http://designmojo.ru/knowledge/tutorials/kak-privlech-vnimanie-cherez-cvet-v-veb-dizajne/ http://designmojo.ru/knowledge/tutorials/kak-privlech-vnimanie-cherez-cvet-v-veb-dizajne/#respond Mon, 29 May 2017 14:09:14 +0000 http://designmojo.ru/?p=8066 Работа с цветом может оказаться довольно интересным занятием. Цвет способен придать дизайну нужное настроение и тон, а также сделать его чистым или, наоборот, грязным. Но есть у цвета еще одно важное качество – его можно использовать, чтобы привлечь внимание зрителя к определенной части контента. Существует множество способов манипуляции с помощью цвета. Например, цветовые повторы. Или […]

Запись Как привлечь внимание через цвет в веб-дизайне впервые появилась DesignMojo.

]]>

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

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

Итак, как же можно привлекать внимание через цвет?

Бюстгальтеры, фотографии и внимание

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

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

Привлечение внимания с помощью цвета

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

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

Что интересно, Storq не использует «красивенькие» фото. Дизайнеры сознательно отказались от ненужного драматизма или чересчур ярких цветов – все фото насыщены темными оттенками и комплиментарными по отношению к ним цветами.

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

Текст тоже может привлекать внимание

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

Терия цвета

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

Если присмотреться к странице агентства, то сразу станет ясно, что является самым главным элементом. Это заголовок «Our Approach». Это самый темный элемент, поэтому он сразу же бросается в глаза.

Сайт компании Founders

 

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

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

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

Цвет и композиционный центр

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

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

 

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

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

Без этого цветового всплеска страница «гаснет» и выглядит неинтересно.

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

Составляющие визуального языка

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

Визуальный язык объясняет, как именно соотносятся между собой все элементы дизайна. Он указывает, что можно сделать, а что нельзя, какие элементы могут быть использованы для того, чтобы у дизайна появился узнаваемый визуальный стиль. Цвет, естественно, является очень значимой частью любого визуального языка. В этом можно легко убедиться, если просмотреть, к примеру, гайдлайн направления Material Design.

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

 

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

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

Отсутствие цвета тоже может работать

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

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

Подчеркивание битов информации

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

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

 

Вывод

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

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

Источник Автор: 

Запись Как привлечь внимание через цвет в веб-дизайне впервые появилась DesignMojo.

]]>
http://designmojo.ru/knowledge/tutorials/kak-privlech-vnimanie-cherez-cvet-v-veb-dizajne/feed/ 0
Абстракция: Искусство дизайна. 6 серия. http://designmojo.ru/design/designers/abstrakciya-iskusstvo-dizajna-6-seriya/ http://designmojo.ru/design/designers/abstrakciya-iskusstvo-dizajna-6-seriya/#respond Thu, 25 May 2017 19:34:28 +0000 http://designmojo.ru/?p=8048 Шестая серия The Abstract в русской озвучке Шестая серия документального сериала от Netflix, рассказывающего о культовых дизайнерах современности. Каждый эпизод выступает как отдельный фильм, образуя вместе, 8 увлекательных историй талантливых мировых дизайнеров, работы которых формируют мир вокруг нас. Паула Шер — живая легенда, идеал и образец для подражания для многих дизайнеров. Шер говорит, что в ее […]

Запись Абстракция: Искусство дизайна. 6 серия. впервые появилась DesignMojo.

]]>
Шестая серия The Abstract в русской озвучке

Шестая серия документального сериала от Netflix, рассказывающего о культовых дизайнерах современности. Каждый эпизод выступает как отдельный фильм, образуя вместе, 8 увлекательных историй талантливых мировых дизайнеров, работы которых формируют мир вокруг нас.

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

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

Сериал озвучен при поддержке digital-агентства Атвинта, командой VPerevode.

Запись Абстракция: Искусство дизайна. 6 серия. впервые появилась DesignMojo.

]]>
http://designmojo.ru/design/designers/abstrakciya-iskusstvo-dizajna-6-seriya/feed/ 0
Шрифт ГОСТ 2.304 http://designmojo.ru/freebies/fonts/shrift-gost-chertezhnyj-skachat/ http://designmojo.ru/freebies/fonts/shrift-gost-chertezhnyj-skachat/#respond Thu, 25 May 2017 10:54:30 +0000 http://designmojo.ru/?p=8009 Чертёжные шрифты ГОСТ 2.304-81 тип А и тип Б, доступные для бесплатного скачивания. Стиль (начертание): Regular Русский язык (кириллица): Да Формат шрифта: True Type Fonts (.ttf) Регистр букв: Прописные и строчные Лицензия: Бесплатно для личного использования Правообладатель: © ASCON Ltd

Запись Шрифт ГОСТ 2.304 впервые появилась DesignMojo.

]]>
Чертёжные шрифты ГОСТ 2.304-81 тип А и тип Б, доступные для бесплатного скачивания.

Гостовский шрифт GOST type A

Гостовский шрифт GOST тип A

Шрифт ГОСТ GOST type B

Шрифт ГОСТ GOST тип B


Стиль (начертание): Regular
Русский язык (кириллица): Да
Формат шрифта: True Type Fonts (.ttf)
Регистр букв: Прописные и строчные
Лицензия: Бесплатно для личного использования
Правообладатель: © ASCON Ltd

Запись Шрифт ГОСТ 2.304 впервые появилась DesignMojo.

]]>
http://designmojo.ru/freebies/fonts/shrift-gost-chertezhnyj-skachat/feed/ 0
40 фактов о психологии цвета http://designmojo.ru/design/designer-tools/40-faktov-o-psixologii-cveta/ http://designmojo.ru/design/designer-tools/40-faktov-o-psixologii-cveta/#respond Wed, 24 May 2017 10:16:22 +0000 http://designmojo.ru/?p=8000 Покупателю достаточно всего полторы минуты, чтоб оценить продукт и сформировать свое мнение о его покупке. Как за такое время повлиять на него? Ответ на этот вопрос дает психология цвета, в 90% случаев становясь главным аргументом, подталкивающим к покупке. Цвета, будучи одним из центральных маркетинговых инструментов, способны развивать положительное или отрицательное отношение к брендам, повышать узнаваемость […]

Запись 40 фактов о психологии цвета впервые появилась DesignMojo.

]]>

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

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

Только представьте, 85% всех покупателей основывают свой выбор исключительно на цвете товара, а более 65% не совершают покупки, пока нужная им вещь не выпускается в подходящем цвете. А это ведь далеко не все…

Особенности аудитории

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

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

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

Практика брендов

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

Так, все тот же «продающий красный» уже давно удачно используется Кока-Колой, Макдональдсом, энергетиком Ред Булл и сетью фаст фудов KFS. Являя собой символ смелости и решительности, красный способен вызывать у клиентов острое желание совершать импульсивные покупки. Синий, наоборот, способен вызывать доверие и спокойствие, что делает его самым популярным цветом в электронной коммерции – его успешно применяет Facebook и Вконтакте, Skype и IBM, LinkedIn и Visa.

Зеленый вполне ожидаемо напоминает про гармонию и природу, поэтому он активно используется продуктовыми производителями, агрохолдингами и финансовыми организациями, например, Сбербанком и Whole Foods. Не менее масштабно используется и оранжевый цвет, символизирующий уверенность и амбиции, и призывающий к действию как, например, Fanta, Одноклассники или Harley Davidson.

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

Цвета и активность

При всем этом, цвет способен вызывать не только конкретные эмоции, но и обеспечивать потребительскую активность в целом. Как? При помощи дизайна веб-ресурсов и палитры используемых цветов. Статистика говорит нам, что 90% покупателей делают свой выбор под влиянием визуальных образов, а 50% больше никогда не вернуться на сайт, если цветовая гамма сайта и дизайн не понравились конкретному покупателю.

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

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

40 фактов о психологии цвета, инфографика

Запись 40 фактов о психологии цвета впервые появилась DesignMojo.

]]>
http://designmojo.ru/design/designer-tools/40-faktov-o-psixologii-cveta/feed/ 0
Увеличьте количество своих подписчиков на WordPress с плагином Mailgun http://designmojo.ru/wordpress/plugins/uvelichte-kolichestvo-svoix-podpischikov-na-wordpress-s-plaginom-mailgun/ http://designmojo.ru/wordpress/plugins/uvelichte-kolichestvo-svoix-podpischikov-na-wordpress-s-plaginom-mailgun/#respond Wed, 24 May 2017 10:05:06 +0000 http://designmojo.ru/?p=7991 Плагин Mailgun всегда был простым и доступным средством поддержки исходящих электронных писем на вашем сайте WordPress без рисков для сервиса SMTP. Теперь вы можете использовать Mailgun List в ваших записях, страницах и виджетах на WordPress. Одной из наиболее полезных функций этого плагина является то, что он предоставляет вам альтернативный вариант рассылки электронных писем, если ваш сервер […]

Запись Увеличьте количество своих подписчиков на WordPress с плагином Mailgun впервые появилась DesignMojo.

]]>
Плагин Mailgun всегда был простым и доступным средством поддержки исходящих электронных писем на вашем сайте WordPress без рисков для сервиса SMTP. Теперь вы можете использовать Mailgun List в ваших записях, страницах и виджетах на WordPress.

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

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

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

Немного о Mailgun

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

Mailgun имеет потрясающую документацию для разработчика и поддерживает большинство популярных языков программирования, включая PHP, Ruby, Python, C# и Java. В бесплатной версии вы сможете рассылать до 200 электронных писем в день, что будет вполне достаточно для тестирования. В платной версии количество количество писем значительно больше.

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

Настройка плагина Mailgun

Вы можете скачать плагин Mailgun с официального каталога WordPress.org:

После установки и активации плагина на вашем сайте давайте настроим его для доступа к вашему аккаунту и спискам подписчиков. В консоли вашего сайте зайдите в Настройки → Mailgun:

Вы можете увидеть остальную часть настроек на странице ниже:

Введите название вашего домена и ключ API в панели управления Mailgun, как показано ниже:

После сохранения этих настроек нажмите кнопку Test Configuration в панели настроек WordPress. На экране появится всплывающее окно, и вскоре придёт электронное письмо с подтверждением:

Mailgun Lists

Давайте взглянем на панель управления списками рассылки Mailgun:

Если у вас еще нет такого списка подписчиков, нажмите Create Mailing List, заполните и сохраните форму внизу:

Вернемся к странице настройки плагина Mailgun в консоли WordPress. Нажмите View available lists:

Вверху вы можете увидеть наш список Mailgun для WordPress. Давайте теперь добавим виджет для подписки в боковую панель.

Добавление виджета для подписки

Зайдите на страницу Внешний вид → Виджеты и перетащите виджет Mailgun List на вашу боковую панель:

Настройте параметры виджета, добавив название и описание. Если хотите, то можете отметить галочкой поле для сохранения полного имени подписчика, а не только его электронного адреса. Введите хотя бы один список адресов Mailgun, например, subscribers@simplestart.io.

Когда вы откроете ваш сайт WordPress, вы увидите что-то похожее. Обратите внимание на правую боковую панель с виджетом:

После того, как пользователи нажмут «Подписаться», они увидят уведомление с благодарностью.

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

Использование шорткода для подписки

А сейчас давайте добавим форму для подписки к вашему контенту, статьям или страницам. В этом примере мы добавим следующий шорткод на страницу «О нас»:

Если вы хотите подписаться на нашу рассылку, укажите свой email и выберите интересующую тематику:
[mailgun id=»subscribers@simplestart.io,tech@newscloud.com,outreach@newscloud.com»]

Вот так будет теперь выглядеть эта страница с Multiple Lists, обратите внимание на левый нижний угол:

Очень просто, не правда ли?

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

Источник: code.tutsplus.com  Перевод: wpcafe.org

Запись Увеличьте количество своих подписчиков на WordPress с плагином Mailgun впервые появилась DesignMojo.

]]>
http://designmojo.ru/wordpress/plugins/uvelichte-kolichestvo-svoix-podpischikov-na-wordpress-s-plaginom-mailgun/feed/ 0
10 реалистичных мокапов MacBook http://designmojo.ru/freebies/mockups/10-realistichnyx-mokapov-macbook/ http://designmojo.ru/freebies/mockups/10-realistichnyx-mokapov-macbook/#respond Wed, 24 May 2017 09:52:58 +0000 http://designmojo.ru/?p=7984 Бесплатно скачайте сэт из 10 реалистичных мокапов от Reza Azmy для использования в своих презентациях. Вы можете изменять цвет МакБука, блики, тени и фон.

Запись 10 реалистичных мокапов MacBook впервые появилась DesignMojo.

]]>
Бесплатно скачайте сэт из 10 реалистичных мокапов от Reza Azmy для использования в своих презентациях. Вы можете изменять цвет МакБука, блики, тени и фон.

Запись 10 реалистичных мокапов MacBook впервые появилась DesignMojo.

]]>
http://designmojo.ru/freebies/mockups/10-realistichnyx-mokapov-macbook/feed/ 0
EUI Commerce UI Kit http://designmojo.ru/freebies/ui-kit/eui-commerce-ui-kit/ http://designmojo.ru/freebies/ui-kit/eui-commerce-ui-kit/#respond Wed, 24 May 2017 09:39:01 +0000 http://designmojo.ru/?p=7978 Это UI Kit идеально подойдет для проектирования мобильных приложений в сфере электронной торговли. Автор: Jim Endicott Формат: PSD Шейпы: Да Размер: 13.3 Mb

Запись EUI Commerce UI Kit впервые появилась DesignMojo.

]]>
Это UI Kit идеально подойдет для проектирования мобильных приложений в сфере электронной торговли.


Автор: Jim Endicott

Формат: PSD
Шейпы: Да
Размер: 13.3 Mb

Запись EUI Commerce UI Kit впервые появилась DesignMojo.

]]>
http://designmojo.ru/freebies/ui-kit/eui-commerce-ui-kit/feed/ 0
Сайт архитектурной компании http://designmojo.ru/freebies/psd-makety-sajtov/sajt-arxitekturnoj-kompanii/ http://designmojo.ru/freebies/psd-makety-sajtov/sajt-arxitekturnoj-kompanii/#respond Wed, 24 May 2017 09:23:07 +0000 http://designmojo.ru/?p=7970 Минималистичный сайт для архитектурной компании доступный для бесплатного скачивания. Пользуйтесь на здоровье! Отличная работа от Ga Huy.

Запись Сайт архитектурной компании впервые появилась DesignMojo.

]]>
Минималистичный сайт для архитектурной компании доступный для бесплатного скачивания.

Пользуйтесь на здоровье! Отличная работа от Ga Huy.

Запись Сайт архитектурной компании впервые появилась DesignMojo.

]]>
http://designmojo.ru/freebies/psd-makety-sajtov/sajt-arxitekturnoj-kompanii/feed/ 0
10 шагов к улучшенной адаптации пользователя http://designmojo.ru/design/ux-design/10-shagov-k-uluchshennoj-adaptacii-polzovatelya/ http://designmojo.ru/design/ux-design/10-shagov-k-uluchshennoj-adaptacii-polzovatelya/#respond Tue, 23 May 2017 16:31:15 +0000 http://designmojo.ru/?p=7950 Роман Шелехов, руководитель группы развития корпоративных электронных каналов в Банке ВТБ и магистр Гильдии вольных проектировщиков, специально для «Нетологии» адаптировал статью Grzegorz Oksiuta об адаптации пользователя как об одном из важнейших элементов приложений. Адаптация пользователя (Onboarding/Онбординг) – ключевой элемент любого приложения. Зачастую именно простота использования определяет, будут ли пользоваться приложением или нет. Адаптация пользователя — […]

Запись 10 шагов к улучшенной адаптации пользователя впервые появилась DesignMojo.

]]>

Роман Шелехов, руководитель группы развития корпоративных электронных каналов в Банке ВТБ и магистр Гильдии вольных проектировщиков, специально для «Нетологии» адаптировал статью Grzegorz Oksiuta об адаптации пользователя как об одном из важнейших элементов приложений.


Адаптация пользователя (Onboarding/Онбординг) – ключевой элемент любого приложения. Зачастую именно простота использования определяет, будут ли пользоваться приложением или нет.

Адаптация пользователя — это больше, чем просто экранные заставки и подсказки в пользовательском интерфейсе. В этой статье описаны наиболее яркие примеры хорошей адаптации.

Сосредоточьтесь на целях пользователя

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

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

Описывайте цикл взаимодействия с клиентом

Следующий шаг — создание последовательности действий (цикла), которые пользователь предпринимает для достижения своей цели.

Особое внимание нужно уделить ключевым моментам взаимодействия: «Первое открытие приложения», «Регистрация/создание профиля» или «Выбор пользователя из списка контактов». Последний шаг — достижение цели — самый важный.

Опыт перелёта от LEGO

Опыт заказа мобильного телефона от Jessica Tien

Отбросьте лишнее

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

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

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

Appear.in создает видеоконференции без регистрации и даже указания имени

Аватар, местоположение, рост или вес — вся эта информация абсолютно не важна в начале использования приложения (исключения бывают, когда приложение завязано на эти данные: например, такси (местоположение), фитнестрекер (рост/вес) или приложение по созданию красивых аватарок – прим. перев.).

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

Своевременно рассказывайте о новых функциях

В большинстве случаев пользователи фокусируются на одной функции. Что же делать, если так и хочется объяснить несколько функций сразу? Рассмотрим подробнее приложение Medium. Есть основная функция — чтение статей. В тоже время Medium позволяет публиковаться.

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

Medium рассказывает о форматировании текста, когда вы начинаете писать статью

Youtube рассказывает о прямых трансляциях только в специальной вкладке Творческой студии

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

Очень часто подсказки для адаптации пользователя отделены от самого приложения. Статический текст — это наименее привлекательный способ пояснения. Всегда старайтесь максимально задействовать механику приложения.

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

Trello демонстрирует функции сервиса с помощью собственной механики карточек

Объясняйте пользу

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

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

GetResponse четко поясняет, для чего требуется вводимая информация

Хорошее объяснение, почему дата рождения важна при регистрации Apple ID

Дайте возможность пользователям разбираться самостоятельно

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

Убедитесь, что в приложении можно пропустить подсказки. Это позволит таким «исследователям» получить больше удовольствия от использования приложения, а вернувшимся пользователям упростит взаимодействие.

Обучающий тур по обучению иностранным языкам от duolingo

Дополнительный инструмент по сохранению идей от Pinterest

Практикуйте индивидуальный подход к различным задачам пользователей

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

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

Evernote определяет цель пользователя, задавая конкретный вопрос

Используйте пустые экраны

Стартовая страница сервиса для прототипирования интерфейсов

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

Стартовая страница Instagram

Говорите с вашим пользователем один на один

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

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

Подводя итог

Адаптация пользователя — сложный и непредсказуемый процесс. С ним ни в коем случае не нужно торопиться. У вас всегда должно быть время попробовать все подходы, описанные в этой статье.

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

Итерационное исправление ошибок — неотъемлемая часть проектирования и с каждой итерацией вы будете видеть реальные улучшения, а это самая лучшая мотивация.

Успехов и удачи!

Запись 10 шагов к улучшенной адаптации пользователя впервые появилась DesignMojo.

]]>
http://designmojo.ru/design/ux-design/10-shagov-k-uluchshennoj-adaptacii-polzovatelya/feed/ 0