Візуальний Камінь — Уроки, отримані під час редизайну мого вебсайту - javascript.org.ua

Мої малюнки для Inktober, як цей, хоча і не мають безпосереднього зв'язку з програмним забезпеченням, дали мені натхнення для роботи над дизайном мого вебсайту.

Останній раз я торкався свого розробницького сайту три роки тому. Тоді це був односторінковий сайт з кастомним налаштуванням Webpack, де Webpack використовувався як генератор статичних сайтів через шаблонізацію Nunjucks. Тепер я переписав, переробив і переглянув його за допомогою 11ty. Були кілька спроб, усі вони не мали успіху. Серед цих спроб я втратив натхнення або зовсім його не мав, просто знаючи, що хочу зробити сайт знову, але без чіткого напрямку для цього.

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

Дизайн: Вічний ворог програмістів

Знайти, що написати про себе та свої проекти, — це складно. Знайти відповідні зображення ще складніше.

Довгий час я хотів створити новий сайт для розробника, кілька разів намагаючись створити такий, який мені сподобається. Такий результат так і не з’явився. Серед цих спроб я почав з підходу, орієнтованого на бажання. Знаючи, що я хочу сайт на 11ty, знаючи, що я хочу портфоліо для організації моїх робіт, знаючи, що я хочу місце для того, щоб публікувати те, що пишу, здавалося, що є точка відліку. Але куди рухатися далі? Починати з дизайну сайту і складання тексту? Реально, знаючи такі прості вимоги, неможливо визначити наступний крок.

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

Використовуючи те, що є

Коли стоїш перед перешкодою в тому, як спроектувати сайт для розробника програмного забезпечення, простим рішенням є взяти кілька фотографій комп’ютерних екранів і кави з Unsplash і завершити роботу. Можливо, зображення з кібернетичним абстракцією. Але, окрім кліше та очевидних варіантів, яке зображення поставити поруч із інформацією про програму чи розробника?

Моя відповідь на це питання натхненна книгами O’Reilly та Manning: будь-що. Ось кілька їхніх книг, які я маю на своїй книжковій полиці: Python for Data Analysis від O’Reilly та Amazon Web Services in Action від Manning. На їхніх обкладинках є золото-хвостий лемур та ілюстрація чоловіка з кінця 1700-х років у кольоровому вбранні. У книзі O’Reilly на обкладинці зображено іншу тварину, а чоловік у книзі Manning, ймовірно, не чув про Amazon Web Services (я не знаю, не питав), але ці обкладинки чудові.

Обидва видавці програмного забезпечення мають виразні стилі для своїх обкладинок: O’Reilly — це малюнки тварин лінійним малюнком, а Manning — історичні, живописні малюнки моди. Вибір цих унікальних, пізнаваних ілюстрацій чітко ідентифікує їхні каталоги.
Інакше кажучи, відповідь на питання «яке зображення поставити поруч з інформацією про програму?» — це «те, що виглядає добре».

До речі, ось що говорять O’Reilly та Manning про свої обкладинки:

Це повертає нас до мого вебсайту.

Я кілька разів брав участь в Inktober. Це виклик для малювальників, коли їм надають серію тем, які потрібно малювати щодня протягом жовтня. Повні малюнки чорнилом можуть займати від 2 до 4 годин. Це виснажливо, але це зробило мене кращим ілюстратором завдяки дисципліні і дало мені початкову точку для вибору теми для малюнків.

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

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

Створення світлої теми, хоча я комп'ютерний вампір і світлі теми спалюють

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

Мої малюнки мають кілька спільних рис, на яких можна будувати:

Вони зазвичай мають високий контраст, чисто чорний і білий. Багато з них використовують негативний простір білого для того, щоб вказати форму об'єктів.
Багато з моїх малюнків мають рамки навколо них, але об'єкт на малюнку «випадає» з цієї рамки.
Використання прихованих ліній. Це коли контури форм на малюнку опускаються, і замість цього вони вказуються формою інших ліній і тіней. У малюнку на початку цього посту, погляньте на свічку як приклад прихованої лінії.
Мені подобається наносити багато чорнила. Заповнення — це весело!

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

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

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

