А вот в чём вы делаете макеты интерфейсов?

Андрей Косеченко
7 июня 2010

Приветствую.

Хочу стать вашим конкурентом и попытаться заработать на жизнь тем же, что и вы.

Из головы не выходит один вопрос. С макетами сайтов все более-менее понятно — прямая дорога в Индизайн.

А вот в чём вы делаете макеты интерфейсов? Например Эмгизмо, The bat, сайты? Не сразу же в IDE ваяете?

P. S. Что посоветуете почитать на эту тему?

А. Г.

С этого понедельника — только в Индизайне.

Дорогие дизайнеры бюрю! Я оцениваю ваш период вне зоны комфорта в полтора дня. А потом наступит такой комфорт, какой вам и не снился.

P. S. Вот как жёстко иногда приходится действовать, Андрей. Применяйте в вашей конкурентной борьбе.

Твитнуть

Отправить

Однозначно — Индизайн!

Из «литературы» посоветую отличные видеокурсы от Lynda.com (http://www.lynda.com/home/ViewCourses.aspx?lpk0=394). Более простого способа освоить Индизайн я не знаю — при условии, что у вас всё в порядке со знанием английского.

Алексей Мельников
7 июня 2010

Андрей! Вы безнадёжно отстали с вёрсткой макетов в Индизайне. С появлением Веб 2.0 все давно уже делают динамические макеты в Паверпоинте.

Леонид Назаров
7 июня 2010

Артём, а как же динамические прототипы интерфейса? Не проще ли их делать например в Axure? У Акшуре множество плюсов:

— Множество готовых библиотек и элементов интерфейсов.
— Кросплатформенность. Недавно вышла версия для Мак ОС X.
— Динамические прототипы. Возможность сразу показать заказчику, что произойдёт если мы нажмём на эту кнопку. Плюс к этому динамика делается буквально в пару кликов.
— Создание шаблонов страниц, элементов интефрейса.

Есть конечно же и минусы, например нет возможности сразу открыть уже готовый интерфейс в фотошопе, чтобы довести его до блеска. Его придётся рисовать заново. Но «скелет» сайта или программы делается очень быстро.

Почему Индизайн лучше той же Акшуре?

Анатоль Новиков
7 июня 2010

На бумаге сразу, так быстрее и все сразу могут участвовать. Потом в векторной программе, а будет это люстра или индиз, уже вопрос второй. Можно хоть в шопе. Мне кажется, это не принципиальный вопрос. Аксура тоже хороша.

Александр Грин
7 июня 2010

Ещё есть QuarkXpress, который позволяет в один клик вывести результат в браузер и увидеть рендеринг шрифтов в реальной обстановке, поводить мышкой над ссылками и картинками. Что вы думаете про него?

Андрей Лисицын
7 июня 2010

Артём, а можешь рассказать схему работы?

Вы сначала накидываете общие элементы и утверждаете их. Потом делаете уже с готовыми материалами в Индизайне? Или как?

И ещё, простите за незнание. Программист или верстальщик работает у вас тоже с индизайн-файлом?

Валентин Головач
7 июня 2010

Единственное, что бесит в Индизайне, так это выбор цвета, отличный от Фотошопа. Плюс hex цвета получить не так просто.

Вадим Макеев
7 июня 2010

А. Г., мне очень жаль ваших верстальщиков. Переход на ID ударит, прежде всего, по ним.

Георгий Задворнов
7 июня 2010

Очень хочется сменить Фотошоп на Индизайн, но есть моменты, не позволяющие быстро переключится.

Хранить ли каждый макет в отдельном файле, или по страницам в одном проекте? Если в одном проекте — как быть с одинаковой высотой всех страниц проекта? Если в разных файлах — как автоматически синхронизировать стили?

Как реализовать меню и другие навигационные элементы? Напрашивается использование мастер-страниц, но с увеличением количества пунктов меню и т. п. количество мастер-страниц превысит разумные пределы.

Таких вопросов очень много.

Я о чём вообще :-) Информации об использовании Индизайна в качестве инструмента для создания сайтов в сети нет. Будет очень здорово, если кто-нибудь из советчиков поделится макетами проектов или напишет краткий экскурс на тему «Индизайн для веба» :-)

Евгений Бакст
7 июня 2010

Онлайн-карандашик для прототипирования: http://www.balsamiq.com/builds/mockups-web-demo/

Александр Реушкин
8 июня 2010

В организации, в которой я работаю, сейчас процесс работы над интерфейсом построил следующим образом:
— Собираю данные, которые необходимы у маркетолога, отдела поддержки и от руководства.
— Затем набрасываю информационную структуру.
— Далее с дизайнером на бумаге делаем прототипы. Затем более детально это всё делаю в Иллюстраторе.
— Обсуждаем это всё с руководством, дизайнером и приступаем к дизайну.

Конечный макет в фотошопе делается. Верстальщики спокойны.

Олег Волчков
8 июня 2010

