>Zina в 04:05, 30 травня 2022

2022-05-30T04:05:32Z

Нова сторінка

'''[[Примеры анимации]]''' | '''[[UX эффекты]]''' | '''[[Buttons]]'''

== Иллюстрации к блогу ==

* https://www.semrush.com/blog/ — оптимальный размер заголовка в сочетании с иллюстрацией

== Конкурсы сайтов ==

* https://onepagelove.com/ — One Page websites, templates and resources
* https://thefwa.com/
* https://www.awwwards.com/
* https://winners.webbyawards.com/winners/websites
* https://www.red-dot.org/

== Эффекты ==

=== Гамбургер меню / Hamburger menu ===

* https://babordgroup.com/
* https://clevercreative.com/ — на мобильной версии, эффект подготовки
* https://art4globalgoals.com/en — иконка-layers
* https://at-home.club/
* https://upperquad.com/
* https://fremtidensuddannelser.dk/en
* https://gucciosteria.com/en/ — мягкая анимация
* https://scepterandsword.com/ — полупрозрачность

==== Масштабное меню ====

* https://www.engine.xyz/
* https://www.unleashed-technologies.com/ — с подменю
* https://globekit.co/ — впечатление не меньше, чем от основного сайта
* https://www.perimeterwatch.com/
* https://www.adamriguez.com/ — курсор на меню превращается в круг
* https://why.de/en/ — интересная анимация заголовка в меню
* https://www.stc.com.sa/stc-annual-report-2020/
* https://www.unfpa.org/unheardvoices — плавная анимация

==== Минималистичное меню ====

* https://thefoundry.nyc/
* https://www.bowenmedia.com/
* https://ettrics.com/
* https://madebyarticle.com/ — blure background, приятные анимации hover
* https://getdooapp.com/ — [https://winners.webbyawards.com/2021/apps-and-software/mobile-ott-app-features/best-user-interface/175266/doo-get-things-done WebbyAwards 2021]
* https://cumminsandpartners.com/ — с полупрозрачностью
* https://www.gorillagroup.com/ — исчезает само при выходе курсора за пределы меню

==== Нестандартные ====

* https://www.hellomonday.com/ — плавающий мягкий гамбургер в стиле https://codepen.io/mikel301292/pen/dMYRYZ — SVG Gooey Hover Menu Concept
* https://ldh.webflow.io/ — меню с морфингом (https://winners.webbyawards.com/2021/websites-and-mobile-sites/features-design/best-navigationstructure/167836/ldh-hazards-online-training-platform WebbyAwards 2021)

=== PushState ===

* http://www.collectif-yay.com/- меняется URL при прокрутке лендинга

Подробнее: https://blog.uamaster.com/prodvizhenie-landing-page-seo-dlya-odnostranichnogo-sajta-metod-pushstate-v-jquery/

=== Плавающее меню ===

* https://carts.guru/
* https://erudi.to/
* https://www.micai.aristidebenoist.com/ - плюс навигация по якорям на странице
* https://itsalive.io/
* http://pandamonk.studio/
* https://www.landlifecompany.com/
* https://www.academyart.edu/

=== Один экран — один блок с докруткой ===

* https://babordgroup.com/
* https://digitalwise.eu/ - плавные анимации
* https://byjakt.com/
* http://helicopter-view.com/
* http://kv.od.ua/
* http://www.identixdesign.com/ — студия из Индии

=== Параллакс при прокрутке страницы ===

* https://bornikirken.dk/
* http://julia-music.ru/ - презентация поп-звезды или модели
* http://www.firewatchgame.com/ - пейзаж с горами. Картинки: [http://www.firewatchgame.com/images/parallax/parallax0.png parallax0.png] (до parallax8.png)
* http://myriad.space/ — выезжания слева-справа
* https://gardenestudio.com.br/ — прорисовка линиями при скролле вниз
* https://github.com/iminyourhouse-turnaround — GitHub 404 — реакция на движения курсора

=== Следящий параллакс ===

