Нотатки web-дизайнера

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

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

  1. Визначити розташування блоків і елементів сайту
  2. Показати функціонал тих чи інших деталей сайту
  3. Опрацювати відповідність бажань і можливостей
  4. Спростити роботу програміста, схематично відобразивши інтерфейс сайту
  5. І врешті-решт щоб не починати малювати дизайн, а замовник потім скаже: «ні, хлопці, я по-іншому собі це уявляю. »🙂

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

А ось далі постає питання про те, як і в чому зробити прототип? Я за свою не довгу кар'єру в області сайтобудування побачив багато кумедних варіантів. І в word і в excel і навіть в paint'е робили. У Photoshop до речі пробував - це не зручно, клопітно і огидно довго. Але існують спеціальні програмні рішення цього завдання. Про це якраз далі.

Коли я задався цим питанням, виявив в мережі купу різноманітних варіантів. Є і браузерні сервіси, є софт під Mac OS, є під Windows. Перераховувати все не бачу сенсу. В інтернеті та так цього навалом.
Розповім вам про те вирішенні, на якому зупинився я.

Balsamiq Mockups.

Програму можна знайти на їх оф. сайті. Вона платна. Для любителів халяви на сайті rutracker.org зможете знайти рішення платності питання.
Програма видана виключно англійською мовою і не має русифікації. Скажу вам одне - воно і не треба. Все настільки просто і зрозуміло, що розбиратися мені довелося хвилин 5, не більше.
Віконце Balsamiq виглядає ось так:

Нотатки web-дизайнера
вікно програми Balsamiq Mockups

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

Нотатки web-дизайнера
Як виглядає прототип в Balsamiq

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

Натхнення та успіхів! Якщо з'явилися питання, потрібна допомога в навчанні роботі з програмою - питайте, відповім!