Загрузить PDF
Загрузить PDF
Если хотите разработать и создать сайт, то все пойдет гораздо проще, если потратите некоторое время на его планирование. Этап планирования позволяет разработчику и клиенту работать вместе, пока они не найдут формат и макет, который соответствует их потребностям. Процесс планирования влияет на выбор стиля сайта и, возможно, является самым важным аспектом веб-дизайна, особенно для бизнеса.
Шаги
-
Определите функциональность сайта. Если создаете сайт для себя, то, вероятно, уже знаете ответ на этот пункт. Если же создаете сайт для другого человека, компании или организации, то необходимо выяснить, что они ожидают от сайта и его функциональности. Все, что вы решите здесь, будет иметь влияние на окончательный сайт.
- Нужен ли электронный магазин? Вам нужны комментарии пользователей? Должны ли пользователи создавать учетные записи? Вам нужен сайт, ориентированный на статьи? Ориентированный на изображения? Все эти и многие другие вопросы помогут наполнить дизайн и структуру сайта.
- Это может быть длительный процесс, особенно для крупных компаний с большим количеством людей, вовлеченных в проект.
-
Создайте карту-схему сайта. Карта-схема - как блок-схема, она показывает, как пользователи перемещаются с одной страницы на другую. Вам даже не нужны страницы в этом пункте, только общий поток идей. Вы можете использовать компьютерную программу для создания диаграммы или наметить ее сами на листе бумаги. Используйте карту-схему сайта, чтобы показать, как вы представляете себе иерархию веб-страницы и связи (соединения).
-
Попробуйте сортировку карт. Популярный метод для группы - это использование стопки карточек, чтобы выяснить идеальный подход каждого. Возьмите стопку карточек для заметок и напишите основное содержание одной страницы на каждой из них. Пусть ваша команда организует карты так, чтобы они считались наиболее полезными. Это лучше всего для ситуаций, когда вы сотрудничаете с другими для создания сайта. [1] X Источник информации
-
Используйте бумагу и доску объявлений или доску. Это оригинальный малобюджетный метод планирования, он позволяет быстро удалить или переместить контент и перенаправить его. Нарисуйте дизайн на бумажках и соедините их в последовательность или нарисуйте схему на доске. Отлично подходит для мозговых штурмов.
-
Составьте опись контента. Его намного проще переделать, чем новые сайты. Введите каждую часть контента или существующие страницы в электронную таблицу. Запишите назначение каждой из них, далее используйте этот список, чтобы определить, что происходит и что остается. Это поможет вырезать лучшую часть и упростить процесс редизайна.Реклама
-
Создайте каркас (структурные схемы страниц), чтобы помочь закрепить иерархию. HTML-каркас - это костяк вашего будущего сайта, использующий только самые основные теги и блоки для представления содержания. Он отвечает на вопрос: "Что находится на экране и где?". Форматирование и стиль полностью игнорируются в каркасе. [2] X Источник информации
- Каркас позволяет увидеть структуру контента и потока до совершения выбора стиля.
- HTML-каркасы - не статичные, как PDF-файлы или изображения, они позволяют быстро перемещать блоки контента, чтобы создать новую структуру.
- Каркас является интерактивным, что выгодно как для разработчика, так и клиента. Поскольку каркас написан на простом HTML, то вы все еще можете перемещаться по нему и почувствовать, как работает движение между страницами. Это то, что не может быть выражено через концепцию PDF.
-
Попробуйте метод Gray Box (Серое поле). Разместите содержимое вашей страницы в серые поля с наиболее важным контентом в самом верху. Блоки расположены в одном столбце, с самой важной частью контента на странице в верхней части. Например, если страница является страницей о компании (About), детали о компании могли бы пойти в верхний блок, за которым следует список персонала, далее контактная информация и так далее. [3] X Источник информации
- Это не включает в себя верхний и нижний колонтитулы. Серые поля - это просто визуальное представление контента, который будут найден на странице.
-
Попробуйте использовать программу Wireframing. Есть несколько программ, которые могут помочь вам в процессе создания интерактивного прототипа дизайна (Wireframing). Объем необходимых знаний о работе с исходным кодом варьируется от программы к программе. Вот некоторые из наиболее популярных программ:
- Pattern Lab. Этот сайт специализируется на "атомном дизайне", где каждая часть контента представляется как "молекула", которая составляет большую страницу.
- Jumpcharts. Это сайт сервиса планирования и создания интерактивного прототипа дизайна. Он требует платной подписки, но позволяет быстро построить структурные схемы страниц, не беспокоясь слишком много о работе с кодом.
- Wirefy. Wirefy еще одна система "атомного проекта". Все инструменты доступны бесплатно для разработчиков.
-
Используйте простую HTML-разметку . Хороший каркас может быть легко преобразован в фактический сайт позже. Не волнуйтесь вообще о стиле в процессе создания интерактивного прототипа дизайна. Вместо этого используйте разметку, которую можно легко понять и поменять с небольшим усилием. [4] X Источник информации
- «Меньше» значит «больше» с каркасом. Цель состоит в том, чтобы просто построить структуру. Внешний вид можно отрегулировать позже с помощью CSS и расширенной разметки.
-
Сделайте каркас для каждой страницы на своем сайте. Может быть заманчиво сделать простой каркас и сказать: "Круто, я могу применить это к каждой странице, мне это подходит". На самом деле, это приведет к созданию обычного и скучного сайта. Потратьте время, чтобы создать интерактивный прототип дизайна каждой страницы, и вы скоро обнаружите, что каждая страница имеет свои организационные "потребности".Реклама
-
Подготовьте некоторый контент, прежде чем начать создавать веб-сайт. Будет намного проще увидеть, как выглядит стиль сайта, если у вас будет реальный контент вместо пустых полей. Вам не нужно слишком много информации, но все будет выглядеть намного лучше в макетах, если будете иметь некоторый материал для статей и оригинальные изображения.
- Вам не обязательно нужна основная часть статьи, но вы должны, по крайней мере, иметь настоящие заголовки.
-
Помните, что хорошее содержание - это больше чем текст. Интернет - это гораздо больше, чем простые текстовые веб-сайты. Чтобы выделиться в своей нише, вам понадобится множество различных типов контента для привлечения и удержания посетителей. Некоторый возможный контент для запоминания:
- Фотографии.
- Аудио
- Видео
- Потоки или стримы (Twitter)
- Facebook интеграция
- RSS (от англ. Really Simple Syndication - стандартизированная система для распространения контента)
- Содержания канала новостей
-
Выберите профессионального фотографа. Если добавляете фотографии на свой сайт, то с профессиональной фотографией первые впечатления о нем будут гораздо лучше. Одно хорошее фото стоит больше, чем 20 плохих.
- Работы начинающих фотографов будут куда дешевле работ опытных профессионалов.
-
Пишите качественные статьи. Письменное содержание на вашей странице будет определять огромное количество веб-трафика. Хотя вам не нужно беспокоиться слишком о создании контента на данном этапе процесса проектирования, вам не помешает и подумать об этом, так как контент понадобится вам создавать регулярно, когда "вдохнете жизнь" в сайт.
- После статей будет написано много чего еще, чем вы, скорее всего, будете использовать в процессе создания веб-сайта. Это может включать в себя контактную информацию, названия компаний или что-то еще, что будет использоваться в нескольких местах на сайте.
Реклама
-
Разработайте общие элементы. Это те вещи, которые видны на каждой странице сайта, такие как: верхний и нижний колонтитулы, меню навигации. Создайте очень простой стиль, таким образом вы сможете увидеть, как все ваши страницы будут выглядеть с ними на месте. Это будет очень полезно при переходе к процессу создания макета.
- Не беспокойтесь слишком о деталях, но попытайтесь сделать их почти такими же, как все в конечном счете должно выглядеть.
-
Создайте базовый план (размещение). Начинайте двигать направляющие каркаса из одного столбца в их общепринятые места на странице. Например, вы могли бы переместить навигационный блок в левую часть страницы, а список заголовков - справа.
- Продолжайте экспериментировать с размещением для нескольких страниц, прежде чем двигаться дальше. Пусть другие проверят их, чтобы увидеть, насколько они органично смотрятся.
-
Создайте макет. Используйте программу (вроде Photoshop), чтобы создать макет нескольких страниц сайта. Используйте макет, который вы выбрали в качестве руководства. Можно работать намного быстрее в программе для редактирования изображений и получить все в таком виде, каком нужно. Это позволит использовать эти изображения в качестве ссылок, когда придет время создания фактического кода.
- Добавьте настоящий контент в макет, чтобы убедиться, что все вместе выглядит хорошо.
-
Замените блоки контентом. Начните добавлять контент и элементы на страницу. Не беспокойтесь о стиле все же, просто разместите все в нужном месте. Это поможет узнать, будут ли ваши изменения стиля работать.
-
Создайте руководство по стилю. Это очень важно для поддержания связующего стиля, особенно для больших сайтов. Если сайт - для бизнеса, который уже имеет визуальный брендинг, то он должен быть включен в дизайн сайта. Вещи, которые следует рассмотреть в руководстве по стилю:
- Навигация
- Заголовки (<h1>, <h2>, etc.)
- Абзацы
- Italics (Курсив)
- Bolding (Полужирный)
- Ссылки (активные, неактивные, плавающие)
- Использование изображения
- Иконки
- Кнопки
- Списки
-
Примените свой стиль. Как только выбрали стиль и дизайн для сайта, пришло время его реализации. CSS является одним из самых простых способов реализации стиля для всей страницы или всего сайта. Читайте это руководство для более подробной информации об использовании CSS.Реклама
Источники
Об этой статье
Эту страницу просматривали 7097 раз.
Реклама
