Интерфейсы пользователя: различия между версиями

Материал из Artem Aleksashkin's Wiki
Перейти к навигации Перейти к поиску
Нет описания правки
 
(не показаны 33 промежуточные версии этого же участника)
Строка 8: Строка 8:


* [https://www.youtube.com/watch?v=oAAacfCfRaA Как Создать Свою Цветовую Палитру? ОСНОВЫ СОЧЕТАНИЯ ЦВЕТОВ]
* [https://www.youtube.com/watch?v=oAAacfCfRaA Как Создать Свою Цветовую Палитру? ОСНОВЫ СОЧЕТАНИЯ ЦВЕТОВ]
* [https://www.youtube.com/watch?v=uRR5V-6-HTM ТЕОРИЯ ЦВЕТА В ВЕБ-ДИЗАЙНЕ | ЦВЕТОВОЙ КРУГ]
* [https://www.youtube.com/watch?v=s5EnCKIDg80 ЦВЕТОВЫЕ СХЕМЫ: КАК СОЧЕТАТЬ ЦВЕТА]


== Fonts ==
== Fonts ==
Строка 14: Строка 16:


== Logos ==
== Logos ==
* https://logo.com/
* https://www.brandcrowd.com/logo-maker
* https://www.designhill.com/tools/logo-maker


== Icons ==
== Icons ==
Строка 20: Строка 26:


== Workflows ==
== Workflows ==
* Web as
** Documents (wiki)
** Spreadsheets (tables, numbers..)
** Presentations (landings)
* Selectors
* Tabs
* Wizard
* Split screen (Norton Commander)
* Windowed
* Dashboards
* Check engine
* Tree (comments, folders)
* Files (Icons, List, Table)
* Side panels (menu, top, right, bottom, left)
* Panel
* Start menu
* Notifications
* Header / Footer
* Unlimited Scroll
* Pinterest images


= Learn & Docs =
= Learn & Docs =
Строка 81: Строка 108:
* [https://www.youtube.com/watch?v=ydZK53Vmzf0 The easy way to handle ASYNC PIPE errors reactively]
* [https://www.youtube.com/watch?v=ydZK53Vmzf0 The easy way to handle ASYNC PIPE errors reactively]
* [https://buddy.works/tutorials/building-web-components-with-angular Web Standalone Components]
* [https://buddy.works/tutorials/building-web-components-with-angular Web Standalone Components]
* [https://mokkapps.de/blog/how-to-build-an-angular-app-once-and-deploy-it-to-multiple-environments How To Build An Angular App Once And Deploy It To Multiple Environments]


<pre>
<pre>
Строка 115: Строка 143:
* https://aurelia.io/
* https://aurelia.io/
* https://tochoromero.github.io/aurelia-bootstrap/
* https://tochoromero.github.io/aurelia-bootstrap/
= WebPack =
* https://www.youtube.com/watch?v=GNEyY70Zl30


= Typography Grid =
= Typography Grid =
Строка 124: Строка 156:
* http://grid.mindplay.dk
* http://grid.mindplay.dk
* https://www.gridlover.net/try
* https://www.gridlover.net/try
= CSS tricks =
* https://cssgradient.io/
* https://animate.style/
* https://animista.net/
* https://css-tricks.com/almanac/properties/f/filter/
* [https://www.youtube.com/watch?v=ezP4kbOvs_E Learn CSS Border Animations in 6 Minutes]


= CSS processors =
= CSS processors =
Строка 155: Строка 195:
* https://html5boilerplate.com/
* https://html5boilerplate.com/
* https://mdbootstrap.com/
* https://mdbootstrap.com/
* https://jdan.github.io/98.css/


= favicon =
= favicon =
Строка 168: Строка 209:
* https://thenounproject.com/
* https://thenounproject.com/
* https://useiconic.com/
* https://useiconic.com/
* https://feathericons.com/
* https://primer.style/foundations/icons/
* https://github.com/danklammer/bytesize-icons
* https://coreui.io/icons/
* https://fonts.google.com/icons
* http://demo.amitjakhu.com/dripicons/
* https://ikons.piotrkwiatkowski.co.uk/
* https://icons8.com/
* https://icofont.com/
* https://tabler.io/icons


= Fonts =
= Fonts =
Строка 175: Строка 226:
** goog-webfont-dl -o src/assets/fonts/FiraSans/font.css -p /assets/fonts/FiraSans -d src/assets/fonts/FiraSans -a "Fira Sans"
** goog-webfont-dl -o src/assets/fonts/FiraSans/font.css -p /assets/fonts/FiraSans -d src/assets/fonts/FiraSans -a "Fira Sans"
** goog-webfont-dl -f "Roboto Slab" -d ./src/assets/fonts/RobotoSlab -o ./src/assets/fonts/RobotoSlab/font.css -p /assets/fonts/RobotoSlab -a -y 100,200,300,400,500,600,700,800,900,100italic,200italic,300italic,400italic,500italic,700italic,800italic,900italic -u latin,latin-ext,vietnamese,greek,greek-ext,cyrillic,cyrillic-ext
** goog-webfont-dl -f "Roboto Slab" -d ./src/assets/fonts/RobotoSlab -o ./src/assets/fonts/RobotoSlab/font.css -p /assets/fonts/RobotoSlab -a -y 100,200,300,400,500,600,700,800,900,100italic,200italic,300italic,400italic,500italic,700italic,800italic,900italic -u latin,latin-ext,vietnamese,greek,greek-ext,cyrillic,cyrillic-ext
* https://fonts.adobe.com/fonts
* https://www.1001freefonts.com/
* https://www.1001freefonts.com/
* https://www.myfonts.com/
* https://www.myfonts.com/
Строка 191: Строка 243:
* https://www.axsoft.co/?ref=producthunt
* https://www.axsoft.co/?ref=producthunt
* https://jaredreich.com/pell/?ref=producthunt
* https://jaredreich.com/pell/?ref=producthunt
* https://quilljs.com/


= Landing page editors =
= Landing page editors =
Строка 269: Строка 322:
* https://apexcharts.com/
* https://apexcharts.com/
* https://visjs.org/
* https://visjs.org/
* Finance
** https://d3fc.io/
** https://techanjs.org/
** https://blog.scottlogic.com/2018/09/21/d3-financial-chart.html
** https://colineberhardt.github.io/yahoo-finance-d3fc/


= Maps =
= Maps =
Строка 336: Строка 394:
* https://beltoforion.de/en/spiral_galaxy_renderer/spiral-galaxy-renderer.html
* https://beltoforion.de/en/spiral_galaxy_renderer/spiral-galaxy-renderer.html
* https://threejs.org/examples/
* https://threejs.org/examples/
= Glass Effect =
* https://wpdean.com/css-glassmorphism/
* https://hype4.academy/tools/glassmorphism-generator
* https://webdesign.tutsplus.com/how-to-create-a-frosted-glass-effect-in-css--cms-32535t
* https://css.glass/


= Globe =
= Globe =

Текущая версия от 02:45, 18 ноября 2024

Прежде всего, конечно, речь пойдет о веб интерфейсах, т.к. веб очень популярен и браузер уже давно стал универсальным инструментом доступа к информации. В подборке будут указаны ссылки на свободные или бесплатные компоненты.

Interface.jpg

Design

Colors

Fonts

Logos

Icons

Spacings

Workflows

  • Web as
    • Documents (wiki)
    • Spreadsheets (tables, numbers..)
    • Presentations (landings)
  • Selectors
  • Tabs
  • Wizard
  • Split screen (Norton Commander)
  • Windowed
  • Dashboards
  • Check engine
  • Tree (comments, folders)
  • Files (Icons, List, Table)
  • Side panels (menu, top, right, bottom, left)
  • Panel
  • Start menu
  • Notifications
  • Header / Footer
  • Unlimited Scroll
  • Pinterest images

Learn & Docs

Загрузить видео
YouTube

Browser tests

Node.js

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
nvm install 18.20.2

curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
sudo apt-get install -y nodejs

sudo npm install npm@latest -g
npm config set registry http://registry.npmjs.org/
npm cache clear --force
npm config set strict-ssl false
npm config set legacy-peer-deps true
echo '{}' > ./package-lock.json
npm i

jQuery

Angular

sudo npm install -g @angular/cli

ng new angular-17
ng generate environments
ng add @angular/pwa
ng add @angular/localize
ng add @angular/animations
ng add @angular/platform-browser
ng add bootstrap
ng add bootstrap-icons
ng add @ng-bootstrap/ng-bootstrap
ng add @fortawesome/fontawesome-free
ng add @ng-select/ng-select

Libs

Vue.js

ReactJS

Aurelia

WebPack

Typography Grid

CSS tricks

CSS processors

Design Systems

favicon

Icons

Fonts

WYSIWYG editors

What You See Is What You Get

Landing page editors

Tables & Spreadsheets

Music Notes & ABC notaton

Math & formulas

Grids & Blocks

Croppers

Charts & Graphs

Maps

Image Viewers & Sliders

Players

См. также: Видео и аудио кодирование

Pinterest blocks

Super Select

Visual Effects

Parallax, dots, globes, etc..

Glass Effect

Globe

3D & WebGL

Custom Scrollbars

Date & Time pickers

Emoji

Drawers

ASCII

Источник — http://wiki.aleksashkin.net/index.php?title=Интерфейсы_пользователя&oldid=3279