Графика продукта 6 способов сделать изображения более информативными
Веб-дизайнеры стали очень ловкими с маркетинговыми методами. Соблазнение содержания страницы всегда хорошо, но когда дело доходит до привлечения внимания посетителей, изображения являются наиболее популярной формой медиа. Они не требуют звука, как демо-видео, и они могут быстро передать важную информацию в течение нескольких секунд. Это может показаться простым, но есть несколько заметных методов для создания информативных изображений на веб-сайтах.
К ним относятся ярлыки функций, снимки экрана крупным планом, сравнение цен и другие мелкие детали. Веб-дизайнеры могут использовать информационную графику для моделирования новых приложений, программного обеспечения, видеоигр или многих других продуктов! Хотя чаще всего вы видите эти методы, используемые в различных областях техники.
Ознакомьтесь с приведенными ниже идеями, где мы предлагаем не только советы, но и реальные примеры красивой графики продукта, заполненной отличной информацией..
1. Разверните ваш контент
Информационные изображения не должны использоваться вместо хорошего содержимого веб-страницы. Вместо использовать образы, чтобы расширить ваши ключевые моменты а также проиллюстрировать их ясно для ваших посетителей. Один из лучших способов сделать это создание небольшой демонстрации, чтобы выделить важные области учебника. С несколькими информативными графиками и скриншотами намного проще поддерживать интерес читателя на каждом этапе..
Когда вы пытаетесь продемонстрировать учебник по программному обеспечению (например, учебник по Photoshop), может быть трудно передать сообщение в письменный текст. Посетители высадятся на вашей статье и сразу же начнут подсознательно судить материал за доли секунды. У Web Designer Wall есть фантастическое руководство по созданию скругленных изображений CSS3, сопровождаемых удобной графикой. Это включает в себя некоторые метки и крупный план эффекта.
На оригинальной странице статьи это изображение добавляет намного более ясную картину к вашей голове к тому, что вы будете создавать. Автор добавил небольшую демонстрационную ссылку, но почему бы не включить некоторые демонстрационные изображения? У вас гораздо больше шансов привлечь внимание с помощью правильно обозначенного демонстрационного снимка..
Пробовать не добавляйте изображения только ради медиа контента в вашем посте. Если вы можете объяснить свои методы или рассуждения без изображения, начните здесь сначала. Только после того, как вы оглядываете свою веб-копию, вы можете подумать о повторении некоторых точек в подробном графическом изображении. В частности, вы можете найти учебник требует больше визуальных подсказок по мере увеличения сложности. Два примера могут включать создание базы данных веб-сайта или набора данных таблицы.
2. Выделите заметные особенности
Поскольку каждая часть программного обеспечения / технологии будет иметь так много функций, почти невозможно объяснить каждый бит. Не только это, но очень маловероятно, что вашим посетителям будет интересно прочитать более 20 ярлыков на вашей информационной графике.. Придерживайтесь самых интересных функций а также использовать ярлыки, чтобы объяснить немного более подробно.
При написании веб-копии содержания вашего ярлыка избегать скучных высказываний когда возможно. Если посетители смотрят последнюю версию вашего приложения, они могут не беспокоиться об изменениях цветовой схемы. Как это повлияет на их ежедневный рабочий процесс? А может быть выделить то, что им выгодно, как новая интерфейсная панель или многопользовательское подключение. Обычно это должно быть абстрактные особенности который вы не можете увидеть просто “Ищу” на продукт.
Наличие такого ярлыка для прямого объяснения этих функций обеспечит наиболее обильный ответ. Посетители почувствуют, что к ним относятся как к умным, зрелым покупателям, способным принимать собственные решения. Если им действительно нравятся ваши функции, это дает больший толчок к приобретению вашего программного обеспечения или продукта..
Ниже приведен пример со страницы обновления Mozilla Firefox..
Вы можете видеть, что дизайнеры использовали пунктирные изогнутые линии, чтобы указать на ярлыки и новые функции. Это на самом деле фоновые изображения, расположенные абсолютно внутри контейнера ДИВ. Удивительно, что весь текст метки также написан внутри HTML-тегов (не только одно большое изображение).
Я чувствую, что этот метод удобен не только для роботов-гусеничных роботов Google, но и для мобильных пользователей, которые обычно не могут получить полную веб-страницу..
Также обратите внимание, как функция Панорама слева предлагает небольшой “Учить больше” ссылка на сайт. Это, возможно, лучшая практика, которую вы можете использовать при создании информационной графики! Если у вас есть альтернативные страницы или привязки на той же странице, ваши посетители могут щелкнуть эти ссылки, чтобы узнать больше о сложных функциях.
Помните, что информативная графика используется для простого отображения тизеров и функций продукта для ваших посетителей. Так что, хотя вы ограничены в пространстве вокруг графика, вы можете всегда предлагайте возможность узнать больше на внешней странице.
3. Простые, ненавязчивые ярлыки
Этикетки действительно самый важный аспект в создании информативной графики продукта. Посетителям, скорее всего, понадобится понять различные области вашего продукта, программного обеспечения, веб-сайтов, мобильных приложений и т. Д. К сожалению, использование таблиц и маркированных списков может зайти так далеко. Когда вам действительно нужно объяснить особенности продукта, важно выбрать горячие точки для маркировки.
Компьютеры Apple, возможно, лучший пример упрощенных деталей этикетки. Вы можете заметить эти точные приемы на их графике при просмотре планшетов, ноутбуков или печально известного iPhone. Их характеристики и технические характеристики, как правило, такие же, как у других крупных производителей компьютеров. Все же их графические модели настолько нетронуты, что продукты практически продаются сами.
Обратите внимание, что когда вы ломаете процесс, это намного проще, чем вы думаете! Графика продукта - это только стандартная часть общего дизайна сайта. Даже если вы продаете удобрения, простыни или торговые карточки, вы, вероятно, сможете эффективно использовать эти методы маркировки. И хотя у Apple есть действительно упрощенная информативная графика, они не единственная компания, которая делает это. Пытаться В поисках бизнеса в вашей нише чтобы увидеть, размещают ли они какие-либо модные информационные ярлыки или рекламные ролики на своем сайте.
4. Изображения с динамическим контентом
Некоторым веб-разработчикам может быть недостаточно просто создать маркированную графику вашего программного обеспечения. Может быть много уникальных функций, которые вы хотите просмотреть, но которые содержатся в небольшой части вашей веб-страницы. Можно построить серию вводных шагов ведение посетителей на протяжении всего небольшого демонстрационного продукта.
Newsberry элегантно иллюстрирует пример этого. На их домашней странице вы увидите блок с небольшой мини-навигацией внизу. Они включают в себя 5 шагов по процессу с различными скриншотами и некоторыми сопроводительными текстами. Даже если вы не знаете, для чего используется Newsberry, их вводный контент объясняет вещи очень четко. Вам даже предлагают несколько демонстрационных ссылок на протяжении всей серии слайдов..
При перемещении по их содержимому вы должны заметить, что многие слайды содержат скриншоты внутри небольшого окна браузера. Этот эффект на самом деле очень просто имитировать! Вам просто нужно найдите изображение для использования в качестве фонового изображения и измените размеры скриншотов, чтобы уместить их внутри. Конечно, этот эффект не будет работать для каждого продукта, но это хороший способ создавать экраны из веб-приложения..
5. Очистить скриншоты и фотографии продуктов
Можно включить все лучшие этикетки и функции для ваших продуктов, но при этом упустить продажи. скриншоты и фотографии, которые вы выбираете для своей графики, в конечном итоге так же важны, как и все более мелкие детали. В Windows и Mac OS X есть способы делать скриншоты всего вашего рабочего стола с помощью сочетаний клавиш. Используя этот метод в сочетании с некоторым временем в Photoshop, вы можете накапливать очень интересные демонстрации функций.
Если ваш продукт очень запутанный, вы должны попытаться собрать несколько разных изображений. В приведенном выше примере с веб-сайта Tweetbot используются синие кружки для обозначения касания в приложении. Вместо одного скриншота с множеством надписей рассмотрите возможность использования небольшой галереи изображений jQuery для объединения 3-5 различных графических изображений. Это дает вам больше возможностей сосредоточиться на разных точках зрения продукта в то время как посетителям предлагается гораздо более богатый опыт.
Когда вы делаете снимок со своего ПК или смартфона, изображение всегда сохраняется с увеличением 100%. Редакторы изображений, такие как Photoshop, могут изменять их размер, но они часто теряют детали. Итак, как вы можете поместить такую графику в свой маленький сайт? Один из лучших методов увеличение в котором вы уменьшаете масштаб приложения и создаете увеличенные фрагменты из наиболее важных частей. Этот метод чаще встречается в программном обеспечении, чем в физических продуктах. Ниже я подробно описал процесс проектирования..
6. Создание эффекта «Zoom Lens»
Я буду создавать шаги для создания эффекта увеличительного стекла в Adobe Photoshop. Если вы используете другой графический редактор, вы, скорее всего, можете выполнять те же задачи, но меню и команды будут отличаться.
Один из лучших примеров этого метода - на домашней странице приложения Things for Mac. Графическое изображение имеет уменьшенное, поэтому приложение будет идеально вписываться в страницу вместе с небольшой тенью. Однако над некоторыми важными областями вы заметите круг с внутренним содержимым, намного большим. Они даже добавили белое внутреннее свечение, чтобы оно появилось как преломленный свет, сияющий сквозь линзу.!
Бонус: учебник по эффекту "Zoom Lens"
Чтобы начать, сделайте снимок экрана, который вы хотели бы использовать для своей графики. Я взял быстрый экран домашней страницы Hongkiat. Я собираюсь обрезать только окно браузера и изменить размер до 700px. Вы должны изменить ширину, чтобы она соответствовала содержанию вашего сайта. Теперь создайте новый слой поверх этого фона и сделайте круглое выделение, удерживая Shift, чтобы сохранить его пропорциональным. Заполните любым цветом, который вы хотите.
Шаг 1
Удерживая выбранный круг, измените% заполнения на панели слоев на 0%. Под слоем FX добавьте черный штрих 1px-2px и белое внутреннее свечение. Вы можете уменьшить непрозрачность для менее белого освещения.
Шаг 2
Сохраняя выбранный круг, переместитесь на фоновый слой и нажмите Ctrl (Для пользователей Mac это команда или клавиша cmd.) + c, чтобы скопировать. Затем создайте новый слой над фоном, но под увеличительным кругом и вставьте. Вы также можете просто нажать Ctrl + J, чтобы продублировать новый слой только с выбранным тактом..
Нажмите Ctrl + T, чтобы открыть инструмент преобразования. Теперь масштабируем новый дубликат слоя, удерживая сдвиг держать все пропорционально и альт держать центр неподвижным.
Шаг 3
Нажмите Ctrl и щелкните значок слоя с увеличительным стеклом, чтобы снова сделать выбор. Обратите внимание, что вы все равно должны выделять дублированный фоновый слой на панели слоев (тот, который находится прямо под лупой), что означает, что он будет иметь светло-синий фон.
Нажмите Ctrl + Shift + i, чтобы инвертировать текущий выбор. Теперь нажмите «Удалить», чтобы убрать лишний мусор из нашего масштабированного скриншота. Чтобы добавить немного эффекта, откройте меню эффектов слоя, чтобы добавить небольшую тень. Вы также можете нарисовать тонкую 1px вертикальную линию и использовать фильтр Liquify (Фильтр> Liquify) создать маленькую ручку!
Заключение
Чтобы создать фантастическую графику продукта, вы должны помнить основы. Посетители просто хотят понять, что вы пытаетесь продать им! Самый простой способ донести эту информацию - это серия снимков экрана или отдельная графика. Метки - это всего лишь вторая часть этой головоломки, где вы можете выделить наиболее важные наборы функций..
Когда вы соберете все эти методы вместе, вы, вероятно, начнете замечать общую картину. Загрузки и покупки будут стремительно расти - особенно если вы разместите свою графику вперед и в центре на своей домашней странице. Эти методы идеально подходят для графических и веб-дизайнеров, чтобы начать работу в области дизайна продукта. Мы подробно изложили несколько абстрактных идей, но мы хотели бы услышать ваши мысли в области обсуждения ниже.!
