Состояния кнопок в веб дизайне: normal / hover / active. Готовим макет к верстке

Sdílet
Vložit
  • čas přidán 6. 09. 2024

Komentáře • 128

  • @MariaPakhnits
    @MariaPakhnits Před 2 měsíci +1

    Лёша, спасибо большое за то, что делишься своим личным опытом, классно узнать это и со стороны дизайнера и со стороны верстальщика!)))

  • @alexeybychkov_
    @alexeybychkov_  Před 5 lety +13

    0:32 - как делал раньше
    2:22 - как делают многие дизайнеры
    3:57 - как лучше всего делать
    5:00 - показал, как сейчас отдаю на верстку кнопочки
    8:44 - нужна ли неактивная inactive (disabled) кнопка

  • @masika1
    @masika1 Před 3 lety +11

    Как же круто, что в своих видео показываешь насколько важно правильное взаимодействие дизайнера с верстальщиком... да вообще, что эту тему поднимаешь)) и спасибо за подсказку с кнопками, это правда очень удобно для обоих сторон! ) как всегда + лайк

    • @alexeybychkov_
      @alexeybychkov_  Před 3 lety +2

      так это ж очень важно научиться готовить макеты, чтобы их сверстать можно было адекватно)

    • @masika1
      @masika1 Před 3 lety +1

      @@alexeybychkov_ это правда, но увы, не все заморачиваются по этому поводу) может я и не права.. просто смотришь на некоторые сайты и сложно понять кто сплоховал дизайнер, верстальщик или оба :D

  • @h2643
    @h2643 Před rokem

    Вроде простые вещи, но каждый раз приятно, когда в инстаграме вижу посты на эту тему, очень уж нравится

  • @AmiHolla
    @AmiHolla Před rokem

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

  • @user-pt4fp4ke5m
    @user-pt4fp4ke5m Před 4 lety +11

    Лучший канал! Получил много информации, жду новых видео

  • @Alexandraizotova727
    @Alexandraizotova727 Před rokem

    Спасибо, Леша😊 действительно удобнее верстальщикам, когда все в одном месте собрано

  • @taniabencovscaia4711
    @taniabencovscaia4711 Před 3 lety +2

    Я вас обожаю...влюблена в слово "тенюшка"...и как вы его классно произносите))) Реально самый лучший канал

    • @alexeybychkov_
      @alexeybychkov_  Před 3 lety +2

      Спасибо)) Иногда наоборот прилетает за "тенюшку" ))

  • @anstupak16
    @anstupak16 Před 4 lety +4

    просто лучший канал. Кратко, по делу и очень приятно слушать!

  • @user-lg4fu9qf6y
    @user-lg4fu9qf6y Před rokem +1

    Решила начальные ролики твои просмотреть. Чтобы информацию структурировать у себя. Благодарю- было информативно и полезно

  • @user-tf5ie4om7s
    @user-tf5ie4om7s Před 4 lety +4

    Действительно, так намного проще и удобнее, а главное все равно для верстака все понятно. Утащу себе идею, спасибо!

  • @irynamelnychenko88
    @irynamelnychenko88 Před rokem

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

  • @user-vb6jb6jv7q
    @user-vb6jb6jv7q Před 3 lety +3

    Наконец-то поняла разницу между состояниями кнопок 🙈Леша, спасибо большое!!!🙏🌝👍🤘

  • @meryul8623
    @meryul8623 Před 3 lety +4

    Просто огрооомное спасибо за то, что делитесь такой полезной информацией🙀

  • @jupiter-leo14
    @jupiter-leo14 Před 2 lety +1

    Очень классно объясняешь , спасибо!

  • @yulia9274
    @yulia9274 Před 2 lety +1

    Как хорошо, что всё четко и понятно объяснил. Спасибо!

  • @Tirrotig
    @Tirrotig Před 2 lety +1

    Кратко и полезно) спасибо!

  • @user-nj7uh7lu7g
    @user-nj7uh7lu7g Před 3 lety +1

    Очень полезный ролик, спасибо!

  • @user-dx1ou8hw2h
    @user-dx1ou8hw2h Před 3 lety +1

    вот теперь всё встало по полочкам. От всей души миллион СПАСИБ!

  • @antoninanazarenko7855
    @antoninanazarenko7855 Před 3 lety +1

    Спасибо за информативное видео ! И голос очень приятный 👍

  • @user-ww4ye5cj6b
    @user-ww4ye5cj6b Před 2 lety +1

    Спасибо большое за ролик!!))

  • @user-gb5cg6ol8y
    @user-gb5cg6ol8y Před 3 lety +1

    Куча полезной информации! Спасибо, Алексей!

  • @iam_brightspark
    @iam_brightspark Před 3 lety +1

    Кнопочки)) на одном из разборов (или стримов. уже не помню) ты также подробно объяснил про них)) круто, что есть отдельно посвященное вариантам элементов видео))

    • @alexeybychkov_
      @alexeybychkov_  Před 3 lety +2

      да столько всяких роликов нужно записать. И про то и про это

    • @iam_brightspark
      @iam_brightspark Před 3 lety

      @@alexeybychkov_ мы в тебя верим! Сил, здоровья и неотступности тебе)) с твоей любовью к делу, ты обречен на успех!

  • @user-nh2ss7eu6y
    @user-nh2ss7eu6y Před 5 lety +4

    Спасибо, все понятно

  • @niccckkka
    @niccckkka Před 3 lety +1

    рисовала кучу кнопок до этого видео, теперь буду только 3 состояния порказывать :) Спасибо за видео!

    • @alexeybychkov_
      @alexeybychkov_  Před 3 lety +2

      Супер) Спасибо тебе за каждый коммент!)

    • @user-hs2jg2gx8w
      @user-hs2jg2gx8w Před 2 lety

      @@alexeybychkov_ а как быть, если рисуешь 3 состояния для кнопок, а по макету эти кнопки с разным текстом внутри и когда в макете справа меняешь состояния, то текст то слетает и берет из мастера, где написано "activ normal"?

  • @karolinak3345
    @karolinak3345 Před 3 lety +1

    Спасибо за интересное видео! Лайк, просмотр рекламы, переход по ссылке)

    • @alexeybychkov_
      @alexeybychkov_  Před 3 lety +2

      Вау! Спасибо за полный набор! :)

  • @dmitriivilkov1024
    @dmitriivilkov1024 Před 5 lety +3

    Отличное видео, просто и понятно, спасибо!

  • @nikstark1546
    @nikstark1546 Před 4 lety +1

    Как я раньше до этого не допер! Спасибо!

  • @user-yl9fw4li4n
    @user-yl9fw4li4n Před 5 lety +3

    Спасибо, круто!

  • @user-lc8if3wm2o
    @user-lc8if3wm2o Před 2 lety +2

    Было полезно и информативно ) Лайк)❤️❤️❤️

  • @pridari
    @pridari Před rokem

    Спасибо за ролик! Важная тема!😃😃😃😃

  • @viktorchernichenko
    @viktorchernichenko Před 2 lety +1

    Отличное видео!

  • @nikitalarionov-edmin3163
    @nikitalarionov-edmin3163 Před 3 lety +1

    брат смотрю твой канал второй день не отрываясь.

    • @alexeybychkov_
      @alexeybychkov_  Před 3 lety +2

      Спасибо за подписку) Если нечего будет делать во время просмотра - пиши комменты) они очень помогают каналу развиваться! Заранее спасибо! :)

    • @nikitalarionov-edmin3163
      @nikitalarionov-edmin3163 Před 3 lety +1

      @@alexeybychkov_ чем могу, тем помогу)

    • @alexeybychkov_
      @alexeybychkov_  Před 3 lety +1

      @@nikitalarionov-edmin3163 звучит круто))

  • @user-me6rg9ss8h
    @user-me6rg9ss8h Před 4 lety +2

    "Как долго я тебя искала..." Спасибо

  • @marinanixi
    @marinanixi Před 3 lety +1

    Спасибо, за видео!

  • @obalatsun
    @obalatsun Před 2 lety +1

    Осторожно! Если будете часто заходить на этот канал и видосики смотреть, а потом еще после этого и кнопки в фигме нажимать, можете нарваться на то, что станете хорошим дизайнером 😏

    • @alexeybychkov_
      @alexeybychkov_  Před 2 lety +1

      ага, и такое может случиться)

  • @andriifartushnyi3029
    @andriifartushnyi3029 Před 5 lety +6

    Спасибо. Жду видео о адаптации групп и фреймов в фигме. Или было уже такое и я пропустил?

    • @alexeybychkov_
      @alexeybychkov_  Před 5 lety +3

      Про адаптивы на реальных примерах еще не делал

  • @user-hy6jt9tv6m
    @user-hy6jt9tv6m Před 2 lety +1

    Спасибо за видео! Информативно

    • @alexeybychkov_
      @alexeybychkov_  Před 2 lety +1

      пожалуйста!

    • @user-jc5vz1ml2k
      @user-jc5vz1ml2k Před 2 lety

      @@alexeybychkov_ обалдеть, Вы ещё на комменты отвечаете. Лайк, подписка и + 100 к карме.

  • @user-xs8ty9dg5s
    @user-xs8ty9dg5s Před rokem +1

    Лайк и спасибо за ролик)

  • @user-te4kd6eo8n
    @user-te4kd6eo8n Před 2 lety +1

    Вялiкi дзякуй!💖🙏

  • @dianakurbatova1461
    @dianakurbatova1461 Před 2 lety +1

    спасибо за видео) когда вижу, как делают дизайн в фотошопе, прям страшно становится... не знаю почему, может неудачный опыт создания дизайна в фш (хоспаде, ту*ые сетки, лаганые пиксели, 2 часа на 1блок) дает о себе знать, хвала свету, что существует фигма

  • @user-yj5kv4nn1w
    @user-yj5kv4nn1w Před rokem +1

    Смотрела это видео после видео о вариантах в фигме. Насколько же удобней теперь делать кнопки, особенно если сравнивать с фотошопом☺

  • @user-rh7em8md4d
    @user-rh7em8md4d Před 2 lety

    четко и понятно! спасибо!

  • @user-oh3ff8um5j
    @user-oh3ff8um5j Před rokem

    Спасибо за урок

  • @user-yl9fw4li4n
    @user-yl9fw4li4n Před 5 lety +4

    Алексей, а у вас есть туториал по анимации прототипов в фигме?

    • @alexeybychkov_
      @alexeybychkov_  Před 5 lety +9

      Я не занимаюсь прототипами - не люблю их. Вернее, мне очень не нравятся коммуникации: задавать 100500 вопросов, работать с «я не знаю чего хочу, предложи / давай ты сначала прототип сделаешь?». Больше всего меня расстраивают текстовые ТЗ: пришлют 5-ый том «Войны и мира», который только чтобы прочитать нужно потратить час времени. Перед глазами нет общей картинки, надо сначала прочитать пару раз, потом сделать прототип (столько же времени, сколько и сам дизайн), потом еще раз все прочитать, чтобы понять ничего ли не забыл. Потом долгие нудные обсуждения с заказчиком.. Буууэээ... Хотя в офисе, на дядю когда работал, в акшуре делал крутые динамические прототипы со всякими ховерами, всплывшками и тд (неравнодушен к деталькам).
      Я дизайн люблю. Очень. Обсудить его (когда макет уже готов) это вот всегда пожалуйста. Поэтому на прототипы отправляю к ребятам, которые как раз прототипами и занимаются. А потом уже занимаюсь тем, от чего получаю сам удовольствие. Иначе мне бы дизайн уже давно надоел. Работать надо в кайф :) Если тебе что-то не нравится - не занимайся этим. Для меня это прототипирование, а точнее коммуникации в процессе прототипирования.
      Поэтому пока рассказываю только про то, чем сам ежедневно занимаюсь и чем пользуюсь в процессе. Возможно, попозже…

    • @user-ux6xi1jf5v
      @user-ux6xi1jf5v Před 5 lety +4

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

    • @alexeybychkov_
      @alexeybychkov_  Před 5 lety +5

      @@user-ux6xi1jf5v Я в своей второй Книге «Дизайн и фриланс. Новый уровень» очень подробно про все рассказал. alexeybychkov.com/second-book-2019/
      С кучей скриншотов, переписок и тд. По сути почти вся вторая книга - о том, как у меня проходит работа над проектом: если в первой я рассказывал, как продать себя заказчику, то во второй - как продать ему свой дизайн.

  • @nexusway8640
    @nexusway8640 Před 4 lety +2

    Блиииииииин где ты раньше был!?!!

  • @user-sp6te7ph7b
    @user-sp6te7ph7b Před 3 lety

    Отличное видео

  • @MrKamaeb
    @MrKamaeb Před 2 lety

    лукас не глядя

  • @ivanandreiko2245
    @ivanandreiko2245 Před rokem

    конспектирую каждий урок хотя все очень доходчево!

  • @mariadanilova7431
    @mariadanilova7431 Před 5 lety +3

    То есть можно не применять стиль на каждой кнопке, а вывести на отдельный борд стайлгайда?

    • @alexeybychkov_
      @alexeybychkov_  Před 5 lety +2

      Так устроены компоненты в Фигме. Делаешь 1 компонент-кнопку, а потом его клонируешь. И при необходимости меняешь мастер-компонент, а все его клоны автоматически изменятся.

  • @veekotova7719
    @veekotova7719 Před 4 lety +1

    Спасибо!

  • @U.Kazinets
    @U.Kazinets Před rokem

    хорош, как всегда мегополезно!

  • @vladmakedonskyi57
    @vladmakedonskyi57 Před 4 lety +1

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

  • @user-yo6ps9bx3q
    @user-yo6ps9bx3q Před 3 lety

    А как сделать задержку заливки контура в ховере?

    • @alexeybychkov_
      @alexeybychkov_  Před 3 lety +1

      Сейчас в бета-тестировании этот функционал находится. Скоро наверное зарелизят

  • @user-cw5eh5ro7g
    @user-cw5eh5ro7g Před 5 lety +2

    Где же ты был раньше? :)

  • @user-wo2de7pi8o
    @user-wo2de7pi8o Před 4 lety +1

    Эти кнопки вы наком программе сделали?

    • @alexeybychkov_
      @alexeybychkov_  Před 4 lety +1

      там где темный интерфейс - Фотошоп, где светлый - Фигма

    • @user-wo2de7pi8o
      @user-wo2de7pi8o Před 4 lety

      @@alexeybychkov_ вы там общи сайт настроилиже кноки итд, тот какой пррограмма? 🤓

    • @alexeybychkov_
      @alexeybychkov_  Před 4 lety +1

      можно тайм-код? на какой минуте-секунде? не очень понял о чем речь)

  • @amelianceskymusic
    @amelianceskymusic Před 2 lety

    Разве у css есть :normal?
    И где :focus :disabled?
    Если что смотрел без звука=))

  • @sessl5436
    @sessl5436 Před 10 měsíci

    минус лишняя дырень в карму от верстальщика в будущем)

  • @liudmyla4706
    @liudmyla4706 Před rokem

    Дизайн в фотошопе. Давно это было...