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

Подписаться 110 тыс.

Просмотров 26 тыс.

50% 1

Видео о сетках - • МОДУЛЬНЫЕ СЕТКИ В ВЕБ-...

💎 Курс "UX/UI-Дизайн" - uxui.filschool.ru
◾ Базовый курс по веб-дизайну "Основы дизайноведения" - base.filschool.ru/
◾ Полноценный курс по веб-дизайну "Дизайноведение" - filschool.ru/
◾ Ведение рабочих профилей в Instagram "Инставедение" - insta.filschool.ru/
◾ Менторство - drive.google.com/file/d/13GcE...
◾ Магазин футболок для фрилансеров - filippovashop.ru
Самые полезные видео на канале:
Кто такой веб-дизайнер - • ЧЕМ ЗАНИМАЕТСЯ ВЕБ-ДИЗ...
Сколько зарабатывает веб-дизайнер - • СКОЛЬКО ЗАРАБАТЫВАЕТ В...
Навыки веб-дизайнера - • НАВЫКИ ВЕБ-ДИЗАЙНЕРА /...
Как стать веб-дизайнером - • Как стать веб-дизайнер...
Где учиться на веб-дизайнера - • ГДЕ УЧИТЬСЯ НА ВЕБ-ДИЗ...
Плюсы и минусы профессии - • ПЛЮСЫ И МИНУСЫ ПРОФЕСС...
Какой ноутбук выбрать - • Как выбрать ноутбук дл...
Этапы рабочего процесса - • ЭТАПЫ РАБОЧЕГО ПРОЦЕСС...
Кто такие UX/UI дизайнеры - • КТО ТАКИЕ UX/UI ДИЗАЙН...
Ошибки начинающих - • 🚫 ОШИБКИ НАЧИНАЮЩИХ ВЕ... , • 🚫 ОШИБКИ НАЧИНАЮЩИХ ВЕ...
Стили в веб-дизайне - • 🎨СТИЛИ В ВЕБ-ДИЗАЙНЕ
Сетки в веб-дизайне - • МОДУЛЬНЫЕ СЕТКИ В ВЕБ-...
Адаптивный дизайн сайта - • АДАПТИВНЫЙ ДИЗАЙН САЙТ...
Дизайн сайта в Figma - • ДИЗАЙН САЙТА В FIGMA
Тренды в дизайне на 2021 год - • 8 ТРЕНДОВ UX/UI ДИЗАЙН...
Как сделать портфолио - • 🔥КАК СДЕЛАТЬ ПОРТФОЛИО...
Как рассчитать стоимость дизайна - • КАК РАСЧИТАТЬ СТОИМОСТ...
Как найти первого клиента - • 🔥Как найти первого кли...
Где меня найти:
Instagram: / sofyafilippova
Instagram Filschool: / filschool.ru
Страница Вконтакте: sof_filippova
Сайт веб-студии: filippovadesign.ru
Портфолио студии: www.behance.net/filippovadesign
#дизайн #вебдизайнер #софьяфилиппова

Опубликовано:

9 май 2020

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 123

@oglk9338 3 года назад

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

@irinapilipchuk7479 3 года назад

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

@nazarznak7645 3 года назад

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

@daryak5504 2 года назад

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

@divside 2 года назад

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

@dmitriykotov2513 Год назад

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

@bhaktiforsouls 4 года назад

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

@irinapilipchuk7479 4 года назад

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

@lisovushka.stitches 4 года назад

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

@kristinapetrova3038 3 года назад

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

@khakimweb-1270 4 года назад

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

@user-mv8so2ku6f 4 года назад

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

@yulliael 3 года назад

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

@user-bf2qs4fm3u 3 года назад

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

@polya4ka 4 года назад

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

@s.angelina5926 4 года назад

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

@Anna_Pivanova Год назад

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

@user-wc5ij9mg2c 4 года назад

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

@kseniia7218 4 года назад

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

@CherryTat88 4 года назад

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

@elenvernieded4979 4 года назад

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

