Содержание

• меры
• , и т.д.)

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

меры

Часть 1 из 4: Создание структуры

1. 

   Определите функциональность сайта. Если вы создаете веб-сайт для себя, вы, вероятно, уже знаете ответ на этот вопрос. Если вы создаете веб-сайт для другого человека, компании или организации, вам нужно будет выяснить, чего клиент ожидает от веб-сайта и его функций. Все, что вы решите здесь, повлияет на конечный продукт.
   • Нужна ли мне витрина? Нужны ли мне комментарии пользователей? Смогут ли они создавать учетные записи? Ориентирован ли сайт на статьи? Изображения? Все эти и другие вопросы помогут понять дизайн и структуру веб-сайта.
   • Это может быть утомительным процессом, особенно для крупных компаний, в которых участвует несколько человек.

2. 

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

3. 

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

4. 

   
   
   Используйте бумагу и доску объявлений или белую доску. Это оригинальный недорогой метод планирования, который позволяет удалять или перемещать контент и быстро все реорганизовывать. Нарисуйте дизайн на листах и ​​бумаге и соедините линией или нарисуйте контур на белой доске. Отлично подходит для мозгового штурма.

5. 

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

Часть 2 из 4. Создание каркаса HTML

1. 

   Создайте каркас, чтобы укрепить иерархию. Каркас HTML - это скелет вашего будущего сайта, в котором для представления контента используются только самые основные теги и блоки. Он отвечает на вопрос «Что происходит на каждом экране и где?» В каркасе полностью игнорируются форматирование и стиль.
   • Каркас позволяет вам увидеть структуру и поток контента, прежде чем выбирать стиль.
   • Каркасы HTML не статичны, как файлы PDF или изображения, и позволяют быстро перемещать блоки контента для создания новой структуры.
   • Каркас интерактивен, что подходит как разработчику, так и заказчику. Поскольку каркас написан на простом HTML, вы все равно можете просматривать его и понимать, как работает перемещение между страницами. Это то, что нельзя выразить в концептуальном PDF.

2. 

   Попробуйте метод серого ящика. Сгруппируйте содержимое своей страницы в серые блоки, расположив наиболее важное содержимое вверху. Блоки расположены в одном столбце, при этом наиболее важная часть контента на странице находится вверху. Например, если страница является страницей «О компании», сведения могут идти вверху, за ними следует список команды, контактная информация и т. Д.
   • Это не включает верхний и нижний колонтитулы. Серые поля - это просто визуальное представление содержимого, которое будет найдено на странице.

3. 

   Попробуйте программу для создания каркасов. Есть несколько программ, которые могут помочь вам с процессом создания каркаса. Объем знаний в области программирования варьируется от программы к программе. Некоторые из самых популярных:
   • Pattern Lab - сайт, специализирующийся на атомном дизайне. Каждый фрагмент контента рассматривается как «молекула», которая создает большую страницу.
   • Jumpcharts. Это веб-сайт планирования веб-сайтов, а также услуга создания макетов. Для этого требуется платная подписка, но вы можете быстро создавать каркасы, не беспокоясь о коде.
   • Wirefy. Это еще одна система «атомарного дизайна». Инструменты бесплатны для разработчиков.

4. 

   Узнайте, как использовать простую разметку HTML. Хороший вайрфрейм впоследствии легко превратить в настоящий веб-сайт. Не беспокойтесь о стиле в процессе создания каркаса. Вместо этого используйте тег, который можно легко понять и обменять с очень небольшим усилием.
   • С каркасом меньше значит больше. Цель - просто построить конструкцию. Позже внешний вид можно изменить с помощью CSS и расширенной маркировки.

5. 

   Сделайте каркас для каждой страницы вашего сайта. Может возникнуть соблазн просто создать каркас и сказать: «Круто, я могу применить его ко всем другим страницам, и все». Фактически, это создаст общий и скучный веб-сайт. Выделите время для каждой каркасной страницы, и вскоре вы обнаружите, что каждая страница имеет свои организационные потребности.

Часть 3 из 4: Создание контента

1. 

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

2. 

   Помните, что хороший контент - это больше, чем текст. Интернет - это гораздо больше, чем простые тексты на веб-сайтах. Чтобы выделиться в своей нише, вам понадобится множество различных типов контента, чтобы удерживать внимание и привлекать посетителей. Некоторое возможное содержание, о котором следует помнить:
   • Изображений.
   • Аудио.
   • Видео.
   • Стримы (Twitter).
   • Интеграция с Facebook.
   • RSS.
   • Каналы содержания.

3. 

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

4. 

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

Часть 4 из 4: преобразование концепции в веб-сайт

1. 

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

2. 

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

3. 

   Создайте макет. Используя такую ​​программу, как Photoshop, создайте макет некоторых страниц вашего сайта. Используйте макет, который вы определили в качестве руководства. Вы можете работать намного быстрее в программе для редактирования изображений и оставить все так, как вы хотите. Это позволит вам использовать изображения в качестве справочника, когда придет время писать код.
   • Включите в макет реальный контент, чтобы все было гармонично.

4. 

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

5. 

   Создайте руководство по стилю. Это важная часть поддержки целостного веб-сайта, особенно для крупных веб-сайтов. Если веб-сайт предназначен для компании, у которой уже есть визуальная идентичность, его необходимо включить в дизайн веб-сайта. При составлении руководства по стилю следует учитывать следующие моменты:
   • Навигация.
   • Заголовки (

     ,

     , и т.д.)

   • Пункты.
   • Курсив.
   • Смелый.
   • Ссылки (активные, неактивные, при наведении указателя мыши).
   • Использование изображений.
   • Иконки.
   • Кнопки.
   • Списки.

6. 

   Примените этот стиль. После того, как вы определились со стилем и дизайном своего сайта, самое время приступить к его реализации. CSS - один из самых простых способов реализовать стиль на странице.