ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹ для прототипирования сайтов – 16 инструмСнтов для создания ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ² / АйкСн corporate blog / Habr

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

16 инструмСнтов для создания ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ² / АйкСн corporate blog / Habr

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

ΠšΠ°Ρ€ΠΊΠ°ΡΠ½ΠΎΠ΅ ΠΌΠΎΠ΄Π΅Π»ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅Β β€” это процСсс, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ΅Ρ‚ Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΡΠΎΠΊΡ€Π°Ρ‚ΠΈΡ‚ΡŒ врСмя, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΠ΅ для проСктирования ΠΈΒ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ, устраняя ΠΏΠΎΡ‚Π΅Π½Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΡ‚Π²Π»Π΅ΠΊΠ°ΡŽΡ‰ΠΈΠ΅ Ρ„Π°ΠΊΡ‚ΠΎΡ€Ρ‹ и фокусируя Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° Π½Π°Β Π±Π°Π·ΠΎΠ²ΠΎΠΉ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ и стратСгичСских Ρ„Π°ΠΊΡ‚ΠΎΡ€Π°Ρ… ΠΌΠ°Ρ€ΠΊΠ΅Ρ‚ΠΈΠ½Π³Π°.

Бпонсор ΠΏΠ΅Ρ€Π΅Π²ΠΎΠ΄Π°: АйкСн

Π’ΠΎΡ‚ нСсколько ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Ρ… ΠΏΡ€ΠΈΡ‡ΠΈΠ½, ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‰ΠΈΡ…, ΠΏΠΎΡ‡Π΅ΠΌΡƒ ΠΏΠ΅Ρ€Π΅Π΄ созданиСм сайта ΠΆΠ΅Π»Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ (ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ) Π½ΡƒΠΆΠ½ΠΎ сначала ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π΅Π³ΠΎΒ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ:


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

Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ мы рассмотрим нСсколько Π½ΠΎΠ²Ρ‹Ρ… Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΉ ΠΏΠΎΒ ΠΏΠΎΡΡ‚Ρ€ΠΎΠ΅Π½ΠΈΡŽ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ² и каркасному ΠΌΠΎΠ΄Π΅Π»ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡŽ.

1. Omnigraffle

Π’ΠΈΠΏ: ΠŸΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅Β OSX
OmniGraffle ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ Π²Π°ΠΌ быстро ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΏΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰ΠΈΠ΅ графичСскиС Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Ρ‹ ΠΏΡƒΡ‚Π΅ΠΌ соСдинСния Π»ΠΈΠ½ΠΈΠΉ с фигурами, Π΄Π°ΠΆΠ΅ Ссли ΠΎΠ½ΠΈ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°ΡŽΡ‚ΡΡ, и прСдусматриваСт инструмСнты модСлирования, Ρ„Π°ΠΉΠ»Ρ‹ ΠΈΠΌΠΏΠΎΡ€Ρ‚Π° и экспорта Microsoft Visio, Π°Β Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΡ€ΠΎΡΡ‚Π΅ΠΉΡˆΠ΅Π΅ построСниС Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌ всСго ΠΎΠ΄Π½ΠΈΠΌ Ρ‰Π΅Π»Ρ‡ΠΊΠΎΠΌΒ ΠΌΡ‹ΡˆΠΈ.

2. ConceptDrawPro

Π’ΠΈΠΏ: ΠŸΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅Β Windows
ConceptDraw PROΒ β€” это ΠΏΠΎΠ»Π½ΠΎΡ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Π°Ρ ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ° Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ³ΠΎ изобраТСния, которая позволяСт ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ, ΠΏΠ΅Ρ€Π΅Π΄Π°Π²Π°Ρ‚ΡŒ ΠΈΒ Π΄ΠΈΠ½Π°ΠΌΠΈΡ‡Π½ΠΎ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ.

3.Β Pidoco

Вип: Онлайн
PidocoΒ β€” это ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½Π΅Π½Π½Ρ‹ΠΉ инструмСнт каркасного изобраТСния и создания ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠ° графичСского интСрфСйса ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Π²Β Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠΌ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΡ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½Ρ‹Ρ… ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ², ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ он экономит врСмя и сниТаСт Π²Π΅Ρ€ΠΎΡΡ‚Π½ΠΎΡΡ‚ΡŒ Π΄ΠΎΡ€Π°Π±ΠΎΡ‚ΠΊΠΈ. Picodo Ρ‚Π°ΠΊΠΆΠ΅ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°Π΅Ρ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΏΡ€ΠΈΠ±Ρ‹Π»ΠΈ Ρ„ΠΈΡ€ΠΌ вслСдствиС Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ½ΠΈΠΆΠ°Π΅Ρ‚ Π·Π°Ρ‚Ρ€Π°Ρ‚Ρ‹ ΠΈΒ ΠΏΠΎΠ²Ρ‹ΡˆΠ°Π΅Ρ‚ ΠΏΡ€Π°ΠΊΡ‚ΠΈΡ‡Π½ΠΎΡΡ‚ΡŒ.

4. BalsamiqMockups

Π’ΠΈΠΏ: ΠŸΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅Β AIR
Balsamiq MockupsΒ β€” это инструмСнт построСния каркаса, Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½Π½Ρ‹ΠΉ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎ для воспроизвСдСния ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ², нарисованных ΠΎΡ‚Β Ρ€ΡƒΠΊΠΈ, позволяя быстро ΠΈΒ Π»Π΅Π³ΠΊΠΎ ΠΎΠ±Π½ΠΎΠ²ΠΈΡ‚ΡŒ свойства ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌ, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ MicrosoftΒ Word.

5. Mockingbird

Вип: Онлайн
MockingbirdΒ β€” это инструмСнт Π²Β Ρ€Π΅ΠΆΠΈΠΌΠ΅ ΠΎΠ½Π»Π°ΠΉΠ½, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΠΉ Π»Π΅Π³ΠΊΠΎ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ, ΡΠ²ΡΠ·Ρ‹Π²Π°Ρ‚ΡŒ, ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΡ€ΠΎΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°Ρ‚ΡŒ ΠΈΒ ΠΏΠ΅Ρ€Π΅Π΄Π°Π²Π°Ρ‚ΡŒ ΠΌΠΎΠ΄Π΅Π»ΠΈ вашСго Π²Π΅Π±-сайта ΠΈΠ»ΠΈ прилоТСния.

6.Β Pencil

Π’ΠΈΠΏ: Π”ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅Β Firefox
ΠŸΡ€ΠΎΠ΅ΠΊΡ‚ Pencil ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для построСния свободного ΠΈΒ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΠΎΠ³ΠΎ инструмСнта создания Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌ ΠΈΒ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ² графичСского интСрфСйса ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΒ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ.

7. iPlotz

Вип: Онлайн / Flash-Flex
Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ iPlotz ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ управляСмыС, Π°ΠΊΡ‚ΠΈΠ²ΠΈΡ€ΡƒΠ΅ΠΌΡ‹Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ каркасы для создания ΠΎΠ±Ρ€Π°Π·Π° Π²Π΅Π±-сайта ΠΈΠ»ΠΈ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ³ΠΎ прилоТСния. Π’Ρ‹Β Ρ‚Π°ΠΊΠΆΠ΅ смоТСтС ΠΏΠΎΠ»ΡƒΡ‡Π°Ρ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ ΠΎΡ‚Β Π΄Ρ€ΡƒΠ³ΠΈΡ… Π»ΠΈΡ† ΠΏΠΎΒ ΠΏΠΎΠ²ΠΎΠ΄Ρƒ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ², ΠΈΒ ΠΊΠ°ΠΊ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ всС Π±ΡƒΠ΄Π΅Ρ‚ Π³ΠΎΡ‚ΠΎΠ²ΠΎ, ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ заданиями ΠΏΠΎΒ ΠΏΠΎΡΡ‚Ρ€ΠΎΠ΅Π½ΠΈΡŽ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² ΠΈΒ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Ρ‰ΠΈΠΊΠΎΠ².

8. ProtoShare

Вип: Онлайн
ProtoShareΒ β€” это ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½Π΅Π½Π½Ρ‹ΠΉ инструмСнт Π²Β Ρ€Π΅ΠΆΠΈΠΌΠ΅ ΠΎΠ½Π»Π°ΠΉΠ½ для построСния каркасов Π²Π΅Π±-сайтов ΠΈΒ Π΄ΠΈΠ½Π°ΠΌΠΈΡ‡Π½Ρ‹Ρ…, управляСмых ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ² Π²Π΅Π±-сайтов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π·Π°Ρ‚Π΅ΠΌ Ρ‡Π»Π΅Π½Ρ‹ ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹ ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΡ€ΠΎΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°Ρ‚ΡŒ, Π°Β Ρ‚Π°ΠΊΠΆΠ΅ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π²Β Ρ€Π΅ΠΆΠΈΠΌΠ΅ Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠ³ΠΎΒ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ.

9. HotGloo

Вип: Онлайн
Hot GlooΒ β€” это ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ для создания каркаса Π²Β Ρ€Π΅ΠΆΠΈΠΌΠ΅ ΠΎΠ½Π»Π°ΠΉΠ½, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ в настоящСС врСмя Ρ‚Π°ΠΊΠΆΠ΅ являСтся бСсплатной Π±Π΅Ρ‚Π°-вСрсиСй. Π’Ρ‹Β ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠ΅Ρ€Π΅Ρ‚Π°ΡΠΊΠΈΠ²Π°Ρ‚ΡŒ ΠΈΒ Π²ΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ элСмСнты, ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ, ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΡΡ‚ΡŒ, Π½Π°Π·Ρ‹Π²Π°Ρ‚ΡŒ ΠΈΒ ΠΏΠ΅Ρ€Π΅ΠΈΠΌΠ΅Π½ΠΎΠ²Ρ‹Π²Π°Ρ‚ΡŒ ΠΈΡ…. Π’Π°ΠΊΠΆΠ΅ Вы смоТСтС Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ, ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΒ ΠΏΠ΅Ρ€Π΅Π΄Π°Π²Π°Ρ‚ΡŒ любой элСмСнт процСсса Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ ΠΊΠΎΠ»Π»Π΅Π³Π°ΠΌ ΠΈΒ ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π°ΠΌ.

10.Β MockFlow

Вип: Онлайн
MockFlow β€” это ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π½Ρ‹Π΅, ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½Π΅Π½Π½Ρ‹Π΅ (Π²Β Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠΌ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ) ΠΌΠΎΠ΄Π΅Π»ΠΈ интСрфСйсов ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ для вашСго ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ³ΠΎ обСспСчСния ΠΈΒ Π²Π΅Π±-сайтов.

11. Gliffy

Вип: Онлайн
БСсплатноС ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ΅ обСспСчСниС для построСния каркаса Gliffy Π΄Π°Π΅Ρ‚ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ простого создания каркасов Π²Π΅Π±-сайтов ΠΈΒ ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡ΠΈ Π²Π΅Π±-ΠΌΠΎΠ΄Π΅Π»Π΅ΠΉ. Π’Ρ‹Β ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ‚Π°ΠΊΠΆΠ΅ ΡΠΊΡΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ свой каркас для Π±ΡƒΠ΄ΡƒΡ‰Π΅Π³ΠΎ использования Π²Β Π΄Ρ€ΡƒΠ³ΠΈΡ… прилоТСниях.

12. Cacoo

Вип: Онлайн
CacooΒ β€” это ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΉ для пользования ΠΎΠ½Π»Π°ΠΉΠ½-инструмСнт для рисования, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ позволяСт ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ мноТСство Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌ, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ ΠΊΠ°Ρ€Ρ‚Ρ‹ сайта, каркасы и сСтСвыС Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΡ‹.

13. Creately

Вип: Онлайн / Flash-Flex
ΠœΠΎΡ‰Π½Ρ‹ΠΉ и простой для использования Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΠ½Ρ‹ΠΉ ΠΎΠ½Π»Π°ΠΉΠ½-инструмСнт, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ прямо в вашСм Π²Π΅Π±-Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅. Благодаря ΠΈΠ½Ρ‚ΡƒΠΈΡ‚ΠΈΠ²Π½ΠΎΠΌΡƒ интСрфСйсу ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ и встроСнным свойствам совмСстной Ρ€Π°Π±ΠΎΡ‚Ρ‹, Creately ΠΎΠ±Π»Π΅Π³Ρ‡Π°Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Ρƒ с командами.

14. LovelyCharts

Вип: Онлайн
Lovely ChartsΒ β€” это ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ для создания Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌ, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰Π΅Π΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΡ„Π΅ΡΡΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Π΅ Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΡ‹ всСх Π²ΠΈΠ΄ΠΎΠ², Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Π±Π»ΠΎΠΊ-схСмы, ΠΊΠ°Ρ€Ρ‚Ρ‹ сайтов, бизнСс-процСссы, ΠΎΡ€Π³Π°Π½ΠΈΠ·Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹Π΅ структуры, каркасы и многоС другоС…

15. Mockup Builder

Вип: Онлайн / Silverlight
Mockup BuilderΒ β€” это Π½ΠΎΠ²Ρ‹ΠΉ взгляд Π½Π°Β Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ старой ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ создания ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ² и прСдоставлСния набросков ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π°ΠΌ.

16. LucidChart

Вип: Онлайн
Π‘ΠΎΠ·Π΄Π°Π²Π°ΠΉΡ‚Π΅ Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΡ‹ ΠΈΒ Ρ‡Π΅Ρ€Ρ‚Π΅ΠΆΠΈ, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Π±Π»ΠΎΠΊ-схСма, Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΠ° ΠΈΠ΄Π΅ΠΉ, сСтСвая Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΠ°, Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΠ° UML, каркас, ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ интСрфСйса ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ ΠΈΒ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Ρ‡Π΅Ρ€Ρ‚Π΅ΠΆΠΈ Π²Β Ρ€Π΅ΠΆΠΈΠΌΠ΅ ΠΎΠ½Π»Π°ΠΉΠ½ ΡΒ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ бСсплатного ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ³ΠΎ обСспСчСния, ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Π½ΠΎΠ³ΠΎ для создания Π±Π»ΠΎΠΊ-схСм.

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

habr.com

7 бСсплатных ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌ для создания ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠ° сайта

ΠŸΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ сайта – это Π½Π΅ΠΎΡ‚ΡŠΠ΅ΠΌΠ»Π΅ΠΌΠ°Ρ Ρ€Π°Π±ΠΎΡ‚Π° ΠΏΡ€ΠΈ создании ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°. Ни ΠΎΠ΄ΠΈΠ½ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΠ±ΠΎΠΉΡ‚ΠΈΡΡŒ Π±Π΅Π· Π³Ρ€Π°ΠΌΠΎΡ‚Π½ΠΎ ΠΏΡ€ΠΎΠ΄ΡƒΠΌΠ°Π½Π½ΠΎΠ³ΠΎ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠ°, Ρ‚Π°ΠΊΠΆΠ΅ для нас являСтся ΠΏΡ€Π°Π²ΠΈΠ»ΠΎΠΌ – Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ Π² Π’Π— (тСхничСском Π·Π°Π΄Π°Π½ΠΈΠΈ). ΠŸΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΡ‹ Π±Ρ‹Π²Π°ΡŽΡ‚ Ρ€Π°Π·Π½Ρ‹ΠΌΠΈ, ΠΈ сСгодня ΠΌΡ‹ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΠΌ ΠΎΠ± этом.

Β 

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

ΠŸΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ сайта ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ нСсколькими путями:

  • Π‘ΡƒΠΌΠ°ΠΆΠ½Ρ‹ΠΉ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ – это быстрый ΠΈ простой способ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ, Π½Π΅ Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚, ΠΊΠ°ΠΊΠΈΡ… Π»ΠΈΠ±ΠΎ Π½Π°Π²Ρ‹ΠΊΠΎΠ², Π»Π΅Π³ΠΊΠΎ Π²Π½ΠΎΡΠΈΡ‚ΡŒ ΠΏΡ€Π°Π²ΠΊΠΈ. МоТно Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ.
  • ΠŸΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½Ρ‹ΠΉ – Π±ΠΎΠ»Π΅Π΅ ΠΏΡ€ΠΎΠ΄Π²ΠΈΠ½ΡƒΡ‚Ρ‹ΠΉ Π²ΠΈΠ΄ прототипирования, ΠΈΠΌΠ΅Π΅Ρ‚ эстСтичный Π²ΠΈΠ΄, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Π²Π½ΠΎΡΠΈΡ‚ΡŒ ΠΏΡ€Π°Π²ΠΊΠΈ нСсколькими участниками.
  • ДинамичСский ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ – ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ Π² Π²ΠΈΠ΄Π΅ ΠΊΠΎΠ΄Π° HTML, ΠΎΡ‡Π΅Π½ΡŒ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ ΠΊΠ°ΠΊ ΠΈΠΌΠ΅Π½Π½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ Π² web.

Β 

Но сСгодня ΠΌΡ‹ ΠΏΠΎΠΊΠ°ΠΆΠ΅ΠΌ Π²Π°ΠΌ 7 бСсплатных ΠΎΠ½Π»Π°ΠΉΠ½ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ для прототипирования ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ², всС ΠΎΠ½ΠΈ ΠΈΠ½Ρ‚ΡƒΠΈΡ‚ΠΈΠ²Π½ΠΎ понятныС ΠΈ Π½Π΅ Ρ‚Ρ€Π΅Π±ΡƒΡŽΡ‚ ΠΊΠ°ΠΊΠΈΡ… Π»ΠΈΠ±ΠΎ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… ΡƒΠΌΠ΅Π½ΠΈΠΉ ΠΈ Π·Π½Π°Π½ΠΈΠΉ.

Β 

Mockflow: ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΉ инструмСнт, с Π½Π΅ΠΏΠ΅Ρ€Π΅Π³Ρ€ΡƒΠΆΠ΅Π½Π½Ρ‹ΠΌ, понятным Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΠΎΠΌ.

Β 

Moqups: ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΡ‹ сайтов, Π½ΠΎ ΠΈ ΠΊΠ°Ρ€Ρ‚Ρ‹ сайта, Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΡ‹ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄Ρ€ΡƒΠ³ΠΎΠ΅.

Β 

POP: это ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ для смартфонов, Π±ΡƒΠΌΠ°Π³Π° ΠΈ ΠΊΠ°Ρ€Π°Π½Π΄Π°Ρˆ — это всС, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ трСбуСтся для создания ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠ°, ΠΎΡ‡Π΅Π½ΡŒ интСрСсноС Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅.

Β 

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

Β 

