Верстка десктопной и мобильной версии в Швейцарском стиле

Поделиться
HTML-код
  • Опубликовано: 3 янв 2025

Комментарии • 161

  • @EvgenySayfi
    @EvgenySayfi 2 года назад +9

    Это ровно то, что я искал
    Базово и ёмко про швейцарский стиль с объяснением для новичков и примером 😍
    Спасибо ❤️

  • @natalyasemenova8641
    @natalyasemenova8641 2 года назад +14

    Это божественно! Обожаю чистые простые сайты! Теперь Швейцарская сетка моя визуальная любовь❤ Осталось научиться также делать)))

  • @МарияКо-с5о
    @МарияКо-с5о Год назад +1

    Макс, огромное, человеческое спасибо за то, что ты делаешь! Это видео - просто космос! Так просто и понятно объяснить - нужен талант. Спасибо!!! ❤

  • @ИринаГавриленко-ъ9н
    @ИринаГавриленко-ъ9н 2 года назад +4

    На одном дыхании! Все гениальное просто! Просто, потому что автор талант! Спасибо, что делишься знаниями и опытом!

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

    Давно хотела сделать дизайн в Швейцарском стиле - нравится его чистота и прозрачность, его нестареющая актуальность. Он кажется очень сложным и неприступным, а ты здесь дал крутую понятную схему расположения элементов. Еще выложенные в твоем telegram примеры современных цветовых сочетаний для этого стиля и примеры сайтов в этом стиле отлично дополняют общую картинку! Спасибо! Пойду пробовать полученные знания на практике!

  • @nick_khomiakov
    @nick_khomiakov 2 года назад +26

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

    • @ИванМеньшиков-э3ъ
      @ИванМеньшиков-э3ъ Год назад

      Поставил диз, потому что ни ссылки, ни названия шпаргалки нет.
      "Нашел, но никому не скажу"

    • @ЕБАНУТЬСЯцеканал
      @ЕБАНУТЬСЯцеканал Год назад

      в видео всё показали
      @@ИванМеньшиков-э3ъ

  • @chelovek_solnca
    @chelovek_solnca 2 года назад +12

    Макс, ну как же офигенно! Слушать, смотреть как ты работаешь - это истинный балдёж!

  • @paranoia-1994
    @paranoia-1994 2 года назад +2

    Вы как обычно на высоте, не понимаю почему так мало подписчиков, но знаю, что их точно будет больше

  • @Irina_Mecieva
    @Irina_Mecieva 2 года назад +7

    Аааа 🤯 это просто огонь! Огромное спасибо за этот способ) сайт выглядит красиво, просто и при этом супер современно.
    Отдельно хочу сказать, что посмотрела очень много твоих видосов и каждый раз кайфую от озвучки, процесса работы и твоих комментариев. Чувствуется, что ты действительно обожаешь дизайн и с радостью о нем рассказываешь ❤ еще раз спасибо

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

    Спасибо, Макс
    Из Ваших уст всё кажется легко и просто :).
    Надо сесть за комп и попробовать.

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

    Вот же Человечище! Столько знаний дает! Огромное спс!

  • @ТатьянаЛарионова-н5з

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

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

    То, что нужно, спасибо тебе большое! Нравится подача - без пафоса и только самое необходимое👍

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

    Отлично получилось! Всегда полезно и не скучно! Учусь у тебя! Спасибо.

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

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

  • @anzheliqueee
    @anzheliqueee 8 месяцев назад

    Макс, как всегда на высоте!

  • @FallenSmile29
    @FallenSmile29 2 года назад

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

  • @ИльяБабаев-д7ж
    @ИльяБабаев-д7ж 2 года назад

    Очень нравятся подобные видео! Смотрятся на одном дыхании

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

    Еще не смотрел но сразу лайкос.
    Макс, максимальная любовь мужик

  • @dmitry_webdiz
    @dmitry_webdiz 8 месяцев назад

    Это было максимально вовремя, потому что начал работать с зарубежкой, а там этот стиль очень любят!

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

    Класс. Давно хотела узнать подробнее про этот стиль

  • @Kisliy-ded
    @Kisliy-ded 2 года назад

    Давно хотел узнать, как строить швейцарскую сетку в вебе, большое спасибо за контент!

  • @maassha.d
    @maassha.d 5 месяцев назад

    Ну как же вдохновляет! Спасибо!

    • @maxshirko
      @maxshirko  5 месяцев назад

      @@maassha.d спасибо! Хотел бы еще сказать, что мой дед гнал самогон, градусов под 55, прятал его от бабушки и постоянно имел проблемы от этого. Знаете как назывался его личный сорт самогона? Мария Демченко 😁

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

    Дякую за чудове та цікаве відео, подивилася на одному диханні!

  • @eklerrr
    @eklerrr 2 года назад

    как всегда кайфонул от видео
    Полезное дополнение (а может я провтыкал это в видео) Фигма и подобные редакторы, которые позволяют делать вложенные фреймы/артборды, могут облегчить жизнь, если изначально выстроить логику по-блочно:
    1) расчитать не только сетку а и возможные высоты экранов и/или блоков
    2) сделать под эти высоты фреймы/артборды как шаблон
    3) собирать контент используя функционал вложенных фреймов.
    на выходе имеет по-сути супер-гибкую функциональную дизайн-систему под конкретную шрифтовую гарнитуру. Более того, такой подход позволяет эксперементировать с вложенными блоками под другой шрифт, под блок другой ширины(например для скрола с эффектом "приклеенного заголовка" или горизонтальных скролов. Или врезками как в журнале -- бац и посреди блока другой блок с другой типографикой
    Изначально ведь швейцарская сетка расчитана на фиксированный размер носителя: плакат, книга, журнал, листовка, этикетка. Подобного рода системы залипательно делать в indesign. Те кто хоть раз работал над журналом и понял кайф различных типов линеек , колонок и сеток, порой скучает под некоторым фичам:
    например "baseline grid" - это как раз те горизонтальные ряды, которые высчитывал Макс. В Индизайн же и подобных редакторах этот грид не нучжно считать по количеству строк, а наоборот нужно указать, например размер в pt/em/px одного ряда и редактор сам разлинеет как следует под размер конкретного фрейма
    кроме того, в текстовом блоке есть галочка "привязаться к baseline grid" и шрифт сам будет прилипать к линейке. вот таких вещей еще не хватает в веб-редакторах
    остальное же можно реализовать, как я писал выше, с помощью системы вложеных фреймов.

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

      Офигенный способ, респект ❤ буду юзать

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

    Макс, это просто вышак! Выкладывай видосы почаще!

  • @ioann1448
    @ioann1448 2 года назад

    Ты вообще понимаешь, что ты делаешь? Ты столько годноты отдаёшь, я не могу, ма-ма.. недавно подписался и уже тебя обожаю, величать Вас Максимом? Ну это прелесть, спасибо за контент!

  • @ЛарисаКолпакова-з8х

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

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

    Макс, спасибо огромнейшее за суперполезные практические видео, для новичков такие понятные видео очень помогают в прокачке навыков, ибо на одной теории далеко не уедешь в обучении. Еще раз спасибо! ❤

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

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

  • @paulnicholas8789
    @paulnicholas8789 2 года назад

    Максим, ты спец с Большой буквы! Спасибо за твой труд! Очень крутой видос!

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

    Макс, спасибо большое. Делай, пожалуйста, чаще такие видео

  • @ЯнаГоворова-ю5у
    @ЯнаГоворова-ю5у 2 года назад +2

    ждем еще видео с похожим форматом! очень полезно, спасибо🔥🔥🔥🔥

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

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

  • @СветланаМатусевич-д5с
    @СветланаМатусевич-д5с 11 месяцев назад

    Спасибо большое за разъяснения и такой крутой пример 🙏🏻 ❤

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

    Очень нравятся твои видео, спасибо за твой труд!

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

    Макс спасибо за ценную информацию!

  • @ТамараВиссарионова
    @ТамараВиссарионова 7 месяцев назад

    Супер! Спасибо за полезное видео!

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

    🔥🔥🔥🔥 Макс, спасибо большое 🫶

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

    афигеть🔥🔥🔥 спасибо Макс что делишься таким🚀👍 респект🙌

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

    Ваще Молодец, действительно четко сделал, умеешь, могешь!

  • @olgaperesunko1301
    @olgaperesunko1301 2 года назад

    Макс, шикардос! 🎉🎉🎉 попробую обязательно прямо сегодня
    Привет из Одессы

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

    Еее! Макс, спасибо большое 🔥

  • @polinavoropaieva8070
    @polinavoropaieva8070 2 года назад

    Вижу новое видео - ставлю лайк 🥰🔥 как всегда топ

  • @s.kornieieva
    @s.kornieieva Год назад

    Спасибо за такое классное объяснение, буду учиться делать так же)

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

    Очень крутое и полезное видео, спасибо🔥🔥🔥
    Хотелось бы ещё что-то в таком формате))

  • @МаринаМиронова-й6я
    @МаринаМиронова-й6я 2 года назад +1

    Нравится такой стилёк! Спасибо огромное 🔥

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

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

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

    Спасибо за кайфовое и полезное видео😍

  • @lokumfamily
    @lokumfamily 2 года назад

    Макс, спасибо🙌 Захотелось сделать следующий сайт для заказчика именно в швейцарской верстке. Очень логично, чисто и круто!

  • @НаталияРадченко-б9ю

    Афигенский контент. Спасибо, Макс

  • @ЮлияКраус-я6е
    @ЮлияКраус-я6е 2 года назад +2

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

  • @sanya4496
    @sanya4496 2 года назад

    офигенное видео, спасибо за работу!!!

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

    Спасибо большое Вам!
    Видео очень полезное :)

  • @Mardakova
    @Mardakova 2 года назад

    Макс, это сууууупееер полезно, спасибо ОГРОМНОЕ))

  • @artem_safronov
    @artem_safronov 2 года назад

    Макс - тупо лучший 🧨

  • @nevermoreder
    @nevermoreder 2 года назад

    отличный видос! Спасибо, Макс)

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

    Поддерживаю, Макс! Что с голосом? Дикция подсела вроде как

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

      Это я с обработчиками голоса. Кто-то еще заметил?

    • @dimadim33
      @dimadim33 2 года назад

      @@maxshirko а я уж думал неужели новый микрофон крутой Макс взял себе.

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

    Балдёж! Давно хотел разобраться с швейцарским движем,но откладывал.
    А тут такой подгон!
    Дуже Тобі дякую,Макс!

  • @asya_zoman
    @asya_zoman 2 года назад

    Очень понятно и просто. Спасибо за твои видео :)

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

    Макс. Здорово как всегда❤

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

    Спасибо за ещё один классный ролик от тебя💘 только хотела узнать, почему при настройке строчной сетки ты выставляешь настройку type stretch, а не просто top, и в процессе, если нужно больше высоты фрейма для контента, добавлять количество строк по необходимости?

    • @maxshirko
      @maxshirko  2 года назад

      Норм способ, не подумал)

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

      Отличный способ. Благодарю!

  • @sergii.kovalenko
    @sergii.kovalenko 2 года назад +1

    Супер круть!!! 😍

  • @detyantsev
    @detyantsev 2 года назад

    Четко, пересоберу себе лэндос под эту вёрстку, просто интересно попробовать )!!!

  • @ПавелРебров-э3э
    @ПавелРебров-э3э 2 года назад +1

    Круто! Будем использовать)👍

  • @sophia.design
    @sophia.design 2 года назад +1

    Шикарный ролик! Спасибо за классную инфу 👍

  • @lis_shirina
    @lis_shirina 2 года назад

    Как раз то, что искала несколько недель назад!

  • @Vian_Web
    @Vian_Web 2 года назад

    Спасибо за супер контент 👍🏼

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

    Max лучший!

  • @chertkov_art
    @chertkov_art 2 года назад

    Круто, спасибо за контент очень полезно!

  • @СергейКондулуков-з9ч

    Макс огонь. КАзалось бы нет никакой гармонии в этом сайте. Но гармония есть благодаря швейцарскому стилю. Досмотрел только до декстопной версии. Завтра буду смотреть и в мобильной.

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

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

  • @Anna_Pivanova
    @Anna_Pivanova 2 года назад

    Видео классное, спасибо!

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

    Попытаюсь аккуратно сказать...
    У тебя появился очень вкусный акцент говоря на русском языке...
    Прям кайф какой-то)
    Твои уроки и позитив радуют. Учусь и впитываю знания маэстро/гуру дизайна/тебя.
    Будь счастлив и жив. Ты и твоя семья. Ты лучший)
    И да, это ебейший балдеж)

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

    Вау, круто. Дякую за цікаве пояснення і ідею з сіткою

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

    Молодец. Не думал всегда делать только в этом стиле?)

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

    Спасибо, любуюсь❤

  • @dianehassan2825
    @dianehassan2825 2 года назад

    Я обожаааааю швейцарский стиль!!!❤❤❤ спасибо

  • @bohdanpure3522
    @bohdanpure3522 2 года назад

    Макс, ты бог!

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

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

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

    👌😎топ!!!! Просто пушка!

  • @8-ovo-ovo-8
    @8-ovo-ovo-8 2 года назад +1

    Дякую за відео! Дуже корисно!
    Цікаво, як могла б виглядати шапка в цьому стилі, але з більшою кількістю контенту. Наприклад, коли маркетолог наполягає на двох номерах телефонів, соцмережах та кнопці "подзвоніть мені" в додаток до того, що вже є. 😅

  • @sheshura
    @sheshura 2 года назад

    Потрясающе полезно! Спасибо

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

    Крутая съемка, цвет, звук, музончик и вот это всё 🔥

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

    Макс, супер цікаво і корисно, як завжди

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

    Балдёжный дизайн, Балдёжный Макс, обожаю! ❤

  • @ЯнаК-п3д
    @ЯнаК-п3д 2 года назад

    супееер, надо попробовать сделать , благодарю за видео

  • @strk5806
    @strk5806 2 года назад

    Это просто ахуэээно!🔥🔥🔥

  • @ЯнаГоворова-ю5у
    @ЯнаГоворова-ю5у 2 года назад +1

    очень круто!

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

    Привет! Видео огонь! Хочу начать изучать веб дизайн и хотел бы спросить с чего будет правильнее начать? Есть какие-то курсы или хорошие серии видео на ютубе, которые нужно посмотреть всем новичкам? Или может есть советы по поводу книг?

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

      Советую смотреть все подряд. Нет никакого «правильнее»

    • @dsurkovv
      @dsurkovv 2 года назад

      @@maxshirko я заметил, что вы не сделали кнопку выбора языков на сайте, с чем это связано?

  • @alexpristromko6898
    @alexpristromko6898 2 года назад

    Круто очень!!!

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

    Кайфульно!

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

    Полезная инфа)

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

    Кайфово вышло! Спасибо за такой контент

  • @feddy7875
    @feddy7875 Месяц назад

    3:14 Господи я не один такой на этой планете, тоже ненавижу этот красный цвет сетки всегда его меняю 😂

  • @alexlvivua
    @alexlvivua 2 года назад

    Агромне дякую за контент!

  • @katsapunova
    @katsapunova 2 года назад

    Познавательно. Спасибо!)

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

    Привет!
    Такой вопрос, больше к логике.
    Но было бы интересно получить ответ, раз ты задал тут такой вариант отображения в мобилке
    Допустим, берем вариант, где в ПК у нас есть смена картинки фоновой в блоке "Объекты" при ховере
    Как в мобилке этот момент сделать, чтобы на фоне не тусила одна фотография, относящаяся к какой-то одной категории как это выглядит сейчас
    ?

    • @maxshirko
      @maxshirko  2 года назад

      Варианты:
      1. Использовать абстрактную картинку (вот как сейчас, ваще пофиг к чему она относится)
      2. Слайдер с fade in
      3. Цветной фон без картинки
      и т.д.
      Я б ваще о таких мелочах не задумывался.
      Ни один из вариантов не повлияет на логику

  • @ana_myspace
    @ana_myspace 11 месяцев назад

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

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

    Спасибо. Крутое видео! Но есть один вопрос: если у нас межстрочка 24, то зачем Макс высчитывает ее каждый раз, если она должна быть кратна 24? Или я путаю что-то?

    • @riverinyourarea
      @riverinyourarea 2 года назад

      Собиралась писать тоже самое😈