40 бесплатных макетов для мобильных интерфейсов


Содержание

Разрабатываем интерфейс мобильного приложения

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

Мы начнем с нуля, и я опишу весь процесс создания интерфейса.

Окончательное изображение

Программное обеспечение: Photoshop CS3 и выше.

  • Бесплатный шрифт Source Sans Pro ;
  • Бесплатный шрифт Playfair Display ;
  • Бесплатная иконка звездочки ;
  • Бесплатная иконка пользователя ;
  • Бесплатная иконка облака ;
  • Бесплатный PSD-файл iOS 8 GUI (iPhone 6) ;
  • Бесплатный макет iPhone 6 .

Шаг 1

Давайте создадим в Photoshop новый документ. Нажмите CMD / CTRL + N и установите ширину 750 пикселей и высоту 1334 пикселей — это разрешение iPhone 6 :

Шаг 2

Теперь нам нужно установить вертикальные направляющие, чтобы структура интерфейса была ровной. Перейдите в Просмотр > Новая направляющая и задайте следующие значения для вертикальных направляющих: 40 пикселей, 250 пикселей, 375 пикселей, 500 пикселей и 710 пикселей:

Шаг 3

Теперь создайте новую группу слоев ( Слой> Новый> Группа из слоев ), назовите ее “ Top Bar ”, выберите инструмент « Прямоугольник » ( U ) и нарисуйте прямоугольник с размерами 750 на 129 пикселей.

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

Шаг 4

Скачайте бесплатный PSD-файл IOS 8 GUI (iPhone 6) и перетащите из него в основной документ панель состояния из черной группы. Затем используйте ее для отображения элементов оператора связи, часов и индикатора заряда батареи.

Измените имя группы, дважды кликнув на миниатюре слоя. С помощью инструмента « Горизонтальный текст » ( T ) измените цвет элементов на белый #FFFFFF :

Шаг 5

Теперь выберите инструмент « Горизонтальный текст » ( T ), установите шрифт Source Sans Pro ( Стандартный ), размер шрифта — 40 пикселей и введите заголовок приложения, в данном случае “ Recommended Readings ”. Чтобы текст хорошо читался, используйте контрастный белый цвет #FFFFFF :

Шаг 6

Сверните группу слоев “ Top Bar ”, нажав на стрелку рядом с названием группы, и создайте новую группу ( Слой> Новый> Группа из слоев ) под названием “ Read 1 ;.

После этого выберите инструмент « Прямоугольник » ( U ) и нарисуйте прямоугольник размером 750 на 368 пикселей. Это будет базовый фон документа:

Шаг 7

Теперь выберите изображение, которое будет использоваться в качестве иллюстрации, и перетащите его в документ Photoshop .

Поместите слой изображения поверх созданного прямоугольника. Затем при активном слое добавленного изображения нажмите сочетание клавиш Ctrl+Alt+G . Это создаст « Обтравочную маску », которая скроет все, кроме содержимого внутри базового фона. В нашем случае мы увидим часть изображения, которая совпадает с границами прямоугольника:

Шаг 8

Я рекомендую заранее продумать все возможные трудности, которые могут возникнуть при загрузке вашего веб-приложения. Изображения могут не загрузиться, быть слишком яркими или темными. Поэтому нам нужно предусмотреть запасной вариант. Давайте добавим градиент от черного к прозрачному, который станет основой для заголовка документа.

Выберите инструмент « Градиент » ( G ) и задайте переход от черного к прозрачному:

После этого создайте новый слой ( Слой> Новый> Слой ) и назовите его “ Shadow ”. Создайте для него « Обтравочную маску », как мы это делали для изображения. Затем, удерживая нажатой клавишу Shift , прочертите линию перехода градиента снизу вверх и уменьшите непрозрачность слоя до 60%:

Шаг 9

Теперь добавим заголовок рекомендованных для прочтения материалов. Он должен быть достаточно большим, чтобы пользователи, которые просматривают содержимое приложения мельком, обратили на него внимание.

Выберите инструмент « Горизонтальный текст » ( T ), установите шрифт Playfair Display ( Жирный ), размер шрифта – 46 пикселей и введите заголовок статьи.

Разметите заголовок за первой вертикальной направляющей, чтобы слева осталось достаточно свободного пространства. Также рекомендую оставить немного места снизу, чтобы заголовок смотрелся аккуратно:

С помощью инструмента « Горизонтальный текст » ( T ) введите шрифтом Source Sans Pro ( Курсив, размер шрифта — 28 пикселей ), ориентировочное время прочтения материала. Затем поместите надпись справа, перед последней вертикальной направляющей:

Шаг 10

Сверните группу “ Read 1; , нажав на маленькую стрелку рядом с именем группы, и продублируйте ее два раза, нажав CMD / CTRL + J .

После этого переименуйте копии группы в “ Read 2; и “ Read 3; , а затем аналогичным образом создайте новые рекомендованные для прочтения материалы с новыми изображениями, заголовками и временем на прочтение:

Шаг 11

Теперь нужно создать меню навигации, с помощью которого пользователи смогут переходить к разным разделам приложения.
Создайте новую группу под названием « Панель навигации «. После этого откройте группу « Верхняя панель » и найдите в ней слой прямоугольника. Продублируйте его, нажав CMD / CTRL + J , и переместите копию в только что созданную группу.

После этого нажмите CMD / CTRL + T и измените размер прямоугольника, чтобы он « влез » в пространство между последним материалом и нижней частью документа. В моем случае это размер 750 на 101пиксель:

Шаг 12

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

Кликните правой кнопкой мыши на слое иконки и выберите пункт « Параметры наложения ». Примените стиль « Наложение цвета », залив иконку белым цветом #FFFFFF .

Нажмите CMD / CTRL + T , чтобы изменить размер иконки на 54 на 52 пикселя:

Шаг 13

Теперь снова выберите инструмент « Горизонтальный текст » ( T ), задайте шрифт Source Sans Pro ( Обычный ), размер – 24 пикселя и введите надпись “ Favorites ”, чтобы пользователям был более понятен смысл этой иконки.

Поместите подпись немного ниже иконки, оставив одинаковое пространство выше и ниже элемента:

Шаг 14

Повторите предыдущий шаг дважды и создайте еще две ссылки навигации с бесплатными иконками пользователя и облака . Я использовал для них подписи “ Profile ” и “ Discover ”:

Шаг 15

Теперь нам нужно выделить активный элемент. Как вы заметили, у меня иконка профиля залита цветом, в то время как остальные просто нарисованы контурами. Чтобы сделать это выделение более очевидным, давайте добавим для активного элемента более темный фон.

Выберите инструмент « Прямоугольник » ( U ) и нарисуйте между второй и четвертой направляющими черный прямоугольник цветом #000000 .

Уменьшите непрозрачность фигуры до 20%, и у нас получится хороший маркер активного пункта меню:

Поздравляю! Вы создали интерфейс iOS -приложения « Рекомендуемая литература «. Для того чтобы он еще лучше, вставьте интерфейс в один из этих бесплатных макетов iPhone 6 :

Данная публикация представляет собой перевод статьи « Designing Mobile App Interface in Photoshop » , подготовленной дружной командой проекта Интернет-технологии.ру

Адаптивный макет сайта для работы на мобильных устройствах

