16 основних вимог до дизайн-макету сайту

1. 1.Використовуйте правильні формати файлів
2. 2. Новий елемент - новий шар
3. 3. Розмір макета для фіксованого по ширині шаблону
4. 4. Розмір макета для «гумового» шаблону
5. 5. Враховуйте рамки і відступи браузера
6. 6. Правильно малюйте фон
7. 7. Не використовуйте фонові фотографії
8. 8. Використовуйте напрямні
9. 9. Використовуйте стандартні шрифти
10. 10. Використовуйте текст за призначенням
11. 11.Осторожно звертайтеся з формами
12. 12. Готуйте збірку дизайну
13. 13. Оформляйте зовнішній вигляд меню
14. 14. Оформляйте пункти меню
15. 15. Оформляйте посилання
16. 16. Оформляйте навігаційні ланцюжки

У практиці розробника сайту часто зустрічається наступна ситуація - замовник звертається до розробника з готовим (вже узгодженими та затвердженими) макетом і пропонує на його основі створити сайт.

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

Наведу найбільш яскравий діалог з власної практики:

Замовник: У нас є макет, ми на його основі хочемо зробити сайт.

Я: Ок, давайте подивимося на макет.

...

Я: Вибачте, але презентація в PowePoint ніяк не може бути макетом сайту ... Ви впевнені? Можливо, це тільки блок-схема?

Замовник: Ні, це макет сайту - нам знайомий дизайнер так намалював і сказав, що проблем не виникне! Він хороший фахівець, нам його [...] рекомендували!

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

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

1.Використовуйте правильні формати файлів

Макет представляється тільки в одному з 2-х форматів - PSD (Photoshop Document) або TIFF (Tagged Image File Format).

PDF, AI, EPS, BMP, QXD, QXT і інші, не кажучи вже про розширення файлів пакета програм Microsoft Office - не допускаються.

Зверніть увагу - ми говоримо саме про макеті, мініатюри і превью можуть надаватися в файлах стисненого формату, наприклад JPG.

2. Новий елемент - новий шар

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

3. Розмір макета для фіксованого по ширині шаблону

Якщо планується фіксований по ширині шаблон - ширина макета обов'язково повинна враховувати відступи справа-зліва від краю екрану. Крім того, окремо вказується колір фону «підкладки».

4. Розмір макета для «гумового» шаблону

Якщо шаблон «гумовий» - в шапці і підвалі сторінки не менше 20-50 пікселів з правого боку повинні бути намальовані так, щоб їх без проблем можна було дублювати.

5. Враховуйте рамки і відступи браузера

Якщо шаблон малюється під певний дозвіл, необхідно враховувати, що розмір макета створюється відповідно до дозволу вікна браузера, а не монітора. Наприклад, при вирішенні монітора 1024, розмір макета складає 1002 пікселя.

6. Правильно малюйте фон

Фон сторінки повинен бути однорідним і повторюваним. У тому випадку, якщо потрібно використовувати текстурирование - текстура точно так же повинна бути однорідною і легко дублюється.

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

7. Не використовуйте фонові фотографії

Використання в якості фону «важких» зображень (наприклад, повнорозмірних фотографій) - не допускається.

8. Використовуйте напрямні

Все вирівнювання шарів повинні робитися по напрямних (rulers), які не будуть видалені з макета.

9. Використовуйте стандартні шрифти

Для текстового вмісту повинні використовуватися стандартні шрифти. У разі використання нестандартного шрифту, він повинен додаватися до макету і в обов'язковому порядку повинен бути зазначений шрифт-замінник зі стандартного набору.

Так, можна використовувати правило CSS3 font-face, яке дозволяє впроваджувати нестандартні шрифти. Але навіть на сьогоднішній день, робота цього правила налагоджена не до кінця і його використання може спричинити проблеми при відображенні в різних браузерах.

10. Використовуйте текст за призначенням

Будь-які зміни тексту повинні проводитися в рамках стандартних дій - зменшення-збільшення розміру, міжрядкові інтервали, кернинг і т.д. Вигинання тексту «аркою», «риб'ячим оком» та інші видозміни в рамках роботи з текстом - не допускаються, це прерогатива зображень.

11.Осторожно звертайтеся з формами

Стандартні елементи форм повинні зазнавати змін тільки в рамках здорового глузду. Для дизайнера, не знайомої з можливостями CSS в цій області, оптимальним буде використання стандартних елементів.

12. Готуйте збірку дизайну

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

13. Оформляйте зовнішній вигляд меню

Випадають-які виїжджають-розгортаються меню повинні бути відображені в двох видах:

• зібраний;
• розкладений.

14. Оформляйте пункти меню

Пункти меню повинні бути відображені в 2 видах:

• пасивний (курсор не наведений)
• активний (курсор наведений).

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

15. Оформляйте посилання

Оформлення посилань повинно бути вказано в 3 статусах: звичайна посилання (link), посилання при наведенні курсору (hover link), відвідана посилання (visited link).

16. Оформляйте навігаційні ланцюжки

Навігаційні ланцюжка повинні бути прописані з урахуванням реальних назв розділів і перенесення слів.