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