На сайте Юзетикса есть несколько неплохих статей про прототипирование в Индизайне:
http://usethics.ru/blog/lib/indesign_prototyping/
http://usethics.ru/blog/lib/indesign_secrets/
http://usethics.ru/blog/lib/indesign_library/ (очень полезная библиотека элементов)
http://usethics.ru/blog/lib/skripty-indesign-vypusk-1/
http://usethics.ru/blog/lib/skripty-indesign-vypusk-2/
http://usethics.ru/blog/lib/skripty-indesign-vypusk-3/

Сергей Белкин
8 июня 2010

Проблема с одинаковой высотой страниц уже решена в CS5.

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

К слову сказать, в indd можно получить pixel-perfect прототипы.

Валентин Головач
9 июня 2010

Олег, у Артёма Шитова симпатичнее библиотека — http://dl.dropbox.com/u/1112716/_Forms.indl

Пользуюсь, очень нравится.

Артём Петренков
9 июня 2010

А как насчёт Адоби Файрворкс? Насколько он подходит для прототипирования веб-страниц и оконных интерфейсов?

Михаил Озорнин
22 сентября 2010

Артём, там же у Юзетикса (http://usethics.ru/blog/lib/adobe-fireworks/) пишут, что Fireworks — вполне ничего.

>Так что если вы каждый день рисуете сайты в Photoshop, очень рекомендую перестать. И, если вам важны отдельные пиксели (т. е. растеризация кривых и, в особенности, прямых) рекомендую перейти на Fireworks, а если не важны, то в InDesign.

Леонид Изамов
10 декабря 2010

Господа, а как же Microsoft Expression Blend и их SketchFlow? Он ведь прекрасен.

О свежих версиях информации немного даже на английском. На русском знаю только вот эту раздачу на рутрекере (никакого пиратства, материал свободен): http://rutracker.org/forum/viewtopic.php?t=3275237

И в онлайне то же самое можно смотреть: http://scrollup.ru/video/sketchflow_prototyping/

Вова Икалюк
29 июня 2011

Возможно, будет полезна книга по Индизайну: Interactive InDesign CS5: Take your Print Skills to the Web and Beyond.

Там как раз рассказывают, как использовать Индизайн в создании веб-страниц.

http://www.amazon.com/…&pf_rd_t=101&pf_rd_p=470938631&pf_rd_i=507846 (http://www.amazon.com/gp/product/0240815114/ref=s9_simh_gw_p14_d0_i1?pf_rd_m=ATVPDKIKX0DER&pf_rd_s=center-2&pf_rd_r=1G0AMNGYY2B69V4TTWPE&pf_rd_t=101&pf_rd_p=470938631&pf_rd_i=507846)

Сергей Кондауров
7 июля 2011

Артём, Фаерворкс — программа для прототипирования простых, линейных интерфейсов. Хорошо дружит с Фотошопом, простой в изучении. Я изучил его за пару дней.

Проблемы появляются, если в прототипе сайта около 20 насыщенных активными областями страниц. При экспорте Фаерворкс нарезает мне такой макет на 20 000 картинок. Тупит и нередко вылетает. Поэтому крупный прототип лучше разбивать на несколько частей, экспортировать по отдельности, а потом складывать всё в одну папку. Но лучше просто не заморачиваться с крупными прототипами в Фаерворксе :-)

Фаерворкс использует только два гига оперативки, при нехватке памяти просто выдаёт сообщение, мол так и так, работать больше не буду (в CS5.5 стал предлагать сохранить проект перед вылетанием).

Меня сильно раздражает невозможность создания активных областей поверх других активных областей. К примеру, если на сайте используется мегаменю, которое при появлении перекрывает много других объектов, то эти объекты не могут быть кликабельными, даже когда меню спрятано.

	Ваш комментарий	Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа. Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным. Вот такой веб 2.0.

Имя и фамилия	обязательны полностью для публикации комментария
Электронная почта	адрес не будет опубликован
Ваши соображения
Иллюстрация	гиф или джипег шириной не более 700 пикселей

Похожие советы Инструменты₆ Бюро₆₆ Носитель: программа₇₄

О Скетче и Пиксельматоре 4 • 5 • Подкаст с техноконтуром Собирается ли бюро в офлайне?

Как выжить в дистанционной работе. Инструменты на удалёнке 4 • Есть ли инструмент для документации замечаний второй стороны переговоров? О Скетче и Пиксельматоре 4 • В какой программе «правильнее» рисовать всяческие схемы? 2 • В чём вы рисуете транспортные схемы? 2 • В Фотошопе шрифты выглядят иначе чем в браузере 9 •

