Дизайн веб-сайту, макети та Інтернет планування сайту

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

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

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

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

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

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

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

Поділ сторінки на три рівні колонки не підходить для нашого рекламного блоку

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

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

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

Давайте додамо поля шириною 5 пікселів справа і зліва від рекламного блоку, щоб відокремити його від країв колонок. Таким чином, ширина вкрай правої області повинна бути не менше 346 пікселів. Помноживши це значення на три, отримаємо 1038 пікселів, що перевищує максимальну ширину області перегляду, а адже ми ще не врахували проміжки між колонками. Структура, що складається з трьох колонок, була б простим рішенням, але наша задача вимагає більш тонких розрахунків.

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

До того ж, обидва лівих блоку стануть занадто вузькими для використання як колонок. Логічне співвідношення 2: 1 буде порушено.

Кратність чотирьом часто дозволяє знайти правильне рішення. На малюнку сторінка розділена на вісім блоків

Щоб створити більш тонку сітку колонок, вісім блоків розділимо на шістнадцять

З іншого боку, кількість юнітів і колонок, кратне чотирьом, часто дозволяє знайти правильне рішення, навіть якщо самі по собі вони не годяться для роботи. (Насправді, більшість ефективних рішень побудовані з чотирьох, восьми або шістнадцяти колонок, і це потрібно враховувати при створенні нових сіток.) Якщо розділити сторінку на 8 юнітів по 120 пікселів кожен, можна буде об'єднати 3 юніта в колонку шириною 360 пікселів, що ідеально підійде для рекламного блоку. Ширина лівої області складе 600 пікселів, тому вихідне співвідношення 2: 1 зберігається, і в цій області можна розмістити основний текст статті. Але ліва область складатиметься з 5 юнітів - не надто вдале число, якщо нам буде потрібно подальше розділення.

Непродуманим рішенням є розбиття лівої області на 2 колонки по 300 пікселів кожна. По суті, ми так і вчинимо, але цю можливість слід використовувати для прийняття більш обдуманого рішення. Розділивши 8 блоків сітки шириною 120 пікселів на 16 блоків шириною 60 пікселів кожен, ми отримаємо більш тонку сітку колонок. Тепер ліву область можна розділити на 2 колонки по 5 юнітів кожна, а права область складатиметься з 6 юнітів або, якщо знадобиться подальше розділення, 2 колонок по 3 юніта кожна.