Курсы по сосанию члена ⁠ ⁠

Пошел я, значит, на пикабушные курсы. Часть 4: добавим интерактива⁠ ⁠

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

Кнопка так и останется в жпеге, потому что черновик с нею я уже удалил и скачивать бесфоновую пнгшку мне неоткуда.

На прошлой неделе мы учились рисовать кнопочки и делать из них компоненты и варианты. Закрепили все это дело туалетными ершиками. Мы молодцы и должны были перейти к последним теоретическим модулям первой части.

Но я совсем забыл рассказать вам об интерактивных прототипах.

А для того, чтобы все это дело было интереснее, начну я все равно с теории. А именно - с модульных сеток. Сетка - это такой вспомогательный для построения композиции. Грубо говоря, это когда ты делишь рабочее поле на прямоугольники, по которым ориентируешься, что и куда пихать. Состоит сетка из строк и колонок (меж ними, само собой, межстрочники и межколонники, хоспаде, даже названий не сумели для них придумать). На пересечении строк и колонок находится сам модуль. Если межстрочников и межколонников нет, и модули друг к другу прижимаются почти так же тесно, как люди в метро, то такая сетка называется коллажной. А если мы сейчас забьем болт на теорию, то покажу я вам следующее.

Итак, зададим сетку. Стандарты, которых советует придерживаться Гугл, привязаны к восьмикратной пиксельной сетке. А потому я подготовил вот такой рабочий фрейм:

А потом я долго пил кофе, курил и соображал, что же мне с ним делать. Мучать ершики не хотелось, хотелось мне чего-то странного. Новостей, например. Наверное, тег “политика” так сильно на меня влияет. Что ж, решено. Теория, конечно, штука хорошая, но одной ей сыт не будешь. Ручки зачесались что-то сделать. Пусть на первый раз и криво, но потом ближе к концу курса сравним.

Долго и матерно я пытался что-то куда-то с этой сеткой сделать. Пихал туда-сюда логотип и кнопки навигации, мучал новостные посты. Так прошла ночь, наступило утро. На выходе у меня получилось вот это вот чудовище:

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

Окей, сделаем ее. Но тут я уже не ориентировался на сетку, ибо сонный мозг требовал насыпать пару ложек кофе в бокал колы, отказываясь думать аккуратно. А потому на выходе имеем вот это вот:

Мде, кажется, надо заново пройти модуль про автолейаут, а то ересь какая-то. Но не суть, это просто иллюстрации ради. Затем меня окончательно понесло, и я сделал окошко регистрации:

Сделал. Хоспаде, какое громкое слово-то. В общем, кто угадает, у кого я эту форму спер, тому я задоначу на пиво. Как только этот кто-то донаты себе включит, да.

Теперь у меня есть три макета, а у Фигмы есть функция “Интерактивный прототип”. Что это такое? Это, ребята, такая штука, которая позволит презентовать ваш макет заказчику или же показать юзерам, как вообще работает сайт. Прямо в Фигме настраиваются определенные сценарии, которые потом на отдельной вкладке можно выполнять.

Что ж, у нас есть главная страница сайта, у нас есть форма регистрации, есть отдельная страница с отдельной новостью. Шаг первый: мы решаем зарегистрироваться. Для этого настраиваем такой сценарий: при нажатии на кнопку логина должна появиться форма логина или регистрации. Поскольку на дворе двадцать первый век, пусть это будет не новая окно, а оверлей. Закрываться форма должна по нажатию на крестик или же по тапу на пустом месте. Ага, сделали. Теперь нужно настроить сценарий открытия поста. Открываться он будет по тапу на кнопке “Узнать больше”, а для закрытия новости я добавил кнопку “Назад”. Ну а теперь результат:

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

Пошел я, значит, на пикабушные курсы. Часть 3: подружимся с Фигмой⁠ ⁠

В этот раз наконец-то перейдем от теории к практике, которая проходить будет в Фигме. Пока в в ней, да.

Эту кнопку я нарисовал в Фигме. Там-то она у меня вариативная, а тут просто пнгшка, так что можете не нажимать.

Что такое Фигма?

Блин, ребят, это ад, правая кнопка мыши и хоткеи заблочены, мне это вручную вбивать пришлось. Ладно, не суть, зато хоть узнал как тире ставится. Определение простейшее и не дает никакого понятия об этой божественной штуке. В общем, в ней можно делать практически все и еще чуточку. Фотошопы, иллюстраторы - это все круто, это все актуально, но Фигма - первый инструмент среди главных.

Так вот, Курсы нас потихоньку подводят к практике, и вот она - наша первая практическая работа. Я ожидал чего-то сложного, я ожидал ужасов и сложностей. Но нет, нас всего лишь обязали в Фигме зарегистрироваться. Кстати, вы тоже можете попробовать: www.figma.com . Если получится, то вы сделали первый шаг на пути к дизайну.

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

А дальше начались фреймы, автолейауты, компоненты и стили, варианты и сетка. В общем, слова сложные, слова непонятные, тем более если вы до этого максимум открывали русифицированные пейнт и корел, как я, например. Но пугаться на самом деле нечего, как приноровитесь, все это просто вобьется в подкорку и все нужные штуки будут совершаться на автомате. Дожить бы еще до этого, конечно.

Первая по-настоящему практическая часть подразумевала, что с нею может справиться даже ребенок. Не, ну серьезно, элементарщина же: с помощью автолейаута создать что-то типа поста, настроить элементы, чтобы все красиво растягивались и переносилось. Ага, конечно, очень легко, все переносится, все красиво, ага, да:

Слева - задумка, справа - исполнение. Над содержимым не особо долго думал, ибо благодаря @Little.Bit играюсь в Starship Troopers и пишу обзор для pikabu GAMES. Хотите узнать больше?

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

То есть, мы рисуем кнопочку, например, для магазина туалетных ершиков. Но что делать, если на ершики скидка? Добавляем скидочный вариант. А что если ершиков не осталось? Не вопрос, добавляем недоступный вариант. Все это объединяется и группируется, и вам в итоге нужно будет в дальнейшем для какой-нибудь странички сайта просто взять базовую кнопку и поставить нужные галочки в свойствах. Вот так это выглядит на деле:

Слева - базовый вариант, в центре - неактивный, справа - вариант при клике. А для чего, дамы и господа, мы кнопочки рисовали? Конечно же для товарища @Vintovoi и его ТЗ: #comment_239590281.

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

Заметьте, в этой карточке у нас сразу две цены. А это потому, что мы делали базис. А теперь делаем варианты и получаем вот это:

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

Каждый вариант можно назначить скидочным или недоступным. В общем, скоро ершики будут править миром. А арахниды - нет

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

📎📎📎📎📎📎📎📎📎📎