Подкаст с техноконтуром Собирается ли бюро в офлайне? Что делать, если верстальщики отдают кривую вёрстку, как дизайнеру тренироваться в эстетике, в каком направлении дизайна развиваться в 16 лет Спецвыпуск. 13 лет бюро Как победить писательский блок в тексте о себе? 1 • Гугль-док, чтобы упорядочить командное обсуждение 1 • Нельзя просто так взять и сделать модульную страницу из текстовой 1 • 8 • Как создавался новый сайт бюро. Часть четвёртая: сетка Как создавался новый сайт бюро. Часть третья 1 • Как создавался новый сайт бюро. Часть вторая: раскладка работ 2 • 2 • 1 • Вписал пункты «Запрещено курить в офисе» и «Запрещено пить спиртное» 3 • Хочу организовать свою лабораторию, но не знаю, как найти подходящих людей Какие результаты по вступительному заданию нового набора? 7 • Есть ли смысл в такой локальной мини-конституции? 5 • 3 • Как вы прописываете «Ресурс» в трудовом договоре? О Скетче и Пиксельматоре 4 • Почему в бюро пишут «Гугль», а не «Гугл»? 1 • Как вы оценивали вступительные задания в Школу стажёров? 1 • Как вам вступительные задания в Школу стажёров? 4 • Что такое профессиональная этика? 7 • Как в бюро ставят задачи? 6 • Несмотря на то, что между нами была договорённость о работе по ФФФ, клиент был в бешенстве 5 • Как написать хорошее резюме? 7 • Надоело работать без сна и отдыха. Что посоветуете? 2 • Лучше недообещать, чем переобещать 3 • 5 • 2 • Согласование замечаний Как вы искали людей на начальной стадии? Вопросы о системе «Ресурс» 5 • Где грань между «ведущим» и «просто» дизайнером? 10 • Как мотивировать платить быстрее и снизить риск неоплаты? Как вам новости о том, что «Бест-бай» отменяет ROWE? Чем вы руководствуетесь, размещая или, наоборот, не размещая работу в портфолио? 1 • 6 • Как вы относитесь к ошибкам, которые вы допускаете в процессе работы? Арт-директор требует, чтобы пробел в именах всех файлов заменялся на нижнее подчёркивание 5 • При заключении договора клиент увидел пункты меню, в которых сказано, что мы имеем право ставить ссылку на себя 7 • Как в бюро организован отсев неперспективных клиентов? 1 • Вот делаю клиенту заказ, он доволен работой, но при этом я знаю, что это никуда не годится 5 • Как реагировать на категорические заявления клиента о том, что авторский надзор и помощь наших программистов не нужны 2 • Вы проводите большую работу, а клиент неожиданно «отпал». В итоге денег нет, а есть разочарование и неудовлетворённость 2 • Из чего, как правило, состоит презентация идей, коммерческое предложение или как это у вас называется? 6 • Как в больших студиях организована работа над проектами с точки зрения папок, файлов, серверов и т. д. 9 • Почему у Артемия Лебедева студия, а Артёма Горбунова — бюро? Почему на главной странице сайта бюро ссылка «Учебный центр Артёма Горбунова» подчёркнута сплошной линией? А почему ты открыто не пользуешься своей рубрикой и не спрашиваешь сам совета у народа? 21 • Но где они, хорошие книги? Как вы их находите? 6 • 5 • 3 • 4 • 8 • Могли бы вы рассказать о системе работы, используемой в бюро? 25 • 1 • Почему сейчас переключение с главной страницы бюро на главную страницу Учебного центра и обратно не организовано согласно вашей статье «Логотип в интранете»? 11 •

4 • 3 • Как правильно в мобильных приложениях ставить ссылки? 1 • 1 • 2 • 1 • Я не понимаю, как должен быть устроен мир — в смысле сохранения предпочтений 2 • 3 • 5 • 2 • Как вы относитесь к иннициативе Микрософта по выводу ИЕ 6 с рынка? 3 • 1 • Расскажите, пожалуйста, о типах индикаторов загрузки 13 • 15 • 5 • 4 • Почему на Айфоне при нажатии шифта не меняется регистр на самой клавиатуре? 7 • Где должна быть настройка программ на Ай-ОСе 4 • Некоторый механизм управляется с планшета с тач-интерфейсом 7 • 4 • 7 • Иногда люди, когда пытаются оценить, насколько выгодно расположены элементы на форме, рисуют линию, по которой якобы глаз скользит 2 • 19 • 19 • 7 • Печатаю я текст и вдруг обнаруживаю, что делаю это в неправильной раскладке 10 • 4 • 7 • 2 • 8 • 2 • 9 • 10 • 7 • 11 • 15 • 11 • 13 • 7 • 2 • 5 • 22 • 10 • 3 • 2 • 4 • 5 • 1 • 23 • Что вы думаете о нотации Гарретта? 10 • 10 • В своей книге Алан Купер неодобрительно высказывается о таком явлении, как файловая система в компьютерах 24 • 7 • 9 • 21 • 4 • 11 • 7 • 6 • 3 • 16 • Стоит ли при проектировании интерфейса опираться на вариант, что в будущем размеры экранов будут продолжать расти? 4 • 8 • 7 • 9 • 7 • 16 • 9 • Все почтовые программы делятся на два класса: а-ля веб и а-ля десктоп-приложение 6 • 8 • 5 • Оправдана ли замена слова в меню или тексте на его синоним, если это исключает возможные ошибки при чтении? 17 • 20 • 23 •

Недавно всплыло

Как следует поступить дизайнеру, если клиент постоянно вспоминает «нечто очень важное» 7 • Почему в переписке нельзя использовать «Доброго времени суток»? 2 • 1 • Выбранные элементы списка, как не забывать принципы из советов бюро и когда нужен логотип 1 •

Комментарии

Ваш комментарий

Недавно всплыло