Views Comments Previous Next Search
Как сделать первый шаг к созданию собственного приложения — Как это работает на Look At Me

Как это работаетКак сделать первый шаг к созданию собственного приложения

4 инструмента для того, чтобы превратить свою идею в интерактивный прототип

Как сделать первый шаг к созданию собственного приложения. Изображение № 1.

материал подготовил

Кирилл Евдаков (креативный директор Rutorika)

Способность воплощать идеи гораздо ценнее самих идей. Задумка Facebook не принадлежит Цукербергу, зато ему принадлежит сама социальная сеть. К счастью для гуманитариев, для того чтобы в разы повысить собственные шансы реализовать придуманный проект, не обязательно уметь писать код. Достаточно выбрать современный инструмент проектирования и сесть рисовать свой первый прототип. А чтобы вы не тянули с выбором, мы подготовили обзор самых интересных сервисов для создания мокапов, вайерфреймов и прототипов.

Wireframe.cc (Online)

Границы понятий mock-up, wireframe и prototype весьма размыты,
и разбираться в отличиях стоит только для того, чтобы поправлять менее дотошных знакомых. Наша же цель куда практичнее, поэтому нам достаточно знать, что чем меньше детализирован ваш макет, тем больше он вайерфрейм. В этом смысле wireframe.cc — как раз то, что нужно.

Создаём проект

Сразу нажимаем Go premium и регистрируемся на недельный пробный период. Бесплатная версия не даст нам сохранять свои вайерфреймы и делать их кликабельными.

Как сделать первый шаг к созданию собственного приложения. Изображение № 2.

 

Выбираем тип проекта. Для примера давайте возьмём смартфон.

Как сделать первый шаг к созданию собственного приложения. Изображение № 3.

Добавляем элементы

Особенность интерфейса wireframe.cc в том, что вы сначала выделяете область, а потом решаете, что в ней будет: прямоугольник, блок текста или изображение. Для тех, кто работал в других программах, это может показаться слегка непривычно, но в целом — удобно.

Как сделать первый шаг к созданию собственного приложения. Изображение № 4.

 

Обозначим прямоугольником место для меню.

Совет

Не забывайте почаще сохранять макет, так как, в отличие от десктопных приложений, в wireframe.cc вы потеряете все наработки, если случайно вернётесь на предыдущую страницу или закроете браузер.

 

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

Как сделать первый шаг к созданию собственного приложения. Изображение № 5.

 

Также накидаем несколько маленьких кружков, обозначающих пагинацию (разбиение информации на страницы). Чтобы размножить элемент, его можно скопировать стандартными Ctrl/Cmd + C, Ctrl/Cmd + V или перетянуть элемент в новое место с зажатой клавишей Alt.

Выравниваем

Помимо того что wireframe.cc по умолчанию помогает выравнивать элементы, мы можем воспользоваться стандартным для всех подобных программ инструментом Align.

Как сделать первый шаг к созданию собственного приложения. Изображение № 6.

 

Чтобы выбрать несколько элементов, мы можем кликнуть на них по очереди, зажав Shift, а можем выделить область, зажав левую кнопку мыши и двигая курсор из правого нижнего угла в левый верхний (движение из левого верхнего угла в правый нижний создаёт новый элемент).

Как сделать первый шаг к созданию собственного приложения. Изображение № 7.

 

Затем необходимо нажать на пару кнопок, и всё готово: кружки выровнены по одной линии и расстояние между ними получилось одинаковое. Чтобы выровнять блок с кружками относительно картинки, нужно просто выбрать все элементы, сгруппировать их, нажав Ctrl/Cmd + G, затем выбрать элемент, относительно которого производится выравнивание, и применить необходимый тип. То же самое нужно проделать с остальными элементами. Добавить тексты в кнопки, выделить кнопку и текст, выровнять текст внутри кнопки.

Создаём ссылки

В итоге у нас получился вполне сносный прототип приветственного экрана:

Как сделать первый шаг к созданию собственного приложения. Изображение № 8.

 

Чтобы создать следующий экран, нажмите на иконку карты сайта и нажмите Add new page. Скопируйте на новую страницу блок с меню, сохраните макет.

Как сделать первый шаг к созданию собственного приложения. Изображение № 9.

 

Пора превращать наш вайерфрейм в кликабельный прототип. Возвращаемся на первый экран, выделяем прямоугольник, в котором текст «Зарегистрироваться», и кликаем правой кнопкой мыши. В выпавшем меню нажимаем Link, после чего выбираем экран, на который будет вести наша ссылка.

Сохраняем макет и нажимаем Export/Share. Копируем сгенерированную ссылку и вставляем в новую вкладку браузера или нажимаем на иконку с молнией, чтобы перейти в режим просмотра в текущей вкладке.

