Как делать адаптивный дизайн сайта? Нужно ли 320 px? Какая высота первого экрана?

Поделиться
HTML-код
  • Опубликовано: 9 июл 2024
  • #alexeybychkov #ityoutubersru #webdesign
    00:00 - как делать адаптивный дизайн
    9:09 - высота первого экрана
    18:50 - примеры адаптивов первого экрана
    42:40 - сколько делать файлов адаптива
    В этом видео на реальных примерах разберем принципы адаптивного дизайна сайта. А также попробуем разобраться какой же высоты должен быть первый экран сайта. Отвечу на вопрос: нужно ли делать 320 px макет или можно сразу показывать 480 px?
    Открытый пост в закрытом бложике про адаптив: clck.ru/NDogz
    Файл Фигмы: clck.ru/NEqzP
    💰❤️ Поддержать канал:
    бусти - boosty.to/alexeybychkov - русский интерфейс, рубли
    патреон - / alexeybychkov - английский, доллары
    Подглядывать за мной можно тут:
    👉 Инстаграм: / alexeybychkov_
    👉 Беханс: www.behance.net/alexeybychkov_
    👉 Телеграм: t.me/dsgn_tips
    👉 Фейсбук: / dsgn.tips
    👉 Твитор: / _alexeybychkov
    •••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
    Меня зовут Алексей и я веб-дизайнер фрилансер из Минска. Мне в районе 35 лет, женат на прекрасном человеке и у нас чудесная дочка. Работаю на лучшей бирже в рунете - Weblancer.net. И делаю это хорошо, чего скрывать =) Ведь я люблю свою работу (уже 17 лет) и всех своих заказчиков. На этом канале делюсь опытом, рассказываю про всякие детали работы веб-дизайнером на фрилансе. Тут будет не только теория про веб-дизайн, но и много практики в фигме и фотошопе!
    Подробнее обо мне - alexeybychkov.com/about/
    17 лет опыта - alexeybychkov.com/experience/
    Пишу - alexeybychkov.com/blog/
    Дизайню - alexeybychkov.com/cases/
    Отзывы - clck.ru/K5Mcc
    Мои книги:
    «Дизайн и фриланс. Начало» - clck.ru/JE8ku
    «Дизайн и фриланс. Новый уровень» - clck.ru/JE8jT
    Хелп по Фигме: уроки, видео, советы, фишки - figma.help
    Мир фейсов: faces.world/
    #figma #фигма #фотошоп #photoshop #дизайн #design #фриланс #freelance

