Популярност на мишката в уеб дизайна и лекота на създаване във Photoshop и CSS
Една от най-популярните тенденции в средата на уеб дизайна е ефектите върху курсора на мишката или върху тях. Как да ги създадете с помощта на Photoshop, CSS, откъде да получите идеи и готови парчета програмен код.
Успехът на дизайна на уебсайт зависи от много аспекти. Но когато става въпрос за потребителски опит, обикновено детайлите правят разликата. Изглежда, че подобни сайтове са малко по-различни един от друг и съответно в резултат имат различна популярност и конверсия. Това е, ако не говорим за маркетинг като цяло. Всеки елемент от уеб дизайна влияе върху качеството на крайния продукт (всеки сайт, създаден от майстор, е продукт на неговата работа, творчество), но някои функции подобряват проекта много повече от всичко останало.
Динамичните елементи не остават незабелязани от посетителите и винаги са поразителни. Те влияят на емоциите, подобряват видимостта на сайта, правят интерфейса като цяло изкушаващ и привлекателен. И това въпреки факта, че анимацията може да бъде или явна, фонова, или да се проявява само при взаимодействие с елементите на сайта. Разбира се, изобилието от динамични ефекти зависи от общата дизайнерска идея, но като се вземат предвид най-новите стандарти и тенденции, те се опитват да ги използват в малки количества.
Една от най-популярните тенденции в средата на уеб дизайна са ефектите върху мишката или ефекти върху курсора. Такива ефекти не са очевидни веднага, но ако преместите показалеца към елемент от менюто, бутон или информационен блок, те се променят в тоналността, цвета, понякога дори формата или леко по размер. Този ефект е печелившо решение за засилване на емоционалното възприятие на сайта. Редовните читатели на нашия блог със сигурност ще запомнят различни примери за сайтове, където по един или друг начин се използват ефекти с мишката.
Днес ще разгледаме най-поразителните проекти с различни ефекти за показалеца на мишката и ще видим как най-лесният начин да ги създадете с помощта на Photoshop, CSS, откъде да вземете идеи и готови парчета програмен код.
Шрифт шмит
Сайтът подканва посетителя да избере име на шрифт от различни опции за икони. По време на избора, като преместите курсора, можете да видите как всяка клетка променя цвета си и представлява самия шрифт. Пътеката на движение по клетките изглежда особено красива, ако курсорът се премести много бързо.
Пиксели от Томер Лернър
Томер Лернър създаде своя уебсайт почти изцяло с анимация. Геометричните фигури се движат под курсора на мишката на главната страница, зареждането се извършва между страниците и около името се формира правоъгълник в следващия блок. Трудно е да се предаде с думи красотата и простотата на това, така че ще е най-добре да се убедите с очите си.
Влакче
Проектът предлага интерактивно пътешествие в стил Див Запад и проучване на разнообразни иновативни проекти. Посетителят може да избере раздел и да премине през мъглата, за да научи нов. Освен това всичко това също е анимирано.
Екипът на събитието M11, филмите и телевизията създаде уебсайт, който успя да спечели няколко награди наведнъж. Тук анимацията беше използвана много фино. Бутоните, иконите се променят само когато задържите мишката, а преходите между екрани (страници) изглеждат много оживени и не дразнят.
Колекцията за селфита
Колекцията Selfie представя проект със селфи снимки и предмети на търг. Ние се интересуваме от дизайнерско решение, при което всяко изображение, като е активно, става собственик на текстов блок с описание на елемента на търга, което ви позволява да отидете на търга чрез щракване. Цветните плочки са много популярни в плоския дизайн и всъщност леката анимация на промяната на цвета на тези блокове изглежда съвсем естествено и познато.