MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

Переклад не закінчено. Будь ласка, допоможіть перекласти цю статтю з англійської.

У статті Як виглядатиме ваш веб-сайт? ми розглянемо, яку попередню планувальну і дизайнерську роботу вам потрібно зробити до того, як ви почнете писати код. Зокрема, те, яку інформацію буде містити ваш сайт, які шрифти і кольори ви будете використовувати і що саме буде робити ваша веб-сторінка. 

Спочатку планування

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

Для початку дайте відповідь на ці запитання:

  1. Про що ваш веб-сайт? Ви любите собак, Нью-Йорк, Пекмена?
  2. Яку інформацію з теми ви хочете представити? Напишіть заголовок і кілька абзаців тексту і подумайте над зображенням до них. 
  3. Як буде виглядати ваш вебсайт, у загальному розумінні? Який колір бекграунду? Які шрифти підійдуть: формальні чи веселі, такі, що кидаються в око, чи прості?

Примітка: складні проекти вимагають детальної документації, включно з вказаними конкретними кольорами, шрифтами, відстанями між частинами контенту, стилем тексту тощо. Іноді це називається посібником зі стилю чи бренд-буком, ви можете подивитися приклад тут: Firefox OS Guidelines.

Замальовка вашого дизайну

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

Примітка: навіть при розробці справжніх складних сайтів команда дизайнерів зазвичай починає з приблизних замальовок на папері і вже потім робить цифрові макети у графічному редакторі чи різних онлайн-сервісах. 

Команди веб-розробників зазвичають мають графічного дизайнера і user-experience UX-дизайнера. Графічні дизайнери відповідають за візуальну складову сайту. UX-дизайнери відповідають за те, який досвід отримають відвідувачі при користуванні сайтом. 

Обрання матеріалів для сайту

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

Текст

Ви вже маєте текст і заголовок з попередніх вправ. Тримайте їх напоготові. 

Кольорова тема

Щоб вибрати колір, скористайтеся Color Picker і знайдіть той, який вам подобається. Коли ви клікнете на колір, ви побачите дивну комбінацію з шести символів, на зразок #660066. Це так званий hex-код (від hexadecimal — шістнадцяткова системи числення), який представляє вибраний вами колір. Скопіюйте його куди-небудь.

Зображення

Щоб вибрати зображення, підіть на Google Images і пошукайте щось підходяще.

  1. Коли ви знайдете те, що треба, клікніть на зображення. 
  2. Натисніть кнопку Переглянути зображення.
  3. На наступній сторінці, правою клавішею мишки клікніть на зображення, виберіть "зберегти як..." і збережіть зображення де-небудь на своєму комп'ютері. Або ви також можете скопіювати веб-адресу зображення з адресного рядка браузера і зберегти його де-небудь. 

Примітка: більшість зображень у мережі, включно з Google Images, захищені авторським правом. Щоб не порушувати його, скористайтеся фільтром прав: 1) клікніть на Інструменти, а потім на 2) Права на використання:

Шрифт

Щоб вибрати шрифт:

  1. Підіть на Google Fonts і прогортайте сторінку, поки не знайдете шрифт, який вам подобається. Також можете скористатися фільтром справа.
  2. Клікніть на  іконку "плюс" (Select this font) в правому куті шрифту.
  3. Клікніть кнопку "* Family Selected" внизу сторінки ("*" залежить від того, скільки шрифтів ви обрали).
  4. У вікні попапу ви побачите код для вставлення шрифту. Скопіюйте його і збережіть на потім. 

 

Мітки документа й учасники

 Зробили внесок у цю сторінку: mdymytrova
 Востаннє оновлена: mdymytrova,