Макет сайта – это результат работы веб-дизайнера. Это то, как будет выглядеть ваш сайт в будущем. Но до этого еще нужна работа верстальщика, который сделает из макета HTML-шаблон, а затем еще и разработчика, который натянет его на нужную платформу. Если у вас нет соответствующих навыков, и вы хотите избежать всех этих длительных этапов, смело выбирайте шаблоны WordPress, Drupal или Joomla, готовые к установке за пару минут. А технически подкованным специалистам я могу лишь посоветовать подобрать себе адаптивный макет сайта.

Адаптивные макеты отличаются тем, что они изначально приспособлены, для того чтобы работать корректно на мобильных устройствах. Этот фактор имеет огромное значение, учитывая, что доля мобильных пользователей порой достигает 50%.

В этом обзоре вы сможете ознакомиться с двадцаткой лучших адаптивных макетов, и каждый адаптивный макет сайта скачать будет не сложно. Они не бесплатные, но их стоимость начинается от 3$, что довольно дешево за готовый дизайн. Готовые шаблоны под WordPress, к примеру, стоят около 49$, правда за эту цену вы избавляетесь от необходимости выполнять лишнюю сложную работу и сразу получаете сайт, полностью готовый к работе.

С полной коллекцией адаптивных Photoshop-макетов можете ознакомиться на сайте ThemeForest.

Адаптивный макет сайта для корректной работы на мобильных устройствах

implate – отзывчивый шаблон для креативных агентств

implate — это чистый и современный PSD шаблон, который вы можете использовать для того, чтобы создать идеальный веб-сайт креативного агентства. Он также подходит для использования различными фирмами, стартапами или независимыми фрилансерами. Четырехколонная сетка помогает выдерживать все пропорции для адаптации к дисплеям различных размеров. Все макеты были созданы в минималистичном стиле, чтобы посетитель вашего сайта мог сосредоточиться на самых аспектах вашего ресурса.

Kaline – качественный и универсальный шаблон PSD для электронной коммерции

Kaline — это PSD-шаблон для электронной коммерции, который отлично подойдет для интернет-магазинов, продающих модную одежду, обувь и аксессуары. Данный PSD макет отлично приспосабливается под мобильные устройства, так что у посетителей вашего сайта не возникнет никаких проблем с качественным отображением всего контента. Кроме этого, дизайн шаблона отличается изысканностью и тщательностью проработки всех элементов. Шаблон содержит множество настроек и возможностей для удобства работы с ним. Одним словом, Kaline будет лучшим решением для вашего бизнеса.

Manolya – многофункциональный шаблон для впечатляющих сайтов

Manolya предлагает современный, минималистичный и профессиональный дизайн для вашего ювелирного интернет-магазина. Manolya определенно станет лучшим выбором для впечатляющего и привлекательного магазина, который вы можете настроить даже без профессиональных навыков в пользовании Adobe PS. Кроме того, все файлы PSD разработаны в виде сетки и могут быть легко преобразованы в HTML, WordPress, Magento, Woocommerce, Opencart, Shopify, Drupal и Joomla. Отличная адаптивность всех страниц – еще одно качество Manolya.

Макеты адаптивного дизайна сайтов для бизнеса

GreenHouse – творчески оформленный бизнес PSD-шаблон

Этот уникальный PSD-макет с чистым современным дизайном покорит вас и ваших клиентов с первых секунд. Он создан на базе мощной сетки и будет выглядеть четко на любых экранах. Всего 11 PSD-файлов, которые легко адаптируются к любой системе.

OCEAUS – многоцелевой PSD-шаблон сайта путешествий

Дизайн макета современный и чистый. 19 вариантов домашней страницы. Подходит для турагентств, турбюро и сайтов поиска жилья в аренду. 115 легко настраиваемых файлов PSD с дизайном в стиле «Pixel Perfect».

На нашем сайте еще есть шаблоны WordPress для турфирм. Присмотритесь к ним!

Absolute Fitness – PSD-макет для фитнес-клуба

В 46 PSD-файлах спрятано 13 видов оформления домашней страницы для различных вариантов применения: фитнес-зал, тренажерный зал, секция бокса, танцевальная студия, занятия йогой и так далее. В дизайне также предусмотрены различные спортивные калькуляторы и тесты.

Также познакомьтесь с классными темами WordPress для фитнес-клубов.

Medical A >

17 файлов в формате PSD поддерживают 2 варианта главной страницы и 15 других типовых страниц. Чистый профессиональный дизайн на базе сетки Bootstrap 1170px. Все слои в файлах имеют четкие наименования и удобно организованы по папкам.

Кроме PSD-макетов на сайте InBenefit вы найдете и WordPress шаблоны для сферы медицины.

RajHost – Photoshop шаблон компании веб-хостинга

Это отличный макет с 19 хорошо организованными файлами PSD, поэтому с ним очень легко работать. Дизайн чистый и современный. Используются иконки Material и шрифты Google. В числе страниц есть страницы для поиска домена, регистрации/входа и представления услуг. Также есть HTML5-версия, то есть готовая верстка.

Прочтите также мой свежий обзор шаблонов хостинговой компании на WordPress.

iCoach – PSD-макет для тренеров и спикеров

Этот макет идеально приспособлен для индивидуальных специалистов, таких как бизнес- и фитнес-тренеры, спикеры и коучи. С ним можно красиво представить свои услуги, программы обучения и курсы. В комплекте 31 файл PSD с элегантным легко настраиваемым дизайном.

Тем, кто хочет сэкономить время, доступна также HTML-верстка.

Также присмотрите себе профессиональные бизнес-шаблоны для коучей и бизнес-тренеров.

Arch. – PSD-макет архитектурного бюро

Элегантный шаблон в очень современном стиле включает в себя две концепции домашней страницы, четыре варианта страницы блога и два вида оформления портфолио. Контактная страница поддерживает Google-карту и форму быстрой связи.

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

Адаптивный макет сайта — блоги, журналы и сообщества

The Article – шаблон новостного сайта PSD

Современный дизайн в духе минимализма позволит вам получить отличный новостной сайт. 5 видов домашней страницы, страницы обзоров, выпадающее мега меню, форма регистрации/входа и многое другое скрыто в 16 файлах PSD.

Bmag – PSD макет адаптивного блога или журнала

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

Red Zone – PSD-шаблон игрового сообщества или портала

Современный шаблон, который поможет вам создать стильный сайт-сообщество для геймеров с обзорами игр, галереями и видео. Шесть вариантов оформления домашней страницы. И все это в 18 файлах Photoshop с удобно организованными слоями.

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

Адаптивный макет сайта — Творчество и IT

Genesis – творчески оформленный макет PSD

Этот шаблон удовлетворит все ваши требования. В его комплекте один файл с очень удобной структурой слоев для быстрого редактирования. Дизайн уникальный, чистый и современный. Создан на базе сетке 1170.

Laterna – готовый дизайн сайта фотогалереи в формате Photoshop

Макет Laterna станет идеальной основой для минималистского сайта фотографии. В нем 22 файла PSD с дизайном на любой вкус. Поддерживаются две версии сайта: светлая и темная. Макет чистый и четкий.

MOOD – универсальный PSD-макет

Творчески оформленный макет в нереально крутом элегантном стиле подойдет под сайт-резюме и портфолио. Веб-дизайнеры, фотографы, архитекторы, дизайнеры интерьера и даже юристы смогут использовать MOOD, чтобы красиво представить свои услуги.

