<p>Published on <a href="https://blog.prototypr.io/notch-crazy-iphone-x-mad-475f43d6ee26?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> prototypr.io </p>
<h4>What designers think of iPhone X</h4>
<p>The iPhone X was released, but ‘The Notch’ stole the show! That little Notch thing on the top of the iPhone caused a lot of debate. If you missed it, we’ve gathered some of the best reactions and ideas from all over the web to get you up to speed. Check it out:</p>
<h4>1. <a href="https://dribbble.com/shots/3802525-Ugly-iPhoneX">Rahul</a> starts by asking what the duck ‘The Notch’ is:</h4>
<p><a href="https://dribbble.com/shots/3802525-Ugly-iPhoneX"><img alt="" src="https://cdn-images-1.medium.com/max/800/1*mvL8NltbjW6ED6SAClYvdg.png"></a>Ugly iPhoneX</p>
<h4>2. <a href="https://medium.com/u/3671378e623c">Vojta Stavik</a> found a great fix for it:</h4>
<blockquote>
<p>I think I&#8217;ve fixed the notch issue in landscape 🍾 #iphoneX <a href="https://t.co/hGytyO3DRV">https://t.co/hGytyO3DRV</a></p>
<p> — <a href="https://twitter.com/vojtastavik/status/907911237983449088">@vojtastavik</a></p>
</blockquote>
<h4>3. <a href="https://medium.com/u/53204784e8ac">Zev Eisenberg</a> imagines it on the other side:</h4>
<blockquote>
<p>Here&#8217;s what the notch would look like on the other side 🍷 #iphoneX <a href="https://t.co/2iOlZwr4BG">https://t.co/2iOlZwr4BG</a> <a href="https://t.co/UBcewcYj1x">https://t.co/UBcewcYj1x</a></p>
<p> — <a href="https://twitter.com/ZevEisenberg/status/908148886363103232">@ZevEisenberg</a></p>
</blockquote>
<h4>4. Then we saw some useful stuff on Dribbble, here’s some templates:</h4>
<p><a href="https://dribbble.com/shots/3803224-iPhoneX-Mockup"><img alt="" src="https://cdn-images-1.medium.com/max/800/1*F0-NI6PzJh5a-9mREhrjMA.jpeg"></a><a href="https://dribbble.com/shots/3805934-iPhone-X-Mockup-iOS-11-GUI"><img alt="" src="https://cdn-images-1.medium.com/max/800/1*YyL65QMK96tCiVal3zB4cw.png"></a><a href="https://free.lstore.graphics/iphone-x-mockup-changeable-color/"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*FNXdGG15uy3GCRgna36bQQ.jpeg"></a></p>
<p><strong>Left to right:</strong></p>
<ul>
<li><a href="https://dribbble.com/shots/3803224-iPhoneX-Mockup">iPhoneX Mockup</a> by <a href="https://medium.com/u/907afad5bd61">Rajinder S. Gill</a></li>
<li><a href="https://dribbble.com/shots/3805934-iPhone-X-Mockup-iOS-11-GUI">iPhone X Mockup &amp; iOS 11 GUI</a> by <a href="https://medium.com/u/1b9053bb0db8">Jason</a></li>
<li><a href="https://free.lstore.graphics/iphone-x-mockup-changeable-color/">iPhone X Mockup Changeable Color</a></li>
</ul>
<h4>5. Next, <a href="https://medium.com/u/559b0105cd29">MaterialUp</a> gave us a massive list of templates 🔥:</h4>
<p><a href="https://stories.uplabs.com/15-premium-iphone-x-resources-for-designers-in-photoshop-sketch-and-more-de35cb5daf38">15 Premium iPhone X Resources for Designers in Photoshop, Sketch and more</a></p>
<h4>6. Then <a href="http://marvelapp.com">Marvel</a> joined (iPhone X frame coming soon):</h4>
<blockquote>
<p>iPhone X frame coming to <a href="http://twitter.com/marvelapp" title="Twitter profile for @marvelapp">@marvelapp</a> very soon 👀</p>
<p> — <a href="https://twitter.com/olegtsaplin/status/908681907851923456">@olegtsaplin</a></p>
</blockquote>
<h4>7. Then there was the iPhone X Mask for Sketch by <a href="https://medium.com/u/318b7d3d161d">Matt D. Smith</a></h4>
<p>Matt made a custom vector mask from scratch for a notch mask overlay:</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/800/1*BJxXeJtctGu1G7bEqsTJSA.gif"></p>
<h4>8. .. and ‘<a href="https://dribbble.com/shots/3803768-Navbar-Styles-iPhone-x">Navbar Styles iPhone x</a>’ by <a href="https://medium.com/u/4a749d3c1629">Virgil Pana</a></h4>
<p><a href="https://dribbble.com/virgilpana">Virgil</a> experiments with filled vs alpha transparency navbar styles for the notch:</p>
<p><a href="https://dribbble.com/shots/3803768-Navbar-Styles-iPhone-x"><img alt="" src="https://cdn-images-1.medium.com/max/800/1*m5yEuiuYKfeFPkxeZXxOnQ.png"></a></p>
<h4>9. Then More fun! <a href="https://dribbble.com/grisha">Grisha Uglanov</a> called it an ‘<a href="https://dribbble.com/shots/3807679-Earsbar">Earsbar</a>’:</h4>
<p><a href="https://dribbble.com/shots/3807679-Earsbar"><img alt="" src="https://cdn-images-1.medium.com/max/800/1*4jdA1F-omWSdK7VisnzjaA.gif"></a></p>
<p>Let’s end with some articles. These aren’t so much ‘Notch’</p>
<h4>10. <a href="https://medium.com/u/c35962635aaf">Maciej Lipiec</a> suggests <a href="https://medium.com/@macieklipiec/the-iphone-x-notch-is-all-about-branding-aef4f34c365b">the Notch is all about branding</a>”</h4>
<p><a href="https://medium.com/@macieklipiec/the-iphone-x-notch-is-all-about-branding-aef4f34c365b">The iPhone X Notch is All About Branding</a></p>
<p>The article ends with this brilliant illustration:</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/800/1*7rWBiO-hu778Slple3OAfg.jpeg">A drawing by an amazing Polish artist <a href="https://www.facebook.com/paweljonca/photos/a.142400305781054.19458.107863525901399/1547567138597690/?type=3&amp;theater">Paweł Jońca</a></p>
<h4>11. <a href="https://medium.com/u/9633347f05d4">Yazin Akkawi</a> writes a letter to Apple</h4>
<p>This one isn’t so much ‘Notch’ based, but a great short read about the direction Apple are going:</p>
<p><a href="https://blog.prototypr.io/dear-apple-3ced4b2b7da2">Dear Apple,</a></p>
<h3>Designing for the Notch Phone X</h3>
<p>Getting more serious now, here are a few really insightful articles about designing for the Notch:</p>
<p>By <a href="https://medium.com/u/2c97cc6869c8">Designlab</a>:</p>
<p><a href="https://blog.prototypr.io/what-does-the-iphone-xs-ar-engine-mean-for-ux-designers-253b2703d951">What does the iPhone X’s AR engine mean for UX Designers?</a></p>
<p>By <a href="https://medium.com/u/83bba3ea98b4">NIELS</a>:</p>
<p><a href="https://blog.prototypr.io/designing-for-the-iphone-x-4239d5ac736c">Design for iPhone X</a></p>
<p>By <a href="https://medium.com/u/6efdee21b08b">Thiruvenkadam</a>:</p>
<p><a href="https://medium.com/peachstudio/designing-responsive-webpages-for-the-iphone-x-c3fc55732409">Designing responsive webpages for the iPhone X</a></p>
<p>By <a href="https://medium.com/u/9c3ee468492a">Stephen Radford</a>:</p>
<p><a href="http://stephenradford.me/removing-the-white-bars-in-safari-on-iphone-x/">Removing the White Bars in Safari on iPhone X</a></p>
<p>By <a href="https://medium.com/u/f37150b147f8">Zakary Kinnaird</a>:</p>
<p><a href="https://medium.muz.li/iphone-x-user-interface-game-design-new-ux-pattern-15feb14b34f3">iPhone X user interface game design — new UX patterns.</a></p>
<p>Last but not least, here’s Apple’s own article for your reference:</p>
<p><a href="http://developer.apple.com/videos/play/fall2017/801/?ref=prototyprio">Designing for iPhone X &#8211; Fall 2017 &#8211; Videos &#8211; Apple Developer</a></p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*cEcB4HS5DWCHihK6tlymBw.png"></p>
<p>Thanks for reading, that’s all we got time for— hope you had fun reading this 🤡, and be sure to sign up for more:</p>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Ff51076%3Fas_embed%3Dtrue&amp;url=https%3A%2F%2Fupscri.be%2Ff51076%2F&#038;image=https%3A%2F%2Fupscri.be%2Fmedia%2Fform.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="480" frameborder="0"><a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a></iframe><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*cEcB4HS5DWCHihK6tlymBw.png"><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=475f43d6ee26" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://blog.prototypr.io/notch-crazy-iphone-x-mad-475f43d6ee26">‘Notch’ crazy, iPhone X mad 📱🤡</a> was originally published in <a href="https://blog.prototypr.io">prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


‘Notch’ crazy, iPhone X mad

What designers think of iPhone X

Top Stories