ПроДизайн.рус

Почему принципы дизайна UX настолько сложны

UX дизайн

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

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

Пользовательский опыт не всегда считался важным компонентом разработки программного обеспечения. Функциональность и основные утилиты программного продукта часто давали больше приоритета Span UI и UX-дизайну. Сейчас такие компании, как Apple, сделали подход «пользователь важнее» гораздо более популярным. Вместо того чтобы создавать программный продукт с определенной функциональностью, а затем после завершения работы над ним вернуться и спрашивать пользователей, как оптимизировать опыт, программное обеспечение создается с учетом опыта даже до создания прототипа.

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

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

UX и пользовательский интерфейс в свое время были практически синонимами. Сегодня UX охватывает путь пользователей, невыразимые качества программных приложений, базовое ощущение программного продукта, которое представляет собой намного больше, чем визуальный дизайн, графический или голосовой интерфейс. Точно так же, как бренд Coca-Cola – это гораздо больше, чем просто рецепт, так и UX каждого программного приложения. UX – это бренд, личность и базовая интерактивность программного продукта. Это означает, что UX связан с каждым аспектом приложения, то есть принципы удобства использования, доступности и функциональности должны присутствовать в каждом слое, каждом аспекте, каждой части пользовательского интерфейса.

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

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

Принципы, особенности и типы адаптивного веб-дизайна

Адаптивный веб-дизайн

Как оценивают человека, которого встречают впервые? Разумеется – по одежке! То, как он выглядит, во что одевается и какими аксессуарами пользуется, способно сказать намного больше, чем самая лучшая визитка. А как пользователь оценивает сайт, на который он заходит? В первую очередь – по уровню его исполнения. И самым современным критерием такого уровня стал адаптивный веб-дизайн.

Что такое адаптивный веб-дизайн?

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

Такой адаптивный веб-дизайн, называемый в английской терминологии «responsive web design» – это такой подход к веб-дизайну, при котором ресурс будет отражаться корректно на любых устройствах, посещающих его пользователей. И не важно, насколько велик или мал у пользователя экран и, каким будет у него разрешение – главное, чтобы на устройстве был доступ к Интернету. А просмотр ресурса будет удобным всегда, и не потребуется использовать расширение той или иной области сайта, чтобы нажимать на ссылки.

Для чего необходим адаптивный веб-дизайн?

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

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

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

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

Чем отличается адаптивный веб-дизайн от мобильных версий сайтов?

Cтремление к удобному просмотру сайтов с мобильных устройств – идея далеко не новая, и как раз для этого создаются мобильные версии сайтов ресурсов. Почему выбирать следует именно адаптивный веб-дизайн?

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

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

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

Пять ключевых принципов адаптивного дизайна

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

  • мобильная версия создается с самого начала;
  • создается гибкий макет на базе сетки;
  • изображения делаются гибкими;
  • прорабатываются медиа-запросы.

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

Основные варианты адаптивных макетов

Все используемые сегодня адаптивные макеты разделяются на несколько основных типов:

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

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

Какой должна быть «корзина» интернет-магазина

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



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



Ярлык «Корзины»



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



noodoll

Оригинальный и интересный дизайн у noodoll.com, но давайте проверим, сколько времени у вас займет поиск корзины.



Дальше от web-мастера не требуется на самом деле чего-то чрезвычайно сложного. Ярлык корзины должен быть заметным и сразу бросаться в глаза. Взгляд покупателя просто не должен промахнуться мимо нее. Особенно если он уже набрал в нее товаров. Но важно не переборщить – она не должна занимать треть экрана.



desina.co.uk



Просто, изящно и со вкусом это реализовано в desina.co.uk.

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





pichshop.ru



Почти хрестоматийный пример – pichshop.ru: как не фантазируй, но офисное ведро для мусора никак не превращается в корзинку из стильного магазина.



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



Кнопка «Купить»

Товар попадает в корзину не сам. Для этого покупатель должен его найти, познакомиться с ним и добавить в корзину. Сейчас нас интересует последнее. Каким должна быть кнопка «купить»?



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



tmart.com

У интернет-гипермаркета tmart.com простой и незатейливый дизайн, но сделать кнопку «Add to cart» заметной они не забыли.



wildberries.ru