Wireframe.cc: это, ΠΏΠΎΠΆΠ°Π»ΡƒΠΉ, самый простой сСрвис, Π½Π°Ρ…ΠΎΠ΄ΠΊΠ° для быстрых набросков, ΠΎΡ‡Π΅Π½ΡŒ ΠΏΡ€ΠΈΠΌΠΈΡ‚ΠΈΠ²Π΅Π½ – Π½ΠΎ ΠΎΡ‚ этого Π½Π΅ ΠΌΠ΅Π½Π΅Π΅ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»Π΅Π½, Π½Π°Π±ΠΎΡ€ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ Π½Π΅ ΠΎΠ³Ρ€ΠΎΠΌΠ΅Π½, Π½ΠΎ для быстрого модСлирования простого сайта Π±ΠΎΠ»Π΅Π΅ Ρ‡Π΅ΠΌ достаточно.

Β 

Balsamiq: довольно простой ΠΈ ΠΈΠ½Ρ‚ΡƒΠΈΡ‚ΠΈΠ²Π½ΠΎ понятный рСсурс, Π΅ΡΡ‚ΡŒ вСрсия Ρ‚Ρ€ΠΈΠ°Π» с ΡƒΡ€Π΅Π·Π°Π½Π½Ρ‹ΠΌ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΠΎΠΌ, Π·Π° ΠΏΠΎΠ»Π½ΠΎΡ†Π΅Π½Π½ΡƒΡŽ придСтся Π²Ρ‹Π»ΠΎΠΆΠΈΡ‚ΡŒ порядка 90 Ρƒ.Π΅

Β 

Axure: это ΠΈΠ΄Π΅Π°Π»ΡŒΠ½Ρ‹ΠΉ инструмСнт для ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Ρ‰ΠΈΠΊΠΎΠ² ΠΈ ΠΌΠ΅Π½Π΅Π΄ΠΆΠ΅Ρ€ΠΎΠ² ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ², Π½ΠΎ ΠΊΠ°ΠΊ ΠΈ Π·Π° ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΠΉ сСрвис придётся Π·Π°ΠΏΠ»Π°Ρ‚ΠΈΡ‚ΡŒ, хотя ΠΈ Π΅ΡΡ‚ΡŒ бСсплатная Ρ‚Ρ€ΠΈΠ°Π» вСрсия.

Β 

www.mozgi.kiev.ua

ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹ для создания ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠ° сайта

Π”ΠΎΠ±Ρ€Ρ‹ΠΉ дСнь, Π΄ΠΎΡ€ΠΎΠ³ΠΈΠ΅ Ρ‡ΠΈΡ‚Π°Ρ‚Π΅Π»ΠΈ! ΠŸΠΎΡΡ‚Π°ΠΏΠ½ΠΎΠ΅ созданиС Π²Π΅Π±-рСсурса Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π² сСбя Π²Π°ΠΆΠ½Ρ‹Π΅ Π΄Π΅Ρ‚Π°Π»ΠΈ. Π“Π»Π°Π²Π½Ρ‹ΠΌ нюансом Π½Π° Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠΌ этапС Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ сайта являСтся Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠ°. ИмСнно этот Π²ΠΈΠ΄ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° позволяСт Π²Ρ‹ΡΠ²ΠΈΡ‚ΡŒ ΠΈ наглядно ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΎΡΠ½ΠΎΠ²Π½ΡƒΡŽ ΠΊΠΎΠ½Ρ†Π΅ΠΏΡ†ΠΈΡŽ Π±ΡƒΠ΄ΡƒΡ‰Π΅Π³ΠΎ ΠΏΠΎΡ€Ρ‚Π°Π»Π°.

Π—Π°Π΄ΡƒΠΌΡ‹Π²Π°Π»ΠΈΡΡŒ Π»ΠΈ Π²Ρ‹ ΠΊΠΎΠ³Π΄Π°-Π½ΠΈΠ±ΡƒΠ΄ΡŒ ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ любой рСсурс Ρ‚Π°ΠΊ ΠΈΠ»ΠΈ ΠΈΠ½Π°Ρ‡Π΅ ΠΏΡ€ΠΎΡ…ΠΎΠ΄ΠΈΡ‚ Ρ‡Π΅Ρ€Π΅Π· этап ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ прорисовки.

Π’Π°ΠΊ, ΠΎΡ‚ ΠΌΠΎΠΌΠ΅Π½Ρ‚Π° возникновСния ΠΈΠ΄Π΅ΠΈ Π΄ΠΎ ΠΏΠΎΠ»Π½ΠΎΠΉ Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ ΠΏΡ€ΠΎΡ…ΠΎΠ΄ΠΈΡ‚ нСсколько Π³Π»Π°Π²Π½Ρ‹Ρ… шагов. Π’ зависимости ΠΎΡ‚ качСства исполнСния этих Π·Π°Π΄Π°Ρ‡ Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°Π²ΠΈΡΠ΅Ρ‚ΡŒ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚.

Π˜Ρ‚Π°ΠΊ, ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ – это Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠ΅ прСдставлСниС Π±ΡƒΠ΄ΡƒΡ‰Π΅Π³ΠΎ рСсурса. Π£ΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‚ΡΡ Π·Π½Π°Ρ‡ΠΈΠΌΡ‹Π΅ элСмСнты Π΄ΠΈΠ·Π°ΠΉΠ½Π°, удСляСтся Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ вёрсткС, Π΄Π΅Ρ‚Π°Π»ΡŒΠ½ΠΎ прорисовываСтся располоТСниС ΠΊΠ½ΠΎΠΏΠΎΠΊ, ΠΌΠΎΠ΄ΡƒΠ»Π΅ΠΉ ΠΈ Π³Π»Π°Π²Π½Ρ‹Ρ… Π±Π»ΠΎΠΊΠΎΠ². Π§Π΅ΠΌ Ρ‚ΠΎΡ‡Π½Π΅Π΅ Π±ΡƒΠ΄Π΅Ρ‚ составлСн ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π½Ρ‹ΠΉ ΠΏΠΎΡ€Ρ‚Ρ€Π΅Ρ‚, Ρ‚Π΅ΠΌ Π»ΡƒΡ‡ΡˆΠ΅ получится рСсурс. Π›ΡƒΡ‡ΡˆΠ΅ всСго ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π±Π΅ΡΠΏΠ»Π°Ρ‚Π½ΡƒΡŽ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡƒ для создания ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠ° сайта.

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅ ΡΡ‚Π°Ρ‚ΡŒΠΈ

Π—Π°Ρ‡Π΅ΠΌ Π½ΡƒΠΆΠ΅Π½ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ?

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

Π“ΠΎΡ‚ΠΎΠ²Ρ‹ΠΉ эскиз ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ ΠΏΡ€ΠΈΠ΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒΡΡ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Ρ‘Π½Π½ΠΎΠΉ структуры. К Ρ‚ΠΎΠΌΡƒ ΠΆΠ΅, ΠΎΠ½ всСгда Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ΄ Ρ€ΡƒΠΊΠΎΠΉ.

ΠŸΡ€ΠΈΠ²Π΅Π΄Ρƒ нСсколько ΠΏΡ€ΠΈΡ‡ΠΈΠ½, ΠΏΠΎΡ‡Π΅ΠΌΡƒ это Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ:

  • НаглядноС прСдставлСниС – каркасноС ΠΌΠΎΠ΄Π΅Π»ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ расставит всС страницы ΠΏΠΎ мСстам с ΡƒΠΊΠ°Π·Π°Π½ΠΈΠ΅ΠΌ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… Π±Π»ΠΎΠΊΠΎΠ² Π½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΈΠ· Π½ΠΈΡ…;
  • ΠŸΠ»Π°Π½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ – Π΅ΡΡ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Π½Π°ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ шаги Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ ΠΈ дальнСйшСго развития рСсурса. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡƒ для создания ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠ° сайта бСсплатно ΠΈ Π½Π° Π²Ρ‹Π³ΠΎΠ΄Π½Ρ‹Ρ… условиях, Π²Ρ‹ смоТСтС ΠΏΠΎΡΠΊΡΠΏΠ΅Ρ€ΠΈΠΌΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π½Π°Π΄ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… Π±Π»ΠΎΠΊΠΎΠ²;
  • Экономия Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ – ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ рисунок ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ Ρ€Π°Ρ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎ Ρ€Π°ΡΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ собствСнныС рСсурсы;
  • ΠžΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ Ρ€Π°Π±ΠΎΡ‚Ρ‹ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π° – Π΄Π΅Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ элСмСнтов ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ΠΏΡ€ΠΈ дальнСйшСй Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ Π΄ΠΈΠ·Π°ΠΉΠ½Π°.

Условимся, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ выступаСт Π² Ρ€ΠΎΠ»ΠΈ ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ эскиза ΠΈΠ»ΠΈ наброска, Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€ΠΈΡ€ΡƒΡŽΡ‰Π΅Π³ΠΎ основныС достоинства ΠΈ отличия ΠΏΠΎΡ€Ρ‚Π°Π»Π°. Вакая зарисовка сниТаСт риск возникновСния ошибок. Для достиТСния качСствСнного Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π° Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ΡΡŒ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ°ΠΌΠΈ для создания ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠ° сайта Π½Π° русском языкС.

Π’ΠΈΠ΄Ρ‹ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ²

БущСствуСт нСсколько разновидностСй, ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΈΠ· ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΈΠΌΠ΅Π΅Ρ‚ свои особСнности:

  • Π‘ΡƒΠΌΠ°ΠΆΠ½Ρ‹ΠΉ – простой ΠΈ Π½Π΅Π·Π°Ρ‚Π΅ΠΉΠ»ΠΈΠ²Ρ‹ΠΉ способ быстро ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ всС Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Π΅ элСмСнты ΠΏΡ€Π΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π΅ΠΌΠΎΠ³ΠΎ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°;
  • ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½Ρ‹ΠΉ – ΠΎΠ±Π»Π°Π΄Π°Π΅Ρ‚ эстСтичным Π²ΠΈΠ΄ΠΎΠΌ ΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒΡŽ Π³ΠΈΠ±ΠΊΠΈΡ… ΠΏΡ€Π°Π²ΠΎΠΊ;
  • ДинамичСский – производится посрСдством ΠΊΠΎΠ΄ΠΈΡ€ΠΎΠ²ΠΊΠΈ, Ρ‚Π°ΠΊ прСдоставляСтся Ρ‚ΠΎΡ‡Π½ΠΎΠ΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ готовящСгося ΠΊ запуску рСсурса.

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

ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹ для создания ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠ°

Рассмотрим Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ простыС ΠΈ доступныС Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹:

  1. Cacoo – красочный сСрвис с ΠΌΠ°ΠΊΠ΅Ρ‚Π°ΠΌΠΈ для использования. Лёгкая вСрсия Π² Ρ€Π΅ΠΆΠΈΠΌΠ΅ ΠΎΠ½Π»Π°ΠΉΠ½. ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° для создания ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠ° сайта Π½Π° русском ΠΈΠΌΠ΅Π΅Ρ‚ красочныС элСмСнты. ΠŸΠΎΠ»ΡƒΡ‡Π΅Π½Π½Ρ‹ΠΉ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠ±Π»Π°Π΄Π°Ρ‚ΡŒ ΠΎΡ€ΠΈΠ³ΠΈΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒΡŽ ΠΈ ΠΊΡ€Π΅Π°Ρ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒΡŽ. Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ экспортируСтся Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ Π² png;
  2. Β«MoqupsΒ» – прСкрасная Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π° ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅ΠΌΡƒ Π°Π½Π°Π»ΠΎΠ³Ρƒ. ВстроСнныС Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΡ‹ ΠΈ схСмы ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ эскиз Π½Π° многостраничный ΠΏΠΎΡ€Ρ‚Π°Π». ΠŸΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»ΡΠ΅Ρ‚ΡΡ объСдинСниС страниц со ссылками, Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, Π° Ρ‚Π°ΠΊΠΆΠ΅ экспорт Ρ„Π°ΠΉΠ»ΠΎΠ²;
  3. HotGloo – ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠ΅ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ для отрисовки ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π² Ρ€Π΅ΠΆΠΈΠΌΠ΅ ΠΎΠ½Π»Π°ΠΉΠ½. Достаточно просто ΠΏΠ΅Ρ€Π΅Ρ‚Π°ΡΠΊΠΈΠ²Π°Ρ‚ΡŒ элСмСнты, Π²ΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ тСматичСскиС ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ, ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΌΠ°ΡΡˆΡ‚Π°Π± Π΄Π΅Ρ‚Π°Π»Π΅ΠΉ, ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΡΡ‚ΡŒ Π² Π΅Π΄ΠΈΠ½ΡƒΡŽ ΠΊΠΎΠ½Ρ†Π΅ΠΏΡ†ΠΈΡŽ. Π’Π°ΠΊΠΆΠ΅ Π΅ΡΡ‚ΡŒ полСзная функция пСрСимСнования Ρ„Π°ΠΉΠ»ΠΎΠ²;
  4. Gliffy – простой интСрфСйс ΠΈ продуманная Π±Π»ΠΎΠΊ-схСма ΡΠ²Π»ΡΡŽΡ‚ΡΡ Π³Π»Π°Π²Π½Ρ‹ΠΌΠΈ прСимущСствами. ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° для создания ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠ° сайта содСрТит мноТСство инструмСнтов для Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ каркаса страниц, послС Ρ‡Π΅Π³ΠΎ ΠΎΠ½ΠΈ ΡΠ²ΡΠ·Ρ‹Π²Π°ΡŽΡ‚ΡΡ ΠΌΠ΅ΠΆΠ΄Ρƒ собой;
  5. Axure – Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΠ΅ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ для прСдставлСния Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌ ΠΈ схСм прототипирования. Π—Π΄Π΅ΡΡŒ ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚Ρ‹ сайтов, ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρ‹ Π½Π° Ρ‚Π΅ΠΌΡƒ бизнСса, ΠΎΡ€Π³Π°Π½ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΡƒΡŽ структуру ΠΏΠΎΡ€Ρ‚Π°Π»Π°, ΠΏΠΎΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π½Ρ‹ΠΉ каркас Π² Π²ΠΈΠ΄Π΅ связанных Ρ€Π°Π·Π΄Π΅Π»ΠΎΠ²;
  6. Creately – ΠΌΠΎΡ‰Π½Ρ‹ΠΉ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ с ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΌΠΈ опциями. Π Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π½Π°ΠΏΡ€ΡΠΌΡƒΡŽ Ρ‡Π΅Ρ€Π΅Π· Π±Ρ€Π°ΡƒΠ·Π΅Ρ€. ΠžΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ² ΠΊ Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΠ°ΠΌ ΠΈ слоТным схСматичСским конструкциям;
  7. MockFlow – ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° для создания ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠ° сайта Π·Π°Ρ‚ΠΎΡ‡Π΅Π½Π° ΠΏΠΎΠ΄ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ элСмСнтов Π² Ρ€Π΅ΠΆΠΈΠΌΠ΅ Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ. ΠžΠ±ΡˆΠΈΡ€Π½Π°Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° шаблонов ΠΈ Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ. ΠŸΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρ‹ Ρ€Π°Π·Π»ΠΈΡ‡Π½ΠΎΠΉ слоТности с дальнСйшим экспортом.

ΠŸΠΎΠ΄ΠΎΠ±Π½Ρ‹Π΅ сСрвисы ΠΎΠ±Π»Π°Π΄Π°ΡŽΡ‚ Π±ΠΎΠ³Π°Ρ‚Ρ‹ΠΌ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΠΎΠΌ, с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ Ρ€ΠΈΡΡƒΡŽΡ‚ΡΡ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ любой слоТности.

Благодаря ΠΈΠΌ Π±Π΅Π· Ρ‚Ρ€ΡƒΠ΄Π° ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ эскиз Π±ΡƒΠ΄ΡƒΡ‰Π΅Π³ΠΎ многостраничного ΠΏΠΎΡ€Ρ‚Π°Π»Π° ΠΈΠ»ΠΈ нСбольшого ΠΊΠΎΡ€ΠΏΠΎΡ€Π°Ρ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ.

Π Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠ° ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒΡΡ с Ρ€Π°Π·Π΄Π΅Π»Π°ΠΌΠΈ ΠΈ Π±Π»ΠΎΠΊΠ°ΠΌΠΈ Π½Π° страницах ΠΏΠΎΡ€Ρ‚Π°Π»Π°. Наглядный рисунок структуры выступаСт Π² Ρ€ΠΎΠ»ΠΈ Π²ΡΠΏΠΎΠΌΠΎΠ³Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ инструмСнта ΠΏΡ€ΠΈ построСнии рСсурса. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΠΏΡ€ΠΎΠ²Π΅Ρ€Π΅Π½Π½Ρ‹Π΅ софты для Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ своих ΠΈΠ΄Π΅ΠΉ.

На этом ΠΏΠΎΠΊΠ° всС! ΠžΡΡ‚Π°Π²Π°ΠΉΡ‚Π΅ΡΡŒ с Π½Π°ΠΌΠΈ, Π²ΠΏΠ΅Ρ€Π΅Π΄ΠΈ Π΅Ρ‰Π΅ ΠΌΠ½ΠΎΠ³ΠΎ интСрСсного! НС Π·Π°Π±Ρ‹Π²Π°ΠΉΡ‚Π΅ ΠΏΠΎΠ΄ΠΏΠΈΡΡ‹Π²Π°Ρ‚ΡŒΡΡ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π±Ρ‹Ρ‚ΡŒ Π² курсС всСх свСТих новостСй!

asonin.ru

9 инструмСнтов для создания ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠ° сайта

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

О Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ landing page ΠΈ Π·Π°Ρ‡Π΅ΠΌ ΠΎΠ½ Π½ΡƒΠΆΠ΅Π½, ΠΌΡ‹ ΡƒΠ·Π½Π°Π»ΠΈ Π² ΠΏΡ€ΠΎΡˆΠ»Ρ‹ΠΉ Ρ€Π°Π· . БСгодня обратимся ΠΊ основным инструмСнтам ΠΈ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ°ΠΌ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠΌΠΎΠ³ΡƒΡ‚ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π΅Π³ΠΎ ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΌ для дальнСйшСй Ρ€Π°Π±ΠΎΡ‚Ρ‹ Π½Π°Π΄ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠΌ. ΠŸΡ€ΠΎΠ΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€ΠΈΡ€ΡƒΠ΅ΠΌ послСдниС возмоТности, новСйшиС интСрфСйсы, Π° Ρ‚Π°ΠΊΠΆΠ΅ сравним Ρ†Π΅Π½Ρ‹.Π˜Ρ‚Π°ΠΊ, ΠΏΠΎΠ΅Ρ…Π°Π»ΠΈ.

