Якщо хочете розробити і створити сайт, то все піде набагато простіше, якщо витратите якийсь час на його планування. Етап планування дозволяє розробнику і клієнтові працювати разом, поки вони не знайдуть формат і макет, який відповідає їхнім потребам. Процес планування впливає на вибір стилю сайту і, можливо, є найважливішим аспектом веб-дизайну, особливо для бізнесу.

кроки

Частина 1 з 4:

Створення базової структури

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

Чи потрібен електронний магазин? Вам потрібні коментарі користувачів? Чи повинні пользователісоздавать облікові записи? Вам потрібен сайт, орієнтований на статті? Орієнтований на зображення? Всі ці та багато інших питань допоможуть наповнити дизайн і структуру сайту.
Це може бути тривалий процес, особливо для великих компаній з великою кількістю людей, залучених в проект.

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

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

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

5. Складіть опис контенту. Його набагато простіше переробити, ніж нові сайти. Введіть кожну частину контенту або існуючі сторінки в електронну таблицю. Запишіть призначення кожної з них, далі використовуйте цей список, щоб визначити, що відбувається і що залишається. Це допоможе вирізати кращу частину і спростити процес редизайну.

Частина 2 з 4:

Створення HTML-каркаса

1. Створіть каркас (структурні схеми сторінок), щоб допомогти закріпити ієрархію. HTML-каркас - це костяквашего майбутнього сайту, який використовує тільки самі основні теги і блоки для подання змісту. Він відповідає на питання: "Що знаходиться на екрані і де?". Форматування і стиль повністю ігноруються в каркасі.

Каркас дозволяє побачити структуру контенту і потоку до здійснення вибору стилю.
HTML-каркаси - не статична, як PDF-файли або зображення, вони дозволяють швидко переміщати блоки контенту, щоб створити нову структуру.
Каркас є інтерактивним, що вигідно як для розробника, так і клієнта. Оскільки каркас написаний на простому HTML, то ви все ще можете переміщатися по ньому і відчути, як работаетдвіженіе між сторінками. Це те, що не може бути виражене через концепцію PDF.

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

Це не включає в себе верхній і нижній колонтитули. Сірі поля- це просто візуальне уявлення контенту, який будуть знайдений на сторінці.

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

Pattern Lab.Цей сайт спеціалізується на "атомному дизайні", де кожна частина контенту представляється як "молекула", яка становить велику сторінку.

Jumpcharts. Це сайт сервісу планування исоздание інтерактивного прототипу дизайну.Він вимагає платної підписки, але дозволяє швидко побудувати структурні схеми сторінок, не турбуючись занадто багато про роботу з кодом.

Wirefy. Wirefy ще одна система "атомного проекту". Всі інструменти доступні безкоштовно для розробників.

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

«Менше» означає «більше» з каркасом. Мета полягає в тому, щоб просто побудувати структуру. Зовнішній вигляд можна відрегулювати пізніше за допомогою CSS і розширеної розмітки.

5. Зробіть каркас для кожної сторінки на своєму сайті. Може бути заманливо зробити простий каркас і сказати: "Круто, я можу застосувати це до кожної сторінки, мені це підходить". Насправді, це призведе до створення звичайного і нудного сайту. Витратьте час, чтобисоздать інтерактивний прототип дизайну кожної сторінки, і ви скоро побачите, що кожна сторінка має свої організаційні "потреби".

Частина 3 з 4:

створення контенту

1. Підготуйте деякий контент, перш ніж почати створювати веб-сайт. Буде набагато простіше побачити, як виглядає стиль сайту, якщо у вас буде реальний контент замість порожніх полів. Вам не потрібно занадто багато інформації, але все буде виглядати набагато краще в макетах, якщо будете мати певний матеріал для статей і оригінальні зображення.

Вам не обов`язково потрібна основна частина статті, але ви повинні, по крайней мере, мати справжні заголовки.

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

фотографії.

Аудіо

Відео

Потоки або стрім (Twitter)

Facebook інтеграція

RSS (від англ. Really Simple Syndication - стандартизована система для поширення контенту)

Змісту каналу новин

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

Роботи фотографів будуть куди дешевше робіт досвідчених професіоналів.

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

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

Частина 4 з 4:

Перетворення ідеї в сайт

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

Не турбуйтеся надто про деталі, але спробуйте зробити їх майже такими ж, як все в кінцевому рахунку повинно виглядати.

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

Продовжуйте експериментувати з розміщенням для декількох сторінок, перш ніж рухатися далі. Нехай інші перевірять їх, щоб побачити, наскільки оніорганічно виглядають.

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

Додайте справжній контент в макет, щоб переконатися, що все разом виглядає добре.

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

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

Навігація

заголовки (

,

, etc.)

абзаци

Italics (Курсив)

Bolding (Жирний)

Посилання (активні, неактивні, плаваючі)

Використання зображення

іконки

кнопки

списки

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