Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ² сайта: 7 ΠΏΠΎΠ»Π΅Π·Π½Ρ‹Ρ… сСрвисов для создания ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠ° сайта

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅

ΠžΠ±Π·ΠΎΡ€ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌ для создания ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ² сайта

ΠžΒ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΡΡ‚ΠΈ ΠΏΡ€ΠΎΡ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Ρ‚ΡŒ ΡŽΠ·Π°Π±ΠΈΠ»ΠΈΡ‚ΠΈ сайта ΠΌΡ‹Β ΡƒΠΆΠ΅ Π³ΠΎΠ²ΠΎΡ€ΠΈΠ»ΠΈ Π½Π΅Β Ρ€Π°Π·. ΠšΡ‚ΠΎ пропустил, Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌ Π½Π°Ρ‡Π°Ρ‚ΡŒ с матСриала ΠΎΒ Ρ€ΠΎΠ»ΠΈΒ UX в бизнСсС ΠΈΒ ΠΊΠ°ΠΊ Π΅Π³ΠΎ ΡƒΠ»ΡƒΡ‡ΡˆΠ°Ρ‚ΡŒ. А такТС ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΡ€ΠΎΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ ΠΏΡ€ΠΎ Π°Π½Π°Π»ΠΈΠ· Ρ†Π΅Π»Π΅Π²ΠΎΠΉ Π°ΡƒΠ΄ΠΈΡ‚ΠΎΡ€ΠΈΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ цСплял ΠΊΠ»ΠΈΠ΅Π½Ρ‚ΠΎΠ².

ΠŸΡ€ΠΎ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΡ‹ ΠΌΡ‹Β ΡƒΠΆΠ΅ Π³ΠΎΠ²ΠΎΡ€ΠΈΠ»ΠΈ Π²Β Π½Π°ΡˆΠΈΡ… ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΡ… ΡΡ‚Π°Ρ‚ΡŒΡΡ…, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΊΠ°ΠΊ Π΄Π΅Π»Π°Ρ‚ΡŒ их для ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚-ΠΌΠ°Π³Π°Π·ΠΈΠ½ΠΎΠ² и для B2B-сайтов. Но, ΠΊΠ°ΠΊ говорится, повторСниС – ΠΌΠ°Ρ‚ΡŒ учСния. А послС прочтСния этой ΡΡ‚Π°Ρ‚ΡŒΠΈ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅ΠΌ ΡƒΠ³Π°Π΄Π°Ρ‚ΡŒ ΠΏΠΎΒ ΡΠΊΡ€ΠΈΠ½ΡˆΠΎΡ‚Π°ΠΌ Π½ΠΈΠΆΠ΅, Π²Β ΠΊΠ°ΠΊΠΎΠΉ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ΅ ΠΎΠ½ΠΈ сдСланы. =)

Под ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠΌ сайта ΠΏΠΎΠ½ΠΈΠΌΠ°ΡŽΡ‚ Π΄Π²Π° Π²ΠΈΠ΄Π° Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΎΠ²: Π²Π°ΠΉΡ€Ρ„Ρ€Π΅ΠΉΠΌ ΠΈΒ ΠΌΠ°ΠΊΠ΅Ρ‚. Π’Π°ΠΉΡ€Ρ„Ρ€Π΅ΠΉΠΌ (ΠΎΡ‚Β Π°Π½Π³. wireframe) – это каркас Π±ΡƒΠ΄ΡƒΡ‰Π΅ΠΉ страницы, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ΠΏΠΎΠ½ΡΡ‚ΡŒ, ΠΊΠ°ΠΊΠΈΠ΅ элСмСнты ΠΈΒ Π³Π΄Π΅ Π±ΡƒΠ΄ΡƒΡ‚ находится. ΠœΠ°ΠΊΠ΅Ρ‚Β β€“ это Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ к каркасу Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠΉ ΡΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‰Π΅ΠΉ, Ρ‚.Π΅. Π²Π°ΠΉΡ„Ρ€Π΅ΠΉΠΌ + Π΄ΠΈΠ·Π°ΠΉΠ½.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ Π²Π°ΠΉΡ€Ρ„Ρ€Π΅ΠΉΠΌΠ° ΠΈΒ ΠΌΠ°ΠΊΠ΅Ρ‚Π° для ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ экрана сайта:





Π’Β Π΄Π°Π½Π½ΠΎΠΉ ΡΡ‚Π°Ρ‚ΡŒΠ΅ мы остановимся ΠΈΠΌΠ΅Π½Π½ΠΎ Π½Π°Β ΠΎΠ±Π·ΠΎΡ€Π΅ инструмСнтов для создания Π²Π°ΠΉΡ€Ρ„Ρ€Π΅ΠΉΠΌΠΎΠ².

Π—Π°Ρ‡Π΅ΠΌ Π½ΡƒΠΆΠ΅Π½ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ для сайта?

Как Ρ‚Π΅Π°Ρ‚Ρ€ начинаСтся с вСшалки, Ρ‚Π°ΠΊ и созданиС сайта начинаСтся с прототипа. Для Ρ‡Π΅Π³ΠΎ Π½ΡƒΠΆΠ΅Π½ Π²Π°ΠΉΡ€Ρ„Ρ€Π΅ΠΉΠΌ?

  • ΠŸΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ‚ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ‚ΠΎΡ‡Π½Ρ‹ΠΉ ΠΎΠ±Ρ€Π°Π· Π±ΡƒΠ΄ΡƒΡ‰Π΅ΠΉ страницы Π±Π΅Π· отвлСчСния Π½Π°Β Π΄ΠΈΠ·Π°ΠΉΠ½. ОсновноС Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ удСляСтся Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ ΠΈΒ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΡŽ страницы – ΠΏΠΎΒ ΠΈΠ΄Π΅Π΅ это ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ шаг Π½Π°Β ΠΏΡƒΡ‚ΠΈ ΠΊΒ Π³Ρ€Π°ΠΌΠΎΡ‚Π½ΠΎΠΌΡƒ ΡŽΠ·Π°Π±ΠΈΠ»ΠΈΡ‚ΠΈ.
  • Π£ΠΏΡ€ΠΎΡ‰Π°Π΅Ρ‚ согласованиС ΠΈΠ΄Π΅ΠΉ. Π’Π°ΠΉΡ€Ρ„Ρ€Π΅ΠΉΠΌ создаСтся быстрСС, Ρ‡Π΅ΠΌ ΠΌΠ°ΠΊΠ΅Ρ‚, ΠΈΒ Π²Β Π½Π΅Π³ΠΎ Π»Π΅Π³Ρ‡Π΅ Π²Π½ΠΎΡΠΈΡ‚ΡŒ ΠΏΡ€Π°Π²ΠΊΠΈ. ΠŸΡ€ΠΎΡ†Π΅ΡΡ обсуТдСния Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² ΠΏΡ€ΠΎΡ…ΠΎΠ΄ΠΈΡ‚ Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΡ€ΠΎΡ‰Π΅.
  • Π­ΠΊΠΎΠ½ΠΎΠΌΠΈΡ‚ дСньги Π½Π°Β Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΡƒ. ΠŸΠΎΠ²Ρ‚ΠΎΡ€ΡŽΡΡŒ: Π²Β Ρ‚Π°ΠΊΠΎΠΉ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ ΠΏΡ€ΠΎΡ‰Π΅ внСсти ΠΏΡ€Π°Π²ΠΊΠΈ. На этапС Π΄ΠΈΠ·Π°ΠΉΠ½Π° и вСрстки Π²Π½ΠΎΡΠΈΡ‚ΡŒ измСнСния Π΄ΠΎΡ€ΠΎΠΆΠ΅.

ИмСнно поэтому ΠΌΡ‹Β Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌ Π½Π°Ρ‡ΠΈΠ½Π°Ρ‚ΡŒ созданиС ΠΈΠ»ΠΈ Ρ€Π΅Π΄ΠΈΠ·Π°ΠΉΠ½ с сайта с прототипа ΠΈΒ Ρ€Π°Π·Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Π΅ΠΌ Π²Π°ΠΉΡ€Ρ„Ρ€Π΅ΠΌΡ‹ для Π½Π°ΡˆΠΈΡ… ΠΊΠ»ΠΈΠ΅Π½Ρ‚ΠΎΠ².

Как Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡƒ для создания ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ² сайта

Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚ для прототипирования слСдуСт Π²Ρ‹Π±ΠΈΡ€Π°Ρ‚ΡŒ на основС своих Π·Π°Π΄Π°Ρ‡. Для Π½Π°Ρ‡Π°Π»Π° мы рассмотрим сСрвисы ΠΈΒ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π»ΡƒΡ‡ΡˆΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π²Β Ρ€Π°Π±ΠΎΡ‚Π΅, Ссли у вас нСсколько ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ². А затСм Ρ€Π°Π·Π±Π΅Ρ€Π΅ΠΌ прилоТСния для новичков – ΠΎΠ½ΠΈ идСально ΠΏΠΎΠ΄ΠΎΠΉΠ΄ΡƒΡ‚, Ссли Π²Π°ΠΌ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π½ΡƒΠΆΠ½ΠΎ быстро ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‚ΡŒ свою идСю исполнитСлям.

ΠŸΠΎΠΏΡƒΠ»ΡΡ€Π½Ρ‹Π΅ инструмСнты Π½Π°Β Ρ€Ρ‹Π½ΠΊΠ΅ для создания ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ²

  • Figma
  • InVision
  • Adobe XD
  • Sketch
  • Principle
  • ProtoPie
  • Axure

Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚Ρ‹ прототипирования сайтов для Π½ΠΎΠ²ΠΈΡ‡ΠΊΠΎΠ²

  • Balsamiq
  • MockFlow
  • Frame Box

ΠŸΠΎΠΏΡƒΠ»ΡΡ€Π½Ρ‹Π΅ инструмСнты Π½Π°Β Ρ€Ρ‹Π½ΠΊΠ΅ для создания ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ² сайта

Богласно исслСдованию ΠΎΡ‚Β ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ UXtools.co, самыС популярныС инструмСнты для создания ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ² Π²Β 2020 Π³ΠΎΠ΄Ρƒ Π±Ρ‹Π»ΠΈ:

Π”Π°Π²Π°ΠΉΡ‚Π΅ рассмотрим ΠΏΠ΅Ρ€Π²Ρ‹Π΅ 7 из них – ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΠΌ ΠΎΒ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Ρ… прСимущСствах, стоимости и слоТности интСрфСйса.

Figma

Онлайн-сСрвис, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ просто Π²Π·ΠΎΡ€Π²Π°Π» Ρ€Ρ‹Π½ΠΎΠΊ Π²Β 2020Β Π³ΠΎΠ΄Ρƒ. Доступ ΠΊΒ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΡƒ ΠΈΠ·Β ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° и возмоТности совмСстной Ρ€Π°Π±ΠΎΡ‚Ρ‹ Π½Π΅Β Ρ…Π²Π°Ρ‚Π°Π»ΠΎ ΠΌΠ½ΠΎΠ³ΠΈΠΌ ΠΊΠΎΠΌΠ°Π½Π΄Π°ΠΌ. Π•ΡΡ‚ΡŒ Ρ‚Π°ΠΊΠΆΠ΅ desktop-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, Π½ΠΎΒ Π΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ Ρ€Π΅ΠΆΠ΅. ВсС Ρ„Π°ΠΉΠ»Ρ‹ хранятся Π²Β ΠΎΠ±Π»Π°ΠΊΠ΅ Figma, поэтому Π½Π΅Ρ‚ нСобходимости ΠΏΠ΅Ρ€Π΅ΠΊΠΈΠ΄Ρ‹Π²Π°Ρ‚ΡŒ ΠΈΡ…Β ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΊΠΎΠ»Π»Π΅Π³Π°ΠΌΠΈ.

Основной минус: Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌ ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚ (ΠΊΡ€ΠΎΠΌΠ΅ дСсктопной вСрсии, Π½ΠΎΒ ΠΏΠΎΡ‚ΠΎΠΌ всС Ρ€Π°Π²Π½ΠΎ придСтся ΠΎΡ‚ΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Ρ‹ Π²Β ΠΎΠ±Π»Π°ΠΊΠΎ). Π’Π°ΠΊΠΆΠ΅ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ с трудом ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΡƒΠ΅Ρ‚ Ρ„Π°ΠΉΠ»Ρ‹ Π΄Ρ€ΡƒΠ³ΠΈΡ… ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Ссли Π²Ρ‹Β Ρ€Π΅ΡˆΠΈΠ»ΠΈ пСрСнСсти Ρ„Π°ΠΉΠ»Ρ‹ ΠΈΠ·Β Sketch).

