Процесс разработки веб-сайта

Процесс разработки веб-сайта

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

Брифинг

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

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

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

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

Мудборд

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

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

Как создавать такие мудборды? Делайте это в той программе, которая вам наиболее удобна. В настоящее время я использую Keynote, потому что он позволяет легко добавлять графику и работает очень быстро.

Наброски и построение структуры страницы

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

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

Мокапы страниц

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

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

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

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

Каркасы в Figma. Вы можете проверить редактируемую версию здесь

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

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

Этап макетов заканчивается их проверкой заказчиком. Вместе мы определяем, соответствует ли данная структура требованиям или требует некоторых исправлений.

Дизайн сайта

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

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

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

Передача файла

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

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

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

Передача страницы

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

Маркетинг