Основна ідея і завдання сайту. Одна сторінка або кілька? Структура сайту, основні блоки.
Наприклад, ваш замовник - архітектурне бюро. На поверхні розуміння, що на сайті повинні бути портфоліо робіт і контакти. Але ми уточнюємо: чим бюро відрізняється від інших? Виявляється, що бюро спеціалізується на висотному будівництві. Робимо висновок, що недостатньо просто хороших картинок з підписами, потрібен текст - докладні описи вихідних даних, процесу, пояснення і обґрунтування рішень. Також розуміємо, що проектів багато, але показувати все необхідності немає. Концентруємося на наймасштабніших. І ще момент, потрібно зробити акцент на команді, пояснити, чому вони експерти в своїй справі.
Не йдіть в сторону анімації, прикрас і спецефектів, визначте головну ідею, суть - що торкнеться відвідувача емоційно, що його вразить і надихне.
Приклад. Розробка Лендінзі для школи дизайну. Сторінка повинна пояснити майбутнім студентам і їх батькам хто такий дизайнер.
Проблема: Школярі хочуть бути дизайнерами, але часто не розуміють специфіку професії, які є напрямки в дизайні, чим вони відрізняються.
Завдання: Допомогти майбутнім студентам розібратися в спеціалізаціях і зрозуміти яка саме їм підходить.
Ідея: Що якщо виділити кілька основних напрямків дизайну: інтерактивний дизайн, графічний, промисловий і взяти інтерв'ю у трьох найкрутіших представників? Особисті історії дуже емоційні і добре працюють. Розповісти чим вони живуть, як домоглися успіху, додати класні фотографії. Людям буде цікаво прочитати, вони для себе побачать, що це за людина, близький він, чи надихає його спосіб життя.
Нюанс: не пишіть головну сторінку як початок «дерева». Нехай сторінка «контакти» матиме той же рівень, що і «головна». Це допоможе, коли ви будете робити навігацію.
Якщо ви робите сайт на замовлення, то дуже хороший хід - взяти інтерв'ю у вашого клієнта. Увімкніть диктофон і просто поговоріть з людиною, задайте питання - нічого специфічного, просто проявіть інтерес, з'ясуйте за що вашого замовника люблять клієнти.
Розшифруйте запис самі або найміть виконавця. Коштує це близько 20 рублів за хвилину, знайти людину можна на youdo.com За невелику додаткову плату, текст підготують нову редакцію і у вас, нарешті, з'явиться буква.
Стиль тексту. Дотримуйтеся інформаційного стилю. Чи не розтікатися мислію по древу - говорите коротко і тільки важливе. Великий текст ніхто не читає. Використовуйте принцип зворотного піраміди - спочатку скажіть головне, потім додайте деталі. Тут добре працює зв'язка заголовок і опис. Заголовок повинен привернути увагу і передати суть, опис - розширити і доповнити повідомлення.
Сміливо прибирайте вступні конструкції, уникайте кліше і канцеляризмів. Використовуйте сервіс glvrd.ru - він допомагає очистити текст від словесного сміття, перевіряє на відповідність інформаційному стилю.
Будь-яка робота вкладається в етапи, етапи упаковуються в схему, а схема стає процесом, який може бути красивим і зрозумілим сам по собі. За будь-яким сайтом стоять сотні годин роботи, і досвід кількох фахівців. Повірте, злагодженість команди може творити чудеса - годинник, які витрачаються на боротьбу з хаосом, могли б піти на допилювання і поліпшення. Тільки гарні процеси по справжньому ефективні. Навчитися бачити цю красу, використовувати цей досвід - гарне конкурентну перевагу.
Обкладинка (перший екран) заслуговує на особливу увагу. Якщо там якісна фотографія і небанальний, що чіпляє заголовок, то перше враження буде вдалим.
Приклад вдалого поєднання фотографії і заголовка на обкладинці. Скріншот з сайту bemyeyes.org
Навігація. Малюючи меню. переконайтеся, що воно візуально хороше: не надто велике, що не перевантажує всю сторінку. Пунктів меню не повинно бути багато, краще за все не більше 5. Сміливо укрупнювати розділи. Назви робіть короткими. Три слова як пункт меню явно не годиться. Вони повинні зчитуватися з першого погляду.
П'ять - оптимальне число для пунктів меню.
Шрифт. Обов'язково підключіть фірмовий шрифт, це впливає на комунікацію. Зараз все тримається на контенті, тому сам шрифт і задасть вам фірмовий стиль. У кожного шрифту є характер, тому постарайтеся підібрати такий шрифт, який відповідає змісту.
Найвірніше - взяти різні гарнітури з одного сімейства, наприклад PT sans і PT serif
Традиційне поєднання: шрифт без зарубок для заголовків і із зарубками для тексту. Proxima Nova і PT serif
Іноді, в якості прийому, шрифт із зарубками використовують для заголовків. Georgia і Roboto
Open Sans і Georgia
Сучасні інструменти для створення сайту. Етапи технічної реалізації. Що вбиває ваш дизайн.
Після того, як макет намальований, узгоджений і затверджений, його потрібно перетворити безпосередньо в сайт - перейти до технічної реалізації.
Традиційний процес технічної реалізації складається з наступних етапів:
Інтеграція верстки в систему управління сайтом (CMS). Це завдання виконує програміст. Верстка перетворюється в шаблони, які можна наповнювати і редагувати. Готовий сайт, який можна підтримувати. Весь функціонал готовий.
Найбільш популярні CMS: WordPress, Bitrix, Drupal, Joomla.
Ринок розвивається і з'являється багато інструментів, які дозволяють дизайнеру самому реалізувати рішення, не вдаючись до допомоги верстальника і програміста. Конструктори сайтів скорочують грошові та часові витрати в рази. Зараз вже багато варіантів платформ, які можна підібрати під різні завдання.
Потрібно бути готовим до того, що на кожному етапі якість вашого дизайну буде губитися. Ви отримали ідеальну картинку на макеті і чим більше у вас енергії і рішучості, тим менше загубиться в процесі реалізації. Якщо немає сил, макет стане на 40% гірше. Якщо енергії дуже багато, то втрата буде 5%. Але в будь-якому випадку потрібно налаштуватися що втрати будуть.