Процесс UX-дизайна: как рисовать вайрфреймы — Веб-дизайн, часть 1

Как создать каркас веб-сайта? Как создать целевую страницу с нуля? Как сделать эскиз каркаса? Как разработать продающую целевую страницу для загружаемых продуктов? Как заниматься UX-дизайном, не переусердствуя? Что такое бумажное прототипирование? Вы можете называть это страницей захвата лидов, целевой страницей или страницей загрузки. Это страница, которая превращает холодную аудиторию в постоянных пользователей. И веб-дизайн должен быть безупречным, чтобы обеспечить эти конверсии! Встречайте: UX-дизайн! Наши целевые страницы сейчас… скажем так, не очень хороши. Поэтому в течение следующих нескольких недель на канале The Futur Academy г-н Бен Бернс поделится своим процессом редизайна целевых страниц на thefutur.com. В этом уроке по UX-дизайну он расскажет о своем простом процессе проектирования пользовательского опыта и о том, что может потребоваться для привлечения потенциального пользователя. Вот план Бена: ---------------- Прежде чем что-либо рисовать, я кое-что продумываю. Я пишу простой список на одной стороне листа, чтобы потом к нему возвращаться. И я всегда ориентируюсь на четыре отдельных пункта: 1. Наши цели 2. Цели пользователей 3. Вопросы, на которые нужно ответить 4. Эмоции, которые нужно вызвать Для каждого пункта я записываю три-четыре пункта. Это не обязательно должно быть что-то сложное, особенно если это наш первый вариант страницы. Первый вариант всегда будет основан на предположениях. По мере того, как люди будут взаимодействовать со страницей, мы всегда сможем её улучшить. Вернёмся к эскизу. Как только я всё спланирую, я начинаю набрасывать базовый макет. Первым делом всегда должны быть пересекающиеся цели владельцев сайта и пользователей. В данном случае, эта пересекающаяся цель — бесплатно скачать что-то. Поэтому я хочу отдать приоритет действию загрузки, которым в данном случае является форма, которую вы заполняете при скачивании этого ресурса. Я также хочу убедиться, что есть легко читаемое резюме для тех, кто не любит читать. Я знаю, что вы где-то там. Как только первая цель достигнута, я начинаю добавлять контент, который будет отвечать на второстепенные задачи. В нашем случае мы хотим рассказать пользователям, что это загрузка, и ответить на все их потенциальные вопросы. Также полезно помнить о том, какие ресурсы у вас есть. Например, я знаю, что мы только что сняли трейлер к этой загрузке, поэтому я хочу убедиться, что у меня есть место для этого видео. Есть несколько распространенных символов, которые я использую во время создания прототипов. Большие заголовки обычно пишутся, если я могу придумать запоминающийся заголовок. Узкие блоки — это меньшие заголовки. Текст обычно представляет собой группы строк. Видео представлены маленькими значками воспроизведения в блоках. Изображения обычно представляют собой блок с крестиком внутри. Кнопки — это квадраты с текстом внутри. Вы поняли идею. Вы можете примерно видеть, как веб-сайт собирается воедино, пока я делаю наброски. Как только я размещу весь контент на странице, я возвращаюсь и убеждаюсь, что все цели и вопросы решены. Я буквально начинаю отмечать выполненные пункты и подписывать эти разделы. Узнайте больше о Бене: @mrbenburns http://www.mrbenburns.com/ #uxdesign #webdesign #UX #UI #Wireframe === 👉Подписаться: https://goo.gl/vB9zoP 👉Посмотреть наш основной канал: https://goo.gl/F2AEbk Хотите углубиться в тему? Курсы по типографике, леттерингу, продажам и маркетингу, социальным сетям и бизнесу в сфере дизайна доступны здесь: https://goo.gl/bRt5qd Если вы полный новичок, рассмотрите возможность прохождения любого из этих базовых курсов по Adobe Creative Cloud от наших друзей из Bring Your Own Laptop: http://byol.me/thefutur — Нравится контент? Станьте постоянным участником за 5 долларов в месяц уже сегодня. https://goo.gl/nwekfL Наши рекомендуемые товары и список книг: https://kit.co/TheFuturIsHere Наборы и предложения: https://goo.gl/mSjuWQ Посетите наш веб-сайт: https://www.thefutur.com БЕСПЛАТНЫЕ ресурсы: https://goo.gl/Qh6gHr Субтитлы на китайском языке (мандаринский диалект) на UiiUii https://uiiiuiii.com/?s=the+futur — НАШИ ПАРТНЕРСКИЕ ССЫЛКИ Webflow: http://bit.ly/2EbET9l Retro Supply Co.: http://bit.ly/2GW8gzR Skillshare: https://goo.gl/YCo2uT Amazon: http://bit.ly/thefuturishere Creative Market: https://goo.gl/g4jlTE Design Cuts: http://bit.ly/2GSsAR3 При совершении покупки по любой из наших партнерских ссылок мы получаем небольшую комиссию без дополнительных затрат с вашей стороны. Это помогает нам в нашей миссии по предоставлению вам качественного образования. Спасибо. — Подкаст Future на iTunes: 🎙 https://itunes.apple.com/us/podcast/t... Spotify: 🎙 https://open.spotify.com/show/5K96ryZ... — Мы будем рады вашим письмам. Отправляйте их сюда: The Futur c/o Chris Do 1702 Olympic Blvd. Санта-Моника, Калифорния 90404 США — Ведущий – Бен Бернс Контент-директор – Мэтью Энцина Операторы – Марк Контрерас, Стюарт Шустер, Аарон Шекели,...