Coor – творческий одностраничный PSD-макет

Мощный современный шаблон подойдет веб-агентствам, маркетинговым фирмам и фрилансерам. Простая настройка и удобная организация слоев в файлах PSD. Дизайн рассчитан на экраны Retina, создан на базе сетки 1920px для современных экранов.

Наша команда в числе прочего регулярно готовит крутые шаблоны для творческих применений.

Адаптивный макет сайта – Лендинги

Inova – шаблон сайта лендинга для представления программного продукта, книги или стартапа

Этот шаблон, в составе которого есть 8 файлов PSD с хорошо организованными слоями, подойдет под различные варианты лендинга. В нем также есть страницы блога и записей. Сетка Bootstrap 1170px. Для желающих доступна сверстанная в HTML5 версия макета.

Цукерберг рекомендует:  Дизайн - Ищу дизайнера.

Felis – шаблон PSD лендинга продукта

12 файлов PSD удобно организованы, чтобы веб-дизайнер смог легко настроить их под требования заказчика. В них есть 3 концепции оформления домашней страницы. Используются шрифты Google и бесплатные иконки.

Meson – PSD макет адаптивного сайта приложения

Дизайн создан очень тщательно на базе сетки 1170 с 12 колонками. Все элементы чистые и уникальные. Наилучший пользовательский опыт будет обеспечен. Всего доступно 10 файлов PSD, легко редактируемых под корпоративные цвета вашего бренда.

APPSY – Photoshop-макет для представления разработанных приложений

Это очень крутой макет со стильным дизайном для веб-разработчиков и веб-студий. 4 концепции оформления домашней страницы на любой вкус. Два варианта страниц блога. Оформление рассчитано на сетку 1170px.

Подробнее о готовых решениях для лэндинга на WordPress прочтите в статье «WordPress лэндинг: все о раскрутке вашего бренда».

Адаптивный макет сайта — интернет-магазины

June – многозадачный PSD-шаблон магазина

Для этого макета профессиональные веб-дизайнеры трудились часами, чтобы предоставить великолепные UI-компоненты: от баннеров до продвинутых функций. 18 вариантов домашней страницы с практичным дизайном, три стиля лукбука, 10 страниц товаров и 8 страниц каталога. Планируется выход WordPress-версии.

Organiz – крутой макет магазина эко-товаров PSD

Дизайн, разработанный с творческим подходом, покорит и вашего клиента, и его потенциальных покупателей. Все 16 файлов имеют удобную структуру слоев и оформление на базе сетки Bootstrap размером 1170px.

Также прочтите специальный обзор PSD-макетов eCommerce и целый раздел с обзорами готовых сайтов под магазин WooCommerce.

Выберите себе лучший адаптивный макет сайта и создайте свой уникальный дизайн. А еще лучше сразу выберите шаблон WordPress, чтобы сэкономить массу времени и сил.

Бесплатные программы для прототипирования интерфейсов

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

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

POP App

Это был первый сервис для прототипирования, с которой я познакомился. Она позиционирует себя как простой инструмент для работы даже с очень сырым макетом. Вы прикидываете на бумаге, как будут выглядеть экраны в вашем приложении, фотографируете наброски и обрабатываете с помощью POP App. Объекты интерфейса, которые должны быть интерактивными, можно выделить и связать с другими объектами и экранами; например, кнопка login связывается с экраном регистрации. В итоге у вас получается быстрый прототип, экраны которого нарисованы на бумаге в буквальном смысле. Но вместо ручных эскизов вы можете использовать и макеты, созданные в графических редакторах.

POP App работает по принципу постраничных программ для прототипирования пользовательского интерфейса. Вы загружаете в них кипу экранов (порядка 50–100) и соединяете их переходами. Редактор воспринимает каждый экран в макете как слитую картинку. На ней вы выделяете область и указываете, на какой экран человек попадёт, если нажмёт на эту область.

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

Как показать прототип заказчику или пользователю: попросить его поставить на свой девайс специальное приложение.

Цена: бесплатно для двух проектов и одного пользователя. Создать в POP App больше проектов можно, заплатив от 12 $ в месяц.

Золотая середина в плане богатства функциональных возможностей и лёгкости освоения. Программа поможет вам сделать очень классный постраничный прототип. В ней вы сможете закрепить навбар и таббар и листать контент внутри, а плагин Marvel для Sketch позволяет импортировать макет из Sketch в Marvel. Но при этом в программе можно накидать дизайн с помощью внутренней . Здесь даже есть функции послойного прототипирования, хотя полноценными их назвать трудно.

У инструмента есть своё мобильное приложение, где можно быстро накидать дизайн и запрототипировать его.

Marvel покорил наши сердца приветливым интерфейсом, возможностью добавлять гифки и комментировать прототип, и мы в Лайв Тайпинг чаще всего используем для прототипирования именно эту программу. И если вы решились на создание своего мобильного приложения с нами, то его прототип тоже будет создан на Marvel. Не решились? Давайте обсудим это на бесплатной консультации. Вам нужно лишь заполнить заявку .


Минусы: нет удобных символов (как, например, в InVision) и разных состояний экранов. На десктопе приложение работает только в вебе.

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

Цена: бесплатно — для двух проектов, больше — 14 $.

InVision

Эта программа для прототипирования интерфейса более продвинутая, чем Marvel, и позиционирует она себя как инструмент для профессионалов. У программы есть плагин для Sketch — Craft, который позволяет превращать в прототип прямо в Sketch, без отрыва от производства. Среди других бонусов быстрая подстановка шаблонов имён, заголовков, дат и текстов. Например, в макете вам нужно быстро представить кучу разных имён, тогда вы выделяете нужные слои и нажимаете соответствующую кнопку в плагине, и вуаля, плагин сам подставляет рандомный контент. Этот же плагин даёт возможность использовать фото с бесплатного стока Unsplash. Сделать дизайн прямо в InVision пока не получится, но, по слухам, скоро появится и такая возможность.

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

Плюсы: удобные комментарии к прототипам — можно прямо в чате обсуждать ту или иную функцию. Также недавно появилась возможность «инспектить» макет: разработчик может посмотреть размеры объектов в прототипе, расстояние между ними и так далее — прямо как в Zeplin. А ещё есть возможность совместной работы и менеджер задач, похожий на Trello.

Минусы: после Marvel интерфейс InVision не самый удобный. Чтобы выбрать нужный экран, нужно долго искать его в списке, то есть предварительно нужно запоминать название. А если экранов больше 50, это превращается в сущий ад.

Как показать прототип заказчику или пользователю. Показывать прототип пользователю можно также через мобильное приложение.

Цена: бесплатно навсегда.

Origami Studio от Facebook

На фоне вышеописанных программ для прототипирования приложений интерфейс Origami Studio самый сложный. Работает инструмент только на Mac и только с аккаунтом разработчика Apple. К программе можно подключить очень много патчей, что расширяет её возможности, но разобраться в них без туториала сложно.

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

Как показать прототип заказчику или пользователю. Это ещё одно слабое место редактора. Чтобы пользователь смог посмотреть прототип, у него тоже должен быть установлен Origami, что требует наличия Mac и аккаунта разработчика.

Цена: бесплатный навсегда, но для установки нужен аккаунт разработчика Apple (который тоже можно зарегистрировать бесплатно).