Що стосується кольору, я вирішив відійти від натхнення, яке я знаходив у обкладинках O’Reilly та Manning. Дизайнерський вибір, який добре працює для них, це поєднання сміливого, суцільного кольору з їхніми ілюстраціями. Тверді смуги цього кольору будуть виступати на фоні книги. Якщо ілюстрація є основною рисою їхніх дизайнів, то поєднання її з яскравим, суцільним кольором є додатковим елементом. Більшість їхніх ілюстрацій буде знаходитися на білому фоні, але цей колір буде розташовуватися позаду заголовка.

Але коли я дивлюся на свої ілюстрації, це може бути не найкращий варіант для мого стилю. Це через великі заповнення чорнилом на моїх малюнках, які можуть змагатися за розподіл контрасту (темноти). У малюнках з різким чорним заповненням введення кольору може розмити контраст. Насправді, спосіб, яким малюється ілюстрація, може змінюватися залежно від того, чи буде додаватися колір.
До тих пір, поки я не зміню свою думку, я свідомо тримаюся мінімалістичної палітри: кольори за замовчуванням браузера для посилань і використання сірих ліній як акцентів.

Приклад цього можна побачити в розділі «Інші проекти» на моїй головній сторінці. Один з проектів, який я перераховую, Flef, має червону логотип. Наразі інші проекти не мають таких логотипів. Прикрасивши сторінку яскравим червоним кольором, це трохи порушує баланс. Щоб зберегти баланс контрасту в цій частині сторінки, я зменшив її непрозорість.

Логотип Flef при повній непрозорості (зліва) має такий контраст з іншими частинами сторінки, що виглядає негармонійно. Зробивши логотип більш прозорим (праворуч), він не порушує потік читання.

Зробивши логотип більш прозорим, він не порушує потік читання.

Аналогічно, сайт використовує сірі лінії, зазвичай тонкі, як акценти. Мені подобається колір #8888, це 50% сірий із 50% непрозорістю. На більшості фонових кольорів #8888 завжди наближає колір до середнього сірого. Загалом, мета цих рішень — надати сайту «чистий» вигляд, при цьому користуючись високим контрастом малюнків. З цієї причини зовнішній вигляд сайту мало відрізняється від стандартної теми браузера.

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

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

Ink CSS для пробної темної теми

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

Замість того, щоб створювати темну тему або кнопку перемикання, я зробив свої <img> теги марно дружніми до темної теми. Ну, це не так марно, оскільки деякі браузери підтримують перекриття кольору фону сторінки для примусового увімкнення темної теми. Я визначив CSS правило для елементів з класом .ink, яке змінює чорні лінії на зображенні, щоб вони набирали інверсний колір фону за ними.

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

Знімок екрану інтерактивної демонстрації, яка змінює фон зображення з класом .ink. Позитивний простір (чорний) інвертує фон, використовуючи лише CSS.

Ось CSS для цієї інк-теми.

@supports (  
 (filter: invert()) and  
 (mix-blend-mode: difference)  
) {  
 img.ink {  
 filter: invert();  
 mix-blend-mode: difference;  
 }  
}

Це просто, але я думаю, що це класно. І filter, і mix-blend-mode необхідні для того, щоб це працювало, тому що зображення виглядатиме інвертованим, якщо буде присутня лише одна з цих властивостей CSS. Це по суті працює шляхом подвійної інверсії зображення.
З цієї причини стиль обгорнутий у правило @supports. Крім того, я сподіваюся, що використання класу "ink" допомагає семантичному читанню HTML-розмітки, роблячи її більш описовою для вмісту; що <img> — це зображення чорнила.

Двоколонний макет з хаків CSS grid

Оскільки ілюстрації є обраною візуальною темою мого сайту і кольори вже вибрані, залишилося визначити макет.

На момент написання цього посту цей редизайн має чотири сторінки: Головна, Про мене, Interbuilder та Hefoki. Останні два — це сторінки проектів. Функціонально вони слугують оглядами. На таких сторінках їх дизайн може бути більш презентаційним, більш стильним. Це відрізняється від того, як виглядає сторінка, подібна до цієї, яку ви зараз читаєте, що складається переважно з тексту.

Візуальна основа — це ілюстрації. Для таких сторінок вони можуть займати велику частину простору. Тому я розділяю секції сторінки на дві колонки: одна з картинкою, інша — з текстовим вмістом. Під час прокручування користувачем, фіксоване позиціювання (sticky positioning) дозволяє зображенню слідувати за користувачем.

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

Ось приклад цього типу адаптивного макету:

