Обложка канала

Дизайнер учит код. Страница 3

807 @semeonboboshko
Открыть

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

  • Дизайнер учит код

    Воу! Свершилось!

    Мы с подписчиками наконец-то самоорганизовались и пробуем запустить бесплатный курс «Дизайнеры и код» в ходе которого планируем изучить связку инструментов HTML + CSS + JS.

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

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

  • Дизайнер учит код

    Привет!

    Сейчас у меня временно нет возможности писать с той же регулярность, как раньше. Чтобы пока не скучать в томительном ожидании новых постов и дальше узнавать что-то новое, я приглашаю всех желающих в чат «Дизайнеры и код»: t.me/designerscode.

    Также у меня есть Facebook и Twitter, куда я пишу время от времени.

  • Дизайнер учит код

    На минувших выходных дал небольшое (шучу, большое) интервью Дмитрию Склярову.

    Наконец-то у меня появилась возможность высказаться. Получилось аж 40 минут! В интервью я немного рассказал про дизайн в регионах и дизайн в целом. Есть интересные подробности про Mentorforces.com.

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

    Ну и если захотите, чтобы я рассказал про дизайн или свои проекты — зовите!

  • Реклама

  • Дизайнер учит код

    Гость — Семеон Бобошко (дизайнер, стартапер)

    Автор http://sklyarov.studio/ Консультации по дизайну https://mentorforces.com/ 00:25 — Семеон о себе 01:00 — о продуктовых дизайнерах 02:00 — о зарплатах 02...

    YouTube

  • Дизайнер учит код

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

    Зачем
    Не так давно, у меня появилась гипотеза о том, что в России может быть востребовано профессиональное наставничество. Я решил проверить свои догадки и нашёл себе соратников. Буквально за месяц нам удалось собрать MVP. На данный момент наша основная цель — скорее проверки гипотезы, чем заработок.

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

    Формат
    Нам удалось определить формат консультации, который будет удобен всем. За 500 ₽ вы получите 30 минут живого общения с выбранным вами ментором.

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

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

    Менторы
    На старте нам удалось привлечь 9 менторов. Среди них: Дмитрий Жуков (основатель Turbomilk), Дмитрий Чута (Chapps), Алексей Кожевников (бывший дизайнер Redmadrobot), Александр Мартынов (бывший дизайнер Travelata.ru), Артур Касимов (Senior Product Designer Mail.ru) и другие. С полными списком можно ознакомиться тут: mentorforces.com/mentors.

    А если считаете, что сами можете стать ментором, то вам сюда: mentorforces.com/join.

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

    Мы также знаем, что у нас не идеальный UX оплаты на данный момент. Это связано с определённым техническими ограничениями, которые мы обязательно минуем, если увидим перспективы развития сервиса.

    В любом случае, мы будем рады обратной связи и сотрудничеству. Можете писать мне лично (@boboshko) или моему боту (@BoboshkoRobot).

  • Дизайнер учит код

  • Дизайнер учит код

    На этом пока всё. Весь прототип занимает 52 строки. Возможно, кажется, что его реализовать было просто, но это не совсем так. Я потратил на это несколько дней. Скорее всего, времени ушло бы больше, если бы в некоторых моментах мне не помогли ребята из Learn Framer. Но сложно будет не всегда, а только в начале. 😆

    Также вы можете присылать мне свои идеи для прототипов и задавать вопросы. Можно это сделать напрямую (@boboshko) или через моего бота (@BoboshkoRobot).

  • Дизайнер учит код

    Блоки в цикле. Часть 2

    Это цикл for...in. Отдельные его куски я разберу чуть ниже, чтобы сейчас не потерялась разметка.

    for i in [0..4]
    buttons[i] = new Layer
    width: 256
    height: 64
    x: Align.center
    y: 100 + i * 100
    borderRadius: 3
    backgroundColor: white
    animationOptions:
    curve: curveSpring

    title = new TextLayer
    text: Utils.randomChoice(words)
    parent: buttons[i]
    fontFamily: "17px Roboto"
    color: black
    textAlign: "center"

    title.center()

    buttons[i].states.a =
    scale: 1.2
    shadowY: 5
    shadowColor: blackShadow
    shadowBlur: 10

    buttons[i].states.b =
    scale: 1
    shadowY: 0
    shadowColor: blackShadow
    shadowBlur: 0

    buttons[i].onMouseOver (event, layer) ->
    layer.states.next("a")

    buttons[i].onMouseOut (event, layer) ->
    layer.states.next("b")

    Объявление цикла и указание количества итераций:

    for i in [0..4]

    Я уже как-то писал, что отсчёт начинается с 0, а не с 1.

    Затем, создаётся основной слой — buttons:

    buttons[i] = new Layer
    width: 256
    height: 64
    x: Align.center
    y: 100 + i * 100
    borderRadius: 3
    backgroundColor: white
    animationOptions:
    curve: curveSpring

    Из интересного тут два момента. Во-первых, buttons[i] = new Layer — теперь это новая переменная с блоками из массива. Более того, не нужно даже писать что-нибудь вроде buttons.push block, чтобы блоки отправились в массив. Всё делается автоматически.

    Во-вторых, y: 100 + i * 100 — делает отступ от каждого последующего блока в 100px.

    Настройки текстового слоя:

    title = new TextLayer
    text: Utils.randomChoice(words)
    parent: buttons[i]
    fontFamily: "17px Roboto"
    color: black
    textAlign: "center"

    title.center()

    parent: buttons[i] — здесь назначается родительский объект. Это нужно для того, чтобы текст всегда был внутри блока и дублировался вместе с итерациями цикла.

    text: Utils.randomChoice(words) — случайным образом извлекает индекс из массива. Таким образом, на каждом блоке будет разный текст. Если перезагружать страницу с прототипом, то можно заметить, как меняется текст на одном и том же блоке.

    Это states:

    buttons[i].states.a =
    scale: 1.2
    shadowY: 5
    shadowColor: blackShadow
    shadowBlur: 10

    buttons[i].states.b =
    scale: 1
    shadowY: 0
    shadowColor: blackShadow
    shadowBlur: 0

    Они нужны для того, чтобы хранить в себе параметры анимации. У меня их два: states.a — отвечает за hover на блок. states.b — отвечает за то, когда курсор убрали с блока.

    А это обработчики событий:

    buttons[i].onMouseOver (event, layer) ->
    layer.states.next("a")

    buttons[i].onMouseOut (event, layer) ->
    layer.states.next("b")

    onMouseOver — обрабатывает hover, а onMouseOut — обрабатывает событие, когда курсор убрали с блока.

    #Framer

  • Дизайнер учит код

    Началось!

    Я наконец-то добрался до CoffeeScript и Framer. В общем-то, это то, ради чего создавался канал.

    Не смотря на то, что в начале этого года я проходил пилотный курс Антона Карташова по Framer, мне пришлось вспоминать очень много всего. Да и одним курсом все нужные знания не получить. И чтобы с чего-то начать, я попросил ребят из Learn Framer подкинуть мне простенькую задачку. Хочу сказать им спасибо за задачу и помощь с кодом.

    Задача звучала примерно так: необходимо нарисовать блок размером 256 х 64 с текстом внутри. Блок должен быть в виде класса и вызываться с помощью menu_link = New Link. При наведении на блок должен срабатывать hover. Также блок должен повторяться в цикле 5 раз и в каждом отдельном блоке должен быть разный текст.

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

    Перед тем как рассказать про код, можно посмотреть получившийся прототип: https://framer.cloud/mmYdl

    Важно помнить, что все прототипы Framer корректно работают только в WebKit-браузерах.

  • Дизайнер учит код

    Блоки в цикле. Часть 1

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

    Utils.insertCSS("@import 'https://fonts.googleapis.com/css?family=Roboto:300,400,700';")

    Цифры в конце ссылки — это подключаемые начертания: Light, Regular и Bold. Я решил подключить на всякий случай всё.

    Эти переменные хранят в себе HEX-код цветов:

    yellow = new Color("fac112")
    white = new Color("FFFFFF")
    black = new Color("000000")
    blackShadow = new Color("rgba(0,0,0,0.1)")

    Переменная blackShadow дополнительно хранит в себе свойства альфа-канала (прозрачности). Я решил записать цвета в переменны по нескольким причинам.

    Во-первых, так будет проще использовать нужные цвета.

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

    Параметры анимации, записанные в переменную:

    curveSpring = "spring(300,20,50)"

    От этих параметров зависит то, как будет себя вести объект во время анимации, которому присвоена эта переменная.

    Тут я говорю, что цвет фона — жёлтый:

    bg = new BackgroundLayer
    backgroundColor: yellow

    Тут у меня два массива (шутка про два стула):

    buttons = []
    words = ["Index 0", "Index 1", "Index 2", "Index 3", "Index 4"]

    Массив buttons — пустой и нужен для того, чтобы хранить блоки из цикла. А вот массив words сразу же содержит в себе текст, который будет выводиться внутри блоков.

    #Framer

  • Дизайнер учит код

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

    А пока у меня к вам вопрос: стоит ли организовать Telegram-чат по Framer и JavaScript для обмена знаниями? Вам он нужен?

  • Дизайнер учит код

  • Дизайнер учит код

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

    Краткие итоги
    На данный момент опрос прошло 84 человека. В основном — это дизайнеры. 65,1% из опрошенных не используют Framer в работе. При этом, 42,2% считают, что Framer полезен в работе. Главный инструмент для прототипирования у дизайнеров на данный момент — InVision.

    Видимо, ребятам хотелось бы использовать Framer в работе, но они не могут. Как мне кажется, тут есть два важных момента: высокий порог входа в инструмент (надо изучать CoffeeScript) и низкая скорость прототипирования (нужно хорошо знать инструмент, чтобы быстро что-то собрать). Неудивительно, что лидирует InVision. Хотя, как по мне, Framer и InVision — очень разные инструменты, которые решают разные задачи.

    С полными результатами можете ознакомиться по ссылке ниже.

    Использование результатов
    Результаты можете использовать как угодно. Главное — ссылка на первоисточник (http://t.me/semeonboboshko). А если вы вдруг пропустили опрос, то можете пройти его прямо сейчас (6 вопросов, 2 минуты на прохождение).

    Результаты опроса: https://goo.gl/WHnKTL
    Опрос: https://goo.gl/forms/7tLFYJffup8AUT3G3

  • Дизайнер учит код

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

    В опросе 6 простых вопросов и он не займёт больше 2-х минут. Не поленитесь и скиньте ссылку своему другу дизайнеру или арт-директору. Результаты будут опубликованы у меня на канале через неделю.

    Опрос: https://goo.gl/forms/7tLFYJffup8AUT3G3

  • Дизайнер учит код

    Команда Framer выпустила Fiber — UI Kit для Framer. Примечателен он тем, что весь набор экранов уже запрограммирован, и конечно же, всё можно менять! Советую ознакомиться хотя бы с кодом.

    #FramerNews

  • Реклама

  • Дизайнер учит код

    Предыдущий пост — не реклама. Это официальная скидка от разработчиков, информаицю о которой можно найти на сайте Framer.

  • Дизайнер учит код

    Скидка на Framer от разработчиков до 10-го августа! При покупке годовой подписки, ещё 4 месяца дают бесплатно.

    Используйте промо-код FIBER4MONTHSFREE или перейдите по этой ссылке: https://framer.com/pricing/pdl/y/?c=FIBER4MONTHSFREE

    #FramerDiscount

  • Дизайнер учит код

    Не могу пройти мимо поста Сергея Сурганова насчёт Framer и его бесполезности. Давайте разберёмся.

    Во-первых, прототип получился действительно большой. И не совсем понятна конечная цель его создания. Скорее всего автор хотел потренироваться. Чаще всего, прототипы во Framer получаются разы меньше и собираются быстрее того, что критикует Сергей.

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

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

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

    Повседневные задачи лучше решать в Principle или даже в InVision. А если нужно что-то более-менее серьёзное и интерактивное — это во Framer.

    В-третьих, Сергей прав насчёт кода. Он отправится в мусорку.

    Вывод простой: подбирайте подходящий инструмент под конкретную задачу.