Другие бесплатные программы для прототипирования

Atomic

Цена: бесплатно для одного проекта; 19 $ в месяц для неограниченного количества проектов; 99 $ в месяц, если программой пользуется команда до пяти человек, от 145 $ в месяц, если больше.

Adobe XD

RapidUI

Цена: бесплатно, и это тоже .

Webflow

Цена: бесплатно для двух проектов. Для десяти — 16 $ в месяц, за 35 $ в месяц можно получить неограниченный доступ. Эти цены не включают стоимость поддержки хостинга и действуют, если вы платите за год использования.

MockFlow

бесплатно для одного проекта. Лимит в количестве проектов снимается за 14 $ в месяц. Для команд подписка стоит от 29 $ в месяц.

MOCKUP.IO

Заключение

Прототипирование — обязательный этап при создании дизайна в компании Лайв Тайпинг. После того как прототип утверждён, мы создаём макет, который идёт в разработку (подробнее о смысле этого этапа мы писали в нашей статье «Как мы делаем проекты: проектирование и прототипирование»). И это только начало работы над вашим проектом, но очень важное. Подробно о каждом этапе создания мобильного приложения вы можете на нашей бесплатной консультации. Расскажите о своём проекте в форме заявки , и мы вам позвоним.

Обзор инструментов для прототипирования пользовательских интерфейсов

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

Balsamiq Mockups

Хакер #183. Малварь для Android

Эта программа — самый известный инструмент для создания прототипов. Balsamiq доступен для всех операционных систем, и его можно интегрировать с различными системами совместной работы, включая Jira, Confluence и Google Drive. Также есть онлайн-версия Balsamiq. Лицензия для одного ПК обойдется в 79 долларов, а доступ к веб-приложению — от 12 долларов в месяц (не более трех активных проектов).

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

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

Шаблонов для мобильных платформ в Balsamiq очень мало — всего предусмотрено семь макетов и элементов для iPhone. Это макет самого iPhone и некоторые элементы, характерные для мобильной ОС: форма picker (используется в мобильных ОС для ввода времени и других параметров), экранная клавиатура, тумблер ON/OFF и другие. Впрочем, все остальные элементы, необходимые для создания макета мобильного приложения, можно взять из других разделов библиотеки. К сожалению, шаблонов для других мобильных устройств не предусмотрено. Учитывая схематичность получаемых макетов, шаблон iPhone вполне подошел бы для прототипирования интерфейса приложения для любого смартфона или планшета. Но Balsamiq не позволяет изменять соотношение сторон экрана смартфона.

Макет интерфейса приложения для iPhone

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

WireframeSketcher Studio

Шаблоны планшета выглядят неаккуратно, но с их помощью можно нарисовать интерфейс для любого устройства

WireframeSketcher Studio — возможно, самый удобный инструмент создания макетов из рассмотренных в этой статье. В нем библиотека шаблонов даже больше, чем в Balsamiq, есть макеты под все популярные мобильные ОС (iOS, Windows Phone и Android) и даже некоторые веб-фреймворки, например Bootstrap. Интерфейс этой программы, по сравнению с тем же Balsamiq Mockups, более удобен: наиболее часто используемые функции, такие как группировка элементов и вынос их на передний или задний план, выполняется кнопками на главной панели, а не из меню.

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

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

WireframeSketcher Studio доступна для Windows, Linux и OS X, а также в виде плагина для Eclipse. Бессрочная лицензия, включающая в себя один год технической поддержки, обойдется в 99 долларов.

FlairBuilder

Интерфейс FlairBuilder аскетичен

Эта программа по функциональности во многом повторяет Balsamiq. Разработчики даже обеспечили импорт макетов из Balsamiq. В библиотеке шаблонов присутствуют элементы для веба и iPhone, но других мобильных ОС нет. Шаблон браузера называется Chrome и представляет собой не окно, как в остальных программах, а лишь верхнюю часть интерфейса браузера: адресную строку и кнопки «Вперед», «Назад», «Домой».

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

FlairBuilder поддерживает интерактивность. По клику на любой элемент интерфейса можно перейти на другую страницу документа, спрятать/показать или сделать активным/неактивным какой-либо элемент макета, перелистывать табы, изменять положение и размер элементов интерфейса. К любому из перечисленных действий можно добавить условие выполнения на основе состояния других элементов.

Программа поддерживает импорт растровых изображений и экспорт готовых макетов в PDF, HTML и растровые форматы. Для просмотра интерактивных шаблонов на сайте разработчика доступен бесплатный viewer. Цена лицензии на FlairBuilder для одного пользователя — 99 долларов.

DesignerVista mockup tool

Возможности создания макетов приложений под Windows в DesignerVista mockup tool кажутся безграничными

DesignerVista заточен исключительно для проектирования интерфейсов десктопных приложений под Windows. Отсюда и особенности библиотеки: в ней есть, например, огромный набор шаблонов для построения ленточного интерфейса (ribbon). Даже простой шаблон окна представлен в двух вариантах: из Windows 7 и 8.

Помимо шаблонов элементов управления, в макет можно добавлять ссылки на другие макеты, страницы этого же макета или URL. Сама ссылка может быть видимой или прозрачной. Это позволяет вставить в макет скриншот готового интерфейса и разместить на месте его кнопок ссылки на макеты будущих частей приложения. Экспорт макета возможен в PDF, HTML и растровые форматы.

Интерфейс программы стилизован под последние версии Microsoft Office. Работать с ним удобно. Единственный недостаток — нет автоматического выравнивания элементов. Например, в WireframeSketcher Studio шаблон при перетаскивании его на лист старается автоматически выровняться относительно соседних элементов. При этом отображаются линии, подсказывающие логику этого выравнивания. В DesignerVista для выравнивания используются отдельные кнопки на панели инструментов, это слегка увеличивает время создания макета.

В общем, если нужно работать только с макетами десктопных Windows-приложений, то DesignerVista — идеальное решение, полученный прототип будет почти не отличаться от скриншота реальной программы. Цена лицензии — 169 долларов для одного пользователя.

Caretta GUI Design Studio

Библиотека Caretta GUI Design Studio не уступает DesignerVista, хотя многие иконки в ней устарели

GUI Design Studio распространяется в двух версиях: Professional и Express, по цене 129 и 499 долларов соответственно. Эту программу отличают от остальных наиболее широкие возможности программирования поведения интерфейса, доступные только в версии Professional. Видимо, этим и объясняется столь высокая цена.

Содержимому форм макета можно присваивать имена переменных. Переменные хранятся в базе данных, которая понимает слова SELECT, FROM и WHERE. Помимо данных, вводимых пользователем, в базу можно заранее загрузить свои данные. Для каждого элемента можно задать условия видимости и активности, исходя из значения тех или иных переменных.

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

Запускать интерактивные прототипы можно либо из самой программы, либо из специального viewer’а, который распространяется бесплатно. Разумеется, ничто не мешает просто экспортировать макеты в PNG, если не требуется интерактивность. Версия Professional поддерживает контроль версий макетов с помощью SVN.

GUI Design Studio ориентирована на создание макетов программ для ОС Windows. Набор шаблонов здесь не такой богатый, как в DesignerVista. Его можно немного расширить, импортировав собственные иконки в формате ico.

UXToolbox

