Послуги · Дизайн

Адаптивний дизайн сайту

Сайт, який однаково зручний на телефоні, планшеті та комп’ютері — з будь-якою роздільністю екрана.

Адаптивний дизайн — це не стиснута десктопна версія. Для кожного розміру екрана ми переглядаємо порядок блоків, розміри тексту та спосіб взаємодії.

Проєктуємо на гнучкій сітці з медіазапитами й гнучкими зображеннями, тож макет не ламається на нестандартних екранах.

+38 (093) 911 53 51
MobileTabletDesktopГнучка сіткаМедіазапитиРетина-графіка
Мобільний екран: адаптивний макет сайту на смартфоні з великими кнопками та зручною навігацією Планшетний екран: макет сайту на планшеті зі збалансованою компоновкою контенту Десктопний екран: широкий макет сайту з чіткою структурою блоків Гнучка сітка: як 12-колонкова сітка перебудовується на ширинах 1440, 1024, 768 і 390 px Медіазапити: CSS-правила для брейкпоінтів 390, 768, 1024 і 1440 px поруч із результатом Ретина-графіка: порівняння звичайної та подвійної роздільності зі збільшенням 400%

Мобільний екран — головний, а не другий

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

Усі розміри екранів

Проєктуємо під різні роздільності, а не під один умовний телефон. Перевіряємо на межових значеннях, де макет ламається найчастіше.

Гнучка сітка

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

Медіазапити

На кожній контрольній ширині задаємо власні правила: розмір шрифту, кількість колонок, поведінку меню.

Гнучкі зображення

Графіка масштабується без обрізання й не важчає без потреби — сторінка лишається швидкою на мобільному інтернеті.

Зручність дотику

Кнопки й поля робимо такими, щоб у них влучали пальцем, а не курсором. Важливе не ховаємо під довгий скрол.

Готовність до верстки

Передаємо макети з описаною поведінкою блоків на кожній ширині — верстальник не додумує за дизайнера.

Часті запитання

Скільки коштує адаптивний дизайн?
Ціна залежить від кількості сторінок і складності інтерфейсу. Після технічного завдання називаємо точну суму й терміни.
Чи можна адаптувати наявний сайт?
Так. Працюємо і з сайтами, зробленими не в нас, — проєктуємо адаптив під наявний дизайн або оновлюємо його.
Під які пристрої ви проєктуєте?
Під телефон, планшет і комп’ютер із запасом на нестандартні роздільності. Перелік контрольних ширин узгоджуємо перед стартом.
Чим адаптив відрізняється від мобільної версії?
Мобільна версія — окремий сайт з окремою адресою. Адаптив — той самий сайт, який перебудовується під екран.
Чи потрібне технічне завдання?
Так, з нього починається робота. Якщо ТЗ немає — складемо разом з вами.
Хто отримує права на макети?
Замовник. Після завершення передаємо матеріали та права на створений дизайн.
Чи працюєте віддалено?
Так. Офіс у Харкові, але більшість проєктів веде́мо дистанційно — зустріч не обов’язкова.

Розрахуйте вартість за 30 секунд

Рахуємо: Адаптивний дизайн сайту

Рівень
Для якого сайту
Сторінок
5
Строк
Додатково

Що входить у роботу

Адаптив — це окремий етап проєктування, а не автоматичне стискання готового макета.

Аналіз пристроїв: розподіл трафіку між телефонами, планшетами й десктопами та контрольні ширини 390, 768 і 1440 px
Сітка й брейкпоінти: як макет перебудовується на ширинах 1440, 1024, 768 і 390 px
Мобільні екрани: порядок блоків, розміри тексту, бургер-меню та великі кнопки дії на телефоні
Планшет і десктоп: узгоджені між собою версії з єдиною ієрархією, типографікою та логікою макета
Зображення: підготовка графіки під щільності 1x і 2x, стиснення без втрати чіткості
Передача: макети всіх екранів, бібліотека компонентів, опис поведінки, UI-токени та права на матеріали

Ознаки справді адаптивного сайту

Без скролу вбік

Сторінка ніколи не з’їжджає горизонтально — ні на вузькому екрані, ні на великій діагоналі.

Читабельний

Текст не доводиться збільшувати пальцями: розміри підібрані під кожну ширину.

Швидкий

Мобільна версія не тягне важку десктопну графіку.

Зручний для пальця

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

Однаковий

Це той самий сайт на всіх екранах, а не дві різні версії з різним змістом.

Дизайн і верстку робимо в одній команді — поведінка блоків перевіряється в браузері, а не лише в макеті.

Як проходить робота

01

Технічне завдання

Фіксуємо вимоги та пристрої, під які працюємо. Допомагаємо скласти ТЗ, якщо його немає.

02

Оцінка

Після ТЗ називаємо вартість і терміни. Роботу починаємо з передоплати, офіційно.

03

Проєктування

Сітка, брейкпоінти та поведінка блоків на кожній ширині.

04

Дизайн версій

Опрацьовуємо мобільну, планшетну та десктопну версії.

05

Тестування

Передаємо на перевірку вам. Спірні місця узгоджуємо разом.

06

Передача

Віддаємо матеріали та права на проєкт.

Перевіримо, як ваш сайт виглядає на телефоні?

Надішліть адресу — подивимось на реальних екранах і скажемо, що варто виправити та скільки це коштує.