Ответы пользователя по тегу Дизайн
  • Чем отличаются Прототип Мокап и Вайрфрейм?

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

    Какого чёрта мокапами и прототипами стали называть эскизы я хз, началось это лет 8 назад. Если тебе понадобится найти красивенький айфон, в который на место экрана ты вставишь интерфейс своего приложения, то ты будешь искать по запросу "iphone mockup".
    Если обратишься к википедии по запросу "прототип", то увидишь определение:
    Прототип (инженерия) — работающая модель, опытный образец устройства или детали в дизайне, конструировании, моделировании.

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

    И только пресловутый вайрфрейм является тем самым эскизом интерфейса, который многие ошибочно называют прототипом или мокапом.
    Ответ написан
    1 комментарий
  • Как сделать обводку в figma только с одной стороны?

    tilion
    @tilion
    Веб-дизайнер
    Используйте Inner Shadow с параметром Blur равным нулю.
    Ответ написан
    Комментировать
  • Как правильно формулировать запрос ПС?

    tilion
    @tilion
    Веб-дизайнер
    Это макет дизайна, встроенный в мокап айфона.
    Да, мокапы обычно без дизайна, потому что существуют, чтобы в них встраивали макеты.
    Ответ написан
  • Должен ли UI специалист создавать необходимую айдентику для сайта/приложения?

    tilion
    @tilion
    Веб-дизайнер
    UI дизайнер занимается UI, а айдентикой - бренд-дизайнер, дизайнер айдентики, дизайнер фирменного стиля, по-разному называют таких ребят. Как педиатр не будет хорошим анестезиологом, так и дизайнер интерфейсов не будет хорошим дизайнером айдентики. Может кое-что сделать, но на низком уровне. Если говорить "должен" ли, то нет, не должен.
    Ответ написан
    Комментировать
  • Как правильно выравнивать шрифт по макету(пример внутри)?

    tilion
    @tilion
    Веб-дизайнер
    Это неряшливость дизайнера или закравшаяся случайно неточность. Достаточно округлить. По умолчанию та же Фигма ставит текстовые объекты по пиксельной сетке, включая базовую линию.
    Ответ написан
    Комментировать
  • UX в продуктах. Как хранить и обеспечивать доступ к результатам исследований и инсайтам?

    tilion
    @tilion
    Веб-дизайнер
    Рекомендую присмотреться к Notion. Поиск есть, удобно ссылаться на документы в других документах, неплохое форматирование контента в заметках. И, в отличии от эверноута, отличная система вложенности заметок.

    Вообще, для начала вам стоит понять как бы вы хотели, чтобы выглядело хранение и под это видение искать сервис.
    Ответ написан
    Комментировать
  • Где можно нарисовать схему сайта?

    tilion
    @tilion
    Веб-дизайнер
    Если под схемой сайта подразумевается карта сайта, то попробуйте Octopus.do.
    Ответ написан
    Комментировать
  • Какая программа подойдёт для отрисовки логической структуры сайта?

    tilion
    @tilion
    Веб-дизайнер
    Я пользуюсь бесплатным сервисом draw.io.
    Многим нравится рисовать в сервисах для майнд-карт типа mindmeister.com/ru.
    Если нужен десктопный клиент (зачем?), то XMind.
    Ответ написан
    Комментировать
  • Компьютер для веб дизайна?

    tilion
    @tilion
    Веб-дизайнер
    В свой время собирал комп для 2д-дизайна, вышло так: i7-6700, 16gb ddr4, ssd. Встроенной видюхи интела не хватает на отрисовку страниц в хроме с анимацией (особенно когда смотришь проекты на ьехансе, где много видеороликов и тяжёлых гифок, там прокрутка была меньше чем с 1 фпс) и рендер анимации в фотошопе (фризы при перетаскивании артбордов и иногда зуме). Замедленная анимация была даже в интерфейсе Скетча после перехода на хакинтош. Как дела у райзена не знаю, но слушать теоретиков встроенной видеокарты стоит как минимум с большим скепсисом, а лучше сразу взять недорогую видеокарту.

    Ничто не даст такой прирост производительности как ссд, без него любая конфигурация нежизнеспособна. При наличии ссд, на котором стоят граф. редакторы, можно обходиться и с 8гб памяти если не планируете работать хотя бы с полутора десятками артбордов, нагруженных растровой графикой.
    Ответ написан
    Комментировать
  • На какие ресурсы можно скидывать свои работы для критики?

    tilion
    @tilion
    Веб-дизайнер
    Не знаю как сейчас, но раньше можно было услышать дельную критику на ревижене.
    Ответ написан
    Комментировать
  • Как преодолеть тупик в работе над проектом?

    tilion
    @tilion
    Веб-дизайнер
    Найдите один наименее безразличный элемент или блок (самый привлекательный или самый бесячий) и сделайте его максимально хорошо. Если получится, то может появиться эмоциональный подъём от того, что вы сделали что-то стоящее или немного выросли в навыках, захочется бросить вызов другим частям дизайна.
    Ответ написан
    Комментировать
  • Как создаются современные прототипы сайтов?

    tilion
    @tilion
    Веб-дизайнер
    По началу в нашей компании эскизы рисовали кто в чём горазд, было так себе. Потом купили AxureRP, стало получше. Практически отпало желание рисовать эскизы и прототипы красивыми, теряя на это время, плюс, появилась возможность показать динамику - всплывающие окна, сложные формы (комплексы инпутов) и прочее. Но, по непонятным причинам, она не прижилась. Возможно, из-за сложного интерфейса, который, по сравнению с любой другой программой для прототипирования, монструозен и кошмарен. Но это по прежнему самый сильный инструмент (после прототипирования кодом, но это уже не инструмент). Сейчас мы рисуем эскизы в скетче, потому что, передав такие эскизы дизайнеру, он сразу работает с некоей основой макета, а не перерисовывает эскизы из чужих jpg, это должно ускорить работу, но пока не ясно так ли это. Оживляем прототип в Invision, но это сомнительный способ когда надо показать динамику (да даже работа с появляющимися в нужном месте объектах кривая), ждём InVision Studio.

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

    В скетче система отступов регулируется плагином Anima AutoLayout.
    Размеры шрифтов - встроенным функционалом скетча, очень удобным.
    Любой модуль может быть символом, то есть, повторяющимся на разных страницах. Причём, текстовую информацию внутри символа (если есть текстовые слои) можно менять, не меняя символ в целом.

    Если у вас винда, то стоит присмотреться к Adobe XD или веб-версии Figma.

    Многие рисуют прототипы (именно прототипы - функциональные эскизы, то есть, эскизы, в которых демонстрируется функционал интерфейса, а не просто статичные jpg или html) сразу в анимации, показывая разные сценарии использования интерфейса, где прокликивается каждый ключевой элемент.
    Ответ написан
    1 комментарий
  • Как сделать градиент в photoshop дугами?

    tilion
    @tilion
    Веб-дизайнер
    Конкретно в этом примере, как мне кажется, используется не один градиент, а прозрачные круги с Inner Glow (в фотошопе Layer » Layer style » Inner Glow), затухающие по мере увеличения (Opacity примерно с 40 в начале до 0 в конце).
    Ответ написан
    Комментировать
  • Как рисовать дизайн для FullHd, есть ли модульная сетка для FullHd?

    tilion
    @tilion
    Веб-дизайнер
    Простейшее решение: берёте стандартную сетку и растягиваете до 1920. Например, пусть стандартная сетка будет в 1200рх (столбец 60рх, отступ 40рх, отступ по краям экрана 20рх). Сохраняя отступы у нас получится столбец в 120рх: joxi.ru/vAWeZwauka9dem
    Ответ написан
    1 комментарий
  • Юзабельный ли сервис?

    tilion
    @tilion
    Веб-дизайнер
    Первое, что заметил.

    - Главное должно быть главным. Блок с поиском выглядит второстепенным по сравнению с блоками с фотографиями, теряется. Посмотрите как сделано на https://www.airbnb.ru/
    - При вводе города в поиск нет подсказки ввода, поэтому сразу не ясно есть ли мой город на сайте.
    - Если в строке поиска переключаться между полями ввода клавишей TAB, то подсказки не уезжают вниз как если бы я кликнул в поле.
    - При загрузке страниц в качестве loader'а показывается лого сервиса - странно, не ясно, что оно там делает.
    - Если забыл пароль и хочешь восстановить, то вместо сайта показывается только блок восстановления на белом фоне - куда всё пропадает?
    - С экранов регистрации/авторизации невозможно вернуться на главную или любую другую страницу - вся навигация пропадает.
    Ответ написан
    Комментировать
  • Как обработать фото и сделать правильное затемнение джамботрона?

    tilion
    @tilion
    Веб-дизайнер
    Лучший вариант - не искажать фото, поэтому стараюсь выбирать такое, в котором есть пустое светлое/тёмное пространство, в которое могу поместить текст.
    Ответ написан
    Комментировать
  • В чем можно сделать анимацию прототипа сайта?

    tilion
    @tilion
    Веб-дизайнер
    Если вы на винде и нужно показать только скролл, то можно сделать два jpg: сайдбар и макет, залезть в простой онлайн wysiwyg конструктор прототипов и запилить в нём.

    P. S. "Кинетический прототип" - классно звучит).
    Ответ написан
    Комментировать
  • Где найти такой эффект?

    tilion
    @tilion
    Веб-дизайнер
    Берёшь, фотку, создаёшь маску. Дальше либо заливаешь маску чёрным и акварельными кистями белого цвета рисуешь по маске, либо оставляешь маску белой и акварельными кистями чёрного цвета убираешь куски фотки.
    Ответ написан
    Комментировать
  • Портфолио, видео preview макета сайта, как он работает...?

    tilion
    @tilion
    Веб-дизайнер
    Многие анимации реального интерфейса, которые демонстрируют дизайнеры на Behance, делаются в Principle principleformac.com В нём ты можешь писать скринкаст того как ты взаимодействуешь с собранным прототипом (в прототип суются картинки из готового макета), получается демка, сохраняешь, заливаешь на Vimeo, вставляешь в презентации на Behance.

    А что для винды есть — не знаю. Вообще нереально быть хорошим дизайнером на винде, как я понял. Здесь гетто дизайнерского софта, а на маке - Эльдорадо. И именно на маке (ИМХО) создаются тренды, в том числе за счёт большого количества офигенного современного дизайнерского ПО.
    Ответ написан
  • Порекомендуйте сайты с похожим дизайном?

    tilion
    @tilion
    Веб-дизайнер
    Ответ написан
    Комментировать