Π‘Ρ‚ΠΎΠΈΠΌΠΎΡΡ‚ΡŒ: Π΅ΡΡ‚ΡŒ бСсплатная вСрсия Π΄ΠΎΒ Π΄Π²ΡƒΡ… Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ΠΎΠ² ΠΈΒ Π΄ΠΎΒ Ρ‚Ρ€Π΅Ρ… ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ². Π”Π°Π»Π΅Π΅ Π·Π°Β ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π° ΠΈΠ»ΠΈ Π½ΠΎΠ²Ρ‹ΠΉ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ Π±ΡƒΠ΄Π΅Ρ‚ ΡΠΏΠΈΡΡ‹Π²Π°Ρ‚ΡŒΡΡ ΠΎΠΏΠ»Π°Ρ‚Π° Π²Β 15$ мСсяц ΠΈΠ»ΠΈ 120$ Π·Π°Β Π³ΠΎΠ΄.

Π£Ρ€ΠΎΠ²Π΅Π½ΡŒ слоТности: срСдний – нСсмотря Π½Π°Β Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ инструмСнт ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΡƒΠ΅Ρ‚ сСбя ΠΊΠ°ΠΊ для Π½ΠΎΠ²ΠΈΡ‡ΠΊΠΎΠ², придСтся Π½Π΅ΠΎΠ΄Π½ΠΎΠΊΡ€Π°Ρ‚Π½ΠΎ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΎΠ±ΡƒΡ‡Π°ΡŽΡ‰ΠΈΠ΅ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Ρ‹.

InVision

Как ΠΈΒ Figma, являСтся ΠΎΠ½Π»Π°ΠΉΠ½-ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠΎΠΉ и прСдоставляСт Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ совмСстной Ρ€Π°Π±ΠΎΡ‚Ρ‹, но с болСС ΡˆΠΈΡ€ΠΎΠΊΠΈΠΌ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΠΎΠΌ ΠΈΒ Ρ€Π°Π·Π²ΠΈΡ‚ΠΎΠΉ инфраструктурой ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. ΠŸΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ‚ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ слоТныС Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΈΠ»ΠΈ Ρ€Π°Π·Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Ρ‚ΡŒ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΡƒΡŽ Π΄ΠΈΠ·Π°ΠΉΠ½-систСму.

ΠŸΠΎΡ‡Π΅ΠΌΡƒ Π½Π°Β Π²Ρ‚ΠΎΡ€ΠΎΠΌ мСстС ΠΌΠΎΠ΅Π³ΠΎ Π»ΠΈΡ‡Π½ΠΎΠ³ΠΎ Ρ€Π΅ΠΉΡ‚ΠΈΠ½Π³Π°? Из-Π·Π° ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½ΠΎΠΉ бСсплатной вСрсии ΠΈΒ Π±ΠΎΠ»Π΅Π΅ слоТного интСрфСйса. ВсС элСмСнты приходится ΠΎΡ‚Ρ€ΠΈΡΠΎΠ²Ρ‹Π²Π°Ρ‚ΡŒ с нуля ΠΈΠ»ΠΈ ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠ·Β Π΄Ρ€ΡƒΠ³ΠΎΠΉ систСмы.

Π‘Ρ‚ΠΎΠΈΠΌΠΎΡΡ‚ΡŒ: бСсплатная вСрсия Π΄ΠΎΒ 3Β Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΎΠ² ΠΈΒ Π΄ΠΎΒ 10Β Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ΠΎΠ². Π”Π°Π»Π΅Π΅ ΠΎΡ‚Β 9,95$ в мСсяц ΠΈΒ 95,4$ Π·Π°Β Π³ΠΎΠ΄.

Π£Ρ€ΠΎΠ²Π΅Π½ΡŒ слоТности: высокий. Для освоСния всСх возмоТностСй ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹ придСтся ΠΏΡ€ΠΎΠΉΡ‚ΠΈ ΠΎΠ±ΡƒΡ‡Π΅Π½ΠΈΠ΅ и для ΠΏΠΎΠ»Π½ΠΎΡ†Π΅Π½Π½ΠΎΠΉ Ρ€Π°Π±ΠΎΡ‚Ρ‹ понадобятся Π³ΠΎΡ‚ΠΎΠ²Ρ‹Π΅ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΡ‹. Π’Β Ρ†Π΅Π»ΠΎΠΌ в сСрвисС Ρ‚Ρ€ΡƒΠ΄Π½Π΅Π΅ Ρ€Π°Π·ΠΎΠ±Ρ€Π°Ρ‚ΡŒΡΡ, Ρ‡Π΅ΠΌ Π²Β Π΄Ρ€ΡƒΠ³ΠΈΡ… ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ°Ρ….

Adobe XD

Как вы поняли из названия, это ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ Adobe, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ устанавливаСтся на вашС устройство. ΠŸΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ комплСксноС Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ в создании ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ², особСнно ΡƒΠ΄ΠΎΠ±Π΅Π½ для Π±ΠΎΠ»ΡŒΡˆΠΈΡ… ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ².

Из плюсов: Ρ‡Π°ΡΡ‚ΡŒ экосистСмы Creative Cloud, ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ на быстроС Π½Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ² ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ΠΎΠΌ. Π•ΡΡ‚ΡŒ русская вСрсия. Π€Π°ΠΉΠ»Ρ‹ Sketch ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ Π²Β Adobe XD.

Один из минусов: частыС обновлСния, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ нС всСгда Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎ и тормозят Ρ€Π°Π±ΠΎΡ‡ΠΈΠΉ процСсс. Π’Β Ρ†Π΅Π»ΠΎΠΌ инструмСнт Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ ΠΌΠ΅Π΄Π»Π΅Π½Π½Π΅Π΅, Ρ‡Π΅ΠΌ упомянутыС Π²Ρ‹ΡˆΠ΅ сСрвисы.

Π‘Ρ‚ΠΎΠΈΠΌΠΎΡΡ‚ΡŒ: Π΅ΡΡ‚ΡŒ бСсплатная вСрсия для ΠΎΠ΄Π½ΠΎΠ³ΠΎ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π° ΠΈΒ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°. Π’Π°ΠΊΠΆΠ΅ сСрвис бСсплатный для Ρ‚Π΅Ρ…, ΡƒΒ ΠΊΠΎΠ³ΠΎ Π΅ΡΡ‚ΡŒ подписка Creative Cloud. ΠŸΠ»Π°Ρ‚Π½Π°Ρ вСрсия ΠΎΡ‚Β 1Β 481 рубля в мСсяц.

Π£Ρ€ΠΎΠ²Π΅Π½ΡŒ слоТности: срСдний. Для Ρ‚Π΅Ρ…, ΠΊΡ‚ΠΎ ΡƒΠΆΠ΅ Ρ€Π°Π±ΠΎΡ‚Π°Π» с продуктами Adobe, Π½Π΅Β Π²ΠΎΠ·Π½ΠΈΠΊΠ½Π΅Ρ‚ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ Ρ€Π°Π·ΠΎΠ±Ρ€Π°Ρ‚ΡŒΡΡ в интСрфСйсС ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹. Π’Β ΠΏΡ€ΠΎΡ‚ΠΈΠ²Π½ΠΎΠΌ случаС Π»ΡƒΡ‡ΡˆΠ΅ ΠΈΠ·ΡƒΡ‡ΠΈΡ‚ΡŒ Ρ‚ΡƒΡ‚ΠΎΡ€ΠΈΠ°Π»Ρ‹.

Sketch

ДСсктопноС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ для Mac, Π±Ρ‹Π» Π»ΠΈΠ΄Π΅Ρ€ΠΎΠΌ срСди инструмСнтов 2019Β Π³ΠΎΠ΄Ρƒ. ΠžΠ³Ρ€ΠΎΠΌΠ½ΠΎΠ΅ прСимущСство – интСграция с большим количСством сСрвисов ΠΈΒ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ², Π°Β Ρ‚Π°ΠΊΠΆΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π²Β Π΅Π΄ΠΈΠ½ΠΎΠΌ Ρ€Π°Π±ΠΎΡ‡Π΅ΠΌ пространствС.

Π˜Π·Β ΠΌΠΈΠ½ΡƒΡΠΎΠ²: отсутствиС вСрсии для Windows. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, ΠΏΡ€ΠΈ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠΈ большого количСства ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² получаСтся громоздкая систСма, которая Π΄ΠΎΠ»Π³ΠΎ загруТаСтся.

Π‘Ρ‚ΠΎΠΈΠΌΠΎΡΡ‚ΡŒ: Π΅ΡΡ‚ΡŒ бСсплатная вСрсия на мСсяц, Π·Π°Ρ‚Π΅ΠΌ ΠΎΡ‚Β 99$ Π²Β Π³ΠΎΠ΄. ΠŸΡ€ΠΈΡ‡Π΅ΠΌ ΠΏΠΎΠΊΡƒΠΏΠ°ΡŽΡ‚ΡΡ ΠΈΠΌΠ΅Π½Π½ΠΎ обновлСния, ΠΌΠΎΠΆΠ½ΠΎ по истСчСнии срока ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΎΠΉ, Π½ΠΎΒ Π±Π΅Π· ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠΉ.

Π£Ρ€ΠΎΠ²Π΅Π½ΡŒ слоТности: срСдний. Π’ΠΎΠΊΡ€ΡƒΠ³ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π° ΡΡ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Π»ΠΎΡΡŒ сообщСство, поэтому Π½Π°ΠΉΡ‚ΠΈ ΠΎΠ±ΡƒΡ‡Π°ΡŽΡ‰ΠΈΠ΅ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Ρ‹ нС составит Ρ‚Ρ€ΡƒΠ΄Π°.

Principle

Π•Ρ‰Π΅ ΠΎΠ΄Π½ΠΎ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ для MacΒ OS, ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ΅ на созданиС Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ². Π’Β Π½Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ„Π°ΠΉΠ»Ρ‹ ΠΈΠ·Β Figma ΠΈΒ Sketch для налоТСния Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ.

Π˜Π·Β ΠΌΠΈΠ½ΡƒΡΠΎΠ²: сСрвис, скорСС, большС Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ для Π³ΠΎΡ‚ΠΎΠ²ΠΎΠ³ΠΎ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠ°, Ρ‡Π΅ΠΌ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ΄ ΠΊΠ»ΡŽΡ‡. Π’Π°ΠΊΠΆΠ΅ отсутствуСт вСрсия для Windows, а сам интСрфСйс на английском языкС.

Π‘Ρ‚ΠΎΠΈΠΌΠΎΡΡ‚ΡŒ: 14Β Π΄Π½Π΅ΠΉ бСсплатной вСрсии (ΠΏΡ€ΠΈΡ‡Π΅ΠΌ ΡΡ‡ΠΈΡ‚Π°ΡŽΡ‚ΡΡ ΠΈΠΌΠ΅Π½Π½ΠΎ Ρ€Π°Π±ΠΎΡ‡ΠΈΠ΅ Π΄Π½ΠΈ, Π°Β Π½Π΅Β ΠΊΠ°Π»Π΅Π½Π΄Π°Ρ€Π½Ρ‹Π΅), Π΄Π°Π»Π΅Π΅ 129$ Π²Β Π³ΠΎΠ΄.

Π£Ρ€ΠΎΠ²Π΅Π½ΡŒ слоТности: срСдний. МоТно Π΄Π°ΠΆΠ΅ ΡΠΊΠ°Π·Π°Ρ‚ΡŒ Π»Π΅Π³ΠΊΠΈΠΉ, Ссли ΡΡ€Π°Π²Π½ΠΈΠ²Π°Ρ‚ΡŒ с созданиСм Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π²Β Adobe After Effects.

ProtoPie

Π•Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ инструмСнт, ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ на созданиС ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ². Π Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ для Mac и для Windows. ΠŸΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΄Π°Ρ‚Ρ‡ΠΈΠΊΠΈ в смартфонах: гироскоп, ΠΊΠ°ΠΌΠ΅Ρ€Π°, ΠΌΠΈΠΊΡ€ΠΎΡ„ΠΎΠ½ ΠΈΒ Π΄Ρ€. МоТно ΡΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΡ‹ взаимодСйствия ΠΌΠ΅ΠΆΠ΄Ρƒ устройствами, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Ρ‡Π°Ρ‚-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅. Π•ΡΡ‚ΡŒ ΠΈΠΌΠΏΠΎΡ€Ρ‚ ΠΈΠ·Β Figma ΠΈΒ Adobe XD.

Π˜Π·Β ΠΌΠΈΠ½ΡƒΡΠΎΠ²: нСбольшоС количСство ΠΎΠ±ΡƒΡ‡Π°ΡŽΡ‰ΠΈΡ… ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»ΠΎΠ² на русском языкС, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ Principle – это большС Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅, Ρ‡Π΅ΠΌ ΠΏΠΎΠ»Π½ΠΎΡ†Π΅Π½Π½Ρ‹ΠΉ сСрвис по созданию ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ².

Π‘Ρ‚ΠΎΠΈΠΌΠΎΡΡ‚ΡŒ: 30Β Π΄Π½Π΅ΠΉ бСсплатной вСрсии, Π΄Π°Π»Π΅Π΅ 11$ в мСсяц ΠΈΠ»ΠΈ 129$ Π²Β Π³ΠΎΠ΄.

