№ 97: Фотошопінг Альманаху - CSS-хитрощі

Anonim

«Альманах» був запущений у версії 9 і ніколи так і не був зроблений. З кожним днем ​​він стає все ближчим і ближчим. Тож у версії 10 ми розробимо припущення, що це «зроблено».

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

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

Ми робимо це двосторінковим розворотом і використовуємо градієнти, щоб натякати на тінь і прив’язку. Ми граємо з деякими тінями, щоб продовжити ефект.

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

Ця область розділена на дві частини (що добре працює з макетом на 2 сторінки). Одна сторона призначена для властивостей CSS, а інша сторона - для селекторів CSS. Щоб зробити візуально більш чітким (окрім простого титрування двох сторінок), дві сторони мають різний базовий колір.

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