1. POP

Π‘Π°ΠΌΡ‹ΠΉ простой способ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ Π»Π΅Π½Π΄ΠΈΠ½Π³Π° – это рисунок ΠΎΡ‚ Ρ€ΡƒΠΊΠΈ. ΠœΠ°ΠΊΠ΅Ρ‚ рисуСм Π½Π° Π±ΡƒΠΌΠ°Π³Π΅, Π·Π°Ρ‚Π΅ΠΌ Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΡ€ΡƒΠ΅ΠΌ ΠΈ послС этого ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΡƒΠ΅ΠΌ Π² ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ΅ POP. Но, ΠΏΡ€ΠΈΠ·Π½Π°Ρ‚ΡŒΡΡ, ΠΏΡ€ΠΎΡ‰Π΅ ΠΈ Π°ΠΊΠΊΡƒΡ€Π°Ρ‚Π½Π΅Π΅ Π½Π°Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚ прямо Π² ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ΅. Для этого Π² POP Π΅ΡΡ‚ΡŒ нСсколько самых Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Ρ… Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ: Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ, Π½Π°Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΎΠΉ ΠΈΠ»ΠΈ ΠΊΡ€ΡƒΠ³Π»ΠΎΠΉ Ρ„ΠΎΡ€ΠΌΡ‹, ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ, Π³Π΄Π΅ Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ тСкст (ΠΈΠ»ΠΈ прямо Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ Ρ‚ΠΎΡ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ подскаТСт ΠΊΠΎΠΏΠΈΡ€Π°ΠΉΡ‚Π΅Ρ€).

ΠŸΡ€ΠΎΡ†Π΅ΡΡ создания ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠ° Π² ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ΅ POP. ΠœΠΈΠ½ΠΈΠΌΡƒΠΌ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ, Π·Π°Ρ‚ΠΎ ΠΈ ΠΌΠΈΠ½ΠΈΠΌΡƒΠΌ усилий

ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° ΠΏΡ€ΠΎΡΡ‚Π΅ΠΉΡˆΠ°Ρ. Π—Π΄Π΅ΡΡŒ Π½Π΅ получится ΠΊΡ€ΡƒΡ‚ΠΎΠ³ΠΎ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠ°. ΠœΠΈΠ½ΠΈΠΌΡƒΠΌ инструмСнтов для ΠΌΠΈΠ½ΠΈΠΌΡƒΠΌΠ° Π·Π°Π΄Π°Ρ‡. Но ΠΏΡ€ΠΈ этом POP ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ любой дСвайс: iPhone, iPad, Apple Watch, Apple TV, Android. Π—Π΄Π΅ΡΡŒ Π΅ΡΡ‚ΡŒ Ρ‚Π°ΠΊΠΆΠ΅ рабочая ΡΠ΅Ρ‚ΡŒ, ΠΊΡƒΠ΄Π° ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ·Π²Π°Ρ‚ΡŒ ΠΊΠΎΠ»Π»Π΅Π³ ΠΈ ΠΊΠ»ΠΈΠ΅Π½Ρ‚ΠΎΠ², Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ±ΡΡƒΠΆΠ΄Π°Ρ‚ΡŒ вСсь Π½Π΅Ρ…ΠΈΡ‚Ρ€Ρ‹ΠΉ процСсс. И, ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ, POP интСгрируСтся с Dropbox.Π‘Ρ‚ΠΎΠΈΠΌΠΎΡΡ‚ΡŒ: ΠΎΡ‚ 14$ Π² мСсяц. Π•ΡΡ‚ΡŒ бСсплатная вСрсия.

2. Balsamiq

Π’ΠΎΠΆΠ΅ нСслоТная ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° ΠΈ ΠΏΠΎ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»Ρƒ Π½Π΅ Π»ΡƒΡ‡ΡˆΠ°Ρ. Однако Balsamiq ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ Π±ΠΎΠ»Π΅Π΅ ΡˆΠΈΡ€ΠΎΠΊΠΈΠ΅ возмоТности, ΠΈΠΌΠ΅Π΅Ρ‚ большой Π½Π°Π±ΠΎΡ€ UI-элСмСнтов. Π—Π΄Π΅ΡΡŒ ΠΌΠΎΠΆΠ½ΠΎ Π²Ρ‹Π±ΠΈΡ€Π°Ρ‚ΡŒ Π·Π½Π°Ρ‡ΠΊΠΈ, Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ€Π°Π·Π½Ρ‹Ρ… Ρ„ΠΎΡ€ΠΌ, Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹, Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ со ΡˆΡ€ΠΈΡ„Ρ‚Π°ΠΌΠΈ. Π£Π΄ΠΎΠ±Π½Π΅Π΅ выглядит само Ρ€Π°Π±ΠΎΡ‡Π΅Π΅ ΠΏΠΎΠ»Π΅: Π΅ΡΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ°. Π’ Balsamiq Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ сайтов ΠΈ ΠΊΠ°Ρ€Ρ‚Ρ‹. Он ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ Ρ‚Π΅ΠΌ, ΠΊΡ‚ΠΎ Π½Π΅ силСн Π² Ρ„ΠΎΡ‚ΠΎΡˆΠΎΠΏΠ΅.

ΠŸΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π² Balsamiq: ΠΊΠ°ΠΊ Π½Π° бумагС…

ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡƒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ нСпосрСдствСнно Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ ΠΈΠ»ΠΈ Π·Π°Π³Ρ€ΡƒΠΆΠ°ΡŽΡ‚ Π² качСствС прилоТСния Adobe AIR. Π Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π½Π° Mac ΠΈΠ»ΠΈ Windows, интСгрируСтся с Google Docs.Π‘Ρ‚ΠΎΠΈΠΌΠΎΡΡ‚ΡŒ: ΠΎΡ‚ 12$ Π² мСсяц. 30 Π΄Π½Π΅ΠΉ бСсплатного тСстирования.

3. InVision

Π­Ρ‚ΠΎ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ для прСобразования статичСских ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² Π² ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΡ‹ ΠΈ ΠΌΠΎΠΊΠ°ΠΏΡ‹ с ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΌΠΈ элСмСнтами, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ срСдство «оТивлСния» ΠΌΠ°ΠΊΠ΅Ρ‚Π°. InVision ΠΈΠΌΠΈΡ‚ΠΈΡ€ΡƒΠ΅Ρ‚ ΠΏΠΎΠ»Π½ΠΎΡ†Π΅Π½Π½ΡƒΡŽ Ρ€Π°Π±ΠΎΡ‚Ρƒ Π±ΡƒΠ΄ΡƒΡ‰Π΅Π³ΠΎ сайта. На Π½Π΅ΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ²ΡΠ·Ρ‹Π²Π°Ρ‚ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… страниц Π² ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, это ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ инструмСнт для Ρ€Π°Π±ΠΎΡ‚Ρ‹ Π² студии. ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ΅ обСспСчСниС Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ нСслоТныС инструмСнты drag-and-drop, благодаря ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ процСсс проСктирования UX-ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ² становится Π»Π΅Π³Ρ‡Π΅.

Invision: простыС инструмСнты оТивят ваш ΠΌΠ°ΠΊΠ΅Ρ‚

ΠŸΡ€ΠΎΠ΅ΠΊΡ‚ ΠΌΠΎΠΆΠ½ΠΎ Ρ‚Π΅ΡΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅, Π½Π° мобильникС ΠΈ Π² Ρ€Π΅ΠΆΠΈΠΌΠ΅ Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ. ΠŸΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ позволяСт ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ ΠΊ ΠΎΠ±ΡΡƒΠΆΠ΄Π΅Π½ΠΈΡŽ ΠΊΠΎΠ»Π»Π΅Π³ ΠΈ Π·Π°ΠΊΠ°Π·Ρ‡ΠΈΠΊΠΎΠ², ΠΏΡ€ΠΈΡ‡Π΅ΠΌ ΠΎΠ±Ρ‰Π°Ρ‚ΡŒΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΊΠ°ΠΊ Π² Ρ‡Π°Ρ‚Π΅, Ρ‚Π°ΠΊ ΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΏΠ΅Ρ€ΡΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΏΡ€ΠΈΠ²Π°Ρ‚Π½Ρ‹Ρ… ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠ΅Π²: Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρƒ, Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΡƒ, Π·Π°ΠΊΠ°Π·Ρ‡ΠΈΠΊΡƒ. Π€ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½ΠΈΡ€ΡƒΠ΅Ρ‚ Π½Π° основС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°, ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ всС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹. Π Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ с iOS ΠΈ Android. Π˜Π½Ρ‚Π΅Π³Ρ€ΠΈΡ€ΡƒΠ΅Ρ‚ΡΡ с Dropbox, Google Drive, Box, GitHub, Slack ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ°ΠΌΠΈ. Π‘Ρ‚ΠΎΠΈΠΌΠΎΡΡ‚ΡŒ: ΠΎΡ‚ 15$ Π² мСсяц. Π•ΡΡ‚ΡŒ бСсплатная вСрсия.

4. PowerMockup

PowerMockup – это простой Π½Π°Π±ΠΎΡ€ инструмСнтов, подходящий Ρ‚Π΅ΠΌ, ΠΊΡ‚ΠΎ Π»ΡŽΠ±ΠΈΡ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π² PowerPoint. Он своСго Ρ€ΠΎΠ΄Π° Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊ PowerPoint, встроСн Π² ΠΏΠ°ΠΊΠ΅Ρ‚ Microsoft Office ΠΈ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ возмоТности ΠΈ эскизы для прототипирования. Π˜ΠΌΠ΅Π΅Ρ‚ΡΡ мноТСство Ρ€Π°Π·Π½ΠΎΠΎΠ±Ρ€Π°Π·Π½Ρ‹Ρ… UI-элСмСнтов ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса ΠΈ порядка 650 Π·Π½Π°Ρ‡ΠΊΠΎΠ². Π‘ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ Ρ„ΠΎΡ€ΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠΏΠΎΠ»Π½ΡΡ‚ΡŒ своими элСмСнтами. Π’ PowerMockup ΠΊΠΎΠ»Π»Π΅Π³ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π½Π°Π΄ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠΌ вмСстС, Ρ„Π°ΠΉΠ»Ρ‹ Π»Π΅Π³ΠΊΠΎ ΡΠΊΡΠΏΠΎΡ€Ρ‚ΠΈΡ€ΡƒΡŽΡ‚ΡΡ Π² PNG, JPEG, BMP, Π² Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Ρ… графичСских символах, Ρ‚Π°ΠΊΠΈΡ…, ΠΊΠ°ΠΊ WMF ΠΈΠ»ΠΈ EPS, Π° Ρ‚Π°ΠΊΠΆΠ΅ Π²ΠΈΠ΄Π΅ΠΎ ΠΈ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ… PDF. Благодаря принадлСТности Microsoft Office Ρ€Π°Π±ΠΎΡ‚Π° Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Π° Ρ‚Π°ΠΊΠΆΠ΅ Π² Word ΠΈ Excel. К ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρƒ, Π΄Π΅Π»Π°Π΅ΠΌ ΡΠΏΠ΅Ρ†ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΡŽ Π² PowerPoint, Π° послС ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅ΠΌ Π΅Π΅ Π² Word.

PowerMockup: ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ прямо Π² PowerPoint

PowerMockup доступСн Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для Windows. Π‘Ρ‚ΠΎΠΈΠΌΠΎΡΡ‚ΡŒ: ΠΎΡ‚ 60$ (Ρ€Π°Π·ΠΎΠ²Ρ‹ΠΉ ΠΏΠ»Π°Ρ‚Π΅ΠΆ). 30 Π΄Π½Π΅ΠΉ тСстирования.

5. Axure

Π­Ρ‚ΠΎ ΠΏΡ€ΠΎΡ„Π΅ΡΡΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ UX-инструмСнт, ΠΏΠΎΠΌΠΎΠ³Π°ΡŽΡ‰ΠΈΠΉ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΡƒΠΆΠ΅ слоТныС ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΡ‹. Π”Π΅Π»Π°Π΅Ρ‚ Π²Π΅Π±-прилоТСния, Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π½Π° Mac ΠΈ Windows. Π—Π΄Π΅ΡΡŒ ΡƒΠ΄ΠΎΠ±Π½ΠΎ ΠΏΠ΅Ρ€Π΅Ρ‚Π°ΡΠΊΠΈΠ²Π°Ρ‚ΡŒ элСмСнты, Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ ΠΌΠ΅Π½ΡΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ Π²ΠΈΠ΄ΠΆΠ΅Ρ‚ΠΎΠ², ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ страницы, ΠΏΠ°ΠΏΠΊΠΈ, Ρ‚Π°ΠΊΠΆΠ΅ ΠΎΡ‡Π΅Π½ΡŒ Π»Π΅Π³ΠΊΠΎ Ρ‚Π΅ΡΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π²ΠΈΠ΄Ρ‹ Π±ΡƒΠ΄ΡƒΡ‰Π΅Π³ΠΎ Π»Π΅Π½Π΄ΠΈΠ½Π³Π° ΠΏΠΎΠ΄ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ устройства. Π’ΠΎ Π΅ΡΡ‚ΡŒ, ΠΌΠΎΠΆΠ½ΠΎ быстро Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΡΠΊΠ°Ρ‡ΠΈΠ²Π°Ρ‚ΡŒ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ для Π²ΠΈΠ΄ΠΆΠ΅Ρ‚ΠΎΠ². Π’ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ΅ имССтся ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Ρ„Ρ€Π΅ΠΉΠΌΠΎΠ² ΠΏΠΎΠ΄ iOS, Π° Ρ‚Π°ΠΊΠΆΠ΅ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ для iPhone, iPad ΠΈ Android. Axure ΡƒΠ΄ΠΎΠ±Π΅Π½ для прорисовки Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌ, Π°Π½Π½ΠΎΡ‚Π°Ρ†ΠΈΠΉ, спСцификаций. Π’ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π΄Π΅Π»Π°Ρ‚ΡŒ Ρ†Π΅Π»Ρ‹Π΅ сайты. Π’ΠΎ врСмя Ρ€Π°Π±ΠΎΡ‚Ρ‹ Π½Π°Π΄ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠΌ Ρ„ΠΎΡ€ΠΌΠΈΡ€ΡƒΡŽΡ‚ΡΡ Ρ„Π°ΠΉΠ»Ρ‹ HTML, Javascript, CSS.

Π Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠ° Π² Axure: максимум возмоТностСй для Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π°

Π•ΡΡ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ бСсплатной Ρ€Π°Π±ΠΎΡ‚Ρ‹ Π² Ρ‚Π΅Ρ‡Π΅Π½ΠΈΠ΅ мСсяца. Наши Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ Axure. Π‘Ρ‚ΠΎΠΈΠΌΠΎΡΡ‚ΡŒ: ΠΎΡ‚ 300$ (Ρ€Π°Π·ΠΎΠ²Ρ‹ΠΉ ΠΏΠ»Π°Ρ‚Π΅ΠΆ).

6. Principle

Π”ΠΎΠ²ΠΎΠ»ΡŒΠ½ΠΎ быстрая, ΠΈΠ½Ρ‚ΡƒΠΈΡ‚ΠΈΠ²Π½ΠΎ понятная дСсктопная ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ°, Π½Π΅ Ρ‚Ρ€Π΅Π±ΡƒΡŽΡ‰Π°Ρ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ ΠΊ ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Ρƒ. Π’ Π½Π΅ΠΉ ΠΌΠΎΠΆΠ½ΠΎ Π΄Π΅Π»Π°Ρ‚ΡŒ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΡ‹ с анимациями. Π•ΡΡ‚ΡŒ инструмСнты для устройств с Ρ‚Π°Ρ‡-экранами, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΠΌΠΈ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ Ρ€Π°Π·Π½Ρ‹Π΅ Ρ‚ΠΈΠΏΡ‹ взаимодСйствия: tap, scroll, drag-and-drop, Π΄ΠΎΠ»Π³ΠΎΠ΅ Π½Π°ΠΆΠ°Ρ‚ΠΈΠ΅ ΠΈ Π΄Ρ€. Из ΠΏΡ€ΠΎΡ‡ΠΈΡ… Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ доступны: Π°Ρ€Ρ‚Π±ΠΎΡ€Π΄Ρ‹, маски, прСдустановки. Π”Ρ€Π°ΠΉΠ²Π΅Ρ€-панСль позволяСт Π΄Π΅Π»Π°Ρ‚ΡŒ с ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠΌ интСрСсныС ΡˆΡ‚ΡƒΠΊΠΈ: Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π²Ρ€Π°Ρ‰Π΅Π½ΠΈΠ΅ ΠΊΠ°ΠΊΠΎΠ³ΠΎ-Π½ΠΈΠ±ΡƒΠ΄ΡŒ элСмСнта Π²ΠΎ врСмя свайпа.

ΠŸΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π² Principle

Π Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π½Π° Mac, ΡƒΠ΄ΠΎΠ±Π½Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ Mac OSX благодаря ΠΏΠΎΡ…ΠΎΠΆΠΈΠΌ элСмСнтам интСрфСйса. Π‘Π»ΠΎΠΆΠ½Π° ΠΈΠ·-Π·Π° нСобходимости ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠΉ ΠΎΡ€Π³Π°Π½ΠΈΠ·Π°Ρ†ΠΈΠΈ Ρ„Π°ΠΉΠ»ΠΎΠ² Sketch ΠΏΠ΅Ρ€Π΅Π΄ синхронизациСй.Π‘Ρ‚ΠΎΠΈΠΌΠΎΡΡ‚ΡŒ: 129$ (Ρ€Π°Π·ΠΎΠ²Ρ‹ΠΉ ΠΏΠ»Π°Ρ‚Π΅ΠΆ). 14 Π΄Π½Π΅ΠΉ бСсплатного тСстирования.

