При створенні професійної графіки для Web використовується текст із згладженими краями. Згладжування - це легка розмитість на нерівних краях, що згладжує переходи між кольорами. Не згладжені краї, навпаки, виглядають зазубленими і ступінчастими. Виключенням з цього загального правила є текст малого розміру, (10, 11 пунктів і менше), застосування згладжування робить його практично невиразним. Текст малих розмірів виглядатиме набагато краще без згладжування.
При розробці Web-сторінки засобами базового HTML є два комплекти шрифтів: пропорційний і шрифт фіксованої ширини.
Пропорційний шрифт - інакше "шрифт змінної ширини" для кожного символу виділяє різну кількість місця залежно від його зображення. Наприклад, в пропорційному шрифті заголовна "W" займає більше місця в рядку по горизонталі, ніж прописна "I". Такі гаринітури, як: Times, Helvetica і Arial є прикладами пропорційних шрифтів.
Web-браузери для більшості текстів на Web-сторінці, включаючи основний текст, заголовки, списки, цитати і т. д., використовують пропорційні шрифти. Як правило, великі уривки основного тексту зручніше читати, коли вони надруковані пропорційними шрифтами. Оскільки більшість користувачів не мають часу замінити шрифти, встановлені за замовчуванням, з великою вірогідністю можна припустити, що текст на сторінці буде відображений шрифтом Times розміром 10 або 12 пунктів або Helvetica. Але це всього лише загальне правило.
Шрифт з фіксованою шириною надає однакове місце для всіх символів шрифту. Заголовна "W" займає не більше місця, чим прописна "I". Прикладами шрифтів фіксованої ширини є гарнітури Courier і Monaco. У Web-браузерах шрифти фіксованої ширини використовуються для відображення будь-якого тексту всередині наступних HTML-тегів: <рге>, <tt>, <code>, <kbd>,<samp>, <хтр>.
Оскільки багато людей не міняють налаштування шрифтів, що встановлені за замовченням, текст, що знаходиться у вказаних тегах, буде виведений одним з шрифтів типа Courier.
Дизайнери швидко зрозуміли, що найвірніший спосіб абсолютного контролю над шрифтами - помістити текст в зображення. Можна часто бачити заголовки, підзаголовки і оголошення, що виконані у вигляді файлів GIF.
Зазвичай розмір шрифту визначається в пунктах (72 пункти (пт) = 1 дюйм висоти шрифту) але, на жаль, ці розміри не достатньо точно переводяться між платформами. Частково це відбувається тому, що їх операційні системи управляють дисплеями з різними роздільчостями. Зазвичай Windows використовує роздільчість екрану 96 точок/дюйм, а MACOS - 72 точок/дюйм. Монітори MultiScan допускають вищу роздільчість.
Шрифт на екрані дисплея Масintosh має такий самий розмір, як і при друці (наприклад, 12 пт Times на екрані виглядає так само, як 12 пт Times на папері).
Для шрифтів Microsoft це не виконується, і розмір шрифту при виводі на екран є більшим, що полегшує читання з дисплея. В результаті шрифт розміром 12 пт на Windows більше схожий на друкарський шрифт в 16 пунктів. Щоб отримати на Windows друкарський розмір 12 пт, потрібно вибрати розмір шрифту 9 пунктів (але тоді користувачі комп'ютерів Масintosh побачать текст майже нерозбірливим, оскільки він буде відображений шрифтом розміром всього 6,75 пт).
На даний момент майже всі зображення в Web, представлені в трьох форматах: GIF, JPEG та PNG
GIF - Grafic Interchange Format можна назвати традиційним форматом файлів Web. Він був першим форматом файлів, який підтримували Web-браузери, і до цього дня продовжує залишатися основним графічним форматом Web.
Отже, GIF підтримує не більше 256 кольорів, а це означає, що всі зображення, які зберігаються в GIF-форматі, явно або неявно зменшують кількість кольорів, щоб вкластися в цей ліміт (різні програми з різним успіхом). Тому, якщо взяти красиву фотографію з плавними переходами і ледь вловимими відтінками кольору, то після перетворення все буде набагато гірше - відтінки перестануть бути невловимими, і вся фотографія набуде неприродного, нереалістичного вигляду. Тому, якщо треба все-таки зберегти фотографію у форматі GIF і передати всі відтінки, то доводиться йти на хитрості. Наприклад, до фотографії можна застосувати певний художній фільтр і перетворити її на малюнок або застосувати тонування. Зате немає жодних проблем із збереженням малюнків і креслень в цьому форматі, вони, як правило, добре стискаються і не містять багато кольорів.
Іншим найбільш популярним графічним форматом в Web є JPEG - Joint Photographic Experts Group. Він містить 24-розрядну інформацію про колір. Це 16,77 млн. кольорів на відміну від 256 кольорів формату GIF. У JPEG використовується так зване стиснення з втратами. Це означає, що певна інформація про зображення в процесі стиснення відкидається, але в більшості випадків погіршення якості зображення не завдає шкоди і часто навіть не помітно.
Фотографії або будь-які зображення з плавними градаціями кольорів краще за все зберігати в JPEG-форматі, тому що він пропонує вищу якість зображень, що вміщуються у файл меншого об'єму. Проте, JPEG не є кращим рішенням для графічних зображень з одноколірними областями, оскільки цей формат має тенденцію псувати кольори цятками і кінцевий файл, як правило, буде дещо більшим та гіршої якості, ніж GIF-файл для того ж зображення.
Це третій графічний формат, що конкурує за постійне використання в Web. Це формат PNG - Portable Network Graphic, який, не дивлячись на свої переваги, знаходиться здебільшого в тіні. Підтримувати PNG як вбудовану графіку браузери почали значно пізніше за вищеназвані формати, але PNG має всі шанси стати популярним форматом в Web. PNG може підтримувати 8-розрядні індексовані кольори, 16-розрядні півтони або 24-розрядні повнокольорові зображення, використовуючи схему стиснення без втрат. Це забезпечує вищу якість зображень, а іноді і менший об'єм файлів в порівнянні з форматом GIF.
Крім того, файли PNG мають деякі чудові функції, наприклад, вбудоване управління коефіцієнтом гамма, і змінні рівні прозорості (це дозволяє показувати малюнок фону крізь відкидані м'які тіні).
Оскільки зображення Web існують лише на екрані дисплея, буде технічно правильно вимірювати їх роздільчість в пикселах на дюйм (ppi - pixels per inch). Інша одиниця вимірювання роздільчості - кількість точок на дюйм (dpi - dots per inch) відноситься до роздільчості друкарських зображень і залежить від роздільчості друкуючого пристрою.
Але, оскільки реальні розміри графіки залежать від роздільчості дисплею, вимірювання в дюймах стає для Web-застосувань неприйнятним. Єдиною значущою одиницею вимірювання стає піксел.
Практично створювати зображення з роздільчістю 72 ppi (це кращий варіант для представлення на екрані), звертаючи увагу тільки на загальні розміри в пікселах. В процесі створення графіки на Web можна взагалі не використовувати дюйми. Важливим є розмір зображення у порівнянні з іншими зображеннями на сторінці і загальним розміром вікна браузера.
Наприклад, багато користувачів використовують 15-дюймові дисплеї з роздільчістю 800x600 пікселів. Щоб гарантувати заповнення графічною заставкою всього простору екрану, краще зробити його шириною не більше 780 пикселов (враховуючи, що частина пікселів справа і зліва буде використана для вікна і для смуги прокрутки). Розмір решти кнопок і зображень на сторінці слід вимірювати в пікселах відносно ширини 780 пікселів.
Без сумніву, саме графіка зробила Web таким, який він є сьогодні, але потрібно знати, що багато користувачів переживають до графіки в Web почуття на межі любові і ненависті. Не варто забувати, що графіка збільшує час, що необхідний для передачі по мережі Web-сторінки; великий об'єм графіки означає істотний час завантаження, який випробовує терпіння читача, особливо якщо він додзвонюється з використанням стандартного модемного з'єднання.
В цьому відношенні для Web-дизайнера існує єдине найбільш важливе правило: розмір файлу графічного зображення повинен бути мінімально можливим! Створення зображень, призначених для передачі по мережі, покладає відповідальність на розробників серйозно відноситися до проблеми часу завантаження.
Багато Web-дизайнерів сходяться на думці, що одна з головних проблем Web-дизайну - різноманіття браузерів і платформ, кожен з яких по-різному підтримує HTML і сценарії. З випуском кожного нового браузера покращуються їх характеристики і можливості, але це не означає, що ранішні версії при цьому зникають. Значна частка користувачів не схильні гнатися за новітнім і кращим. Одні задовольняються тим, що у них є, а інші, найімовірніше, працюють на комп'ютерах фірм або установ, які вибрали браузери за них. Тому створений сайт має практично однаково відображатися у рідних браузерах, та різних версіях
При розробці Web-сторінки важливо врахувати розмір екрану. Сторінка повинна бути доступною (і правильно відображатися) для максимально можливого числа користувачів. Необхідно відштовхуватися від найменшої роздільності сучасних моніторів і розробляти сторінку так, щоб вона гарантовано цілком відображалася на екрані.
Більшість дизайнерів рекомендують розробляти сторінки у форматі 800x600, щоб при перегляді користувачам не довелося застосовувати горизонтальну прокрутку. Горизонтальна прокрутка завжди ускладнює сприйняття, тому дизайнери традиційно її відкидають.
Все більше число розробників вважає стандартним роздільчість 1024x768. І зовсім одиниці розробляють сторінки для ще вищих роздільчостей. Звичайно, рішення буде, в першу чергу, залежати від аудиторії. Наприклад, якщо сайт призначений для дизайнерів графіки, то вважається, що вони мають дисплеї, принаймні, з дозволом 1024x768 або вище, відповідно до чого і розробляється сторінка. Якщо сайт призначений для ширшого кола користувачів, в них можуть бути монітори дещо гіршими.
Колірні монітори можуть різнитися у відображенні кольорів. Це ще один чинник, який впливає на рішення розробника.
Існує набір з 216 кольорів, що складається з кольорів системних палітр МасOS і Windows, що відображаються однаково на рідних платформах, операційних системах та браузерах. Такий набір називається Web-палітрою безпечних кольорів (Web Palette). Багато дизайнерів вважають, що краще користуватися цією палітрою при створенні Web-графіки та елементів HTML, щоб сторінка виглядала однаково для всіх користувачів.
Першим кроком при визначенні вірогідного розміру Web-сторінки повинно стати визначення максимального простору, що забезпечується дисплеєм. Комп'ютерні дисплеї мають різні стандартні розміри і зазвичай вимірюються в дюймах - 15", 17", 19" і 21".
Іншою характеристикою є роздільчість монітору - загальне число пікселів (picture's element - елемент картинки) на екрані. Чим вище роздільчість, тим детальнішим буде зображення. Знаючи можливе число пікселів, можна створювати відповідно до нього зображення (що також вимірюється в пікселах) та елементи сторінки.
Важливо пам'ятати, що чим вище роздільчість на даному дисплеї, тим більше пікселів спресовано в наявному просторі екрану. В результаті піксели стають меншими і відповідно зменшуються зображення та інші елементи сторінки.
Саме з цієї причини вимірювання в Web проводяться в пікселах, а не в дюймах. Те, що на одному моніторі представляється величиною в дюйм, на моніторах інших користувачів може виглядати більше або менше. Коли розробник працює з пікселами, він принаймні знає, які розміри елементів щодо один одного.
Де знаходиться саме краще місце для розміщення меню? Це питання постійно обговорюється серед веб-розробниками. Чи повинне бути розташоване головне меню у верхній частині сторінки? Або краще розмістити його зліва? У будь-якому випадку, меню має бути завжди на одному і тому ж місці на всьому сайті. Користувачі повинні завжди знати, як повернутися до інформації, яку вони вже бачили. Вони також мають бути впевнені, що зможуть знайти інформацію, яку вони ще не прочитали. Посилання на головну сторінку повинно бути на одному і тому ж місці незалежно від того, на якій сторінці сайту відвідувач знаходиться.
Користувачі мають наперед знати, куди приведе їх текстове посилання або кнопка. Якщо посилання приведе до завантаження файлу, їх потрібно проінформувати наперед, наприклад
· «Назва товару» документ у форматі PDF (16 MB)
· «Назва товару» інструкція для користувача (16MB - zip файл)
Для користувача зручною буде вказівка фізичного розміру файлу, який завантажуватиметься.
Посилання -- це головний інтерактивний елемент на сторінці. Потрібно дотримувати загальноприйнятих правил про те, як має виглядати посилання: потрібно виділяти посилання кольором і підкреслювати їх (і не підкреслювати інший текст), виділяти переглянуті посилання, уникати використання JavaScript або інших нестандартних технологій, не відкривати посилання в новому вікні (окрім файлів ZIP, DOC, PDF та інших не веб-документів), інформувати користувача про те, що він побачить при переході по посиланню.
Відвідувачі приходять на сайт, щоб знайти потрібну інформацію і часто перше, що вони бачать, це інтро сторінка. В більшості випадків ця ввідна сторінка не є корисною для відвідувача і не сумісна за стилем з рештою частини сайту. В цілому, єдина мета інтро сторінки - додати певну «крутизну» при вході на сайт. Кожна сторінка сайту, включаючи головну, повинна бути інформативною і збігатися з основним стилем сайту.
Сайти та інструменти навігації, що зроблені у флеші, можуть містити низку проблем для користувачів.
Найбільшою проблемою є орфографічні та стилістичні помилки у тексті. Веб-сторінки повинні бути короткими і зручними для перегляду на моніторі.
Для повноцінного пошуку по сайту потрібно застосувати спеціальне програмування, але це варто того, тому що пошук -- фундаментальна компонента людської поведінки в онлайні.
Багато веб-розробників не перевіряють свої сайти на сумісність з альтернативними браузерами, хоча кожен десятий користувач в Інтернеті не використовує Internet Explorer.
Користувачі часто скаржаться на недолік різних форм, які часто містять велику кількість непотрібних питань. Тут можна порадити залишити в опитувальниках тільки найважливіші питання, а інші зробити необов'язковими для відповіді, максимально запровадити автозаповнення, переводити курсор в перше поле форми, коли відкривається сторінка (це економить один клік).
Багато сайтів в Інтернеті неначе створено анонімно. Телефонний номер і адреса електронної пошти на сайті повинні бути обов'язково, бажано ще розмістити фізичну адресу, тому що із скритною компанією ніхто не захоче мати справи.
Тут дві проблеми:
· на великих моніторах сторінка перетворюється на вузький стовпчик тексту, а на маленьких може викликати незручну горизонтальну прокрутку;
· права частина сторінки може не поміститися на сторінку при роздрукуванні на папері.
В електронній комерції, дуже важливо продемонструвати товар у всіх подробицях. На сторінку слід винести фотографію навеликого розміру, якщо користувач буде зацікавлений, то обов'язково повинна бути функція, що відкриває цю фотографію в збільшеному розмірі. На жаль, на багатьох сайтах на сторінку відразу викладаються великі зображення, що значно гальмує завантаження сторінки
Дизайнери надмірно захоплюються сучасними технологіями, зокрема, постійно влаштовують конференції, тоді як користувачам насправді немає ніякої справи до технологій. Їм потрібно тільки щоб сторінка швидко завантажувалася, текст читався, контент відповідав на їх питання, а навігація і пошук дозволяли знайти потрібну інформацію.
Страницы: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22