Классический, но все еще весьма эффективный дизайн этого элемента у wildberries.ru.



Используйте призыв к действию: «Заказать», «Купить» и т.д. И избегайте любого негатива и двусмысленности. Например, калька с английского: «в корзину» – несет совсем не ту смысловую нагрузку.



В самой корзине

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



holodilnik.ru

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



technopark.ru

Более современный подход у technopark.ru: заказ можно оформить прямо в корзине. Есть только один нюанс. От вас требуется только ввести контактный номер, все остальное оформление происходит по телефону.



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

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

Удачных продаж!

7 способов улучшить навигацию по каталогу интернет-магазина

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

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



1. Установите фильтры по всем отличительным особенностям товара

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

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

Threadless представляет клиентам поисковый фильтр по характеристикам.

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



2. Установите тематические фильтры

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

 Онлайн-магазин футболок Design by Humans предлагает поисковые фильтры по модным трендам, новинкам и популярности. Эта опция расположена в верхней части сайта и при желании может быть использована.

Хороший пример – фильтры по новинкам и трендам. «Новинка» необязательно подразумевает недавний выпуск товара, но также может указывать на новые добавленные на сайт вещи.

 На этом же сайте слева размещены и тематические фильтры по виду товара. Они позволяют покупателю выбрать коллекционный товар на различную тематику (будь то Звездные войны, Assassin’s Creed: Единство, Г.Ф. Лавкрафт) или же по категориям.

К тематическим фильтрам относится и поиск по коллекциям (например, Звездные войны), как это оформлено на Design by Humans.



3. Укажите количество результатов по каждому из критериев

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

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

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

 Важно, что при добавлении нового критерия в фильтр, информация обновляется. Например, покупатель выбрал категорию «Футболки» и в наличии увидел 378 размера S и 362 М. Если в фильтр добавить еще один критерий по цвету – «красные», то информация по наличию красных футболок размеров S и М должна обновиться.

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



4. Сделайте поиск по нескольким критериям одновременно


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

 Такую возможность предоставляет сайт BustedTees. Там покупатель может выбрать одновременно несколько цветов (например, черный или белый) или разные размеры.

Некоторые покупатели захотят выбрать в одном фильтре две и более характеристик (по цвету, цене, схожести товара). Хороший пример на BustedTees.com.

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



5. Указывайте уже примененные фильтры

Институт Баймарда (The Baymard Institute), исследовательский центр, опубликовал доклад о системах поиска на сайтах интернет-магазинов. Там рекомендуется указывать по порядку по критериям уже примененные фильтры, а в самом верху, над поиском, создать их контрольный список.

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

 Интерфейс сайта Jinx – хороший тому пример.

 Threadless неплохо поработал над указанием примененных фильтров.



6. Сделайте поиск удобным для пользователей мобильных устройств

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

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

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



7. Не дублируйте контент

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

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

Обзор 5 сервисов по продвижению на Behance

Подготовили для вас обзор услуг на рынке продвижения проектов на Behance. Всего рассмотрели пять различных сервисов. Описали плюсы и минусы каждого. В конце вас ждёт сводная таблица по всем сервисам и их услугам.


Dribe.org
Сайт: dribe.org
Работает с июня 2017

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

Подходит чтобы немного поднять активность на аккаунте. Чтобы подняться в ТОП придётся потратить много денег или времени.

Плюсы

  • все лайки от настоящих пользователей Behance
  • можно накрутить лайки без вложения денег, но придётся тратить личное время чтобы заработать поинты
  • работают не только с Behance, но и dribbble
  • гибкая система, можно накрутить хоть 10 хоть 1000 лайков
  • личный кабинет. Можно наблюдать за прогрессом продвижения в реальном времени
  • онлайн оплата

Минусы

  • если покупать лайки, то сильно дорого в сравнении с другими предложениями
  • нельзя накрутить просмотры, а это важный критерий при продвижении в ТОП

BeTop.me

Сайт: betop.me
Работает c июля 2017

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

Плюсы

  • личный кабинет. Можно наблюдать за прогрессом продвижения в реальном времени
  • онлайн оплата 12-ю различными способами от банковской карты до биткоина
  • 5 различных тарифов для продвижения от 100 до 2 000 лайков
  • есть пробное (бесплатное) продвижение на 10 лайков и 100 просмотров
  • в каждый тариф входят комментарии к работе от реальных пользователей Behance