Знімки екрану інтерактивної демонстрації, яку я написав, щоб показати зміну макету. Зізнаюсь, це було частково виправданням для того, щоб просто погратися з контейнерними запитами (container queries) і повеселитись з CSS.

HTML для цього дуже простий. Основне CSS-правило, яке змінює макет, — це властивість display контейнера між block і grid, а також налаштування властивості grid-column для елементів, коли використовується макет grid. Перемикання макетів таким чином зберігає розумний потік документа і робить розмітку плоскою, ось так:

Lorem Ipsum
Amet ratione fugit at atque possimus?
Ipsum incidunt!
Elit ab saepe similique suscipit.

Перемикання між макетом на основі grid на десктопі і стандартним потоковим позиціюванням браузера на мобільному пристрої робить розмітку плоскою, ось так: є лише один контейнер .vertical-split, і він знаходиться вгорі.
Для зображення клас .slide має бути застосований до безпосереднього нащадка.

Ось скорочена версія поточного CSS:

.vertical-split {  
 max-width: 1200px;  
}  

.vertical-split {  
 @media (  
 (min-width: 900px) or  
 ((orientation: landscape) and (min-width: 750px))   
 ){  
 display: grid;  
 --split-width: 350px;  

 grid-template-columns: var(--split-width) auto;  

 grid-column-gap: 2em;  
 @media (max-width: 1000px) {  
 grid-column-gap: 1em;  
 }  

 /*  
 За замовчуванням, елементи розташовуються в лівій колонці,  
 якщо тільки у них немає класу .flip  
 */  
 & > :where(*) { grid-column: 1; }  
 & > .slide { grid-column: 2; }  
 & > .span { grid-row: 2 / span 9999; }  

 &.flip {  
 & > :where(*) { grid-column: 2; }  
 & > .slide { grid-column: 1; }  
 & > .span { grid-row: 1 / span 9999; }  
 }  

 & > .slide { grid-row: 1 / span 9999; }  

 & > picture.slide > :is(img, src),  
 & > img.slide {  
 position: sticky;  
 top: 0%;  
 width: 100%;  
 height: 100%;  
 max-height: min(100%, 100vh);  
 max-height: min(100%, 100dvh);  
 }  
 }  
}  

.vertical-split > :where(img) {  
 margin: 0 auto;  
 width: auto;  
 max-height: 200px;  
 max-height: 50vh;  
 max-height: 50dvh;  

 object-fit: contain;  
 object-position: center;  
}

Це робить кілька речей.

Якщо будь-які з використовуваних CSS-особливостей не підтримуються, це повинно працювати з помірною втратою функціональності.
Найбільш ризикованою CSS-особливістю на момент написання є вкладеність CSS-селекторів. Під час розробки статичних сайтів у минулому я зазвичай використовував SCSS для цієї функції, але сьогодні це вже в CSS Baseline 2023, і він має 91,53% підтримки в браузерах.
Я переглянув сайт в застарілих, заборонених браузерах. Оскільки сайт читається в IE5–6 і Safari 2005 року, я вважаю, що це нормально.
Цей компонент дозволяє легко додавати різноманітність макету сайту, горизонтально змінюючи місцями колонки з текстом і зображенням. Клас .flip виконує цю задачу.
Використання CSS-перемінної для контролю розміру розділення. В HTML можна змінювати це значення за допомогою вбудованого стилю. Це дозволяє швидко змінювати дизайн, зберігаючи адаптивність.
Чистий CSS дозволяє браузеру робити те, що йому найкраще дається, роблячи сторінку швидшою.

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

У висновку

Моя думка про те, що складає хороший дизайн, може змінюватися, але наразі це те, що є.

Ця стаття була більш амбіційною на ранніх етапах, але це заважало мені її завершити. Іронічно, що була частина про прийняття незавершеності, щоб рухатись вперед, і тримання за це гальмувало мій прогрес. Так само, я писав про поділ і розподіл вмісту на кілька сторінок, і в результаті зробив це в цій статті, перемістивши 1500 слів у окремі документи. Ранні варіанти містили розділи про текстовий вміст сайту та код для генерації статичного сайту. Можливо, я ще розповім більше про ці речі в майбутньому, але вирішив, що найкраще зменшити обсяг статті. Фокус — це добре.

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

Оригінально опубліковано на https://gilchrist.tech.

Перекладено з: Visual Keystone — Things learned redesigning my website