Головна сторінка веб-сайту: дизайн та програмування

Головна сторінка веб-сайту: дизайн та програмування

06.11.14 12:52 0 1506
Дизайн багатьох веб-сайтів починається з шаблону домашньої сторінки - логічної відправної точки, - тому що вона багато в чому визначає естетичний вигляд сайту. Однак домашня сторінка часто може бути настільки нетиповою, що ми не зможемо досягти більш важливої ​​мети. Починаючи працювати над дизайном, ми хочемо заздалегідь вирішити якомога більше серйозних завдань.

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

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

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

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

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

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

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

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

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

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

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

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

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

Джерело: http://webmisto.te.ua
Автор: УкрЗахідІнформ .
ОЦІНИТИ НОВИНУ
3 (голосів: 127)

КОМЕНТАРІ