Π£Ρ€ΠΎΠ²Π΅Π½ΡŒ слоТности: срСдний. В настройкС основной Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π°Π·ΠΎΠ±Ρ€Π°Ρ‚ΡŒΡΡ ΠΈΒ Π±Π΅Π· инструкций. ΠŸΡ€ΠΈΠ΄Π΅Ρ‚ΡΡ ΠΏΠΎΠΊΠΎΠΏΠ°Ρ‚ΡŒΡΡ Π²Β ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Π°Ρ…, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π°ΡƒΡ‡ΠΈΡ‚ΡŒΡΡ Π½Π°ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒ использованиС Π΄Π°Ρ‚Ρ‡ΠΈΠΊΠΎΠ² ΠΈΠ»ΠΈ взаимодСйствиС ΠΌΠ΅ΠΆΠ΄Ρƒ устройствами.

Axure

ДСсктопноС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ с большой Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΎΠΉ элСмСнтов. Π¨ΠΈΡ€ΠΎΠΊΠΈΠ΅ возмоТности создания слоТного ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠ° Π±Π΅Π· написания ΠΊΠΎΠ΄Π°. Π Π°Π±ΠΎΡ‚Ρƒ Π»Π΅Π³ΠΊΠΎ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ Π²Β ΠΎΠ±Π»Π°ΠΊΠΎ, Π°Β Π·Π°Ρ‚Π΅ΠΌ Π²Β Π²ΠΈΠ΄Π΅ ссылки ΠΏΠ΅Ρ€Π΅Π΄Π°Π²Π°Ρ‚ΡŒ ΠΊΠ»ΠΈΠ΅Π½Ρ‚Ρƒ для дСмонстрации ΠΈΠ»ΠΈ ΠΊΠΎΠ»Π»Π΅Π³Π°ΠΌ для ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ… этапов Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ. БобствСнно, Π²Β Π΄Π°Π½Π½ΠΎΠΉ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ΅ ΠΌΡ‹Β ΠΈΒ Π΄Π΅Π»Π°Π΅ΠΌ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΡ‹ для сайтов ΠΊΠ»ΠΈΠ΅Π½Ρ‚ΠΎΠ².

ΠœΠΈΠ½ΡƒΡΡ‹: мСньшС возмоТностСй Ρ€Π°Π±ΠΎΡ‚Ρ‹ с графикой (Ρ‡Π΅ΠΌ ΡƒΒ Ρ‚ΠΎΠ³ΠΎΒ ΠΆΠ΅ Sketch), ΡΡ‚ΠΎΠΈΠΌΠΎΡΡ‚ΡŒ Π²Ρ‹ΡˆΠ΅, Ρ‡Π΅ΠΌ ΡƒΒ Ρ‚Π΅Ρ… сСрвисов, Ρ‡Ρ‚ΠΎ рассмотрСны Ρ€Π°Π½Π΅Π΅.

Π‘Ρ‚ΠΎΠΈΠΌΠΎΡΡ‚ΡŒ: Π΅ΡΡ‚ΡŒ бСсплатная вСрсия на мСсяц, Π°Β Π·Π°Ρ‚Π΅ΠΌ 420$ Π²Β Π³ΠΎΠ΄.

Π£Ρ€ΠΎΠ²Π΅Π½ΡŒ слоТности: срСдний. На пСрвый взгляд интСрфСйс каТСтся слоТным, Π½ΠΎΒ ΡƒΠΆΠ΅ Π²Β Ρ‚Π΅Ρ‡Π΅Π½ΠΈΠ΅ часа ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΊΠΈΠ΄Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΡΡ‚Π΅Π½ΡŒΠΊΠΈΠΉ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ. Π›Π΅Π³ΠΊΠΎ Π½Π°ΠΉΡ‚ΠΈ ΠΎΠ±ΡƒΡ‡Π°ΡŽΡ‰ΠΈΠ΅ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Ρ‹.

Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚Ρ‹ для прототипирования сайтов для Π½ΠΎΠ²ΠΈΡ‡ΠΊΠΎΠ²

Π‘Β ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ°ΠΌΠΈ для исполнитСлСй Ρ€Π°Π·ΠΎΠ±Ρ€Π°Π»ΠΈΡΡŒ, Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ рассмотрим Π±ΠΎΠ»Π΅Π΅ простыС инструмСнты.

Balsamiq

Онлайн-ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ° для создания нСслоТных ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ², которая идСальна для быстрой ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡ΠΈ ΠΈΠ΄Π΅ΠΈ, основной структуры страницы. ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ совмСстноС Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅. Π•ΡΡ‚ΡŒ дСсктопная вСрсия

Π˜Π·Β ΠΌΠΈΠ½ΡƒΡΠΎΠ²: ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½Ρ‹Π΅ возмоТности, Π½Π΅Β ΠΏΠΎΠ΄ΠΎΠΉΠ΄Π΅Ρ‚ для слоТных ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ².

Π‘Ρ‚ΠΎΠΈΠΌΠΎΡΡ‚ΡŒ: бСсплатная вСрсия Π½Π°Β 30Β Π΄Π½Π΅ΠΉ, Π΄Π°Π»Π΅Π΅ ΠΎΡ‚Β 9$ в мСсяц ΠΈΠ»ΠΈ 90$ Π²Β Π³ΠΎΠ΄ за сСрвис.

Π£Ρ€ΠΎΠ²Π΅Π½ΡŒ слоТности: Π½ΠΈΠ·ΠΊΠΈΠΉ. ΠŸΡ€ΠΎΡΡ‚ΠΎΠΉ интСрфСйс ΠΈΒ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° Π³ΠΎΡ‚ΠΎΠ²Ρ‹Ρ… элСмСнтов позволят быстро Π½Π°Π±Ρ€ΠΎΡΠ°Ρ‚ΡŒ идСю страницы, Π΄Π°ΠΆΠ΅ нСсмотря на английский язык.

MockFlow

Π‘ΠΎΠ»Π΅Π΅ ΠΏΡ€ΠΎΠ΄Π²ΠΈΠ½ΡƒΡ‚Ρ‹ΠΉ ΠΎΠ½Π»Π°ΠΉΠ½-сСрвис, Ρ‡Π΅ΠΌ Balsamiq. Π•ΡΡ‚ΡŒ дСсктопная вСрсия. МоТно ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ для ускорСния Ρ€Π°Π±ΠΎΡ‚Ρ‹ ΠΈΒ ΡΠΊΡΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ„Π°ΠΉΠ»Ρ‹ ΠΏΠΎΡ‡Ρ‚ΠΈ во всСх Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Ρ… Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π°Ρ….

ΠœΠΈΠ½ΡƒΡΡ‹: нСсмотря Π½Π°Β Π±ΠΎΠ»Π΅Π΅ ΡˆΠΈΡ€ΠΎΠΊΠΈΠΉ список Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ, Π±ΡƒΠ΄Π΅Ρ‚ Π½Π΅ΡƒΠ΄ΠΎΠ±Π΅Π½ ΠΏΡ€ΠΈ Ρ€Π°Π±ΠΎΡ‚Π΅ с многоуровнСвой структурой и большим количСством ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ².

Π‘Ρ‚ΠΎΠΈΠΌΠΎΡΡ‚ΡŒ: бСсплатная вСрсия для ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° ΠΈΒ Π΄Π²ΡƒΡ… Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ΠΎΠ². ΠžΡ‚Β 36$ в мСсяц для ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹.

Π£Ρ€ΠΎΠ²Π΅Π½ΡŒ слоТности: Π½ΠΈΠ·ΠΊΠΈΠΉ. Π›Π΅Π³ΠΊΠΎ Π½Π°Ρ‡Π°Ρ‚ΡŒ Π½ΠΎΠ²Ρ‹ΠΉ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚, Π΅ΡΡ‚ΡŒ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° Π³ΠΎΡ‚ΠΎΠ²Ρ‹Ρ… элСмСнтов.

Frame Box

Π‘Π°ΠΌΡ‹ΠΉ Π»Π΅Π³ΠΊΠΈΠΉ из инструмСнтов, ΠΏΡ€ΠΈ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π΅ на сайт сразу попадаСшь на панСль создания ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠ°. АвтоматичСски Ρ„ΠΎΡ€ΠΌΠΈΡ€ΡƒΠ΅Ρ‚ ссылку для Ρ€Π°ΡΡˆΠ°Ρ€ΠΈΠ²Π°Π½ΠΈΡ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°. Π•ΡΡ‚ΡŒ Ρ€Π΅ΠΆΠΈΠΌ прСдпросмотра.

БСрвис ΠΏΡ€ΠΈΠΌΠΈΡ‚ΠΈΠ²Π½Ρ‹ΠΉ, поэтому ΠΏΠΎΠ΄ΠΎΠΉΠ΄Π΅Ρ‚ для Ρ€Π°Π±ΠΎΡ‚Ρ‹ с одной страницСй.

Π‘Ρ‚ΠΎΠΈΠΌΠΎΡΡ‚ΡŒ: бСсплатно.

Π£Ρ€ΠΎΠ²Π΅Π½ΡŒ слоТности: Π½ΠΈΠ·ΠΊΠΈΠΉ, ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π°Π·ΠΎΠ±Ρ€Π°Ρ‚ΡŒΡΡ Π±Π΅Π· инструкций.

Π˜Ρ‚ΠΎΠ³ΠΈ

Π­Ρ‚ΠΎ Π΄Π°Π»Π΅ΠΊΠΎ нС всС сСрвисы, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Ρ‹ для прототипирования сайтов ΠΈΒ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. Π•Ρ‰Π΅ Ρ€Π°Π· повторимся, Ρ‡Ρ‚ΠΎ инструмСнт стоит Π²Ρ‹Π±ΠΈΡ€Π°Ρ‚ΡŒ на основС Π²Π°ΡˆΠΈΡ… Π·Π°Π΄Π°Ρ‡. Π˜Β Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌ ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ нСсколько ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ½ΡΡ‚ΡŒ ΠΊΠ°ΠΊΠΎΠ΅ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ ΠΈΠΌΠ΅Π½Π½ΠΎ Π²Π°ΠΌ.

Если Π²Π°ΠΌ Π½ΡƒΠΆΠ½Π° ΠΏΠΎΠΌΠΎΡ‰ΡŒ Π²Β Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠ°, то вы всСгда ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚ΡŒΡΡ к нам – ΡΒ ΡƒΠ΄ΠΎΠ²ΠΎΠ»ΡŒΡΡ‚Π²ΠΈΠ΅ΠΌ ΠΏΡ€ΠΎΡ€Π°Π±ΠΎΡ‚Π°Π΅ΠΌ структуру страницы с позиции ΡŽΠ·Π°Π±ΠΈΠ»ΠΈΡ‚ΠΈ, SEO ΠΈΒ ΠΌΠ°Ρ€ΠΊΠ΅Ρ‚ΠΈΠ½Π³Π°.

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠ° сайта: 7 инструмСнтов для ΠΌΠ°Ρ€ΠΊΠ΅Ρ‚ΠΎΠ»ΠΎΠ³Π° | Π‘Π»ΠΎΠ³ YAGLA

Как ΠΎΠ±ΡŠΡΡΠ½ΠΈΡ‚ΡŒ Ρ‡Π΅Ρ‚ΠΊΠΎ, ΠΊΠ°ΠΊΠΈΠΌ Π²Ρ‹ Π²ΠΈΠ΄ΠΈΡ‚Π΅ Π±ΡƒΠ΄ΡƒΡ‰ΠΈΠΉ сайт ΠΈΠ»ΠΈ мобильноС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅? РСшСниС – созданиС ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠ°.

Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ Π²Ρ‹ ΡƒΠ·Π½Π°Π΅Ρ‚Π΅ Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ ΠΈ ΠΊΠ°ΠΊ Π΅Π³ΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ 7 ΠΎΠ½Π»Π°ΠΉΠ½-сСрвисов.

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ сайта

ΠŸΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ – ΠΌΠ°ΠΊΠ΅Ρ‚, ΠΈΠ»ΠΈ физичСская рСализация ΠΊΠΎΠ½Ρ†Π΅ΠΏΡ‚Π° интСрфСйса. Π•Ρ‰Ρ‘ 15 Π»Π΅Ρ‚ Π½Π°Π·Π°Π΄, ΠΊΠΎΠ³Π΄Π° ΠΎ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΠ΅ Β«Mobile firstΒ» Π΅Ρ‰Ρ‘ Π½ΠΈΠΊΡ‚ΠΎ Π½Π΅ Π΄ΡƒΠΌΠ°Π», страница-ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ содСрТала ΠΎΠ±Ρ€Π°Π·Ρ†Ρ‹ Π΄ΠΈΠ·Π°ΠΉΠ½Π° всСх элСмСнтов сайта – Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ², списков, Ρ†ΠΈΡ‚Π°Ρ‚, Π°Π±Π·Π°Ρ†Π΅Π².

