Найкращі ресурси для накреслення сітки на основі сітки

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

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

Рання концепція UI / UX

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

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

Аналогічно, a прототип схожий на Блок-схема, що показує, як різні сторінки посилаються разом. Таким чином, прототип з'єднує каркаси, щоб продемонструвати, як різні кнопки або посилання повинні привести до інших сторінок.

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

Так що ж ви повинні робити саме з цими ранніми концептуальними фрагментами? Чи вони дійсно потрібні? Я б сказав, що створення прототипів не завжди необхідно, але це дуже гарна ідея, особливо для розробки додатків зі складними взаємодіями.

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

Цілі для Wireframing

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

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

Шукайте інші подібні веб-сайти та записуйте їх найкращі можливості. Проаналізуйте, як організовано вміст і як ви рухаєтеся по кожній сторінці.

Подумайте про каркаси з інтерактивної точки зору. Це не просто гарні картинки. Це репрезентації цифрових інтерфейсів, і ви хочете накреслити свої ідеї.

Наявність ресурсів на основі сітки, незалежно від того, чи вони виготовлені з паперу, чи вони цифрові, можуть багато в чому допомогти в швидкому ескізі. Тепер давайте перевіримо найкращі ресурси для створення каркасів.

Сетка начерки

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

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

Є багато великих продуктів там, якщо ви хочете запустити каркас на папері, наприклад, Rhodia Dot Pad поставляється в різних розмірах для щоденного використання. Він поставляється тільки з 80 сторінок, але це досить типово для більшості книжок.

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

Dotgrid навіть приймає замовлення, що дозволяє вам створити власний ескіз. Кожна книга містить трохи менше 100 аркушів, тому, включаючи фронт і назад, ви отримуєте близько 200 сторінок для накреслення сітки.

Ще кілька точкових сіток-ескізів, які я хочу згадати, включають Behance Dot Grid, що є твердою обкладинкою і спірально зв'язаною, хоча вона містить лише 50 аркушів паперу.

Адаптивний дизайн ескізу є одним з кращих ресурсів для веб-дизайнерів. Жоден інший розробник продукту не потребуватиме адаптивного дизайну, але веб-дизайнери отримують велику користь від свободи генерувати ідеї на різних ширинах пристроїв поверх макета сітки.

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

Хоча дизайн є м'яким в порівнянні з книгами Dotgrid, ніхто не розглядав відповідні ескізи для веб-дизайнерів. Якщо ви в тому, що цікаво, то варто замовити один для тест-драйву.

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

Сітки мають розміри листів формату А4 і США для різних стилів паперу для друку. Ви можете вибрати один з багатьох варіантів, наприклад, шаблони для повноекранного веб-браузера або різні екрани iPhone.

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

Цифрові інструменти та веб-програми

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

По-перше, я хотів би зазначити, що ви можете використовувати інструменти Adobe, такі як Illustrator створити власні каркаси. Це не є частиною робочого процесу, а Illustrator, звичайно, не є вільним. Але якщо ви вже працюєте з Adobe Creative Cloud, то це може бути гарним місцем для початку.

1. Moqups

Moqups є одним з кращих онлайн-інструментів для каркас. Ви працюєте з візуальним редактором і бібліотекою активів для перетягування по всій сторінці.

Кожен новий проект Moqups має заздалегідь визначена сітка, і використовує яскраві фіолетові лінії, щоб допомогти вам приєднати елементи до вирівнювання. Це чудовий веб-інструмент, що робить проектування з сіткою набагато простішим.

Сайт працює за замовчуванням на вільному плані, який обмежує користувача до 300 об'єктів сторінки. На сайті є опції преміум-класу, але плата за щомісячну плату може бути більш дратівною, ніж просто за допомогою інструментів Adobe або одноразової покупки Sketch.

2. Сітка Папр

Веб-додаток Grid Papr є абсолютно безкоштовним і пропонує як загальнодоступні, так і приватні облікові записи для ваших каркасів. Ви створюєте назву для свого проекту та отримуєте власну унікальну URL-адресу для каркаса, який можна редагувати з будь-якого комп'ютера.

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

3. Wireframe.cc

Wireframe.cc є одним з найпростіших і найменш мінімальних інструментів, які можна використовувати для прошивки. Він має функцію a безперебійний інтерфейс з попередньо побудована сітка і організовані панелі інструментів. Ви просто клацаєте і перетягуєте, щоб створювати нові елементи на полотні. Ви також можете зберегти та поділитися своєю роботою.

Це ще один інструмент, який пропонується безкоштовно з додатковими планами преміум-класу. Кожен план тарифікується щомісяця, тому дуже схожий на Moqups в структурі цін. Безкоштовний інструмент можна використовувати з будь-якого комп'ютера без облікового запису.

4. Пересмішник

Mockingbird - це ще один чудовий варіант, який пропонує набагато більше можливостей, ніж більшість інструментів каркаса. Ви можете почати безкоштовно, але випробування обмежено до 7 днів. Це може викликати роздратування у деяких користувачів, але інструмент дійсно неймовірний і працює у всіх браузерах.

Mockingbird має нескінченну бібліотеку елементів інтерфейсу користувача, наприклад вкладки, акордеони, випадаючі меню, відеоплеєри та прості текстові посилання. За замовчуванням сітка використовує систему 960gs grid, але ви можете вибрати 12, 16 і 24 стовпців.

Заключні слова

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

Рухатися вперед найкраще просто запустіть каркас. Отримайте відчуття того, що вам подобається найкраще (паперовий або цифровий), і зробіть його своїм. Ресурси в цій статті повинні дати вам більше, ніж достатньо, щоб розпочати роботу з каркасом власних цифрових інтерфейсів.

(Фото обкладинки Ойкуна Ілмаза)