Основи дизайну та принципи створення web-сайтів

Модуль 2

Тема 5. Основи дизайну та принципи створення

web-сайтів.

План

1. Просторові співвідношенн. Форма. Колір. Текстури. Шрифт і текст.

2. Поєднання і баланс . Контраст. Динаміка.

3.Типи сайтів.

4. Створення сайту. Формат сторінки. Заголовки. Навігація.

5. Блоки тексту.

6. Векторна і растрова графіка

7. Функції і призначення графіки (виставочна графіка, фон, банер, візуальна графіка)

1. Просторові співвідношенн. Форма. Колір. Текстури.

Шрифт і текст.

Просторові співвідношення

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

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

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

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

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

Форма

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

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

Сприймання людиною форм та фігур Проведені психологами експерименти зі сприймання різних форм та фігур дають підстави зробити декілька висновків: форма об’єкта впізнавана незалежно від його розмірів, кольору і розташування; гострий кут упізнається першим; прямі контури і кути впізнаються раніше від кіл.

Зоровий аналізатор сприймає елементи у такій послідовності:

1. Горизонтальна пряма лінія визначає орієнтацію зображення. Її око вловлює найперше

2. Вертикальна пряма лінія також дає змогу відповідним чином зорієнтувати зображення і віднести його до певного смислового ряду.

3. Величина (відносний найбільший розмір). На дуже ранній стадії аналізу мозок виділяє фігури найбільшого порівняно з іншими об’єктами розміру. Величина завжди сприймається лише як відношення до інших об’єктів зображення і не заважає упізнанню форми.

4. Симетрія лежить в основі всіх символів досконалості.

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

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

7. Кут, трикутник, квадрат. Найпомітнішим елементом є трикутник вершиною вгору, далі — трикутник в інших положеннях, квадрат, прямокутник, круг та багатогранник. Трикутник — особливий об’єкт, він має чітку спрямованість та внутрішню динаміку. Зазвичай у веб-дизайні його використовують для позначення напрямку руху, стрілки, маркера списку чи кнопки. Прямокутник відіграє особливу роль у комп’ютерному дизайні взагалі та у веб-дизайні зокрема. Цю фігуру використовують найчастіше: майже всі об’єкти екрана мають прямокутну форму — вікна, блоки тексту, зображення.

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

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

10. Текстура— це зображення різних поверхонь: гладких, шорстких, переплетених.

11. Аналіз образів. Під час розглядання будь-якого зображення слід пам’ятати, що око не міряє — воно порівнює з його узагальненим еталоном, сформованим у процесі життєдіяльності.

Колір

Поряд з формою, шрифтом і текстурою, колір належить до базових будівельним матеріалам як в «паперовому», так і особливо в мультимедійному і веб-дизайні. Незвичайний, але ретельно продуманий і збалансований набір кольорів цілком може статит основою чудової композиції - при тому що інші її аспекти будуть самими що ні на є ординарними. Будь-який колір, як і будь-яка форма, несе з собою своє власне настрій, звучання, ноту певної висоти і тембру. Різноманітність колірних настроїв воістину величезна - навіть у мінімальному наборі семи кольорів веселки, другими у більшості обмежується знайомство зі світом кольору, у кожного є свій «улюблений колір ». Очевидно, що сприйняття кольору зобов'язана бути більш суб'єктивним, ніж сприйняття тієї ж форми, - різні у всіх людей не тільки улюблені кольори, але і відчуття, які викликає у них той чи інший колір. Тим не Проте в колірній всесвіту є свої, цілком універсальні закони, які будь-дизайнер зобов'язаний знати і вміти застосовувати на практиці. Це не дасть, на жаль, гарантії, що його колірні рішення будуть подобатися всім, але принаймні дозволить йому уникнути поширених помилок і додасть його робіт професіоналізм, очевидний навіть для тих, у кого алергія на якісь конкретні кольори. Колір - це та область, в якій комп'ютерна графіка має найбільшу перевагу перед графікою природною. Екран комп'ютера, на відміну від листа паперу, сам випромінює світло, і регулювання кількості цього світла дозволяє охопити набагато більш широкий колірний спектр, ніж той, який можна відтворити на папері.

КОЛІР в HTML

Кольори тексту і фону грають в HTML особливу роль - ці параметри вказуються в атрибутах тега BODY і тому ставляться швидше властивостей всього документа, ніж параметри набору тексту. А оскільки помилка в цих параметрах може запросто призвести до нечитабельності тексту (якщо колір букв збігається з кольором фону або близький до нього), користувач будь-якого візуального броузера має можливість вибрати свої власні значення для кольору фону, тексту і посилань і заборонити броузеру звертати увагу на колірні атрибути тега BODY. Одним з наслідків цього є те, що в цьому тегу потрібно або не вказувати ні одного колірного атрибута, або обов'язково перерахувати всі три, будь-яка часткова специфікація (наприклад, вказівка ​​кольору тексту без згадки про колір фону) може конфліктувати з квітами, встановленими за замовчуванням в броузері користувача.Якщо на сторінці використовується фонове зображення, що вказується в тезі BODY колір фону повинен відповідати кольору «середньостатистичного» піксела фонового зображення. Тільки за цієї умови користувачі, відключено завантаження графіки, не будуть зазнавати труднощів з читанням тексту, а ті, у кого фонове зображення ще не докачати, не будуть шоковані різким перескоком квітів у той момент, коли фон раптово стелить під уже видимі елементи переднього плану. Кольори, які вказуються в атрибуті color тега FONT, перекривають як колір з атрибуту text тега BODY, так і колірні установки броузера. Можна навіть міняти колір посилань, вставивши тег FONT з атрибутом color всередину тега A. CSS, в свою чергу, дозволяє міняти не тільки колір букв, але і фоновий колір будь-якого елемента, в тому числі і фоновий колір окремих символів і фрагментів тексту. Якщо частина тексту зафарбована одним кольором, а частина іншим (що зазвичай буває, коли фон складається з сильно розрізняються за кольором областей - наприклад, світлої центральної частини і темної смуги уздовж межі екрану), фоновий колір в тезі BODY повинен бути таким, щоб на ньому були легко помітні обидва кольори тексту. Вибравши для тексту чисто білий текст на небілим тлі, майте на увазі, що броузер не стане відтворювати фоновий колір при друку сторінки на принтері. MS1E надійде при цьому цілком розумно, самостійно замінивши перед посилкою на друк колір тексту на чорний, але в броузері Netscape для цього потрібно буде встановити (За замовчуванням скинутий) прапорець Black Text в налаштуваннях друку (точніше, вам як автору сторінки потрібно буде нагадати зробити це вашому читачеві), - інакше з принтера вилізе білий аркуш без будь-яких слідів тексту сторінки. Про це потрібно пам'ятати при виборі колірної схеми для сторінок, які користувач з великою ймовірністю захоче роздрукувати (рахунків, інструкцій і т.п.).

Красива і приваблива веб-сторінка потребує використання цілісної кольорової схеми оформлення. Щодо застосування кольорів у веб-дизайні можна виділити кілька правил:

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

2. Розділяючи елементи сторінки, не забувайте про поля між ними. Краще, щоб це вільне місце мало колір фону, і бажано, щоб він був світлим.

3. Краще, коли тло сторінки є світлим, а текст, відповідно, — темним. Це звичніше і зручніше для очей та мозку. Водночас яскраві кольори незамінні для привертання уваги.

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