Эскиз макета это: Эскиз, прототип, макет

Что к чему в брендинге: ответы на вопросы клиента

Чем эскиз отличается от макета?

Скопировано

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

Пример 1. Упаковка

Пример 2. Иллюстрация

Чем брендбук отличается от гайдлайна?

Скопировано

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

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

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

Зачем нужен тестовый этап разработки носителей?

Скопировано

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

Зачем нужны шаблоны носителей?

Скопировано

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

Вы сделаете фирменный шрифт в рамках работы?

Скопировано

В среднем шрифтовой дизайнер разрабатывает шрифт от полугода. Такая работа стоит от $25,000-150,000в зависимости от известности исполнителя, количества начертаний и языковых версий шрифта. Почему так дорого? Попробуем посчитать.

Базовый набор одного начертания:

• Буквы русского и английского (строчные, прописные, капители) — от 200 знаков.
• Знаки препинания — от 15 знаков.
• Цифры — 10 знаков.
• Глифы — от 150-200 знаков.

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

Все перечисленное нужно сложить и умножить на три-четыре начертания (тонкое, регулярное, жирное, курсив). Без них эффектной типографики не получится. Итого от 1500 знаков. Именно столько элементов шрифта нужно разработать, чтобы получить работающую шрифтовую гарнитуру на русском и английском.

Учитывая сложность затеи, разработку собственного шрифта заказывают только небожители очень большие бренды (например, Beeline или Nokia).

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

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

Можно подобрать бесплатный шрифт и не покупать лицензию?

Скопировано

Можно, но мы не советуем. Достойных кириллических шрифтов с бесплатной лицензией мало, не больше десяти. Это системные шрифты, предустановленные в базовые компьютерные программы и сервисы: Word, Power Point, Google Docs, Google Sheets и другие. Такими шрифтами пользуются все и всюду.

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

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

Можно не платить за шрифт?

Скопировано

Нет, нельзя. Все шрифты — объекты интеллектуальной собственности и принадлежат шрифтовым студиям или независимым дизайнерам. Использование пиратской версии шрифта равносильно краже. Судебный иск от владельца шрифта грозит вашей компании финансовыми и репутационными рисками.

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

Зачем нужен товарный знак? Можно его не регистрировать?

Скопировано

Товарный знак — словесное, графическое, объемное, звуковое или комбинированное обозначение компании, зарегистрированное Федеральной службой по интеллектуальной собственности «Роспатент». Зарегистрировать можно: название, логотип, слоган, этикетку и т. д.

Например, компаниям стоит регистрировать логотип, если:

• Его разработка и раскрутка стоили дорого.
• Компания планирует долго его использовать.

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

• На вашем рынке появляется компания с таким же или похожим названием и использует вашу репутацию и бренд для продажи своих товаров. Если у вас есть патент, вы обращаетесь в суд, требуете отказ от названия и компенсацию за ущерб. И с большой вероятностью выигрываете.
• На смежном с вами рынке (по классам «Роспатента») появляется компания с таким же или похожим названием и для удобства продвижения подает в суд на вас, чтобы вынудить отказаться от названия. Если она получит патент, вы проиграете.
• На смежном с вами рынке появляется компания с похожим названием. Она с вами не пересекается и клиентов не отбирает, но умудряется заработать плохую репутацию. Теперь представьте выдачу поисковика по вашему общему названию — плохая репутация переносится на вас. Если у вас есть патент, вы обращаетесь в суд, требуете отказ от названия и компенсацию за ущерб. И с большой вероятностью выигрываете.

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

Почему важно делать эскизы, прежде чем переходить к прототипу / Хабр

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

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

Любую идею нужно перевести в пользовательский интерфейс

