Як спланувати сайт
Якщо хочете розробити і створити сайт, то все піде набагато простіше, якщо витратите якийсь час на його планування. Етап планування дозволяє розробнику і клієнтові працювати разом, поки вони не знайдуть формат і макет, який відповідає їхнім потребам. Процес планування впливає на вибір стилю сайту і, можливо, є найважливішим аспектом веб-дизайну, особливо для бізнесу.
кроки
Частина 1 з 4:
Створення базової структури1. Визначте функціональність сайту. Якщо створюєте сайт для себе, то, ймовірно, вже знаєте відповідь на цей пункт. Якщо ж створюєте сайт для іншої людини, компанії або організації, то необхідно з`ясувати, що вони очікують від сайту і його функціональності. Все, що ви вирішите тут, матиме вплив на остаточний сайт.
- Чи потрібен електронний магазин? Вам потрібні коментарі користувачів? Чи повинні пользователісоздавать облікові записи? Вам потрібен сайт, орієнтований на статті? Орієнтований на зображення? Всі ці та багато інших питань допоможуть наповнити дизайн і структуру сайту.
- Це може бути тривалий процес, особливо для великих компаній з великою кількістю людей, залучених в проект.

2. Створіть карту-схему сайту. Карта-схема - як блок-схема, вона показує, як користувачі переміщаються з однієї сторінки на іншу. Вам навіть не потрібні сторінки в цьому пункті, тільки загальний потік ідей. Ви можете використовувати комп`ютерну програму для створення діаграми або намітити її самі на аркуші паперу. Використовуйте карту-схему сайту, щоб показати, як ви уявляєте собі ієрархію веб-сторінки і зв`язку (з`єднання).

3. Спробуйте сортування карт. Популярний метод для групи - це використання стопки карток, щоб з`ясувати ідеальний підхід кожного. Візьміть стопку карток для заміток і напишіть основний зміст однієї сторінки на кожній з них. Нехай ваша команда організовує карти так, щоб вони вважалися найбільш корисними. Це найкраще для ситуацій, коли ви співпрацюєте з іншими для створення сайту.

4. Використовуйте папір і дошку оголошень або дошку. Це оригінальний малобюджетний метод планування, він дозволяє швидко видалити або перемістити контент і перенаправити його. Намалюйте дизайн на папірцях і з`єднайте їх в послідовність або намалюйте схему на дошці. Дуже добре підходить для мозкових штурмів.

5. Складіть опис контенту. Його набагато простіше переробити, ніж нові сайти. Введіть кожну частину контенту або існуючі сторінки в електронну таблицю. Запишіть призначення кожної з них, далі використовуйте цей список, щоб визначити, що відбувається і що залишається. Це допоможе вирізати кращу частину і спростити процес редизайну.
Частина 2 з 4:
Створення HTML-каркаса1. Створіть каркас (структурні схеми сторінок), щоб допомогти закріпити ієрархію. HTML-каркас - це костяквашего майбутнього сайту, який використовує тільки самі основні теги і блоки для подання змісту. Він відповідає на питання: "Що знаходиться на екрані і де?". Форматування і стиль повністю ігноруються в каркасі.
- Каркас дозволяє побачити структуру контенту і потоку до здійснення вибору стилю.
- HTML-каркаси - не статична, як PDF-файли або зображення, вони дозволяють швидко переміщати блоки контенту, щоб створити нову структуру.
- Каркас є інтерактивним, що вигідно як для розробника, так і клієнта. Оскільки каркас написаний на простому HTML, то ви все ще можете переміщатися по ньому і відчути, як работаетдвіженіе між сторінками. Це те, що не може бути виражене через концепцію PDF.

2. Спробуйте метод Gray Box (Сіре поле). Додайте вміст вашої сторінки в сірі поля з найбільш важливим контентом в самому верху. Блоки розташовані в одному стовпці, з найважливішою частиною контенту на сторінці в верхній частині. Наприклад, якщо сторінка є сторінкою про компанію (About), деталі про компанію могли б піти в верхній блок, за яким слідує список персоналу, далі контактна інформація і так далі.

3. Спробуйте використовувати програму Wireframing. Є кілька програм, які можуть допомогти вам в процесі створення інтерактивного прототипу дизайну (Wireframing). Обсяг необхідних знань про роботу з вихідним кодом варіюється від програми до програми. Ось деякі з найбільш популярних програм:

