АДАПТИВНЫЙ ДИЗАЙН САЙТА | Мобильная версия, другие разрешения
HTML-код
- Опубликовано: 17 окт 2024
- Видео о сетках - • МОДУЛЬНЫЕ СЕТКИ В ВЕБ-...
💎 Курс "UX/UI-Дизайн" - uxui.filschool.ru
◾ Базовый курс по веб-дизайну "Основы дизайноведения" - base.filschool.ru/
◾ Полноценный курс по веб-дизайну "Дизайноведение" - filschool.ru/
◾ Ведение рабочих профилей в Instagram "Инставедение" - insta.filschool...
◾ Менторство - drive.google.c...
◾ Магазин футболок для фрилансеров - filippovashop.ru
Самые полезные видео на канале:
Кто такой веб-дизайнер - • ЧЕМ ЗАНИМАЕТСЯ ВЕБ-ДИЗ...
Сколько зарабатывает веб-дизайнер - • СКОЛЬКО ЗАРАБАТЫВАЕТ В...
Навыки веб-дизайнера - • НАВЫКИ ВЕБ-ДИЗАЙНЕРА /...
Как стать веб-дизайнером - • Как стать веб-дизайнер...
Где учиться на веб-дизайнера - • ГДЕ УЧИТЬСЯ НА ВЕБ-ДИЗ...
Плюсы и минусы профессии - • ПЛЮСЫ И МИНУСЫ ПРОФЕСС...
Какой ноутбук выбрать - • Как выбрать ноутбук дл...
Этапы рабочего процесса - • ЭТАПЫ РАБОЧЕГО ПРОЦЕСС...
Кто такие UX/UI дизайнеры - • КТО ТАКИЕ UX/UI ДИЗАЙН...
Ошибки начинающих - • 🚫 ОШИБКИ НАЧИНАЮЩИХ ВЕ... , • 🚫 ОШИБКИ НАЧИНАЮЩИХ ВЕ...
Стили в веб-дизайне - • 🎨СТИЛИ В ВЕБ-ДИЗАЙНЕ
Сетки в веб-дизайне - • МОДУЛЬНЫЕ СЕТКИ В ВЕБ-...
Адаптивный дизайн сайта - • АДАПТИВНЫЙ ДИЗАЙН САЙТ...
Дизайн сайта в Figma - • ДИЗАЙН САЙТА В FIGMA
Тренды в дизайне на 2021 год - • 8 ТРЕНДОВ UX/UI ДИЗАЙН...
Как сделать портфолио - • 🔥КАК СДЕЛАТЬ ПОРТФОЛИО...
Как рассчитать стоимость дизайна - • КАК РАСЧИТАТЬ СТОИМОСТ...
Как найти первого клиента - • 🔥Как найти первого кли...
Где меня найти:
Instagram: / sofyafilippova
Instagram Filschool: / filschool.ru
Страница Вконтакте: sof_fil...
Сайт веб-студии: filippovadesig...
Портфолио студии: www.behance.ne...
#дизайн #вебдизайнер #софьяфилиппова
Как всегда круто! Лаконично и информативно. Софья, у вас определенно талант объяснять!
Огромное спасибо вам за такие классные и познавательные видео!
Спасибо! Всегда очень полезные видео.
Спасибо, Софья, за полезный контент!
Очень полезная инфа. Спасибо, что наглядно показали весь процесс адаптации дизайна!)
Какой у Вас шикарный задний фон: стол такой функциональный, милейшие кактусы и классная доска для заметок:) Глаз не оторвать))
Спасибо большое за это и за все остальные Ваши видео! Очень информативно, полезно и приятно смотреть!
большое спасибо!!!! Мне очень помогло видео.Всё очень просто и понятно
Очень полезное видео. Всё по полочкам. Спасибо!
Спасибо! Очень полезно!
Спасибо за поучительное видео, Софья. Очень много полезного и интересного:)
Огромное спасибо за очень полезный контент! Вы очень круто объясняете, достойно уважения
Все круто, но дизайн в фотошоп в 2020 году это кощунство!
Очень многие заказчики до сих пор просят PSD-макеты
Если не секрет , с чём связанна такая позиция?
@@irinapilipchuk7479 из фигмы чудесным образом все экспортируется в psd. им не обязательно знать, где и как это делали, если макет корректный)
Порой (а точнее очень часто) - требуется графическая настройка. Свечения/масочки/масочки по перу и тд. В фигме - это сложнее. В фигме нет ластига, в фигме ты прыщик за 2 клика с фотки на 1м блоке не удалишь.
Веб дизайн включает в себя графику - это база. А графика делается в графических редакторах, коим фш и является, в отличие от фигмы.
Я могу тебе скинуть свой 1й блок лендинга и готов денег поставить на то, что его ты в фигме будешь повторять его графику дня 2.
@@divside С другой стороны если потребуется внести правки на всех страницах сайта, у тебя гораздо больше времени это займет в фш, + в фигме много плагинов для текста и верстки, al, привязки, и у многих фотошоп просто слетит, когда у тебя 10 областей на экране. Думаю нужно совмещать инструменты, графическая настройка в фш, а итоговый макет сайта в фигме.
Видео полезно, просмотрела всё до конца)) СПАСИБО)
Спасибо, Софья! Было очень полезно) а почему вы пользуетесь ФШ 19 года? Вам он больше нравится чем 20 го года?
Спасибо, очень полезная информация. Всё понятно👍
Спасибо
Было очень интересно!
спасибо.
Вы и UX дизайнер или только UI?
320 ширина для мобилы? а на какую это? Сегодня, вроде , для андроида 360 и для иос 375.
Или 320 для очень старых экранов?
Cпасибо за полезный урок)
Спасибо за видео, интересно и полезно!
Спасибо! Было очень полезно! Возможно у вас уже спрашивали, но рискну. Почему фш, не фигма ?
Спасибо большое!
София, скажите пожалуйста, а при свободном трансформировании у вас не портится качество обводки плашки?
Обводка это вектор, у вектора не портиться качество
привет,я хотела бы спросить. Возможно ли веб-дизайну обучиться самостоятельно и зарабатывать на этом? А когда подзароботаешь уже купить курс?
Лайк за подачу материала )
Спасибо, сейчас очень актуально 😊
Специально пыталась побыстрее выложить, пока у вас дедлайн на курсе не наступил 😌
Спасибо. Было полезно.
Здравствуйте, очень хочу начать заниматься веб-дизайном, и у меня есть друг который хотел бы быть верстальщиком. Как лучше, работать одному, то бишь и делать дизайн, и верстать, или же лучше это делать вдвоём.
Спасибо. Хочу к тебе в школу.❤️
Здорово, полезный контент!
Отличный видос! Спасибо!
Очень интересно, спасибо!
Большое спасибо за видео!
Вопрос : Обязательно Фотошоп использовать при разработке таких сайтов? Тк при использовании артбордов или вкладок он очень много оперативной памяти кушает. Насколько я знаю в фигме можно все это сделать быстрее с помощью компонентов, да и работает она чуть шустрее.
Спрашиваю тк может в студиях не принято фигму использовать, или ее функционала недостаточно, просто мне она проще показалась )
ruclips.net/video/19pvs4YGaZQ/видео.html
Спасибо!
Жаль только, что это видео я посмотрела уже после того, как пришлось непосредственно иметь дело с верстальщиком без понимания разницы между мобильной и адаптивной версией))
Спасибо София
Спасибо!
Очень помогло, спасибо большое)
Вопрос об иконках размером 40x40 пикселей. Такой размер может выглядеть хорошо на современных смартфонах с экранами шириной до 400 пикселей. Но как быть с шириной 320 пикселей? Я попробовал разместить по бокам две иконки, и они оказались слишком большими. Дизайн-система должна быть одинаковой для ширины от 320 до 400 пикселей. Как в таком случае поступить?
Разрешение в 320 уже создается гораздо реже, посмотри более актуальные видео. Минимальный размер 40 на 40 - это рекомендация, чтобы пользователям было удобно, если сделать меньше, то есть шанс, что человек промахнется
мне стало многое понятно. Спасибо!
Добрый день, подскажите пожалуйста, как в итоге должен выглядеть дизайн, который отдаётся заказчику? Я нигде не видел таких уроков. Все показывают как сделать дизайн, а что делать когда сам дизайн уже сделан
Спасибо
Подскажите пожалуйста, когда я делаю макет шириной в 320 пикселей, все становится в плохом качестве, даже буквы. Как можно решить эту проблему? Не меняю ширину 320
Софья, привет☺️ Мне интересно, можно ли пройти курс и работать веб-дизайнером, если мне пока нет 18? (понятно что не полноценно, так как я ещё учусь, но как бы развивать навык что ли)
Тоже интересно узнать, могу ли я устроиться в офис хотя-бы удаленно в 16 лет при наличии портфолио и навыков UX/UI дизайна?
Большое спасибо 🙏🏻
Ребята и Софья, не могу найти настройку в фотошопе, при которой при нажатии на объект(группу) появляются рамки как у свободной трансформации, как в ролике. Подскажите пожалуйста)
лукас от СЕООНЛИ
а в figma работать не собираетесь ?
Спасибо, видео понравилось!
Спасибо за видео) Почему фотошоп? В фигме удобнее и быстрее всё это дело делается.
Спасибо большое
Отличное видео. Спаасибо.
спасибо)
Софья, спасибо большое
спасибо! :^)
ДЯКУЮ
ХОРОША ІНФА
Спасибо ❤️
Спасииииибо !)
А какой шрифт заголовка и надписи "дизайн хом"?
Спасибо за видео! Несовсем понял для чего делать 1600 адаптив? Я обычно делаю по сетке 1170 и адаптив по убывающей, стандарты это 768 и 320, но еще обычно 2-3 промежуточных разрешения имеются. А вот про 1600 не слышал даже.
В 1170 большие поля слева и справа, чтобы их не было и дизайн смотрелся выигрышней на 1920, создают версию на 1600
@@SofyaFilippova Зачем тогда версия 1170? В видео говорится что 1170 для пк и 1600 тоже для пк. У новичка может возникнуть в этом моменте непонимание, зачем тогда вообще 1170. Уточняю, 1170 это универсальное разрешение, оно подойдет как для ноутбуков с разрешением 1280, 1366, 1920, так и для обычных широкоформатных мониторов 1920, т.к сайт с контейнером 1170 будет корректно смотреться на пк и ноутбуках (древние разрешения и квадратные мониторы в расчет не берем, для них, при необходимости, делаем промежуточные макеты). Конда заказчик спрашивает как мне сэкономить на адаптиве, просто рекомендуем ему универсальный контейнер 1170. Если надо чтобы сайт был более пропорционален на широком экране и смотрелся "красивее" предлагаем 1740, 1600, 1520, 1480 вариантом на самом деле много, зависит от сайта и задач.
Это все я рассказываю в видео про сетки, а его надо смотреть до просмотра этого видео
@@gostovsky Так и ответили же. На ноутбуках ты будешь видеть дизайн по сетке 1170, а если сидишь с широкоформатного монитора, то делаешь 1600 и тогда у тебя будут не такие большие поля слева и справа. Как я понял. Если что поправьте
Скажите, а обязательно ли вообще использование сетки?
Если вы супер профессионал с многолетним опытом и видите направляющие без сетки, то можно без неё. Со 100% вероятностью могу вас заверить, что дизайн с сеткой выглядит удачнее, так как композиция становится правильней
Sofya Filippova спасибо ❤️
mobile < 600 , tablet < 800 , desktop < 1200
после фигмы в фотошопе все это делать так не удобно и долго! куча бесполезных кликов, что бы поменять текст или его цвет, тяжко выделять элементы на артборде, приходится лазить в панель слоев, отсутствие авторазмера у текстовых блоков, отсутвие компонентов, стилей, КОМПОНЕНТОВ самое главное и удобных плагинов, а без автолейаута вообще что то разрабатывать тяжко, ... да все короче неудобно кажется уже, хорошо что фотошоп стремительноо уходит в прошлое как инструмент для сборки макетов для веба и мобильных приложений.
но вот вышел планшет новый у Епл, где разрешение 820 на 1140 вроде)
А что такой брейкпоинт?
Почему адаптивный, а не responsive? У него сейчас много преимуществ и возможностей
Странно, на главной странице написано " Интернет магазин". Почему тогда возле корзины не написано "Корзина", возле кнопки " Кнопка" и т.д. Будто клиент заходя на сайт интернет магазина не понимает, что это интернет магазин.
Кто подскажет название шрифта? - Эксклюзивная мебель для дома?
Посмотрел сайт, да сделано прикольно, красиво, НО, блин, как же я не понимаю таких "специалистов", которые делают сайт на тильде, и дают курс про веб дизайн. Вы хоть потрудитесь сделать свой веб сайт. Это же равносильно как быть системным администратором, иметь корочки, и теорию без практики. Просто когда код пишешь, там хоть понятно что человек реально это знает, а не просто читает инфу у других. К слову, сам, веб дизайнер, системный администратор, начинающий специалист по ИБ. Не хочу обижать ни кого, просто создается ощущение, что у таких людей, ток теория, без практики.
Я не преподаю вёрстку сайтов! Сайты сделаны на тильде, так как нам надо иметь общую систему управления всеми сайтами и быстро их обновлять. Раньше нам приходилось ждать, когда освободится верстальщик, чтобы внести правки.
@@SofyaFilippova понял, тогда это называется графический дизайн, а не веб дизайн
Графические дизайнеры к сайтам никакого отношения не имеют. Они занимаются брендингом, полиграфией.
@@SofyaFilippova верно, просто в названии было веб, а не граф дизайн. Веб дизайн сразу предполагает что будет делаться верстка
Я преподаю дизайн сайтов, не дизайн полиграфии или брендинг. Я не обучаю графическому дизайну, почему он должен быть в названии? Вы можете иметь любое мнение о том, как называется профессия, но есть отдельная профессия верстальщик/frontend-разработчик, которые дизайн сайтов не делают, а занимаются версткой, а есть веб-дизайнер (ключевое слово дизайнеры, а веб, говорит о том, в какой среде они дизайнеры), которые делают дизайн сайтов, но не имеют никакого отношения к коду.
Мда... Делать сайт в Фотошопе 2020 году...
Господи, да когда же это кончится.. Видео не об этом
Лайк за подачу материала )
Спасибо!
Спасибо за видео 🥰
Спасибо большое!
Спасибо, большое)
Спасибо, очень познавательно
спасибо )
Спасибо
Спасибо 🌺
Спасибо, очень информативно и интересно
Спасибо
🎉
Спасибо!
Спасибо)
Спасибо)
Спасибо)
Спасибо!
Спасибо 😊
Спасибо!
Спасибо.)
Спасибо!
спасибо
спасибо
спасибо
спасибо
Спасибо)
Спасибо
Спасибо!
Спасибо !!!
Спасибо
Спасибо