БСгодня этого ΠΌΠ°Π»ΠΎ: ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π·Π°Ρ…ΠΎΠ΄ΠΈΡ‚ Π½Π° сайт Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ с ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π°, Π° вСрстка для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств сущСствСнно отличаСтся ΠΎΡ‚ вСрстки для дСсктопов. ΠŸΡ€ΠΈ этом Ρ„ΡƒΠ½Π΄Π°ΠΌΠ΅Π½Ρ‚ – ΠΏΡƒΡ‚ΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ ΠΏΠΎ сайту Π² соотвСтствии с Π²ΠΎΡ€ΠΎΠ½ΠΊΠΎΠΉ – Π½ΡƒΠΆΠ½ΠΎ Π²Ρ‹ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Π·Π°Ρ€Π°Π½Π΅Π΅. А Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΡ€ΠΎΠ΄ΡƒΠΌΠ°Ρ‚ΡŒ всС Π½ΡŽΠ°Π½ΡΡ‹ ΠΈ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ интСрфСйса.

Допустим, Π²Ρ‹ Π½Π΅ Π²Π»Π°Π΄Π΅Π΅Ρ‚Π΅ Π½Π°Π²Ρ‹ΠΊΠ°ΠΌΠΈ вСрстки, программирования ΠΈ графичСскими Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π°ΠΌΠΈ. Как ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ? БовсСм Π½Π΅Π΄Π°Π²Π½ΠΎ для наглядности использовали лист Π±ΡƒΠΌΠ°Π³ΠΈ ΠΈ ΡˆΠ°Ρ€ΠΈΠΊΠΎΠ²ΡƒΡŽ Ρ€ΡƒΡ‡ΠΊΡƒ. Π’Π°ΠΊ выглядСл ΠΎΠ±Ρ€Π°Π·Π΅Ρ† ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠ° Π² исполнСнии ΡΠΌΠΎΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π·Π°ΠΊΠ°Π·Ρ‡ΠΈΠΊΠ°:

БСгодня Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ ΠΏΠ°Ρ‡ΠΊΠ°Ρ‚ΡŒ Π±ΡƒΠΌΠ°Π³Ρƒ ΠΈΠ»ΠΈ ΠΎΡΠ²Π°ΠΈΠ²Π°Ρ‚ΡŒ графичСскиС Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Ρ‹. ΠŸΡ€ΠΈ любом ΡƒΡ€ΠΎΠ²Π½Π΅ ΠΏΠΎΠ΄Π³ΠΎΡ‚ΠΎΠ²ΠΊΠΈ Π²Ρ‹ соорудитС ΠΆΠ΅Π»Π°Π΅ΠΌΡƒΡŽ раскладку ΠΈΠ· Π³ΠΎΡ‚ΠΎΠ²Ρ‹Ρ… элСмСнтов интСрфСйса, ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΉ ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ интСрактивности – ΠΈ ΠΏΡ€ΠΈΠ³Π»Π°ΡˆΠ°ΠΉΡ‚Π΅ для обсуТдСния ΠΊΠΎΠ»Π»Π΅Π³.Β 

Онлайн-сСрвисы прототипирования ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΎΡ‚ простых эскизов Π΄ΠΎ ΠΏΠΎΠ»Π½ΠΎΡ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² с Ρ€Π°Π±ΠΎΡ‡ΠΈΠΌΠΈ ссылками ΠΈ элСмСнтами интСрфСйса. Β 

Π”Π°Π»Π΅Π΅ – 7 Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ², Ρƒ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ свой спСктр возмоТностСй, ΡΠ»ΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρ‹ ΠΈ Ρ†Π΅Π½Π°. Π’Ρ‹Π±ΠΎΡ€ Π·Π° Π²Π°ΠΌΠΈ.

InVision

Π­Ρ‚ΠΎ идСальноС Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅, Ссли Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Β«ΠΎΠΆΠΈΠ²ΠΈΡ‚ΡŒΒ» Π³ΠΎΡ‚ΠΎΠ²Ρ‹Π΅ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ Photoshop ΠΈΠ»ΠΈ Sketch.

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: ΠΏΠ»Π°Π³ΠΈΠ½ для Adobe Photoshop ΠΈ для Sketch ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ ΠΈΠ· Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π° прямо Π² InVision. Π Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ синхронизация Ρ„Π°ΠΉΠ»ΠΎΠ² Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°, с Ρ€Π°Π±ΠΎΡ‡ΠΈΠΌ столом Π»ΠΈΠ±ΠΎ Dropbox (для этого Π½ΡƒΠΆΠ½Ρ‹ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ прилоТСния).

Π“Π»Π°Π²Π½Ρ‹ΠΉ плюс прилоТСния – систСма управлСния ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°ΠΌΠΈ. Π’Ρ‹ сохраняСтС эскизы Π² Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°Ρ… ΠΈ раздСляСтС ΠΈΡ… Π½Π° Π³Ρ€ΡƒΠΏΠΏΡ‹. МоТно Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ нСсколько Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ², Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, для страницы «О ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈΒ», Ρ„ΠΈΠΊΡΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ всС ΠΏΡ€Π°Π²ΠΊΠΈ ΠΈ стадии.

ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, InVision добавляСт ΠΌΠ°ΠΊΠ΅Ρ‚Π°ΠΌ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ. Для этого Π½Π°Π·Π½Π°Ρ‡ΡŒΡ‚Π΅ ссылки Π½Π° элСмСнты, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡΠ²ΡΠ·Ρ‹Π²Π°ΡŽΡ‚ страницы ΠΈ элСмСнты ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°.

ВсС дСйствия ΠΏΠΎ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρƒ Ρ„ΠΈΠΊΡΠΈΡ€ΡƒΡŽΡ‚ΡΡ Π½Π° Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ Β«ActivityΒ». Π­Ρ‚ΠΎ ΡƒΠ΄ΠΎΠ±Π½ΠΎ ΠΏΡ€ΠΈ Π³Ρ€ΡƒΠΏΠΏΠΎΠ²ΠΎΠΉ Ρ€Π°Π±ΠΎΡ‚Π΅ Π½Π°Π΄ ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠΌ: Π²Ρ‹ Ρ‚ΠΎΡ‡Π½ΠΎ Π·Π½Π°Π΅Ρ‚Π΅, ΠΊΡ‚ΠΎ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΠ» Ρ„Π°ΠΉΠ»Ρ‹ ΠΈΠ»ΠΈ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π» ваш ΠΌΠ°ΠΊΠ΅Ρ‚ своими ΠΊΡ€ΠΈΠ²Ρ‹ΠΌΠΈ Ρ€ΡƒΠΊΠ°ΠΌΠΈ (Π»ΠΈΠ±ΠΎ Π΄ΠΎΠ²Π΅Π» Π΅Π³ΠΎ Π΄ΠΎ ΡΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½ΡΡ‚Π²Π°).

Π₯ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΎΠ±Ρ€Π°Ρ‚Π½ΡƒΡŽ связь? Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚ позволяСт Π΄Π΅Π»ΠΈΡ‚ΡŒΡΡ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π°ΠΌΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ сгСнСрированных ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Ρ… адрСсов. Участники ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹ ΠΌΠΎΠ³ΡƒΡ‚ ΠΎΠ±ΡΡƒΠ΄ΠΈΡ‚ΡŒ с Π²Π°ΠΌΠΈ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Π΅ элСмСнты, ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎΠΌΠ΅Ρ‚ΠΊΠΈ Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅.Β 

Π‘ΠΎΠ»ΡŒΡˆΠΎΠΉ минус – Π½Π΅Ρ‚ встроСнных Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ Π³ΠΎΡ‚ΠΎΠ²Ρ‹Ρ… элСмСнтов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π² ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π΅. ΠœΠ°ΠΊΡΠΈΠΌΡƒΠΌ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ – Π½ΠΈΠ·ΠΊΠΎΡƒΡ€ΠΎΠ²Π½Π΅Π²Ρ‹ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚, ΡΠ°ΠΌΡƒΡŽ ΠΏΠ΅Ρ€Π²ΡƒΡŽ ΠΈΡ‚Π΅Ρ€Π°Ρ†ΠΈΡŽ, Π³ΠΎΡ‚ΠΎΠ²ΡƒΡŽ для развития ΠΈ обсуТдСния.

Для этого Π²Ρ‹Π±ΠΈΡ€Π°Π΅Ρ‚Π΅ нСсколько Π³ΠΎΡ‚ΠΎΠ²Ρ‹Ρ… раскладок ΠΈΠ· Π΄Π΅ΠΌΠΎ-ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΡ‹ для Ρ€Π°Π·Π½Ρ‹Ρ… устройств ΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… Ρ‚ΠΈΠΏΠΎΠ² страниц.

Π‘ΠΎΠ»ΡŒΡˆΠΎΠΉ плюс – инструмСнт бСсплатный.

InVision

Balsamiq

НСт Photoshop ΠΈΠ»ΠΈ Sketch? Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Balsamiq – Π»ΡƒΡ‡ΡˆΠΈΠΉ инструмСнт для вас. Он Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚, ΠΊΠ°ΠΊ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ для Ρ€Π°Π±ΠΎΡ‡Π΅Π³ΠΎ стола. Π•ΡΡ‚ΡŒ ΠΈ Π²Π΅Π±-вСрсия.

Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚ содСрТит Π²Π½ΡƒΡˆΠΈΡ‚Π΅Π»ΡŒΠ½ΡƒΡŽ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ встроСнных элСмСнтов UI для использования Π² ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°Ρ…. Π­Ρ‚ΠΎ экономит врСмя: Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ Π³ΠΎΡ‚ΠΎΠ²Ρ‹Π΅ прСсСты (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰ΠΈΠ΅ мСню ΠΈΠ»ΠΈ Β«Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Ρ‹Β»).

Π‘Ρ…Π΅ΠΌΠ° Ρ€Π°Π±ΠΎΡ‚Ρ‹ простая: пСрСтаскиваСтС Π²Ρ‹Π±Ρ€Π°Π½Π½Ρ‹ΠΉ элСмСнт с Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ, располагаСтС, Π³Π΄Π΅ Π½ΡƒΠΆΠ½ΠΎ, панСль настроСк справа ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π΅Π³ΠΎ ΠΏΠΎ Ρ†Π²Π΅Ρ‚Ρƒ, Ρ„ΠΎΠ½Ρƒ, Ρ€Π°Π·ΠΌΠ΅Ρ€Ρƒ, Π½Π°Π·Π½Π°Ρ‡ΠΈΡ‚ΡŒ ссылку ΠΈ Ρ‚.Π΄.

ΠŸΡ€Π΅Π΄Π»Π°Π³Π°Π΅ΠΌΡ‹Π΅ ΠΏΡ€ΠΈΠΌΠΈΡ‚ΠΈΠ²Ρ‹ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ ΡΡ„ΠΎΠΊΡƒΡΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ ΠΈ Π½Π΅ Ρ‚Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ врСмя Π½Π° Π½ΡŽΠ°Π½ΡΡ‹ Π΄ΠΈΠ·Π°ΠΉΠ½Π°.

НуТно ΠΎΡ†Π΅Π½ΠΈΡ‚ΡŒ нСсколько Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² Π΄ΠΈΠ·Π°ΠΉΠ½Π°? НС вопрос, инструмСнт ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ срСдства контроля вСрсий ΠΈ ΠΈΡΡ‚ΠΎΡ€ΠΈΡŽ вСрсий. ΠœΠΎΠΆΠ΅Ρ‚Π΅ Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒΡΡ Π½Π°Π·Π°Π΄ ΠΏΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ ΠΈ ΠΎΡ†Π΅Π½ΠΈΡ‚ΡŒ, насколько продвинулся ваш Π΄ΠΈΠ·Π°ΠΉΠ½.

Balsamiq прСдусматриваСт Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΡ сторонних Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² – ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΈΠ»ΠΈ инструмСнты управлСния.

Π“Π»Π°Π²Π½Ρ‹ΠΉ минус – ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠ»Π°Ρ‚Π½ΠΎΠ΅. Π₯отя Ρ†Π΅Π½Ρ‹ Π²ΠΏΠΎΠ»Π½Π΅ ΠΏΠΎΠ΄ΡŠΠ΅ΠΌΠ½Ρ‹: вСрсия для дСсктопа стоит $89 Π·Π° ΠΎΠ΄Π½Ρƒ Π»ΠΈΡ†Π΅Π½Π·ΠΈΡŽ, Π²Π΅Π±-вСрсия Π½Π° 3 ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° – $12 Π² мСсяц. Π•ΡΡ‚ΡŒ бСсплатный ΠΏΡ€ΠΎΠ±Π½Ρ‹ΠΉ ΠΏΠ΅Ρ€ΠΈΠΎΠ΄ Π½Π° 1 мСсяц для нСкоммСрчСских ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ².

Balsamiq

Moqups

Π­Ρ‚ΠΎ ΠΏΠΎΠ»Π½ΠΎΡ†Π΅Π½Π½ΠΎΠ΅ Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΎΡ‚ простого эскиза Π΄ΠΎ Π³ΠΎΡ‚ΠΎΠ²ΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚Π°.

Как ΠΈ Π² Balsamiq, Ρ‚ΡƒΡ‚ Π΅ΡΡ‚ΡŒ встроСнная Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° Π³ΠΎΡ‚ΠΎΠ²Ρ‹Ρ… элСмСнтов. Π’ процСссС Ρ€Π°Π±ΠΎΡ‚Ρ‹ Π²Ρ‹ оставляСтС ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ, ΠΎΡ‚ΠΌΠ΅Ρ‡Π°Π΅Ρ‚Π΅ Ρ†Π΅Π»ΠΈ ΠΈ Π·Π°Π΄Π°Ρ‡ΠΈ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ этапа ΠΈ элСмСнта.