* https://www.oculus.com/medal-of-honor/ — [https://winners.webbyawards.com/2021/websites-and-mobile-sites/features-design/best-user-interface/179354/medal-of-honor-above-and-beyond WebbyAward 2021]
* https://artempivovarov.com/
* http://bizzgrid.com/
* http://isadoradigitalagency.com/
* http://www.netrixdigital.com/
* http://reports.corby.ca/2018/
* http://www.culturalsolutions.co.uk/

=== Эффекты при прокрутке ===

* https://readymag.com/uxlive/mourning/
* https://brave.com/download/ — выглядит просто
* http://ru.translations.com/who-we-are — анимация цифр
* https://www.altcoin.io/
* https://asana.com/ru — смена анимированных иллюстраций в зафиксированном блоке слева, см. второй экран ([https://winners.webbyawards.com/2021/websites-and-mobile-sites/general-websites-and-mobile-sites/web-services-applications/181208/asanacom-homepage WebbyAwards 2021])
* https://www.editorx.com/ — прокрутка портфолио в блоке "Explore Showroom" ([https://winners.webbyawards.com/2021/websites-and-mobile-sites/general-websites-and-mobile-sites/web-services-applications/183079/editor-x WebbyAwards 2021])

=== Переходы между разделами ===

* https://calar.ink/
* http://www.rollstudio.co.uk/
* https://gucciosteria.com/en/

=== При наведении на круг ===

* https://tympanus.net/Tutorials/CircleHoverEffects/index.html

=== Горизонтальный скролл ===

* https://www.mozom-1.com/
* https://scepterandsword.com/
* https://canals-amsterdam.nl/ — [https://winners.webbyawards.com/2020/websites-and-mobile-sites/features-design/best-navigationstructure/127963/canals WebbyAwards 2020]
* https://at-home.club/ — [https://winners.webbyawards.com/2021/websites-and-mobile-sites/features-design/best-navigationstructure/166895/at-home WebbyAwards 2021]
* http://www.espn.com/espn/feature/story/_/id/24504198/the-nba-best-signature-moves-michael-jordan-fadeaway-allen-iverson-crossover#!
* https://timeless.ee/
* http://www.institut-franco-chinois-lyon.com/ - горизонтальный параллакс с приятными эффектами

=== Игровая навигация / курсор ===

* https://moves.basicagency.com/ — заставляет пользователя выполнять действия, привязка к курсору ([https://winners.webbyawards.com/2019/websites-and-mobile-sites/features-design/best-user-experience/93800/basic--moves WebbyAwards 2019])
* https://culture.basicagency.com/ — [https://winners.webbyawards.com/2020/websites-and-mobile-sites/features-design/best-user-interface/120749/basic-culture-manual WebbyAwards 2020]
* https://madeinhaus.com/ — [https://winners.webbyawards.com/2020/websites-and-mobile-sites/features-design/best-user-interface/114747/haus-website WebbyAwards 2020]
* https://scepterandsword.com/
* https://www.adamriguez.com/
* https://atoms.studio/en/ — итальянская студия, хороший эффект курсора в гамбургере

== Лендинги / Landing ==

* https://animoto.com/ — красивый, приятный [https://winners.webbyawards.com/2021/websites-and-mobile-sites/general-websites-and-mobile-sites/web-services-applications/171982/animoto WebbyAwards 2021]
* https://air.inc/ — очень приятный стиль, слегка мультяшный [https://winners.webbyawards.com/2021/websites-and-mobile-sites/general-websites-and-mobile-sites/web-services-applications/169344/air WebbyAwards 2021]
* https://mailchimp.com/fall2020/ — маркетингово грамотный и насыщенный [https://winners.webbyawards.com/2021/websites-and-mobile-sites/general-websites-and-mobile-sites/web-services-applications/177324/fall-release WebbyAwards 2021]
* https://itg.digital/ — забавный и убедительный лендинг дизайнерского сервиса [https://winners.webbyawards.com/2020/websites-and-mobile-sites/general-websites-and-mobile-sites/web-services-applications/115192/itg WebbyAwards 2020]

== Интернет-магазины / Shop / Online Store ==