Как сделать первый шаг к созданию собственного приложения. Изображение № 10.

 

Неплохо было бы добавить иконку «Назад» на экране регистрации, но максимум, на что мы можем рассчитывать в wireframe.cc, — это кружки и квадратики. Если масштаб нашей идеи никак не хочет смириться с таким примитивизмом, это значит, что нам пора на следующий уровень — к Balsamiq Mockups.

Balsamiq [Online, Mac, Windows, Linux] wireframe.cc + Заготовки

Возможности Balsamiq гораздо шире, чем у wireframe.cc, но основные приёмы, сочетания клавиш и инструменты работают по тому же принципу. Рассказать о каждой из особенностей Balsamiq нам не удастся хотя бы потому, что мы сами всех не знаем, поэтому остановимся на самых ценных.

Online или Desktop?

Используйте обе. И десктопная, и онлайн-версия Balsamiq сохраняют исходные файлы в формате *.bmml. Браузерное приложение сделано на flash и время от времени тормозит, поэтому создавать мокапы будет удобнее на компьютере, а онлайн-версию использовать в первую очередь для того, чтобы презентовать результат или совместно дорабатывать проект.

(?) Если вам не нравится грубая карандашная эстетика Balsamiq, смените её в меню View Skin Wireframe skin.

Инспектор элементов  

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

(?) UI Library — достаточно громоздкая штука. Настроить её положение на экране можно в меню View UI Library.

Сразу после добавления элемента появляется окно Inspector, в котором мы видим только те настройки, которые нужны для кастомизации выбранной детали интерфейса. Например, если мы работает с тумблером, то Balsamiq предложит нам 2 возможных состояния именно для тумблера.

Как сделать первый шаг к созданию собственного приложения. Изображение № 11.

 

Если мы выберем несколько элементов, то сможем отредактировать только общие параметры (например, цвет) и воспользоваться инструментами выравнивания, знакомыми нам по wireframe.cc или любому другому графическому редактору.

(?) Если постоянно возникающее окно Inspector мешает вам работать, закрепите его на панели UI Library: View Dock Property Inspector.

Символы

Представьте, что вы сделали 25 экранов приложения, а потом решили поменять местами иконки в верхнем меню. Сделать регулярно используемый объект символом — гораздо проще, чем вносить изменения вручную. Для этого вам понадобится:

 

Выделить необходимые объекты и, нажав Ctr/Cmd + G, создать из них группу.

Как сделать первый шаг к созданию собственного приложения. Изображение № 12.

 

Назвать элемент и нажать Convert to symbol.

Как сделать первый шаг к созданию собственного приложения. Изображение № 13.

 

После этого символ появится во вкладке Project Assets в UI Library. Чтобы отредактировать его, достаточно будет нажать Edit Source в «Инспекторе элементов», и изменения автоматически применятся ко всем копиям символа. Чтобы изменить одну конкретную копию, достаточно дважды на неё кликнуть. Но не забудьте выбрать отредактированный символ и нажать Break apart в «Инспекторе элементов», в противном случае при редактировании исходного символа изменения будут применены и к только что изменённому нами.

Как сделать первый шаг к созданию собственного приложения. Изображение № 14.

Несколько советов

 Нужно размножить выбранный элемент так, чтобы каждый следующий появлялся на заданном расстоянии от предыдущего? Выберите элемент, нажмите Ctrl/Cmd + D, перетащите появившуюся копию на необходимое расстояние и нажимайте эту же комбинацию клавиш столько раз, сколько нужно.

Чтобы создать ссылку, достаточно выбрать элемент и в Inspector назначить файл, на который необходимо перейти по клику. В выпадающем списке вы увидите только те bmml-файлы, которые хранятся в той же папке, что и редактируемый в данный момент макет.

 Для того чтобы воспользоваться ссылками, нужно перейти в режим презентации View → Presentation mode.

 

Остальные базовые функции в Balsamiq либо интуитивно понятны, либо ничем не отличаются от описанных на примере wireframe.cc

Sketch [Mac] Photoshop + Illustrator — всё, что вам не нужно

Единственная причина, по которой Sketch можно отнести к инструментам для проектирования, — это его простота. На самом деле его возможностей хватает для создания полноценного, готового к разработке дизайна, но, в отличие от Photoshop и Illustrator, вам не понадобится покупать учебник в трёх томах и записываться на полугодовые курсы. Дело в том, что ни один из ныне существующих продуктов Adobe не задумывался для веба. Бывшие графические дизайнеры по инерции продолжили пользоваться знакомыми им программами, привыкли не обращать внимания на тонны ненужных им функций и изобрели сложную систему «костылей» для подготовки макетов. Безоговорочное лидерство монструозных инструментов задрало планку входа на рынок веб-дизайна на неоправданную высоту. Давайте-ка бросим вызов Adobe и научимся делать красиво без них. 