Комментарии • 1 тыс.

  • @alexeybychkov_
    @alexeybychkov_  4 года назад +28

    Открытый пост в закрытом бложике про адаптив: clck.ru/NDogz
    Файл Фигмы: clck.ru/NEqzP
    2:17 - принципы адаптива
    9:09 - какая должна быть высота первого экрана
    18:50 - обзор 10 примеров адаптивов первых экранов + хедеров
    42:40 - почему лучше делать 4 файла адаптива, а не 2
    💰❤️ Поддержать канал:
    бусти - boosty.to/alexeybychkov - русский интерфейс, рубли
    патреон - www.patreon.com/alexeybychkov - английский, доллары
    Подглядывать за мной можно тут:
    👉 Инстаграм: instagram.com/alexeybychkov_/
    👉 Беханс: www.behance.net/alexeybychkov_
    👉 Телеграм: t.me/dsgn_tips
    👉 Фейсбук: facebook.com/dsgn.tips/
    👉 Твитор: twitter.com/_alexeybychkov

    • @tetiannapopovych
      @tetiannapopovych 3 года назад +3

      здравствуйте. ссылки почему-то битые (Открытый пост в закрытом бложике про адаптив: clck.ru/NDogz
      и Файл Фигмы: clck.ru/NEqzP). Это так и задумывалось?

    • @alexeybychkov_
      @alexeybychkov_  3 года назад +3

      @Tetianna Popovych Привет. Все открывается. PS что за идиотский вопрос: задумывалось ли вставить битые ссылки?

    • @dariadizhevska5595
      @dariadizhevska5595 3 года назад +4

      @@alexeybychkov_ Алексей,спасибо за контент, вы у меня как настольная книга на ютуб 😅😂
      Подскажите пожалуйста, пост который вы тут анонсировали, он всё ещё доступен? У меня почему-то не грузится 😔но может это и у меня какой-то глюк

    • @rowenkane5197
      @rowenkane5197 2 года назад +1

      i guess Im randomly asking but does any of you know a method to get back into an Instagram account..?
      I somehow lost my account password. I would love any tips you can offer me!

    • @rowenkane5197
      @rowenkane5197 2 года назад +1

      @Onyx Shepard thanks for your reply. I found the site on google and I'm in the hacking process now.
      Takes quite some time so I will reply here later when my account password hopefully is recovered.

  • @user-ks9zq9wu1l
    @user-ks9zq9wu1l 4 года назад +46

    Спасибо за кубики! Очень понятно объяснил все! Лучшее виедо про адаптивный дизайн сайта!

  • @shadowstyle1116
    @shadowstyle1116 4 года назад +39

    Как обычно простым языком о сложных вещах! 🔥🔥🔥

  • @Kate-no6il
    @Kate-no6il 4 года назад +10

    Очень нужная информация, спасибо!
    По сути весь ваш канал - сплошная годнота и полезности, лучшее, что я видела
    ❤️

    • @alexeybychkov_
      @alexeybychkov_  4 года назад +3

      🤟😇🤟 супер! Рад, что нравится!

  • @SamoDesignchannel
    @SamoDesignchannel 4 года назад +4

    Без лишних комментариев, это лучшее видео!)
    А Ваш канал и вовсе самый лучший и познавательный при работе с дизайном на фрилансе)

  • @IvanLao
    @IvanLao 4 года назад +13

    Крутой урок! Спасибо 🙏🏼 Алексею еще раз) особенно нравится как в видео-уроках птички на фоне чирикают, такое ощущение что урок записан где-то на острове Бали, и хочется также, есть к чему стремиться))

    • @alexeybychkov_
      @alexeybychkov_  4 года назад +6

      И мне звуки природы больше нравятся, чем фоновая музыка ☀️

  • @user-vx2qu5rh1u
    @user-vx2qu5rh1u 4 года назад +7

    Спасибо огромное, за труды! Каждое слово ценно . У тебя получаются, настойки высококонцентрированные, без капли воды :)))

    • @alexeybychkov_
      @alexeybychkov_  4 года назад +5

      ну супер! А вообще я по знаку зодиака водолей 😄

  • @valeriiashcherbina1436
    @valeriiashcherbina1436 2 года назад +2

    100% пользы и никакой воды, спасибо!))
    идея с кубиками для теории классная и понятная, и наглядные примеры реальный блоков как раз закрепляют все это)
    и очень круто, что все примеры разные!

  • @user-nr1mi1qu2k
    @user-nr1mi1qu2k 2 года назад +1

    Спасибо за такое полезное видео! Очень нравится подача: с юмором, простым языком, но в то же время без воды и с огромной пользой:)

  • @obalatsun
    @obalatsun 2 года назад +3

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

    • @alexeybychkov_
      @alexeybychkov_  2 года назад +1

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

  • @aleksandramishchevskaya7147
    @aleksandramishchevskaya7147 4 года назад +5

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

    • @alexeybychkov_
      @alexeybychkov_  4 года назад +5

      рад, чо понравилось! Спасибо за просмотр)

  • @karinaliman5961
    @karinaliman5961 2 года назад +2

    Столько реальных примеров показал, спасибо огромное 👏👍
    Замечательно объясняешь, твой канал - сокровище ❤️

  • @mslv_m
    @mslv_m 2 года назад +1

    спасибо за видео. Здорово, что вы развиваетесь вместе с нами)

  • @darriaaaaaaaaaaaaaaaaaaaaa5608
    @darriaaaaaaaaaaaaaaaaaaaaa5608 Год назад +4

    Идти на твой канал когда появился какой-то вопрос по дизайну уже привычка 🥹 все доступно и главное понятно настолько, что чаще всего даже вопросов не остаётся!🔥 спасибо 🫶

  • @user-uh7tn8tn6w
    @user-uh7tn8tn6w 3 года назад +4

    Спасибо, очень интересно рассказываете, уже несколько часов пересматриваю ваши видео!!

    • @alexeybychkov_
      @alexeybychkov_  3 года назад +3

      Спасибо за подписку) Рад, что нравится!

  • @Eugenia_Safonova
    @Eugenia_Safonova 4 месяца назад +1

    Такое видео должно быть частью платного курса - просто море полезное инфы и никакой воды!😊

  • @vadim_yakushenko
    @vadim_yakushenko 2 года назад +1

    из каждого ролика забираю полезные лайфхаки, ну что за волшебство! ✨

  • @loalitaa
    @loalitaa 2 года назад +4

    Отдельное спасибо за то, что уделил внимание высоте первого экрана - информативно и актуально

  • @sergeyprostobean4521
    @sergeyprostobean4521 4 года назад +6

    Алексей, спасибо. Всё понятно, всё в тему. Продолжай дальше: про хедеры, футеры... Всегда полезно послушать человека с опытом. Не всегда простые вещи очевидные. Поэтому - смотрю, запоминаю, учусь... Кстати, книги прочитал (обе). Информативно и ценно. Лайк:)

    • @alexeybychkov_
      @alexeybychkov_  4 года назад +3

      Супер) рад, что нравится) Спасибо!

  • @zagoorsky2887
    @zagoorsky2887 2 года назад +1

    Как обычно огонь! Полезно, быстро и понятно!

  • @Tirrotig
    @Tirrotig 2 года назад +1

    Класс! Подробно без воды на реальных примерах ))🔥

    • @alexeybychkov_
      @alexeybychkov_  2 года назад +1

      супер) спасибо за просмотр!

  • @yulia9274
    @yulia9274 2 года назад +5

    "Нет людей, которые не скроллят! " отлично сказано, можно даже с успокоительной речью идти к дизайнерам новичкам)

  • @RGabbas
    @RGabbas 3 года назад +5

    Алексей, спасибо!
    Как всегда: доступно, понятно и с юмором !!!)
    Красавчик!!!

    • @alexeybychkov_
      @alexeybychkov_  3 года назад +3

      Супер) рад, что нравится!

  • @nikastepanchugova9286
    @nikastepanchugova9286 3 года назад +1

    Давно смотрю ваши видео и точно могу сказать что они спасение когда возникает какой-нибудь вопрос. Очень круто и понятно (мне кажется даже для тормозов). Спасибо за ваш труд. Очень ценю и безгранично благодарна)))

    • @alexeybychkov_
      @alexeybychkov_  3 года назад +1

      Супер) Рад, что полезно)

  • @MadLinkoln
    @MadLinkoln 2 года назад +1

    Видео классное! Инфа и подача как всегда на высоте!)

  • @sergeyprostobean4521
    @sergeyprostobean4521 4 года назад +5

    Пересмотрел. Освежил. Леха, спасибо, что так подробно и откровенно про дизайн. Будет классно и про хедеры, и про футеры, и про таблицы... Супер! Спасибо

    • @alexeybychkov_
      @alexeybychkov_  4 года назад +3

      Спасибо, что смотришь)

  • @user-vb6jb6jv7q
    @user-vb6jb6jv7q 3 года назад +3

    Леша, спасибо большое! Вчера как раз доделала первую страницу своей второй работы,хочу попробовать сделать адаптивы, но с привязками вообще беда. Нашла твое видео это , буду вникать 🤘💪 как обычно, спасибо большое! Лайк не глядя. А теперь я побежала смотреть))
    Кстати, спасибо отдельное за чат в Дискорд, ребята ооочень отзывчивые. Помогают разобраться и исправлять ошибки 💜

    • @alexeybychkov_
      @alexeybychkov_  3 года назад +2

      Супер) Рад, что полезно)

  • @Soffikko
    @Soffikko Год назад +1

    Еее! Крутецкая инфа, высота первого экрана - это всегда очень актуально! 🔥 Примеры с ректенглами классные, сразу понятнее становится)

  • @juliasizova7799
    @juliasizova7799 Год назад +1

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

  • @hyper_hal
    @hyper_hal 4 года назад +4

    Полезный видос. Некоторые моменты подчеркнул для себя. Так сказать, добавил в заметки. Спасибо :)

    • @alexeybychkov_
      @alexeybychkov_  4 года назад +5

      рад, что понравилось!

  • @karolinak3345
    @karolinak3345 3 года назад +3

    Алексей, вы так суперски все объяснили!! Спасибочки!👍

  • @webideya
    @webideya Год назад +1

    Отличный ролик и много примеров из практики - просто супер! Спасибо!

  • @shkida9930
    @shkida9930 Год назад +1

    Ух ты, зашла посмотреть ролик, а тут прям полноценный урок с примерами, супер! Спасибо за подробное освещение темы))

  • @user-bc9np6px4y
    @user-bc9np6px4y 4 года назад +4

    Понравилось как всегда, записывай еще :)

  • @ilyakochnev2068
    @ilyakochnev2068 4 года назад +5

    На кубиках все супер понятно! Спасибо.

  • @user-zc4hr9tw3o
    @user-zc4hr9tw3o 7 месяцев назад

    Без воды, по делу и на реальных примерах! Контент просто супер, огромное спасибо🤍

  • @user-ql4jv9id3z
    @user-ql4jv9id3z Год назад

    классно, что всё и на пальцах, и с реальными примерами так подробно объясняешь. Спасибо!

  • @annrastorgueva5037
    @annrastorgueva5037 3 года назад +3

    Вы очень классный, подписалась на вас в инсте случайно и на ютубе стала на ваши видео натыкаюсь, конечно же уже подписалась. Удачи вам и спасибо за помощь с Фигмой)

  • @user-cf3ft2uc8w
    @user-cf3ft2uc8w 10 месяцев назад +1

    Спасибо за такой полезный урок! Удобно что всегда можно обратиться в твой канал, всегда здесь много пользы)

    • @alexeybychkov_
      @alexeybychkov_  10 месяцев назад +1

      Это замечательно)

  • @khachatur9826
    @khachatur9826 2 года назад +1

    Это топ) Спасибо за полезные примеры, столько качественного опыта)

  • @yurahol
    @yurahol 4 года назад +5

    Мало таких интересных и подробных объяснений, без воды)

    • @alexeybychkov_
      @alexeybychkov_  4 года назад +4

      супер)

    • @yurahol
      @yurahol 3 года назад

      @@llelya Полностью согласен!

  • @user-vo8ks9uq1l
    @user-vo8ks9uq1l 3 года назад +6

    я плохо пишу, скажу кратко, твой канал это лучшее, что произошло со мной за пол года))))

    • @alexeybychkov_
      @alexeybychkov_  3 года назад +5

      спасибо)) Нормально ты пишешь))

  • @anastasiiya3674
    @anastasiiya3674 2 года назад +1

    Спасибо за наглядные примеры, хорошо видеть как все работает на практике ! Длинный ролик - а на одном дыхании)

  • @Anna-hi4dk
    @Anna-hi4dk 2 года назад +1

    Какой кайф. Много нужной информации без воды. Спасибо)

  • @user-on9yr8it6e
    @user-on9yr8it6e 3 года назад +3

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

    • @alexeybychkov_
      @alexeybychkov_  3 года назад +3

      Спасибо) рад, что нравится!

  • @nikolay-t6497
    @nikolay-t6497 4 года назад +4

    Отлично с квадратиками. Ролик зашёл!
    Всё наглядно и понятно.

  • @ItchefRu
    @ItchefRu 3 года назад +1

    Очень просто и доходчиво объясняешь. Без воды и сухости, парадокс....))). За труд и желание поделиться и научить, благодарочка.

  • @user-qn2lf1wk7h
    @user-qn2lf1wk7h 2 года назад +1

    Классно изучать материал на реальных примерах!!) так намного понятнее

  • @lackevil3730
    @lackevil3730 4 года назад +6

    Спасибо большое!

  • @designandmind
    @designandmind 4 года назад +21

    5 разрешений это хорошо, я даже эксперимент сдалал - целый месяц делал так проекты. На лендинг ещё более менее терпимо, но споткнулся на многостраничнике - это же ад, такое количество стилей, особенно текстовых нужно обслуживать пробовал и поблочо, или постранично - один фиг запутался, а верстальщик чуть руки не оторвал за такой шведский стол 😁 Поэтому сейчас рисую 320 и 768, да и заказчики от студий\агентств не готовы переплачивать пока дизайнер и разраб развлекаются, тратя время на то, чтобы у 2% посетителей хедеры были красивыми))
    У "фрилансера по жизни", есть видос на эту тему, можно совмещать адаптив и резиновую верстку, чтобы не рисовать все брекпоинты.
    Я одно бремя страдал от мьюза, в котором также 5 разрешений рисовал, а теперь и zero блок в тильде решил добить 😁

    • @alexeybychkov_
      @alexeybychkov_  4 года назад +14

      Не красивыми, а удобными. И откуда инфа про 2%? Это не развлечение, это работа. Если к работе относиться как к развлечению, лучше не заниматься дизайном :) Потом и получаются сайты и интерфейсы, которыми не комфортно пользоваться, потому что развлеклись все в процессе). В видео так-то и объяснил, что верстальщик будет резинить, если нет всех макетов. И показал, что из этого выйдет. Спасибо, что видео посмотрел)

    • @designandmind
      @designandmind 4 года назад +8

      @@alexeybychkov_ да, нынче найти верстальшика с прямыми руками большая проблема, поэтому 5 разреший оправданы зачастую

    • @alexeybychkov_
      @alexeybychkov_  4 года назад +14

      Забавно, что так считают даже сами верстальщики. Когда мои знакомые заняты, они своим постоянным заказчикам помогают с поиском кого-то на верстку. И тоже потом в чатике нашем жалуются, что сложно найти. А сейчас с карантином еще больше недавно открывших для себя верстку будет :)

    • @user-on9yr8it6e
      @user-on9yr8it6e 3 года назад +6

      @@alexeybychkov_ а что же делать тогда начинающему дизайнеру🙈к кому обращаться..где искать верстальщика

  • @elenakotova1672
    @elenakotova1672 Год назад

    Понятно и хорошо объясняешь, с прямоугольниками проще понять, а с примерами гораздо проще запоминается! Спасибо за ролик)

  • @TheAlenaVolkova
    @TheAlenaVolkova Год назад

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

    • @alexeybychkov_
      @alexeybychkov_  Год назад

      и тебе спасибо за комменты!

  • @veekotova7719
    @veekotova7719 4 года назад +23

    Мне удобнее когда меню на телефоне справа. Большим пальцем ближе тянуться! :))

    • @alexeybychkov_
      @alexeybychkov_  4 года назад +6

      А если левша?) А если двумя руками держишь телефон?) тоже справа?

    • @yurisamarin8200
      @yurisamarin8200 4 года назад +6

      а какого нам израильтянам? я когда перешел на телефон с экраном 6.3дюйма (после 5.5) поменял с иврита на инглиш андроид просто потому что задом наперед паллец не дотягивался на сэнд в ватсапе итп.))

    • @alexeybychkov_
      @alexeybychkov_  4 года назад +5

      Да уж)

  • @user-me6rg9ss8h
    @user-me6rg9ss8h 4 года назад +3

    Кубики - 🔥. Спасибо

  • @antiswag
    @antiswag 3 года назад +2

    Очень полезное видео, получил ответ на множество вопросов, которые сидели в голове! Спасибо!

    • @alexeybychkov_
      @alexeybychkov_  3 года назад +1

      Супер, спасибо за просмотр)

  • @KaramelkaMega
    @KaramelkaMega Год назад +1

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

    • @alexeybychkov_
      @alexeybychkov_  Год назад +1

      супер) спасибо за пересмотр!

  • @daniilverlan2747
    @daniilverlan2747 4 года назад +10

    Очень классный и супер понятный ролик! Алексей молодец) Огромная просьба: сделай пожалуйста ролик как правильно рассчитывать стоимость дизайна сайта/лендинга. Я начинающий дизайнер и это для меня один из самых актуальных вопросов с которым все начинающие сталкиваются. Если цена установленна заказчиком, хорошо, но вот если самому нужно ставить цену, не знаешь с чего начать, чем продолжать и чем закончить, как вообще считать. В интернете шарил, нормального ответа или рекомендации нету на эту тему. Ребят, кто тоже хочет такой ролик лайкните комментарий, чтоб Алексей увидел какой тут лес рук))

    • @alexeybychkov_
      @alexeybychkov_  4 года назад +2

      Привет. Так есть такой ролик ruclips.net/video/qol73lgWbaA/видео.html
      Там подача еще так себе с неуверенным дрожащим голосом, но суть передал 🚀

    • @daniilverlan2747
      @daniilverlan2747 4 года назад +2

      @@alexeybychkov_ Спасибо огромное, не знал))

    • @alexeybychkov_
      @alexeybychkov_  4 года назад +1

      не за что огромное)

    • @daniilverlan2747
      @daniilverlan2747 4 года назад +1

      @@alexeybychkov_ еще спросить хотел: немножко непонятно почему планшетную версию вы делаете на 1000px там вроде скролл бара нету, можно все 1024 делать

    • @alexeybychkov_
      @alexeybychkov_  4 года назад +3

      Скрола нет, если открывать на планшетах. Вернее он там тоже есть, но не отображается. Но ведь такие разрешения еще встречаются на очень старых компах и ноутбуках. Поэтому лучше делать макет такой, который влезет и на 1000 и на 1024, чем наоборот.

  • @marinanixi
    @marinanixi 3 года назад +4

    Спасибо за полезное видео! Пока посмотрела 4 раза переделывала свою работу. Ответила для себя на некоторые вопросы: картинку при адаптиве можно ровнять не только по центру, но и по правому краю, и все тогда красиво поместится и текст не будет в уши и рот лезть =)); длинный текст в заголовке можно вынести на белый фон - отлично смотрится! А кнопку на маленьких экранах лучше растянуть - меня тоже бесят треугольники, особенно когда они еще и перевернутые.

    • @alexeybychkov_
      @alexeybychkov_  3 года назад +1

      Супер, рад, что пригодилось!

  • @user-rc7ec3hb2h
    @user-rc7ec3hb2h Год назад

    Столько примеров, классно!)) Спасибо за полезности)

  • @anku_onku
    @anku_onku Год назад +1

    Спасибо за ролик)) Было полезно посмотреть и взять на заметку))☺👍

  • @equalizerx104
    @equalizerx104 4 года назад +3

    Может покажете короткое видео как передаете макет верстальшику, выливаете в зеплин, авакод или еще как или передаете оригинал макет в фигме? как расписываете стили и все состояние чтобы верстальшику было понятнее и все такое, подробнее если рассказали бы об этих вещах былобы ОТЛИЧНО.

    • @alexeybychkov_
      @alexeybychkov_  4 года назад +5

      Видео будет очень коротким :) я просто отдаю заказчику ссылку на макет. Ничего никуда не выгружаю. Цветовые стили подписываю очень просто. Какой цвет - такое и название: красный - red, оранжевый - orange и тд. Текстовые стили не использую. Они тормозят работу, а не ускоряют. Их настраивать, редактировать, поддерживать - сильно дольше, чем просто скопировать уже утвержденный заголовок. Даже если (что бывает крайне редко), потом попросят сделать заголовки меньше/больше, то что вручную, что через стили - все равно во всех местах все нужно будет проверять - двигать, проверять отступы и тд. В общем текстовые стили придумали за мазохистов и тех, кто работает как на каторге :) А не получая удовольствие от процесса. Особенно достает что нельзя посмотреть размер и настройки текста - нужно провалиться внутрь стиля, а потом вылазить обратно. В общем, пользуюсь только цветовыми стилями и передаю ссылку на макет. Вот и все видео))

  • @nikstark1546
    @nikstark1546 4 года назад +5

    Сто лет в кубики не играл! Спасибо ностальгия! А еще вытянутые руки на медляках в первом классе! Зашло ):

  • @iamyagubova
    @iamyagubova Год назад

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

  • @yurlova_nastya
    @yurlova_nastya 10 месяцев назад

    Всё подробно, понятно и на примерах! Класс! Спасибо)

  • @nexusway8640
    @nexusway8640 4 года назад +8

    Спасибо очень доходчиво на кубиках все объяснил!
    ответ на вопрос: кубик 100 х 100

  • @user-oi8wn7bo6e
    @user-oi8wn7bo6e 4 года назад +8

    Очень полезное видео, мне бы его неделю назад, когда я с адаптивом для 320 сражалась 😅

    • @alexeybychkov_
      @alexeybychkov_  4 года назад +4

      Рад, что понравилось! Лучше позже, чем потом! :)

  • @userinaxue
    @userinaxue 2 года назад +1

    Замечательно, что показал всё на реальных примерах. Стало понятнее с этими адаптивами🔥

  • @user-bv7hc1iq2f
    @user-bv7hc1iq2f 2 года назад +1

    Как всегда нужная информация, огонь!

  • @user-cw5eh5ro7g
    @user-cw5eh5ro7g 4 года назад +6

    Гамбургер с правой стороны. Почему не знаю. Просто с правой и все! )))
    Видео топ, конечно! Спасибо за контент и подачу!

  • @user-tf5ie4om7s
    @user-tf5ie4om7s 4 года назад +6

    Отличный ролик про адаптивный дизайн. Отдельное спасибо за объяснение про 320 пикселей!

  • @elenadenysenko2742
    @elenadenysenko2742 2 года назад +1

    Леша, спасибо большое за подробное видео) очень полезно))) спасибо

  • @Lera_tvoiagent
    @Lera_tvoiagent Год назад

    С примерами всё понятно и просто становится, спасибо за подробные разъяснения🔥

  • @user-wz9hh5wh1i
    @user-wz9hh5wh1i 4 года назад +5

    Спасибо. Понятно, доступно и интересно. Может всё таки подумаешь о собственных курсах?

    • @alexeybychkov_
      @alexeybychkov_  4 года назад +10

      Ну класс. Про курсы думал. И не раз. 3 онлайн и 1 офлайн школы уже предлагали записать. И даже все готовы были взять на себя проблему домашек (нужно же с учениками созваниваться, обсуждать там все и тд. А это уже не дизайн, а трындеж. Коммуникации. Я не менедежер, а дизайнер, поэтому сразу сказал, что нет ни времени, ни желания на всякого рода домашки), а мол с тебя только курсы. Скажи сколько за них хочешь и вперед иди записывай. Всем ответил, что мне не интересно для кого-то записывать. Я если и соберусь, то выложу все у себя на канале, а деньги заработаю на фрилансе. Так одни ответили - не вопрос, выкладывай. Не понял в чем им профит, если они будут продавать за деньги то, что у меня на канале будет в открытом доступе :)
      В общем про курсы думал. Без домашек - будет шляпа. Весь кайф курса в совместной работе, а не в тупом просмотре видео. А домашки я не хочу - мне не интересно. А когда не интересно - тогда и процесс фиговый, и результат не очень. Лучше буду дальше ролики записывать для канала. Так и канал развивается потихоньку, и мне нравится все в процессе. Не приходится себя заставлять идти записывать следующий ролик, потому что скоро пятница.
      С таким успехом, каждый из вас может просто оставлять заявки на темы, которые волнуют. И если будет много желающих про что-то конкретное - запишу. Хоть с другой стороны, вот многие просили Афтер Еффект, а как записал 7 уроков - так просмотры упали в 3 раза на канале. Его смотрят единицы))

    • @user-wz9hh5wh1i
      @user-wz9hh5wh1i 4 года назад +6

      Alexey Bychkov в любом случае ты крутой дизайнер и думаю классный человек. Спасибо тебе за труды🙏

    • @alexeybychkov_
      @alexeybychkov_  4 года назад +3

      Спасибо)

    • @nikitalarionov-edmin3163
      @nikitalarionov-edmin3163 3 года назад +3

      @@alexeybychkov_ за affter effect отдельное спасибо!

  • @Inogdaprosto
    @Inogdaprosto 4 года назад +3

    про шапочки/подвальчики интересно)
    а еще интересно как высчитываются размеры после/перед текстовым блоком
    Ведь в зависимости от интерлиньяжа стиля текста, с alt-ом видны разные расстояния
    подозреваю для четкого подхода, прямоугольники использовать лучше, но как то смущает не автоматизированность процесса

    • @Inogdaprosto
      @Inogdaprosto 4 года назад +2

      @@alexeybychkov_ )))спасибо за такой развернутый ответ! очень было важно узнать твое мнение на этот счет)

    • @alexeybychkov_
      @alexeybychkov_  4 года назад +2

      не за что)

  • @user-rl8sh4pf9o
    @user-rl8sh4pf9o 2 года назад +1

    Крутая инфа как всегда) Спасибо)

  • @svetlanash.3574
    @svetlanash.3574 2 года назад +1

    Очень нужная инфа и крутая подача. Спасибо!

  • @lenasorokina7618
    @lenasorokina7618 4 года назад +3

    При всем моем уважении, как бывший математик🤭 кубик - это всё-таки объемный объект) вы играли в квадратики)... по сути ролика как обычно 🔥, спасибо))

    • @alexeybychkov_
      @alexeybychkov_  4 года назад +4

      Согласен, квадратик 😄

  • @yurisamarin8200
    @yurisamarin8200 4 года назад +3

    *НЕ РЕКЛАМА ЕСЛИ ЧЕ* )))
    насчет того как блоки расположить один под другим подходит CSS grid мой любимый... я как раз про такой случай сделал ролик как адаптивно меняются блоки с CSS grid. Можете в ютубе найти Creating One-screen landing page via Figma and CSS-Grid (#in5minutes) там я так же наглядно продемонстрировал сначала на кубиках цветных а потом вставил контент... Алексей как всегда вам царский лайк за выжимку самой сочной и полезной информации про веб дизайн.

  • @user-fk8rs3ld7d
    @user-fk8rs3ld7d Год назад

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

  • @aleksand135
    @aleksand135 Год назад

    Спасибо, что показываешь на примерах👍 очень много информации 🔥

  • @Temka57
    @Temka57 4 года назад +3

    Лёха, подскажи пожалуйста, вот вроде у тебя было видео где-то или я тебя с кем то путаю, про вдохновения. Где и как искать контент для дизайна сайта.
    Моя основная проблема:
    Хочу сделать себе лендинг кейс для портфолио.
    -Начинаю делать
    -Ищу любой старый сайт, любая тематика.
    -Создал выдуманный прототип для сайта, ну в какой очередности должны быть блоки.
    - Ну вот когда начинаю оформлять макет, начинаю тупить и думать -- (какой мне тут каталог сделать, какие должны быть кнопки перехода, какая должна быть анимация, какой должен быть фон при этом" короче просто становлюсь в ступор, и не знаю что дальше делать, а когда лазию на бихаинс, дриблл, воровать чей то дизайн и копировать в свой, меня угнетает совесть.
    Как нароботать эту нассмотреность и получить EXP.

    • @alexeybychkov_
      @alexeybychkov_  4 года назад +8

      Видимо, видео, не мое.
      Попробуй знаешь что. Бери две работы, которые тебе нравятся по одной и той же теме. И попробуй с 1 работы взять полностью структуру. А со 2 полностью слизать визуальную часть: шрифты, отступы, цвета, стили элементов и тд. Так у тебя получится не копия двух работ, а своя новая. И в процесс будешь учиться элементы повторять. И проблемы не будет как что после чего должно идти. По сути у тебя есть прототип (1 работа) и бриф на стилистику (2 работа) и ты делаешь по ним дизайн. Это очень эффективный прием особенно на начальном этапе.

    • @Temka57
      @Temka57 4 года назад +3

      @@alexeybychkov_ Спасибо большое - за совет!

    • @alexeybychkov_
      @alexeybychkov_  4 года назад +4

      Не за что)

  • @dinki4907
    @dinki4907 4 года назад +3

    Алексей! Несомненно, ваши видео супер! Спасибо за ваш труд!
    Но ваш пиксельный сайт.......ну не даёт мне покоя :D Это ведь фото из сериала "Мистер Робот"?)))

    • @alexeybychkov_
      @alexeybychkov_  4 года назад +4

      Ну класс)
      😄 Не, там было немного политики, поэтому решил лучше не показывать, чтобы ютуб не ругался

    • @dinki4907
      @dinki4907 4 года назад +3

      Ещё хочется добавить о методе объяснения на кубиках - это прям то что нужно!))
      Про расположение менюшки: по моему опыту, поскольку обычно меню с параметрами в интернет-магазинах находится слева, то и интуитивно глаз уже "ищет" его в той области, если говорить о сайте в hd, лучше его там и оставить. А так как пользователи всё больше просматривают сайты с телефона, и если открывать меню необходимо несколько раз....то удобнее дотянуться до бургера пальцем именно справа. Поэтому вариант в дизайне Cryptoniex наиболее удачен. Ведь пользователю не составит большого труда один раз найти меню справа, как и скроллить))

    • @alexeybychkov_
      @alexeybychkov_  4 года назад +4

      Согласен :)

  • @user-ih7jp3qs7u
    @user-ih7jp3qs7u 2 года назад +1

    супер видос! Очень подробно и просто, Леша, как всегда прекрасно. спасибо за труд)

  • @yuliaopolska3991
    @yuliaopolska3991 2 года назад +1

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

  • @serebrennikof
    @serebrennikof 4 года назад +7

    Кстати, такой вопрос: А адаптив вы делаете через автолейауты или ручками?)

    • @alexeybychkov_
      @alexeybychkov_  4 года назад +10

      Что-то с ним, что-то без него. Обычно его использую там, где нужно показать реальный контент. Например, заголовки в карточках в 1-2-3 строки. Но не маньячу настолько чтобы он был в каждом фрейме. В общем, какой-то баланс нашел между удобством и скоростью работы. Это вопрос из серии фрейм или группа? Когда только открыл для себя фигму - я писался от счастья каждый раз, когда адаптивил настроенный фрейм. Но чем больше я работал в Фигме, тем чаще замечал, что трачу времени на настройку привязок внутри фреймов больше, чем просто руками расставляю элементы из группы.
      PS. Спасибо за подписку! :) Так и хочется комментариям со значком "a" подробнее ответить, чем обычно)

    • @serebrennikof
      @serebrennikof 4 года назад +5

      @@alexeybychkov_ Понятно. Спасибо за такой ответ. Жаль мне не положен доступ к файлу с вашими примерами... так бы покапался)

    • @alexeybychkov_
      @alexeybychkov_  4 года назад +6

      Добавляйся в чатик в дискорде discord.gg/bqCqvKb - будет и этот файлик и много чего ещё)

    • @user-ly7lc6dj4b
      @user-ly7lc6dj4b 4 года назад +6

      Спасибо, супер, все очень понятно, а еще вас весело смотреть👍😄

    • @alexeybychkov_
      @alexeybychkov_  4 года назад +4

      ну класс)

  • @Bars_Sl
    @Bars_Sl 4 года назад +7

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

    • @alexeybychkov_
      @alexeybychkov_  4 года назад +4

      👍 думал только дизайнеры смотрят мои видео)

  • @mariakorovina9357
    @mariakorovina9357 Год назад

    Спасибо за такое познавательное видео! Все на примерах показано и рассказано, круто))

  • @Valeria_Bychkova
    @Valeria_Bychkova Год назад

    Классное подробное видео, с примерами и объяснением, спасибо! Пойду учиться🤟

  • @veekotova7719
    @veekotova7719 4 года назад +7

    Кубик 100 х 100? Серый цвет - такой кубик в фигме создается если просто нажать на пустом месте!

  • @Shnaideros
    @Shnaideros 4 года назад +3

    Спасибо за видео, очень полезно! Кубик 70x70?

    • @alexeybychkov_
      @alexeybychkov_  4 года назад +3

      Рад, что понравилось! Не-а, кубик 100 х 100. Точно такой же квадрат получается в фигме (именно этого цвета), если просто клацнуть на пустом месте, выбрав предварительно инструмент прямоугольника. И размер у него будет 100 х 100

    • @Shnaideros
      @Shnaideros 4 года назад +2

      @@alexeybychkov_ Ух ты, даже не знал такого)) Еще одна полезность в копилочку =) Ждем еще видосики, особенно по табличкам интересно)

    • @alexeybychkov_
      @alexeybychkov_  4 года назад +3

      Пока как-то желающих на таблицы не много собралось) ты первый) Может, это тема как с Аfter Effects - записал, а его никто не смотрит) Вернее мало кто. Просмотров сильно меньше, чем у других роликов на канале

    • @Inogdaprosto
      @Inogdaprosto 4 года назад +2

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

    • @Shnaideros
      @Shnaideros 4 года назад +1

      @@alexeybychkov_ будем надеяться, что со временем заинтересованных будет больше)

  • @anastasiyachaika7075
    @anastasiyachaika7075 2 года назад +1

    И кубики, и реальные примеры - всё огонь! Спасибо)

  • @user-dm8hq6ix4h
    @user-dm8hq6ix4h Год назад

    Спасибо большое за такое полезное видео с реальными примерами, так проще запоминать информацию)))

  • @user-ks9zq9wu1l
    @user-ks9zq9wu1l 4 года назад +6

    100 х 100 кубик?

  • @Masloboynikova
    @Masloboynikova 2 года назад +1

    с кубиками все очень понятно) спасибо за ролик -никакой воды!

  • @dariatukmakova
    @dariatukmakova 4 месяца назад

    Классный ролик, и столько примеров показал, полезно!
    Мне так нравятся птички на фоне 😊

  • @user-iq8ij6by5k
    @user-iq8ij6by5k 5 месяцев назад

    Как всегда - все понятно и полезно! Спасибо🤩

  • @yuliyapershina825
    @yuliyapershina825 3 года назад +1

    Спасибо, теперь стало понятно про первые экраны и адаптивный дизайн👍

    • @alexeybychkov_
      @alexeybychkov_  3 года назад +2

      Супер) рад, что пригодилось)

  • @_lusia
    @_lusia 7 месяцев назад

    Спасибо! Очень здорово и наглядно все на примерах показано 👍

  • @OlgaMakukha
    @OlgaMakukha Год назад

    Как всегда тонна полезной информации, благодарю ☺

  • @user-ej7cl5xy4b
    @user-ej7cl5xy4b Год назад

    Класс! Спасибо за наглядные примеры, как это может быть в разных вариантах