7. Fluid

ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ с ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹ΠΌΠΈ прилоТСниями. Π’ Π½Π΅ΠΉ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ для Android, iOS, Π° Ρ‚Π°ΠΊΠΆΠ΅ Windows. По сути, это ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ для Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° Π½Π° HTML5. Π’Π°ΠΊΠΆΠ΅ проста Π² использовании, с быстрым Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΠΎΠΌ, позволяСт сразу ΠΆΠ΅ ΠΎΡ†Π΅Π½ΠΈΠ²Π°Ρ‚ΡŒ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ Π½Π° мобильникС. Π˜ΠΌΠ΅Π΅Ρ‚ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ ΠΈΠ· Π±ΠΎΠ»Π΅Π΅ 1500 элСмСнтов. Π‘ Fluid Π»Π΅Π³ΠΊΠΎ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ пСрСтаскиваниСм, ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ ТСсты, дСйствия Π½Π° прикосновСния, drag-and-drop, ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π΅Π½ΠΈΠ΅ шаблона Π½Π° страницах ΠΈ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Ρ‹ ΠΌΠ΅ΠΆΠ΄Ρƒ Π½ΠΈΠΌΠΈ, Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ iPhone ΠΈ Android, Ρ€Π°Π±ΠΎΡ‚Ρƒ со своими изобраТСниями ΠΈ ΡΠΊΡ€ΠΈΠ½ΡˆΠΎΡ‚Π°ΠΌΠΈ. Π“ΠΎΡ‚ΠΎΠ²Ρ‹ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠ΅Ρ€Π΅Π²ΠΎΠ΄ΠΈΡ‚ΡŒ Π² Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹, Π² Ρ‚ΠΎΠΌ числС Π² PDF ΠΈ HTML. Π•ΡΡ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ совмСстного Ρ€Π°Π±ΠΎΡ‡Π΅Π³ΠΎ процСсса с ΠΊΠΎΠ»Π»Π΅Π³Π°ΠΌΠΈ.

Π Π°Π±ΠΎΡ‡Π΅Π΅ пространство для создания ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠ° Π² Fluid

БСрвис ΠΎΠ±Π»Π΅Π³Ρ‡Π°Π΅Ρ‚ Π·Π°Π΄Π°Ρ‡ΠΈ программистам: с Π½ΠΈΠΌ Π»Π΅Π³Ρ‡Π΅ Ρ€Π°Π·ΠΎΠ±Ρ€Π°Ρ‚ΡŒΡΡ со структурой, Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒΡŽ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°, ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ всС Π² ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎΠΌ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π΅. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, оптимизируСтся вся Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° ΠΈ связь с Π±Π°Π·ΠΎΠΉ Π΄Π°Π½Π½Ρ‹Ρ…. Π’ Fluid ΠΏΡ€ΠΎΡ‰Π΅ ΡΠΎΠ±ΠΈΡ€Π°Ρ‚ΡŒ всС экраны Π² ΠΎΠ΄ΠΈΠ½ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚. Π‘Ρ‚ΠΎΠΈΠΌΠΎΡΡ‚ΡŒ: ΠΎΡ‚ 15$ Π² мСсяц. Π•ΡΡ‚ΡŒ бСсплатная вСрсия.

8. Framer

Π­Ρ‚ΠΎ инструмСнт для ΠΏΡ€ΠΎΠ΄Π²ΠΈΠ½ΡƒΡ‚Ρ‹Ρ…. Π—Π΄Π΅ΡΡŒ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ разрабатываСтся Π² ΠΊΠΎΠ΄Π΅, c использованиСм языка CoffeeScript. Но Π½Π΅ стоит ΠΏΡƒΠ³Π°Ρ‚ΡŒΡΡ, созданиС ΠΊΠΎΠ΄Π° Π²ΠΎ Framer β€” достаточно ΡƒΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ процСсс, ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° снабТСна инструкциями, ΠΎΡΠ²ΠΎΠΈΡ‚ΡŒ Π΅Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π΄Π°ΠΆΠ΅ Π½Π΅ΠΏΠΎΠ΄Π³ΠΎΡ‚ΠΎΠ²Π»Π΅Π½Π½Ρ‹ΠΉ. Π’ΠΎ Framer ΠΌΠΎΠΆΠ½ΠΎ Π΄Π΅Π»Π°Ρ‚ΡŒ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ. ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ нравится Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° заставляСт ΠΊΠ°ΠΊ слСдуСт ΠΏΡ€ΠΎΠ΄ΡƒΠΌΡ‹Π²Π°Ρ‚ΡŒ Π»ΠΎΠ³ΠΈΠΊΡƒ ΠΈ структуру Π΄ΠΈΠ·Π°ΠΉΠ½Π°.

Framer: ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π² ΠΊΠΎΠ΄Π΅

Π Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π½Π° Mac. Π˜Π½Ρ‚Π΅Π³Ρ€ΠΈΡ€ΡƒΠ΅Ρ‚ΡΡ со Sketch ΠΈ Photoshop. Π’ΠΎ Framer Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ всС Π² Ρ€Π°ΠΌΠΊΠ°Ρ… JavaScript β€” Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, использованиС ΠΆΠΈΠ²Ρ‹Ρ… Π΄Π°Π½Π½Ρ‹Ρ… ΠΈΠ»ΠΈ аксСлСромСтра .Π‘Ρ‚ΠΎΠΈΠΌΠΎΡΡ‚ΡŒ: ΠΎΡ‚ 129$ Π² Π³ΠΎΠ΄.

9. Flinto

Π•Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ Π΄Π°Π²Π½ΠΎ извСстный инструмСнт. Π‘ Π΅Π³ΠΎ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π΄Π΅Π»Π°Ρ‚ΡŒ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΡ‹. Π—Π΄Π΅ΡΡŒ прСдставлСны всС Π½ΡƒΠΆΠ½Ρ‹Π΅ инструмСнты для создания Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΉ, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Π°Ρ систСма, с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с нСсколькими экранами ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. МоТно Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Π΄Π²Π΅ вСрсии: Flinto Lite, Π° Ρ‚Π°ΠΊΠΆΠ΅ Flinto for Mac. ПослСдняя ΠΎΠ±Π»Π°Π΄Π°Π΅Ρ‚ ΡˆΠΈΡ€ΠΎΠΊΠΈΠΌ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΠΎΠΌ для создания Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΉ, мощная удобная ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ°. Π•Π΅ быстрСС всСго ΠΎΡΠ²ΠΎΠΈΡ‚ΡŒ Ρ‚Π΅ΠΌ, ΠΊΡ‚ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Π» Π½Π° Mac OSX. Π˜ΠΌΠ΅Π΅Ρ‚ΡΡ ΠΏΠ»Π°Π³ΠΈΠ½ для Sketch, это ΡƒΠΏΡ€ΠΎΡ‰Π°Π΅Ρ‚ воссозданиС Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠ². Π•ΡΡ‚ΡŒ нСдостатки: Flinto for Mac Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ с шаблонами ΠΏΠΎΠ΄ мобильники ΠΈ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠΌ здСсь Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ Π΄Π΅Π»ΠΈΡ‚ΡŒΡΡ ΠΈΡΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ с Ρ‚Π΅ΠΌΠΈ, ΠΊΡ‚ΠΎ установил Flinto for Mac.

ΠŸΡ€ΠΎΡ†Π΅ΡΡ создания ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠ° Π² Flinto for Mac

Π‘Ρ‚ΠΎΠΈΠΌΠΎΡΡ‚ΡŒ: ΠΎΡ‚ 20$ Π² мСсяц.

Какой сСрвис Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ?

Π’Π°Ρˆ Π²Ρ‹Π±ΠΎΡ€ Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°Π²ΠΈΡΠ΅Ρ‚ΡŒ ΠΎΡ‚ Π·Π°Π΄Π°Ρ‡ΠΈ ΠΈ Π±ΡŽΠ΄ΠΆΠ΅Ρ‚Π°. ΠŸΡ€ΠΎΡΡ‚ΠΎΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ ΡΠΎΠ±Ρ€Π°Ρ‚ΡŒ мысли Π²ΠΎΠ΅Π΄ΠΈΠ½ΠΎ, ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π² ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ΅, Π²Ρ€ΠΎΠ΄Π΅ POP ΠΈΠ»ΠΈ PowerMockup. Для Π±ΠΎΠ»Π΅Π΅ ΠΌΠ°ΡΡˆΡ‚Π°Π±Π½Ρ‹Ρ… ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ² ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΠΌΠ½ΠΎΠ³ΠΎΡ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹ Ρ‚ΠΈΠΏΠ°: Axure, Fluid, Principle.

Π“Π»Π°Π²Π½ΠΎΠ΅, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΏΠΎΠ½ΠΈΠΌΠ°Ρ‚ΡŒ, β€” это Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π΄Π°ΠΆΠ΅ Π»Π΅Π½Π΄ΠΈΠ½Π³ Π½Π° шаблонС нуТдаСтся Π² ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ. Π’Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΊ дСталям Π½Π° этом этапС ΠΏΡ€Π΅Π΄ΡƒΠΏΡ€Π΅Π΄ΠΈΡ‚ появлСниС Π±Π°Π³ΠΎΠ².

spark.ru

Как Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ инструмСнт для прототипирования Π² 2018 Π³ΠΎΠ΄Ρƒ? / Π‘Π±Π΅Ρ€Π±Π°Π½ΠΊ corporate blog / Habr

Здравствуй, Π₯Π°Π±Ρ€! МСня Π·ΠΎΠ²ΡƒΡ‚ Баша ΠžΡ‚Π²Π°ΠΆΠ½Ρ‹ΠΉ, я Ρ€Π°Π±ΠΎΡ‚Π°ΡŽ ΠΊΠΎΠΌΠ°Π½Π΄Π΅ Digital Business Platform Π‘Π±Π΅Ρ€Π±Π°Π½ΠΊΠ° ΠΈ Π‘Π±Π΅Ρ€Ρ‚Π΅Ρ…Π°, ΠΈ занимаюсь Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ ΠΈ Π²Π΅Π±-ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ². Π‘ΠΎΠ»ΡŒΡˆΠ°Ρ Ρ‡Π°ΡΡ‚ΡŒ ΠΌΠΎΠ΅ΠΉ Ρ€Π°Π±ΠΎΡ‚Ρ‹ состоит ΠΈΠ· сборки ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ² Ρ€Π°Π·Π½ΠΎΠΉ стСпСни Π΄Π΅Ρ‚Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ для Ρ€Π°Π·Π½Ρ‹Ρ… Ρ†Π΅Π»Π΅ΠΉ. НовыС инструмСнты ΠΈ сСрвисы для Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈ прототипирования выходят ΠΈ ΠΎΠ±Π½ΠΎΠ²Π»ΡΡŽΡ‚ΡΡ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ дСнь. Π― ΠΏΡ€ΠΎΠ²Ρ‘Π» ΠΏΠΎΠ»Π½ΠΎΠ΅ ΠΈ Π³Π»ΡƒΠ±ΠΎΠΊΠΎΠ΅ исслСдованиС инструмСнтов, прСдставлСнных сСгодня Π½Π° Ρ€Ρ‹Π½ΠΊΠ΅, ΠΈ ΠΏΠΎΠΌΠΎΠ³Ρƒ Π² Π½ΠΈΡ… Ρ€Π°Π·ΠΎΠ±Ρ€Π°Ρ‚ΡŒΡΡ.

Π― Ρ€Π°Π·Π±ΠΈΠ» список Π½Π° Ρ‚Ρ€ΠΈ большиС Π³Ρ€ΡƒΠΏΠΏΡ‹ ΠΏΠΎ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ ΠΈ Ρ€Π°Π·Π±Π΅Ρ€Ρƒ ΠΊΠ°ΠΆΠ΄ΡƒΡŽ ΠΏΠΎ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ:



На самом Π΄Π΅Π»Π΅ инструмСнтов Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ большС. Π—Π΄Π΅ΡΡŒ собраны ΡΠΈΠ»ΡŒΠ½Ρ‹Π΅ ΠΈ интСрСсныС Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π½Π°Π΄Ρ‘ΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π² Ρ€Π°Π±ΠΎΡ‚Π΅. ВсС ΠΎΠ½ΠΈ ΠΈΠΌΠ΅ΡŽΡ‚ срСдства для просмотра созданных ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ² ΠΈ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ подходят ΠΊΠ°ΠΊ для Π²Π΅Π±-сайтов, Ρ‚Π°ΠΊ ΠΈ для мобильной Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ.

Π‘ΠΏΠΎΠΉΠ»Π΅Ρ€

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


1-я Π³Ρ€ΡƒΠΏΠΏΠ°β€Šβ€”β€ŠΡΡ‚Ρ€ΡƒΠΊΡ‚ΡƒΡ€Π°, Π»ΠΎΡƒ-сцСнарии


Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚Ρ‹ ΠΏΠ΅Ρ€Π²ΠΎΠΉ Π³Ρ€ΡƒΠΏΠΏΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ изобраТСния экрана, связанныС ΠΌΠ΅ΠΆΠ΄Ρƒ собой ссылками. Бсылки привязаны ΠΊ хотспотам ΠΈΠ»ΠΈ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°ΠΌ. Π’ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ ΠΏΠΎΠ»ΡƒΡ‡Π°ΡŽΡ‚ΡΡ статичныС ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΡ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π»Π΅Π³ΠΊΠΎ Ρ€Π°ΡΡˆΠ°Ρ€ΠΈΡ‚ΡŒ, ΡΠΎΠ±Ρ€Π°Ρ‚ΡŒ ΠΎΠ±Ρ€Π°Ρ‚Π½ΡƒΡŽ связь ΠΈ ΠΎΡ‚Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ.

Π‘ ΠΈΡ… ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΌΠΎΠΆΠ½ΠΎ Π·Π° нСсколько ΠΌΠΈΠ½ΡƒΡ‚ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ Π³ΠΈΠΏΠΎΡ‚Π΅Π·Ρ‹, ΡΠΎΠ±Ρ€Π°Ρ‚ΡŒ сцСнарий для ΠΏΠ΅Ρ€Π²ΠΈΡ‡Π½ΠΎΠ³ΠΎ Π°Π½Π°Π»ΠΈΠ·Π°. Но ΠΈΠ·-Π·Π° большой стСпСни условности ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΡ‹ Π²Π΅Π΄ΡƒΡ‚ сСбя совсСм Π½Π΅ Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ мобильноС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ Π·Π°ΠΏΡƒΡ‚Π°Ρ‚ΡŒ рСспондСнтов ΠΈ ΡΠ½ΠΈΠ·ΠΈΡ‚ΡŒ качСство тСстирования.
На сСгодняшний дСнь самыС Π·Π°ΠΌΠ΅Ρ‚Π½Ρ‹Π΅ ΠΈΠ½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚Ρ‹β€Šβ€”β€ŠMarvel, Invision, ΠΈ Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹Π΅ срСдства Adobe XD, Figma, ΠΈ Sketch (с 49-ΠΉ вСрсии).

Marvelβ€Šβ€” β€ŠΠ΅ΡΡ‚ΡŒ бСсплатная вСрсия
ΠŸΡ€ΠΎΡΡ‚Π΅ΠΉΡˆΠΈΠΉ ΠΎΠ½Π»Π°ΠΉΠ½-сСрвис для создания ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ². Π Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ ΠΊΠ°ΠΊ Π² Π²ΠΈΠ΄Π΅ дополнСния ΠΊ Π΄ΠΈΠ·Π°ΠΉΠ½-Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π°ΠΌ, Ρ‚Π°ΠΊ ΠΈ ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ Π² Π²ΠΈΠ΄Π΅ Π²Π΅Π±-сСрвиса. НСдавно обзавСлся собствСнным простым Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ΠΎΠΌ. МобильноС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ позволяСт Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΡ€ΠΎΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°Ρ‚ΡŒ, Π½ΠΎ ΠΈ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΈ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΡ‹. БСсплатная вСрсия ΠΈΠΌΠ΅Π΅Ρ‚ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠ΅ Π½Π° количСство ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ², Π½ΠΎ Π² ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ ΠΎΠ½ΠΎ Π²Ρ‹ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΎ ΠΈ ΠΌΠΎΠΆΠ½ΠΎ Π²ΠΏΠΎΠ»Π½Π΅ лСгально ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ любоС количСство ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ².

ΠŸΠ»ΡŽΡΡ‹
+ ΠŸΡ€ΠΎΡΡ‚ΠΎΡ‚Π° ΠΈ удобство
+ ΠΠ²Ρ‚ΠΎΠ½ΠΎΠΌΠ½ΠΎΡΡ‚ΡŒ (ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π±Π΅Π· Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ΠΎΠ²)
+ Условная Π±Π΅ΡΠΏΠ»Π°Ρ‚Π½ΠΎΡΡ‚ΡŒ
+ Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚Ρ‹ для совмСстной Ρ€Π°Π±ΠΎΡ‚Ρ‹ ΠΈ тСстирования
ΠœΠΈΠ½ΡƒΡΡ‹
βˆ’ НС Π·Π°ΠΌΠ΅Ρ‡Π΅Π½ΠΎ

Invision App β€” ΠΎΡ‚ 13$ Π² мСсяц
Invision (Π½Π΅ Studio)β€Šβ€”β€ŠΡ‚ΠΎΠΆΠ΅ Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ для Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ΠΎΠ², Π½ΠΎ, Π² ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ Marvel, позволяСт ΡΠ²ΡΠ·Ρ‹Π²Π°Ρ‚ΡŒ экраны Π½Π°ΠΏΡ€ΡΠΌΡƒΡŽ Π² скСтчС ΠΈ ΡΡΠΊΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΡƒΠΆΠ΅ Π³ΠΎΡ‚ΠΎΠ²Ρ‹ΠΉ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ Π±Π΅Π· настройки ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΎΠ² ΠΈ связСй. Π’Π°ΠΊΠΆΠ΅ отличаСтся большим количСством Π²ΡΠΏΠΎΠΌΠΎΠ³Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ ΠΈ Ρ€Π°Π·Π²ΠΈΡ‚ΠΎΠΉ инфраструктурой. ВмСстС с инструмСнтом прототипирования ΠΈΠ΄Ρ‘Ρ‚ ΡˆΠΈΡ€ΠΎΠΊΠΈΠΉ Π½Π°Π±ΠΎΡ€ сСрвисов для совмСстной Ρ€Π°Π±ΠΎΡ‚Ρ‹, хранСния Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ, собствСнного стока ΠΈ ΠΌΠ½ΠΎΠ³ΠΎ Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ.

ΠŸΠ»ΡŽΡΡ‹
+ Развитая экосистСма Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… сСрвисов
+ Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Π½Π°ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒ связи прямо Π² скСтчС
ΠœΠΈΠ½ΡƒΡΡ‹
βˆ’ НС Π·Π°ΠΌΠ΅Ρ‡Π΅Π½ΠΎ