Артборды

Качаем триальную версию Sketch, создаём новый документ и добавляем свой первый артборд, то есть пространство, в котором мы будем рисовать.

Как сделать первый шаг к созданию собственного приложения. Изображение № 15.

 

Для создания артборда вы можете как выделить определённую область, так и выбрать один из распространённых размеров в Inspector справа.

Как сделать первый шаг к созданию собственного приложения. Изображение № 16.

 

Не удивляетесь, если экран вашего iPhone кажется вам явно меньше предложенного «Скетчем» артборда. Дело в том, что пиксели на дисплее retina где-то в 2 раза меньше пикселей на экране вашего компьютера, и на небольшой (если мерить в сантиметрах) экран их помещается в среднем в 2 раза больше. Просто уменьшите масштаб до 50 %.

Библиотеки символов

Возможности Sketch позволят вам самостоятельно нарисовать дизайн практически любой сложности, например, автор этой иконки утверждает, что работал со Sketch чуть больше месяца:

Но на изучение необходимых инструментов «Скетча» придётся потратить 3-4 часа, а для наших текущих целей этого многовато, поэтому воспользуемся шаблонами:

File New From Template iOS UI Design.

Как сделать первый шаг к созданию собственного приложения. Изображение № 17.

 

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

Как сделать первый шаг к созданию собственного приложения. Изображение № 18.

 

Копируем все символы, выделив артборды по одному c зажатой клавишей shift (при копировании с помощью cmd + a все элементы наложатся друг на друга), нажимаем Cmd + C, ждём пару секунд и возвращаемся в наш макет. Создаём новую страницу, кликнув на название этой страницы и нажав плюс в самом низу выпавшего списка. Вставляем символы, нажав Cmd + V.

Как сделать первый шаг к созданию собственного приложения. Изображение № 19.

 

Выбираем Menubar Title, копируем его, возвращаемся на первую страницу и вставляем. Уже знакомые нам направляющие линии помогают поставить элемент туда, куда нам надо. Возвращаемся к символам и дважды кликаем на Navigation bar.

Как сделать первый шаг к созданию собственного приложения. Изображение № 20.

 

На панели управления элементами слева мы видим «внутренности» символа. Так как весь он нам не нужен, зажав Cmd или Shift выделяем три нижних элемента: Line, Background и Gradient Background, копируем на первую страницу.

Новые элементы перекрыли вставленный ранее символ, но это легко поправить: просто перетаскиваем элемент, который хотим видеть на первом плане выше тех, что нужны нам на фоне.

Как сделать первый шаг к созданию собственного приложения. Изображение № 21.

 

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

Как сделать первый шаг к созданию собственного приложения. Изображение № 22.

Импорт элементов
и работа
с ними

На самом деле никакого импорта нет. Мы просто берём нужную нам картинку и перетаскиваем в Sketch. Если ищем иконки — ищем их в SVG, изображения этого формата мы сможем редактировать так, как нам надо. Я взял вот эту иконку телефона, уменьшил её размер, нажал «+» в «Инспекторе элементов» на вкладке Borders, тем самым добавив обводку элементу; обводку сделал потолще, а заливку убрал, сняв галочку около чёрного прямоугольника с надписью Fill. Получилось нечто отдалённо напоминающее дизайн iOS 7.

Как сделать первый шаг к созданию собственного приложения. Изображение № 23.

 

Возьмём несколько фотографий друзей и перетащим их в Sketch. Вставим овал поверх лица (Insert → Shape → Oval). Чтобы получился идеальный круг, растягивая овал, держим клавишу Shift или просто подгоняем размеры в Inspector справа. Там же делаем круг полупрозрачным, выставляя значение Opacity на 50 %.

Как сделать первый шаг к созданию собственного приложения. Изображение № 24.

 

Зажав Shift выбираем фотографию и овал и нажимаем кнопку Mask на верхней панели. Получаем круглую аватарку, повторяем эти действия с ещё одной фотографией.

Как сделать первый шаг к созданию собственного приложения. Изображение № 25.

 

Аватарки надо подписать. Мы можем воспользоваться стандартным инструментом Text, но, так как мы работаем с шаблоном, лучше использовать заготовки с подобранными шрифтами и кеглями.

Как сделать первый шаг к созданию собственного приложения. Изображение № 26.

 

Кликаем в область, в которой хотим разместить текст, и пишем имена. Используя уже знакомые нам инструменты и подходы, делаем из верхней плашки кнопку «Добавить контакт для розыгрыша». Неплохо будет, если немного скруглить углы плашкам, для этого выбираем все через Shift и двигаем ползунок радиуса:

Как сделать первый шаг к созданию собственного приложения. Изображение № 27.

 