Своих 266 долларов UXToolbox вряд ли стоит, тут просто нет киллер-фичи, которая бы оправдывала ценник

Продукт английской компании softandGUI в первую очередь разработан для работы с мобильными приложениями. При создании нового проекта UXToolbox просит выбрать целевое устройство, под которое будет разрабатываться интерфейс. Шаблон с изображением этого устройства будет по умолчанию помещен на каждый из листов документа. В библиотеке присутствуют шаблоны нескольких современных смартфонов, а также MP3-плееров и портативных игровых консолей. Смысл наличия этих шаблонов не только в том, чтобы повторить внешний вид устройства. Они нужны также для того, чтобы элементы интерфейса соотносились по размеру с физическим размером экрана. Учитывая разнообразие устройств на Android, полезно было бы иметь шаблон некоего обобщенного смартфона, для которого можно было бы задать любой размер экрана. К сожалению, такой шаблон не предусмотрен разработчиками UXToolbox, а предложенный набор смартфонов довольно скуден: это все поколения iPhone, HTC Desire, Samsung Galaxy S, S3, Note 2, Omnia 7, а также несколько моделей Nokia и BlackBerry.

Макеты можно просматривать как в режиме wireframe, так и в режиме high-res

Интерактивность в UXToolbox реализована довольно примитивно. Любой элемент интерфейса можно использовать как ссылку на другой лист документа. Листы одного документа представляют собой полностью независимые макеты.

Цукерберг рекомендует:  Курсор - Вопрос к знатокам Java Swing

В программе есть два режима отображения макета: wireframe и high-res. Последний делает изображение более приятным для глаза, интерфейс становится похожим на скриншот.

К сожалению, библиотека шаблонов довольно скудна. С другой стороны, в ней есть специфические элементы интерфейса из iOS и Android. В программах, способных генерировать только схематические изображения, многие элементы (например, кнопки или полосы прокрутки) изображаются одними и теми же шаблонами для макетов веб-сайтов и мобильных приложений. Но если необходимо создать более реалистичный макет, такой подход неприемлем.

Просят за UXToolbox немало — 266 долларов за лицензию для одного пользователя. Обратить на нее внимание стоит, если ты хочешь быстро создавать аккуратные макеты, которые можно вставить не только в ТЗ разработчика, но и в презентацию.

Microsoft PowerPoint

Доступ к PowerMockup можно получить через панель инструментов, устанавливающуюся вместе с библиотекой

Если ты часто готовишь презентации в PowerPoint, то, возможно, тебе было бы удобно составлять макеты интерфейсов для них прямо там. Для этой цели существует плагин под названием PowerMockup. Лицензия для одного пользователя обойдется в 60 долларов — недешево, если учесть, что это не полноценный программный продукт, а всего лишь библиотека шаблонов для PowerPoint. Чуть ли не половина предложенных элементов — пиктограммы, не имеющие особого смысла при создании прототипа интерфейса. Впрочем, все базовые элементы присутствуют. Есть даже шаблоны, изображающие корпуса смартфона и планшета. А вот экранной клавиатуры, необходимой, чтобы полноценно изобразить интерфейс мобильной ОС, не предусмотрено.

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

Microsoft Visio

Учитывая хорошую репутацию Microsoft Visio как средства создания всевозможных схем, я не мог не посмотреть, годится ли он для составления макетов пользовательских интерфейсов.

Беглый поиск в Google привел к набору шаблонов Updated Sketch GUI Shapes for Visio, который, по всей видимости, когда-то распространялся автором Джонатаном Аббеттом на его сайте abbett.org. На момент написания этой статьи набора шаблонов на сайте уже не было. Мне удалось скачать его только со Stack Overflow, куда ее выложил один из пользователей конференции. В отличие от плагина для PowerPoint, этот набор шаблонов доступен в качестве родного для Visio файла с расширением vss и не пытается устанавливаться в системе как отдельная программа. Набор довольно скуден — всего 34 наименования.

Набор шаблонов Updated Sketch GUI Shapes for Visio

Как выяснилось, Visio 2013 имеет родной набор шаблонов для создания схем интерфейсов. Для того чтобы им воспользоваться, нужно при создании нового файла выбрать из категории «Программное обеспечение» пункт «Проволочная диаграмма». Штатный набор шаблонов Visio более полон и включает в себя почти все, что есть в специализированных программах, кроме макетов для мобильных приложений.

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

Макеты как сервис

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

20 инструментов для дизайнера мобильных приложений

Небольшая коллекция полезных инструментов для дизайнера, разрабатывающего мобильные приложения от издания Mashable:

1. Proto

Платформа доя прототипирования мобильных приложений. Создание интерактивных прототипов и симуляция основных пользовательских действий с поддержкой основных браузеров. Есть редактор, панель создания прототипа и плеер для просмотра интерактивного прототипа в работе.

Готовый прототип можно тестировать на реальном мобильном стройстве или в браузере.

2. Moqups

Инструмент для создания мокапов на HTML5 с простым интерфейсом и набором форм, кнопок, полей, контейнеров и основных элементов интерфейса.

Содержит шаблоны для прототипирования приложений под iPhone и iPad.

3. UXPin

Инструмент быстрого создания прототипов на основе простой разметки с нуля. Есть возможность контроля итераций, редактирования и совместного комментирования проекта несколькими дизайнерами и разработчиками в режиме реального времени.

4. Balsamiq

Один из самых популярных инструментов прототипирования мобильных интерфейсов и приложений. В комплекте — десятки и сотни иконок и элементов интерфейса. Есть шаблоны под несколько основных смартфонов и мобильных операционных систем.

5. Justinmind

Платформа для дизайна и прототипирования мобильных приложений для iPhone, Android-смартфонов и iPad. Поддерживает работу с виджетами.

6. Fluid

Баузерное приложение на HTML5 для создания интерактивных прототипов мобильных приложений под Android, iOS и Windows 8. Поддерживает редактирование перетаскиванием, анимацию и библиотеку из 1700+ готовых элементов интерфейса. Есть возможность экспорта дизайнерских прототипов в различные типы документов и изображений.

7. Axure

Генератор интерактивных прототипов с возможность быстрого визуального редактирования и скачиваемыми библиотеками для виджетов с поддержкой фреймов для iOS, Retina-экранов, библиотеками для iPhone, iPad и Android.

8. Mockflow

Быстрый инструмент фрейминга приложений и библиотека элементов для прототипирования с поддержкой разработки дизайна приложений для iPhone, Android, iPad и Windows Phone.

9. Protoshare

Мощная платформа-конструктор с поддержкой 2D- и 3D-анимации готовых прототипов. Прототипы дизайнерских решений можно экспортировать и устанавливать на iPhone, iPad или Android-смартфон для дальнейшего тестирования.

10. Wireframe

Простой инструмент для фрейминга и прототипирования с поддержкой быстрого рисования за пару кликов. Предлагает два базовых поля для разработки шаблона или прототипа: вид в окне браузера и вид на экране смартфона. Поддерживает разработку концепции дизайна для горизонтальной и вертикальной ориентации экрана мобильных устройств (смартфоны и планшеты).

11. Wireframe Sketcher

Инструмент для дизайнеров, создающий быстрые скетчи для прототипирования приложений с поддержкой работы в качестве вспомогательного решения для Eclipse IDE. Есть плагины и наборы элементов интерфейса для основных мобильных ОС.