Adobe XDβ€Šβ€”β€Š644 β‚½ Π² мСсяц (Π΅ΡΡ‚ΡŒ бСсплатный стартовый ΠΏΠ»Π°Π½, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π΄Π°Ρ‘Ρ‚ ΠΏΠΎΡˆΠ°Ρ€ΠΈΡ‚ΡŒ всСго 1 ΠΏΡ€ΠΎΠ΅ΠΊΡ‚)
Sketch β€”β€Š99 $ Π² Π³ΠΎΠ΄
Figmaβ€Šβ€”β€ŠΠ΅ΡΡ‚ΡŒ бСсплатная вСрсия

ВстроСнныС Π² Π΄ΠΈΠ·Π°ΠΉΠ½-Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Ρ‹ инструмСнты прототипирования ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ Π·Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‚ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π» ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… Π²Π΅Π±-сСрвисов. Π˜ΠΌΠ΅ΡŽΡ‚ΡΡ нСбольшиС отличия, связанныС с Ρ€Π°Π·Π²ΠΈΡ‚ΠΈΠ΅ΠΌ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ΠΎΠ². НапримСр, Adobe XD сам ΠΏΠΎ сСбС сильно отстаёт ΠΎΡ‚ ΠΊΠΎΠ½ΠΊΡƒΡ€Π΅Π½Ρ‚ΠΎΠ², Π° Π² скСтчС (50) ΠΏΠΎΠΊΠ° Π΅Ρ‰Π΅ Π½Π΅Ρ‚ ΡƒΠ΄ΠΎΠ±Π½ΠΎΠ³ΠΎ ΠΌΠ΅Ρ…Π°Π½ΠΈΠ·ΠΌΠ° ΡˆΠ΅Ρ€ΠΈΠ½Π³Π°, Π½ΠΎ Π² ΠΎΠ±Ρ‰ΠΈΡ… ΠΌΠΎΠΌΠ΅Π½Ρ‚Π°Ρ… всС стрСмятся ΠΊ Π΅Π΄ΠΈΠ½ΠΎΠΌΡƒ ΠΎΠΏΡ‹Ρ‚Ρƒ, Π»ΡƒΡ‡ΡˆΠ΅ всСх Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½Π½ΠΎΠΌΡƒ Π² Figma.

ΠŸΠ»ΡŽΡΡ‹
+ All-in-one ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ°β€Šβ€”β€ŠΠΎΠ΄ΠΈΠ½ инструмСнт для всСго Ρ€Π°Π±ΠΎΡ‡Π΅Π³ΠΎ процСсса
+ НС стоит Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… Π΄Π΅Π½Π΅Π³.
ΠœΠΈΠ½ΡƒΡΡ‹
βˆ’ ΠΠ°ΡΠ»Π΅Π΄ΡƒΡŽΡ‚ΡΡ ΠΎΡ‚ инструмСнта. НапримСр, Π‘ΠΊΠ΅Ρ‚Ρ‡ запускаСтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π° ΠΌΠ°ΠΊΠ°Ρ…, Π° Π€ΠΈΠ³ΠΌΠ° Π½Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π±Π΅Π· ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π°.

2-я Π³Ρ€ΡƒΠΏΠΏΠ°β€Šβ€”β€ŠΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Ρ‹ ΠΌΠ΅ΠΆΠ΄Ρƒ экранами, послойная анимация


Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚Ρ‹ Π²Ρ‚ΠΎΡ€ΠΎΠΉ Π³Ρ€ΡƒΠΏΠΏΡ‹ сфокусированы Π½Π° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ. Π‘ ΠΈΡ… ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ€Π΅Π°Π»ΠΈΠ·ΡƒΡŽΡ‚ΡΡ Π±Π΅ΡΡˆΠΎΠ²Π½Ρ‹Π΅ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Ρ‹ ΠΌΠ΅ΠΆΠ΄Ρƒ экранами, имитируСтся ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ элСмСнтов интСрфСйса, собираСтся нСслоТная анимация. ΠœΠ΅Ρ…Π°Π½ΠΈΠ·ΠΌ Ρ€Π°Π±ΠΎΡ‚Ρ‹ ΠΏΡ€ΠΎΡΡ‚β€Šβ€”β€ŠΠ·Π°Π΄Π°ΡŽΡ‚ΡΡ Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ΅ ΠΈ ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎΠ΅ состояниС экрана ΠΈ событиС, ΠΏΡ€ΠΈ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ запускаСтся ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄.


ΠŸΡ€ΠΈΠΌΠ΅Ρ€ экрана настройки Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π² Invison Studio

Π’ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ ΠΏΠΎΠ»ΡƒΡ‡Π°ΡŽΡ‚ΡΡ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΡ‹, Ρ‚ΠΎΡ‡Π½ΠΎ ΠΏΠ΅Ρ€Π΅Π΄Π°ΡŽΡ‰ΠΈΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ интСрфСйса, ΠΎΠ΄Π½Π°ΠΊΠΎ ΠΎΠ½ΠΈ Π½Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с Π΄Π°Π½Π½Ρ‹ΠΌΠΈ, Π·Π°ΠΏΠΎΠΌΠΈΠ½Π°Ρ‚ΡŒ Π²Ρ‹Π±Ρ€Π°Π½Π½Ρ‹Π΅ ΠΎΠΏΡ†ΠΈΠΈ ΠΈ ΠΈΠΌΠΈΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΡ‡Π΅Π΅ слоТноС ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅.
InVision
β€ŠΠšΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ, собранный Π² Invision Studio

Principleβ€Šβ€”β€Š129 $ Π·Π° Π»ΠΈΡ†Π΅Π½Π·ΠΈΡŽ
Один ΠΈΠ· ΠΏΠ΅Ρ€Π²Ρ‹Ρ… ΠΈ самых популярных инструмСнтов для Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ интСрфСйсов. ΠŸΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для Π½Π΅Π±ΠΎΠ»ΡŒΡˆΠΈΡ… сцСнариСв Π² 2–3 экрана ΠΈ Π΄Π΅Ρ‚Π°Π»ΡŒΠ½ΠΎΠΉ настройки слоТных взаимодСйствий. Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠΈΡ‚ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½-Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ с Π±Π°Π·ΠΎΠ²Ρ‹ΠΌΠΈ функциями. НС ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для сборки слоТных Ρ€Π°Π·Π²Π΅Ρ‚Π²Π»Ρ‘Π½Π½Ρ‹Ρ… ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ² ΠΈΠ·-Π·Π° Π½Π΅ΡƒΠ΄Π°Ρ‡Π½ΠΎΠ³ΠΎ способа ΠΎΡ€Π³Π°Π½ΠΈΠ·Π°Ρ†ΠΈΠΈ экранов, нСвозмоТности ΠΏΠ΅Ρ€Π΅ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ элСмСнты ΠΈ слоТного рСдактирования Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ. НСт экспорта Π² ΠΊΠΎΠ΄.

ΠŸΠ»ΡŽΡΡ‹
+ Π₯ΠΎΡ€ΠΎΡˆΠΈΠΉ инструмСнт для нСслоТной Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΈ ΠΊΠΎΡ€ΠΎΡ‚ΠΊΠΈΡ… сцСнариСв
+ Много ΡƒΡ‡Π΅Π±Π½Ρ‹Ρ… ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»ΠΎΠ², Ρ€Π°Π·Π²ΠΈΡ‚ΠΎΠ΅ сообщСство
ΠœΠΈΠ½ΡƒΡΡ‹
βˆ’ Π Π°Π±ΠΎΡ‚Π° с слоТными сцСнариями прСвращаСтся Π² ΠΊΠΎΡˆΠΌΠ°Ρ€
βˆ’ НСт экспорта Π² ΠΊΠΎΠ΄
βˆ’ Π Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π° Mac
βˆ’ НСт ΠΎΠ½Π»Π°ΠΉΠ½-ΡˆΠ΅Ρ€ΠΈΠ½Π³Π°

Invision Studioβ€Šβ€”β€ŠΡ€Π°Π½Π½ΠΈΠΉ доступ
ΠœΠ½ΠΎΠ³ΠΎΠΎΠ±Π΅Ρ‰Π°ΡŽΡ‰ΠΈΠΉ инструмСнт ΠΎΡ‚ Invision находится Π² Ρ€Π°Π½Π½Π΅ΠΌ доступС. ЗаявляСтся ΠΊΠ°ΠΊ Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ Π΄ΠΈΠ·Π°ΠΉΠ½-Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ с большой Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒΡŽ. И Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ, нСсмотря Π½Π° ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ со ΡΡ‚Π°Π±ΠΈΠ»ΡŒΠ½ΠΎΡΡ‚ΡŒΡŽ, инструмСнт прСдоставляСт ΡƒΠ΄ΠΎΠ±Π½ΡƒΡŽ Ρ€Π°Π±ΠΎΡ‚Ρƒ с ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠΌ, ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, ΠΏΠΎΠ»Π½ΡƒΡŽ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΡƒ всСх сСрвисов Invision ΠΈ Π½Π° Π΄Π°Π½Π½ΠΎΠΌ этапС распространяСтся бСсплатно.

ΠŸΠ»ΡŽΡΡ‹
+ Новый инструмСнт ΠΎΡ‚ Invision с ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΌ ΠΏΠΎΡ‚Π΅Π½Ρ†ΠΈΠ°Π»ΠΎΠΌ ΠΈ ΠΌΠΎΡ‰Π½ΠΎΠΉ инфраструктурой.
+ Π’ Π±ΡƒΠ΄ΡƒΡ‰Π΅ΠΌ ΠΌΠΎΠΆΠ΅Ρ‚ ΡΡ‚Π°Ρ‚ΡŒ основным Ρ€Π°Π±ΠΎΡ‡ΠΈΠΌ инструмСнтом для ΠΌΠ½ΠΎΠ³ΠΈΡ….
+ Π•ΡΡ‚ΡŒ вСрсия для Windows
+ Π•ΡΡ‚ΡŒ ΠΎΠ½Π»Π°ΠΉΠ½-ΡˆΠ΅Ρ€ΠΈΠ½Π³
ΠœΠΈΠ½ΡƒΡΡ‹
βˆ’ Бвязаны с Ρ€Π°Π½Π½ΠΈΠΌ доступом. Пока Ρ‡Ρ‚ΠΎ это Π½Π΅ΡΡ‚Π°Π±ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ с ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½Ρ‹ΠΌ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΠΎΠΌ
βˆ’ НСт экспорта Π² ΠΊΠΎΠ΄

Flinto for Macβ€Šβ€”β€Š99 $ Π·Π° Π»ΠΈΡ†Π΅Π½Π·ΠΈΡŽ
Flinto ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Ρ‚ΠΎΡ‚ ΠΆΠ΅ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏ создания ΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ², Ρ‡Ρ‚ΠΎ ΠΈ Invision Studio, Ρ‡Π΅ΠΌ Π²Ρ‹Π³ΠΎΠ΄Π½ΠΎ отличаСтся ΠΎΡ‚ Principle. ΠŸΠΎΠ΄Ρ…ΠΎΠ΄, ΠΏΡ€ΠΈ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ слоТная Π΄Π΅Ρ‚Π°Π»ΡŒΠ½Π°Ρ анимация настраиваСтся Π² ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠΌ ΠΎΡ‚ ΠΎΠ±Ρ‰Π΅Π³ΠΎ экрана интСрфСйсС, позволяСт Π»Π΅Π³ΠΊΠΎ ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ процСссами, Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ ΠΏΠ΅Ρ€Π΅ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ Π² ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ… ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠ°Ρ….

ΠŸΠ»ΡŽΡΡ‹
+ Π£Π΄ΠΎΠ±Π½ΠΎ ΠΎΡ€Π³Π°Π½ΠΈΠ·ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ Ρ€Π°Π±ΠΎΡ‡ΠΈΠΉ процСсс позволят Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ со слоТными сцСнариями ΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ
ΠœΠΈΠ½ΡƒΡΡ‹
βˆ’ НСт ΠΎΠ½Π»Π°ΠΉΠ½-ΡˆΠ΅Ρ€ΠΈΠ½Π³Π°
βˆ’ Π Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π° Mac

Kite Composerβ€Šβ€”β€Š99 $ Π·Π° Π»ΠΈΡ†Π΅Π½Π·ΠΈΡŽ
Kite Composer станСт ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎΠΉ Π·Π°ΠΌΠ΅Π½ΠΎΠΉ пСрСчислСнным инструмСнтам для Ρ‚Π΅Ρ…, ΠΊΡ‚ΠΎ ΠΏΡ€ΠΈΠ²Ρ‹ΠΊ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ интСрфСйсы Π² After Effects. ΠŸΡ€ΠΈΠ½Ρ†ΠΈΠΏ Ρ€Π°Π±ΠΎΡ‚Ρ‹, ΠΏΡ€ΠΈ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ основным инструмСнтом становится Ρ‚Π°ΠΉΠΌΠ»Π°ΠΉΠ½, Π° ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ ΠΈ события Π½Π°Π²Π΅ΡˆΠΈΠ²Π°ΡŽΡ‚ΡΡ Π½Π° ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹, ΠΊΠ°ΠΊ Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Ρ‹, позволяСт ΡΡ„ΠΎΠΊΡƒΡΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π½Π° качСствС Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ. Π’Π°ΠΊΠΆΠ΅ ΠΈΠΌΠ΅ΡŽΡ‚ΡΡ экспорт ΠΊΠΎΠ΄Π° Π² macOS\iOS ΠΈ встроСнный инспСктор.

ΠŸΠ»ΡŽΡΡ‹
+ Π Π°Π±ΠΎΡ‡ΠΈΠΉ процСсс, ΠΏΠΎΡ…ΠΎΠΆΠΈΠΉ Π½Π° АЕ Π½Π° ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΠΊΠ°Ρ…
+ Экспорт Π² ΠΊΠΎΠ΄
ΠœΠΈΠ½ΡƒΡΡ‹
βˆ’ Π― Ρ‚Π°ΠΊ Π² Π½Ρ‘ΠΌ ΠΈ Π½Π΅ разобрался

3-я Π³Ρ€ΡƒΠΏΠΏΠ°β€Šβ€”β€ŠΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΡƒΠ΅ΠΌΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅


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


Настройка повСдСния ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠ° Π² Framer

ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ инструмСнт отличаСтся своим ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΎΠΌ ΠΊ процСссу, ΠΈ своим способом ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡβ€Šβ€”β€ŠΠΎΡ‚ ΡƒΠΏΡ€ΠΎΡ‰Π΅Π½Π½ΠΎΠ³ΠΎ JavaScript Π² Framer Π΄ΠΎ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ Quartz Composer Π² Origami Studio.


ΠŸΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ, собранный Π² Origami Studio. По ссылкС исходный Ρ„Π°ΠΉΠ», ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ Π½Π° Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½Π΅ Π² ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ Origami Live.

Haiku β€” бСсплатная Π±Π΅Ρ‚Π°-вСрсия

Π£ΠΆΠ΅ сСйчас, Π² Π±Π΅Ρ‚Π΅, Haiku ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ ΡˆΠΈΡ€ΠΎΠΊΠΈΠΉ Π½Π°Π±ΠΎΡ€ возмоТностСй для Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΈ интСрактивности. Π’ΠΊΡ€Π°Ρ‚Ρ†Π΅, инструмСнт ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ ΠΊ скСтч- ΠΈΠ»ΠΈ Ρ„ΠΈΠ³ΠΌΠ°-Ρ„Π°ΠΉΠ»Ρƒ ΠΈ позволяСт Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ² Π½Π° ΠΎΠ±Ρ‰Π΅ΠΌ Ρ‚Π°ΠΉΠΌΠ»Π°ΠΉΠ½Π΅. Π‘ΠΎΠ»ΡŒΡˆΠ΅ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, Π½ΠΎ, благодаря Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Ρƒ Actions, Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‰Π΅ΠΌ Π½Π° JavaSript, ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ ΡΠ»ΠΎΠΆΠ½ΡƒΡŽ Π»ΠΎΠ³ΠΈΠΊΡƒ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠ°.

ΠŸΠΎΠ»ΡƒΡ‡Π΅Π½Π½Ρ‹ΠΉ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ эскпортируСтся с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ Lottie.js Π½Π° всС Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Π΅ ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΡ‹ ΠΈ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹.

ΠŸΠ»ΡŽΡΡ‹
+ Π£Π½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ
ΠœΠΈΠ½ΡƒΡΡ‹
βˆ’ НуТно Π·Π½Π°Ρ‚ΡŒ яваскрипт для ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ событий ΠΈ состояний
βˆ’ Π’ Π±Π΅Ρ‚Π°-вСрсии Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Mac


Proto.ioβ€” ΠΎΡ‚ 24 $ Π² мСсяц
Atomic.ioβ€”β€ŠΠ΅ΡΡ‚ΡŒ бСсплатная вСрсия
ΠœΠ½ΠΎΠ³ΠΎΡ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Π΅ Π²Π΅Π±-сСрвисы, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ ΠΏΡ€ΠΎΠΏΠΈΡΡ‹Π²Π°Ρ‚ΡŒ ΡΠ»ΠΎΠΆΠ½ΡƒΡŽ Π»ΠΎΠ³ΠΈΠΊΡƒ прямо Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅. НС ΠΈΠΌΠ΅ΡŽΡ‚ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… Ρ€Π°Π·Π»ΠΈΡ‡ΠΈΠΉ Π² Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»Π΅. ΠŸΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹Π΅ ΠΈ тонкая настройка состояний ΠΈ событий дополняСт ΠΏΡ€ΠΈΠ²Ρ‹Ρ‡Π½ΡƒΡŽ Π»ΠΎΠ³ΠΈΠΊΡƒ инструмСнтов для Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ. К соТалСнию, Π² Ρ‚Π°ΠΊΠΎΠΌ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ ΡΠΎΠ±ΠΈΡ€Π°Ρ‚ΡŒ ΠΈ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ связи слоТнСС, Ρ‡Π΅ΠΌ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΌΠΈ срСдствами. Плюс Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΡΡ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρ‹ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ Π½Π°ΠΊΠ»Π°Π΄Ρ‹Π²Π°Π΅Ρ‚ свои ограничСния Π½Π° процСсс.

ΠŸΠ»ΡŽΡΡ‹
+ НС Π½ΡƒΠΆΠ½ΠΎ Π·Π½Π°Ρ‚ΡŒ языки программирования
ΠœΠΈΠ½ΡƒΡΡ‹
βˆ’ Π’Π΅Π±-вСрсия

