Як розробити дизайн і код персонального веб-сайту

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

Навіщо проектувати самостійно?

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

1. Виділятися з загальної маси

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

2. Практикуйтеся у своїй майстерності

  • Розробка допоможе вам застосувати на практиці алгоритми, принципи розробки, інструменти, HTML і CSS. Вам буде зручніше розробляти інтерфейси і виводити їх в Інтернет.

3. Підвищення продуктивності додатків

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

4. Розвивати професійні навички

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

5. Це може бути весело

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

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

Створення каркаса моделі

Перший крок — створення приблизного каркаса сайту. Створення каркаса допомагає визначити структуру сторінки до додавання візуального дизайну та контенту. Каркас не обов’язково повинен бути красивим, він повинен фокусуватися на компонуванні контенту. Ви можете намалювати його вручну або скористатися основними функціями інструменту розробки. Щоб створити каркас (прототип), я уявляю дизайн як серію прямокутників. Елементи веб-сторінки являють собою прямокутні блоки, які будуються зверху вниз. Почніть з прямокутників, для цього вам точно не будуть потрібні жодні мистецькі таланти.

Читайте також  AliceVision: фотограмметрія з командного рядка

Структура веб-сайту

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

Каркас не обов’язково повинен бути ідеальним. Як тільки структура вашого сайту буде вас влаштовувати, ви зможете перейти до візуального дизайну.

Застосовуйте візуальний дизайн

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

Реалізація макета

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

Додавання розділів і вмісту сховища

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

На даному етапі розглянемо форму, розмір, межі та тіні. Поступово оновлювати основні прямокутники до потрібного вам стилю.

Оновлення графіки

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

Додайте колір

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

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

Читайте також  Як технології маніпулюють вашим розумом: погляд ілюзіоніста і експерта з етики дизайну Google

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

Після того, як ви додали колір, переходите до огляду загального дизайну та внесення змін.

Уточнення

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

— Виглядає затісно?

  • Збільште відступи і поля

— Важко читати текст?

  • Виберіть більш чіткий шрифт або збільшити його розмір
  • Збільште колірний контраст між фоном і переднім планом

— Важко розібрати зміст?

  • Додайте заголовки з більш великим шрифтом
  • Додайте більше інтервалів між заголовками та абзацами

— Виглядає недбало або непослідовно?

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

Як тільки ви закінчите розробку дизайну, ви можете почати переводити його в код.

Створення HTML–структури

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

 

Стилизуйте його з допомогою CSS

Оскільки HTML-документи додаються зверху вниз, ви можете почати з верхньої частини документа і працювати вниз. Використовуючи створений вами дизайн, постарайтеся скопіювати його як можна ближче до HTML & CSS.

Пам’ятайте, що це не повинно бути за принципом «все або нічого», ви можете реалізувати частини, необхідні для початкової версії сайту. Для мого сайту мені було необхідно лише введення, посилання і спосіб розміщення блогів, так що, це все, що я почав втілювати. Якщо ви не готові до втілення розділу, ви можете видалити його, поки не будете готові.

Розташування секцій та елементів

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

Читайте також  Як влаштовані технічні індикатори на фондових ринках

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

Додайте візуальні стилі

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

Зробіть його чуйним

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

Коли ваш проект реалізований, все готово! Тепер ви можете вирішити, що хочете з ним робити.

Наступні кроки

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

 

Висновок

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

Степан Лютий

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

You may also like...

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *