Сайт с нуля: планирование

Добрый день.

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

Итак, вот эти три способа:

  1. Заказать у студии / фрилансера / знакомого студента / сисадмина.
  2. Воспользоваться бесплатными и платными онлайн-сервисами Wix.com, Nethouse.com и так далее.
  3. Реально сделать самому.

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

Исследование

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

Как мы это узнаем?

Интервью с заказчиком, воображение, брэйнсторминг, анализ рынка, анализ маркетинговой стратегии и тд.

Здесь вам пригодятся все ваши навыки эмпатии чтобы понять заказчика и его аудиторию.

Результатом должна стать карта памяти, которая отвечает на вопросы: "Что важно показать аудитории?" и "Что хочет видеть на сайте его владелец?"

Для составления карт памяти я обычно использую coggle.it

Простой пример портфолио:

План и документация

Далее мы планируем свою работу. Без хорошего плана мы рискуем никогда не закончить. Из этого плана и вырастает ТЗ. Обычно я использую ручку и бумагу, но в последнее время перехожу на trello.com

Я делаю четыре столбца - Фичи, Дизайн, Разработка, Готово. Их может быть и больше, если вы работаете в команде.

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

Скетч, макет, дизайн.

Скетч - берем лист А4, и рисуем сайт. Текст обозначаем черточками, блоки = прямоугольниками, никаких деталей, только общее представление.

Представьте что вы видите сайт с расстояния 20 метров. Никаких деталей.

Обычно я делю лист формата А4 на 6 частей - две линии поперек и одна вдоль. И рисую 6 вариантов для мобильной версии. Так я отсеиваю действительно важные вещи. Затем я перехожу к планшетной и десктопной версии.

Не ограничивайтесь одной концепцией, попробуйте разные варианты. Здесь пригодится опыт веб-серфинга и разные дизайнерские сайты для вдохновения вроде dribbble и behance.

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

Затем, когда у вас есть примерное представление того, что вы будете делать, следует собрать картинки, шрифты, иконки в одном месте.

Для этого я использую Style Tiles

На сегодня все, спасибо за внимание.

Напишите в комментариях ваш процесс.

Яндекс.Метрика