Framer β€” ΠΎΡ‚ 12 $ Π² мСсяц
Один ΠΈΠ· самых популярных Π½Π° сСгодня инструмСнтов со своим Π΄ΠΈΠ·Π°ΠΉΠ½-Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ΠΎΠΌ ΠΈ срСдой программирования Π½Π° CoffeeScriptβ€Šβ€”β€ŠΡƒΠΏΡ€ΠΎΡ‰Π΅Π½Π½ΠΎΠΉ вСрсии яваскрипта.

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

ΠŸΠ»ΡŽΡΡ‹
+ Удобная срСда для программирования Π»ΠΎΠ³ΠΈΠΊΠΈ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠ° ΠΈ ΡˆΠ΅Ρ€ΠΈΠ½Π³Π° Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π°
ΠœΠΈΠ½ΡƒΡΡ‹
βˆ’ НуТно Π·Π½Π°Ρ‚ΡŒ CoffeeScript
βˆ’ Π”ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ Ρ‚Ρ€Π°Ρ‚ΠΈΡ‚ ΠΌΠ½ΠΎΠ³ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ Π½Π° ΠΎΡ‚Π»Π°Π΄ΠΊΡƒ ΠΊΠΎΠ΄Π°

Origami Studioβ€” бСсплатно
БСсплатный инструмСнт ΠΎΡ‚ Facebook ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΡƒΡŽ срСду программирования Quartz Composer.

ПослСдниС обновлСния качСствСнно ΡƒΠ»ΡƒΡ‡ΡˆΠΈΠ»ΠΈ ΠΎΠΏΡ‹Ρ‚ ΠΈ интСрфСйс, сдСлав Origami, Π½Π° ΠΌΠΎΠΉ взгляд, самым ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΌ ΠΈ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΌ срСдством проСктирования Π»ΠΎΠ³ΠΈΠΊΠΈ ΠΈ связСй Π² ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠ°Ρ… ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ.

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

ΠŸΠ»ΡŽΡΡ‹
+ БСсплатно
+ НСограничСнный Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»β€Šβ€”β€ŠΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ JSON ΠΈ Π΄Π°Π½Π½Ρ‹Π΅ гироскопа
+ ΠŸΡ€ΠΎΡΡ‚ΠΎΠΉ процСсс для слоТной Π»ΠΎΠ³ΠΈΠΊΠΈ
ΠœΠΈΠ½ΡƒΡΡ‹
βˆ’ ΠŸΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ с ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΠ΅ΠΉ
βˆ’ Мало ΡƒΡ‡Π΅Π±Π½Ρ‹Ρ… ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»ΠΎΠ²

Phase β€” ΠΆΠ΄Ρ‘ΠΌ
ΠœΠ½ΠΎΠ³ΠΎΠΎΠ±Π΅Ρ‰Π°ΡŽΡ‰ΠΈΠΉ инструмСнт, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π²Ρ‹ΠΉΡ‚ΠΈ Π² июнС 2018 Π³ΠΎΠ΄Π°. Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ Π·Π°ΡΠ²Π»ΡΡŽΡ‚ Ρ€Π΅Π²ΠΎΠ»ΡŽΡ†ΠΈΠΎΠ½Π½Ρ‹ΠΉ процСсс, ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΡΡŽΡ‰ΠΈΠΉ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠ΅ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ Ρ‚Π°ΠΉΠΌΠ»Π°ΠΉΠ½. Π—Π²ΡƒΡ‡ΠΈΡ‚ ΠΎΡ‡Π΅Π½ΡŒ Ρ…ΠΎΡ€ΠΎΡˆΠΎ, ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π½ΡƒΠΆΠ½ΠΎ ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ.

habr.com

Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚Ρ‹ быстрого прототипирования / Habr

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

Для Ρ‚ΠΎΠ³ΠΎ Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ†Π΅Π½ΠΈΡ‚ΡŒ инструмСнты ΠΈΠ»ΠΈ Ρ‚Π΅Ρ…Π½ΠΈΠΊΠΈ прототипирования Π½Π°ΠΌ Π² ΠΏΠ΅Ρ€Π²ΡƒΡŽ ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ ΠΊΡ€ΠΈΡ‚Π΅Ρ€ΠΈΠΈ эффСктивного ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠ°. Π›ΡƒΡ‡ΡˆΠΈΠΌΠΈ ΡΠ²Π»ΡΡŽΡ‚ΡΡ Ρ‚Π΅ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΡ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Π»ΠΈΠ²Π°ΡŽΡ‚ΡΡ Π² процСсс Π΄ΠΈΠ·Π°ΠΉΠ½Π°. ΠœΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ ΠΈΠΌΠ΅Ρ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ быстро ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ ΠΎΡ‚ набросков ΠΊ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠΌΡƒ Π²ΠΎΠΏΠ»ΠΎΡ‰Π΅Π½ΠΈΡŽ.

ΠœΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΈΠΊΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠΌΠΎΠ³Π°ΡŽΡ‚ Π΄Π΅Π»Π°Ρ‚ΡŒ ΠΈΡ‚Π΅Ρ€Π°Ρ†ΠΈΠΈ ΠΊΠΎΡ€ΠΎΡ‡Π΅. Π­Ρ‚Π°ΠΏ создания ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠ° Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ ТСстко Π·Π°ΠΊΡ€Π΅ΠΏΠ»Π΅Π½ Π² ΠΊΠΎΠ½Ρ†Π΅ процСсса Π΄ΠΈΠ·Π°ΠΉΠ½Π°. Π’ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ создания ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠ° Π² Π²Π°ΡˆΡƒ Π΅ΠΆΠ΅Π΄Π½Π΅Π²Π½ΡƒΡŽ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΡΠΊΡƒΡŽ Ρ€Π°Π±ΠΎΡ‚Ρƒ способствуСт возникновСнию ΠΈΠ΄Π΅ΠΉ ΠΈ Π±Ρ‹Ρ‚Ρ€ΠΎΠΉ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠ΅ ΠΊΠΎΠ½Ρ†Π΅ΠΏΡ†ΠΈΠΉ.

Как ΠΈ любой Π΄Ρ€ΡƒΠ³ΠΎΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½, ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Ρ‹ΠΉ для Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ, ΠΌΡ‹ создаём Π°Ρ€Ρ‚Π΅Ρ„Π°ΠΊΡ‚, ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Π½Ρ‹ΠΉ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ донСсти идСю Π΄ΠΎ ΠΊΠΎΠ³ΠΎ-Ρ‚ΠΎ Π΅Ρ‰Ρ‘ (заинтСрСсованного Π»ΠΈΡ†Π°, Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°, ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ ΠΈ Ρ‚.Π΄.). ПослС Ρ‚ΠΎΠ³ΠΎ ΠΊΠ°ΠΊ дизайнСрская идСя Π±Ρ‹Π»Π° донСсСна, ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΎΡ‚Π²Π΅Ρ€Π³Π½ΡƒΡ‚. ΠœΡ‹ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΏΠ΅Ρ€Π΅ΠΆΠΈΠ²Π°Ρ‚ΡŒ тяТёлоС чувство, Ρ‡Ρ‚ΠΎ создаём ΡˆΠ΅Π΄Π΅Π²Ρ€, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½, ΠΈ бСзусловно Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ, работая Π½Π° ΡƒΡ€ΠΎΠ²Π½Π΅ ΠΊΠΎΠ΄Π°.

ΠœΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ Π²Ρ‹Π±ΠΈΡ€Π°Ρ‚ΡŒ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ элСмСнты нашСго Π΄ΠΈΠ·Π°ΠΉΠ½Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΈΡ€ΠΎΠ²Π°Π½Ρ‹. Π˜Ρ‰ΠΈΡ‚Π΅ части вашСго Π΄ΠΈΠ·Π°ΠΉΠ½Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ слоТны. Π˜Ρ‰ΠΈΡ‚Π΅ ΠΏΠ°Ρ‚Ρ‚Π΅Ρ€Π½Ρ‹ взаимодСйствия, ΠΊΡ‚ΠΎΡ€Ρ‹Π΅ Π΄Π°Π²Π½ΠΎ извСстны Π² Ρ‚Π΅ΠΎΡ€ΠΈΠΈ user experience. Π˜Ρ‰ΠΈΡ‚Π΅ элСмСнты взаимодСйствия, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ принСсут ΠΏΠΎΠ»ΡŒΠ·Ρƒ Π²Π°ΡˆΠ΅ΠΌΡƒ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Ρƒ. ΠŸΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ продСмонстрируСт эти элСмСнты, Π±ΡƒΠ΄Π΅Ρ‚ Π»ΡƒΡ‡ΡˆΠΈΠΌ использованиСм вашСго Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ ΠΈ энСргии. […]

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

ΠŸΠ΅Ρ€Π²Ρ‹ΠΌ Π΄Π΅Π»ΠΎΠΌ Π΄Π°Π²Π°ΠΉΡ‚Π΅ бросим взгляд Π½Π° ΠΊΠΎΠΌΠ°Π½Π΄Ρƒ. ΠšΡ‚ΠΎ-Π½ΠΈΠ±ΡƒΠ΄ΡŒ ΠΈΠ· сотрудников ΡƒΠΌΠ΅Π΅Ρ‚ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ? ЯвляСтся Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Ρ‡Π»Π΅Π½ΠΎΠΌ нашСй Π³Ρ€ΡƒΠΏΠΏΡ‹, Π·Π°Π½ΠΈΠΌΠ°ΡŽΡ‰Π΅ΠΉΡΡ user experience? Π•ΡΡ‚ΡŒ Π»ΠΈ Ρƒ нас ΠΏΡ€ΠΎΡ‡Π½Ρ‹Π΅ ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΡ с ΠΈΠ½ΠΆΠ΅Π½Π΅Ρ€Π½Ρ‹ΠΌ ΠΎΡ‚Π΄Π΅Π»ΠΎΠΌ, ΠΊΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠΌΠΎΡ‡ΡŒ Π² создании ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ²? Π§Ρ‚ΠΎ насчёт ΡˆΡ‚Π°Ρ‚Π½Ρ‹Ρ… Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ², ΠΊΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΠΎΠΌΠΎΡ‡ΡŒ? ΠžΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ Π½Π°ΡˆΠΈΡ… тСхничСских возмоТностСй ΡƒΠΊΠ°ΠΆΠ΅Ρ‚ Π½Π°ΠΌ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ Π½Π° ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠ° Π²Ρ€ΡƒΡ‡Π½ΡƒΡŽ ΠΈΠ»ΠΈ Π½Π° использованиС основанного Π½Π° рисовании ПО для прототипирования.

Как Π²Π΅Π»ΠΈΠΊΠ° наша ΠΊΠΎΠΌΠ°Π½Π΄Π°? ΠœΡ‹ являСмся ΠΊΠΎΠΌΠ°Π½Π΄ΠΎΠΉ ΠΏΠΎ user experience, состоящСй ΠΈΠ· ΠΎΠ΄Π½ΠΎΠ³ΠΎ Ρ‡Π΅Π»ΠΎΠ²Π΅ΠΊΠ°, Π·Π°Π½ΠΈΠΌΠ°ΡŽΡ‰Π΅Π³ΠΎΡΡ ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ ΠΈ исслСдованиями, ΠΈ рисованиСм скСтчСй ΠΈ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ? Или ΠΌΡ‹ Ρ‡Π»Π΅Π½Ρ‹ нСбольшой, сплочСной ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹, которая ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΡΡƒΡ‰Π΅ΡΡ‚Π²ΠΈΡ‚ΡŒ процСсс создания Π³ΠΎΡ‚ΠΎΠ²ΠΎΠ³ΠΎ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠ° ΠΌΠ΅Π½Π΅Π΅ Ρ‡Π΅ΠΌ Π·Π° ΠΎΠ΄ΠΈΠ½ дСнь? Или ΠΌΡ‹ являСмся Ρ‡Π°ΡΡ‚ΡŒΡŽ большой ΠΎΡ€Π³Π°Π½ΠΈΠ·Π°Ρ†ΠΈΠΈ, ΠΈ сущСствуСт Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΡΡ‚ΡŒ ΠΏΡ€ΠΎΠ±ΠΈΠ²Π°Ρ‚ΡŒΡΡ Π² ΠΌΡƒΡ‚Π½ΠΎΠΉ Π²ΠΎΠ΄Π΅ ΠΊΠΎΡ€ΠΏΠΎΡ€Ρ‚Π°Ρ‚ΠΈΠ²Π½ΠΎΠΉ ΠΏΠΎΠ»ΠΈΡ‚ΠΈΠΊΠΈ ΠΈ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… Ρ‚ΠΎΡ‡Π΅ΠΊ зрСния Π½Π° наш ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ? Π—Π°Ρ‡Π°ΡΡ‚ΡƒΡŽ, Ρ‡Π΅ΠΌ большС ΠΊΠΎΠΌΠ°Π½Π΄Π°, Ρ‚Π΅ΠΌ большС Π΄Π΅Ρ‚Π°Π»Π΅ΠΉ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠ° (описания) потрСбуСтся.

Π“Π΄Π΅ находится люди, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π±ΡƒΠ΄ΡƒΡ‚ ΠΎΡ†Π΅Π½ΠΈΠ²Π°Ρ‚ΡŒ наш ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ? Находятся Π»ΠΈ ΠΎΠ½ΠΈ Π² ΠΎΠ΄Π½ΠΎΠΌ с Π½Π°ΠΌΠΈ офисС, заглядывая Ρ‡Π΅Ρ€Π΅Π· ΠΏΠ»Π΅Ρ‡ΠΎ? Или ΠΎΠ½ΠΈ Π΄Π°Π»Π΅ΠΊΠΎ? Находятся Π»ΠΈ ΠΎΠ½ΠΈ Π² странС с Ρ‚Π΅ΠΌ-ΠΆΠ΅ самым часовым поясом? ΠŸΠΎΠ»ΠΎΠΆΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΎΡ‚Π²Π΅Ρ‚ Π½Π° этот вопрос ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°Π΅Ρ‚ Π²Π΅Ρ€ΠΎΡΡ‚Π½ΠΎΡΡ‚ΡŒ обсуТдСния с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠ°, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ ΠΎΠ½ Π½Π° всС 100% описываСт сСбя сам.

ЯвляСтся Π»ΠΈ ΠΊΠΎΠΌΠ°Π½Π΄Π°, Π·Π°Π½ΠΈΠΌΠ°ΡŽΡ‰Π°ΡΡΡ user experience, Ρ‡Π°ΡΡ‚ΡŒΡŽ ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹ ΠΏΠΎ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅, ΠΈΠ»ΠΈ ΠΏΡ€ΠΈΠ²Π»Π΅Ρ‡Ρ‘Π½Π½ΠΎΠΉ Π³Ρ€ΡƒΠΏΠΏΠΎΠΉ, Π·Π°Π½ΠΈΠΌΠ°ΡŽΡ‰Π΅ΠΉΡΡ консалтингом? Если ΠΌΡ‹ Ρ‡Π°ΡΡ‚ΡŒ ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹, Ρ‚ΠΎ сильно Π»ΠΈ ΠΌΡ‹ ΠΈΠ½Ρ‚Π΅Π³Ρ€ΠΈΡ€ΠΎΠ²Π°Π½Ρ‹ с ΠΈΠ½ΠΆΠ΅Π½Π΅Ρ€Π½ΠΎΠΉ Π³Ρ€ΡƒΠΏΠΏΠΎΠΉ, ΠΈΠ»ΠΈ ΠΌΡ‹ ΡΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½Π½ΠΎ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΉ Π΄Π΅ΠΏΠ°Ρ€Ρ‚Π°ΠΌΠ΅Π½Ρ‚? Π“Ρ€ΡƒΠΏΠΏΠ΅ ΠΏΠΎ user experience, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ»ΠΈ со стороны, Π·Π°Ρ‡Π°ΡΡ‚ΡƒΡŽ приходится ΠΎΡ‚ΡΡ‚Π°ΠΈΠ²Π°Ρ‚ΡŒ свой ΠΊΠΎΠ½Ρ†Π΅ΠΏΡ‚ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ большС.

Какой Ρƒ нас Π±ΡŽΠ΄ΠΆΠ΅Ρ‚ Π½Π° срСдство прототипирования? Как ΠΈ с Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎΠΌ ПО, Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΈΠΉ ΠΎΡ…Π²Π°Ρ‚Ρ‹Π²Π°ΡŽΡ‚ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ ΠΎΡ‚ бСсплатного Π΄ΠΎ Π΄ΠΎΡ€ΠΎΠ³ΠΎΠ³ΠΎ. Π›ΡƒΡ‡ΡˆΠΈΠ΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ ΠΊΠ°ΠΊ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ относятся ΠΊ Π½ΠΈΠΆΠ½Π΅ΠΉ части срСднСго Ρ†Π΅Π½ΠΎΠ²ΠΎΠ³ΠΎ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°. Π‘ΡƒΠΏΠ΅Ρ€-Π΄ΠΎΡ€ΠΎΠ³ΠΈΠ΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ (ΠΊΠ°ΠΊ Π² ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠΈ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ, Ρ‚Π°ΠΊ ΠΈ Π² ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠΈ Ρ†Π΅Π½Ρ‹) ΠΊΠ°ΠΊ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ своСго Π½Π΅ стоят.

Насколько Π³ΠΈΠ±ΠΊΠΈΠΌ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ наш инструмСнт прототипирования? ΠžΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΡƒΠ΅ΠΌΡΡ Π»ΠΈ ΠΌΡ‹ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ лишь Π½Π° ΠΎΠ΄Π½Ρƒ ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΡƒ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π½Π° Π²Π΅Π±? Или ΠΌΡ‹ создаём Π΄ΠΈΠ·Π°ΠΉΠ½ для ΠΌΠ½ΠΎΠ³ΠΈΡ… ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌ, мобильной, Ρ‚Π΅Ρ€ΠΌΠΈΠ½Π°Π»ΠΎΠ², тСлСвидСния, Π±Ρ‹Ρ‚ΠΎΠ²ΠΎΠΉ элСктроники, ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π°? МногиС срСдства прототипирования ΡΠΎΠ·Π΄Π°ΡŽΡ‚ΡΡ лишь для ΠΎΠ΄Π½ΠΎΠ³ΠΎ направлСния (Ρ‡Π°Ρ‰Π΅ всСго для Π²Π΅Π±-сайтов), поэтому ΠΌΡ‹ Π»ΠΈΠ±ΠΎ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ ΠΎΠ΄Π½ΠΎ, Ρ‡Ρ‚ΠΎ Π½Π°ΠΌ нравится, ΠΈΠ»ΠΈ ΠΎΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒΡΡ Π½Π° ΠΌΠ΅Ρ‚ΠΎΠ΄Π°Ρ… создания ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ² с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ программирования.