4. Використовуйте просту HTML-розмітку. Хороший каркас може бути легко перетворений в фактичний сайт пізніше. Не хвилюйтеся взагалі про стиль в процесі створення інтерактивного прототипу дизайну. Замість цього використовуйте розмітку, яку можна легко зрозуміти і поміняти з невеликим зусиллям.

5. Зробіть каркас для кожної сторінки на своєму сайті. Може бути заманливо зробити простий каркас і сказати: "Круто, я можу застосувати це до кожної сторінки, мені це підходить". Насправді, це призведе до створення звичайного і нудного сайту. Витратьте час, чтобисоздать інтерактивний прототип дизайну кожної сторінки, і ви скоро побачите, що кожна сторінка має свої організаційні "потреби".
Частина 3 з 4:
створення контенту1. Підготуйте деякий контент, перш ніж почати створювати веб-сайт. Буде набагато простіше побачити, як виглядає стиль сайту, якщо у вас буде реальний контент замість порожніх полів. Вам не потрібно занадто багато інформації, але все буде виглядати набагато краще в макетах, якщо будете мати певний матеріал для статей і оригінальні зображення.
- Вам не обов`язково потрібна основна частина статті, але ви повинні, по крайней мере, мати справжні заголовки.

2. Пам`ятайте, що хороше зміст - це більше ніж текст. Інтернет - це набагато більше, ніж прості текстові веб-сайти. Щоб виділитися в своїй ніші, вам знадобиться безліч різних типів контенту для залучення й утримання відвідувачів. Деякий можливий контент для запам`ятовування:

3. Виберіть професійного фотографа. Якщо додаєте фотографії на свій сайт, то з професійною фотографією перші враження про нього будуть набагато краще. Одне хороше фото коштує більше, ніж 20 поганих.

4. Пишіть якісні статті. Письмове зміст на вашій сторінці буде визначати величезна кількість веб-трафіку. Хоча вам не потрібно турбуватися занадто про створення контенту на даному етапі процесу проектування, вам не завадить і подумати про це, тому що контент знадобиться вам створювати регулярно, коли "вдихнете життя" в сайт.
Частина 4 з 4:
Перетворення ідеї в сайт1. Розробіть загальні елементи. Це ті речі, які видно на кожній страніцесайта, такі як: верхній і нижній колонтитули, меню навігації. Створіть дуже простий стиль, таким чином ви зможете побачити, як всі ваші сторінки будуть виглядати з ними на місці. Це буде дуже корисно при переході до процесу створення макета.
- Не турбуйтеся надто про деталі, але спробуйте зробити їх майже такими ж, як все в кінцевому рахунку повинно виглядати.

2. Створіть базовий план (розміщення). Починайте рухати напрямні каркаса з одного стовпчика в їх загальноприйняті місця на сторінці. Наприклад, ви могли б перемістити навігаційний блок в ліву частину сторінки, а список заголовків - справа.

3. створіть макет. Використовуйте програму (на зразок Photoshop), щоб створити макет декількох сторінок сайту. Використовуйте макет, який ви вибрали в якості керівництва. Можна працювати набагато швидше в програмі для редагування зображень і отримати всі в такому вигляді, якому потрібно. Це дозволить використовувати ці зображення в якості посилань, коли прийде времясозданія фактичного коду.

4. Замініть блоки контентом. Почніть добавлятьконтент і елементи на сторінку. Не турбуйтеся про стилі все ж, просто розмістіть все в потрібному місці. Це допоможе дізнатися, чи будуть ваші зміни стилю працювати.

5. Створіть керівництво по стилю. Це дуже важливо для підтримки сполучного стилю, особливо для великих сайтів. Якщо сайт - для бізнесу, який вже має візуальний брендинг, то він повинен бути включений в дизайн сайту. Речі, які слід розглянути в керівництві слав:
, , etc.)

6. Застосуйте свій стиль. Як тільки вибрали стиль і дизайн для сайту, прийшло часЛ реалізації. CSS є одним з найпростіших способів реалізації стилю для всієї сторінки або всього сайту. Читайте це керівництво для більш докладної інформації про використання CSS.