Проектирование интерфейсов — это процесс. Всё начинается с идеи, но эту идею еще нужно перевести в пользовательский интерфейс. Недостаточно просто сказать «Я хочу приложение, которое делает X, Y и Z». Вы должны знать, что пользователь увидит на каждом экране приложения, чтобы сделать X, Y и Z. Создание эскиза спустит вас с небес на землю и позволит наконец-таки задуматься о пресловутом user experience. Вы уже знаете ЧТО вы хотите от вашего приложения, но создание эскиза поможет вам выяснить КАК приложение будет вести пользователей к желаемому результату. Эскизирование позволит вам визуализировать поведение пользователя. Таким образом ваша идея перестанет быть просто плодом вашего воображения и станет чем-то более значимым и доступным.

Эскиз — это не прототип и не схема

Многие дизайнеры и проектировщики ошибочно предполагают, что эскиз (sketch) — это схема интерфейса (wireframe) или прототип (prototype). Хоть они и правда в чём-то схожи, но по большому счёту это «три большие разницы». Все они преследуют одну цель — иллюстрирование концепта интерфейса и его поведения. Но эскиз, схема и прототип создаются в разных средах и приводят к разным результатам.

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

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

Создавая прототип (prototype), вы должны полностью продумать поведение приложения. Ключевая особенность прототипа — его интерактивность. Т.е. он полностью повторяет поведение будущего приложения. Отличие от финального варианта заключается в упрощении графики и контента и, разумеется, в полном отсутствии бекэнда. Эту стадию используют далеко не все команды. Причины этому разные, начиная от ресурсоёмкости прототипирования и заканчивая спецификой продукта.

Эскиз всегда создаётся первым

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

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

Эскизы помогают проводить мозговые штурмы с командой/клиентом

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

Эскизы позволяют вам думать и работать быстрее

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

Эскизы делают схемы более детализированными и совершенными

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

Эскизы могут плохо выглядеть, но при этом прекрасно работать

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

Не стоит недооценивать эскизы

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

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

Эскиз · Дизайн, совместная работа, прототип и передача

Шаг

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

Веб-приложение, позволяющее всем остальным просматривать, оставлять отзывы, проверять и передавать управление в любом браузере.

Полноценная дизайнерская платформа, созданная инди-компанией, работающей в сфере устойчивого развития с 2010 года.

Узнать больше

Узнайте, что нового

Product Designer

Illustrator

UX Designer

Ик… 32

Ракета · от Прекеш

Аврора Обои · Тиаго

Эхлас. Веб-сайт · автор Халдун

Кнопка / Пар…48

Пингвин · Илья

Casio Watch Face 4 · от Yuhang

Приложение Ivory · от Tapbots

Значок / Кисть

Кредиты

Работа:
Прекеш,

Илья,

Тьяго,

Юхан,

Халдун,

Тапботы.

Антонио

Мануэль

Приложение для Mac, которое вам понравится создавать с помощью

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

Монтажная область 1

Все инструменты, которые помогут вам в создании — от ранних вайрфреймов до гибких систем дизайна

Мощное векторное редактирование

Контролируйте каждую точку, лежащую в основе ваших проектов.

Простое и интуитивно понятное создание прототипов

Превратите свои идеи во что-то, что каждый может проверить.

Общие библиотеки, стили и компоненты

Обеспечьте согласованность и масштабируемость своих проектов.

Управление цветовыми профилями

Выберите между sRGB или P3, когда захотите.

Поддержка шрифтов Variable и OpenType

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

Новый

Многоразовые шаблоны дизайна

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

Монтажная область 2

Рабочие процессы, которые адаптируются к вам — независимо от того, работаете ли вы в одиночку, начинаете с малого или расширяетесь

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

Работайте в одиночку или вместе с другими — решать вам.

Автономная и локальная поддержка файлов

Для создания не требуется подключение к Интернету.

Сохраняйте и синхронизируйте свою работу

Получайте доступ к документам в рабочей области, где бы вы ни вошли в Sketch.

Новый

Делитесь отзывами в приложении

Просматривайте комментарии и отвечайте на них, не переключая приложения.

Распространение Design Systems

Легко делитесь структурными элементами вашего продукта и бренда.

