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

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

Спершу планування

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

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

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

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

Ескіз вашого дизайну

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

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

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

Вибір матеріалів

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

Текст

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

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

Щоб вибрати колір, який вам подобається, скористайтеся 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. У спливаючому вікні побачите рядки коду. Можете скопіювати їх, щоб зберегти на потім. 

 

 

У цьому розділі

 

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

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