Урок 2. Головне — ідея

Давайте сьогодні поговоримо про рибу. Так-так, про яку-небудь велику цілу рибину, що лежить перед вами на тарілці  і ніби запитує: «Агов, дівчино-хлопче, звідки ти мене почнеш їсти? З голови, або з хвоста?»

Я не думаю, що ми часто притримуємося в цьому питанні яких-небудь правил. Бо чи не все одно? Головне – з’їсти.

Дуже схожою мені уявляється ситуація з дизайнуванням. Головне – зробити дизайн. А з чого почати  — з опанування CSS’y, чи розробки зовнішнього вигляду?… Навідміну від поїдання риби, розробку інтернет-сторінки дуже важливо починати саме з голови. Тобто, із зовнішнього вигляду. Це – приємна творча справа, яка не вимагає від вас ніяких допоміжних знань чи навичок. Головне – мати гарну уяву та вміти хоч трохи працювати з графічним редактором.

Припустимо, що ви приблизно уявляєте, якого вигляду хотіли б надати своєму блогу: в теплих тонах чи холодних буде виконано дизайн; спортивний, аскетичний, веселий, романтичний чи яскравий — головне мати це уявлення.

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

1. Візьміть чистий аркуш паперу, олівець, лінійку та стиральну гумку на всяк випадок.

2. Накресліть приблизну схему власного блога. При цьому варто пам’ятати, що щирина-довжина шпальт може бути довільною. Оптимальний варіант, якщо ширина тіла блога не буде перевищувати 960 пікселів:

3. Обов’язковими елементами наших блогів є: тло (на малюнку цифрою не зазначено), шапка (1), тіло блога (2), широка шпальта (3), вузька шпальта (4), стрічка з категоріями та рсс (5), футер (6).

4. Розрахуйте ширину вузької та широкої колонки блога — в сумі вони не мають перевищувати 960 пікселів. Тобто, якщо широка колонка у вас складатиме 620 пікселів, вузька матиме ширину не більше 240 пікселів. Також розрахуйте висоту шапки і футера — вони можуть бути довільними. Ці розрахунки нам знадобляться пізніше.

5. Можливо, вам одразу спаде на думку який-небудь простий дизайн на кшталт вищенаведеного, але так станеться не обов’язково. Погляньте на власну схему, уявіть її в кольорі. Що хочеться на ній побачити? Квіти? Цукерки? Літаки? Гітару? Декілька різних елементів? Занотуйте все це біля схеми.

6. Тепер рушаємо до інтернету як до магазину зі списком потрібних продуктів (занотованих елементів дизайну). Вишукуємо їх зображення по черзі. Можна користуватися звичайним пошуковиком, а можна зайти на спеціальні інтернет-сторінки і пошукати там ( grsites.com | freewebpageheaders.com | pdclipart.org ).

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

8. Вийдіть за кордони. Малюнки зовсім не обов’язково мають розміщуватися всередині елементів. В кращих дизайнах зображення виходять за кордони. Що я маю на увазі? Градієнтні смужки на схемі вище мають кордони. Їх обмежують шапка та футер блога. На малюнку нижче у зебри кордонів нема — копита продовжуються у футері, голова у шапці блога переходить в спину, що в тілі блога:

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