10 Секретов WOW-Эффекта В Дизайне Сайта
Вставка
- Опубліковано 13 вер 2017
- Цель дизайна сайта в 2017 - удивить. Мы расскажем о 10-ти не тривиальных приемах создания WOW-эффекта при работе над дизайном очередного сайта для вашего портфолио. Незаменимый мастер-класс для каждого сознательного веб-дизайнера
wayup.in/library/workshop/10-...
![[2023] Основы верстки сайта с нуля! HTML5 и CSS3 - верстка макета](http://i.ytimg.com/vi/357_BAchn4w/mqdefault.jpg)
Конспект, или как посмотреть это видео за 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дешный или градиентик забабахать , а понять где и как его использовать , в какие местах это будет уместно!
Спасибо за видео - вы лучик света по веб-дизайну на ютубе и не только!
Как всегда здорово и с открытой философией, что я считаю очень важна для самореализации)
Меня прямо таки вштырило с этого видео и с эффектов которые показаны в нём
Очень полезный урок,огромное спасибо за ваш труд.
Спасибо, Андрей. Интересные фишки, буду использовать!
Спасибо, как всегда интересно и познавательно!
Отличный урок, спасибо!)
Спасибо, отличные уроки👍
Это Шедеврально!!! Респект!
Относительно давно занимаюсь веб дизайном, и видео - просто огонь!
Спасибо огромное за урок
Для просмотра шрифтов хорошо использовать менеджеры шрифтов. Например, nexusfont. Бесплатный, можно задать нужный текст, который будет написан в предпросмотре в списке шрифтов. Можно даже просматривать еще не установленные (спираченные или купленные) шрифты.
За один только Tilt-Shift можно лайк поставить) Не говоря уже об остальных 9 пунктах.
Наткнулся на видео абсолютно случайно. Реакция на каждый новый эффект изменялась от "мда, и что это" до "WOW". Здорово, очень здорово. Воодушевило.
Золотые слова: 8:25 "Если ты понимаешь куда ты идешь, то рано или поздно ты к этому придешь. Но если ты не понимаешь, то ты к этому никогда не придешь!!!"
Спасибо, сделал апгрейд своим скромным навыкам
Красавчик! Я новичок в веб-дизайну, но буду стараться дойти до твоего уровня, может и выше)
Спасибо большое, очень полезный контент!
Спасибо за видео! Ооочень помогло!!!
Отличный урок. Андрей, спасибо! Особенно понравились 1, 3, 6 фишки
а где можно увидеть ваше портфолио?
Круто! Молодец, что делаешь такие видео. Мне было приятно узнать что-то новое для себя! Надеюсь, что будет возможность лично встретиться за чашкой кофе, где-нибудь на островах ;-)
Спасибо, интересная инфа
Спасибо огромное тебе )
Отличноеееееееее занятие!!!
Прямо очень познавательно!
Супер
Это гениально! Я вдохновился! Большое спасибо!
Спасибо Красавчик!)
Вдохновительно)
Вау! Чувак! Да ты крут! Спасибо тебе. Ты мне просто всё расставил по местам с этим грёбаным минимализмом. Вот таким я и запиздячу себе второй сайт!
Крутой чел,спасибо бро)
мне понравилась композиция фигур )
Тема явно сперта с какой-то статьи, глубоких знаний у парня нет. Но за старания лайк. В общем не самое плохое видео в ютубе. Посмотрел с удовольствием.
Спасибо Вам за такие видео!
Очень ценно и полезно даже для тех, кто давно занимается web-дизайном.
Не спорю, для дизайна видео хорошие, но они не годятся для реальных сайтов. Я делаю сайт (хреновый, но сайт), и понимаю, что человек не знаком с веб-разработкой. Особенно это показали слова "не думайте о вёрстке, она вторичная". Его "картинки" нельзя наполнить кодом.
Это ваше первое видео для меня , просто лайк + подписка!
Андрей, ты гений!!!
Ссылки, указанные на слайдах:
dKq3dFMCblc
9EyNLzfQGO8
PhFrgFKzeX8
WR1_H8Dw6UY
BDMCDyLitCI
rzzeLJW8dWc - фото
CWYLP0YXL5M
ohJgaHwx9C8
пасибо.
Любители критики - запишите лучше, гоу! вместо того, чтобы строчить свои комменты)
Дяденька :D Где ты был лет 10 назад ,когда я это моим проффесорам объяснял :D Старо, как мир ))
Все такие язвительные в комментариях..) Я к примеру только в начале своего пути и любая информация для меня крайне важна
Ютуб зачем?
То о чем ты рассказываешь, называется "ДРИБЛОДРОЧЕРСТВО"
Когда ты открываешь драйбл и смотришь, откуда бы тебе стащить что-то, находишь проэкт (который сделали для портфолио, чтобы заманить клиента, этот проект никогда в работу не шел) и начинаешь копировать все. На выходе, необдуманная красивая картинка, ты рад, заказчик рад.
Но когда дело дойдет до разработки, ты сольешься, а заказчик остается у разбитого корыта с твоим "чудДизайно". Со шрифтом гельветика, комик санс и чудо макетом под 1900w.
А респонсив придумает верстальщик. А твои напутствия будут:
"Уменьшай пропорционально, брат..." и пох что на 1200w шрифт будет 6px.
В итоге:
Заказчик попадает на доп скрины, от другого дизайнера.
На оверпрайс верстку.
На сорванный дедлайн.
Давай продолжай учить людей дерьму...
"...Когда рисуете дизайн, не думайте про верстку, она вторична...."
Dima Koriagin 1900w это ты имеешь введу width?
ага
Dima Koriagin слушай можем пообщаться по этому поводу?В целом кажеться что смысл есть в твоих словах.Типо если в макете 1920на1280 h1 70px и у верстальщика например монитор 1366на720 то если в стилях он пропишет фонт сайз 70px то будет не совсем пиксель перфект . Ты об этом? просто в дискусии рождаеться истина хочеться больше узнать что ты имел введу.
"...Когда рисуете дизайн, не думайте про верстку, она вторична...." такая фраза правда прозвучала? решил у тебя сперва уточнить, если да, то видео сразу шлак
Как верстается 1-й эффект. Где можно посмотреть???
Где я раньше был, я всё это умею))))
Буквы дугой вплелись в фон...это вау-эффект для верстальщика 👍🏻
Можно же картинкой сохранить
Чувак, открою секрет: tilst-shift делается стандартным плагином фш.
Опа, теперь я знаю как проведу остаток дня
Спасибо за инфу, много полезного для себе вынес!
А где можно найти Вашу коллекцию шрифтов?
перемотай на 1 слайд, там есть ссылка
Спасибо!
Ищите шрифты в Ашане 😂
А так лучше начать с Google Fonts. Либо покупать или рисовать свои.
Спасибо, очень хорошие советы для дизайнеров.
Главное тебе не обращать внимания на "ШибкоУмных" дизайнеров.
Андрей, спасибо! Очень полезно! Меня задевает тот факт, что, так то у нас одна из самых сильных школ в мире. Думаю что наши, могут предложить более интересный дизайн чем этот Fluent Design Microsoft...
Всегда нужно помнить одну истину: функция определяет стиль, а не стиль функцию! Не знаю ни одного сайта с wow эффектами, который хорошо продавал.
wow-эффект - это не обязательно хитровыебаная тяжелая фигура, это может просто стильное минималистичное оформление. Посмотри первый пример из этого урока (фон+заголовок) - это вообще стандарт лэндинга сейчас. Добавь кнопку-действие и всё.
Прямо крик души =)
Убеждение клиента - часть работы дизайнера или менеджера проекта. Чаще всего заказчик слаще морковки ничего не видел, отсюда и вкус у человека. Опять же очарование эффектами, для заказчика это - волшебство и классно, а дизайнер это делал и видел тысячу раз, его уже тошнит. Тут надо определиться к кому аудитория ближе.
Можно ли с Behance брать изображение для прокта?
Привет,а ты переходы на opencartmasters.com/ просто "что-то обсуждали" по поводу твоего вопроса.
здравствуйте!
я верстальщик. северсталь один сайт и с помощью google chrome toogle device toolbar сверстал адаптивы. вроде все хорошо. но когда загрузил на хостинг и посмотрел на смартфоне(samsung galaxy s7 edge) адаптив не работал. я пробовал с другими браузерами и все нормально работала нона мобильный google chrome не работают медиа(открывается так как на компьютере). помогите пожалуйста не могу решить проблему
Андрей, привет!
Ты упомянул, что поделишься своей подборкой шрифтов. В письме я её не обнаружил.
Можешь скинуть?
Привет, Андрей говорил много раз что его подборку можно найти в его видео о типографике.Найди на канале Андрея или вбей в поиске "Дизайн кладовка типографика" и тебе выдаст видео Андрея, под описанием этого видео ты первой ссылкой найдёшь его подборку шрифтов ) я бы дал ссылку на видео но ютуб блокирует комментарии с ссылками.
Спасибо)
*Я знаю о Fluent Design, потому что у меня Windows 10)*
спасибо. А как убирать боковую панель и возвращать ее обратно?
Tab)
По моему Material Design это где тени , текстуры и т.д. А в flat design это чистые и простые изображении?
Флат это вообще строго. Нет теней, закруглений, градиента. Сильный такой минимализм без засечек и квадратов Малевича. Минимум деталей. И с цветами всё по минимому.
Ну я переход не узнал, что это Instagram, т.к. никогда не пользовался instagramом
Тут столько экспертов веб-дизайнеров собралось .что просто пиздец, однако нормальных сайтов на рунете по пальцам пересчитать. Куда ж вы свой талант тратите , дизинеры ? Или только красиво по клаве текст набирать можете? Мамкины комментаторы)
+Денис Худояров,
Работают с западными и восточными клиентами?
А вот пересчитай если не спиздел (0= Хватает годноты и талантливых дизайнеров, но вот из-за таких блоггеров они в профессии не задерживаются, одноразовые дизайнеры пока на работу не устроятся в магазин носки продавать.
денис согласен с тобой полностью, проффессора собрались тут, даже под твоим комментам есть =)
А разве шарик на сайте fluent microsoft не в 3D сделан?
Конечно 3D, но автор не умеет :)
Тыры-пыры-растапыры, что называется, тащемта, например
1:21:10
"функций у фотошопа не так много". лолшто?
не так много функций, нужных для веб-дизайна, чтоб растягивать это на целый курс
да ладно
2к18 - отрисовка в фотошопе, инструменте для динозавров. А эффекты хорошие)
Сергей ,а какие инструменты лучше?
А что за ноут?
никак не пойму как Вы сделали на 1:12:29? пол эллипса?((((
урра! получилось!!))
такое ощущение, что автор прочитал пару уроков по фотошопу, а теперь хаотично показывает элементарные вещи, которые смог запомнить. + ко всему, сразу видно отсутствие опыта работы вместе с верстальщиком.
Посмотрите другие мастер-классы, в том числе по верстке, чтобы делать выводы)
Много лишнего пи дежа.
Спасибо что подсказал что делать когда звук в наушниках громкий! Я раньше отсаживался по дальше.
Не думайте о верстке, когда делаете дизайн, верстальщик на крайний случай вставит это картинкой - так вот КТО обучает этих не додизайнеров, которым хочется отрубить руки, когда верстаешь их творения, спасибо тебе друг, за такие советы, тебе хочется отрубить не только руки но и голову
Я в начале подумал что там wow.js в больнице показываешь там оказался Фотошоп :)
Если автор этого видео не умеет рисовать, пусть не выставляет это как + это -. тем более если ты иллюстратор ты знаешь о композиции все, а значит нечего говорить глупости.
он не выставляет это как плюс, он просто не говорит, что неумение - это минус. Я-то сам умею рисовать, с детства рисовал, и считаю, что любовь к рисованию может показать, что суждено быть дизайнером, но у меня не бомбит, как у тебя) И композиция не связана напрямую с умением рисовать, ее можно выучить , не занимаясь рисунком
lisa potapova так я и не иллюстратор, чтобы уметь рисовать)
Ты понимаешь разницу между дизайнером UI и UX интерфейсов и графическим дизайнером ?
+
Ищу кто сделает два баннера на тему "презентация мини компьютера". Один компьютер белый, другой баннер с компьютером промышленной линейки - серым. Если понравится, пойдет на боевой сайт, если очень понравится, 3000 рублей через яндекс деньги или сбер
Знаете, у нас в мире веб-программирования есть шутки и мемы по поводу обучающих курсов от Попова. Так вот эти курсы такие же как и фамилия. Вау эффекта я тут не увидел, потому что видел работы топовых дизайнеров, и примеры в видео очень устаревшие и криповые. Так вот, боюсь что фамилия данного учителя по дизайну будет такой же мемовой и зашкварной. Я себя не объявляю мега дизайнером, повторюсь. Я видел работы профессионалов. Я бы назвал данный курс LOL-эффект )))
44:00 10 лет назад делали все эти вау-эффекты, неужели ты за это время ничего нового не придумал?
господи, даже стримы по гта полезнее чем это
Бедные верстальщики
Что тут верстать? Тут большинство элементов в картинку и всё готово.
кружочки он рисует ахаха)
Такое чувство, что автору поговорить нет с кем .
Какой у вас Фотошоп? 5?
Имейте ввиду, заказывая работу у дизайнера, который не владеет современными инструменрами: Figma, Adobe XD, Sketch, вы переплачиваете минимум в 4 раза за дизайн и в 2 раза за верстку.
почему переплачивают? подробнее можно?
Пфффф инструмент напрямую зависит от того в каком исходнике команде удобно смотреть , дизайнер такую работу хоть в пейнте хоть в экселе сделает, если надо
ребят я трехминутное видео сделал на канале как сделать так чтоб все работало .
Заходите оцените .
А тут лайк за подробный разбор как всегда !
А ты не пробовал Вообще ничего не рисовать ( ну может кроме точки).Вот это будет минимализм в минимализме, минимализма.Как тебе WOY- эфект????))))))))
Можешь снять урок, как делать анимацию обложек. Например, вот vk.com/riseofficial?w=wall98824568_10454
4 минуты посмотрел, а этот всё а каком то восторге и ничего конкретного не сказал, а кто-то за подобное ещё и деньги платит. Наверно проще книгу купить, а то подобные тренеры только время наше тратят на свои ВауЭмоции. Он такой очумелый и восторженный всё видео??просто не хочется это смотреть 1,5часа. Время жалко на подобные вау,вау,вау, вау,ребятки прекрасно, замечательно и всё а таком ключе.
не мог бы ты укарачивать свои образавательные видео ПЖ открой другой раздел для ведения блога о жизни
прошу вас закройте уши, когда он говорит что сверстать можно все, не думайте о верстке, верстальщик все сделает))) Верстальщик нормальный конечно все сверстает) но сколько же до вас приходится дорисовывать, дорезать
он потом в следующем видео обосновал свое высказывание, ты просто его не правильно понял
ясное дело обоснует, тут наверно такой срачь поднялся
По минимализму что-то облом вышел. Минимализм определяется как стремление к уменьшению количества элементов без вреда функциональность а не просто придумать концепт из минимального количества элементов.
Видели это видео о квиз-лендингах? ua-cam.com/video/X7cipTWFwJ4/v-deo.html
давай выскочим 1х1
Адрес пиши, клоун
Нда..(((
Ctrl + c - ctrl + v />>> ctrl+j...
Андрей, ты просто показываешь примеры и это - очень красиво, наверное это у тебя уже в крови, не красиво ты просто не умеешь теперь
это какая то секта?
так... hellow world + еда + горы + телочка + супермен + непонятная розовая бойда = wtf ? это точно флуент... как по мне х...я какая - то. нет ну серьезно !
Куда я потратил 25 минут своей жизни?)
Хочу зарабатывать 7 тыс долларов в месяц
Вот это примитив, за что тебе только деньги платят?
Только для начинающих, которые вчера только сели делать сайт в фотошопе. Смешно.
Может, скинешь парочку своих личных примеров, чтоб показать, как делают настоящие профессионалы?
Майя Климова, зачем? Мне доказывать кому-то что-то неинтересно. Каждый волен сам изучать, осваивать то, что нравится, и повышать свои навыки. Для начинающих - значит пусть смотрят и решают сами помогло им это или нет. Ничего плохого, разве нет?
Доказывать неинтересно, судить других интересней, конечно.
Майя Климова, а никто и не судил, это для людей, чтобы не тратили время, если уже это все знают. И все. А Вы как-то слишком агрессивно настроены. Предпочитаю с такими людьми не вести диалоги, поэтому всего доброго.
@@SummerRina слив засчитан
Блаблабла. Просто самореклама и бизнес тренинг
если честно - не о чем!!!