4 этапа создания отличного веб-сайта (с шпаргалкой!)

Веб-сайт служит важным шлюзом для новых возможностей для бизнеса. Создание нового веб-сайта или его редизайн может оказаться непростой задачей. Проведя редизайн веб-сайта моей компании, я решил немного рассказать о нашем путешествии. Если вы подумываете о создании нового веб-сайта или изменении дизайна существующего, мы надеемся, что это поможет вам сделать ваше путешествие более плавным. Оценка Наш веб-сайт является для нас важной входной дверью для нового бизнеса. Поскольку мы являемся бутиком веб-разработки, то, как мы представляем себя в Интернете, многое говорит о нашей работе и о том, чего клиенты могут ожидать при работе с нами. Как только мы решили, что хотим создать новый веб-сайт, соответствующий нашему новому бренду, нам стало ясно, что мы должны идти вперед и показывать нашим клиентам и аудитории веб-сайт хорошего качества. Наша команда приложила много усилий и усилий на этапе подготовки, прежде чем приступить к работе. Мы начали с простого вопроса: зачем нам сайт или редизайн? Это отличный способ сосредоточиться на своих целях и не отвлекаться. Как только мы поняли, почему, мы приступили к процессу определения нашей целевой аудитории. Для кого мы создавали этот сайт. Очень важно четко понимать, кого вы пытаетесь охватить и что вы хотите, чтобы они знали о вашем бренде и работе. Затем мы начали думать о послании, которое мы хотели донести до этой аудитории, о том, как мы хотим, чтобы нас видели и, самое главное, о том, как мы можем доказать, что мы хороши в том, что делаем. Большая часть этого сообщения была продумана во время создания бренда (Посмотрите ), и нам пришлось передать это на новом сайте. , как мы создавали наш новый бренд Поскольку у нас уже было присутствие в Интернете, нам потребовалось некоторое время, чтобы оценить наш старый веб-сайт и составить список функций и аспектов, которые, по нашему мнению, работали хорошо, а также того, чего, по нашему мнению, не хватало. Во всем этом процессе также было очень важно следить за показателями конкурентов, чтобы попытаться понять, чем занимаются компании в нашей отрасли. Мы также просматриваем другие типы веб-сайтов в поисках ссылок и вдохновения. Это дало нам ценную информацию и помогло избежать повторения ошибок или упущения важных функций. Последним шагом этого этапа подготовки стал список функций и возможностей, которые мы хотели иметь на нашем веб-сайте. Это было похоже на создание списка желаний, в котором мы могли делать все, что хотели. Позже в списке были расставлены приоритеты, и мы выбрали функции, которые ОБЯЗАТЕЛЬНЫ, и те, которые ХОРОШО ИМЕТЬ, которые можно было бы реализовать позже. Важно в первую очередь сосредоточиться на наиболее важных элементах. Некоторые из этих шагов были сделаны вместе со всей командой. Будучи небольшой командой, мы хотели, чтобы каждый был в той или иной степени вовлечен в этот процесс. После этой первой оценки мы начали разделять и властвовать, и у нас были преданные своему делу члены команды, ответственные за преобразование нашего нового веб-сайта в реальность. Дизайн Мы были рады погрузиться в процесс проектирования нашего веб-проекта. UI/UX-дизайн — важнейший аспект любого веб-проекта. У нас была многопрофильная команда, но звездой шоу был дизайнер, ответственный за создание визуального представления сообщения, которое мы хотели донести до нашей аудитории. Дизайнеру было важно четко понимать потребности и ожидания проекта, чтобы визуально передать наше послание и соответствующим образом структурировать контент. Мы стремились к лаконичному, привлекательному дизайну с правильным тоном. На этом этапе проекта мы выполнили следующие шаги: С самого начала мы приняли подход, ориентированный на пользователя. Мы сосредоточились на том, как наша целевая аудитория будет воспринимать нас и взаимодействовать с нами. Вот почему мы начали с работы над информационной архитектурой, определившись с необходимыми страницами, разделами и компонентами и создав первый черновой вариант текста. Затем мы создали низкокачественные каркасы, чтобы обеспечить грубое представление макета и функциональности с низкой точностью. Это позволило нам тестировать и экспериментировать с идеями, прежде чем тратить слишком много времени и усилий на дизайн. На этом этапе мы также рассмотрели общий поток пользователей. Этот этап имел решающее значение, поскольку он заложил основу для всего спектра используемых компонентов: создания системы дизайна. Мы создали библиотеку с помощью , которая включала шаблоны проектирования, рекомендации и примеры. Эта библиотека была единым источником истины, обеспечивая согласованность между всеми элементами пользовательского интерфейса и закладывая основу для масштабируемости при внедрении новых компонентов. Figma После того, как была определена система дизайна, мы создали макеты в High Fidelity. Мы применили пользовательский интерфейс к созданным ранее каркасам в стиле lo-fi. На этом этапе дизайн был полностью протестирован на соответствие требованиям доступности, и мы сделали более точные выводы относительно отображения контента. На протяжении всего процесса мы использовали , что облегчило сотрудничество с командой и выполнение итераций. После нескольких итераций у нас была оптимальная версия, над которой могли работать наши разработчики. Figma Разработка Мы сосредоточились на выборе технологического стека и реализации проектов на этапе разработки проекта. Мы работали спринтами на основе бэклога продукта и пользовательских историй, созданных нашим менеджером проекта. Выбор технологического стека На этапе проектирования мы исследовали, какие технологии лучше всего подходят для веб-сайта, который мы хотели создать. Наши разработчики смогли определить это по результатам предыдущих этапов. Выбор правильного технологического стека стал более важным, чем когда-либо, в современном мире, поскольку доступно множество вариантов. Мы учитывали различные критерии, такие как требования проекта, опыт команды, наличие ресурсов, затраты, производительность, безопасность и масштабируемость. Нам нужен был простой, быстрый и красивый сайт для этого проекта. Мы применили модульный подход, разбив компоненты, функции и функциональность веб-сайта на более мелкие, многократно используемые компоненты. Этот подход позволил нам повторно использовать компоненты в разных частях веб-сайта, упрощая сотрудничество между разработчиками и дизайнерами, упрощая тестирование и поддержку того, что было разработано, и, в конечном итоге, позволяя повысить производительность и сократить время загрузки страницы. Наши разработчики выступали за , универсальный веб-фреймворк для быстрых, ориентированных на контент веб-сайтов. Они с нетерпением ждали возможности опробовать самую быструю инфраструктуру, ориентированную на контент. Внимание нашей команды привлекли три вещи: рендеринг на стороне сервера, результаты производительности и гибкость. Astro При создании простого веб-сайта нам не требовалась полноценная система управления контентом (CMS), но мы хотели дать возможность нетехническим членам команды работать над веб-сайтом. Мы тщательно исследовали различные варианты CMS и в конечном итоге выбрали Sanity из-за ее надежных функций и простоты использования. также была отличная документация и очень щедрая бесплатная версия. У Sanity Помимо Astro и Sanity, мы также решили использовать для нашего проекта . Ну, мы всегда так делаем. Бесшовное развертывание и возможности хостинга Netlify обычно являются нашей основной сетью доставки контента (CDN). Мы также использовали различные библиотеки для анимации, о которых более подробно мы рассказали в другой статье блога (скоро). Netlify Одним из аспектов улучшения стала форма, которую мы создали для потенциальных клиентов, чтобы они могли связаться с нами. Мы использовали форму Netlify, которая оказалась не лучшим вариантом из-за проблем с формами с Astro. Мы нашли решение (исправление) и создали единую страницу для нашей контактной формы. Мы все еще думаем, как изменить это в будущем. Процесс развития Прежде чем приступить к этапу разработки, менеджер проекта создал журнал невыполненных работ по продукту с подробной информацией обо всех функциях и функциях, которые должна создать команда. Эти пользовательские истории сделали процесс разработки гладким и прозрачным. Прежде чем создавать веб-сайт, команде пришлось расставить приоритеты в отношении функций и возможностей, которые будут частью первого выпуска веб-сайта. Для репозитория кода мы использовали а также его панели управления проектами и функции планирования спринта. Обычно мы выбираем GH в качестве системы контроля версий, но мы начали использовать и нам нравится, что он подходит для управления проектами. GitHub (GH), Notion Projects Мы приступили к реализации проектов. Мы следовали гибкой методологии и работали спринтами, чтобы гарантировать, что мы движемся по графику и достигаем результатов в установленные сроки. Одно небольшое замечание: это был внутренний проект, и нашим главным приоритетом были проекты наших клиентов. Это означает, что спринты начнутся вскоре после того, как наша команда отдохнет от других проектов. Обычно мы так не работаем, но именно так нам удалось это сделать, и мы получили урок, который не следует повторять. Еще одним важным моментом в обеспечении прозрачности и гибкости всего процесса разработки было наличие промежуточного звена с самого начала проекта. Все участники проекта имели к нему доступ, и мы могли видеть достигнутый прогресс, оставлять отзывы, а также вносить изменения и небольшие адаптации, когда мы чувствовали, что это необходимо. На этапе разработки маркетинговая команда смогла начать вставлять контент. Это помогло им привыкнуть к здравомыслию и способствовало получению более реалистичных раундов обратной связи. В целом, этап разработки представлял собой совместную работу всей команды, работавшей вместе для достижения целей проекта. Гарантия качества Во время разработки один или два разработчика тестировали каждую функцию и функцию. Весь код прошел проверку кода, и, в конце концов, мы провели финальный спринт для тестирования и обеспечения правильной работы веб-сайта. Тестирование удобства использования и доступности было проведено еще на этапе проектирования, как описано выше. Для общих тестов мы использовали пользовательские истории и критерии приемки, созданные нашим менеджером проекта. Функциональное тестирование: убедитесь, что все функции работают должным образом. Тест производительности: проверьте скоростную нагрузку и другие показатели с помощью Lighthouse. Межбраузерное тестирование и тестирование на нескольких устройствах: протестируйте веб-сайт в различных веб-браузерах (например, Chrome, Firefox, Safari, Edge) и устройствах (настольных компьютерах, мобильных устройствах, планшетах), чтобы убедиться в совместимости и единообразии взаимодействия с пользователем. Для этого мы использовали . Их продукт очень интуитивно понятен в использовании и позволяет проводить множество тестов. BrowserStack Подготовка к запуску Мы были готовы запустить веб-сайт по промежуточной ссылке, но прежде чем приступить к этому, нужно было тщательно продумать две важные вещи: перенаправление на новый домен и SEO. Поскольку мы планировали сменить домен, решающее значение имело обеспечение того, чтобы наш SEO-рейтинг не пострадал. Поэтому мы решили использовать 301 редирект, чтобы информировать поисковые системы и браузеры о том, что исходный URL-адрес был навсегда заменен новым. Вот что мы сделали: Список всех страниц текущего сайта: Если структура URL-адреса страницы осталась прежней, убедитесь, что перенаправление 301 работает. Если URL-адрес старой страницы отсутствует на новом веб-сайте, создайте перенаправление на наиболее подходящую страницу. Перечислите страницы, проиндексированные в Google, чтобы убедиться, что для всех из них установлены перенаправления. Используйте Netlify, чтобы перенаправить все, следуя инструкциям в их . Документация Netlify Сообщите Google об изменении в консоли. инструмент. Изменение адреса Попросите Google переиндексировать новый домен, чтобы старые страницы не появлялись. Это было сделано непосредственно в консоли Google, следуя инструкциям, доступным в Документация консоли Google. И последнее, но не менее важное: мы нашли время поработать над тем, чтобы убедиться, что мы рассмотрели лучшие практики для лучшего SEO-рейтинга и определили, что необходимо улучшить. Маркетинговая команда позаботилась о следующем: Чтобы оптимизировать новый веб-сайт по релевантным ключевым словам, стремящимся занять более высокие позиции в результатах поисковых систем и привлечь органический трафик, мы выполняем поиск по ключевым словам с использованием таких инструментов, как Google Keyword Planner или SEMrush, чтобы обнаружить популярные и менее конкурентоспособные ключевые слова. Мы постарались максимально оптимизировать мета-теги заголовков и мета-описания на каждой веб-странице, включая соответствующие ключевые слова и убедительные призывы к действию, чтобы побудить пользователей переходить по страницам результатов поисковых систем (SERP). Обеспечено, чтобы URL-адреса были чистыми, краткими и включали целевые ключевые слова. Замещающий текст: укажите описательный замещающий текст для изображений, используя при необходимости ключевые слова. Подтвердите оптимизацию скорости страницы (с тем стеком, который мы использовали, здесь было трудно не получить отличный результат). Результат Что ж, это был долгий путь, прежде чем у нас появился наш веб-сайт. Но знаете что? Работа продолжалась и после запуска. Первый этап стал прочной основой для того, чего мы хотели достичь. Построение его на основе модульного подхода также дало нам возможность повторять, изменять и адаптировать веб-сайт к новым тенденциям и потребностям. Мы довольны результатом и гордимся тем, как мы сюда добились. Мы надеемся, что, поделившись нашим опытом, вы узнаете, чего ожидать при создании нового веб-сайта или его редизайне. Подводя итог всему, чем мы здесь поделились, мы подготовили небольшую шпаргалку, чтобы вы могли использовать ее в своем проекте. Также опубликовано . здесь