НС Π³ΠΎΡ‚ΠΎΠ²Ρ‹ сразу Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π½Π°Π΄ эскизами? ΠŸΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ прСдусматриваСт инструмСнт, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ строит Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΡ‹ ΠΈ Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ для наглядного прСдставлСния ΠΏΡƒΡ‚Π΅ΠΉ Π±ΡƒΠ΄ΡƒΡ‰Π΅Π³ΠΎ посСтитСля ΠΏΠΎ сайту.

Π’Π°ΡˆΠΈ ΠΊΠΎΠ»Π»Π΅Π³ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΠΎΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ ΠΏΠΎΠΌΠ΅Ρ‚ΠΊΠΈ ΠΈ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ ΠΏΠΎ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΌ элСмСнтам ΠΌΠ°ΠΊΠ΅Ρ‚Π°. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΡ‚Π²Π΅Ρ‡Π°Ρ‚ΡŒ ΠΈ ΡΠΎΡ…Ρ€Π°Π½ΡΡ‚ΡŒ эту пСрСписку Π² ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π΅.

Moqups – Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, вся Ρ€Π°Π±ΠΎΡ‚Π° ΠΏΡ€ΠΎΡ…ΠΎΠ΄ΠΈΡ‚ ΠΈΡΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΎΠ½Π»Π°ΠΉΠ½. Π’Π°ΡˆΠΈ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρ‹ хранятся Π½Π° сСрвСрах Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°.

БСрвис ΠΏΠ»Π°Ρ‚Π½Ρ‹ΠΉ, ΡΡ‚ΠΎΠΈΠΌΠΎΡΡ‚ΡŒ Ρ‚Π°Ρ€ΠΈΡ„Π° зависит ΠΎΡ‚ количСства ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ² ΠΈ мСста Π½Π° сСрвСрС.

Π‘Π°Π·ΠΎΠ²Ρ‹ΠΉ Ρ‚Π°Ρ€ΠΈΡ„ Π½Π° 10 ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ² ΠΈ 1 GB Π½Π° сСрвСрС обойдСтся Π² $13. Π•ΡΡ‚ΡŒ стартовый бСсплатный Ρ‚Π°Ρ€ΠΈΡ„ Π½Π° 1 ΠΏΡ€ΠΎΠ΅ΠΊΡ‚, ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½Ρ‹ΠΉ 300 ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°ΠΌΠΈ ΠΈ 5 MB. Для ΠΏΡ€ΠΎΡΡ‚Π΅ΠΉΡˆΠ΅Π³ΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚Π° (одностраничного Π»Π΅Π½Π΄ΠΈΠ½Π³Π°) ΠΈ ΠΏΠΎΠ»Π½ΠΎΡ†Π΅Π½Π½ΠΎΠ³ΠΎ общСния с Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠΌ этого Π²ΠΏΠΎΠ»Π½Π΅ достаточно.

Π’ΠΎΡ‚ Ρ‡Ρ‚ΠΎ ΠΈΠ· этого ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒΡΡ:

Moqups

Marvel

Marvel β€” простой ΠΈ ΠΈΠ½Ρ‚ΡƒΠΈΡ‚ΠΈΠ²Π½Ρ‹ΠΉ инструмСнт прототипирования. Π•Π³ΠΎ инструмСнт Canvas создаСт эскизы ΠΈ каркасныС интСрфСйсы.

МоТно ΡΠΈΡΡ‚Π΅ΠΌΠ°Ρ‚ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ наброски, Π·Π°Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ Π² Π³Ρ€ΡƒΠΏΠΏΡ‹ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ² Ρ‚ΠΎΡ‡Π½ΠΎ Ρ‚Π°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ Π² InVision. Доступна базовая ΠΏΠ΅Ρ€Π΅Π»ΠΈΠ½ΠΊΠΎΠ²ΠΊΠ° элСмСнтов Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈ созданиС интСрактивности.

Главная Ρ„ΠΈΡˆΠΊΠ° Marvel – ориСнтация Π½Π° Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΡƒ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… интСрфСйсов. ΠŸΡ€ΠΈ создании Π½ΠΎΠ²ΠΎΠ³ΠΎ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° Π²Ρ‹ Π²Ρ‹Π±ΠΈΡ€Π°Π΅Ρ‚Π΅ Ρ‚ΠΈΠΏ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠ°: сайт, ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ для iPhone, iPad,Android ΠΈ Π΄Π°ΠΆΠ΅ AppleWatch.

МоТно Π½Π°Π·Π½Π°Ρ‡Π°Ρ‚ΡŒ Ρ€Π°Π·Π½ΠΎΠΎΠ±Ρ€Π°Π·Π½Ρ‹Π΅ события, ТСсты ΠΈ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Ρ‹ Π½Π° элСмСнты интСрфСйса. НС ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡ΠΈΠ²Π°ΠΉΡ‚Π΅ΡΡŒ статичСскими конструкциями ΠΈΠ»ΠΈ ΠΏΡ€ΠΈΠΌΠΈΡ‚ΠΈΠ²Π½ΠΎΠΉ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒΡŽ Π½Π° основС ΠΊΠ»ΠΈΠΊΠΎΠ².

ДобавляйтС ТСсты (протаскивания ΠΈ Ρ‚.Π΄.): Π²Ρ‹Π±ΠΈΡ€Π°Π΅Ρ‚Π΅ Π°ΠΊΡ‚ΠΈΠ²Π½ΡƒΡŽ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ, Π½Π°Π·Π½Π°Ρ‡Π°Π΅Ρ‚Π΅ Π½Π° Π½Π΅Ρ‘ дСйствиС ΠΈΠ· Π½Π°Π±ΠΎΡ€Π° прСсСтов, смотритС Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚. Π•ΡΡ‚ΡŒ подсказки, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ Π½Π΅ Π·Π°ΠΏΡƒΡ‚Π°Π΅Ρ‚Π΅ΡΡŒ.

ΠŸΠ΅Ρ‡Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚: Marvel разрабатывался для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ MacOS – для Π½ΠΈΡ… Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ припасли Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ ΠΈ прилоТСния. Π•ΡΡ‚ΡŒ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΏΠ»Π°Π³ΠΈΠ½ для Sketch. Для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ Windows ΠΈ Linux ΠΏΠΎΠ΄Π°Ρ€ΠΎΡ‡ΠΊΠΎΠ² Π½Π΅Ρ‚.

Marvel ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ Ρ‚Ρ€ΠΈ Ρ‚Π°Ρ€ΠΈΡ„Π°:

Β 

  • БСсплатный – Π½Π° 1 ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ ΠΈ 2 ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°.
  • ΠŸΡ€ΠΎΡ„Π΅ΡΡΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ – $12 Π² мСсяц, 1 ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΈ Π½Π΅ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½ΠΎΠ΅ число ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ².
  • ΠšΠΎΡ€ΠΏΠΎΡ€Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ – $48 Π² мСсяц, 4 ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ.

Marvel

Justmind

Π‘ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° встроСнных элСмСнтов позволяСт ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΏΡ€ΠΈΠΌΠΈΡ‚ΠΈΠ²Π½Ρ‹Π΅ эскизы ΠΈ ΠΏΠΎΡ‡Ρ‚ΠΈ Π³ΠΎΡ‚ΠΎΠ²Ρ‹Π΅ интСрфСйсы. Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚ Justmind прСдусматриваСт Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ для дСсктопных ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. Π Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ ΠΊΠ°ΠΊ для iOS, Ρ‚Π°ΠΊ ΠΈ для Android ΠΈ Surface.

ПослС создания ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ Ρ‚Ρ€ΠΈΠ³Π³Π΅Ρ€Ρ‹ для интСрактивности. Как ΠΈ Π² Marvel, Π²Ρ‹Π±ΠΈΡ€Π°Π΅Ρ‚Π΅ ТСст для привязки ΠΊ элСмСнту-Ρ‚Ρ€ΠΈΠ³Π³Π΅Ρ€Ρƒ, ΠΈ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ для ΠΈΠΌΠΈΡ‚Π°Ρ†ΠΈΠΈ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»Π°.

ΠŸΠ°Ρ€Π° ΠΊΠ»ΠΈΠΊΠΎΠ², Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΠ³Π»Π°ΡΠΈΡ‚ΡŒ ΠΊ ΠΎΠ±ΡΡƒΠΆΠ΄Π΅Π½ΠΈΡŽ ΠΌΠ°ΠΊΠ΅Ρ‚Π° ΠΊΠΎΠ»Π»Π΅Π³. Они ΠΏΠΎΠΌΠ΅Ρ‡Π°ΡŽΡ‚ элСмСнты ΠΈ ΠΎΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ замСчания ΠΏΠΎ Π½ΠΈΠΌ.

ΠŸΡ€ΠΎΡ„Π΅ΡΡΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ Ρ‚Π°Ρ€ΠΈΡ„ обойдётся Π² $19 Π·Π° 1 ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Π² мСсяц.

Justmind

Origami

Origami β€” Π±ΠΎΠ»Π΅Π΅ узкоспСциализированный инструмСнт прототипирования, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ доступСн Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для MacOS. Π•Π³ΠΎ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ – ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ эскизы ΠΈ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ для iPad ΠΈ iPhone.

Origami содСрТит 4 Π³Π»Π°Π²Π½Ρ‹Π΅ ΠΏΠ°Π½Π΅Π»ΠΈ:

  • ПанСль ΠΏΠ°Ρ‚Ρ‡Π΅ΠΉ – здСсь Π½Π°Π·Π½Π°Ρ‡Π°Π΅Ρ‚Π΅ элСмСнтам ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ, Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ, ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅.
  • Π‘Π»ΠΎΠΈ – добавляСтС слой, Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°Π΅Ρ‚Π΅ Π½Π° Π½Ρ‘ΠΌ элСмСнты, Π½Π°Π·Π½Π°Ρ‡Π°Π΅Ρ‚Π΅ дСйствия.
  • Окно просмотра – ΠΎΡ†Π΅Π½ΠΈΠ²Π°Π΅Ρ‚Π΅ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Ρ‹ Ρ‚Ρ€ΡƒΠ΄Π°.
  • Π‘ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° ΠΏΠ°Ρ‚Ρ‡Π΅ΠΉ – просматриваСтС Π·Π°Π³ΠΎΡ‚ΠΎΠ²ΠΊΠΈ ΠΈ ΠΈΡ… описания, Π²Ρ‹Π±ΠΈΡ€Π°Π΅Ρ‚Π΅ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Π΅ элСмСнты ΠΈ добавляСтС Π² ΠΏΡ€ΠΎΠ΅ΠΊΡ‚.

Π“Π»Π°Π²Π½Ρ‹ΠΉ плюс – Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ интСрфСйсу ΡΠ»ΠΎΠΆΠ½ΡƒΡŽ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ Π±Π΅Π· Π½Π°Π²Ρ‹ΠΊΠΎΠ² программирования. Для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π° инструмСнт Π½Π΅ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚.

Origami бСсплатСн, Π²Π΅Π±-вСрсии Π½Π΅Ρ‚.

Origami

Proto.io

Π’Ρ‹ Π·Π°Π³Ρ€ΡƒΠΆΠ°Π΅Ρ‚Π΅ собствСнныС эскизы ΠΈ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ элСмСнтов интСрфСйса, Π° ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π½Π° ΠΈΡ… основС ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ Π΄ΠΎ получСния ΠΏΠΎΠ»Π½ΠΎΡ†Π΅Π½Π½ΠΎΠ³ΠΎ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠ°. Π•ΡΡ‚ΡŒ ΠΈ встроСнныС Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ элСмСнтов.

Π˜Π½Ρ‚Π΅Ρ€Ρ„Π΅ΠΉΡ сСрвиса простой: пСрСтаскиваСтС Π½Π° Ρ€Π°Π±ΠΎΡ‡Π΅Π΅ ΠΏΠΎΠ»Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ интСрфСйса, Π³Ρ€ΡƒΠΏΠΏΠΈΡ€ΡƒΠ΅Ρ‚Π΅ ΠΈ ΠΎΡ€Π³Π°Π½ΠΈΠ·ΡƒΠ΅Ρ‚Π΅ ΠΈΡ…. ΠŸΡ€ΠΈ этом Π² любой ΠΌΠΎΠΌΠ΅Π½Ρ‚ Π½Π° любой стадии ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠ΅Ρ€Π΅ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚ ΠΊΠ°ΠΊ Π½ΡƒΠΆΠ½ΠΎ. ВыдСляСтС ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ Π½Π° Ρ€Π°Π±ΠΎΡ‡Π΅ΠΌ ΠΏΠΎΠ»Π΅ Π² Π½ΡƒΠΆΠ½ΠΎΠΌ слоС – ΠΈ Π² ΠΏΠ°Π½Π΅Π»ΠΈ ΠΎΠΏΡ†ΠΈΠΉ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡ‚Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ всё.