12. Omnigraffle

Инструмент создания интерфейсов и диаграмм для приложений под iPhone.

13. Pidoco

Веб-приложение для прототипирования с поддержкой кликабельных элементов интерфейса и модулем для тестирования прототипов. Есть симуляторы для iPhone и iPad.

14. Flair Builder

Плоские прототипы интерфейса на основе виджетов и дополнительной библиотеки элементов. НА выходе получаете полнофункциональный HTML-прототип будущего приложения с эффектами и внутренней структурой. Готовый прототип можно экспортировать для тестирования на реальных устройствах под iOS и Android.

15. iPhone Mockup

Инструмент создания простых мокапов для iPhone, годится для начинающего дизайнера, занимающегося прототипами.

16. HotGloo

Мощная библиотека элементов внутри веб-приложения для прототипирования, есть поддержка CSS3-эффектов. Поддерживает совместную работу над одним проектом и комментирование в реальном времени.

17. Invision

Прототипирование на основе как готовых, так и создаваемых дизайнером элементов. Есть возможность экспортирования набросков в различные форматы изображений.

18. Mokk.me

Быстрый конструктор прототипов с функциональностью drag-and-drop и редактированием виджетов. Результат можно тестировать на iOS- и Android-устройствах.

19. iPlotz

Позволяет создавать кликабельные мокапы с возможностью навигации по элементам и структуре прототипа приложения. Есть шаблоны для iPhone/iPad и устройств на основе Android. Готовый прототип можно экспортировать в IPML, JPG, PNG, PDF или HTML, либо отправить ссылкой на веб-страницу другим участникам проекта для обсуждения и совместного тестирования.

20. Pencil Project

Завершает подборку open-source инструмент разработки диаграмм и прототипов интерфейса с поддержкой встроенной библиотеки форм и элементов и возможностью создавать визуальные блок-схемы для дизайнеров мобильных приложений.

Блок-схемы мобильных телефонов, каркасы, набор макетов интерфейсов для мобильных приложений. Premium векторы

Тебе также может понравиться

Набор экранов ui, ux, gui социальная сеть приложение плоское

Набор экранов ui, ux, gui медицина приложение плоское

Комплект банковских приложений.

Набор экранов ui, ux, gui плоский шаблон музыкального приложения

Набор экранов ui, ux, gui плоский шаблон приложения доставки

Комплект комплекта пользовательского интерфейса бортовых экранов


Набор экранов ui, ux, gui плоский шаблон приложения ecology

Набор плоских шаблонов ui, ux, gui для образовательного приложения

Набор экранов ui, ux, gui экологическое приложение плоское

Набор экранов ui, ux, gui плоский шаблон приложения для покупок

Набор экранов ui, ux, gui фитнес-приложение плоский

Набор экранов ui, ux, gui медицина приложение плоское

Набор экранов ui, ux, gui

Набор экранов ui, ux, gui плоский шаблон приложения для покупок

Набор плоских шаблонов ui, ux, gui для образовательного приложения

Комплект комплекта пользовательского интерфейса бортовых экранов

Набор экранов ui, ux, gui банковское приложение плоское

Набор экранов ui, ux, gui плоский шаблон банковского приложения

Набор экранов ui, ux, gui экологическое приложение плоское

Набор экранов ui, ux, gui

Набор ui, ux, gui экранов плоский шаблон приложения социальной сети

Комплект комплекта пользовательского интерфейса бортовых экранов

Набор шаблонов комплекта интерфейса пользователя

Набор ui, ux, gui экранов фитнес-приложение плоский шаблон

Блок-схема интерфейса приложения ux ui. мобильный каркас управления сайтом карта вектор макет

Иллюстрация бортовых экранов

Комплект комплекта пользовательского интерфейса бортовых экранов

Комплект комплекта пользовательского интерфейса бортовых экранов

Набор экранов ui, ux, gui музыкальное приложение плоское

Комплект комплекта пользовательского интерфейса бортовых экранов

Набор экранов ui, ux, gui фитнес-приложение плоский

Комплект комплекта пользовательского интерфейса бортовых экранов

Набор экранов ui, ux, gui социальная сеть приложение плоское

Приложение для веб-сайтов о путешествиях

Комплект комплекта пользовательского интерфейса бортовых экранов

Комплект комплекта пользовательского интерфейса бортовых экранов

Комплект комплекта пользовательского интерфейса бортовых экранов

Шаблон интерфейса приложения для продвижения в социальных сетях

Комплект комплекта пользовательского интерфейса бортовых экранов

Комплект комплекта пользовательского интерфейса бортовых экранов

Комплект комплекта пользовательского интерфейса бортовых экранов

Комплект комплекта пользовательского интерфейса бортовых экранов

Набор экранов ui, ux, gui плоский шаблон банковского приложения

Набор градиентов цветов

Набор ярких красочных градиентов

Красочный набор ярких градиентов векторная иллюстрация

Элегантные мягкие цветные градиентные образцы

Теплые цвета живой градиент набор векторная иллюстрация

Дизайн экрана блокировки смартфона

Яркий набор красочных градиентов векторная иллюстрация

Социальные сети

Получи эксклюзивные ресурсы прямо на свой почтовый адрес

Copyright © 2010-2020 Freepik Company S.L. Все права защищены.

Регистрируясь на этом веб-сайте, ты принимаешь наши Условия использования и Политику конфиденциальности

Зарегистрироваться

И наслаждайся преимуществами

Увеличь свой ежедневный лимит скачиваний

Получи доступ к эксклюзивным предложениям и скидкам

Получи набор из 20 Премиум-ресурсов бесплатно, подписавшись на нашу рассылку

Уже есть аккаунт? Войти

Зарегистрироваться с аккаунтом социальной сети

Помощь с паролем

Введи имя пользователя или адрес электронной почты чтобы восстановить пароль. Ты получишь письмо с инструкциями. Если у тебя возникли проблемы с восстановлением пароля, свяжись с нами.

Здравствуйте!

В нашей рассылке вы найдете эксклюзивные дизайны, новости и рекламные предложения.

Подпишитесь и получите 20 векторов премиум

Да, получить Нет, продолжить без получения пакета

Мы защитим вашу личную информацию. Подробнее

Сообщить

Уведомление о нарушении Авторских Прав

Если ты являешься владельцем авторских прав или агентом, отвечающим за это, и считаешь, что какой-либо контент на сайте Freepik нарушает авторские права твоей работы, ты можешь подать уведомление в DMCA для уведомления о ресурсах, которые могут представлять собой нарушение соответствующих лицензий

Сообщить о проблеме с загрузкой

Что пошло не так?

Поздравляем! Теперь ты Премиум пользователь Freepik.

Теперь ты можешь использовать весь контент без атрибуции и скачивать ресурсы, помеченные значком Премиум.

Краткое описание лицензии

Наша лицензия позволяет вам использовать контент

  • Для коммерческих и личных проектов
  • В цифровых или печатных СМИ
  • Можно использовать, неограниченное число раз в течение долгого времени
  • В любой точке планеты
  • Можно изменять, или создавать работы на основе данного контента

* Этот текст является только кратким описанием и не содержит никаких договорных обязательств. Для получения дополнительной информации, перед использованием контента прочитайте наши Условия использования.

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