Π‘ ΡƒΡ‡Ρ‘Ρ‚ΠΎΠΌ ΡƒΠΊΠ°Π·Π°Π½Π½Ρ‹Ρ… ΠΊΡ€ΠΈΡ‚Π΅Ρ€ΠΈΠ΅Π² создан список инструмСнтов прототипирования. […] Π― надСюсь, Ρ‡Ρ‚ΠΎ вмСстС ΠΌΡ‹ смоТСм ΡΡ„ΠΎΡ€ΠΌΡƒΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Ρ‹Π΅ ΠΊΡ€ΠΈΡ‚Π΅Ρ€ΠΈΠΈ Π²Ρ‹Π±ΠΎΡ€Π° ΠΈ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ аспСктов прототипирования. Π­Ρ‚ΠΎΡ‚ список Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠ΅Ρ€Π΅ΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°Ρ‚ΡŒΡΡ Π½Π° основС ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎΠΉ связи с сообщСством.

* Π’Ρ‹ΠΏΡƒΡ‰Π΅Π½, ΠΈΠ»ΠΈ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ Π² Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ послС опубликования поста Π² ΠΌΠ°Ρ€Ρ‚Π΅ 2009

: Π’Π°Π±Π»ΠΈΡ†Π°, содСрТащая список инструмСнтов прототипирования, Π² ΠΎΡ€ΠΈΠ³ΠΈΠ½Π°Π»ΡŒΠ½ΠΎΠΌ постС рСгулярно дополняСтся.

НазваниС инструмСнта ОписаниС ΠŸΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ°/Π¦Π΅Π½Π°/ΠŸΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒ Бсылка
Axure RP Pro Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚, ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ Π½Π° созданиС ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ² Π²Π΅Π±-сайтов. Π“Π΅Π½Π΅Ρ€ΠΈΡ€ΡƒΠ΅Ρ‚ ΠΊΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡŒΠ½Ρ‹ΠΉ HTML ΠΈ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΡŽ Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ Word. ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ комплСксноС взаимодСйствиС. Windows / $ 589 / Axure www.axure.com/p101_5.aspx
Balsamiq Mockups ΠŸΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ‚ ΠΎΡ‡Π΅Π½ΡŒ быстро создават ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ вашСго ПО. Π‘Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ΅ содСрТимоС выглядит ΠΊΠ°ΠΊ скСтчи, Ρ‡Ρ‚ΠΎ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ Π½Π΅ Π²Π²ΠΎΠ΄ΠΈΡ‚ΡŒ Π² Π·Π°Π±Π»ΡƒΠΆΠ΄Π΅Π½ΠΈΠ΅ Ρ‚Π΅Ρ…, ΠΊΡ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠ΄ΡƒΠΌΠ°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° ΡƒΠΆΠ΅ Π³ΠΎΡ‚ΠΎΠ²Π°. Π’Π΅Π± / $ 79 / Balsamig www.balsamiq.com
CogTool* Π‘ΠΎΠ·Π΄Π°Ρ‘Ρ‚ простыС ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса ΠΈ позволяСт ΠΎΡ†Π΅Π½ΠΈΡ‚ΡŒ ΠΈΡ… ΡΡ„Ρ„Π΅ΠΊΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ. ΠŸΡ€Π΅Π΄ΡΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, сколько Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ ΠΎΠΏΡ‹Ρ‚Π½ΠΎΠΌΡƒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ для выполнСния Ρ‚ΠΎΠΉ ΠΈΠ»ΠΈ ΠΈΠ½ΠΎΠΉ Π·Π°Π΄Π°Ρ‡ΠΈ. ΠšΡ€ΠΎΡΡΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ΅Π½Π½Ρ‹ΠΉ / БСсплатный / Bonnie E. John cogtool.hcii.cs.cmu.edu
Coutline* Π’Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ для создания ΠΈ просмотра ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ². Π’ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π² сСбя Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ ΠΏΠΎ ΡƒΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΡŽ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠΌ ΠΈ ΡƒΡ‡Π°ΡΡ‚ΠΈΡŽ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΠΈΡ€ΡƒΡŽΡ‰Π΅ΠΉ Π³Ρ€ΡƒΠΏΠΏΡ‹. Π’Π΅Π± /? / Coutline www.coutline.com www.usability.by/coutline
Dreamweaver Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ Dreamweaver для пСрСтаскивания ΠΈ размСщСния элСмСнтов Π΄ΠΈΠ·Π°ΠΉΠ½Π° с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ drag-and-drop, добавлСния элСмСнтов интСрактивности, ΠΈ ΠΏΠΎΠ³Ρ€ΡƒΠΆΠ°ΠΉΡ‚Π΅ΡΡŒ Π² ΠΊΠΎΠ΄ для Π±ΠΎΠ»Π΅Π΅ комплСксного прототипирования. ΠšΡ€ΠΎΡΡΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ΅Π½Π½Ρ‹ΠΉ / $ 399 / Adobe www.adobe.com/products/dreamweaver
EasyPrototype* ΠžΡ‡Π΅Π½ΡŒ ΠΏΠΎΡ…ΠΎΠΆ Π½Π° популярный Axure, Π»Π΅Π³ΠΊΠΈΠΉ инструмСнт, позволяСт ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ экранныС Ρ„ΠΎΡ€ΠΌΡ‹, ΡΠΊΡΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ HTML-ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΡ‹ ΠΈ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΡŽ. ΠšΡ€ΠΎΡΡΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ΅Π½Π½Ρ‹ΠΉ / $ 69 / ExtremePlanner Software www.extremeplanner.com/easyprototype
Excel* Π’Ρ‹ Π΄ΡƒΠΌΠ°Π΅Ρ‚Π΅, Β«Excel, Ρ‚Ρ‹ с ΡƒΠΌΠ° сошСл»? Авторы этой ΠΊΠ½ΠΈΠ³ΠΈ Ρ‚Π°ΠΊ Π½Π΅ ΡΡ‡ΠΈΡ‚Π°ΡŽΡ‚. ΠšΡ€ΠΎΡΡΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ΅Π½Π½Ρ‹ΠΉ / $ 229 / Microsoft www.effectiveprototyping.com/ep_excel.shtm excelprototyping.weebly.com
Expression Blend Π“Π΅Π½Π΅Ρ€ΠΈΡ€ΡƒΠ΅Ρ‚ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΡ‹ для Silverlight ΠΈ WPF ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ с Π±ΠΎΠ³Π°Ρ‚Ρ‹ΠΌΠΈ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΌΠΈ возмоТностями, быстрая ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρ‹ посрСдством Drag-ΠΈ-Drop. Windows / $ 499 / Microsoft www.microsoft.com/expression/products/Overview.aspx?key=blend#page-top
Expression Blend + SketchFlow* CΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΊΠ°Ρ€Ρ‚ ΠΏΠΎΡ‚ΠΎΠΊΠ° Π·Π°Π΄Π°Ρ‡ ΠΈ ΠΊΠΎΠ½Ρ†Π΅ΠΏΡ†ΠΈΠΉ интСрфСйсов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ выглядят ΠΊΠ°ΠΊ скСтчи. ΠŸΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΡ‹ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Ρ‹Π²Π°Ρ‚ΡŒ Π² ΠΊΠΎΠ½Π΅Ρ‡Π½Ρ‹ΠΉ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Expression Suite. Windows / $ 599 / Microsoft www.microsoft.com/expression/products/Sketchflow_Overview.asp
Expression Design ΠœΠΎΡ‰Π½Ρ‹ΠΉ инструмСнт рисования для создания ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ² HTML, Silverlight ΠΈ WPF ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ с ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½ΠΎΠΉ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒΡŽ. Windows / $ 699 / Microsoft www.microsoft.com/expression/products/Overview.aspx?key=design
Fireworks Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ созданиС слоТных ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ². ΠœΠ½ΠΎΠΆΠ΅ΡΡ‚Π²ΠΎ инструмСнтов Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½Ρ‹ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ инструмСнтам ΠΈΠ· Adobe suite. Π˜ΠΌΠ΅Π΅Ρ‚ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ экспорта Π² PDF ΠΈΠ»ΠΈ HTML. ΠšΡ€ΠΎΡΡΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ΅Π½Π½Ρ‹ΠΉ / $ 299 / Adobe tv.adobe.com/#VI+f1498v1659
FlairBuilder* Π‘ΠΎΠ·Π΄Π°Ρ‘Ρ‚ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ экранныС Ρ„ΠΎΡ€ΠΌΡ‹ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ дСсктопного Air прилоТСния. ΠžΡ‚ΠΏΡ€Π°Π²Π»ΡΠ΅Ρ‚ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ ΠΊΠ»ΠΈΠ΅Π½Ρ‚Ρƒ для просмотра Π² Π²ΠΈΠ΄Π΅ ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ прилоТСния. ΠšΡ€ΠΎΡΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ΅Π½Π½Ρ‹ΠΉ / $ 99 / Cristian Pascu www.flairbuilder.com
Flash Быстро Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΡƒΠ΅Ρ‚ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ ΠΈΠ»ΠΈ простыС ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΡ‹. ΠŸΡ€ΠΈ Π½Π°Π»ΠΈΡ‡ΠΈΠΈΠΈ Π·Π½Π°Π½ΠΈΠΉ ActionScript позволяСт ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ слоТныС ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΡ‹. ΠšΡ€ΠΎΡΡΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ΅Π½Π½Ρ‹ΠΉ / $ 699 / Adobe www.boxesandarrows.com/view/quick-and-easy-flash
Flash Catalyst Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚, Π΅Ρ‰Π΅ находящийся Π² процСссС Ρ€Π°Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ, ΠΏΡ€ΠΈΠ·Π²Π°Π½ ΠΏΠΎΠΌΠΎΡ‡ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π°ΠΌ Π² создании интСрфСйсов для Ρ„Π»ΡΡˆ-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. ΠšΡ€ΠΎΡΡΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ΅Π½Π½Ρ‹ΠΉ /? / Adobe labs.adobe.com/technologies/flashcatalyst
Flex НСсмотря Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π±ΠΎΠ»Π΅Π΅ приспособлСн для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ², WYSIWYG Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ ΠΈ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° ΠΈΠΌΠΏΠΎΡ€Ρ‚Π° скинов ΠΈΠ· Ilustrator Π΄Π°ΡŽΡ‚ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ быстро ΠΏΡ€ΠΎΠΉΡ‚ΠΈ ΠΏΡƒΡ‚ΡŒ ΠΎΡ‚ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° Π΄ΠΎ ΠΎΠΏΡ‹Ρ‚Π½ΠΎΠ³ΠΎ ΠΎΠ±Ρ€Π°Π·Ρ†Π°. Π•ΡΡ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ экспорта Flash ΠΈΠ»ΠΈ Air ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. ΠšΡ€ΠΎΡΡΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ΅Π½Π½Ρ‹ΠΉ / $ 249 / Adobe www.adobe.com/products/flex
ForeUI* Π‘ΠΎΠ·Π΄Π°Ρ‘Ρ‚ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹, опрСдСляСт ΠΈ ΠΌΠΎΠ΄Π΅Π»ΠΈΡ€ΡƒΠ΅Ρ‚ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ прилоТСния Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅. ΠšΡ€ΠΎΡΡΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ΅Π½Π½Ρ‹ΠΉ / $ 79 / EaSynth Solution www.foreui.com
FormBuilder for Drupal Π˜ΠΌΠ΅Π΅Ρ‚ Π²Π΅Π±-интСрфСйс с Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒΡŽ пСрСтаскивания элСмСнтов Π½Π° страницу. Π‘ΠΎΠ·Π΄Π°Ρ‘Ρ‚ Ρ€Π°Π±ΠΎΡ‡Ρ‚Π°ΡŽΡ‰ΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΡ‹, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ трСбования ΠΊ Π²Π²ΠΎΠ΄ΠΈΠΌΡ‹ΠΌ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π°ΠΌ, Π·Π° считанныС ΠΌΠΈΠ½ΡƒΡ‚Ρ‹. Π’Π΅Π± / БСсплатный / Lullabot www.lullabot.com/blog/drupals-form-building-future
GUI Design Studio* Π‘ΠΎΠ·Π΄Π°Ρ‘Ρ‚ интСрфСйсы, Π°Π½Π½ΠΎΡ‚Π°Ρ†ΠΈΠΈ ΠΊ Π½ΠΈΠΌ, строит раскадровки для опрСдСлСния Ρ€Π°Π±ΠΎΡ‡Π΅Π³ΠΎ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠ°. Π˜ΠΌΠ΅Π΅Ρ‚ прСкрасный Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΉ ΡΡ‚ΠΈΠ»ΡŒ, ΠΏΠΎΡ…ΠΎΠΆΠΈΠΉ Π½Π° скСтчи. Windows / $ 499 / Caretta Software www.carettasoftware.com/guidesignstudio
iPlotz* Π’Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, ΡΠΎΠ·Π΄Π°ΡŽΡ‰Π΅Π΅ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ экранныС Ρ„ΠΎΡ€ΠΌΡ‹.Π’Π°ΠΊΠΆΠ΅ Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π² сСбя Π±Π°Π·ΠΎΠ²Ρ‹ΠΉ Π½Π°Π±ΠΎΡ€ для управлСния ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠΌ, Π²Ρ€ΠΎΠ΄Π΅ присваивания Π·Π°Π΄Π°Ρ‡. Доступна вСрсия для дСсктопа (Air). Π’Π΅Π± / $ 99 [1] / iPlotz iplotz.com
iRise ΠšΠΎΠΌΠΏΠ»Π΅ΠΊΡΠ½Ρ‹ΠΉ инструмСнт для модСлирования бизнСс-процСссов ΠΈ проСктирования интСрфСйса прилоТСния. Windows / $ 6995 / iRise www.irise.com
Justinmind Prototyper* Π‘ΠΎΠ·Π΄Π°Ρ‘Ρ‚ экранныС Ρ„ΠΎΡ€ΠΌΡ‹ с Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒΡŽ опрСдСлСния ΠΈΡ… повСдСния Ρ‡Π΅Ρ€Π΅Π· описаниС с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ use case-Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌ. ΠšΡ€ΠΎΡΡΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ΅Π½Π½Ρ‹ΠΉ (Для Mac ΠΏΠΎΠΊΠ° Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π±Π΅Ρ‚Π°-вСрсия) / $ 690 / Justinmind justinmind.com
JustProto* Π’Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ΅ Π½Π° Ρ€Π°Π±ΠΎΡ‚Ρƒ с ΡƒΠ΄Π°Π»Ρ‘Π½Π½ΠΎΠΉ ΠΊΠΎΠΌΠ°Π½Π΄ΠΎΠΉ. Π’Π΅Π± / $ 99 [1] / DeSmar www.justproto.com/en
Keynote ΠŸΠΎΡ…ΠΎΠΆ Π½Π° Powerpoint. ΠŸΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ‚ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°ΠΌ Π±Ρ‹Ρ‚ΡŒ ΠΊΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ, ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ внСшниС ссылки, ΠΏΡ€ΠΎΠΈΠ³Ρ€Ρ‹Π²Π°Ρ‚ΡŒ Quicktime Ρ„ΠΎΡ€ΠΌΠ°Ρ‚, атовматичСски ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ ΠΊ Π½ΠΎΠ²ΠΎΠΌΡƒ слайду. Mac / $ 79 / Apple www.apple.com/iwork/keynote
LiveView ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€ вашСго Ρ€Π°Π±ΠΎΡ‡Π΅Π³ΠΎ стола Π½Π° Π²ΠΈΡ€Ρ‚ΡƒΠ°Π»ΡŒΠ½ΠΎΠΌ iPhone, ΠΈΠ»ΠΈ Π² качСствС прилоТСния Π½Π° Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠΌ iPhone. Mac / БСсплатный / IDEO labs.ideo.com/2009/01/20/liveview-an-iphone-app-for-on-screen-prototyping
Lucid Spec* Π”ΠΈΠ·Π°ΠΉΠ½ экранных Ρ„ΠΎΡ€ΠΌ ΠΈ ΠΌΠΎΠ΄Π΅Π»ΠΈΡ€ΠΎΠ²Π½ΠΈΠ΅ Ρ€Π°Π±ΠΎΡ‡ΠΈΡ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ с использованиСм стандартных элСмСнтов управлСния ΠΈ простого Π² использовании инструмСнта рисования. Windows / $ 499 / Elegance Technologies www.elegancetech.com/LS/LS.aspx
MockApp* Π‘ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° элСмСнтов интСрфСйса iPhone для Keynote. Π•ΡΡ‚ΡŒ Ρ‚Π°ΠΊΠΆΠ΅ нСоттСстированная вСрсия для Powerpoint, производящая Π½Π΅ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½Ρ‹ΠΉ экспорт. ΠšΡ€ΠΎΡΡΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ΅Π½Π½Ρ‹ΠΉ / БСсплатный / Dotan Saguy mockapp.com
MockupScreens* ΠŸΡ€ΠΎΡΡ‚ΠΎΠΉ инструмСнт для создания экранных Ρ„ΠΎΡ€ΠΌ Π±Π΅Π· ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Ρ… возмоТнстСй. Windows / $ 100 / MockupScreens mockupscreens.com
OmniGraffle Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚ для построСния Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌ ΠΈ ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΡΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π² Π²ΠΈΠ΄Π΅ кликабСльного HTML ΠΈΠ»ΠΈ PDF. Mac / $ 200 / OmniGroup urlgreyhot.com/personal/weblog/creating_prototypes_with_omnigraffle
OverSite* Π‘ΠΎΠ·Π΄Π°Ρ‘Ρ‚ структуру прилоТСния, позволяСт ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ интСрфСйсы ΠΈ ΠΌΠΎΠ΄Π΅Π»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ прилоТСния Π² Π²ΠΈΠ΄Π΅ кликабСльного ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠ°. БущСствуСт Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΈΠΌΠΏΠΎΡ€Ρ‚Π° ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰Π΅Π³ΠΎ сайта для использования Π² качСствС ΠΎΡ‚ΠΏΡ€Π°Π²Π½ΠΎΠΉ Ρ‚ΠΎΡ‡ΠΊΠΈ. ΠšΡ€ΠΎΡΡΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ΅Π½Π½Ρ‹ΠΉ / $ 65 / OverSite taubler.com/oversite
Pencil Π”ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ для Firefox, ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡŽΡ‰Π΅Π΅ ΠΈΠ· сСбя Π½Π΅Ρ‡Ρ‚ΠΎ большСС, Ρ‡Π΅ΠΌ просто ΡΠΎΠ·Π΄Π°Ρ‚Π΅Π»ΡŒ экранных Ρ„ΠΎΡ€ΠΌ ΠΈΠ»ΠΈ инструмСнт прототипирования. ΠšΡ€ΠΎΡΡΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ΅Π½Π½Ρ‹ΠΉ / БСсплатный / Duong Thanh An www.evolus.vn/Pencil
pidoco* […] Π’Π΅Π±-инструмСнт для прототипирования, с Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒΡŽ совмСстной Ρ€Π°Π±ΠΎΡ‚Ρ‹ Π² стандартном Ρ€Π΅ΠΆΠΈΠΌΠ΅ ΠΈ Ρ€Π΅ΠΆΠΈΠΌΠ΅ скСтчСй. Π’Π΅Π± / $ 600 [2] / pidoco pidoco.com/en
Polypage* jQuery-ΠΏΠ»Π°Π³ΠΈΠ½, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΠΉ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ/ΡΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ элСмСнты страницы. Π‘ Π΅Π³ΠΎ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΌΠΎΠΆΠ½ΠΎ ΠΌΠΎΠ΄Π΅Π»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ состояния Ρ‡Π΅Ρ€Π΅Π· панСль инструмСнтов. ΠšΡ€ΠΎΡΡΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ΅Π½Π½Ρ‹ΠΉ / БСсплатный / ClearLeft 24ways.org/2008/easier-page-states-for-wireframes
Powerpoint Π‘Π»Π°ΠΉΠ΄Ρ‹ Powerpoint β€” ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ? Π”Π°, это малоизвСстный Ρ„Π°ΠΊΡ‚, Π½ΠΎ Powerpoint ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ горячиС Ρ‚ΠΎΡ‡ΠΊΠΈ, ΠΊΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΎΠ² ΠΌΠ΅ΠΆΠ΄Ρƒ слайдами. Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ с Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΎΠ². ΠšΡ€ΠΎΡΡΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ΅Π½Π½Ρ‹ΠΉ / $ 229 / Microsoft www.boxesandarrows.com/view/interactive
Protonotes НС являСтся инструсмСнтом прототипирования, Π½ΠΎ позволяСт Ρ€Π°Π·Ρ€ΠΎΠ·Π½Π΅Π½Π½ΠΎΠΉ ΠΊΠΎΠΌΠ°Π½Π΄Π΅ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ Ρ‡Π΅Ρ€Π΅Π· ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚. Π’Π΅Π± / БСсплатный / Webanza www.protonotes.com
Protoscript Π‘ΡƒΠΏΠ΅Ρ€-ΡƒΠΏΡ€ΠΎΡ‰Π΅Π½Π½Ρ‹ΠΉ скриптовой язык, Π΄Π°ΡŽΡ‰ΠΈΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π°ΠΌ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ добавлСния элСмСнтов Π΄ΠΈΠ½Π°ΠΌΠΈΠΊΠΈ ΠΊ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΌ HTML-страницам. Π’Π΅Π± / БСсплатный / Bill Scott protoscript.com
Protoshare Π’Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ΅ Π½Π° ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ трСбуСтся Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ совмСстной Ρ€Π°Π±ΠΎΡ‚Ρ‹ с ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΌΠΈ экранными Ρ„ΠΎΡ€ΠΌΠ°ΠΌΠΈ. Π’Π΅Π± / $ 156 [1] / Site 9 www.protoshare.com
Prototype Composer Π”Π°Ρ‘Ρ‚ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ прототипирования для Π²Π΅Π± ΠΈ дСсктоп-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. […] Windows / БСсплатный / Serena www.serena.com/products/prototype-composer/index.html
Screen Architect* Π Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ совмСстно с инструмСнтом UML-модСлирования Enterprise Architect для создания ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ² интСрфСйса Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ RTF ΠΈ HTML. Windows / $ 120 [3] / CATCH www.screenarchitect.com
Tinderbox* ΠšΠΎΠΌΠΏΠ»Π΅ΠΊΡΠ½Ρ‹ΠΉ инструмСнт для записСй, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ использован для экспорта Π² ΠΊΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡŒΠ½Ρ‹ΠΉ HTML. Mac / $ 229 / Eastgate Systems www.eastgate.com/Tinderbox
Visio Professional МногиС Π½Π°Π·Ρ‹Π²Π°ΡŽΡ‚ Visio Β«Π·ΠΎΠ»ΠΎΡ‚Ρ‹ΠΌ стандартом» для инструмСнтов создания экранных Ρ„ΠΎΡ€ΠΌ. ΠœΠΎΠΆΠ΅Ρ‚ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΡ‹. Windows / $ 560 / Microsoft office.microsoft.com/en-us/visio/FX100487861033.aspx
XHTML & CSS ΠžΠ²Π»Π°Π΄Π΅ΠΉΡ‚Π΅ Π½Π°Π²Ρ‹ΠΊΠ°ΠΌΠΈ программирования, ΠΈΠ·Π±Π°Π²ΡŒΡ‚Π΅ΡΡŒ ΠΎΡ‚ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌ для прототипирования ΠΈ создавайтС ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΡ‹ Ρ€ΡƒΠΊΠ°ΠΌΠΈ! ΠšΡ€ΠΎΡΡΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ΅Π½Π½Ρ‹ΠΉ / БСсплатный / W3C? πŸ˜‰ www.boxesandarrows.com/view/prototyping-with