* https://www.dwr.com/ — дорого выглядящий магазин мебели ([https://winners.webbyawards.com/2021/websites-and-mobile-sites/features-design/best-user-experience/179251/design-within-reach WebbyAwards 2021])
* https://www.saksfifthavenue.com/ — максимально дорого выглядящий магазин одежды ([https://winners.webbyawards.com/2021/websites-and-mobile-sites/features-design/best-user-experience/176868/saks-fifth-avenue-ecommerce-site WebbyAwards 2021])
* https://silveroak.com/ — винный магазин ([https://winners.webbyawards.com/2021/websites-and-mobile-sites/features-design/best-user-interface/179249/silver-oak WebbyAwards 2021])
* https://www.logitech.com/en-us
* https://www.rapha.cc/us/en_US/ — магазин одежды для велосипедистов ([https://winners.webbyawards.com/2019/websites-and-mobile-sites/features-design/best-navigationstructure/87015/rapha WebbyAwards 2019])
* https://www.aesop.com/us/ — магазин косметических средств [https://winners.webbyawards.com/2019/websites-and-mobile-sites/features-design/best-navigationstructure/87014/aesop WebbyAwards 2019]
* https://lemkus.com/ — спортивная одежда

== Персональные сайты ==

* https://www.juliajohnson.com/

== Дизайн-студии ==

* https://solardigital.com.ua/
* https://vintage.com.ua/

2021

* https://why.de/en/
* https://wearekettle.com/ — [https://winners.webbyawards.com/2021/websites-and-mobile-sites/features-design/best-user-interface/170941/kettle-website WebbyAwards 2021]
* https://www.firstborn.com/
* https://madeinhaus.com/
* https://www.denkwerk.com/en
* https://www.hellomonday.com/
* https://threesixtyeight.com/
* https://work.co/

2020

* https://moxy.studio/ — 3D-параллакс, интересная навигация скроллом по разделам
* https://www.ideo.com/eu — глобальная дизайнерская компания. Хорошая типографика, эффект ссылки, скорость анимации кнопок, гамбургер меню
* https://www.aquest.it/ — эффекты в гамбургер-меню
* https://madebyarticle.com/

=== Веб-студии с хорошим маркетингом ===

* https://www.ashmanov.com/ — Ашманов, SEO
* https://www.coruna.ru/ — брендинговое агентство, много интересных приемов.
* https://secl.com.ua/ — "работаем с 1994 года" и т.д. интересное обсуждение в [https://www.facebook.com/semenov.nikita.andreevich/posts/2107512339276784 фб CEO]
* http://wezom.com.ua/hosting — слегка слишком агрессивно. есть про [http://wezom.com.ua/hosting хостинг]
* http://digital.tools/ — похоже на нас, специализируются на SEO
* https://art-lemon.com/ — хорошие формы заказа, профили на UpWork и т.п.
* http://logomaster.com.ua/ - описание цен и условий разработки логотипа, нейма и т.п.
* https://dvacom.net/reviews - тексты официальных отзывов

=== Сайты веб-студий ===

* https://advermedia.com.ua/services/sozdanie-saytov-dnepropetrovsk/ - скопировать цены и посмотреть пример лендинговости

=== Видео-отзывы ===

* https://shturman.biz/

=== Продающие сайты ===

* https://www.monobank.com.ua/ — Монобанк, последовательность убеждения
* https://www.lastpass.com/ru — максимально простой и понятный

=== Наиболее близкое по стилю для нас ===

* http://hyperakt.com/ — дизайн студия, минимализм
* http://www.pascalvangemert.nl/ — сайт-портфолио программиста
* https://munchery.com/ — много слайдеров на главной

=== Конкуренты в Днепре ===

{| cellpadding="10"
|- valign="top"
|
'''Хорошие'''
* http://forforce.com/
* http://www.fresh-d.net/
* http://yaponochka.com/
* http://ifish.com.ua/
* http://iworks.ua/
* https://prestige.dp.ua/
* http://goldseo.com.ua/
* http://shiftreset.com.ua/
* http://sait.dp.ua/
* http://i-pr.com.ua/
* http://kultprosvet.net/
* http://speed-motion.com.ua/
|
'''Плохие'''
* http://webteam.com.ua/ (с параллаксом)
* http://pinguin-studio.com.ua/
* http://webcolorize.com.ua/
* http://web-apelsin.dp.ua/
* http://alt.dp.ua/
* http://site-master.dp.ua/
* http://www.webpr.ua/
* http://deluxe.dp.ua/
* http://vacuums.net.ua/
* http://www.dnepr-web.com.ua/
* http://dvmstudio.net/
* http://artweb.dp.ua/
* http://prospect-it.dp.ua/
* http://www.dolinskiy-design.com/
* http://advermedia.com.ua/
|}