@user-do3su7rz6k 4 года назад

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

@user-bu7wu5xx6s 3 года назад

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

@user-oy6zs4hy6v 4 года назад

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

@SofyaFilippova 4 года назад

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

@romana594 4 года назад

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

@user-wm5ds1cr6z 4 года назад

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

@xizzy8534 4 года назад

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

@vladchernov8861 4 года назад

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

@arinmazing5880 2 года назад

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

@ed7050 3 года назад

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

@user-ow9uv4id5j 4 года назад

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

@shadowbuya1267 4 года назад

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

@yuliapolshikova 3 года назад

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

@user-rs6sn2ie4t 3 года назад

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

@user-yy8lh9xq3q 2 года назад

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

@ciberpink5979 4 года назад

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

@user-hk5dk3zc9d 3 года назад

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

@alicemoon547 3 года назад

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

@andorsdesign 4 года назад

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

@SofyaFilippova 4 года назад

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

@olegatory 3 года назад

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

@ilyaarakchiev 4 года назад

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

@user-ly7lc6dj4b 4 года назад

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

@nikitazakharov3030 3 года назад

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

@vikeaal2680 3 года назад

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

@user-bd3cm3fp7n 4 года назад

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

@ilnazg3721 4 года назад

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

@SofyaFilippova 4 года назад

ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-19pvs4YGaZQ.html

@irina-web1310 Год назад

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

@elenadolzhikova299 2 года назад

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

@user-wc5ij9mg2c 4 года назад

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

@zoiisham3552 3 года назад

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

@user-so2yw7ee9b 4 года назад

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

@ppolyshkka 4 года назад

Спасибо ❤️

@user-cl8rr9dk5u 4 года назад

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

@alexmax8977 4 года назад

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

@didroi74 3 года назад

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

@user-py5jo8ss5j 3 года назад

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

@alexeyryleev2543 4 года назад

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

@likegolty2640 3 года назад

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

@DereckRocker 4 года назад

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

@SofyaFilippova 4 года назад

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

@gostovsky 4 года назад

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

@SofyaFilippova 4 года назад

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

@user-ks7vk3ip6i 4 года назад

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

@alda5737 4 года назад

Спасибо 🌺

@ekaterinavereschaka7957 4 года назад

Спасибо!

@bbbhhhrrr1566 4 года назад

Спасибо !!!

@nutalight6892 3 года назад

Спасибо 😊

@user-ny1ph7ls3v 3 года назад

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

@user-by5hi4wt5p 3 года назад

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

@natashabondarenko1176 4 года назад

Спасибо)

@FrancisBaconis 2 года назад

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

@user-vw9pu1mc6h Год назад

Спасибо 🎉

@ezria227 4 года назад

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

@sashagaev 3 года назад

спасибо )

@user-yc5zm6rf1h 3 года назад

Спасибо.)

@marknewcombe4192 3 года назад

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

@artemgreegoryan1743 4 года назад

Спасибо

@denny_salmone 2 года назад

спасибо! :^)

@user-ti2im7bo9q 4 года назад

спасибо

@user-bq3vt3xh7c 4 года назад

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

@SofyaFilippova 4 года назад

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

@user-bq3vt3xh7c 4 года назад

Sofya Filippova спасибо ❤️

@seoonlyRU 2 года назад

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

@alexfry1107 3 года назад

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

@olhahuzak8252 2 года назад

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

@TheBorninmotion 3 года назад

mobile < 600 , tablet < 800 , desktop < 1200

@user-ze8xx5yn6h 4 года назад

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

@alleshasong909 3 года назад

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

@user-ki4hd9jh8o 4 года назад

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

@MirotVorec-jb2cn 4 года назад

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

@SofyaFilippova 4 года назад

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

@MaksWail Год назад

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

@SofyaFilippova Год назад

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

@MaksWail Год назад

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

@SofyaFilippova Год назад

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

@MaksWail Год назад

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

@SofyaFilippova Год назад

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

@romana594 4 года назад

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