Тем временем нам приходят в голову новые идеи функций нашего приложения. Если мы не хотим в итоге запутаться в своём же макете, стоит сразу начать группировать элементы. Для этого выделим их и нажмём Cmd + G, после чего дадим группе название, по которому любой человек сможет догадаться, что за элемент перед ним.

Как сделать первый шаг к созданию собственного приложения. Изображение № 28.

 

Чтобы научиться собирать интерактивные прототипы, нам понадобится сделать второй экран. Пусть это будет экран добавления контакта для розыгрыша. Перенесём группу на второй артборд, сделаем двойной клик по ней и выберем иконку плюса. С помощью инструмента Rotate развернем её так, чтобы получился крестик, нажатие по которому будет возвращать нас к предыдущему состоянию.

Как сделать первый шаг к созданию собственного приложения. Изображение № 29.

 

Если мы будем держать зажатым Shift, то вращать фигуру сможем кратно 45 градусам. Если понадобится, поправить угол можно будет на панели справа.

Выберем элемент Background и продублируем его на расстоянии в пару пикселей от первого, чтобы как бы отбить нижеследующую зону, но как бы не отбивать. Выглядит неплохо, но круглые углы всё нам портят. Кликаем дважды на элемент, чтобы поверх углов появились кружки, выбираем нужные нам углы и убираем радиус. Так-то лучше.

Как сделать первый шаг к созданию собственного приложения. Изображение № 30.

 

На самом деле с углами и линиями можно делать гораздо, гораздо больше, Sketch — это полноценный векторный редактор, но пока это нам не нужно. Нам нужно побыстрее заканчивать с макетом. У меня получилось как-то так:

Как сделать первый шаг к созданию собственного приложения. Изображение № 31.

Из того, что мы не умеем, я применил всего один приём: чтобы быстро изменить цвет элемента на уже имеющийся, выберите его, нажмите Ctrl + C и кликните на нужный цвет. Причём цвет может быть как в макете, так и в соседнем окне браузера.

Как сделать первый шаг к созданию собственного приложения. Изображение № 32.

 

Получилось неплохо, но Джонни Айву лучше пока не показывать.

Экспорт

В Sketch есть масса приятных особенностей экспорта, которые нам не нужны. Нам достаточно выбрать весь интересующий артборд, нажать плюс во вкладке Export и нажать кнопку Export Portrait в самом низу «Инспектора».

Как сделать первый шаг к созданию собственного приложения. Изображение № 33.

 

Всё. Теперь у нас есть две картинки, с которыми мы научимся делать псевдоприложения.

Как сделать первый шаг к созданию собственного приложения. Изображение № 34.

Илья Сизов

арт-директор креативного агентства Red Keds

«В силу специфики проектов в инструментах прототипирования меня цепляют развитые возможности анимации. По этому пути я шёл через keynote, proto.io, prototyper pro, origami и сейчас пришёл к framer.js. По сути, этот инструмент на полпути к голому коду (просто его упрощение), и грубая вёрстка — тоже отличный способ. Код как-то даёт более тонкий и обширный контроль над результатом, а интерфейсы многих программ и сервисов кажутся ненужным усложнением».

Flinto

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

Регистрация

Для начала регистрируемся в Flinto. Достаточно ввести email и пароль. Дальше всё настолько просто, что, вместо того чтобы писать, я просто покажу гифку:

Главные особенности

Назначив ссылки, вы можете выбрать подходящий вид анимации на панели слева. В нашем случае отлично подходит Dissolve, выбираем его, и всё готово к экспорту. Чтобы на рабочем столе вашего смартфона появилась иконка с вашим прототипом, достаточно нажать Share & Install, ввести свой номер телефона, проследовать по ссылке, пришедшей в смс, и сохранить открывшуюся страницу на Home Screen. Таким же образом можно распространить ссылку всем, кому вы считаете нужным, и, каждый раз заходя по ней, они будут видеть актуальную версию вашего приложения.

Как сделать первый шаг к созданию собственного приложения. Изображение № 35.

   

 

Приложение Yo, которое позволяет отправлять друзьям сообщение Yo и получать от них то же самое, недавно привлекло 1 000 000 $. Придумать такое приложение может каждый. Теперь вы можете ещё и спроектировать его, и, немного попрактиковавшись, даже сделать дизайн. Совершенно неважно, какими инструментами вы будете при этом пользоваться: wireframe.cc, WireFrame Skether, Mockflow, Balsamiq, Axure, Pidocu, Pencil Project, OmniGraffle, Mockingbird — их список растёт с каждым днём. Куда важнее знать, насколько на самом деле элементарны базовые принципы, идентичные для всех инструментов, и научиться преодолевать психологическую инерцию, которая мешает нам создавать.

Рассказать друзьям
2 комментарияпожаловаться

Комментарии

Подписаться
Комментарии загружаются