Π“ΠΎΡ€Π΄ΠΎΡΡ‚ΡŒ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² – ΠΏΡ€ΠΎΠ΄Π²ΠΈΠ½ΡƒΡ‚Ρ‹ΠΉ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ Proto.io:

ПослС выстраивания ΠΌΠ°ΠΊΠ΅Ρ‚Π°, Π½Π°Π·Π½Π°Ρ‡Π°Π΅Ρ‚Π΅ Π½Π° элСмСнты интСрфСйса ТСсты ΠΈ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Ρ‹. МоТно ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒ ΠΎΠΏΡ€Π΅Π΄Π΅Π»tΠ½Π½Ρ‹Π΅ Ρ„Π°Π·Ρ‹ ΠΈΠ»ΠΈ внСшний Π²ΠΈΠ΄. ΠŸΡ€ΠΈΠΌΠ΅Ρ€ Ρ‚Π°ΠΊΠΎΠΉ Ρ„Π°Π·Ρ‹ – ΠΎΠΊΠ½ΠΎ со Π·Π½Π°Ρ‡ΠΊΠΎΠΌ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π²ΠΈΠ΄ΠΈΡ‚ лишь Ρ‚ΠΎΠ³Π΄Π°, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ использовал ΠΎΠΊΠ½ΠΎ поиска.

Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°ΡŽΡ‚ привязку ΠΊ ΡƒΡ‡Π΅Ρ‚Π½ΠΎΠΉ записи Dropbox для хранСния ΠΈ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ Ρ„Π°ΠΉΠ»ΠΎΠ², ΠΊΠ»ΠΈΠ΅Π½Ρ‚ для iOS ΠΈ Android ΠΈ ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ для Sketch ΠΈ Photoshop.

Π’Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚Π΅ Π΄Π²ΡƒΡ…Π½Π΅Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΉ бСсплатный тСстовый ΠΏΠ΅Ρ€ΠΈΠΎΠ΄ с ΠΏΠΎΠ»Π½ΠΎΠΉ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒΡŽ. Π­Ρ‚ΠΎΠ³ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ достаточно, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ½ΡΡ‚ΡŒ, Π½ΡƒΠΆΠ΅Π½ Π»ΠΈ Π²Π°ΠΌ этот инструмСнт.

Π’Π°Ρ€ΠΈΡ„ «ЀрилансСр» стоит $24 Π² мСсяц ΠΈ позволяСт вСсти 5 ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ². Если Π²Ρ‹ Π½Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚Π΅ Π² Π²Π΅Π±-студии, этого Ρ…Π²Π°Ρ‚ΠΈΡ‚ с ΠΈΠ·Π±Ρ‹Ρ‚ΠΊΠΎΠΌ.

Proto.io

Π—Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅

Π­Ρ‚ΠΈΡ… сСрвисов достаточно для Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ любой Π·Π°Π΄Π°Ρ‡ΠΈ, остаСтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ подходящий.

ДруТСский совСт: Π½Π΅ Π²Ρ‹Π±ΠΈΡ€Π°ΠΉΡ‚Π΅ прилоТСния с ΠΈΠ·Π±Ρ‹Ρ‚ΠΎΡ‡Π½Ρ‹ΠΌ для Π²Π°ΡˆΠΈΡ… Π½ΡƒΠΆΠ΄ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΠΎΠΌ, Ссли Π½Π΅ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Ρ‚Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ врСмя Π½Π° ΠΈΠ·ΡƒΡ‡Π΅Π½ΠΈΠ΅ ΠΌΠ°Π½ΡƒΠ°Π»ΠΎΠ² ΠΈ интСрфСйса.

Π₯ΠΎΡ‚ΠΈΡ‚Π΅ Ρ‚ΠΎΠΆΠ΅ Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ ΡΡ‚Π°Ρ‚ΡŒΡŽ для Ρ‡ΠΈΡ‚Π°Ρ‚Π΅Π»Π΅ΠΉ Yagla? Если Π²Π°ΠΌ Π΅ΡΡ‚ΡŒ Ρ‡Ρ‚ΠΎ Ρ€Π°ΡΡΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΏΡ€ΠΎ ΠΌΠ°Ρ€ΠΊΠ΅Ρ‚ΠΈΠ½Π³, Π°Π½Π°Π»ΠΈΡ‚ΠΈΠΊΡƒ, бизнСс, ΡƒΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅, ΠΊΠ°Ρ€ΡŒΠ΅Ρ€Ρƒ для Π½ΠΎΠ²ΠΈΡ‡ΠΊΠΎΠ², ΠΌΠ°Ρ€ΠΊΠ΅Ρ‚ΠΎΠ»ΠΎΠ³ΠΎΠ² ΠΈ ΠΏΡ€Π΅Π΄ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Ρ‚Π΅Π»Π΅ΠΉ. Π’ΠΎΠ³Π΄Π° Π·Π°Π²Π΅Π΄ΠΈΡ‚Π΅ сСбС Π±Π»ΠΎΠ³ Π½Π° Yagla прямо сСйчас ΠΈ ΠΏΠΈΡˆΠΈΡ‚Π΅ ΡΡ‚Π°Ρ‚ΡŒΠΈ. Π­Ρ‚ΠΎ бСсплатно ΠΈ просто

14 Π»ΡƒΡ‡ΡˆΠΈΡ… инструмСнтов прототипирования для Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ² UI/UX

Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚ прототипирования позволяСт Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρƒ ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΡΡ‚ΡŒ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹Π΅ элСмСнты, элСмСнты Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ ΠΈ взаимодСйствия, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ Ρ‡Π΅Ρ‚ΠΊΠΎΠ΅ прСдставлСниС ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ Π΄ΠΈΠ·Π°ΠΉΠ½ Π±ΡƒΠ΄Π΅Ρ‚ сСбя вСсти ΠΈ ΠΎΡ‰ΡƒΡ‰Π°Ρ‚ΡŒΡΡ. Π­Ρ‚ΠΎ Π²Π°ΠΆΠ½Ρ‹ΠΉ инструмСнт Π² арсСналС любого UI/UX Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π°.

ΠŸΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΡ‹ β€” это Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ ΠΈ ΠΎΡ‚Π»Π°Π΄ΠΈΡ‚ΡŒ Π΄Π΅Ρ‚Π°Π»ΠΈ. Они ΡΠ²Π»ΡΡŽΡ‚ΡΡ Π²Π°ΠΆΠ½Ρ‹ΠΌ инструмСнтом для информирования заинтСрСсованных сторон ΠΈ Π»ΠΈΡ†, ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°ΡŽΡ‰ΠΈΡ… Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ, ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ всС элСмСнты ΠΈΠ΄Π΅ΠΈ Π±ΡƒΠ΄ΡƒΡ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ вмСстС.

Если Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ Π²Π΅Π±-сайта, Π½Π°ΠΉΡ‚ΠΈ подходящий инструмСнт для создания ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ² ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ ΠΈΠ»ΠΈ ΠΈΠ·ΡƒΡ‡ΠΈΡ‚ΡŒ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ инструмСнтов для создания ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ² UX/UI, ΠΌΡ‹ Π²Π°ΠΌ ΠΏΠΎΠΌΠΎΠΆΠ΅ΠΌ.

14 инструмСнтов прототипирования для Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ² UI/UX

Π’ΠΎΡ‚ 14 Π»ΡƒΡ‡ΡˆΠΈΡ… инструмСнтов прототипирования, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠΌΠΎΠ³ΡƒΡ‚ Π²Π°ΠΌ Π² вашСм собствСнном процСссС проСктирования: Π»Π΅Π³ΠΊΠΎ для UX-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ², Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² ΠΈ всСх, ΠΊΡ‚ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ с Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π½ΠΎΠΉ ΠΎΠ±Π»Π°Ρ‡Π½ΠΎΠΉ ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠΎΠΉ. Если Π²Ρ‹ Ρ€Π°Π½ΡŒΡˆΠ΅ Ρ€Π°Π±ΠΎΡ‚Π°Π»ΠΈ со Sketch, Π²Ρ‹ ΠΎΠ±Π½Π°Ρ€ΡƒΠΆΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ Ρƒ Figma Π΅ΡΡ‚ΡŒ ΠΏΠΎΡ…ΠΎΠΆΠ΅Π΅ ΠΎΡ‰ΡƒΡ‰Π΅Π½ΠΈΠ΅, с ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ Π»Π΅Π³ΠΊΠΎ Π½Π°Ρ‡Π°Ρ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρƒ.

‍

Π‘ΠΎΠ³Π»Π°ΡΠΎΠ²Π°Π½Π½ΠΎΡΡ‚ΡŒ являСтся ΠΏΡ€ΠΈΠΎΡ€ΠΈΡ‚Π΅Ρ‚ΠΎΠΌ Π² Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅, ΠΈ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π³ΠΈΠ±ΠΊΠΈΠ΅ стили Figma для управлСния внСшним Π²ΠΈΠ΄ΠΎΠΌ тСкста, сСток ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΡ… элСмСнтов Π² ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π΅. А мноТСство ΠΏΠΎΠ»Π΅Π·Π½Ρ‹Ρ… ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ², Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ Autoflow для ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… ΠΏΠΎΡ‚ΠΎΠΊΠΎΠ², Figmotion для создания Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΈ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ Π΄Ρ€ΡƒΠ³ΠΈΠ΅, Ρ€Π°ΡΡˆΠΈΡ€ΡΡŽΡ‚ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Figma.

2. InVision Studio

ВыпущСнная Π² 2011 Π³ΠΎΠ΄Ρƒ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° InVision ΠΈΠΌΠ΅Π΅Ρ‚ Ρ…ΠΎΡ€ΠΎΡˆΠΎ Π·Π°Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΠΎΠ²Π°Π²ΡˆΡƒΡŽ сСбя Ρ€Π΅ΠΏΡƒΡ‚Π°Ρ†ΠΈΡŽ, Π° Π΅Π΅ ΠΏΡ€ΠΈΠ²Π΅Ρ€ΠΆΠ΅Π½Π½ΠΎΡΡ‚ΡŒ Π²Π½Π΅Π΄Ρ€Π΅Π½ΠΈΡŽ Π½ΠΎΠ²Ρ‹Ρ… Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ ΠΈ добавлСнию ΠΊ ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ΅ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π΄Π΅Π»Π°Π΅Ρ‚ Π΅Π΅ Ρ„Π°Π²ΠΎΡ€ΠΈΡ‚ΠΎΠΌ срСди ΠΌΠ½ΠΎΠ³ΠΈΡ… Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ².

Благодаря мноТСству Ρ…ΠΎΡ€ΠΎΡˆΠΎ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½Π½Ρ‹Ρ… инструмСнтов InVision Π΄Π°Π΅Ρ‚ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π°ΠΌ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ быстро ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΡ‹ ΠΈ Π΄Π΅Π»ΠΈΡ‚ΡŒΡΡ ΠΈΠΌΠΈ с Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ. Он ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ Ρ‚Π°ΠΊ ΠΌΠ½ΠΎΠ³ΠΎ приятных Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ, Π² Ρ‚ΠΎΠΌ числС ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΉ инструмСнт для Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠ³ΠΎ рисования, ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡŽΡ‰ΠΈΠ΅ΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΏΠΎ всСму сайту, Π° Ρ‚Π°ΠΊΠΆΠ΅ инструмСнты для создания Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΡ… динамичСских Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹Ρ… эффСктов.

БотрудничСство ΠΈ ΠΎΠ±Ρ‰Π΅Π½ΠΈΠ΅ Ρ‚Π°ΠΊΠΆΠ΅ ΡΠ²Π»ΡΡŽΡ‚ΡΡ ΡΠΈΠ»ΡŒΠ½Ρ‹ΠΌΠΈ сторонами InVision. Freehand позволяСт Ρ‡Π»Π΅Π½Π°ΠΌ ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹ Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ, Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ Π·Π°ΠΌΠ΅Ρ‚ΠΊΠΈ ΠΈ ΠΎΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ ΠΎΡ‚Π·Ρ‹Π²Ρ‹. Π§Π»Π΅Π½Ρ‹ ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹ ΠΌΠΎΠ³ΡƒΡ‚ ΠΎΡΡ‚Π°Π²Π°Ρ‚ΡŒΡΡ ΠΎΡ€Π³Π°Π½ΠΈΠ·ΠΎΠ²Π°Π½Π½Ρ‹ΠΌΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Invision Spaces, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ создаСт Π΅Π΄ΠΈΠ½Ρ‹ΠΉ источник достовСрной ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ для всСх, ΠΊΡ‚ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π½Π°Π΄ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠΌ. . InVision Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΠΌΠ΅Π΅Ρ‚ ΡƒΠ΄ΠΎΠ±Π½ΡƒΡŽ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ, ΡƒΠΏΡ€ΠΎΡ‰Π°ΡŽΡ‰ΡƒΡŽ ΡΠΎΠ²ΠΌΠ΅ΡΡ‚Π½ΡƒΡŽ Ρ€Π°Π±ΠΎΡ‚Ρƒ с Ρ‡Π»Π΅Π½Π°ΠΌΠΈ ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ².

3. Adobe XD

