Що повинен містити макет сайту, який передають на верстку

Правильної відповіді на ваші питання не існує - макети опрацьовують до ступеня, яка дозволить вашому верстальщику видати придатну верстку.

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

неандертальці

Найгірший варіант. Кожну дрібницю доводиться підписувати, покриваючи макети шаром виносок і пояснень. Проблемні місця неандертальці ігнорують, так що довгий «Костянтин Константинопольський", не намальований в макеті, буде обрізаний самим виродськими чином, а при зміні ширини браузера все розвалиться. Через неуважність допускають багато помилок, які доводиться показувати наочно, повторно порівнюючи верстку з макетами. При роботі з неандертальцями дизайнери швидко видихаються.

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

суперзірки

Технологи мрії. Здатні зверстати працюючу сторінку по одному джіпег. Непромальованим стану придумують самі і стверджують у дизайнера, діючи за правилом «зробити, а потім вибачитися». Дизайнер, який попрацював з суперзіркою, незворотно змінюється: робота зі звичайними верстальниками здається похмурою каторгою.

Щоб зробити роботу ефективною, дизайнер ростить верстальника, встановлюючи планку суперзірки і вимагаючи до неї тягнутися.

Запрошую шановних верстальників запропонувати класифікацію дизайнерів :-)

Потрібно запитати у верстальника. Більшість питань знімаються, якщо не боятися запитувати і вміти робити висновки з отриманих відповідей.

Ще варто радитися з верстальником з приводу тіней, напівпрозорі і взагалі різних ефектів. Наприклад, який-небудь світиться елемент при верстці легко можна розділити на фон, сам ефект і об'єкт, який знаходиться поверх. Завантажуватися вони будуть окремо один від одного і набагато швидше. Хитрощів тут багато. Саме тому всі ефекти потрібно тримати і у вигляді ефектів, і у вигляді склеєних шарів - якщо потрібно буде щось змінити або підправити, це завжди можна буде зробити.

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

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

І якщо вже дизайнер спеціалізується в інтернеті, то він повинен бути в курсі які існують стану у кнопок і інших елементів. І повинен представляти, що таке і як працює html, css.

личинка дизайнера
Молода людина, як правило, дівчина-манагер. Має базові знання в ретуші фотографій і нульові в дизайні. Макети більше схожі на купу сміття. Немає узгодженості кольорів і ліній. Використовується багато нестандартних шрифтів. Фон елементів, як правило, неоднорідний, через що доводиться використовувати зображення великого розміру. Немає сталості в іконах. Їх вигляд трохи і не обгрунтовано змінюється від макета до макету, збільшуючи загальний обсяг дрібних картинок. У шаблоні залишається багато зайвих (прихованих) елементів. Багато шари злиті в один. Назви шарів не мають нічого спільного з їх призначенням.

Дизайнер-художник
Робить зміну неймовірної краси, але абсолютно не працездатні макети. Основний упор робиться на зовнішній вигляд, а не на зручність використання. Може зробити хороший промосайт. Чи не замислюється про те, як буде складно верстати всю цю красу. Багато прихованих елементів в макеті.

Дизайнер-хіпстера
Знає основи дизайну і розуміє, що це. Не забуває про те, що сайт може тягнутися або кнопки мають кілька станів. Працює виключно в Індізайне (через назву), ніж перекреслює всі свої позитивні сторони. Погано сприймає критику і не завжди може пояснити свої рішення. Часто малює нестандартні елементи управління.

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

для неандертальця
Мрія. Прикладає css-файл.
Нічний жах. Робить міні-ТЗ з описом поведінки кожного елемента. Промальовує всі стани. Звіряє і не відстає до повного збігу.

для планктону
Мрія. Прикладає css-файл.
Нічний жах. Робить міні-ТЗ з описом поведінки кожного елемента. Промальовує всі стани. Звіряє і не відстає до повного збігу.

для суперзірки
Мрія. Робить міні-ТЗ з описом поведінки кожного елемента. Промальовує всі стани. Звіряє і не відстає до повного збігу.
Нічний жах. Прикладає css-файл.

Якщо макет складається не з однієї сторінки, то зручно робити окремий psd, що містить інтерактивні елементи з усіма станами. А в самих макетах поміщати елементи зі станом за замовчуванням. Зазвичай це кнопки, посилання, галереї картинок і прикріплених файлів, типові форми, виведення повідомлень про помилку в формах.

А буває дизайнер-Суперзірка. який віддає 15 сторінок макета і сторінку, на якій промальовані всі базові елементи: заголовки, списки, цитати, таблички, форми з полями введення, чекбоксами і кнопочками.

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

Плюс до всього цього додаються нестандартні шрифти з макета, щоб верстальник не шукав їх двадцять хвилин в інтернеті, і сторонні іконки, щоб не нарізати їх знову.

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

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

Спробував зобразити два типи веб-дизайнерів.
Другі трапляються набагато рідше :-)

Управління проектом 154

Як же мені зробити систему, зручну і зрозумілу для кінцевого користувача?

нещодавно спливло

Велика Новодмітровская вулиця, 36, будова 2
Москва, Росія, 127015

Схожі статті