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

semeonboboshko Нравится 0
Это ваш канал? Подтвердите владение для дополнительных возможностей

Канал о том, как дизайнер интерфейсов осваивает код, чтобы научиться создавать интерактивные прототипы.
Автор: @boboshko.
Бот-резюме: @BoboshkoRobot.
https://vk.com/semeonboboshko
Язык канала
Русский

Категория
Блоги

Язык канала
Русский
Категория
Блоги
Добавлен в индекс
13.05.2017 00:01
Последнее обновление
19.04.2018 00:55
Telegram Analytics
Самые свежие новости сервиса TGStat. Подписаться →
@TGStat_Bot
Бот для получения статистики каналов не выходя из Telegram
Telegram Info
Последние новости о Telegram. Читать →
938
подписчиков
~0
охват 1 публикации
~59
дневной охват
N/A
постов в день
N/A
ERR %
1 + 0
репосты+упоминания
Последние публикации
Регистрация на курс закрыта. Внезапно для меня, 134 человека изъявило желание совместно изучать HTML + CCS + JS. Я ожидал, что людей будет в 10 раз меньше. В общем, сейчас нужен небольшой тайм-аут, чтобы прикинуть, как построить процесс для такого количества участников. Ожидается, что заниматься начнём на уже на этой неделе.

Если вы зарегистрировались, но ещё не вступили в чат — вступайте, пока есть время: https://t.me/designerscode. Люди, не состоящие в чате, заниматься не будут (вся координация именно там).
Воу! Свершилось!

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

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

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

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

Также у меня есть Facebook и Twitter, куда я пишу время от времени.
https://youtu.be/GviSXn_C-rs
На минувших выходных дал небольшое (шучу, большое) интервью Дмитрию Склярову.

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

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

Ну и если захотите, чтобы я рассказал про дизайн или свои проекты — зовите!
Сегодня я с товарищами по цеху запускаю новый проект — 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).
В общем, такие большие посты я теперь буду оформлять через Telegra.ph, чтобы было удобнее читать. Вот ссылка на этот: http://telegra.ph/Framer-bloki-v-cikle-08-28
Framer: блоки в цикле
Началось! Я наконец-то добрался до CoffeeScript и Framer. В общем-то, это то, ради чего создавался канал. Не смотря на то, что в начале этого года я проходил пилотный курс Антона Карташова по Framer, мне пришлось вспоминать очень много всего. Да и одним курсом все нужные знания не получить. И чтобы с чего-то начать, я попросил ребят из Learn Framer подкинуть мне простенькую задачку. Хочу сказать им спасибо за задачу и помощь с кодом. Задача звучала примерно так: необходимо нарисовать блок размером 256 х…
На этом пока всё. Весь прототип занимает 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
Вторая часть выйдет завтра, а то пост получился неприлично большим.

А пока у меня к вам вопрос: стоит ли организовать Telegram-чат по Framer и JavaScript для обмена знаниями? Вам он нужен?
👎 37
👍 21
Блоки в цикле. Часть 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
Началось!

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

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

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

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

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

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

Краткие итоги
На данный момент опрос прошло 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.