В представленной здесь подборке — сервисы и программы для создания прототипов, раскадровки, дизайна веб-страниц и вдохновения. Они абсолютно бесплатные, без каких-либо ограничений и пробных версий. Особенно будут полезны студентам и тем, кто стремится себя попробовать в дизайне интерфейсов.

Pixate

Pixate представляет собой платформу для прототипирования приложений. Эта платформа включает в себя большой набор функций. Вам предоставляется возможность создания слоёв, добавления анимаций и интерактивов. А самое главное — вы можете посмотреть, как ваш дизайн будет выглядеть в жизни. Посредством плеера Pixate у вас есть возможность просмотреть готовый прототип и покликать по нему на смартфоне (данный сервис поддерживает платформы iOS и Android).

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

Marvel

Можно либо прямо в Marvel создавать дизайн приложения, либо вы можете экспортировать свои макеты из Sketch или Photoshop. Можно создать прототип с готовым оформлением (добавить переходы и анимации). Это позволяет визуально просмотреть, как для пользователя будет выглядеть веб-страница или приложение. Также есть возможность взаимообмена проектами в режиме реального времени.

iPhone Mockup

Эта программа позволяет просто и быстро создавать скетч мокапа или иллюстрацию iPhone. Всё, что необходимо сделать, — перетащить методом drag-and-drop необходимые элементы интерфейса. Для серьёзной разработки сервис не подходит, однако если вы желаете зафиксировать собственную идею быстро или с кем-то поделиться набросками, то для этой цели iPhone Mockup вполне подойдёт.

Pencil Project

Pencil Project является бесплатным инструментом с открытым исходным кодом для прототипирования. Эта программа обеспечивает создание макетов мобильных приложений и веб-страниц. Также имеются встроенные коллекции с распространёнными элементами интерфейсов, блок-схемами и формами.

Form

Создание прототипов и их просмотр на iPad или iPhone либо через USB + Form или Wi-Fi производится посредством данной программы.

Use Your Iinterface

Сборник огромной коллекции анимированных интерфейсов. После входа вдохновляемся занимательными решениями и используем идеи на практике.

UX Myths

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

Mobile Patterns

Сборник дизайнерских решений для мобильных интерфейсов. Способствует преодолению творческого кризиса. Большим преимуществом является распределение на категории: карты, списки, календари, настройки и тому подобное.

Good UI

Ещё одним полезным ресурсом с теорией дизайна интерфейсов можно считать Good UI. Один недостаток — изложение всей информации на английском языке. Этот ресурс — собрание 75 идей для оформления веб-страниц. Проверка данных рекомендаций производилась A/B-тестированием.

25 мобильных шаблонов дизайн-макетов в PSD

28 сентября 2013 | Опубликовано в графика | 1 Комментарий »

PSD файлы могут различным образом применяться в качестве шаблонов для мобильных телефонов и веб-сайтов. С помощью PSD файлов вы можете персонализировать внешний вид своего веб-сайта или мобильного. Многие дизайнеры предлагают различные привлекательные мобильные шаблоны таких макетов. В данной подборке представляем вашему вниманию 25 шаблонов дизайн-макетов в PSD для использования на смартфонах, вдруг вам что-либо пригодится.

25 бесплатных сервисов для веб-дизайнера

Поговорим о бесплатных или бюджетных заменах дорогостоящим инструментам.

ProtoPie

Сервис для создания прототипов подходит для новичков, далеких от программирования. Но и более опытным пользователям он понравится. Создавайте слои, добавляйте анимацию и элементы интерактива, просматривайте прототип для мобильных устройств с экрана смартфона. Есть версии для iOS и Android.

Gravit Designer

Полнофункциональный векторный редактор можно настроить под себя. Он содержит множество полезных инструментов и подходит для работы с интерфейсами, иконками и другими элементами. Результаты можно сохранять в облако сервиса.

Pencil Project

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

Marvel

Платформа позволяет работать индивидуально или быстро делиться прототипами и обсуждать их в реальном времени. Создавайте макеты в сервисе или экспортируйте их из Sketch и Photoshop. На прототип в виде веб-страницы или мобильного приложения можно в любой момент посмотреть глазами пользователя.

Vectr

В числе преимуществ — масса полезных фильтров, теней и прочих инструментов, а также возможность совместной работы с нескольких устройств.

Inkscape

Отличная замена Adobe Illustrator, которая не стоит ни копейки и поддерживает файлы своего дорогостоящего собрата. В редакторе можно сделать буквально все: от простенького веб-дизайна до шедевров графики.

Подключайте iPhone и iPad к компьютеру через USB или «по воздуху» и просматривайте прототипы сразу на мобильных устройствах.

PowerMockup

Вряд ли вы рассматриваете в качестве инструмента для веб-дизайна Microsoft PowerPoint, но все меняет плагин PowerMockup. Дополнительная панель превращает программу для создания презентаций в платформу для прототипирования. Тестовый период плагина бесплатный.

Fluid UI

Сервис создан для прототипирования мобильных приложений в онлайн-режиме и содержит набор элементов, подходящих для iOS, Android и Windows 8. Бесплатно можно разработать десять страниц для одного проекта. Хотите больше — придется доплатить.

iPhone Mockup

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

Proto

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

UXPin

Сервис для быстрой работы над прототипами. Можно открыть совместный доступ для нескольких человек, чтобы редактировать и комментировать проект «в прямом эфире».

Цукерберг рекомендует:  Базы данных - Синхронизация базы данных между клиентом и сервером

Balsamiq

Сервис для прототипирования мобильных приложений. В нем представлены шаблоны для нескольких операционных систем и некоторых популярных смартфонов.

Justinmind

Этот инструмент прототипирования выручит любителей виджетов — он поддерживает работу с ними.

Moqups

Простой интерфейс, масса вариантов кнопок, контейнеров, полей, шаблоны для приложений под iPhone и iPad — все это собрано в сервисе для прототипирования на HTML5.

Lost Type

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

Red Pen

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

Subtle Patterns


Бесплатный набор изображений для создания бесконечного фона на сайте.

I want hue

Если за плечами нет художественной школы и вы не уверены в подборе цветов и их сочетаний — этот сайт поможет найти удачные решения.

Iconfinder

Огромная база иконок для любых целей.

Font Reach

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

Pttrns

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

Mobile Patterns

Сервис поможет найти свежие идеи дизайнерам, зашедшим в тупик. Здесь множество решений для мобильных устройств: можно листать все подряд или выбрать категорию.

UX Myths

Освоившие английский смогут узнать о распространенных заблуждениях, связанных с проектированием пользовательских интерфейсов. Создатели не голословны: они старательно объясняют каждый миф и показывают на примерах, «что такое хорошо и что такое плохо».

Good UI

Для тех, кому не хватает теории, создатели сайта собрали множество идей и советов. Их уже проверили на пользователях, так что можно брать на вооружение.

Все говорят о высоких зарплатах веб-дизайнеров — и мы тоже, потому что это чистая правда. По данным Superjob, средний доход специалиста этого профиля составляет 80 тысяч рублей в месяц. Но никто не предупреждает, что на покупке сервисов для работы можно разориться. Полный пакет Adobe Illustrator с Adobe Stock, например, обойдется в пять тысяч рублей в месяц.

Поговорим о бесплатных или бюджетных заменах дорогостоящим инструментам.

ProtoPie