Adobe XD ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΡƒΡŽ систСму для создания ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ², Π²ΠΊΠ»ΡŽΡ‡Π°Ρ инструмСнты для создания взаимодСйствий, ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΎΠ² ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΡ… Ρ‚ΠΈΠΏΠΎΠ² динамичСских Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΎΠ½ основан Π½Π° Π²Π΅ΠΊΡ‚ΠΎΡ€Π΅, ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² элСмСнтов Π½Π΅ прСдставляСт ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹.

‍

Adobe XD Ρ…ΠΎΡ€ΠΎΡˆΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ вмСстС с Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ прилоТСниями сСмСйства Adobe, Ρ‚Π°ΠΊΠΈΠΌΠΈ ΠΊΠ°ΠΊ Illustrator ΠΈ Photoshop. ΠŸΡ€ΠΈΡΡ‚Π½ΠΎ ΠΈΠΌΠ΅Ρ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ изобраТСния Adobe, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Ρ„Π°ΠΉΠ» .psd, прямо Π² ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ.

Adobe XD ΠΎΡ…Π²Π°Ρ‚Ρ‹Π²Π°Π΅Ρ‚ всС инструмСнты, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Π΅ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρƒ, ΠΎΡ‚ ΠΊΠΎΠ½Ρ†Π΅ΠΏΡ‚ΡƒΠ°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ Π΄ΠΎ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ² с высоким Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ΠΌ, ΠΎΡ‚ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса Π΄ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° UX. И ΠΎΠ½ΠΈ постоянно Π΄ΠΎΠΏΠΎΠ»Π½ΡΡŽΡ‚ этот ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ СТСмСсячными обновлСниями, Ρ€Π°ΡΡˆΠΈΡ€ΡΡŽΡ‰ΠΈΠΌΠΈ Π΅Π³ΠΎ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ.

4. Webflow

ΠšΠΎΠ½Π΅Ρ‡Π½ΠΎ, ΠΌΡ‹ прСдвзято относимся ΠΊ этому вопросу, Π½ΠΎ ΠΌΡ‹ Π·Π½Π°Π΅ΠΌ, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½ΡƒΠΆΠ΅Π½ Π±ΠΎΠ»Π΅Π΅ ΠΏΠ»Π°Π²Π½Ρ‹ΠΉ ΠΈ быстрый процСсс проСктирования, поэтому ΠΌΡ‹ здСсь, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΌΠΎΡ‡ΡŒ Π²Π°ΠΌ.

Webflow выполняСт Π΄Π²Π΅ Π·Π°Π΄Π°Ρ‡ΠΈ ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ. Пока Π²Ρ‹ Ρ€Π°Π·Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Π΅Ρ‚Π΅ ΠΈ создаСтС высокоточный ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ, Π²Ρ‹ создаСтС Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‰ΠΈΠΉ Π²Π΅Π±-сайт со всСми элСмСнтами HTML, CSS ΠΈ связанными с Π½ΠΈΠΌΠΈ JavaScript. Π’Ρ‹ Π½Π΅ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚Π΅ просто ΠΌΠ°ΠΊΠ΅Ρ‚ β€” Ρƒ вас Π±ΡƒΠ΄Π΅Ρ‚ настоящая сдСлка.

Благодаря ΠΈΠ½Ρ‚ΡƒΠΈΡ‚ΠΈΠ²Π½ΠΎ понятному интСрфСйсу пСрСтаскивания, ΠΌΠΎΡ‰Π½ΠΎΠΉ CMS ΠΈ возмоТности создания ΠΏΡ€ΠΎΠ΄Π²ΠΈΠ½ΡƒΡ‚ΠΎΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΎΠ² ΠΈ микровзаимодСйствий Webflow позволяСт ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π²Π΅Π±-сайты ΠΏΡ€ΠΎΡ„Π΅ΡΡΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ уровня любого Ρ‚ΠΈΠΏΠ°.

Если Π²Π°ΠΌ Π½ΡƒΠΆΠ΅Π½ быстрый способ проСктирования ΠΈ создания ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠ°, Webflow прСдоставит Π²Π°ΠΌ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ, ΠΈ всС это Π±Π΅Π· знания ΠΊΠΎΠ΄Π°, Ρ‡Ρ‚ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ Π΅Π³ΠΎ ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· Π»ΡƒΡ‡ΡˆΠΈΡ… инструмСнтов для создания ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ² нСзависимо ΠΎΡ‚ вашСго уровня Π½Π°Π²Ρ‹ΠΊΠΎΠ². Π”ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ ΠΈ ΠΌΠ°Ρ€ΠΊΠ΅Ρ‚ΠΎΠ»ΠΎΠ³ΠΈ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠ³ΡƒΡ‚ Π»Π΅Π³ΠΊΠΎ ΡΠΎΡ‚Ρ€ΡƒΠ΄Π½ΠΈΡ‡Π°Ρ‚ΡŒ Π² Webflow.

Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΡΠ΅Ρ‚ΠΈΡ‚ΡŒ УнивСрситСт Webflow, Π³Π΄Π΅ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡ‚ΠΈ мноТСство руководств ΠΏΠΎ Π½Π°Ρ‡Π°Π»Ρƒ Ρ€Π°Π±ΠΎΡ‚Ρ‹ с ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Π² Webflow.

5. Axure RP

Axure RP ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΡΠ΅Ρ‚ Π² сСбС всС возмоТности создания ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² ΠΈ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ², помогая компаниям ΡΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ процСсс проСктирования Ρ†ΠΈΡ„Ρ€ΠΎΠ²Ρ‹Ρ… ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ΠΎΠ². Π­Ρ‚ΠΎ позволяСт Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π°ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΡ‹ Π²Π΅Π±-сайтов ΠΈ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ с Π½ΠΈΠ·ΠΊΠΈΠΌ ΠΈ высоким Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ΠΌ Π±Π΅Π· нСобходимости написания ΠΊΠΎΠ΄Π°.

‍

Наряду с Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ для создания Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹Ρ… элСмСнтов, интСрактивности ΠΈ ΠΎΡ€Π³Π°Π½ΠΈΠ·Π°Ρ†ΠΈΠΈ, Axure RP Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ комплСксный инструмСнт докумСнтирования, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ позволяСт ΠΎΡ‚ΡΠ»Π΅ΠΆΠΈΠ²Π°Ρ‚ΡŒ Π·Π°ΠΌΠ΅Ρ‚ΠΊΠΈ, Π·Π°Π΄Π°Ρ‡ΠΈ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Π²Π°ΠΆΠ½Ρ‹Π΅ Π°ΠΊΡ‚ΠΈΠ²Ρ‹, ΠΎΡ€Π³Π°Π½ΠΈΠ·ΠΎΠ²Π°Π½Π½Ρ‹Π΅ ΠΈ доступныС для Ρ‚Π΅Ρ…, ΠΊΠΎΠΌΡƒ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ это.

Axure RP Ρ‚Π°ΠΊΠΆΠ΅ ΠΎΠ±Π»Π΅Π³Ρ‡Π°Π΅Ρ‚ ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡Ρƒ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ, позволяя ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ Π² ΠΈΡ… ΠΎΠ±Π»Π°ΠΊΠ΅ со всСм ΠΊΠΎΠ΄ΠΎΠΌ, спСцификациями ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ Π°ΠΊΡ‚ΠΈΠ²Π°ΠΌΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΠΌ ΠΏΠΎΡ‚Ρ€Π΅Π±ΡƒΡŽΡ‚ΡΡ для Π΅Π³ΠΎ создания.

Π‘ΠΎΠ·Π΄Π°Π½Π½Ρ‹ΠΉ для профСссионалов, с Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ΠΌ ΠΊΠΎ всСм тонкостям создания Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ², Axure RP 9 ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½ для Ρ‚Π΅Ρ… Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΡ‰ΡƒΡ‚ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ инструмСнт прототипирования для ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°.

6. Origami Studio

Origami Studio Π±Ρ‹Π»Π° создана для Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ² Facebook ΠΏΠΎ нСобходимости, Π·Π°Ρ‚Π΅ΠΌ Facebook подСлился бСсплатным инструмСнтом прототипирования с ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹ΠΌ дизайнСрским сообщСством.

Для Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ Π½ΡƒΠΆΠ½Π° Π±ΠΎΠ»Π΅Π΅ ΡΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½Π½Π°Ρ систСма, Origami Studio ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ ΠΌΠΎΡ‰Π½Ρ‹Π΅ инструмСнты прототипирования для Π²Π΅Π±-сайтов ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. Π¦Π΅Π½Ρ‚Ρ€Π°Π»ΡŒΠ½ΠΎΠ΅ мСсто Π² Origami Studio Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ исправлСний, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ позволяСт ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π»ΠΎΠ³ΠΈΠΊΡƒ, ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅, Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ ΠΈ взаимодСйствиС. ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΏΠ°Ρ‚Ρ‡ β€” это своСго Ρ€ΠΎΠ΄Π° ΡΡ‚Ρ€ΠΎΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ Π±Π»ΠΎΠΊ для вашСго ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠ°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ Π²Π°ΠΌ быстро Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡ‚ΡŒ ΠΈΡ‚Π΅Ρ€Π°Ρ†ΠΈΠΈ. Π‘ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π² сСбя мноТСство Π³ΠΎΡ‚ΠΎΠ²Ρ‹Ρ… ΠΎΠΏΡ†ΠΈΠΉ, Π½ΠΎ для Π½Π°Ρ‡Π°Π»Π° Π²Π°ΠΌ понадобится всСго 15-20.

Origami Studio Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ обучСния, Π½ΠΎ ΡƒΠΌΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΠΈΡ… инструмСнтами для создания ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ² ΠΈ созданиС слоТных ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ² стоит обучСния. Π­Ρ‚Π° ΠΌΠΎΡ‰ΡŒ, наряду с ΡΠΎΠ²ΠΌΠ΅ΡΡ‚ΠΈΠΌΠΎΡΡ‚ΡŒΡŽ ΠΏΡ€ΠΈ Ρ€Π°Π±ΠΎΡ‚Π΅ со Sketch ΠΈ Figma, Π΄Π΅Π»Π°Π΅Ρ‚ Origami Studio Π²Π°ΠΆΠ½Ρ‹ΠΌ инструмСнтом для Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ хотят Π²Ρ‹ΠΉΡ‚ΠΈ Π·Π° Ρ€Π°ΠΌΠΊΠΈ стандартного прототипирования с Π½ΠΈΠ·ΠΊΠΎΠΉ Ρ‚ΠΎΡ‡Π½ΠΎΡΡ‚ΡŒΡŽ.

7. Justinmind

Justinmind Π½Π°Π±ΠΈΡ€Π°Π΅Ρ‚ ΠΎΠ±ΠΎΡ€ΠΎΡ‚Ρ‹ ΠΊΠ°ΠΊ популярный инструмСнт для создания ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ² Π²Π΅Π±-сайтов ΠΈ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. На Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ нСсколько ΠΏΡ€ΠΈΡ‡ΠΈΠ½: ΠΎΡ‚ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ пСрСтаскивания Π΄ΠΎ возмоТностСй создания ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ ΠΈ Π²Π΅Π±-ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ² ΠΎΡ‚ самых простых Π΄ΠΎ самых слоТных, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΎΠ±ΡˆΠΈΡ€Π½ΠΎΠΉ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ, Ρ‚Π°ΠΊΠΎΠΉ ΠΊΠ°ΠΊ Π²ΠΈΠ΄Π΅ΠΎ ΠΈ Π±Π»ΠΎΠ³ΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠΌΠΎΠ³ΡƒΡ‚ Π²Π°ΠΌ Π½Π°ΡƒΡ‡ΠΈΡ‚ΡŒΡΡ ΠΈΡ… ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Justinmind ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ Π½Π΅ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½ΠΎΠ΅ количСство ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ² ΠΈ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ цСнообразования ΠΎΡ‚ бСсплатного Π΄ΠΎ ΠΊΠΎΡ€ΠΏΠΎΡ€Π°Ρ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ уровня.

Justinmind поставляСтся с Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ°ΠΌΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса ΠΈ шаблонами, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠ½ΠΎΠ³ΠΈΠΌΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΌΠΈ функциями. Он позволяСт ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π»ΠΎΠ³ΠΈΠΊΡƒ для условной Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ, позволяСт ΠΏΡ€ΠΎΠ²ΠΎΠ΄ΠΈΡ‚ΡŒ тСстированиС ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌΠΈ, ΡƒΠΏΡ€ΠΎΡ‰Π°Π΅Ρ‚ ΡƒΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π½ΠΎΠΉ Π³Ρ€ΡƒΠΏΠΏΠΎΠΉ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄Ρ€ΡƒΠ³ΠΎΠ΅. БущСствуСт Ρ‚Π°ΠΊΠΆΠ΅ ряд ΠΈΠ½Ρ‚Π΅Π³Ρ€Π°Ρ†ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Justinmind со Sketch, Adobe Suite, Azure DevOps Server ΠΈ Jira Π² Ρ€Π°Π±ΠΎΡ‡Π΅ΠΌ процСссС.

