10 Секретов WOW-Эффекта В Дизайне Сайта
ฝัง
- เผยแพร่เมื่อ 22 ก.ย. 2024
- Цель дизайна сайта в 2017 - удивить. Мы расскажем о 10-ти не тривиальных приемах создания WOW-эффекта при работе над дизайном очередного сайта для вашего портфолио. Незаменимый мастер-класс для каждого сознательного веб-дизайнера
wayup.in/libra...
Конспект, или как посмотреть это видео за 2 минуты:
1) текст за каким-то объектом - 22:16
2) переход сверху "бесконечное небо" 25:32-25:50 +переход снизу 27:50-28:20
3) рисуем фигурки в 3д(фейк) 34:34 34:45 + тень 36:06
4-6) ??? карточки ??? градиенты ???
7) за-blur-ить все, что не является объкетом внимания в картинке (tilt-shift для фоновых фото) 58:38
8) плавные линии, т.е. скругленные края прямоугольника + разные углы 1:04:00
9) свет и тень, глубина 1:13:18 СВЕЧЕНИЕ 1:14:27
10) ???
Лучший коммент за всё время!
спасибо!
А что в пункте 10?
синий цвет
Спасибо тебе, добрый человек. Для таких как ты в раю должно быть отдельное место)))
Как всегда здорово и с открытой философией, что я считаю очень важна для самореализации)
Все кто пишут что умеют - молодцы ) но нужно не только уметь нарисовать кубик 3дешный или градиентик забабахать , а понять где и как его использовать , в какие местах это будет уместно!
Спасибо за видео - вы лучик света по веб-дизайну на ютубе и не только!
Меня прямо таки вштырило с этого видео и с эффектов которые показаны в нём
а где можно увидеть ваше портфолио?
Очень полезный урок,огромное спасибо за ваш труд.
Спасибо, как всегда интересно и познавательно!
Круто! Молодец, что делаешь такие видео. Мне было приятно узнать что-то новое для себя! Надеюсь, что будет возможность лично встретиться за чашкой кофе, где-нибудь на островах ;-)
За один только Tilt-Shift можно лайк поставить) Не говоря уже об остальных 9 пунктах.
Наткнулся на видео абсолютно случайно. Реакция на каждый новый эффект изменялась от "мда, и что это" до "WOW". Здорово, очень здорово. Воодушевило.
Для просмотра шрифтов хорошо использовать менеджеры шрифтов. Например, nexusfont. Бесплатный, можно задать нужный текст, который будет написан в предпросмотре в списке шрифтов. Можно даже просматривать еще не установленные (спираченные или купленные) шрифты.
Относительно давно занимаюсь веб дизайном, и видео - просто огонь!
Золотые слова: 8:25 "Если ты понимаешь куда ты идешь, то рано или поздно ты к этому придешь. Но если ты не понимаешь, то ты к этому никогда не придешь!!!"
Красавчик! Я новичок в веб-дизайну, но буду стараться дойти до твоего уровня, может и выше)
Спасибо большое, очень полезный контент!
Спасибо, Андрей. Интересные фишки, буду использовать!
Отличный урок, спасибо!)
Это Шедеврально!!! Респект!
Отличноеееееееее занятие!!!
Спасибо огромное за урок
Спасибо, отличные уроки👍
Вау! Чувак! Да ты крут! Спасибо тебе. Ты мне просто всё расставил по местам с этим грёбаным минимализмом. Вот таким я и запиздячу себе второй сайт!
Это ваше первое видео для меня , просто лайк + подписка!
Спасибо Вам за такие видео!
Очень ценно и полезно даже для тех, кто давно занимается web-дизайном.
Не спорю, для дизайна видео хорошие, но они не годятся для реальных сайтов. Я делаю сайт (хреновый, но сайт), и понимаю, что человек не знаком с веб-разработкой. Особенно это показали слова "не думайте о вёрстке, она вторичная". Его "картинки" нельзя наполнить кодом.
Дяденька :D Где ты был лет 10 назад ,когда я это моим проффесорам объяснял :D Старо, как мир ))
Спасибо за видео! Ооочень помогло!!!
Вдохновительно)
Спасибо огромное тебе )
Чувак, открою секрет: tilst-shift делается стандартным плагином фш.
Ну я переход не узнал, что это Instagram, т.к. никогда не пользовался instagramом
Тема явно сперта с какой-то статьи, глубоких знаний у парня нет. Но за старания лайк. В общем не самое плохое видео в ютубе. Посмотрел с удовольствием.
Спасибо, интересная инфа
Отличный урок. Андрей, спасибо! Особенно понравились 1, 3, 6 фишки
Опа, теперь я знаю как проведу остаток дня
Прямо очень познавательно!
Это гениально! Я вдохновился! Большое спасибо!
Любители критики - запишите лучше, гоу! вместо того, чтобы строчить свои комменты)
Ютуб зачем?
То о чем ты рассказываешь, называется "ДРИБЛОДРОЧЕРСТВО"
Когда ты открываешь драйбл и смотришь, откуда бы тебе стащить что-то, находишь проэкт (который сделали для портфолио, чтобы заманить клиента, этот проект никогда в работу не шел) и начинаешь копировать все. На выходе, необдуманная красивая картинка, ты рад, заказчик рад.
Но когда дело дойдет до разработки, ты сольешься, а заказчик остается у разбитого корыта с твоим "чудДизайно". Со шрифтом гельветика, комик санс и чудо макетом под 1900w.
А респонсив придумает верстальщик. А твои напутствия будут:
"Уменьшай пропорционально, брат..." и пох что на 1200w шрифт будет 6px.
В итоге:
Заказчик попадает на доп скрины, от другого дизайнера.
На оверпрайс верстку.
На сорванный дедлайн.
Давай продолжай учить людей дерьму...
"...Когда рисуете дизайн, не думайте про верстку, она вторична...."
Dima Koriagin 1900w это ты имеешь введу width?
ага
Dima Koriagin слушай можем пообщаться по этому поводу?В целом кажеться что смысл есть в твоих словах.Типо если в макете 1920на1280 h1 70px и у верстальщика например монитор 1366на720 то если в стилях он пропишет фонт сайз 70px то будет не совсем пиксель перфект . Ты об этом? просто в дискусии рождаеться истина хочеться больше узнать что ты имел введу.
"...Когда рисуете дизайн, не думайте про верстку, она вторична...." такая фраза правда прозвучала? решил у тебя сперва уточнить, если да, то видео сразу шлак
Крутой чел,спасибо бро)
Буквы дугой вплелись в фон...это вау-эффект для верстальщика 👍🏻
Можно же картинкой сохранить
Спасибо Красавчик!)
мне понравилась композиция фигур )
Как верстается 1-й эффект. Где можно посмотреть???
Много лишнего пи дежа.
Спасибо что подсказал что делать когда звук в наушниках громкий! Я раньше отсаживался по дальше.
Андрей, ты гений!!!
Супер
А разве шарик на сайте fluent microsoft не в 3D сделан?
Конечно 3D, но автор не умеет :)
здравствуйте!
я верстальщик. северсталь один сайт и с помощью google chrome toogle device toolbar сверстал адаптивы. вроде все хорошо. но когда загрузил на хостинг и посмотрел на смартфоне(samsung galaxy s7 edge) адаптив не работал. я пробовал с другими браузерами и все нормально работала нона мобильный google chrome не работают медиа(открывается так как на компьютере). помогите пожалуйста не могу решить проблему
Все такие язвительные в комментариях..) Я к примеру только в начале своего пути и любая информация для меня крайне важна
По моему Material Design это где тени , текстуры и т.д. А в flat design это чистые и простые изображении?
Флат это вообще строго. Нет теней, закруглений, градиента. Сильный такой минимализм без засечек и квадратов Малевича. Минимум деталей. И с цветами всё по минимому.
Тут столько экспертов веб-дизайнеров собралось .что просто пиздец, однако нормальных сайтов на рунете по пальцам пересчитать. Куда ж вы свой талант тратите , дизинеры ? Или только красиво по клаве текст набирать можете? Мамкины комментаторы)
+Денис Худояров,
Работают с западными и восточными клиентами?
А вот пересчитай если не спиздел (0= Хватает годноты и талантливых дизайнеров, но вот из-за таких блоггеров они в профессии не задерживаются, одноразовые дизайнеры пока на работу не устроятся в магазин носки продавать.
денис согласен с тобой полностью, проффессора собрались тут, даже под твоим комментам есть =)
Где я раньше был, я всё это умею))))
Ссылки, указанные на слайдах:
dKq3dFMCblc
9EyNLzfQGO8
PhFrgFKzeX8
WR1_H8Dw6UY
BDMCDyLitCI
rzzeLJW8dWc - фото
CWYLP0YXL5M
ohJgaHwx9C8
пасибо.
Всегда нужно помнить одну истину: функция определяет стиль, а не стиль функцию! Не знаю ни одного сайта с wow эффектами, который хорошо продавал.
wow-эффект - это не обязательно хитровыебаная тяжелая фигура, это может просто стильное минималистичное оформление. Посмотри первый пример из этого урока (фон+заголовок) - это вообще стандарт лэндинга сейчас. Добавь кнопку-действие и всё.
Прямо крик души =)
Убеждение клиента - часть работы дизайнера или менеджера проекта. Чаще всего заказчик слаще морковки ничего не видел, отсюда и вкус у человека. Опять же очарование эффектами, для заказчика это - волшебство и классно, а дизайнер это делал и видел тысячу раз, его уже тошнит. Тут надо определиться к кому аудитория ближе.
Спасибо, очень хорошие советы для дизайнеров.
Главное тебе не обращать внимания на "ШибкоУмных" дизайнеров.
1:21:10
"функций у фотошопа не так много". лолшто?
не так много функций, нужных для веб-дизайна, чтоб растягивать это на целый курс
да ладно
такое ощущение, что автор прочитал пару уроков по фотошопу, а теперь хаотично показывает элементарные вещи, которые смог запомнить. + ко всему, сразу видно отсутствие опыта работы вместе с верстальщиком.
Посмотрите другие мастер-классы, в том числе по верстке, чтобы делать выводы)
Можно ли с Behance брать изображение для прокта?
Привет,а ты переходы на opencartmasters.com/ просто "что-то обсуждали" по поводу твоего вопроса.
Тыры-пыры-растапыры, что называется, тащемта, например
*Я знаю о Fluent Design, потому что у меня Windows 10)*
Андрей, спасибо! Очень полезно! Меня задевает тот факт, что, так то у нас одна из самых сильных школ в мире. Думаю что наши, могут предложить более интересный дизайн чем этот Fluent Design Microsoft...
спасибо. А как убирать боковую панель и возвращать ее обратно?
Tab)
Андрей, привет!
Ты упомянул, что поделишься своей подборкой шрифтов. В письме я её не обнаружил.
Можешь скинуть?
Привет, Андрей говорил много раз что его подборку можно найти в его видео о типографике.Найди на канале Андрея или вбей в поиске "Дизайн кладовка типографика" и тебе выдаст видео Андрея, под описанием этого видео ты первой ссылкой найдёшь его подборку шрифтов ) я бы дал ссылку на видео но ютуб блокирует комментарии с ссылками.
Спасибо)
Я в начале подумал что там wow.js в больнице показываешь там оказался Фотошоп :)
Не думайте о верстке, когда делаете дизайн, верстальщик на крайний случай вставит это картинкой - так вот КТО обучает этих не додизайнеров, которым хочется отрубить руки, когда верстаешь их творения, спасибо тебе друг, за такие советы, тебе хочется отрубить не только руки но и голову
А что за ноут?
Спасибо за инфу, много полезного для себе вынес!
А где можно найти Вашу коллекцию шрифтов?
перемотай на 1 слайд, там есть ссылка
Спасибо!
Ищите шрифты в Ашане 😂
А так лучше начать с Google Fonts. Либо покупать или рисовать свои.
2к18 - отрисовка в фотошопе, инструменте для динозавров. А эффекты хорошие)
Сергей ,а какие инструменты лучше?
никак не пойму как Вы сделали на 1:12:29? пол эллипса?((((
урра! получилось!!))
Знаете, у нас в мире веб-программирования есть шутки и мемы по поводу обучающих курсов от Попова. Так вот эти курсы такие же как и фамилия. Вау эффекта я тут не увидел, потому что видел работы топовых дизайнеров, и примеры в видео очень устаревшие и криповые. Так вот, боюсь что фамилия данного учителя по дизайну будет такой же мемовой и зашкварной. Я себя не объявляю мега дизайнером, повторюсь. Я видел работы профессионалов. Я бы назвал данный курс LOL-эффект )))
44:00 10 лет назад делали все эти вау-эффекты, неужели ты за это время ничего нового не придумал?
Ищу кто сделает два баннера на тему "презентация мини компьютера". Один компьютер белый, другой баннер с компьютером промышленной линейки - серым. Если понравится, пойдет на боевой сайт, если очень понравится, 3000 рублей через яндекс деньги или сбер
Бедные верстальщики
Что тут верстать? Тут большинство элементов в картинку и всё готово.
господи, даже стримы по гта полезнее чем это
Имейте ввиду, заказывая работу у дизайнера, который не владеет современными инструменрами: Figma, Adobe XD, Sketch, вы переплачиваете минимум в 4 раза за дизайн и в 2 раза за верстку.
почему переплачивают? подробнее можно?
Пфффф инструмент напрямую зависит от того в каком исходнике команде удобно смотреть , дизайнер такую работу хоть в пейнте хоть в экселе сделает, если надо
Какой у вас Фотошоп? 5?
Если автор этого видео не умеет рисовать, пусть не выставляет это как + это -. тем более если ты иллюстратор ты знаешь о композиции все, а значит нечего говорить глупости.
он не выставляет это как плюс, он просто не говорит, что неумение - это минус. Я-то сам умею рисовать, с детства рисовал, и считаю, что любовь к рисованию может показать, что суждено быть дизайнером, но у меня не бомбит, как у тебя) И композиция не связана напрямую с умением рисовать, ее можно выучить , не занимаясь рисунком
lisa potapova так я и не иллюстратор, чтобы уметь рисовать)
Ты понимаешь разницу между дизайнером UI и UX интерфейсов и графическим дизайнером ?
не мог бы ты укарачивать свои образавательные видео ПЖ открой другой раздел для ведения блога о жизни
Плохой урок... Ни одного WOW-Эффекта не увидел...
ребят я трехминутное видео сделал на канале как сделать так чтоб все работало .
Заходите оцените .
А тут лайк за подробный разбор как всегда !
Ctrl + c - ctrl + v />>> ctrl+j...
Такое чувство, что автору поговорить нет с кем .
Вот это примитив, за что тебе только деньги платят?
кружочки он рисует ахаха)
А ты не пробовал Вообще ничего не рисовать ( ну может кроме точки).Вот это будет минимализм в минимализме, минимализма.Как тебе WOY- эфект????))))))))
+
Можешь снять урок, как делать анимацию обложек. Например, вот vk.com/riseofficial?w=wall98824568_10454
прошу вас закройте уши, когда он говорит что сверстать можно все, не думайте о верстке, верстальщик все сделает))) Верстальщик нормальный конечно все сверстает) но сколько же до вас приходится дорисовывать, дорезать
он потом в следующем видео обосновал свое высказывание, ты просто его не правильно понял
ясное дело обоснует, тут наверно такой срачь поднялся
Нда..(((
По минимализму что-то облом вышел. Минимализм определяется как стремление к уменьшению количества элементов без вреда функциональность а не просто придумать концепт из минимального количества элементов.
Видели это видео о квиз-лендингах? th-cam.com/video/X7cipTWFwJ4/w-d-xo.html
это какая то секта?
4 минуты посмотрел, а этот всё а каком то восторге и ничего конкретного не сказал, а кто-то за подобное ещё и деньги платит. Наверно проще книгу купить, а то подобные тренеры только время наше тратят на свои ВауЭмоции. Он такой очумелый и восторженный всё видео??просто не хочется это смотреть 1,5часа. Время жалко на подобные вау,вау,вау, вау,ребятки прекрасно, замечательно и всё а таком ключе.
давай выскочим 1х1
Адрес пиши, клоун
Андрей, ты просто показываешь примеры и это - очень красиво, наверное это у тебя уже в крови, не красиво ты просто не умеешь теперь
так... hellow world + еда + горы + телочка + супермен + непонятная розовая бойда = wtf ? это точно флуент... как по мне х...я какая - то. нет ну серьезно !
Хочу зарабатывать 7 тыс долларов в месяц
Куда я потратил 25 минут своей жизни?)
Только для начинающих, которые вчера только сели делать сайт в фотошопе. Смешно.
Может, скинешь парочку своих личных примеров, чтоб показать, как делают настоящие профессионалы?
Майя Климова, зачем? Мне доказывать кому-то что-то неинтересно. Каждый волен сам изучать, осваивать то, что нравится, и повышать свои навыки. Для начинающих - значит пусть смотрят и решают сами помогло им это или нет. Ничего плохого, разве нет?
Доказывать неинтересно, судить других интересней, конечно.
Майя Климова, а никто и не судил, это для людей, чтобы не тратили время, если уже это все знают. И все. А Вы как-то слишком агрессивно настроены. Предпочитаю с такими людьми не вести диалоги, поэтому всего доброго.
@@SummerRina слив засчитан
если честно - не о чем!!!
Блаблабла. Просто самореклама и бизнес тренинг