== Разные примеры ==

=== 2021 ===

* https://speednames.com/ — смена фоновой картинки при наведении на кнопки
* https://noboring-finance.ru/ — хороший продающий сайт, с простыми блоками, акцентами, забавными иллюстрациями
* https://www.searchviu.com/en/website-migration-seo-tool/ — быстрая загрузка, уменьшение логотипа, анимации при прокрутке

=== 2020 ===

* https://lusion.co/ — перегружено тяжелыми анимациями, но хороший эффект гамбургер меню
* https://www.proposify.com/ — супер видео, приятная верстка с легкими анимациями и минимальным параллаксом
* https://www.proposify.com/blog - там же - блог, пример иллюстраций

=== 2019 ===

* https://brave.com/ — минималистичные эффекты, нацеленность на скорость и доступность

=== 2018 ===

* https://www.wetafx.co.nz/ — новозеландская студия визуальных эффектов

=== 2017 ===

* https://www.theatlantic.com/ — большой авторитетный журнал
* https://trellis.co/
* http://fresh-design.com.ua/
* http://unakravets.com/ — дизайнер
* http://www.playtika.com — международная game-dev компания
* https://premium.wpmudev.org/blog/wordpress-retina/ - оформление статьи-инструкции.

=== 2016 ===

* https://www.netlify.com/
* http://www.s-tet.com.ua/ — небольшая веб-студия, понятная структура
* http://fantasy.co/ — отличная студия, США.
* https://artjoker.ua/ — Харьков и Киев, похоже на то, что хотим сделать мы.
* http://yedynkadigital.com/
* http://johnsonbanks.co.uk/thoughtfortheweek/ — британская студия дизайна. ссыла на страницу про разработку нового логотип Mozilla. Видно, что они не стесняются показывать большое количество вариантов, которые они делают при работе над логотипом. Для сравнения: страница обсуждения этого дизайна на сайте Mozilla: https://blog.mozilla.org/opendesign/now-for-the-fun-part/
* https://deco.agency/ - Киевская студия, специализация на WordPress, есть офис в Польше
* https://www.thenation.com/article/vladimir-sorokins-absurdist-excess/

=== Old ===

* http://theoryandpractice.ru/
* https://tjournal.ru/ — см. страницы 2-го уровня
* http://jasonsantamaria.com/ — дизайнер Jason Santa Maria из Нью-Йорка
* http://oposumo.com/

=== Просто сайты ===

* http://otakoyi.com/sozdanie-lendinga-bioaktiv/ - интересное представление портфолио
* http://thepalmerapts.com/
* http://skylinefurnituremfg.com/
* http://illusion.scene360.com/
* http://penandquill.net/
* http://bravepeople.co/
* http://humcreative.com/
* http://toys.humcreative.com/
* https://thecleansekitchen.com.au/
* http://www.echocapital.com/
* https://www.decibeldigital.com/
* http://www.lighthousebrewing.com/
* http://www.toga.com.au/
* http://finchinteriors.co.uk/
* http://www.thesocietyinc.com.au/

== Стиль Google — небольшие части, понятно разделенные, просто проиллюстрированные ==

* http://www.sistrix.de/toolbox/
* https://www.google.com/chrome/browser/desktop/index.html
* http://www.google.com/nexus/9/
* https://www.google.com/chrome/devices/google-chromebook-pixel/
* https://www.apple.com/iphone/
* https://www.apple.com/ipad-air-2/change/

== См. также ==

* [[Примеры анимации]]
* [[UX эффекты]]
* [[Buttons]]

[[Категория:Дизайн]]

Примеры сайтов - Історія редагувань

>Zina в 04:05, 30 травня 2022