Π•Π³ΠΎ простой интСрфСйс Π΄Π΅Π»Π°Π΅Ρ‚ Π΅Π³ΠΎ ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎΠΉ ΠΎΡ‚ΠΏΡ€Π°Π²Π½ΠΎΠΉ Ρ‚ΠΎΡ‡ΠΊΠΎΠΉ для Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰Π΅Π³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π° UX, Π½ΠΎ Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ достаточно для Π±ΠΎΠ»Π΅Π΅ ΠΏΡ€ΠΎΠ΄Π²ΠΈΠ½ΡƒΡ‚Ρ‹Ρ… Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ².

8. Sketch

МногиС UX-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ Sketch ΠΊΠ°ΠΊ Ρ‡Π°ΡΡ‚ΡŒ своСго Ρ€Π°Π±ΠΎΡ‡Π΅Π³ΠΎ процСсса β€” ΠΈ Π½Π΅ зря. Π’ ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ ΠΌΠ½ΠΎΠ³ΠΈΡ… Π΄Ρ€ΡƒΠ³ΠΈΡ… инструмСнтов для создания ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ², Sketch Π½Π΅ Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚ особого обучСния β€” Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ сразу ΠΆΠ΅ Π½Π°Ρ‡Π°Ρ‚ΡŒ Ρ‚Π²ΠΎΡ€ΠΈΡ‚ΡŒ.

‍

Π•Π΄ΠΈΠ½ΠΎΠΎΠ±Ρ€Π°Π·ΠΈΠ΅ ΠΈ ΡΠΎΠ³Π»Π°ΡΠΎΠ²Π°Π½Π½ΠΎΡΡ‚ΡŒ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚ Π±ΠΎΠ»ΡŒΡˆΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ Sketch. ΠœΠ½ΠΎΠ³ΠΎΡ€Π°Π·ΠΎΠ²Ρ‹Π΅ элСмСнты ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π½Π° всСм сайтС с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ ΠΈΠ½Ρ‚Π΅Π»Π»Π΅ΠΊΡ‚ΡƒΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚Π°, которая мСняСт свои Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ Π² зависимости ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊΠΎΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ находится Π²Π½ΡƒΡ‚Ρ€ΠΈ Π½ΠΈΡ…. Π’ΠΎΠ³Π΄Π° Π΅ΡΡ‚ΡŒ простота использования. Наряду с Ρ…ΠΎΡ€ΠΎΡˆΠΎ ΠΏΡ€ΠΎΠ΄ΡƒΠΌΠ°Π½Π½Ρ‹ΠΌ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΌ интСрфСйсом, Sketch ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ мноТСство горячих клавиш, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ускорят процСсс проСктирования ΠΈ упростят ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡Ρƒ Ρ€Π°Π±ΠΎΡ‚Ρ‹ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΡƒ.

МногиС ΡΡ‡ΠΈΡ‚Π°ΡŽΡ‚ Sketch отраслСвым стандартом, ΠΊΠΎΠ³Π΄Π° Ρ€Π΅Ρ‡ΡŒ ΠΈΠ΄Π΅Ρ‚ ΠΎ каркасах ΠΈ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ, Π° Π΅Π³ΠΎ ΠΌΠ½ΠΎΠ³ΠΎΡ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΈ ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΉ интСрфСйс β€” лишь нСсколько ΠΏΡ€ΠΈΡ‡ΠΈΠ½, ΠΏΠΎ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ Π΅Π³ΠΎ Π²Ρ‹Π±ΠΈΡ€Π°ΡŽΡ‚ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹.

9. Fluid UI

ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ΅ обСспСчСниС Fluid UI ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для быстрого прототипирования благодаря простому ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠΌΡƒ интСрфСйсу. Благодаря Π³ΠΎΡ‚ΠΎΠ²Ρ‹ΠΌ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ°ΠΌ для ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°, iOS, Android, каркасного модСлирования, Windows ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ³ΠΎ Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ Fluid UI Π΄Π°Π΅Ρ‚ Π²Π°ΠΌ Ρ‚Π°ΠΊ ΠΌΠ½ΠΎΠ³ΠΎ возмоТностСй для Π½Π°Ρ‡Π°Π»Π° Ρ€Π°Π±ΠΎΡ‚Ρ‹.

ВстроСнныС Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ Fluid UI Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ Π±ΠΎΠ»Π΅Π΅ 2000 ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠΌΠΎΠ³ΡƒΡ‚ Π²Π°ΠΌ быстро Π΄Π²ΠΈΠ³Π°Ρ‚ΡŒΡΡ, Π½ΠΎ Π²Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π»ΠΈΡ‡Π½Ρ‹Π΅ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ, загруТая ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΡƒΡŽ Π³Ρ€Π°Ρ„ΠΈΠΊΡƒ. А ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ всС хранится Π² ΠΎΠ±Π»Π°ΠΊΠ΅, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΡ‚Ρ€ΡƒΠ΄Π½ΠΈΡ‡Π°Ρ‚ΡŒ с Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ Π² Ρ€Π΅ΠΆΠΈΠΌΠ΅ Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ. Π’ Π³ΠΈΠ±ΠΊΠΎΠΌ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠΌ интСрфСйсС Π΄Π°ΠΆΠ΅ Π΅ΡΡ‚ΡŒ Π²ΠΈΠ΄Π΅ΠΎΠ·Π²ΠΎΠ½ΠΊΠΈ Π² Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠΌ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ, поэтому Ρ‚ΠΎΠ²Π°Ρ€ΠΈΡ‰ΠΈ ΠΏΠΎ ΠΊΠΎΠΌΠ°Π½Π΄Π΅ ΠΌΠΎΠ³ΡƒΡ‚ ΠΎΠ±Ρ‰Π°Ρ‚ΡŒΡΡ ΠΈ Π·Π°Π½ΠΈΠΌΠ°Ρ‚ΡŒΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ.

10. Framer

Framer β€” это инструмСнт проСктирования, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ позволяСт ΠΎΡ‡Π΅Π½ΡŒ быстро ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΡ‹. Π‘ Framer Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΡ‹ β€” ΠΎΡ‚ соСдинСния страниц Π΄ΠΎ создания 3D-эффСктов.

‍

‍

Π£ Framer Ρ‚Π°ΠΊΠΆΠ΅ Π΅ΡΡ‚ΡŒ тысячи рСсурсов Π² ΠΌΠ°Π³Π°Π·ΠΈΠ½Π΅ Framer X. Π£ вас Π΅ΡΡ‚ΡŒ доступ ΠΊΠΎ всСму, ΠΎΡ‚ ΠΆΠΈΠ²Ρ‹Ρ… ΠΊΠ°Ρ€Ρ‚, Π½Π°Π±ΠΎΡ€ΠΎΠ² ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса ΠΈ ΠΌΠ΅Π΄ΠΈΠ°ΠΏΠ»Π΅Π΅Ρ€ΠΎΠ², ΠΈ всС это Ρƒ вас ΠΏΠΎΠ΄ Ρ€ΡƒΠΊΠΎΠΉ.

11. Marvel

Π’Π°ΠΌ Π½ΡƒΠΆΠ΅Π½ инструмСнт для быстрого прототипирования, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ быстро ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ прилоТСния, Π²Π΅Π±-сайты ΠΈ Ρ†ΠΈΡ„Ρ€ΠΎΠ²Ρ‹Π΅ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Ρ‹? И Π΄Π΅Π»Π°Ρ‚ΡŒ это бСсплатно? Marvel прСдоставляСт Π²Π°ΠΌ ΠΏΠΎΠ»Π½Ρ‹ΠΉ Π½Π°Π±ΠΎΡ€ инструмСнтов для создания ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ ΠΌΠ³Π½ΠΎΠ²Π΅Π½Π½ΠΎ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ спСцификации Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒΡΡ ΠΊ Π΄Ρ€ΡƒΠ³ΠΈΠΌ инструмСнтам посрСдством ΠΈΠ½Ρ‚Π΅Π³Ρ€Π°Ρ†ΠΈΠΈ.

Marvel позволяСт Π²Π°ΠΌ Π²Ρ‹ΠΉΡ‚ΠΈ Π·Π° Ρ€Π°ΠΌΠΊΠΈ статичСских ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² ΠΈ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ, динамичСскиС ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Ρ‹ ΠΈ ТСсты, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠΆΠΈΠ²ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΡ‹ ΠΈ Π΄Π°Ρ‚ΡŒ Ρ€Π΅Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ ΠΎΠΏΡ‹Ρ‚ Π»ΡŽΠ±ΠΎΠΌΡƒ, ΠΊΡ‚ΠΎ ΠΈΡ… тСстируСт. Π•Ρ‰Π΅ ΠΎΠ΄Π½ΠΈΠΌ приятным Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ΠΌ являСтся инструмСнт ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡ΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π΄Π°Π΅Ρ‚ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ вСсь ΠΊΠΎΠ΄ ΠΈ Π°ΠΊΡ‚ΠΈΠ²Ρ‹ Π² ΠΈΡ… самой послСднСй ΠΈΡ‚Π΅Ρ€Π°Ρ†ΠΈΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒΡΡ ΠΈ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‰ΠΈΠΉ Π²Π΅Π±-сайт автоматичСски.

ВозмоТности Marvel для совмСстной Ρ€Π°Π±ΠΎΡ‚Ρ‹ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ Π»ΡŽΠ±ΠΎΠΌΡƒ Ρ‡Π»Π΅Π½Ρƒ ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ² β€” нСзависимо ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, насколько ΠΎΠ½Π° распрСдСлСна ΠΈ Π½Π° ΠΊΠ°ΠΊΠΎΠΉ стадии производства β€” Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ примСчания, Π²Π½ΠΎΡΠΈΡ‚ΡŒ измСнСния ΠΈ Π΄Π΅Π»ΠΈΡ‚ΡŒΡΡ идСями Π² Ρ€Π΅ΠΆΠΈΠΌΠ΅ Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ.

12. Proto.io

Showtime, Amazon ΠΈ PayPal β€” это лишь Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΠ· извСстных ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΉ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‰ΠΈΡ… Proto.io. Благодаря ΡˆΠΈΡ€ΠΎΠΊΠΎΠΌΡƒ Π²Ρ‹Π±ΠΎΡ€Ρƒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² этот Π²Π΅Π±-инструмСнт позволяСт ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΡ‹ β€” ΠΊΠΎΠ΄ Π½Π΅ трСбуСтся.

‍

Proto.io прСдоставляСт мноТСство Π²Π΅Π±-ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса с Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒΡŽ пСрСтаскивания, шаблонов, Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ Π·Π½Π°Ρ‡ΠΊΠΎΠ², Ρ†ΠΈΡ„Ρ€ΠΎΠ²Ρ‹Ρ… Π°ΠΊΡ‚ΠΈΠ²ΠΎΠ² ΠΈ ΠΈΠ½Ρ‚Π΅Π³Ρ€Π°Ρ†ΠΈΠΈ Π°ΡƒΠ΄ΠΈΠΎ/Π²ΠΈΠ΄Π΅ΠΎ. Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ всС, Ρ‡Ρ‚ΠΎ создали ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ Π² Photoshop ΠΈΠ»ΠΈ Sketch.

13. Principle

Principle для Mac позволяСт ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΏΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰ΠΈΠ΅ взаимодСйствия ΠΈ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½ΡƒΡŽ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ, создавая ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΡ‹, выходящиС Π·Π° Ρ€Π°ΠΌΠΊΠΈ скучных статичных прСдставлСний.

‍

Благодаря нСскольким ΠΌΠΎΠ½Ρ‚Π°ΠΆΠ½Ρ‹ΠΌ областям, конструктору Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π½Π° основС Π²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎΠΉ ΡˆΠΊΠ°Π»Ρ‹ ΠΈ возмоТности ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ„Π°ΠΉΠ»Ρ‹ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Figma, Principle выдСляСтся Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎ удСляСт особоС Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ двиТСнию β€” Π±ΡƒΠ΄ΡŒ Ρ‚ΠΎ взаимодСйствиС, быстрая анимация, многоэкранноС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅. Ρ‚Π΅Ρ‡ΡŒ, ΠΈΠ»ΠΈ всС, Ρ‡Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΡ€ΠΈΠ΄ΡƒΠΌΠ°Ρ‚ΡŒ вашС Π²ΠΎΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅.

14. Balsamiq

Balsamiq β€” инструмСнт для создания каркасов с Π½ΠΈΠ·ΠΊΠΎΠΉ Ρ‚ΠΎΡ‡Π½ΠΎΡΡ‚ΡŒΡŽ. Π₯отя ΠΎΠ½ Π½Π΅ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎ для Π³ΠΎΡ‚ΠΎΠ²Ρ‹Ρ… ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ², ΠΊΠ°ΠΊ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΠ· упомянутых Π²Ρ‹ΡˆΠ΅ инструмСнтов, это ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎΠ΅ мСсто для создания ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² Π²Π΅Π±-сайтов.

‍

Balsamiq ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для Π²Π΅Π±-сайтов. Π­Ρ‚ΠΎ ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ для набросков Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π°, Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ, Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠ½ΠΎΠ³ΠΎ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ³ΠΎ обСспСчСния, ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ ΠΈ каркасов ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса.