Як створити прототип для landing page?

Як створити прототип для landing page?

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

Прототип Лендінгу – візуальне сприйняття готового сайтуСтруктурні блоки для Лендінг пейдж готові і тепер ми переходимо до наступних етапів самостійного створення посадкової сторінки!

До цього моменту, ми уже підготували контент для відповідних функціональних секцій нашого Landing page. І структура сайту ніби то готова, але ми не маємо цілісної наглядної картини нашого Лендінгу. Якщо бути точнішим, то у нас поки відсутній прототип нашої посадкової сторінки. Прототипом сайту вважають схематичне зображення усіх його елементів розташованих у відповідності до визначеної структури Landing page. Прототип дає нам можливість, до початку безпосередньої розробки блоків, зрозуміти, як наша посадкова сторінка буде виглядати в інтернеті. Прототип, у більшості випадків, створюється у чорно-білому варіанті.

Прототип можна створити від руки на звичайному листі паперу. Звичайно можна заморочитися та створити прототип у спеціалізованих сервісах, чи програмах. Популярними онлайн конструкторами прототипів вважають: Mockflow, Moqops та Ninjamock. Їх можна вважати відносно безкоштовними, так як вони надають непогані безкоштовні тарифи. А Axure – вважають найкращою платною програмою для протитипування сайтів.

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

Чорновий прототип – це блочне, схематичне зображення сайту, без відображення вмісту кожного елемента та низькою деталізацією. Де прямокутник з хрестиком в середині – це картинка, прямокутник з трикутником в середині – відео, жирні горизонтальні лінії – заголовки, прості лінії – текст. Заштрихований горизонтальний прямокутник – кнопка заклику до дії, квадрат з двома горизонтальними лініями та CTA – це форма заявки.

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

Для самостійного створення Landing page нам буде достатньо зобразити наш прототип від руки. Беремо звичайний лист А4 та умовно розділяємо його на дві частини. З лівої сторони малюємо вертикальний стовбець та розділяємо його на блоки, кількість яких відповідає секціям структури нашого Лендінгу. Справа – декількома слова описуємо кожнен з блоків. Наприклад, перший блок – офер та обкладинка, другий блок – про компанію і так далі.

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

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

Продовження розгляду теми самостійного створення сайту для бізнесу, уже в наступних постах!

Ніколи не припиняйте вчитися!

Бадьорого вам настрою та хороших думок!

З повагою та розумінням – Сайти з Сергієм Шевченко Блог Веб-Майстра!

Сподобався пост? Поділіться будь ласка ним зі своїми близькими та друзями!

Додати коментар

Захисний код
Оновити