Если вы хотите разрабатывать и создавать веб-страницы, этот процесс будет намного проще, если вы планируете заранее. На этапе планирования дизайнер и клиент могут работать вместе, чтобы найти формат и макет, которые соответствуют их потребностям. Процесс планирования влияет на стиль или стиль сайта, можно сказать, это самый важный аспект в веб-дизайне, особенно если он предназначен для деловых целей.
Шаг
Часть 1 из 4: Создание базовой структуры
Шаг 1. Определите функцию веб-сайта
Если вы создаете личный сайт, вы, вероятно, уже знаете ответ. Однако, если вы создаете сайт для другой организации, компании или человека, вам необходимо выяснить, чего они хотят, и какие функциональные возможности сайта. Все, что вы здесь укажете, вступит в силу, когда веб-страница будет завершена.
- Требуется ли для веб-сайта витрина? Следует ли делать комментарии пользователей? Потребуется ли пользователю позже создать учетную запись? Ориентирована ли статья на сайте? Или ориентированный на имидж? Все эти и другие вопросы помогут вам в разработке дизайна сайта.
- Этот процесс планирования можно нарисовать на чертеже, особенно если он предназначен для большой компании и в создании этого проекта участвует много людей.
Шаг 2. Создайте схему карты сайта (карту сайта)
Диаграмма карты сайта похожа на блок-схему, показывающую, как пользователи переходят с одной страницы на другую. На этом этапе вам не нужна веб-страница, только общий набор концепций. Вы можете использовать компьютерную программу для создания диаграмм или набросать свои собственные на бумаге. Используйте эту диаграмму, чтобы продемонстрировать концепции иерархической организации и подключения к веб-страницам.
Шаг 3. Попробуйте метод составления карточки
Один из популярных методов групповой веб-разработки - использовать несколько карточек, чтобы выяснить ожидания каждого. Возьмите несколько карточек и запишите основное содержание веб-страницы на каждой из них в отдельности. Разложите эти карточки вместе со своей командой, чтобы найти лучшую концепцию. Этот метод подходит для использования, когда вы совместно с другими создаете веб-страницы.
Шаг 4. Используйте бумагу и доску объявлений или доску
Это оригинальный метод планирования при небольшом бюджете, вы можете быстро удалить или сдвинуть контент и изменить поток. Нарисуйте свой веб-дизайн на бумаге, затем соедините листы ниткой или нарисуйте линии на доске. Этот метод очень подходит для проведения мозговых штурмов.
Шаг 5. Создайте инвентарь контента
Фактически, его больше уместно использовать при редизайне веб-сайтов, чем в новых веб-дизайнах. Вставьте каждый готовый фрагмент контента или веб-страницу в электронную таблицу. Запишите цель каждой части контента или страницы, используя этот список, чтобы определить, что удалить, а что оставить. Вы можете упростить структуру Интернета и упростить процесс редизайна позже.
Часть 2 из 4. Создание базовой HTML-структуры
Шаг 1. Создайте каркас, чтобы установить иерархию веб-страниц
Базовый HTML-шаблон - это план сайта, который вы создадите, с использованием только самых основных тегов и примеров (блоков / шаблонов) контента. Эта структура отвечает на вопрос: «Что и где видно в Интернете?» При создании этой схемы форматирование и стили не требуются.
- Вы можете увидеть структуру и блок-схему контента с основным контуром, прежде чем выбрать настройку стиля.
- Базовые HTML-шаблоны не статичны, как PDF-файлы или изображения, вы можете быстро пролистывать образцы содержимого для создания новых структур.
- Базовая структура является интерактивной, что приносит пользу как веб-разработчикам, так и клиентам. Поскольку эта базовая структура написана с помощью простого HTML-кода, вы все равно можете перемещаться по ней и знать, как работает переключение веб-страниц. Это невозможно сделать с PDF.
Шаг 2. Попробуйте метод серого ящика
Блокируйте или выделяйте контент своей веб-страницы в сером ящике, наиболее важный контент находится вверху. Отсортируйте содержимое в один столбец. Например, если на странице «О компании», то вверху находится подробная информация о компании, за ней следует список сотрудников, затем контактная информация и т. Д.
Сюда не входят верхние и нижние колонтитулы. Серый прямоугольник - это визуальное представление содержимого, которое будет отображаться в Интернете
Шаг 3. Попробуйте простую программу построения схем
Существуют различные программы, которые вы можете использовать в процессе создания базового веб-фреймворка. Количество кода (языка) веб-программирования, которое вам нужно освоить, различается для каждой программы. Вот некоторые из довольно популярных программ:
- Лаборатория паттернов. Этот сайт посвящен «атомарному дизайну», каждый контент считается «молекулой», составляющей большую веб-страницу.
- Диаграммы прыжков. Эта веб-страница предоставляет услуги веб-планирования и создания рамок. Эти сайты являются платными и требуют подписки, но вы можете быстро создавать веб-фреймворки, не разбираясь в большом количестве кода веб-программирования.
- Wirefy. Wirefy - еще один сайт, предлагающий «атомарный дизайн». Веб-разработчики могут получить этот инструмент бесплатно.
Шаг 4. Используйте простую разметку HTML
Хороший базовый шаблон легко конвертируется в исходный сайт. Не думайте слишком много о веб-стилях в процессе создания этого шаблона. Используйте разметку, которую можно легко понять и изменить.
Намного лучше простой базовый фреймворк. Цель создания разметки - построить структуру. Внешний вид можно изменить позже с помощью CSS и расширенной разметки
Шаг 5. Создайте базовую схему для каждой веб-страницы
У вас может возникнуть соблазн отождествить каждую веб-страницу с одним основным планом. Фактически, это только сделает ваш сайт простым и скучным. Создавайте разные схемы для каждой страницы, вы поймете, что каждой странице нужен свой дизайн.
Часть 3 из 4: Создание контента
Шаг 1. Подготовьте контент перед созданием веб-страницы
Вам будет намного проще предварительно просмотреть свой веб-просмотр, если у вас уже есть реальный контент, вместо использования образцов или заполнителей. Вам не нужно иметь слишком много контента, но ваш макет будет выглядеть намного лучше, если вы используете копию исходного изображения.
Вам не обязательно иметь весь материал статьи, но, по крайней мере, он должен иметь актуальный заголовок
Шаг 2. Помните, что отличный контент - это не просто текст
Интернет намного сложнее, чем простая веб-страница с текстом. Вам понадобится разнообразный контент, чтобы создать отличный веб-сайт, привлекающий и приглашающий посетителей. Например:
- Рисунок.
- Голос.
- Видео.
- Веб-передача или веб-поток (Twitter)
- Интеграция с Facebook
- RSS
- Веб-канал
Шаг 3. Обратитесь за помощью к профессиональному фотографу
Если вы хотите разместить фотографии на своем сайте, первое впечатление, которое вы получите от своего веб-сайта, будет намного лучше, если он будет заполнен профессиональной фотографией. Одно хорошее фото лучше двадцати некачественных.
Ищите новичка в искусстве фотографии как более дешевое решение, чем профессиональный фотограф, который занимается этим бизнесом долгое время
Шаг 4. Пишите качественные статьи
Письменный контент на веб-странице будет определять объем вашего веб-трафика. Хотя вам не нужно слишком сильно беспокоиться о создании контента в этом процессе проектирования, не помешает начать думать об этом, потому что вам также понадобится контент на регулярной основе, как только ваш сайт будет запущен и работает.
Помимо содержания статьи, есть письменные материалы, которые вам также понадобятся в процессе создания веб-страницы. Например, контактная информация, название компании или что-то еще, что будет многократно использоваться на сайте
Часть 4 из 4: превращение концепций в веб-сайты
Шаг 1. Расставляем основные элементы
Такое расположение элементов применяется к каждой странице вашего сайта, например к заголовкам, сноскам и меню навигации. Настройте его в очень простом стиле, чтобы вы могли проверить, как выглядят все страницы. Это особенно полезно по мере того, как вы продвигаетесь в процессе создания веб-макета.
Не беспокойтесь о деталях, попробуйте предварительно просмотреть (превью), как выглядит заголовок
Шаг 2. Создайте простой макет
Для начала переместите положение часов из столбца основного контура в фактическое положение на странице. Например, вы можете переместить образец меню навигации в левую часть страницы, а список заголовков - вправо.
Продолжайте экспериментировать с веб-макетами для нескольких страниц, прежде чем переходить к следующему шагу. Позвольте другим взглянуть на него, чтобы увидеть, выглядит ли созданный вами макет живым
Шаг 3. Создайте макет
Используйте такую программу, как Photoshop, для создания макетов или образцов страниц вашего веб-сайта. Используйте составленный вами макет в качестве руководства. Вы можете быстрее создавать макеты и получать желаемые результаты с помощью программы обработки изображений. Результаты этих изображений могут быть позже использованы в качестве справочной информации в процессе написания кода веб-программирования.
Поместите фактический контент в макет, чтобы он хорошо выглядел
Шаг 4. Замените образец концепции исходным содержанием
Добавляйте контент и элементы на веб-страницы. Не переживайте пока о настройках веб-стиля, просто сложите все в нужное место. Это поможет вам просмотреть изменения веб-стиля, которые вы внесете позже.
Шаг 5. Создайте руководство по веб-стилю
Очень важно поддерживать сочетание стилей, особенно для крупных сайтов. Если сайт предназначен для деловых целей и уже имеет собственный бренд или стиль, это следует интегрировать в дизайн сайта. Что следует учитывать при создании руководства по стилю веб-страницы:
- Навигация
- Головная нота
- Пункт
- Курсив
- Смелый характер
- Ссылки (активные, неактивные, наведение)
- Использование изображения
- Значок
- Ручка
- список
Шаг 6. Примените веб-стиль
Как только вы найдете правильный стиль и дизайн, реализуйте его. CSS - один из самых простых способов реализовать стили на веб-странице или по всему сайту. См. Следующие инструкции, чтобы лучше понять подробности использования CSS.
