@xamartinhttps://teletype.in/atom/xamartin2026-04-07T09:03:55.980Zxamartin:2TmfKnlIjNh2022-04-15T13:06:25.663Z2022-04-15T14:27:19.048Z

<img src="https://img3.teletype.in/files/28/fb/28fb88f8-d0e0-4190-adbd-b451fdc839a2.gif">

<section style="background-color:hsl(hsl(55, 86%, var(--autocolor-background-lightness, 95%)), 85%, 85%);"> <figure id="1wNl" class="m_custom"> <img src="https://img3.teletype.in/files/28/fb/28fb88f8-d0e0-4190-adbd-b451fdc839a2.gif" width="350" /> </figure> <figure id="4CK5" class="m_custom"> <img src="https://img1.teletype.in/files/49/10/491004ed-a900-47d8-903c-48687a733fac.gif" width="350" /> </figure> </section> xamartin:QuizzLand2022-03-16T10:59:10.350Z2022-04-21T12:29:24.746Z

<img src="https://img1.teletype.in/files/45/1f/451fac73-1a17-4457-9874-7983c23d1df3.png">Блок вопроса стал самостоятельным. Ответы отклеились и выровнялись влево для удобства чтения.

<section style="background-color:hsl(hsl(24, 24%, var(--autocolor-background-lightness, 95%)), 85%, 85%);"> <figure id="xZzE" class="m_column"> <img src="https://img1.teletype.in/files/45/1f/451fac73-1a17-4457-9874-7983c23d1df3.png" width="731" /> </figure> <h2 id="v9IZ">Привет! Меня зовут <a href="https://mafrens.ru/" target="_blank">Мартин Хачатрян</a>, я дизайнер. А это дизайн-идеи для экранов викторины.</h2> </section> <h3 id="FWZq"><br />Экран вопроса и ответов</h3> <p id="FNom">Блок вопроса стал самостоятельным. Ответы отклеились и выровнялись влево для удобства чтения. </p> <p id="NzxM">Подсказки, которые помогают ответить, приклеились к ответам, а смена вопроса своим видом намекает на следующую карточку — такой дизайн помог дать всем подсказкам нужное пространство. </p> <section style="background-color:hsl(hsl(55, 86%, var(--autocolor-background-lightness, 95%)), 85%, 85%);"> <figure id="jEXM" class="m_custom"> <img src="https://img2.teletype.in/files/9b/62/9b629e37-318d-4916-a7b2-a327c92331cb.png" width="350" /> <figcaption>Новый экран вопроса и ответа состоит из блоков: баллы, вопрос, ответы и подсказки<br /><br /></figcaption> </figure> <figure id="0ibN" class="m_custom"> <img src="https://img3.teletype.in/files/2b/e5/2be5144d-d0e8-4189-8924-96cb4f493f5d.gif" width="350" /> <figcaption>Пример анимации для смены вопроса : )<br /><br /></figcaption> </figure> <figure id="SFwo" class="m_custom"> <img src="https://img2.teletype.in/files/d2/a3/d2a3ae02-05d8-451c-a5a2-f8681eff4768.gif" width="350" /> <figcaption>Блок баллов. Теперь цена вопроса висит «на кону»</figcaption> </figure> </section> <h3 id="3Yn9"><br />Анимация ответа</h3> <p id="qQnn">Подсветка... пауза... и..! Все неправильные ответы резко скрываются. Это помогает сэкономить пространство итогового экрана.</p> <section style="background-color:hsl(hsl(55, 86%, var(--autocolor-background-lightness, 95%)), 85%, 85%);"> <figure id="9sZZ" class="m_custom"> <img src="https://img3.teletype.in/files/2f/a2/2fa2ae00-5421-4501-8626-72884ab98c14.gif" width="350" /> <figcaption>Анимация правильного ответа<br /></figcaption> </figure> <figure id="ZqUg" class="m_custom"> <img src="https://img2.teletype.in/files/5e/f1/5ef13f3a-c31a-4dea-bc35-048183021840.gif" width="350.3983739837398" /> <figcaption>Если понадобится, то неправильные ответы раскрываются</figcaption> </figure> </section> <h3 id="78zF"><br />Итоговый экран</h3> <p id="4q99">Дизайн итогового экрана продолжает систему с отдельными блоками: ответ, поделиться, интересный факт, комментарии. </p> <p id="cc4D">Снизу всегда приклеены самые важные кнопки: поделиться и продолжить.</p> <section style="background-color:hsl(hsl(55, 86%, var(--autocolor-background-lightness, 95%)), 85%, 85%);"> <figure id="h3vr" class="m_custom"> <img src="https://img1.teletype.in/files/41/9a/419ac109-75e8-4246-894f-21a0a49ca6be.gif" width="350" /> <figcaption>Блочный дизайн итогового экрана<br /></figcaption> </figure> <figure id="cVMo" class="m_custom"> <img src="https://img2.teletype.in/files/97/67/9767c85a-3069-4657-9c9c-9429de63941d.png" width="350" /> <figcaption>Превью репоста в блоке «Поделиться» сразу показывает, чем именно мы предлагаем поделиться</figcaption> </figure> </section> <h3 id="FdvL"><br />Макет готов уместить контент</h3> <p id="49QE">Такая верстка помогает автоматизировать процесс перевода и не боятся, что текст вылезет за экран.</p> <section style="background-color:hsl(hsl(55, 86%, var(--autocolor-background-lightness, 95%)), 85%, 85%);"> <figure id="7EQQ" class="m_custom"> <img src="https://img1.teletype.in/files/49/10/491004ed-a900-47d8-903c-48687a733fac.gif" width="350" /> <figcaption>Пимер вылезающего вопроса на немецком</figcaption> </figure> </section> <h2 id="67A1"><br />Спасибо! Если что, вот моя <a href="mailto:xamartin@yahoo.com" target="_blank">почта</a> или <a href="https://t.me/xamartin" target="_blank">телеграм</a>:<br />— xamartin@yahoo.com<br />— @xamartin</h2>