habr.com

8 инструмСнтов для создания UX/UI ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ², Π½Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ стоит ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅

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

Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚Ρ‹ для UX/UI проСктирования

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

Axure RP Pro – это ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ΅ обСспСчСниС для создания ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ², ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ², спСцификаций Π²Π΅Π±-сайтов ΠΈ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° позволяСт Π²ΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ Π²ΠΈΠ΄ΠΆΠ΅Ρ‚Ρ‹ простым пСрСтаскиваниСм ΠΌΡ‹ΡˆΡŒΡŽ, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΈΡ… Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΈ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚. Axure RP Pro являСтся ΠΏΠΎΠ»Π½ΠΎΡ†Π΅Π½Π½Ρ‹ΠΌ UX-инструмСнтом, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΠΌ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ слоТныС ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΡ‹, Π½ΠΎ для Π΅Π΅ освоСния потрСбуСтся врСмя. Если Π²Ρ‹ ΠΏΡ€ΠΎΡ„Π΅ΡΡΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ, с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Axure RP Pro Π²Ρ‹ смоТСтС ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ слоТныС ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΡ‹.

Mockplus – это простой инструмСнт для создания ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ², созданный быстрорастущСй ΠΈΠ½Π½ΠΎΠ²Π°Ρ†ΠΈΠΎΠ½Π½ΠΎΠΉ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠ΅ΠΉ Jongde Software LLC. ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° рассчитана Π½Π° Π°Π²Ρ‚ΠΎΠ½ΠΎΠΌΠ½ΠΎΠ΅ использованиС ΠΈ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Ρƒ ΠΏΠΎ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡŽ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ³ΠΎ обСспСчСния для всСх основных ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌ: ПК, ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ прилоТСния ΠΈ Π²Π΅Π±-прилоТСния. Π­Ρ‚ΠΎ Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΉ Π²Ρ‹Π±ΠΎΡ€ для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ любого уровня ΠΏΠΎΠ΄Π³ΠΎΡ‚ΠΎΠ²ΠΊΠΈ, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° отличаСтся простотой Π² освоСнии ΠΈ ΠΈΠ½Ρ‚ΡƒΠΈΡ‚ΠΈΠ²Π½ΠΎ понятным интСрфСйсом. Если вашСй Ρ†Π΅Π»ΡŒΡŽ являСтся быстроС созданиС ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ² Π² сТатыС сроки, ΠΈ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΡΡ„ΠΎΠΊΡƒΡΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π½Π° Ρ€Π°Π±ΠΎΡ‚Π΅, вмСсто Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ‚Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ врСмя Π½Π° ΠΈΠ·ΡƒΡ‡Π΅Π½ΠΈΠ΅ инструмСнтов проСктирования, Π½Π΅ ΠΏΡ€ΠΎΡ…ΠΎΠ΄ΠΈΡ‚Π΅ ΠΌΠΈΠΌΠΎ Mockplus. ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° ΠΈΠΌΠ΅Π΅Ρ‚ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹ΠΉ Π½Π°Π±ΠΎΡ€ UI-Π²ΠΈΠ΄ΠΆΠ΅Ρ‚ΠΎΠ² ΠΈ ΠΈΠΊΠΎΠ½ΠΎΠΊ – всС, Ρ‡Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ для Ρ€Π°Π±ΠΎΡ‚Ρ‹ с вашими Π²ΠΈΠ΄ΠΆΠ΅Ρ‚Π°ΠΌΠΈ. БущСствуСт Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ просмотра ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠ° ΠΏΡƒΡ‚Π΅ΠΌ экспорта HTML/изобраТСния, Π»ΠΈΠ±ΠΎ Π΅Π³ΠΎ тСстированиСм Π½Π° ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰Π΅ΠΌ устройствС с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ QR-ΠΊΠΎΠ΄Π°.

Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌ ΠΊ ΠΏΡ€ΠΎΡ‡Ρ‚Π΅Π½ΠΈΡŽ: https://primeliber.com/mockplus/mockplus-sozdanie-prototipov-bystree-kachestvennee-i-proshche

Balsamiq Mockups – это экспрСсс-инструмСнт для прототипирования, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ Π²Π°ΠΌ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ быстрСС ΠΈ эффСктивнСС. Π’ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ΅ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½ ΠΌΠ΅Ρ‚ΠΎΠ΄ Ρ€Π°Π±ΠΎΡ‚Ρ‹, максимально ΠΏΡ€ΠΈΠ±Π»ΠΈΠΆΠ΅Π½Π½Ρ‹ΠΉ ΠΊ Ρ€ΠΈΡΠΎΠ²Π°Π½ΠΈΡŽ Π½Π° простой доскС. ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° отличаСтся простым интСрфСйсом ΠΈ ΠΈΠΌΠ΅Π΅Ρ‚ большой Π½Π°Π±ΠΎΡ€ UI-элСмСнтов. Π‘Ρ‚Π°Π½Π΄Π°Ρ€Ρ‚Π½Ρ‹Π΅ Π²ΠΈΠ΄ΠΆΠ΅Ρ‚Ρ‹ ΡƒΠΏΠΎΡ€ΡΠ΄ΠΎΡ‡ΠΈΠ²Π°ΡŽΡ‚ΡΡ Π½Π° экранС простым пСрСтаскиваниСм ΠΌΡ‹ΡˆΡŒΡŽ. БущСствуСт Π΄Π²Π΅ вСрсии ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹: для Π°Π²Ρ‚ΠΎΠ½ΠΎΠΌΠ½ΠΎΠ³ΠΎ использования ΠΈ Π² Π²ΠΈΠ΄Π΅ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΡ для Google Drive, Confluence ΠΈ JIRA.

Justinmind прСдставляСт собой UX-инструмСнт для создания ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ² ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… ΠΈ Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ, Π° Ρ‚Π°ΠΊΠΆΠ΅ высококачСствСнных ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² сайтов. ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° снабТСна стандартными функциями: пСрСтаскиваниС ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ² ΠΌΡ‹ΡˆΡŒΡŽ, ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΈΡ… Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΠΈ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π°, Π° Ρ‚Π°ΠΊΠΆΠ΅ экспорт ΠΈ ΠΈΠΌΠΏΠΎΡ€Ρ‚ Π²ΠΈΠ΄ΠΆΠ΅Ρ‚ΠΎΠ². Π’ Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ имССтся Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ ΠΊ Π²ΠΈΠ΄ΠΆΠ΅Ρ‚Π°ΠΌ примСчания ΠΈ ΡΠ½Π°Π±ΠΆΠ°Ρ‚ΡŒ ΠΈΡ… ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΌΠΈ функциями, Ρ‚Π°ΠΊΠΈΠΌΠΈ ΠΊΠ°ΠΊ ссылки, Π² Ρ‚ΠΎΠΌ числС условныС, анимация, вычислСния, Π½Π°Π±ΠΎΡ€ Π²ΠΊΠ»Π°Π΄ΠΎΠΊ, скрываСмыС элСмСнты, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠ΄Π΅Π»ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π±Π°Π· Π΄Π°Π½Π½Ρ‹Ρ… с Ρ€Π΅Π°Π»ΡŒΠ½Ρ‹ΠΌΠΈ Π΄Π°Π½Π½Ρ‹ΠΌΠΈ. Justinmind ΠΏΠΎΠ΄ΠΎΠΉΠ΄Π΅Ρ‚ для Ρ‚Π΅Ρ…, ΠΊΡ‚ΠΎ ΠΈΡ‰Π΅Ρ‚ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ слоТныС ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΡ‹. Если Π²Ρ‹ Π½Π΅ ΠΏΡ€ΠΎΡ„Π΅ΡΡΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ, Π²Π°ΠΌ Π±ΡƒΠ΄Π΅Ρ‚ слоТно ΠΎΡΠ²ΠΎΠΈΡ‚ΡŒ этот инструмСнт – Π²ΠΎΡ‚ Ρ‚Π°ΠΊΠΎΠΉ нСдостаток.

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

UX Pin – это ΠΎΠ½Π»Π°ΠΉΠ½-инструмСнт для прототипирования, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ позволяСт ΠΏΠΎΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Ρ‚Ρ€Π΅Π±ΡƒΠ΅ΠΌΡƒΡŽ модСль интСрфСйса простым пСрСтаскиваниСм ΠΌΡ‹ΡˆΡŒΡŽ, Π±Π΅Π· нСобходимости ΠΎΠ±Ρ€Π°Ρ‰Π°Ρ‚ΡŒΡΡ ΠΊ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡŽ. Данная ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° прСдставляСт собой экранный Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΠΉ Π²Ρ‹Π±ΠΈΡ€Π°Ρ‚ΡŒ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Π΅ элСмСнты ΠΈ ΡΠΎΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ ΠΈΠ· Π½ΠΈΡ… Ρ‚Ρ€Π΅Π±ΡƒΠ΅ΠΌΡ‹Π΅ сочСтания. Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ UX Pin ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ рСалистичныС ΠΌΠΎΠ΄Π΅Π»ΠΈ ΠΈ ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ слои ΠΈΠ· Ρ‚Π°ΠΊΠΈΡ… ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌ, ΠΊΠ°ΠΊ Sketch ΠΈ Photoshop.

OmniGraffle – это ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½Π½ΠΎΠ΅ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠ΅ΠΉ The Omni Group, для создания Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌ ΠΈ Ρ†ΠΈΡ„Ρ€ΠΎΠ²Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ с Mac, iPhone, iPad ΠΈ iPod touch. ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΠΊΠ°ΠΊ Π°Π²Ρ‚ΠΎΠ½ΠΎΠΌΠ½ΠΎ, Ρ‚Π°ΠΊ ΠΈ ΠΊΠ°ΠΊ Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅; Π² Π΅Π΅ состав Π²Ρ…ΠΎΠ΄ΠΈΡ‚ нСсколько инструмСнтов для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ². OmniGraffle позволяСт ΠΏΠ΅Ρ€Π΅Ρ‚Π°ΡΠΊΠΈΠ²Π°Ρ‚ΡŒ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹ ΠΌΡ‹ΡˆΡŒΡŽ, Π° Ρ‚Π°ΠΊΠΆΠ΅ снабТСна Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠ΅ΠΉ вставки ΠΏΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠΉ ΠΈ создания спСцификаций ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ² ΠΈ ΠΌΠΎΠ΄Π΅Π»Π΅ΠΉ. Π”Π°Π½Π½ΠΎΠ΅ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ являСтся ΠΈΠ΄Π΅Π°Π»ΡŒΠ½Ρ‹ΠΌ инструмСнтом для Ρ€Π°Π±ΠΎΡ‚Ρ‹ Π½Π° iPhone ΠΈ iPad.

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

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

БущСствуСт большоС количСство инструмСнтов для прототипирования, ΠΈ ΠΎΠ΄Π½ΠΎΠ·Π½Π°Ρ‡Π½ΠΎ Π»ΡƒΡ‡ΡˆΠ΅Π³ΠΎ срСди Π½ΠΈΡ… Π½Π΅Ρ‚, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ всС зависит ΠΎΡ‚ Π»ΠΈΡ‡Π½Ρ‹Ρ… ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡Ρ‚Π΅Π½ΠΈΠΉ ΠΈ стиля Ρ€Π°Π±ΠΎΡ‚Ρ‹. Если Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌ простой Π½Π΅Π΄ΠΎΡ€ΠΎΠ³ΠΎΠΉ инструмСнт, Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌ Mockplus, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ ΠΎΠ½ Π½Π΅ Ρ‚Π°ΠΊΠΎΠΉ слоТный, ΠΊΠ°ΠΊ Axure ΠΈ Justinmind, Π° ΠΏΠΎ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»Ρƒ прСвосходит Balsamiq. Π’ случаС, Ссли Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ΡŒ сСбС ΠΎΠΏΠ»Π°Ρ‚ΠΈΡ‚ΡŒ Π΄ΠΎΡ€ΠΎΠ³ΠΎΡΡ‚ΠΎΡΡ‰ΡƒΡŽ Π»ΠΈΡ†Π΅Π½Π·ΠΈΡŽ ΠΈ заинтСрСсованы Π² создании слоТных ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ², Π΅ΡΡ‚ΡŒ смысл ΠΏΠΎΠ΄ΡƒΠΌΠ°Ρ‚ΡŒ ΠΎΠ± Axure.

Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌ ΠΊ ΠΏΡ€ΠΎΡ‡Ρ‚Π΅Π½ΠΈΡŽ:https://primeliber.com/Osmanov%20Emil/chto-nuyono-znat-ui-ux-dizajneram-ob-instrumentah-dlya-sozdaniya-prototipov

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ: https://medium.com/@Mockplus/8-ux-and-ui-wireframe-tools-you-must-try-in-2016-f8fbcccf7f6e#.w17ngo3ie

spark.ru

Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π’Π°Ρˆ адрСс email Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½. ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ поля ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½Ρ‹ *

АвторскоС ΠΏΡ€Π°Π²ΠΎ © 2023 Es picture - ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ
top