<?xml version="1.0" encoding="utf-8" ?><rss version="2.0" xmlns:tt="http://teletype.in/" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:media="http://search.yahoo.com/mrss/"><channel><title>@tugolukovskiy</title><generator>teletype.in</generator><description><![CDATA[@tugolukovskiy]]></description><link>https://teletype.in/@tugolukovskiy?utm_source=teletype&amp;utm_medium=feed_rss&amp;utm_campaign=tugolukovskiy</link><atom:link rel="self" type="application/rss+xml" href="https://teletype.in/rss/tugolukovskiy?offset=0"></atom:link><atom:link rel="next" type="application/rss+xml" href="https://teletype.in/rss/tugolukovskiy?offset=10"></atom:link><atom:link rel="search" type="application/opensearchdescription+xml" title="Teletype" href="https://teletype.in/opensearch.xml"></atom:link><pubDate>Mon, 25 May 2026 19:06:42 GMT</pubDate><lastBuildDate>Mon, 25 May 2026 19:06:42 GMT</lastBuildDate><item><guid isPermaLink="true">https://teletype.in/@tugolukovskiy/good_mockups</guid><link>https://teletype.in/@tugolukovskiy/good_mockups?utm_source=teletype&amp;utm_medium=feed_rss&amp;utm_campaign=tugolukovskiy</link><comments>https://teletype.in/@tugolukovskiy/good_mockups?utm_source=teletype&amp;utm_medium=feed_rss&amp;utm_campaign=tugolukovskiy#comments</comments><dc:creator>tugolukovskiy</dc:creator><title>Хорошие мокапы</title><pubDate>Mon, 06 Sep 2021 15:50:00 GMT</pubDate><media:content medium="image" url="https://img1.teletype.in/files/cc/81/cc81f78d-0903-45a6-a7d9-d5df64aa9733.jpeg"></media:content><description><![CDATA[<img src="https://img1.teletype.in/files/0d/63/0d639641-1d53-476d-870a-5f4d13e9e92d.jpeg"></img>Одна из интереснейших штук, которую я открыл за всю карьеру дизайнера заключается в том, что порой для хорошего дизайна нужно сделать куда меньше телодвижений, чем для плохого. Самый яркий пример — фотки ноутбуков и другой техники, на которые предполагается натягивать красивые картинки.]]></description><content:encoded><![CDATA[
  <p id="PTpy">Одна из интереснейших штук, которую я открыл за всю карьеру дизайнера заключается в том, что порой для хорошего дизайна нужно сделать куда меньше телодвижений, чем для плохого. Самый яркий пример — фотки ноутбуков и другой техники, на которые предполагается натягивать красивые картинки.</p>
  <p id="qZYB">К примеру возьмем эту фотографию, которую я купил для своего проекта. В ней почти все хорошо: реалистичное расположение рук на тачпаде, а не клавиатуре, хорошая композиция и освещение, красивые руки и стол.</p>
  <figure id="2dHg" class="m_retina">
    <img src="https://img1.teletype.in/files/0d/63/0d639641-1d53-476d-870a-5f4d13e9e92d.jpeg" width="1250" />
  </figure>
  <p id="etrs"><br />Убрав фон, разместив интерфейс и дорисовав немного бликов, я получаю такую картинку:</p>
  <figure id="QanT" class="m_retina">
    <img src="https://img4.teletype.in/files/f8/ed/f8edd489-ebf5-4b69-9f06-54994dda934b.jpeg" width="1250" />
  </figure>
  <p id="MLN8"><br />И вроде бы уже нормально, можно публиковать, но что-то не дает покоя.</p>
  <p id="odyF"></p>
  <h2 id="1kfL" data-align="center">Перед тем как продолжить чтение, предлагаю вам остановиться на минуту и поразглядывать верхнюю картинку в поисках проблем.</h2>
  <p id="mJTE"></p>
  <p id="92qX">На следующий день я понимаю, что на экране нет бликов, которые там точно должны быть, а те, что я добавил, выглядят нереалистично. И тут я начинаю негодовать по поводу того, что ребята, которые сделали фотку, заменили большую часть экрана на белый прямоугольник. Лезу в гугл в поисках фотки ноутбука с выключенным экраном, с которого я смогу стащить нужные мне блики, но там одна фигня. Немного подумав, решаю сфоткать свой ноут, который по приятному стечению обстоятельств точно такой же (но на самом деле прокатит любой).</p>
  <p id="Lyxh">Получилось как-то так (не фонтан, но для моей задачи подходит):</p>
  <figure id="19io" class="m_column">
    <img src="https://img2.teletype.in/files/da/93/da939681-e88c-4b12-bfab-8127065bac9b.jpeg" width="4032" />
    <figcaption>Спасибо прекрасной Кире за её красивые пальчики.</figcaption>
  </figure>
  <p id="cRjs"><br />И спустя 5 минут картинка становится такой:</p>
  <figure id="gWUJ" class="m_retina">
    <img src="https://img1.teletype.in/files/8d/dd/8ddd1fb9-9b64-4d80-ae12-36a1a68aa6b4.jpeg" width="1250" />
  </figure>
  <p id="HXM1"><br />Я осознанно не стал убирать заляпанность и более того, жутко обрадовался, когда увидел, как она смотрится на картинке. Это именно то состояние ноутбука, которое мы видим чаще всего, и если заляпанность мешает рассмотреть качество дизайна вашего сайта, то скорее всего дело не в отпечатках пальцев на экране.</p>
  <p id="95dn">В моём случае блики и заляпанность сделали картинку почти что реальной фотографией (будь у меня больше навыков и усидчивости, я бы довел бы дело до полной идентичности с фото, но решил остановиться на этом этапе).</p>
  <p id="3Iic"></p>
  <h2 id="MjDd"><strong>Но стоит помнить про контекст и баланс</strong></h2>
  <p id="J2dh">В моём случае заляпанность в тему, потому что контекст предполагает, что девушка регулярно пользуется ноутбуком, и прямо сейчас, сидя в аэропорту, ищет вариант трансфера. Блики и отпечатки не мешают считывать текст вокруг фото и не отвлекают внимания, потому что я настроил их прозрачность. Порядок чтения сохраняется, и общая композиция страницы остается такой, какой и должна быть. Реалистичность подкрепляет историю, а не ломает. За эту мысль спасибо <a href="http://radionov.in/" target="_blank">Саше Радионову</a>.</p>
  <p id="rUWY">А в ситуации с лендингами эппл, например, они бросятся в глаза. К тому же, сложно предположить, что для презентации ноутбука возьмут устройство, которое активно использовалось инженерами компании. Но они не забывают про блики на экране (особенно от клавиатуры).</p>
  <h2 id="TkGa"></h2>
  <h2 id="RYvv" data-align="center"><strong>И получается, что для того, чтобы сделать лучше, нужно на каждом этапе сделать меньше</strong></h2>
  <p id="KbOm"></p>
  <p id="31q3">То есть, чувакам, которые делали фото, достаточно было просто сфоткать ноут с выключенным экраном (ну и немного покрутить настройки в фш, что они итак делают), но они еще зачем-то вырезают важную часть с бликами, которые при правильном наложении (которое занимает минуту) делает картинку куда более реалистичной. Но большая часть фотографий выглядит так:</p>
  <figure id="jjLR" class="m_retina">
    <img src="https://img1.teletype.in/files/4e/ed/4eed676d-fa95-41ac-a803-fdb789addc40.png" width="1000" />
  </figure>
  <p id="jKtt">Можно заметить, что только на одной остались блики (и те немного дорисованные), на остальных же они просто жестоко вырезаны.</p>
  <p id="WwEF">Но если бы фотка изначально была правильной, например, такой:</p>
  <figure id="Hso0" class="m_retina">
    <img src="https://img4.teletype.in/files/36/26/36262687-ba2b-4a4f-9960-bd8e1e307831.jpeg" width="750" />
  </figure>
  <p id="2v1z"><br />То понадобилось бы 4 минуты (специально засек), чтобы сделать так:</p>
  <figure id="KcOU" class="m_retina">
    <img src="https://img1.teletype.in/files/c5/fc/c5fcde38-e29b-482c-8958-e66193022a33.jpeg" width="750" />
  </figure>
  <p id="BOiJ"><br />А вот так это выглядит, когда ребята, делающие мокапы, вырезают блики:</p>
  <figure id="sSXj" class="m_retina">
    <img src="https://img4.teletype.in/files/b6/23/b62398f6-7b20-4602-af67-aa3a28ab5759.jpeg" width="750" />
  </figure>
  <p id="RTWA"><br />Можно с уверенностью сказать, что белый экран на фото — это гарантированно лишняя работа по отрисовке бликов или деланию дополнительных фотографий. И самое главное, что сделать хорошо (то есть с бликами и реалистично) — предельно просто. Просто важно, чтобы никто не сделал лишней работы.</p>

]]></content:encoded></item></channel></rss>