Web-дизайн - Введення в web-дизайн - Що таке web-дизайн, Навіщо це потрібно, Необхідний

Що таке web-дизайн?

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

Навіщо це потрібно?

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

Для того, щоб web-майстер відчував себе максимально комфортно при розробці нового проекту, крім робочого місця та персонального комп'ютера йому необхідний певний набір програмного забезпечення, базовий інструментарій, без якого творцю web-сайту просто не обійтися. Початківцю web-майстру часом буває важко зорієнтуватися не тільки у всьому різноманітті найменувань існуючих програм, але навіть у списку мінімально необхідних роботи додатків. Можна щось забути, проґавити або навіть просто не знати про те, що згодом вам знадобиться якась програма чи утиліта. Нижче запропоновано повний список коштів, які ви повинні мати перед тим, як візьметеся за розробку свого першого Інтернет-проекту. Ці програми розраховані на використання під керуванням Microsoft Windows 9X. Отже, для повноцінної роботи web-дизайнеру потрібні:

  • Середовище розробникадокументів HTML - так званий WYSIWYG-pe-дактор, рекомендується програма Microsoft FrontPage версії 98 або 2000 або FrontPage Express.
  • Редактор векторної графіки рекомендується CorelDraw Версії 8 або 9.
  • Редактор растрової графіки рекомендується Adobe Photoshop версії 4.0 або вище.
  • Microsoft Internet Explorer версії 4.0 або 5.0.
  • Броузер Netscape Navigator версії 4.01 та вище.
  • Перекодувальник кирилиці, рекомендуються програми ConvHTML та SNKDECode.
  • Оптимізатор HTML рекомендується UtilMind HTML Compressor версії 1.5або вище.
  • Оптимізатор растрових зображень GIF рекомендується програма Gif-Clean 32.
  • Оптимізатор растрових зображень JPEG рекомендується програмою JPEGCleaner версії 2.1 або вище.
  • Редактор GIF-анімації рекомендується програма Ulead GifAnimator.
  • Фрагментатор графіки рекомендується програмою PictureDiser.
  • FTP-клієнт, рекомендується програма CuteFTP.

Основні постулати web-дизайну

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

УВАГА У сучасному Інтернеті прийнято мовчазну угоду про те, що професійний сайт повинен коректно відображатися при екранній роздільній здатності 640x480 пікселів з палітрою кольорів у 256 кольорів.

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

ПОРАДА Для того, щоб web-сторінка правильно відображалася при використанні екранної палітри в 256 кольорів, у разі включення до складу документа графічних елементів намагайтеся представляти максимально можливу кількість графіки у форматі GIF і лише необхідні зображення — у форматі JPEG.

Зрозуміло, що після підготовки первісного шаблону майбутньої web-сторінки його необхідно протестувати на відповідність викладеним вище вимогам. Для цього, завантаживши сторінку в броузер, змініть екранну роздільну здатність і колірну палітру в налаштуваннях Windows. Потім клацніть правою кнопкою миші в будь-якій вільній від ярликів ділянці Робочого столу і, вибравши в меню пункт Властивості, перейдіть на вкладку Налаштування діалогового вікна Властивості: Екран. Встановивши відповідні значення у розділах Палітра кольорів та Область екрана, клацніть мишею на кнопці Застосувати, після чого погодьтеся зі зміною параметрів екранних налаштувань без перезавантаження Windows.

ПОРАДА Рекомендується перевірити коректність відображення інформації, що міститься в html-документі, при зміні екранних налаштувань у броузерах як Microsoft Internet Explorer, так і Netscape Navigator.

УВАГАWeb-сторінка має ідентично відображатися в Microsoft InternetExplorer і Netscape Navigator, причому дуже бажано - в останній та передостанній версіях даних програм.

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

Не секрет, що переважна більшість користувачів використовують для виходу в Інтернет dial-up з'єднання, іншими словами, працюють на повільних лініях, підключаючись до провайдерського пулу за допомогою модему. Зрозуміло, в цьому випадку швидкість передачі даних (як правило, пригнічуюче низька) відіграє для них вирішальну роль: навряд чи комусь принесе задоволення чекати завантаження одного html-документа десятки хвилин. Таким чином, ми приходимо до наступного очевидного закону web-дизайну.

УВАГА Всі сторінки веб-сайту, а також усі інтегровані в них графічні та інтерактивні елементи мають бути мінімальними за обсягом.

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

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

УВАГА Створена вами web-сторінка має обов'язково включатинавігаційні елементи, що охоплюють всі розділи вашого сайту, причому ці елементи повинні бути завжди на увазі. Їхнє розташування слід вибирати, виходячи з максимальної зручності для користувача. Якщо вони розміщені у верхній частині сторінки і зникають з поля зору після скролінгу (прокручування екрана вниз), не забудьте продублювати їх у нижній частині документа. Графічні посилання та активні елементи слід повторити у тестовій формі для користувачів, у броузерах яких відключено відображення графіки або відсутня підтримка Java.

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

УВАГА Намагайтеся витримати весь проект в одному дизайнерському стилі, оформляйте різні його розділи таким чином, щоб загальне художнє рішення було схожим на весь сайт.

УВАГА Не використовуйте одну веб-сторінку більше трьох різних шрифтів, включаючи шрифти, які застосовуються при створенні графічних елементів.

УВАГА Використовуйте лише коректні колірні схеми та не застосовуйте при оформленні документів більше трьох різних кольорів.

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

  • синє на білому;
  • чорне на жовтому;
  • зелений на білому;
  • чорне на білому;
  • зелений на червоному;
  • червоне нажовтий;
  • червоний на білому;
  • оранжеве на чорному;
  • чорне на пурпуровому;
  • помаранчевий на білому;
  • червоний на зеленому.

Коректність поєднання один з одним інших кольорів і відтінків перевіряється за допомогою одного простого правила: переведіть ваше зображення у формат ;grayscale (256 відтінків сірого) і подивіться, чи читається в такому вигляді ваш текст, чи контрастно виглядають намальовані елементи. Якщо ні — прийняте вами рішення кольору краще переглянути. У будь-якому випадку для тексту рекомендується вибирати традиційний, звичний оку чорний колір, як фон найкраще використовувати тьмяну, ледь помітну заливку довільного відтінку. Однак найбільш правильним, на мій погляд, рішенням завжди був і залишається класичний варіант: чорним по білому.