Немного про UX в метро
В минском метро решили повесить инфотабло. Огонь.
В минском метро решили повесить инфотабло. Огонь.
Немного про слово "тень"Тень выражается зрительно уловимым силуэтом, возникающим на произвольной поверхности благодаря присутствию объекта между ней и источником света.
Тенями называют косметическое средство для подкрашивания век. Но я не об этом. Часто ко мне обращаются за советом, "как правильно показать тень в дизайне" , решил кратко рассказать как я работаю с тенями. Возможно кто-то работает с тенями по другому, я опишу свой опыт.
Все чаще стал замечать как дизайнеры стали играться с тенями, они то синие то красные, то фиолетовые.
Тени которые мне встречались
Разделы сайта, контент перекрыл, но думаю ребята которые сделали эти карточки с тенями на меня не обидятся, надеюсь вы это прочтете и это будет для вас полезно.
Тень в дизайне это не часть дизайна по сути, а это реальность и эту реальность надо передавать и в дизайне правильно. Есть источник света, у света есть точка Б, там где свет соприкасается с предметом и соответственно от этого предмета падает тень. Предмет может находиться от поверхности на расстоянии, то есть навесу, либо стоять плотно на поверхности. Так же это влияет на количество предметов и их расположении, фигур много а источник света один. Бывают моменты когда и источников света несколько. Это тоже важный момент который надо знать. Предмет на которую падает свет и от которого падает тень может быть разного материала (камень, стекло, пластик и тд).
Один источник свет под углом и одна фигура.
Один источник света и несколько фигур.
Два источника света и одна фигура.
Согласен это не просто понять, тут надо чувствовать. Как же все таки добиваться по максимум правильных теней не зная всего этого. Во первых это все изучить, во вторых практиковаться.
Когда то я тоже начинал рисовать и учиться и очень большой акцент ставил на обучения работ с тенями.
Вследующем посте я напишу как я начинал и с чего все начиналось, напишу о том что я начинал рисовать иконки для приложений, а в то время иконки приложений были популярной темой и без теней и всех переливающихся бликов не обходились.
Иконка от студии UI8
Всегда восхищался работами этой студии и брал пример. Даже была мечта устроиться и работать в такой студии ну и конечно самому организовать такую студию.
Всегда восхищался работами этой студии и брал пример. Даже была мечта устроиться и работать в такой студии ну и конечно самому организовать такую студию.
Одна из первых иконок, на тот момент она казалась для меня идеальной, но сейчас понимаю на сколько у меня было мало практики.
Так как же все таки сделать более правильную тень в дизайне. Побробую показать на примере кнопки. Все делается в Sketch.
Создаем артборд размером 800x600 заливаем цветом #FFFFFFСоздаем фигуру в форме кнопки и заливаем цветом #4A90E2У меня получилось так
И так применим к ней тень, источник света у нас будет сверху под углом
Вы спросите а что тут изменилось, практически ничего, кроме того как кнопка визуально оторвалась от поверхности. Так же этой кнопке можно придать более приятный вид, сделав ее в объеме.
Практически без изменений, но кнопка обрела выпуклость, дав ей градиентную заливку.
Завершим с кнопкой
Так же тень бывает плоской без всяких блюров, как на примере ниже, но тут все просто, создаем слой тени, двигаем по X на 10 пикселей и по Y на 10 пикселей, блюр 0%, заливаем черным цветом и даем прозрачность 20%, тень готова.
Маленький секрет как я обычно делаю тень. Создаю фигуру, применю к ней тень, двигаю по Y допустим на 3 пикселя, то размытие у меня 6%, если я двигаю тень по Y на 5 пикселей то блюр у меня 10 пикселей, думаю вы поняли что блюр у меня в два раза больше чем сдвиг по Y, а вот с прозрачностью тень и цветом тут дело вкуса и чувства восприятия, тут надо больше практики ну и не надо бояться подглядывать на работы других дизайнеров.
В следующих статьях я могу более наглядно показать как работать с тенями и не только примеры на кнопках, но и в других элементах интерфейса. Если вам интересно или есть вопросы то пишите мне лично, отвечу на любые вопросы касающиеся дизайна, я не эксперт но все что знаю и умею могу поделиться.
Подписывайтесь на наш канал: Канал о дизайне - "Дизайн в хлам".
Тут два дизайнера постят подборки ресурсов, которые они действительно используют в работе ежедневно. А также разбор сайтов, английский язык для общения с заказчиками, конкурсы и подкасты. Бесконечное нон-фикшн вдохновение в Телеграм!
В этом видео сделал поверхностный обзор инструментов программы figma. В следующих расскажу про каждый более подробно. Цель видео: показать, что программа довольно простая и подвластная каждому)
Первые UI работы в Sketch. Регистрационная форма для приложения и экран входа в фитнесс приложение. оцените, посоветуйте что исправить. Хорошо/плохо?
Всем привет:)
Я запустил небольшой личный челлендж. Каждый день я рисую 1 экран вымышленного мобильного приложения. Исходник каждого экрана можно скачать в формате Sketch, если экран с анимацией – исходник Principle тоже можно скачать.
Цель:
1) Собрать длинную страницу из дизайна iOs приложений разных тематик;
2) Практика в Sketch и Principle;
3) Разминка и небольшой отдых от основных проектов;
4) Тренировка скорости разработки, на прорисовку экрана я планирую тратить не более 40 минут времени;
Заканчивается первая неделя эксперимента и я хочу поделиться с вами результатом, а вы дайте обратную связь в комментариях и идеи для новых экранов:)
#1. Экран поиска посуточного жилья
04.02.2018
#2. Экран ожидания такси
05.02.2018
#3. Магазин наручных часов
06.02.2018
К этому экрану я заснял небольшое видео с анимацией интерфейса:
#4. Список задач на сегодня
07.02.2018
#5. Оформление заказа в интернет-магазине
08.02.2018
#6. Личный портфель криптовалют
09.02.2018
К этому экрану тоже есть видео:
Ребят, у меня уже заканчиваются идеи для экранов, осталось идей на полторы недели.
Есть идеи для приложения? напишите в комментариях, я буду отрисовывать интересные идеи.
Спасибо за внимание, если будет интересно, могу выкладывать каждую неделю пост с экранами:)
Фотошоп — всё
Фотошоп изначально был заточен под работу с фотографией, в целом — растровой графикой, но не для работы с веб-интерфейсами: он имеет множество бесполезных функций, а необходимых, ускоряющих работу, удобных — не имеет. Да, несколько лет назад он был полноправным монополистом, а неловкие попытки поиска альтернатив (Иллюcтратор, Индизайн) не получали продолжения.
Сейчас ситуация кардинально изменилась и инструменты, заточенные под дизайн веб-интерфейсов, растут, как грибы после дождя.
1. Sketch
По моим субъективным ощущениям Скетч лидирует на профессиональном рынке. Если вы отправитесь на собеседование в значительную компанию, почти наверняка вас спросят, умеете ли вы в Скетч? Правда, для работы он использует встроенные функции iOS: на версию под Win уже никто особо не рассчитывает.
Скетч активно разрабатывается: из практических преимуществ, которые существуют на данный момент, можно выделить очень удобную работу с символами. Это что-то вроде смарт-объектов в фотошопе, но значительно функциональнее. Например, вы можете изменить контент внутри символа, не меняя сам символ. Предположим, у вас есть карточка товара. Чтобы создать бесконечное разнообразие карточек с разными товарами — вам хватит одного (!) символа.
Это небольшой и конкретный пример его превосходства над Figma и XD, о которых речь пойдет дальше. Если говорить о Фотошопе — Скетч превосходит его буквально во всём, что касается интерфейсов.
2. Figma
На данный момент самая удачная альтернатива Скетчу для win-юзеров. По сути, этот выбор за вас делает платформа.
Фигма тоже активно разрабатывается. Есть все надежды на то, что она ни в чём не будет уступать Скетчу, но уже сейчас у неё есть свои особенные фишечки, например, коллективная работа над документом — механика похожа на коллективную работу в GoogleDocs.
Можно брать.
3. Experience Design
Не то, что мне было что сказать о нём, но как дань былому величию Adobe; и XD, как надежде на хотя бы частичное его возвращение, думаю, стоит его упомянуть. Кто работает в XD, можете дополнить меня в комментариях.
На данный момент он очень сырой, но выглядит, тем не менее, перспективно. И, может быть субъективно, но в плане взаимодействия — приятнее Фигмы (потому что больше похож на Скетч).
Всё это здорово, но...
Всё это здорово, но если вернуться от теории к правде жизни, наверняка возникнут некоторые проблемы. Например,
Как быть с обработкой растровых изображений (ретушь, коррекция, сменить-фон-убрать-прыщи)?
Никак. Всему свои инструменты: для разработки интерфейсов — Sketch, Figma etc; для работы с растровыми изображениями — Фотошоп. Никого не смущает, что мы не обрабатываем фотографии с помощью HTML/CSS, к примеру, так почему должно смущать, что мы не делаем это с помощью Скетча?
Что делать, если заказчик панически боится любых исходников, не заканчивающихся на .psd?
Внедрение Sketch или Figma повышает качество и скорость работы, как со стороны дизайна, так и со стороны разработки.
Для работы с исходником не требуется установки, покупки, пиратства дополнительного софта. Файл .sketch выгружаем в Zeplin (бесплатный, есть веб-версия, есть аналоги); .fgm никуда не выгружаем — Figma сама по себе бесплатная и имеет веб-версию.
Может быть, не все люди пойдут на встречу, но это не повод обрекать себя на фотошоп-болото и отказываться от развития.
Разработчик отправит меня на х#й Как быть, если панически боится разработчик?
Прежде всего, это какой-то неправильный разработчик. В нашей сфере, если ты не развиваешься, то очень быстро оказываешься на обочине. По возможности избегайте этого.
Маловероятно, что такой вопрос в принципе возникнет. Как правило, преимущества Zeplin/Figma над psd-исходником, им (разработчикам) даже очевиднее, чем нам (дизайнерам) — достаточно минимальной демонстрации.
Спасибо!
Для всех поклонников футбола Hisense подготовил крутой конкурс в соцсетях. Попытайте удачу, чтобы получить классный мерч и технику от глобального партнера чемпионата.
А если не любите полагаться на случай и сразу отправляетесь за техникой Hisense, не прячьте далеко чек. Загрузите на сайт и получите подписку на Wink на 3 месяца в подарок.
Реклама ООО «Горенье БТ», ИНН: 7704722037
Про UX-design из недавней истории про ошибочно врученный Оскар для Ла-Ла-Лэнд. Слева - как было, а справа - как надо :)