АДАПТИВНЫЙ ДИЗАЙН САЙТА | Мобильная версия, другие разрешения

แชร์
ฝัง
  • เผยแพร่เมื่อ 27 ธ.ค. 2024

ความคิดเห็น • 125

  • @oglk9338
    @oglk9338 4 ปีที่แล้ว +54

    Все круто, но дизайн в фотошоп в 2020 году это кощунство!

    • @irinapilipchuk7479
      @irinapilipchuk7479 4 ปีที่แล้ว +1

      Очень многие заказчики до сих пор просят PSD-макеты

    • @nazarznak7645
      @nazarznak7645 3 ปีที่แล้ว

      Если не секрет , с чём связанна такая позиция?

    • @daryak5504
      @daryak5504 3 ปีที่แล้ว +3

      @@irinapilipchuk7479 из фигмы чудесным образом все экспортируется в psd. им не обязательно знать, где и как это делали, если макет корректный)

    • @divside
      @divside 3 ปีที่แล้ว +1

      Порой (а точнее очень часто) - требуется графическая настройка. Свечения/масочки/масочки по перу и тд. В фигме - это сложнее. В фигме нет ластига, в фигме ты прыщик за 2 клика с фотки на 1м блоке не удалишь.
      Веб дизайн включает в себя графику - это база. А графика делается в графических редакторах, коим фш и является, в отличие от фигмы.
      Я могу тебе скинуть свой 1й блок лендинга и готов денег поставить на то, что его ты в фигме будешь повторять его графику дня 2.

    • @dmitriykotov2513
      @dmitriykotov2513 2 ปีที่แล้ว +3

      @@divside С другой стороны если потребуется внести правки на всех страницах сайта, у тебя гораздо больше времени это займет в фш, + в фигме много плагинов для текста и верстки, al, привязки, и у многих фотошоп просто слетит, когда у тебя 10 областей на экране. Думаю нужно совмещать инструменты, графическая настройка в фш, а итоговый макет сайта в фигме.

  • @bhaktiforsouls
    @bhaktiforsouls 4 ปีที่แล้ว +6

    Как всегда круто! Лаконично и информативно. Софья, у вас определенно талант объяснять!

  • @Anna_Pivanova
    @Anna_Pivanova ปีที่แล้ว

    Какой у Вас шикарный задний фон: стол такой функциональный, милейшие кактусы и классная доска для заметок:) Глаз не оторвать))

  • @yulliael
    @yulliael 4 ปีที่แล้ว +2

    Спасибо, Софья, за полезный контент!

  • @irinapilipchuk7479
    @irinapilipchuk7479 4 ปีที่แล้ว +7

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

  • @маринат-ф3е
    @маринат-ф3е 4 ปีที่แล้ว +3

    Спасибо! Всегда очень полезные видео.

  • @kristinapetrova3038
    @kristinapetrova3038 4 ปีที่แล้ว +2

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

  • @lisovushka.stitches
    @lisovushka.stitches 4 ปีที่แล้ว +2

    Спасибо большое за это и за все остальные Ваши видео! Очень информативно, полезно и приятно смотреть!

  • @alexmax8977
    @alexmax8977 4 ปีที่แล้ว +1

    а в figma работать не собираетесь ?

  • @polya4ka
    @polya4ka 4 ปีที่แล้ว +2

    Очень полезное видео. Всё по полочкам. Спасибо!

  • @arinmazing5880
    @arinmazing5880 3 ปีที่แล้ว +1

    большое спасибо!!!! Мне очень помогло видео.Всё очень просто и понятно

  • @irina-web1310
    @irina-web1310 2 ปีที่แล้ว

    Спасибо! Очень полезно!

  • @andorsdesign
    @andorsdesign 4 ปีที่แล้ว +1

    София, скажите пожалуйста, а при свободном трансформировании у вас не портится качество обводки плашки?

    • @SofyaFilippova
      @SofyaFilippova  4 ปีที่แล้ว +1

      Обводка это вектор, у вектора не портиться качество

  • @shadowbuya1267
    @shadowbuya1267 4 ปีที่แล้ว +1

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

  • @kseniia7218
    @kseniia7218 4 ปีที่แล้ว +1

    Спасибо, Софья! Было очень полезно) а почему вы пользуетесь ФШ 19 года? Вам он больше нравится чем 20 го года?

  • @РусланСубботин-ш1м
    @РусланСубботин-ш1м 4 ปีที่แล้ว

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

  • @s.angelina5926
    @s.angelina5926 4 ปีที่แล้ว +2

    Видео полезно, просмотрела всё до конца)) СПАСИБО)

  • @khakimweb-1270
    @khakimweb-1270 4 ปีที่แล้ว +1

    Спасибо за поучительное видео, Софья. Очень много полезного и интересного:)

  • @nikitakrivosheev8458
    @nikitakrivosheev8458 3 หลายเดือนก่อน

    Вопрос об иконках размером 40x40 пикселей. Такой размер может выглядеть хорошо на современных смартфонах с экранами шириной до 400 пикселей. Но как быть с шириной 320 пикселей? Я попробовал разместить по бокам две иконки, и они оказались слишком большими. Дизайн-система должна быть одинаковой для ширины от 320 до 400 пикселей. Как в таком случае поступить?

    • @SofyaFilippova
      @SofyaFilippova  3 หลายเดือนก่อน +1

      Разрешение в 320 уже создается гораздо реже, посмотри более актуальные видео. Минимальный размер 40 на 40 - это рекомендация, чтобы пользователям было удобно, если сделать меньше, то есть шанс, что человек промахнется

  • @ВикторияБеляева-ю6й
    @ВикторияБеляева-ю6й 3 ปีที่แล้ว

    Спасибо! Было очень полезно! Возможно у вас уже спрашивали, но рискну. Почему фш, не фигма ?

  • @ilnazg3721
    @ilnazg3721 4 ปีที่แล้ว +2

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

    • @SofyaFilippova
      @SofyaFilippova  4 ปีที่แล้ว

      th-cam.com/video/19pvs4YGaZQ/w-d-xo.html

  • @seoonlyRU
    @seoonlyRU 2 ปีที่แล้ว +1

    лукас от СЕООНЛИ

  • @olegatory
    @olegatory 4 ปีที่แล้ว

    спасибо.
    Вы и UX дизайнер или только UI?
    320 ширина для мобилы? а на какую это? Сегодня, вроде , для андроида 360 и для иос 375.
    Или 320 для очень старых экранов?

  • @АннаКалинина-у6д
    @АннаКалинина-у6д 4 ปีที่แล้ว

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

  • @ЕвгенияГронь-о9ю
    @ЕвгенияГронь-о9ю 4 ปีที่แล้ว

    Ребята и Софья, не могу найти настройку в фотошопе, при которой при нажатии на объект(группу) появляются рамки как у свободной трансформации, как в ролике. Подскажите пожалуйста)

  • @elenvernieded4979
    @elenvernieded4979 4 ปีที่แล้ว +2

    Здорово, полезный контент!

  • @nikitazakharov3030
    @nikitazakharov3030 4 ปีที่แล้ว

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

  • @vikeaal2680
    @vikeaal2680 4 ปีที่แล้ว +1

    Спасибо. Хочу к тебе в школу.❤️

  • @romana594
    @romana594 4 ปีที่แล้ว

    Лайк за подачу материала )

  • @ЕвгенияКалайтанова-г3б
    @ЕвгенияКалайтанова-г3б 4 ปีที่แล้ว

    Спасибо
    Было очень интересно!

  • @Didisisyfu
    @Didisisyfu 4 ปีที่แล้ว +3

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

  • @Lily222-k7w
    @Lily222-k7w 4 ปีที่แล้ว

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

  • @xizzy8534
    @xizzy8534 4 ปีที่แล้ว +2

    Софья, привет☺️ Мне интересно, можно ли пройти курс и работать веб-дизайнером, если мне пока нет 18? (понятно что не полноценно, так как я ещё учусь, но как бы развивать навык что ли)

    • @vladchernov8861
      @vladchernov8861 4 ปีที่แล้ว

      Тоже интересно узнать, могу ли я устроиться в офис хотя-бы удаленно в 16 лет при наличии портфолио и навыков UX/UI дизайна?

  • @КсенияПодымова
    @КсенияПодымова 4 ปีที่แล้ว +1

    Спасибо, сейчас очень актуально 😊

    • @SofyaFilippova
      @SofyaFilippova  4 ปีที่แล้ว +1

      Специально пыталась побыстрее выложить, пока у вас дедлайн на курсе не наступил 😌

  • @ezria227
    @ezria227 4 ปีที่แล้ว

    А что такой брейкпоинт?

  • @Didisisyfu
    @Didisisyfu 4 ปีที่แล้ว

    А какой шрифт заголовка и надписи "дизайн хом"?

  • @АртурПожарский
    @АртурПожарский 4 ปีที่แล้ว

    Cпасибо за полезный урок)

  • @Марина-к3ж
    @Марина-к3ж 4 ปีที่แล้ว +1

    Очень интересно, спасибо!

  • @ВладимирБойков-л8н
    @ВладимирБойков-л8н 4 ปีที่แล้ว

    Отличный видос! Спасибо!

  • @CherryTat88
    @CherryTat88 4 ปีที่แล้ว

    Спасибо, очень полезная информация. Всё понятно👍

  • @alicemoon547
    @alicemoon547 4 ปีที่แล้ว

    Спасибо за видео 🥰

  • @ЕленаОстапенко-э2ъ
    @ЕленаОстапенко-э2ъ 4 ปีที่แล้ว +1

    Спасибо за видео) Почему фотошоп? В фигме удобнее и быстрее всё это дело делается.

  • @SvetlanaKolomoets
    @SvetlanaKolomoets 4 ปีที่แล้ว +2

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

  • @ГалинаГудимова-э2щ
    @ГалинаГудимова-э2щ 4 ปีที่แล้ว

    мне стало многое понятно. Спасибо!

  • @ed7050
    @ed7050 4 ปีที่แล้ว

    Очень помогло, спасибо большое)

  • @MrGSSG
    @MrGSSG 3 ปีที่แล้ว

    Спасибо София

  • @marknewcombe4192
    @marknewcombe4192 4 ปีที่แล้ว

    но вот вышел планшет новый у Епл, где разрешение 820 на 1140 вроде)

  • @likegolty2640
    @likegolty2640 4 ปีที่แล้ว

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

  • @DereckRocker
    @DereckRocker 4 ปีที่แล้ว

    Спасибо за видео! Несовсем понял для чего делать 1600 адаптив? Я обычно делаю по сетке 1170 и адаптив по убывающей, стандарты это 768 и 320, но еще обычно 2-3 промежуточных разрешения имеются. А вот про 1600 не слышал даже.

    • @SofyaFilippova
      @SofyaFilippova  4 ปีที่แล้ว +3

      В 1170 большие поля слева и справа, чтобы их не было и дизайн смотрелся выигрышней на 1920, создают версию на 1600

    • @gostovsky
      @gostovsky 4 ปีที่แล้ว +4

      @@SofyaFilippova Зачем тогда версия 1170? В видео говорится что 1170 для пк и 1600 тоже для пк. У новичка может возникнуть в этом моменте непонимание, зачем тогда вообще 1170. Уточняю, 1170 это универсальное разрешение, оно подойдет как для ноутбуков с разрешением 1280, 1366, 1920, так и для обычных широкоформатных мониторов 1920, т.к сайт с контейнером 1170 будет корректно смотреться на пк и ноутбуках (древние разрешения и квадратные мониторы в расчет не берем, для них, при необходимости, делаем промежуточные макеты). Конда заказчик спрашивает как мне сэкономить на адаптиве, просто рекомендуем ему универсальный контейнер 1170. Если надо чтобы сайт был более пропорционален на широком экране и смотрелся "красивее" предлагаем 1740, 1600, 1520, 1480 вариантом на самом деле много, зависит от сайта и задач.

    • @SofyaFilippova
      @SofyaFilippova  4 ปีที่แล้ว

      Это все я рассказываю в видео про сетки, а его надо смотреть до просмотра этого видео

    • @АндрейБудкин-ф5щ
      @АндрейБудкин-ф5щ 4 ปีที่แล้ว

      @@gostovsky Так и ответили же. На ноутбуках ты будешь видеть дизайн по сетке 1170, а если сидишь с широкоформатного монитора, то делаешь 1600 и тогда у тебя будут не такие большие поля слева и справа. Как я понял. Если что поправьте

  • @ilyaarakchiev
    @ilyaarakchiev 4 ปีที่แล้ว +1

    Отличное видео. Спаасибо.

  • @didroi74
    @didroi74 4 ปีที่แล้ว

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

  • @shiningkitten-o8v
    @shiningkitten-o8v 4 ปีที่แล้ว

    Скажите, а обязательно ли вообще использование сетки?

    • @SofyaFilippova
      @SofyaFilippova  4 ปีที่แล้ว +3

      Если вы супер профессионал с многолетним опытом и видите направляющие без сетки, то можно без неё. Со 100% вероятностью могу вас заверить, что дизайн с сеткой выглядит удачнее, так как композиция становится правильней

    • @shiningkitten-o8v
      @shiningkitten-o8v 4 ปีที่แล้ว

      Sofya Filippova спасибо ❤️

  • @ciberpink5979
    @ciberpink5979 4 ปีที่แล้ว

    Спасибо, видео понравилось!

  • @nadezhdazav
    @nadezhdazav 4 ปีที่แล้ว

    Спасибо, очень познавательно

  • @alexfry1107
    @alexfry1107 4 ปีที่แล้ว +1

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

  • @alexeyryleev2543
    @alexeyryleev2543 4 ปีที่แล้ว

    Софья, спасибо большое

  • @ЛёликБолик-б9я
    @ЛёликБолик-б9я 3 ปีที่แล้ว

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

  • @asakura_art
    @asakura_art 4 ปีที่แล้ว +1

    Спасибо ❤️

  • @ЮлияБаркова-ф5м
    @ЮлияБаркова-ф5м 4 ปีที่แล้ว

    Спасииииибо !)

  • @denny_salmone
    @denny_salmone 2 ปีที่แล้ว

    спасибо! :^)

  • @MirotVorec-jb2cn
    @MirotVorec-jb2cn 4 ปีที่แล้ว +14

    Мда... Делать сайт в Фотошопе 2020 году...

    • @SofyaFilippova
      @SofyaFilippova  4 ปีที่แล้ว +9

      Господи, да когда же это кончится.. Видео не об этом

  • @BaRS-Art81
    @BaRS-Art81 4 ปีที่แล้ว +1

    Странно, на главной странице написано " Интернет магазин". Почему тогда возле корзины не написано "Корзина", возле кнопки " Кнопка" и т.д. Будто клиент заходя на сайт интернет магазина не понимает, что это интернет магазин.

  • @TheBorninmotion
    @TheBorninmotion 3 ปีที่แล้ว

    mobile < 600 , tablet < 800 , desktop < 1200

  • @МнеНеПодходит
    @МнеНеПодходит 4 ปีที่แล้ว

    Почему адаптивный, а не responsive? У него сейчас много преимуществ и возможностей

  • @olhahuzak8252
    @olhahuzak8252 3 ปีที่แล้ว

    ДЯКУЮ
    ХОРОША ІНФА

  • @alleshasongtarot6
    @alleshasongtarot6 4 ปีที่แล้ว

    Кто подскажет название шрифта? - Эксклюзивная мебель для дома?

  • @bbbhhhrrr1566
    @bbbhhhrrr1566 4 ปีที่แล้ว

    Спасибо !!!

  • @KvikiShorts
    @KvikiShorts 4 ปีที่แล้ว

    спасибо

  • @MaksWail
    @MaksWail 2 ปีที่แล้ว

    Посмотрел сайт, да сделано прикольно, красиво, НО, блин, как же я не понимаю таких "специалистов", которые делают сайт на тильде, и дают курс про веб дизайн. Вы хоть потрудитесь сделать свой веб сайт. Это же равносильно как быть системным администратором, иметь корочки, и теорию без практики. Просто когда код пишешь, там хоть понятно что человек реально это знает, а не просто читает инфу у других. К слову, сам, веб дизайнер, системный администратор, начинающий специалист по ИБ. Не хочу обижать ни кого, просто создается ощущение, что у таких людей, ток теория, без практики.

    • @SofyaFilippova
      @SofyaFilippova  2 ปีที่แล้ว

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

    • @MaksWail
      @MaksWail 2 ปีที่แล้ว

      @@SofyaFilippova понял, тогда это называется графический дизайн, а не веб дизайн

    • @SofyaFilippova
      @SofyaFilippova  2 ปีที่แล้ว

      Графические дизайнеры к сайтам никакого отношения не имеют. Они занимаются брендингом, полиграфией.

    • @MaksWail
      @MaksWail 2 ปีที่แล้ว

      @@SofyaFilippova верно, просто в названии было веб, а не граф дизайн. Веб дизайн сразу предполагает что будет делаться верстка

    • @SofyaFilippova
      @SofyaFilippova  2 ปีที่แล้ว

      Я преподаю дизайн сайтов, не дизайн полиграфии или брендинг. Я не обучаю графическому дизайну, почему он должен быть в названии? Вы можете иметь любое мнение о том, как называется профессия, но есть отдельная профессия верстальщик/frontend-разработчик, которые дизайн сайтов не делают, а занимаются версткой, а есть веб-дизайнер (ключевое слово дизайнеры, а веб, говорит о том, в какой среде они дизайнеры), которые делают дизайн сайтов, но не имеют никакого отношения к коду.

  • @elisabethkobrina
    @elisabethkobrina 8 หลายเดือนก่อน

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

  • @elenadolzhikova299
    @elenadolzhikova299 3 ปีที่แล้ว

    Спасибо. Было полезно.

  • @romana594
    @romana594 4 ปีที่แล้ว

    Лайк за подачу материала )

  • @yuliapolshikova
    @yuliapolshikova 4 ปีที่แล้ว

    Большое спасибо за видео!

  • @zoiisham3552
    @zoiisham3552 4 ปีที่แล้ว

    Большое спасибо 🙏🏻

  • @sashagaev
    @sashagaev 3 ปีที่แล้ว

    спасибо )

  • @ekaterinavereschaka7957
    @ekaterinavereschaka7957 4 ปีที่แล้ว

    Спасибо!

  • @artiomkargapolov
    @artiomkargapolov 4 ปีที่แล้ว

    Спасибо, очень информативно и интересно

  • @александрмешечкин-н2ъ
    @александрмешечкин-н2ъ 4 ปีที่แล้ว

    спасибо

  • @РаботаАлина-и9л
    @РаботаАлина-и9л 2 ปีที่แล้ว

    спасибо)

  • @alda5737
    @alda5737 4 ปีที่แล้ว

    Спасибо 🌺

  • @natashabondarenko1176
    @natashabondarenko1176 4 ปีที่แล้ว

    Спасибо)

  • @artemgreegoryan1743
    @artemgreegoryan1743 4 ปีที่แล้ว

    Спасибо

  • @ifksubyf2033
    @ifksubyf2033 4 ปีที่แล้ว

    Спасибо!

  • @Ekateryna-f1g
    @Ekateryna-f1g 4 ปีที่แล้ว

    Спасибо

  • @ОльгаБелянинова-ц3д
    @ОльгаБелянинова-ц3д 4 ปีที่แล้ว

    Спасибо!

  • @СвітланаСлупачик-к6р
    @СвітланаСлупачик-к6р 4 ปีที่แล้ว

    Спасибо

  • @ВалерияКаращук-д8у
    @ВалерияКаращук-д8у 3 ปีที่แล้ว

    Спасибо.)

  • @КэтринРоманова-н6ь
    @КэтринРоманова-н6ь 4 ปีที่แล้ว

    Спасибо

  • @nutalight6892
    @nutalight6892 4 ปีที่แล้ว

    Спасибо 😊

  • @ФинаМиляева
    @ФинаМиляева 4 ปีที่แล้ว

    Спасибо!

  • @danilavrin8361
    @danilavrin8361 4 ปีที่แล้ว

    спасибо

  • @mariiakozina1840
    @mariiakozina1840 3 ปีที่แล้ว

    спасибо

  • @yuliiaherasymova7723
    @yuliiaherasymova7723 3 ปีที่แล้ว

    Спасибо!

  • @marisami7858
    @marisami7858 3 ปีที่แล้ว +1

    Спасибо

  • @exploringtheworld8780
    @exploringtheworld8780 3 ปีที่แล้ว +1

    Спасибо!

  • @nataliiashestakova2404
    @nataliiashestakova2404 3 ปีที่แล้ว

    спасибо

  • @ekaterynakabuzenko2457
    @ekaterynakabuzenko2457 3 ปีที่แล้ว

    Спасибо!

  • @Valeria42900
    @Valeria42900 ปีที่แล้ว

    Спасибо

  • @Несмешнонесмеемся
    @Несмешнонесмеемся ปีที่แล้ว

    спасибо

  • @ОльгаГончаренко-ш1ж
    @ОльгаГончаренко-ш1ж 2 ปีที่แล้ว

    Спасибо
    🎉