Заметки web-дизайнера. В чём и для чего рисовать прототипы.

Решили с шефом на работе качать мой скилл дизайнера по полной. Ну а раз уж так, то и прототипы сайтов делать нужно было учиться. Ну а для начала нужно было разобраться что такое прототип?!

Что такое прототип.

Говоря простыми словами прототип-это чёрно-белый макет будущего сайта. На котором не отображаются такие элементы дизайна как цвета, изображения, иконки. Отображается лишь их схематическое расположение и функционал.

Задачи прототипа:

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

Таким образом прототип — это то, с чего начинается сайт. Он упрощает работу дизайнеру, программисту, верстальщику.

А вот дальше встаёт вопрос о том, как и в чём сделать прототип? Я за свою не долгую карьеру в области сайтостроения повидал не мало забавных вариантов. И в word и в excel и даже в paint’е делали. В Photoshop кстати пробовал — это не удобно, муторно и отвратительно долго. Но существуют специальные программные решения этой задачи. Об этом как раз дальше.

В чём сделать прототип сайта?

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

Balsamiq Mockups.

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

окно программы Balsamiq Mockups
окно программы Balsamiq Mockups

Мне прога более чем понравилась и всем устраивает. Прототипируем теперь только на ней.
Так что пользуйтесь, разбирайтесь. По-моему, достойный выбор для решения задач создания прототипа сайта.
Вот такие прототипы в ней получаются

Как выглядит прототип в Balsamiq
Как выглядит прототип в Balsamiq

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

Вдохновения и успехов! Если появились вопросы, нужна помощь в обучении работе с программой — спрашивайте, отвечу!

Anton_Losev
Подписаться Anton_Losev:

Web-desighn, IT, Системное администрирование, создание сайтов, продвжение

Обо мне вы можете подробнее прочитать в соответствующем разделе сайта.

Оставить ответ