Минусы

  • нельзя заработать поинты как на dribe.org и продвинуться за бесплатно.

Behance-Top

Сайт: http://behance-top.com/
Работает с февраля 2017

Один из пионеров в рунете по продвижению на Behance. Отличительной особенностью является бонус при заказе от 1 800 руб. дают подписку на Envato Elements.

Плюсы

  • есть пробное (бесплатное) продвижение на 10 лайков и 100 просмотров
  • при заказе от 1 800 рублей, получите подписку на Envato Elements

Минусы

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

Behance-promotion

Сайт: http://behance-promotion.ru/
Работает с декабря 2017

Практически полный аналог Behance-Top, но тут уже нет приятного бонуса в виде Envato Elements. Из особенностей – делают комментарии.

Плюсы

  • комментарии в каждом тарифе
  • гибкая система тарифов, как с комментариями так и без.

Минусы

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

Behancer.top

Сайт: http://ru.behancer.top/
Работает с апреля 2017

Еще один аналог предыдущих двух. Отличительных особенностей и преимуществ не обнаружено.

Плюсы

  • чуть более дешевые цены чем у всех остальных

Минусы

  • отсутствует личный кабинет
  • нет онлайн оплаты
  • чтобы сделать заказ нужно обязательно поговорить с менеджером
  • маленький выбор тарифов, всего 3 варианта
  • не делают комментарии к работам
Цены актуальны на 14.06.2018
2018   behance

С чего начать изучение Веб-дизайна. ТОП-5 советов

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

Что же такое Веб-дизайн?

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

А ведь веб дизайн – это совокупность проектирования и оформления интерфейса для оптимального взаимодействия пользователей с информацией на веб-сайте.

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

  1. Отсутствие специального образования. На сегодняшний день в нашей стране отсутствуют учебные заведения , которые выпускали бы полноценных дизайнеров, поэтому все дизайнеры стараются самостоятельно совершенствовать свои умения.
  1. Очень большой объем информации, которую очень сложно отфильтровать и выбрать действительно полезную и нужную.
  1. Отсутствие последовательности знаний. Существует огромное количество, статей, видео уроков и лекций, но необходимо это все собрать в единую систему, для лучшего усвоения материала новичками. И никакие курсы не смогут дать человеку полностью, тот необходимый уровень знаний, чтобы по окончанию обучения, человек стал действительно ПРОФИ. Ведь дизайн очень многообразен и дизайнер всегда старается себя «апгрейдить».
  1. Еще одна проблема заключается в том, что информация очень быстро устаревает. То, что работало 2 или 5 лет назад, сегодня практически не работает.

Что же необходимо знать, для того, чтобы создавать качественный веб-дизайн?

  • Программы;
  • Типографика;
  • Графика;
  • Психология;
  • Технологии;
  • Тренды
  1. На первом месте это – программы для создания сайтов. Это Adobe Photoshop CC либо Sketch для Mac OS. Знание данных программ в области веб-дизайна позволит быстро и качественно создавать макеты.
  1. На втором месте это – типографика. Это один из самых сложных предметов в дизайне, и является самой большой и частой проблемой у начинающих веб-дизайнеров. Типографика включает в себя работу с текстом, правильное его оформление, а так же взаимодействие текста с визуальным впечатлением сайта. Несет общий посыл сайта.
  1. На третьем месте по значимости это – графика. Ведь качественная работа с картинками и фотографиями делают действительно яркими и запоминающимися макеты, так сказать «лицо» дизайнера в портфолио, когда потенциальный заказчик судит вас как исполнителя. И если у вас будет грамотная типографика и оригинальная графика на вашем макете, то успех вам практически гарантирован.
  1. На четвертом месте можно выделить психологию. Ведь дизайнер должен знать азы психологии, чтобы понимать, как ведет себя пользователь на сайте, как реагирует на определенные сочетания цветов, на расположения элементов макета и на навигацию. Ведь только при грамотном расположении элементов, знании композиции, психологии дизайн и получается не только красивым, но и полезным. А это то, что нам нужно!
  1. Пятое место в нашем ТОПе занимают технологии. Это основы HTML, CSS и JS. То есть дизайнер должен быть немного фронтенд-разработчиком. Ведь для того чтобы создать макет, дизайнер должен понимать, как это будет воплощаться в верстке и как это будет работать в коде: анимация, какие скрипты можно использовать, как можно подать выпадающий элемент, а так же знать, какие элементы и как должны быть запрограммированы.

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