Сервис для создания прототипов подходит для новичков, далеких от программирования. Но и более опытным пользователям он понравится. Создавайте слои, добавляйте анимацию и элементы интерактива, просматривайте прототип для мобильных устройств с экрана смартфона. Есть версии для iOS и Android.

Gravit Designer

Полнофункциональный векторный редактор можно настроить под себя. Он содержит множество полезных инструментов и подходит для работы с интерфейсами, иконками и другими элементами. Результаты можно сохранять в облако сервиса.

Pencil Project

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

Marvel

Платформа позволяет работать индивидуально или быстро делиться прототипами и обсуждать их в реальном времени. Создавайте макеты в сервисе или экспортируйте их из Sketch и Photoshop. На прототип в виде веб-страницы или мобильного приложения можно в любой момент посмотреть глазами пользователя.

Vectr

В числе преимуществ — масса полезных фильтров, теней и прочих инструментов, а также возможность совместной работы с нескольких устройств.

Inkscape

Отличная замена Adobe Illustrator, которая не стоит ни копейки и поддерживает файлы своего дорогостоящего собрата. В редакторе можно сделать буквально все: от простенького веб-дизайна до шедевров графики.

Подключайте iPhone и iPad к компьютеру через USB или «по воздуху» и просматривайте прототипы сразу на мобильных устройствах.

PowerMockup

Вряд ли вы рассматриваете в качестве инструмента для веб-дизайна Microsoft PowerPoint, но все меняет плагин PowerMockup. Дополнительная панель превращает программу для создания презентаций в платформу для прототипирования. Тестовый период плагина бесплатный.

Fluid UI

Сервис создан для прототипирования мобильных приложений в онлайн-режиме и содержит набор элементов, подходящих для iOS, Android и Windows 8. Бесплатно можно разработать десять страниц для одного проекта. Хотите больше — придется доплатить.

iPhone Mockup

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

Proto

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

UXPin

Сервис для быстрой работы над прототипами. Можно открыть совместный доступ для нескольких человек, чтобы редактировать и комментировать проект «в прямом эфире».

Balsamiq

Сервис для прототипирования мобильных приложений. В нем представлены шаблоны для нескольких операционных систем и некоторых популярных смартфонов.

Justinmind

Этот инструмент прототипирования выручит любителей виджетов — он поддерживает работу с ними.

Moqups

Простой интерфейс, масса вариантов кнопок, контейнеров, полей, шаблоны для приложений под iPhone и iPad — все это собрано в сервисе для прототипирования на HTML5.

Lost Type

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

Red Pen

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

Subtle Patterns

Бесплатный набор изображений для создания бесконечного фона на сайте.

I want hue

Если за плечами нет художественной школы и вы не уверены в подборе цветов и их сочетаний — этот сайт поможет найти удачные решения.

Iconfinder

Огромная база иконок для любых целей.

Font Reach

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

Pttrns

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

Mobile Patterns

Сервис поможет найти свежие идеи дизайнерам, зашедшим в тупик. Здесь множество решений для мобильных устройств: можно листать все подряд или выбрать категорию.

UX Myths

Освоившие английский смогут узнать о распространенных заблуждениях, связанных с проектированием пользовательских интерфейсов. Создатели не голословны: они старательно объясняют каждый миф и показывают на примерах, «что такое хорошо и что такое плохо».

Good UI

Для тех, кому не хватает теории, создатели сайта собрали множество идей и советов. Их уже проверили на пользователях, так что можно брать на вооружение.

Создание минималистичных макетов для мобильных устройств и веб-приложений

Дата публикации: 2015-08-04

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

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

Эта цитата принадлежит Эрнсту Шумахеру, мыслителю, влияющему на умы, экономисту и автору труда «Малое – прекрасно: экономика, в которой люди имеют значение». В рейтинге The Times эта книга входит в 100 самых влиятельных книг, выпущенных после Второй Мировой Войны.

Эрнст Шумахер в основном говорил о финансовых системах, однако эта цитата получила широкий резонанс среди большого круга дизайнеров и дизайнеров интерфейсов в частности. Очень часто простейший дизайн – состоящий из пары элементов – может резко повысить ваше благосостояние. Конечно, мы говорим о минимализме.

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

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Использование Wireframe’ов

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

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

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

Для сети

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

Для мобильных устройств

Для того чтобы лучше планировать используйте онлайн wireframe инструментарий. Такие инструменты позволяют избегать коллизий с макетами в том случае, если вы планируете интерфейсы под каждое конкретное мобильное устройство, а не работаете с «бумаги на цифру» только для того, чтобы выяснить, что ваш минималистичный дизайн далеко не таков.

Ни для сети, ни для мобильных устройств

Никогда не приступайте к этапу создание wireframe’а без конкретного списка того контента, который будет в финальном дизайне. А также не забывайте экспериментировать с несколькими макетами.

Улучшайте и Упрощайте (или упрощайте пока не сломается)

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

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

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

Для сети

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

Для мобильных устройств

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

Ни для сети, ни для мобильных устройств

Не доводите страсть к удалению элементов до того, что у вас на сайте уже не осталось притягивающих взгляд элементов. При упрощении всегда должен оставаться элемент «посмотри на меня». В таком случае вы будете проектировать дизайн ВОКРУГ элемента-фокуса, а не пытаться его создать.

Опциональные ограничения

В наше время мы настолько привыкли к множеству опций «на кончиках пальцев», что это может прозвучать странно, если я скажу «если не получается что-то сделать, ограничьте доступ к этому». Прибегать к такому подходу при создании минималистичного дизайна так же умно, как использовать wireframe на стадии планирования.

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

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Обратите внимание, когда я говорю про опциональные ограничения, я имею в виду в основном меню навигации и другие похожие кнопки, которые часто можно встретить на лендинг страницах.

Для сети

Старайтесь ограничиться 3-4-мя пунктами меню. Такой подход не собьет пользователя и облегчит работу с макетом на будущее.

Для мобильных устройств

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

Ни для сети, ни для мобильных устройств

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

Элементы Умного Дизайна

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

Использование flat-дизайна, несмотря на то, что он выдохся, может показаться хорошей идеей. Flat-дизайн сам по себе является минималистичным. В таком дизайне убрано все лишнее, и если дизайн спроектирован хорошо, он выглядит просто и стильно. Большие шрифты в сочетании с плоской графикой могут вдохнуть жизнь в ваш примитивный макет. Чтобы создать привлекательный глазу дизайн необходимо хорошо подобрать размер вашего шрифта и расположить надписи в правильных местах.

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

Для сети

При работе с контентом в минималистичном дизайне используйте множество размеров крупного шрифта. Такой подход поможет сбалансировать любую другую графику.

Для мобильных устройств

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

Ни для сети, ни для мобильных устройств

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

Шаблоны и цвета

Вместе с ограничением количества опций на вашем сайте, вам необходимо продумать ограниченное количество цветов. Это не означает, что вы должны придерживаться нейтральной цветовой палитры. Однако, придерживаясь трех основных цветов, вы поможете подчеркнуть детали вашего дизайна, которые могли бы быть «прямо здесь».

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

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

Для сети

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

Для мобильных устройств

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

Ни для сети, ни для мобильных устройств

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

Заключение

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

Автор: Gabrielle Gosha

Редакция: Команда webformyself.

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma!

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих