Создание дизайна сайта на основе модулей: пошаговая инструкция
Модульный веб-дизайн — это подход к созданию веб-страниц, при котором используются готовые компоненты — модули. Они ускоряют процесс создания сайта, поскольку дизайнер не придумывает каждый элемент с нуля, а использует повторно уже готовые.
Александр Васильев
Дизайнер*
В статье дизайнер Александр Васильев разбирает, когда удобно использовать модули и как спроектировать страницу на их основе.
Содержание:
Что такое модули
Когда использовать модули в веб-дизайне
Как выстроить страницу на основе модулей
Что дальше
Памятка по построению страницы на основе модулей
Что такое модули
Любой сайт состоит из модулей — повторяемых элементов, которые лежат в основе композиции страницы. Например, в каталоге интернет-магазина модулем будет карточка товара, а на лендинге в блоке с отзывами — карточка с впечатлениями пользователей.
Примеры модулей
Можно сравнить сайт со зданием и представить, что каждая квартира — это отдельный модуль, а этаж — совокупность модулей.
Роль комнат на сайте выполняют более мелкие группы элементов: связка заголовка и текста, кнопка с текстом или круглый шейп с иконкой сердца, как на иллюстрации ниже.
Сайт, как и здание, состоит из этажей и квартир — модулей.
Когда использовать модули в веб-дизайне
Модули удобнее всего использовать там, где много однотипного контента. Например, в интернет-магазинах, блогах, сайтах-портфолио. Модули создают систему, которая помогает структурировать контент и избавляет от необходимости каждый раз придумывать что-то новое.
Чем меньше различных вариантов модулей используется на сайте, тем проще поддерживать его актуальность, создавать новые страницы и наполнять их контентом.
Как выстроить страницу на основе модулей
Разберём алгоритм построения веб-страницы на основе модулей на примере портфолио фотографа.
Шаг 1. Постройте сетку
Сетка — вертикальные и горизонтальные линии, разделяющие страницу на прямоугольники.
Она определяет, как в целом будет выглядеть макет и где будут расположены отдельные элементы: заголовки, тексты, изображения. Сетка облегчает выравнивание элементов, добавление новых и поддержку страницы в дальнейшем.Самая распространённая сетка в веб-дизайне состоит из 12 колонок. Она же по умолчанию используется в Тильде. 12 колонок можно поделить на 2, 3, 4 и 6 равных частей. Благодаря этому сетка получается гибкой и позволяет разместить на этаже как чётное, так и нечётное количество элементов. Чем больше контента, тем более детализированной должна быть сетка.
Пример страницы с 12-колоночной сеткой
После выбора количества колонок нужно определиться со значением gutter — межколоночного расстояния. Его значение будет зависеть от того, насколько плотной вы хотите сделать вёрстку. Маленький gutter в 10 или 20 px — более плотная и напряжённая вёрстка. Большой gutter в 40 и более пикселей — более воздушная и невесомая.
Шаг 2. Продумайте, сколько модулей будет на этаже
После настройки сетки создаётся прототип страницы с использованием простых фигур.
Начнём с построения этажа, то есть определимся, сколько модулей нужно расположить в одном ряду. Количество модулей будет зависеть от количества контента: чем его больше, тем больше будет модулей на одном этаже. Например, при создании сайта начинающего фотографа нужно предусмотреть, что работ у него немного, поэтому изображения можно показать крупно — либо во всю ширину контентной области по одному на этаж, либо по 2 картинки в ряд. Если в портфолио много работ, тогда в одном ряду следует разместить большее количество фотографий, например, 3–4. Конечно, это не железное правило, а рекомендация.
Этаж портфолио, состоящий из четырех модулей
Шаг 3. Спроектируйте цикл
Мы определились, что один этаж портфолио будет состоять из четырёх модулей одинаковой ширины, но разной высоты для более динамичного ритма. Дальше нужно изобразить цикл — рисунок из нескольких этажей. Для этого используйте фигуры, нарисованные на предыдущем шаге, и расположите их в разном порядке.
Пример цикла
Шаг 4.
Расставьте композиционные паузы
Если объект окружён воздухом, всё внимание будет направлено только на него. Поэтому использовать композиционные паузы нужно там, где хочется выделить элемент.
Слева — композиция без пауз, справа — с композиционными паузами.
В примере ниже цикл выглядит так: всего четыре этажа, на каждом этаже четыре модуля, на втором и последнем — композиционные паузы (одна на втором этаже и две на четвёртом). В следующем цикле можно менять положение композиционных пауз внутри этажа. Так ритмический рисунок меняется, но структура остаётся неизменной.
Два цикла с разными композиционными паузами
Шаг 5. Постройте и протестируйте модуль
Мы построили каркас, но сейчас это просто набор прямоугольников.
Начинаем проектировать наш модуль в деталях. Мы должны сделать его гибким, удобным, выдерживающим практически любой контент.
Что нужно для построения модуля:
- определиться с контентом внутри модуля,
- расставить контент так, чтобы не было слабых мест,
- протестировать модуль разной шириной и с разным количеством текста.
- фотография,
- название,
- дата съёмки,
- место съёмки.
Теперь можно выстраивать модуль. Контент расставить нужно так, чтобы предусмотреть его изменение. Например, если название фотографии будет не в две строки, а в три. Для этого у текста нужно выставить правильное межстрочное расстояние, чтобы строки не налипали друг на друга. При этом оно должно быть меньше, чем внешние отступы.
Тестовые варианты внешнего вида модулей для портфолио фотографа
Протестируйте разные варианты модулей, изменяя ширину и высоту изображения, расположение текста.
Затем выберите финальный вариант.
Финальный вариант модуля
Шаг 6. Заполните этажи контентом на основе придуманного ранее каркаса, алгоритма и пауз
Подготовительная работа проделана — можно работать с контентом: добавить тексты и фотографии. Напомним, что в нашем примере цикл состоит из четырёх этажей по четыре модуля. На втором и четвёртом этажах находятся композиционные паузы, в последующих циклах их расположение внутри этажа может меняться.
Финальный вариант портфолио фотографа, построенного на основе модулей
Что дальше
После построения основного блока сайта можно переходить к остальным: первому экрану, футеру и прочим необходимым элементам страницы. Когда есть основа, по ней легко выстроить остальной контент.
Модули — это предсказуемая вёрстка и предсказуемое наполнение. Когда есть понятный цикл, дизайнеру удобно работать с сайтом, а редактору или клиенту легко его наполнять. Если наполняя очередной этаж, пользователь не задаёт вопроса: «а что мне тут поставить: две картинки или три», — модульная система работает.
Её суть в том, чтобы упростить взаимодействие с сайтом на всех уровнях: для дизайнера, владельца сайта, контент-менеджера и конечного посетителя.
Памятка по построению страницы на основе модулей:
Построить сетку
Продумать, сколько модулей будет на этаже
Спроектировать цикл
Расставить композиционные паузы
Построить и протестировать модуль
Автор: Александр Васильев
Иллюстрации, дизайн и верстка: Алексей Ларионов, Мария Белая
Если материал вам понравился, поставьте лайк — это помогает другим узнать о нем и других статьях Tilda Education и поддерживает наш проект. Спасибо!
*Компания Meta Platforms Inc., владеющая социальными сетями Facebook и Instagram, по решению суда от 21.03.2022 признана экстремистской организацией, ее деятельность на территории России запрещена.
Читайте также:
Частые ошибки дизайна сайта
Оформление сайта — правила и требования работы с текстом и изображениями
Впечатление о сайте — что повышает доверие пользователя в веб-дизайне
Визуальная иерархия сайта: оформление и организация контента
Навигация по сайту — примеры как сделать навигацию удобной
Как написать текст для лендинга — создание текста для landing page
Шрифт для сайта — как выбрать или поменять шрифты
Как создать сайт.
Пошаговое руководство
Создание Landing Page
Бесплатный онлайн курс, который научит создавать эффективные посадочные страницы
Интернет-маркетинг с нуля
Курс, который научит вас продвигать свой сайт
Дизайн в цифровой среде
Теоретический курс Никиты Обухова по веб-дизайну
Анимация в вебе
Бесплатный учебник по веб-анимации с примерами и правилами использования
Создание дизайна сайта в Figma на реальном примере. Материалы урока
Всем привет, друзья! Сегодня мы создадим дизайн многостраничного сайта в Figma на реальном примере. На данной странице вы можете скачать материалы курса, посмотреть результат и ознакомиться со всеми используемыми инструментами.
Смотреть урок на YouTubeМатериалы курса, готовый результат: Скачать
Полезные материалы и ссылки:
- Сайт Figma: Figma Home
- Программа «Pencil» для создания схем и прототипов: Скачать (Win)
- Создание слайдера и посадка на Winter CMS: Страница курса
- Как стать крутым веб-дизайнером: Страница урока
- Что такое диаграмма связей: Диаграмма связей (Wiki)
- Что такое прототипирование: Прототипирование (Wiki)
- Создание Bootstrap-сетки в Figma: Страница урока
- Иконки Font Awesome: Посмотреть и скачать
- SVG Viewer Extension for Windows Explorer: Скачать с GitHub
- Визуальная иерархия в интерфейсах: Изучить статью
- Векторный редактор Inkscape: Ознакомиться и скачать
- Работа с иконками для веб-дизайна: Изучить урок
- Программа пипетка «Instant Eyedropper»: Instant Eyedropper Home
- Стрелка «Назад»:
← - Стрелка «Вперёд»:
→
В архиве материалов курса можно найти прототипы всех страниц сайта, которые мы разработали в этом курсе.Экспорт прототипов лежит в папке «design/wireframes/». Пресет настроек для приложения Pencil, который вы можете импортировать в Pencil на вкладке «My Shapes», можно также найти в архиве курса — «other/WireFrame-Pencil-Collection.zip».
В архиве материалов есть все используемые в дизайне шрифты. Для прохождения курса необходимо установить в систему все шрифты из папки «design/fonts/_src/».
Кроме того, в архиве курса можно найти готовый дизайн «Design (Woodtech) — Ready.fig». Для того, чтобы импортировать файл дизайна в Figma, достаточно открыть главное окно Figma и перетащить в него данный файл. В списке проектов у вас появится новый проект Figma.
Бланк технического задания «other/Техническое задание – Бланк.docx» – это универсальная заготовка технического задания на разработку сайта.
Готовая карта сайта (Mind map):
Для закрепления информации:
Компоненты Figma (Components) — это объекты, которые используются в дизайне многократно.
По-сути, компоненты Figma — это объекты для повторного использования, которые могут быть простыми (например, кнопка) или сложными (форма обратной связи, заголовок, footer и т.д.). Ключевой особенностью компонентов Figma является возможность повторного использования блоков, где при редактировании корневого (главного) компонента, меняется структура и наполнение во всех дочерних (копиях) компонентах во всех фреймах документа.
Auto Layout Figma — это инструмент для автоматизации создания дизайна, который позволяет определять отношение объектов друг к другу, а также, поведение и отображение элементов при изменении содержимого.
Стили Figma (Styles) — это многократно используемые коллекции свойств, которые можно применять к любым элементам дизайна. В Figma можно создавать стили для текста, цветов, сеток и эффектов, таких как тени и размытия. Ключевой особенностью стилей Figma является возможность менять свойства стиля в одном месте для всех элементов дизайна, во всех фреймах документа.
Данный функционал схож с использованием переменных в программировании.
Inkscape (Инкскейп) — свободно распространяемый векторный графический редактор (Open source), который мы используем в курсе для векторизации растровых иконок.
Настройки экспорта оптимизированного SVG (Inkscape)
Прототип и готовый дизайн главной страницы:
Прототип и готовый дизайн страницы «Наши проекты»:
Прототип и готовый дизайн страницы проекта:
Прототип и готовый дизайн страницы услуг:
Прототип и готовый дизайн страницы «Блог компании»:
Прототип и готовый дизайн универсальной страницы:
Прототип и готовый дизайн страницы «О компании»:
Прототип и готовый дизайн страницы «Наши преимущества»:
Прототип и готовый дизайн страницы «Обратная связь»:
Прототип и готовый дизайн страницы «Наши партнеры»:
Премиум уроки от WebDesign Master
Создание сайта от А до Я.
Комплексный курс
Создание современного интернет-магазина от А до Я
Я — фрилансер! Базовый курс для начинающих
Другие уроки по теме «Веб-дизайн»
- Создание Bootstrap-сетки в Figma
- С чего начать работу над дизайном и где брать вдохновение
- Процесс создания дизайна сайта салона красоты. Мастер веб-дизайна #7
- Мастер веб-дизайна #5: Создание дизайна сайта пиццерии
- Как стать крутым веб-дизайнером? Все по полочкам: UI/UX, Wireframing, правила хорошего тона, организация работы, верстка, самообучение
8 Что нужно и чего нельзя делать в веб-дизайне
Домашняя страница / Веб-дизайн / Как создать отличный веб-сайт: 8 правил и запретов в веб-дизайне
Веб-дизайн
Хотите узнать, как создать привлекательный веб-сайт? Вот ключевые правила веб-дизайна.
С таким количеством новых тенденций в веб-дизайне, которые появляются ежедневно, трудно понять, что стоит попробовать, а чего следует избегать. Если вы хотите создать привлекательный веб-сайт, отражающий ваш бренд, привлекающий клиентов и выделяющийся среди конкурентов, важно знать, что делать и, что не менее важно, чего не делать.
В этом руководстве рассматриваются наиболее распространенные ошибки веб-дизайнеров, а также обязательные функции каждого отличного веб-сайта.
Что такое веб-дизайн?
Веб-дизайн — это общий внешний вид веб-сайта. Это процесс планирования, построения и создания элементов вашего веб-сайта, от структуры и макета до изображений, цветов, шрифтов и графики.
Многие ремесла и компоненты работают вместе, чтобы сформировать веб-дизайн, включая графический дизайн, дизайн UX, дизайн пользовательского интерфейса, SEO и создание контента.
Достоинства веб-дизайна
Начнем с плюсов! Есть несколько ключевых характеристик, которые вы должны включить в свой веб-сайт.
Эти функции будут не только оценены, но и ожидаемы посетителями вашего сайта.
1. Удобная навигация по сайту
Навигация по сайту является неотъемлемой частью превосходного веб-дизайна. Посетители, которые не могут легко найти нужную им информацию, с большей вероятностью быстро уйдут. На самом деле, исследования показывают, что 94% посетителей выбрали удобную навигацию как наиболее ценное качество веб-сайта.
Как правило, дизайнеры должны обеспечивать, чтобы посетители могли оценить любую страницу или призыв к действию за три клика или меньше. Ваш список продуктов или услуг, страница регистрации по электронной почте, цены и блог должны быть доступны с каждой страницы вашего сайта.
Чем проще вы упростите своим посетителям и потенциальным клиентам поиск нужного контента на вашем сайте, тем выше ваши шансы на их конверсию.
Помните, что не все посетители будут следовать одним и тем же путем, начиная с вашей домашней страницы и линейно перемещаясь по вашему сайту, поэтому убедитесь, что ваша навигация интуитивно понятна, проста и беспрепятственна.
Вот несколько советов по настройке навигации по сайту:
- Заголовки: используйте навигацию по меню только для основных ссылок. Например, это может быть ссылка на вашу страницу с ценами, блог, продукты или страницу контактов.
- Нижние колонтитулы: здесь вы можете перечислить менее релевантные ссылки. Многие сайты перечисляют менее популярные страницы в нижнем колонтитуле, например страницы «Пресса» или «О нас», в дополнение к ссылкам в верхнем колонтитуле.
- Оптимизировано для мобильных устройств: поскольку 53% веб-трафика в настоящее время приходится на мобильных пользователей, оптимизация вашего сайта для настольных и мобильных версий имеет важное значение.
- Не изобретайте велосипед: используйте хорошо зарекомендовавшие себя ярлыки для навигации по сайту. Использование незнакомых слов и фраз замедлит работу ваших посетителей и негативно повлияет на их взаимодействие с пользователем.
2. Создавайте ценный контент
Хотя SEO, контекстная реклама и социальные сети могут привлечь посетителей на ваш сайт, именно ваш контент заставляет их возвращаться. Нельзя недооценивать важность содержания.
Убедитесь, что содержимое вашей домашней страницы краткое и легкое для понимания — удобоваримое содержание поможет вам более эффективно перемещать потенциальных клиентов по каналам продаж.
С другой стороны, блоги и страницы часто задаваемых вопросов должны содержать подробное и объемное содержание, представляющее ценность для ваших и потенциальных клиентов. Письменный контент составляет 95% информации в Интернете, поэтому создаваемый вами контент будет играть важную роль в привлечении внимания ваших посетителей.
При создании контента для своего веб-сайта соблюдайте правило писать в нетрезвом виде и редактировать в трезвом виде . Другими словами, пишите свой контент свободно, без перечитывания, и редактируйте весь свой контент, как только он будет готов.
При редактировании оставляйте только соответствующий контент. Удаляйте бесполезные фразы и фразы — уважительно относитесь ко времени ваших посетителей и не давайте им читать большие блоки текста, которые не добавляют никакой ценности.
Еще один совет: избегайте использования жаргона или сложных слов. Ваш контент должен быть понятным даже для читателей, которые не владеют вашим языком или не знакомы с вашей отраслью. Ваш контент должен быть доступен для всех — независимо от их технических знаний или словарного запаса.
3. Привлекайте посетителей к прокрутке
Концепция прокрутки довольно проста: чем больше ваши посетители прокручивают страницу, тем больше времени они проводят на вашем сайте и тем больше у вас шансов их конвертировать. Прокрутка увеличивает вероятность того, что ваши посетители вложатся в ваше решение.
Чем больше они узнают о ваших продуктах, услугах, функциях, преимуществах и историях успеха клиентов, тем больше они будут склонны покупать у вас.
Используйте различные типы контента на своем сайте. Включите отзывы клиентов, цитаты, обучающие видеоролики, ссылки и многое другое. Ваш контент должен побуждать посетителей оставаться на вашем сайте и больше читать о вашем решении.
Включите отзывы клиентов, цитаты, обучающие видеоролики, ссылки на другие страницы и многое другое. Вы должны привлекать посетителей, чтобы они переходили по вашим страницам и читали больше о вашем решении.
4. Сделайте свой сайт адаптивным
Адаптивность является ключевым элементом дизайна веб-сайта. Не только большинство посетителей предпочитают мобильные устройства настольным компьютерам, но и Google тоже. Алгоритм поисковой системы отдает предпочтение сайтам, удобным для мобильных устройств, в первую очередь при индексации и ранжировании. Ваша цель должна состоять в том, чтобы предоставить вашим посетителям потрясающий опыт работы на всех устройствах. Ваш контент должен отлично выглядеть на всех экранах, быть удобным для чтения и навигации.
Не думайте, что путь пользователя будет одинаковым на всех устройствах, без предварительного тестирования. Обязательно протестируйте свой дизайн на всех соответствующих устройствах, чтобы убедиться, что он отзывчивый — чем на большем количестве устройств вы его опробуете, тем лучше. Envato Elements имеет множество адаптивных шаблонов веб-сайтов, чтобы обеспечить бесперебойную работу пользователей на разных устройствах.
Что нельзя делать в веб-дизайне
Теперь, когда мы рассмотрели все, что вам следует делать при разработке веб-сайта, давайте рассмотрим, чего следует избегать. Вот некоторые из наиболее распространенных ошибок в веб-дизайне.
1. Не переусердствуйте с цветами и шрифтами
Чем чище ваш дизайн, тем лучше. Ваш дизайн должен соответствовать целям вашего сайта, а не противоречить им — хотя это и необходимо, дизайн вашего сайта всегда должен быть второстепенным по отношению к его функциям. Если вы переборщите с цветами и шрифтами, вы создадите сайт, на который будет сложно смотреть и на который будет сложно ориентироваться.
Посетители должны иметь возможность перемещаться по вашему сайту и следовать CTA, не прыгая через обручи.
Выберите шрифт и цветовую схему и придерживайтесь их. После того, как вы определились с принципами своего бренда, используйте их в своем веб-дизайне, социальных сетях, брошюрах, почтовом маркетинге или везде, где ваш бренд виден, чтобы добиться узнаваемости.
Что касается шрифтов веб-сайтов, старайтесь избегать заглавных букв и используйте правило трех — выбирайте не более трех шрифтов для своего веб-сайта, чтобы он выглядел простым и понятным. Кроме того, инвестируйте в высококачественные фотографии своих продуктов и команды, чтобы повысить свою подлинность и профессионализм.
2. Не злоупотребляйте всплывающими окнами
Всплывающие окна могут быть ценным маркетинговым инструментом для вашего веб-сайта. Вы можете использовать всплывающие окна, чтобы информировать посетителей вашего сайта о распродаже или скидке или предложить им подписаться на вашу рассылку.
Всплывающие окна могут помочь привлечь вашу аудиторию, но если вы переусердствуете с ними, они могут раздражать или мешать работе.
Во-первых, запрашивайте только небольшое количество информации. Чем проще будет подписаться на вашу рассылку, тем больше вероятность того, что посетители подпишутся. Кроме того, ограничьте количество всплывающих окон на вашем сайте. Если у вас есть всплывающее окно на каждой целевой странице, у вас будет высокий показатель отказов, поэтому будьте избирательны в том, где и когда вы их используете, чтобы они не отвлекали.
3. Не ставьте дизайн выше функциональности
Нет никаких сомнений в том, что красиво оформленный веб-сайт важен. Однако ваш дизайн не должен мешать пользовательскому опыту. Если ваш веб-сайт сбивает с толку или мешает вашим посетителям взаимодействовать с вашим сайтом, пришло время внести изменения.
Вот несколько моментов, на которые следует обратить внимание:
- Избегайте трудночитаемых цветов текста и выбирайте оттенки, доступные для людей с нарушениями зрения.
- Создавайте простые, чистые фоны, которые не будут слишком загружены
- Упростите поиск CTA
- Используйте вертикальную прокрутку, а не горизонтальную
- Ограничьте количество объявлений на вашем сайте
Кроме того, хотя поисковая оптимизация важна, такие интеграции, как Диспетчер тегов Google, могут замедлить работу вашего веб-сайта. Всегда отдавайте предпочтение опыту вашего посетителя, а не выбору дизайна или маркетинговым потребностям.
4. Не следуйте всем тенденциям
Хотя быть в курсе последних тенденций может быть здорово, старайтесь не цепляться за каждую причуду веб-дизайна. Если вы хотите создать устойчивый бренд, основывать весь свой веб-сайт или визуальную идентичность на преходящей тенденции может быть большой ошибкой. Учитывайте текущие тенденции, но создавайте дизайн сайта, который по-прежнему будет аутентичным для вас и вашей аудитории.
Большую часть времени люди не знают, чего они хотят от дизайна сайта, но они знают знают, какую информацию они хотят найти.
Хотя экспериментировать с новыми и модными функциями веб-сайта может быть интересно, всегда отдавайте предпочтение практичности и удобству для пользователей.
В завершение…
Мы надеемся, что эта статья дала вам хорошее представление о том, что можно и чего нельзя делать при индивидуальном веб-дизайне. Не переусердствуйте с дизайном и сосредоточьтесь на покупателе.
Разработайте свой сайт, думая о своей аудитории, создавайте контент, который легко понять, и упростите навигацию по сайту, и в кратчайшие сроки вы получите сайт-победитель.
Гость Автор: Ваня Маганич
Ваня Маганич — опытный автор Better Proposals. Она верит в бренды, которые противостоят мужчинам, и считает, что рассказывание историй — неотъемлемая часть того, что делает нас людьми. Ее долгосрочная цель — стать крутой тетенькой, которая раздает Кит-Кэт для всей семьи на Хэллоуин.
Тенденции веб-дизайнаВеб-разработка
Считаете ли вы эту статью полезной?
Похожие сообщения
Элементов Envato: Миллионы творческих ресурсов.
Неограниченное количество загрузок. Одна низкая стоимость. Получите неограниченное количество загрузок10 вещей, которые следует учитывать при планировании дизайна (или редизайна) веб-сайта
Этот пост был обновлен в мае 2023 года. . Некоммерческие организации часто спрашивают меня: «Что мы должны учитывать при планировании нового веб-сайта (или веб-сайта с измененным дизайном)?» Вот список ответов, которые я даю чаще всего:
Подобно заявлению о миссии, цель веб-сайта определяет основную причину его существования в мире. Будь то образование, защита интересов, предоставление услуг, организация сообщества и т. д., основная цель сайта в конечном итоге будет определять решения по дизайну и содержанию.
Я часто спрашиваю некоммерческие организации: «Кто ваша целевая аудитория?» и они ответят: «Все». Хотя я понимаю логику этого ответа, это простой факт, что вы не можете проектировать , имея в виду «всех» (вот почему существует так много разных видов автомобилей, одежды, вычислительных устройств и т.
д.). Если вы определите и создадите дизайн для двух основных аудиторий, сайт с большей вероятностью достигнет целей вашей организации.
Как и цели в стратегическом плане вашей организации (а если у вас нет ни одной из них, у вас есть более серьезные проблемы, чем ваш веб-сайт!), цели вашего веб-сайта определяют основные цели сайта. Я люблю просить своих некоммерческих клиентов ответить на эти вопросы для каждой целевой аудитории : Какие действия эта аудитория захочет выполнить, когда они посетят ваш веб-сайт? Какие действия ваша организация хочет, чтобы эта аудитория выполняла при посещении вашего веб-сайта? Обязательно пересмотрите свои цели в процессе проектирования и создания контента, чтобы убедиться, что они выполняются.
Адаптивный дизайн означает, что дизайн веб-сайта автоматически изменяется в соответствии с размером экрана, на котором он просматривается. К сожалению, может быть сложно модифицировать существующий сайт, придав ему отзывчивость; и, как правило, более рентабельно полностью перепроектировать.
Представьте, если бы музеи никогда не меняли свои экспонаты. Зачем вам возвращаться после вашего первого визита? Мы снова и снова возвращаемся в музеи из-за новых экспонатов и программ — новых вещей, которые стоит увидеть. Мы возвращаемся к веб-сайтам, если знаем, что их содержимое изменится, и мы сможем увидеть что-то новое. Работайте над контентной стратегией для вашего сайта, которая будет гарантировать, что люди будут возвращаться.
Документально подтверждено, что люди читают только 20-28% текста на веб-странице. Отсюда переход к более коротким блокам текста, большому количеству фотографий и использованию мультимедиа на веб-сайтах. Самое замечательное в нетекстовом контенте в наши дни заключается в том, что все, что вам действительно нужно, — это приличный смартфон, и вы можете быстро создавать свой собственный фото- и видеоконтент.
Функции — это элементы, которые делают сайт динамичным и интересным, такие как кнопки для пожертвований, онлайн-формы, встроенное видео или подкасты, онлайн-викторины, кнопки/интеграция социальных сетей и всевозможные гаджеты и виджеты.
68% пользователей Интернета начинают свой опыт работы в Интернете с поисковой системы. Это означает, что вы должны убедиться, что ваш сайт оптимизирован для поиска. Хотя есть компании, которые занимаются SEO и ничем другим, их услуги, как правило, выходят за рамки бюджета большинства некоммерческих организаций. К счастью, есть довольно много SEO-задач, которые вы (или ваш веб-разработчик) можете выполнить своими руками.
Существуют две основные статьи расходов, связанных с дизайн-проектом веб-сайта: стоимость дизайна и разработки сайта и текущие расходы на обслуживание сайта. Дизайн сайта, как правило, является единовременной стоимостью. Обслуживание сайта может сильно различаться, в зависимости от разработчика.
Раньше я делал веб-сайты с помощью Dreamweaver, и клиенты либо изучали это сложное программное обеспечение, либо платили мне за обновления. Я перешел на систему управления контентом с открытым исходным кодом WordPress около семи лет назад, чтобы изменить эту модель. Теперь мои некоммерческие клиенты делают свои собственные обновления, и после запуска сайта я им редко нужен. Еще одна проблема, связанная с обслуживанием сайта, о которой следует подумать заранее: кто из сотрудников будет отвечать за поддержку вашего сайта после запуска? Будет ли этот человек нести ответственность за загрузку контента, созданного другими, или он будет делать все это сам?
Под этим я подразумеваю соответствие веб-сайта некоммерческой организации Разделу 508 Закона об американцах-инвалидах (ADA). Хотя я думаю, что важно, чтобы все веб-сайты были доступны, я чувствую, что некоммерческий сектор несет особую моральную ответственность за это. Инклюзивность и социальная справедливость заложены в ДНК нашего сектора, что должно быть отражено в дизайне наших веб-сайтов.
Если вы дочитали до этого момента, я надеюсь, что этот список пригодится вам в вашем следующем проекте веб-сайта!
Пять распространенных ошибок при запросе предложений веб-сайта
Agile и каскадный дизайн веб-сайта: почему гибридный подход является лучшим
Преимущества безголовой системы управления контентом
Что такое менеджер веб-контента?
Синди Леонард
Они/Они или Она/Она
Генеральный директор Cindy Leonard Consulting LLC
Синди Леонард посвятила более 20 лет работе в некоммерческих организациях и с ними, а также работала в различных советах и комитетах на различных волонтерских должностях , а также в качестве консультанта, тренера, исполнительного директора, руководителя программы и ИТ-директора. Консультационные услуги Синди обширны и охватывают множество областей знаний, полученных за более чем 2 десятилетия работы в некоммерческом секторе и в колледже. . Синди удобно работать на высоте 50 000 футов или 10 футов, и она может легко переключаться между общей картиной и мелкими деталями.
