В этом цифровом мире спрос на веб-сайты электронной коммерции растет день ото дня, поскольку все предприятия полагаются на онлайн. А поскольку электронная коммерция конкурирует по всему миру, каждый хочет создать лучшую платформу.
И главное условие для создания лучшего веб-сайта электронной коммерции — разработать эффективный каркас.
Вайрфрейминг — это первый этап процесса проектирования веб-сайта. Цель вайрфрейминга — работать по-настоящему минимально, чтобы начать организовывать и выяснять поток страницы.
Это предварительный этап, прежде чем вы начнете беспокоиться о таких вещах, как шрифты и цвета. С вайрфреймингом вы позволяете себе работать очень быстро и генерировать множество идей.
Если вы думаете о собственном сайт электронной коммерции, следуйте этим рекомендациям. Здесь вы найдете необходимые советы и рекомендации по созданию каркаса для веб-сайта электронной коммерции.
Вайрфрейминг: лучшие практики и советы
Всегда начинайте создание каркаса, используя только ручку и лист бумаги. Вы можете начать с компьютера, и многие так делают. Но лучше делать только серые поля и использовать шрифт по умолчанию.
Когда вы пытаетесь правильно выровнять вещи или получить коробку точно правильного размера, именно тогда вы сосредоточены на этих мелких деталях. Тогда вы потеряете поток и не сможете генерировать быстрые идеи.
Таким образом, придерживаясь только ручки и бумаги, вы можете позволить себе по-настоящему запутаться и получить идеи. Давайте поговорим о вещах, которым вы должны следовать при разработке каркаса для веб-сайта электронной коммерции.
Знайте содержание вашего веб-сайта электронной коммерции
Прежде чем начать, вам нужно знать, какой контент будет на странице, которую вы разрабатываете. Ваша работа заключается в разработке информации, поэтому вам нужно знать, какая информация находится на странице. Информация, которую вам нужно донести, прежде чем вы сможете приступить к проектированию.
Это не означает, что вам нужно иметь точную копию, вам просто нужно иметь приблизительное представление об информации. О чем и сколько всего. Здесь я составил список некоторого общего содержимого веб-сайта электронной коммерции.
- Заголовок
- Био информация
- Нижний колонтитул
- Фото и названия для каждого поста
- Может быть, реклама
- Ссылки на социальные сети
- Панель поиска и подписка на рассылку
Используйте технику Crazy 8 для генерации идей
Чтобы начать генерировать идеи, вы можете использовать технику, известную как «сумасшедшие восьмерки». По этой методике вам нужно сложить лист бумаги на 8 разных частей, а затем сделать 8 различные идеи для каркаса как можно быстрее.
Вы можете рисовать как можно больше или меньше, как вам больше нравится. Иногда, если страница длинная, вам может понадобиться сделать четыре с одной стороны, а затем четыре с другой стороны. Это работает как метод разминки для вашего мозга. Дизайнеры всегда находят это увлекательным, потому что они начинают думать об идеях веб-сайтов электронной коммерции.
Есть только один очевидный способ упорядочить все. Но когда вы заставите себя думать о все большем и большем количестве понятий, вы будете удивлены тем, сколько идей вы только что прятали в своем уме.
Думайте о каркасе как о чертеже здания
Рассмотрите возможность создания план вашего веб-сайта электронной коммерции при каркасном построении. Цель вайрфрейма — создать базовый каркас для каждого экрана в вашем дизайне. Таким образом, вы можете просмотреть общий макет дизайна со своими клиентами.
Нарисуйте новый мокап
На самом деле не имеет значения, выглядит ли это так, будто это кому-то нарисовал ребенок; дело в том, что у вас есть свои идеи. Теперь вы знаете, что это значит, и у вас есть место для начала работы над дизайном. После этого этапа просмотрите 8 концепций и поставьте маленькую звездочку рядом с той, которую, по вашему мнению, стоит изучить.
Иногда я иду и рисую новый макет всех этих кусочков вместе. Но, как правило, на этом этапе вам нужно перейти на компьютер.
Какая программа вам нужна?
Чтобы создать каркас для веб-сайта электронной коммерции, программа не требуется. Все, что вам нужно, это старый добрый лист бумаги и что-то, на чем можно писать. Однако я предпочитаю использовать Форум от руки при создании каркасов.
Карандаши и бумага — это прекрасно, но от руки вы можете отправлять каркасы прямо клиенту. Представьте их в режиме реального времени, а также дайте им возможность делать заметки в том же документе. Это позволяет вам выполнять итерации и быстро доставлять.
Используйте приложение Sketch для создания каркаса вашего веб-сайта электронной коммерции
Вы можете использовать программу под названием Sketch, чтобы смоделировать ваши каркасы. Но здесь используйте простые серые поля и текст по умолчанию. Причина этого в том, что вам нужно будет показать своим клиентам множество дизайнов. Использование цветов или правильных значков или чего-либо еще все запутает.
Не делайте просто один каркас в Sketch. Сделайте столько, сколько вы чувствуете, что у вас есть идеи для ваших любимых частей этого процесса рисования. После этого желательно на нем поспать. Таким образом, вы сможете вернуться к этому со свежим умом и свежим взглядом, прежде чем перейти к следующему этапу.
Знайте цель ваших продуктов
При запуске каркаса вам нужно знать, чего должен достичь ваш продукт. Например, предположим, что вы создаете каркас простого экрана входа в мобильное приложение веб-сайта электронной коммерции. На этих экранах обычно есть несколько обязательных элементов, таких как поле имени пользователя и пароля, кнопка отправки, призыв к действию и т. д.
Но главная цель — заставить пользователя войти в систему. Перечислите требования, которые вы знаете, прежде чем приступить к фактическому созданию каркаса.
Попробуйте перечислить их в порядке приоритета или в порядке того, что наиболее важно для пользователя. Теперь, когда у вас есть свои требования, вы можете перейти к важной части.
зарисовка
Эскизы необходимы в вайрфреймах, потому что они позволяют вам быстро реализовать свои идеи. Если вы беспокоитесь, рисовать с помощью мыши будет сложно. Freehand позволяет довольно легко создать простой прямоугольник.
Вы можете просто удерживать клавишу Alt или Option при рисовании фигуры, и она сгладится. Это также работает с кругами, вы также можете удерживать сдвиги при рисовании, чтобы создавать прямые линии и даже играть с параметрами заливки и непрозрачности.
Как видите, создание каркаса не представляет особой сложности, когда речь идет о визуальных эффектах. В основном это блоки и текст, как и весь остальной Интернет. Разница в том, что за этим стоит мышление. Все, что создано в каркасе, предназначено исключительно для быстрой передачи ваших идей.
Лучшее устройство для создания каркаса вашего веб-сайта электронной коммерции
Вы можете использовать iPad Pro, Apple Pencil и приложение Concepts. В этом приложении у вас может быть неограниченный холст. И вы можете просто продолжать делать наброски и всегда перемещать страницу, чтобы получить больше идей.
Основные элементы, которые вы должны включить в свой веб-сайт электронной коммерции
Страница со списком продуктов является обязательной для любого веб-сайта электронной коммерции. Итак, вам нужно создать хорошую и привлекательную целевую страницу. Кроме того, есть несколько элементов, о которых следует помнить при создании каркаса. Они есть-
- Карточки товаров
- Фильтры
- Дизайн страницы с подробной информацией о продукте
- Высокое качество изображения
- Кнопка корзины
- Кнопка цены
- Детали описания продукта
- Кнопки оформления заказа
- Скидочные коды
Заключение
Когда вы создаете макет веб-сайта электронной коммерции, просто сосредоточьтесь на пользовательском опыте. На первом этапе только бумага и карандаш, а затем визуальная полировка.
Чтобы получить отличные впечатления от покупок в Интернете, следуйте этим рекомендациям. Просто помните, что правильная иерархия и выравнивание позволят легко просматривать страницы продуктов.
И используя Z-шаблоны в дизайне страницы также обеспечит вам удивительный пользовательский опыт. Всегда не забывайте ставить себя на место пользователей и думать о ключевых элементах информации. Это все, что касается вайрфреймов для сайтов электронной коммерции.
Опытный дизайнер возьмет 4-7 дней на создание каркаса. А для среднего дизайнера это может затянуться до 12-20 дней и более.
Каркас — это план, а мокап — это визуальная модель. Это означает, что когда вы придаете своим карандашным наброскам цифровую и цветную форму, они превращаются в мокапы.