Мощная организация файлов

Упорядочивайте проекты и храните идеи в черновиках.

Новый

Откройте файлы .fig

Заходите, вода в порядке!

Монтажная область 3

Мощное родное приложение для Mac, которое вы можете сделать самостоятельно

Настраиваемые панели инструментов

Оптимизировано для Apple Silicon

Работа в окнах или вкладках

Перетаскивание между приложениями

Настраиваемые ярлыки

Сверхбыстрая производительность

Веб-приложение для совместного использования, обратной связи и передачи

Объедините людей и проекты — в любом веб-браузере — чтобы заменить обмен сообщениями, вложения электронной почты и бесконечные проверки.

Монтажная область 1

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

Храните, синхронизируйте и делитесь документами

Храните документы вместе, синхронизируйте и отслеживайте каждую веху.

Бесплатное добавление зрителей

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

Права доступа к документам и проектам

Получите полный контроль над тем, кто может просматривать и редактировать проекты.

Администратор Easy Workspace

Управляйте людьми, файлами и выставлением счетов — все в одном месте.

Новый

Делитесь отзывами в контексте

Пригласите соавторов добавлять комментарии прямо на холсте.

Новый

Распространение библиотек, компонентов и шаблонов

Предоставьте дизайнерам мгновенный доступ к общим ресурсам.

Тестируйте прототипы в любом браузере

Поделитесь своими идеями и покажите всем, как они будут работать.

Инструменты передачи разработчика

Проверяйте, захватывайте активы и создавайте цветные жетоны.

Нулевая кривая обучения

Нет необходимости изучать инструменты дизайна — использовать наше веб-приложение очень просто.

Просмотр, комментирование и передача бесплатно

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

Начните создавать сегодня бесплатно!

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

Начните бесплатно

Символ / Логотипы клиентов

Лучшая платформа для дизайна цифровых продуктов · Sketch

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

Начните бесплатно

Начните с шаблонов монтажной области

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

Установите планку с помощью символов

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

Синхронизация со стилями

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

Быстрое тестирование с помощью прототипов

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

Родной для macOS

Sketch чувствует себя как дома на Mac. Никаких компромиссов. Благодаря пользовательскому интерфейсу, который сразу же покажется вам знакомым, если вы использовали какое-либо родное приложение для macOS, вы сможете в полной мере воспользоваться такими преимуществами, как:

• Темный и светлый пользовательские интерфейсы
• Полная поддержка дисплеев Retina и других дисплеев
• Опора сенсорной панели
• Бесшовное перетаскивание из приложения в приложение
• Версии локальных документов
• Сверхвысокая производительность на кремнии Apple
• Работайте локально и в автономном режиме в любое время
• Встроенная проверка орфографии и поддержка RTL
• Настраиваемая панель инструментов и ярлыки
• Встроенная поддержка рендеринга шрифтов и эмодзи

Создавайте надежные библиотеки

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

Проектируйте вместе

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

Возьмите свои файлы куда угодно

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

Онлайн или офлайн

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

• Клауз

  Проверка цветового контраста для веб-доступности на основе WCAG 2.0. Легко вписываясь в рабочий процесс вашей команды, Cluse позволяет вам удаленно изменять свой дизайн и видеть обновленный результат WCAG в реальном времени.

  плагин Яны Геворгян

• Pexels

  Быстро и легко добавляйте потрясающие изображения от создателей со всего мира прямо в свои проекты Sketch.

  плагин от Pexels

• Диаграмма

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

  плагин Павла Кулигина

• Переполнение

  Синхронизируйте и преобразуйте свои монтажные области в экраны в Overflow и превращайте свои проекты в воспроизводимые пользовательские диаграммы.

  плагин от Proto.io

• Завод

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

  плагин от Plant

• Краудин

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

  плагин от Crowdin

• Дубликаты документов

  Дубликаты документов

• Переопределяет

  Переопределяет

Начните свое путешествие по

Sketch

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