Как же начинающий веб-дизайнер может «добывать» знания?

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

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

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

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

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

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

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

Яркое резюме с инфографикой – составлять или нет?

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

Давайте разберемся, что же такое резюме с инфографикой?

Данный вид резюме состоит из красочных схем, таблиц и графиков. Появилось оно в России недавно и, по словам рекрутеров, попадается им не часто, примерно одно-два из тысячи обычных. Тенденция составлять такое резюме пришла к нам с Запада, где около 30% составляемых резюме – инфографическое. HR-специалисты уверены, что составлять инфографическое резюме следует только некоторым категориям соискателей, говоря, что не всем такое резюме принесет пользу.

Отрицательные стороны

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

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

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

Рекомендации

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

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

Итог

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

  • небольшая информативность об опыте кандидата;
  • отрицательное к нему отношение HR-специалистов из-за затрат времени на его прочтение.

Рекрутеры советуют составлять данный вид резюме следующим категориям соискателей

  • представителям творческих профессий;
  • молодым специалистам, не имеющим опыта.

9 онлайн-инструментов для создания инфографики и диаграмм

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


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

Инструменты для создания инфографики и диаграмм


1. Infogram

Этот бесплатный инструмент содержит более 30 различных типов диаграмм. Это популярная платформа, в которой создано более 800 тыс. диаграмм и инфографики.
 Вы можете использовать Infogr.am для создания инфографики с нуля, или вы можете импортировать существующие файлы CSV или XLS для упрощения процесса. Сайт также включает встроенные функции совместного использования и встраивания, чтобы вы могли убедиться, что ваша графика окажется в нужном месте.


2. Google Charts


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

3. Easel.ly


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


4. InfoActive

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


5. Piktochart

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


6. Visual.ly

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


7. Vennage


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


8. Creately

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


9. iCharts

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

Возможные ошибки в полиграфическом дизайне

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

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

Возможные ошибки

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

Ошибки в порядке подачи информации

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

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

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

Чтобы информация лучше воспринималась, текст отделяется пустыми полями и фото. Если одно или два предложения напечатаны на листке формата А4 24 или 28 шрифтом на тёмном или ярком блоке, то они обязательно привлекут внимание по сравнению с большим текстом, напечатанным 12 шрифтом.

Обратите внимание! При создании макета следует первоначально определить, какая информация будет главной, а какая второстепенной. Помните о золотой середине!

Следует максимально использовать свободное пространство и одновременно нельзя перегружать макет большим количеством текста.
Чему отдать предпочтение: тексту или картинкам?

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

Успех созданного рекламного продукта будет обеспечен в случае грамотного сочетания текста и изображений.

Правильное восприятие цвета

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

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

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

Как попасть в выставлено на Behance

Кураторы Behance – живые люди и отбирают работы для галерей они вручную.
Ежедневно дизайнерами публикуются сотни работ и естественно кураторы не смотрят все подряд. Экспериментальным путем удалось выявить, что кураторы, как правило, забирают в галерею (выставлено) работы из недельного топа

Чтобы попасть в недельный ТОП-10 по лайкам и просмотрам нужны примерно следующие показатели работы (данные актуальны на 2018 год):

  • Топ за неделю – общий: ~2,000 лайков, ~10,000 просмотров
  • Топ за неделю – веб дизайн: ~1,000 лайков, ~5,000 просмотров
  • Топ за неделю – любая другая категория: ~500 лайков, ~3,000 просмотров

Откуда взять такое большое количество лайков\просмотров для своей работы?

  1. Хороший буст для просмотров даёт лайк от известного дизайнера, у которого много подписчиков. Когда он лайкнет вашу работу, его подписчики увидят вашу работу у себя в ленте и тоже могут пройти посмотреть что же вы такое крутое сделали.
  2. Трафик из пабликов и личной страницы в социальных сетях.
  3. Воспользоваться сервисом продвижения, например betop.me


2018   behance
Earlier Ctrl + ↓