Пам’ятка дизайнеру - Все про розробку веб-сайтів
Пам'ятка дизайнеру
Це дуже просте і часто порушуване правило. Особливо молодими дизайнерами.
Такий простий хід у рази продуктивніший, економить купу часу і допомагає знаходити більш цікаві рішення.
Приклад швидкого начерку та отриманого результату
Від більшого до меншого, від загального до приватногоЦе друге просте правило. І вона також часто порушується.
Класичне викладання малюнку та живопису вчить: «Рухайте від більшого до меншого, від загального до приватного. Спочатку пропрацюйте загальну композицію, найбільші маси та обсяги, найбільші плями, а потім допрацьовуйте, уточнюйте, насичуйте деталями.»
Це правило цілком застосовне до всіх аспектів та жанрів дизайну.
Приклад покрокового уточнення і доопрацювання макета від загального до приватного.Треба визнати, що часто бачив, як художники-самоучки-самородки починали писати портрет людини з очей, чи з пальця лівої ноги. І не раз бачив, як деякі дизайнери починають малювати сайт із якоїсь однієї-приватної іконки. І в обох випадках, на мій подив, виходив цікавий результат.
Але це довгий шлях, що часто вимагає великих коригувань та переробок у процесі дизайну. Можливо, він може бути застосований для творчості, але в дизайні-професії, коли в певний термін потрібно отримати хороший результат, я вважаю, що подібний підхід неприпустимий. Потрібні гарантовані технології процесу, щоб отримувати гарантовані результати у чіткі терміни. А не просто «вийде-не вийде».
Модульна сіткаОдне з перших рішень у процесі створення дизайну - це модульна сітка. Єдиний каркас та схема розташування всіх основних блоків таелементів, що проходить через усі сторінки сайту.
Сітки бувають прості та складні, гнучкі у використанні та не дуже. Це не так важливо. Важливо те, що якщо ви при проектуванні дизайну задали певну сітку модулів, будьте ласкаві їй слідувати. Від першої до останньої сторінки свого проекту. А якщо в процесі промальовування внутрішніх сторінок у вас з'явилися елементи, що не лягають у прийняту сітку, значить, ви недостатньо часу приділили її проектуванню.
Проходження єдиної модульної сітки в рамках проекту не тільки збільшить цілісність і логічність сприйняття сайту, але й багаторазово спростить працю розробникам.
Приклад використання модульної сітки
МасштабованістьУ наш час, коли у всіх користувачів найрізноманітніші монітори, є сенс робити переважно «гумові» сайти. Тобто. сайти, які масштабуються під роздільну здатність монітора користувача.
Відображення еластичного сайту на різних моніторах
Отже, роблячи «гумовий» дизайн не забуваємо, що:
«Стиск-розтяг»Оптимальна для використання так звана «напів-гума», тобто. сайт розтягується та стискається до певної межі.
Перше, з чого потрібно почати - це знайти мінімальний стиск сайту.
Мінімальна ширина сайту, безумовно, визначається завданнями сайту та його цільовою аудиторією. Фактично зараз є тільки два мінімальні параметри: 760 px і 990 px. Перший оптимальний для корпоративних сайтів або ресурсів, розрахованих на наймасовішу і найрізноманітнішу аудиторію (наприклад, масові послуги: поштові, пошукові, новинні і т.п.). Другий підходить для сайтів іміджевого та промоушен призначення.
Перевіряємо, і якщо потрібно коригуємо, кожен елементмодульної сітки, щоб не виникало наїздів/нахлестів елементів один на одного при мінімальному стисканні сайту.
Максимальна ширина сайту може бути різною, але, як правило, рекомендується діапазон для розтягування не вищим, ніж у півтора-два рази від розміру мінімального стиснення. Це обумовлено тим, що при розтягуванні сайту більш ніж у півтора рази композиція, як правило, руйнується.
Потрібно визначити, що станеться з усім сайтом при розмірі монітора користувача понад максимальну ширину. Вирішуємо, куди він вирівнюватиметься. Праворуч? Ліворуч? По центру?
Добиваємося завершеного виду сайту та його природного переходу в оточення при дозволі понад максимальний. Неприпустимо, щоб сайт на великому моніторі виглядав як обрізаний.
Малюємо всі ілюстрації та неповторні фони з принципу «у кого більше монітор, той більше побачить». Зазвичай ширина ілюстрацій обумовлена шириною відведених під них блоків модульної сітки в стані max.
Запас на зростання сайтуУ більшій сфері завдань, якщо йдеться не про сайт-візитку чи промо-сайт, потрібно врахувати, що кількість сторінок та розділів сайту може зростати та змінюватися.
Навігація повинна будуватися так, щоб додавання нових пунктів меню, а тим більше зміна назви пунктів відбувалася безболісно. Неприпустимо, щоб додавання нового розділу призводило до перегляду навігації.
Приклад «безболісної» зміни/додавання деревоподібної навігації першого та другого рівня
У деяких випадках потрібно передбачати безболісне для зовнішнього вигляду додавання/приховування інформаційних/функціональних блоків на сайті.
Приклад «безболісного» переміщення, зміни/видалення блоків сайту
Враховуючи екраннумасштабованість, а також додавання нових матеріалів на сайт, рекомендується віддавати перевагу текстовим заголовкам та навігації.
Шрифтова схемаБільшість сайтів виглядає цілісно і завершено при побудові дизайну на основі одного-трьох шрифтів.
Базовий шрифт- основний шрифт матеріалів сайту.
Акцидентний- шрифт для заголовків.
У деяких випадках вводяться додаткові шрифти для:
Дизайнер повинен спланувати єдину загальну схему розмірів відступів/заступів для всіх елементів на сайті, ієрархію заголовків та навігаційних елементів (наприклад, для деревоподібного меню або хмари тегів). Вона має бути цільною та використовуватись на всіх сторінках сайту.
Все подальше оформлення інформації на сайті має будуватися на базі загальної схеми.
Шрифтова схема простого корпоративного сайту
Реакція на користувачаДизайнер повинен спланувати, що відбуватиметься з елементами, що реагують на дії користувача. Розглянемо типові елементи.
Фрагмент макета сайту, на якому показано три стани навігації: звичайний вид меню, пункт меню при наведеному курсорі, виділення поточного розділу.
Залежно від типу та масштабності сайту, потрібно показати низку станів пункту навігації.
Різні стани елемента навігації
ПосиланняПосилання, що містяться в тексті, завжди підкреслені і повинні відрізнятися за кольором від основного тексту.
Бажано, а в навігації обов'язково передбачити зовнішній вигляд посилання при наведенні курсору.
У великих обсягах тексту та при видачі різнорідної інформації (наприклад, зміст статей, карти сайту тощо), обов'язково потрібнопередбачити зовнішній вигляд для відвіданих посилань. І вони також вимагають свого зовнішнього вигляду під час наведення курсору.
Посилання з додатковими властивостямиДля посилань, які передбачають додаткові можливості, особливо при використанні в тексті, рекомендується передбачити невелику іконку, яка підкаже користувачеві про додаткові властивості посилання.
Такі іконки вимагають посилання:
Приклади використання додаткових іконок «у житті».
Псевдо-посиланняПсевдопосилання, тобто. посилання, які не ведуть на іншу сторінку, а відкривають/приховують інформацію на поточній без її перезавантаження, позначаємо пунктирним підкресленням. У всьому іншому, на них поширюється все, що зазначено для звичайних посилань.
Один із прикладів використання псевдопосилань.
ТабиТаби - це деяка суміш елемента навігації та елемента управління.
Їх враховуємо стану:
Фрагмент сайту, на якому видно відразу три стани табів: активний таб, наведено курсор і звичайний, неактивний стан.
КурсорПредбачаємо реакцію курсору при наведенні. Особливо, якщо йдеться про нестандартні елементи управління, такі як навігація, псевдо-посилання та таби (hand), підказки (help), зміна розміру елемента та перетягування.
Оформлення змістуВ інтернеті править інформація. Сайт — лише спосіб її доставки. Зовнішнє оформлення сайту - лише рамка, що задає емоційний настрій та підкріплює бренд.
Саме вивчаючи інформацію, користувач проводить найбільшу частину свого часу на сайті. І саме з цієї причини потрібно приділити оформлення змісту належну увагу.
Фрагментсайту новин, на якому дизайнер показав більшу частину типових елементів для оформлення змісту.
Елементи змістуОдразу треба сказати, що передбачити заздалегідь всі можливі варіанти оформлення не можна. Ми розглянемо лише типові.
Наприклад, для корпоративного сайту:
Цілком неприпустимо використання «риби» з іншої мови, т.к. обсяги тексту та середня довжина слів різняться. Наприклад, в англійській та українській це дуже помітно.
Різний малюнок ідентичних за змістом блоків тексту різними мовами.