Love Letter #030 - Once by 37signals, Ascii team, Smiley Face how it works, portfolio final final

GIFs on GIFs! Scrollbars transformed into navigations. [Love Letter logo](=.mdJ6VC-XUi4QIpFWu6JZ1Qg-vLfEcpdiXsTRT_-jlDQ) [Love Letter](=.2D3BWGmcjwgoOSTKK4IOhKcr3kU_4KUAG5WvDZadky4) [#030](=.XzaRBwtz6V6caZccZU4HZLhbCDLm3d4bCjo7Vw-AeJ4) Below are my favorite websites, UI components, templates, domains & finds featured on [One Page Love](=.dNCTP1VKV_AHiFVNVKi0K8flTSaO4F_q4J77lwIIxnk) since I last wrote. You can also read this edition [online](=.csgiRxcs-5bF2wqiUiYDXLFsJIo3Bx67oJPeKH4vq34). Hope it keeps the inspo topped up! [Rob Hope](=.IJ5sjy1q3u7poMn_0XKQ34ainCFogiTPvf0OGdV2dRQ) Much love, [Rob Hope] [Supported By](=.lMghwPvi125zvaEckCVJkoUY2Pl0oLZOhVuf0LDnX6Q) [Design in Figma, launch in Webflow](=.LxrxNhrY7QNpzgm68QNRWTlNKmsYgY36SYo5rJDmVKc) Big shout-out to website builder [Webflow](=.1Er6DG23dm5scEoFz9ROCMD2ScRsb8AZytEci_oEpvE) for sponsoring this edition of the Love Letter. Convert your static designs in Figma to clean HTML and CSS in Webflow in just a few clicks with the [Figma to Webflow plugin](=.FN_xU2h0Y1Hw5O0Dbzz-oi-ExPpjL7qjoeRXtm744TU). Design with auto layout in Figma, then easily translate your designs to Webflow as responsive flexbox structures — and adjust HTML tags within Figma to get your site live faster. [Install plugin](=.EQK8UMImrcpU1Dh7n6dwsxXFqzRnUSh26m7R9EDe-d8) → [ Design in Figma, launch in Webflow](=.OvUjCrPCex-0DmBueNbI2H_c4rnXVhiLvtegLUlCy3U) [Get Inspired](=.JmcG931wIw1wdlxQhgRJbmZIX1NxRtIbz0COuw9JxZY) [One Page website inspiration.](=.A3ML2TWbQ8wlw758q7ZPc-wXsqJ3I78KIgChFj2JamQ) Get inspired with these unique Single Page websites ([full archive](=.WysiJsAikugTgrEDzoFAxRUfAe0nXaN7OsLzqsF_NEY)) featured on One Page Love over the past week. [Once](=.tmONuTQU5QJ-mSEApclH29rfEXePabgmb0afbAO4DY8) [Once](=.Dc5h2Jm2MPHIXYN0FTglzyx-QpKcvJvkiioVVzthmBQ) [Visit ➝](=.HLFBwEJk4GHdeehBq-ilMEr-8a_PdAaFmtBY3x2fAGw) Storytelling launching soon page for Once, the new line of (once-off payment) software products from 37signals. Wanted to take this moment to discuss why this kind of "seemingly simple" One Pager gets accepted into the gallery over others, often with a lot more features/content. Firstly, I'm trying to showcase a healthy spread of categories and this is a less common, manifesto-style One Pager. But when you dive deeper there is a uncommon typeface ([Family](=.9WMcboApxTu4F1qV7nxTmP9Tv90C6ikwxNsG2XKnfHM) by Klim Type Foundry), a stylish signature, a clever newsletter sign up box animation, fun p.p.s. success message, a huge 4-letter .com domain and a compelling pitch. All contributing to a strong One Page website. [37signals](=.pJaP4VFGxyFend0SEmnf-zCMAHlhcDDl44Abf20HjBQ) [37signals](=.GCR_j7WbW9iaHzwxBd353tuYiPtMsTaa_0Dn3aXRgbY) [Innovative Sleep Technologies](=.4qaevGuuYqCsSMx10yLYP9fHGaqeeIvoAl1U28Q2oMo) [Innovative Sleep Technologies](=.7AXrlvc_DOCSx8eK3PxGdtZaPpKu7Z7NBc2rzD5eGiQ) [Visit ➝](=.GYRs5khsYOupncfVkowUlNqZO1NgD5YGDuK_0jjTdG0) One Pager (built with WordPress) for Innovative Sleep Technologies featuring a great choice of hero background video resembling satin sheets. [DD.NYC](=.7-uoGqCxyRhryJjjj7m3K3XrxwZKquZ4pWtlNBuiuHg) [DD.NYCPro](=.6MIQJPTivzmoGwRvXJof2761hDO996Gkdqmvye8A4bc) [Inside South East](=.xOyC4FUH3da-iHPFcAC_GKlt1sR4-6wlgl__oylmOeU) [Inside South East](=.i_Osy9AHKiZMTmkGYn4b8Lhb69SpwGkJ8gyAQ9NCZEA) [Visit ➝](=.kfKzCnnmg4yGGCtLDLSzgHE0IIXlF1G47jbppoopApk) Wow, what a unique One Pager for Inside South East, a commercial fit-out and refurbishment company. Give the team section a spin and experience the characters via ascii code. Awesome to see more experimental concept One Pagers in different genres. [UnitedUs](=.9PIdjkesg29WPxDaDjB9xBVMddL5vdgFJuckvN-YZ3o) [UnitedUs](=.eYxqlemBBZUrnGagl0lHf-FRWJL3qNt-eQ6lJsI7Xyk) [HyperCinema](=.lqJWczKAIpou0bkggb0JfJ14UnqF-3kFdE-qgUreCmw) [HyperCinema](=.wuzy3bGsXjt-2T5zhv2jdVKVD5R2TDn-mczr4ENpvVc) [Visit ➝](=.GFJCSewjyL-ipvWGVDkuvZKBSR9yQBEYFe_WrcCCE80) Exciting One Pager taking bookings for HyperCinema, a new AI live experience launching soon in Auckland. As you scroll you see snippets of how people are portrayed within the multiverse. [Gladeye](=.0G8dGvfIpYnEXnf9SCvjGi0wzAUfTycUX5Rf6JgQEpQ) [GladeyePro](=.c6GzJtSK3iG1fb80kAkVtyhhkO7miJAu7t8snw_5OS4) [DEEO](=.3hW3P0YJyikoah1M2fn7l2hjogDdCwA_8KiDPvrIQoI) [DEEO](=.wE-19wjFIfVRkVexecOzlwwilNVZkEaghwoB-NWzwaU) [Visit ➝](=.gHqutHK0zmQo7-J7OxGKAPMzZ73aVQkfGm5Kq6DgkZU) One Page portfolio (built with [Framer](=.eWhnfuDb4ySUKTCpziUq_43Jldh67nEG3FdG_Gj0o0E)) for DEEO digital design studio featuring brilliant big team images. And what a wholesome touch ending off the site with a vintage photo (1996) from when they were friends as kids. [DEEO](=.LVGPq7iRIr_Rc5HfBYgmFVVSwZFV1yj8WsnAoPVWBSY) [DEEO](=.vJSstTtAYudl9XfjNlgZlPh1H0mpoljZGoorSqZjpy0) [Monica Sanchez](=.3AYUbDwXdMmY33GUMiVg9XFExyS6mqBTGz1NsrDdTO4) [Monica Sanchez](=.Y7yTVrTwIMA5r0GhvuXg5MymK4JsF-vOsK4oNjFmUgQ) [Yianni Mathioudakis](=.7kQ_2jXrYLAduu4fNBL7qZJ_MlH7TxajCiqa1www2FU) [Yianni Mathioudakis](=.hXntJajLDRuasbhW3zCrNW4GSOJe1G5TVcIhmbihFIA) [Diligent flow](=.rxhfQtFjvaO06A2AGKagqtbHoNQNHt382imDJuGr_RU) [Diligent flow](=.4BF0EuDzMlD_9qeqgPlth-luShOMPp1i1GyfRlWNkHg) [Visit ➝](=.yJro8--yYc_IEnvSgSjsfCwMkR5eEXhtkZhU2KRlYe8) Long-scrolling One Pager (built with [Webflow](=.ck67Wi4Z3ANg8SxGDvTmFI-GV3ViUebxzc2yuf5k2Og)) for Webflow design/dev service Diligent flow. Neat touch including their CEO image, LinkedIn and email within the Enterprize pricing table tier. [Diligent flow](=.jB_vem1SqZnepEkJ81lx0PPmB1rhZT1cW7XYxEO9OIw) [Diligent flowPro](=.ls9UasCsS_ZH9q8LzkumD7OB54ZQvIQdTZbgEKSknWI) [Shape](=.nFtq2sqO7wo23OUWi81O88Mm_2Vo5On6Oo7pPKg43fU) [Shape](=.QuW0_2_X--XED9ghB2jyrjP0AwkBji1_sv36HZjXo2Y) [Visit ➝](=.lMD0gb6DoTFJiwQ6m5nB6oNV3b42z4n4Iv3LXQGurZg) Neat One Pager (built with [Framer](=.5ndH_57eTPn5PkAhomGX7Nh-61dQzpjFm8P70hJCUEc)) for Shape, a startup to help you "talk to your database" via Slack. The Single Page website features a long-scrolling How It Works breakdown, as well as a great choice of graphic in the hero section, demonstrating a common (and exciting!) use-case. [Shape.xyz](=.nnzij8pUjNzD0HgqAz4WwWh0B__AJwjhL39abSP0NQg) [Shape.xyz](=.Xv4vMbmco6hRFOHN3n5fe-pOK2k68hx8i3MKD839GoI) [Portfolio Final Final](=.Vulb-HR5-3BqhG3IKPzm_9jJKRJQooCBPunL7D8WIrU) [Portfolio Final Final](=.3h4Ztj0Hzz1PKLBFCq_ydoWen42VyES4DHovRh8xO6s) [Visit ➝](=.J8MsNtPme01LSzwe5ysJdLHPMON2yby9-SIb0Kf7rZc) Fun Landing Page (built with [Framer](=.mYcWbX2U10ZZ0xwPhzt5KPZFDCV2YFV-sKFc8a4aeEA)) promoting the upcoming 'Portfolio Final Final' book by Fedor Shkliarau to help you get your portfolio out the door. Had a good chuckle at the unclickable "publish portfolio" button in the footer. Fedor is the designer behind the brilliant [Alfread One Pager](=.ttc0pZ0GnfQyOB2OEB8TUvofKAezKhgXPqaK9vhVdxU) recently featured. [Fedor Shkliarau](=.q5z66s4gfTo9QoIcpciSasy6dUg360pLr0MDYMUHbNM) [Fedor Shkliarau](=.FiZcLahmNuZD6aJntAwVL1ZTVwuhIJ_ldxuz6vL9rLA) [DesignShip](=.HxhBJXS09WHxkuGCfjiwQTNlA8hpBN4BVHyk6I6_Upk) [DesignShip](=.cD9us3t-bemhNz5ExiCul9hb2WSiVsgxx9cY1prZPW0) [Visit ➝](=._wh_9E8y4vIxZ7TRj2JAqFcWLDLk1I2nNMtnqbqBYWk) Neat touch adding a UK/USA toggle (instead of £/$) in the pricing table of this One Pager (built with [Webflow](=.W7ygzLt5m8X5-Qwqr8tmM4r0yeeOJCvVevX5TJZ0lB0)) for DesignShip, who offer design as a subscription. [CJ Brown](=.uw3LMxhbRnAb_46657in9t7G6JIXEqQfzmk8VHc8nG4) [CJ Brown](=.rJJUQ39BB2qqfkwhr4NPJM74HPzLvOH00sxQ8vQsgoM) I'm sorry, but I'm not going to pay $12 a month for a non-essential figma plugin in this economy. That's the price of a streaming service. [Quoter](=.BFHJu-Co2J8Q_7oOZ3u-dQHghLFTuykHHcJYaaWMwfk) [@apixelpusher](=.ykw-ShRj5Jv-z2O1ODl2OT7SmzgOOsDum34ZED5GViM) [Noteworthy](=.r5Chb_ZYNbAVnso9N5kYlFDf7YtW_sEdG1fH759fO-Y) [Interesting UI components.](=.SufMGnWCrJHHcuXfrvvZypvwk-r9C6_8k6lvRimI0RA) Some recent page components ([full archive](=.8G6OnK6HMVKSnXQ6y0wh2_JeAnJ8X8EZKK0va_JxGLE)) I thought were really well designed or found interesting. Each is captured in full HD and links to the original page source. Hit me up if you scroll into something fresh. [Off Menu Scrollbar Navigation](=.JJZRzS8N2oEhumm4nsCSyrUFXvMBToF_3S5O7z5pS0U) [Off Menu Scrollbar Navigation](=.8ywN766G4FDfm8IRjmHrmEJRAyVOdx_fLPMFe0VfRW4) [Scroll ➝](=.AGgFVif-MjXZLOHN6IfGmX3Fmz7bD8nmJSbUlOlp2sk) What a unique idea blending the scroll bar with the long-scrolling page sections. As you scroll the scrollbar/nav highlights where you are in the journey. (also love how they labeled the testimonials section, Trust) [Kristina Kovzik](=.2dxddivld7EDG16I8qoUpPj6HwQ3vTT9nRYZPNvFJb4) [Kristina Kovzik How It Works](=.Ns7IYKMeudvIKjWl4xHQeIdYMpOCWPnX2S2_Kky-Ysk) [Smile ➝](=.S_auFcB2GcUL4XDC1IHTWfn3mBYZ6TmtfPhMExDbYk0) Kristina Kovzik's One Page portfolio features a fun smiley face rolling through her how-it-works section as you scroll down. It's a tough life for software builders b/c everything is compared to a Netflix subscription. Imo if a tool makes you marginally more effective at your job, it's worth ~hundreds of dollars per year [Quoter](=.jafeJ6QmGPxH7974NyOaakxF03oubdMq07vxUrn2xPo) [@brian_lovin](=.Hc2y8EmQi8j28QjTeHWesvax2XX5AC11872RhdBq52U) [Validate Faster](=.jE6DWF9odqHRaDEVDJuGtiEnm6hTTMjcbOrrmED4qD8) [Landing Page Templates.](=.lLGRMngQHJsWih_FJAf4V86GHhWZH3rs7IudqMELX38) Long-scrolling Landing Page templates ([full archive](=.rC4Gi93jRE7XxUkgtofbQHf44ZoPVnUdIvo2HkRwhM4)) to kickstart and validate your next idea quicker. [Quicklinks](=.D8K2z2J7Zc5XdnkpsnN5_M60Rt0y-vwNN9RFtaqq6HY) [Quicklinks Webflow Template](=.5e08uve396nWlF6vt44CmWmCzRd_0ZJBmpBkslOFwuM) [Demo](=.I7x9JncTf1SX3Q99xDFEVV_-hDZuCW4WaCdGm9-bApE) [Clone $24](=.9H7RIIXxdOzQ72073r6SADIXXTNq9mURzEYoHAac_5U) 'Quicklinks' is a link-in-bio type One Page template crafted by [The Papestielliz](=.AJG80U_5AD9_G8KfOlGI8a7KCIP8u3Pq6zXaQSFKFLI), except it oozes style. The 1-click-clone for [Webflow](=.NBOqnsnZU5xcyHYuVchlfa-WzM6EaQzgofkQ5lnw-cE) also includes a few more sections like recent products, blog posts, testimonials and an Instagram feed. [JustType](=.Cx_FWn7JpeReFaITT8lXw-JQQnwGL8r1QddFGkJDNDM) [JustType Framer Template](=.lWh0Uw97VfxO6vAuKGqY6XL5Jdfj2vnxBIamNnKZMwU) [Demo](=.ccuabqBDJnfFOTZKPm8FAJqFllcYZzqipgutYMEkTAg) [Clone $39](=.4YQTxPI0FMXVVByfqfWLE-A5teqleSpzImhI5DLw30M) 'JustType' is minimal One Page portfolio template built for the [Framer](=.viGIBtau_ruE9LB3qjoiHs00wqmvmUCTt915sI6MXFQ) platform by Lauren Waller. This stylish, type-focused template comes in 3 color schemes and could even be used as a contemporary online résumé. [Featured Article](=.JjRpTlvFhniGGlwsXXdx4rfECuk0I1NTRnOsV3h65-Y) [Can a home page be a Landing Page?](=.sllY0Nn6Na0PqOaIZJak4Z0qiXPkNEFiJE3sEm0Ixws) Simply put, yes. But let’s dive deeper. Apple’s iPhone 15 promotions send users to the iPhone 15 product page and not the home page. Why? There are 3 prerequisites for Landing Pages to be effective... [ Can a home page be a Landing Page?](=.pJ1KK1tau3Ibx6hAllhUw4fY9R31s4_vEkv11wbd6Bo) [Available to register](=.7XbDIQq0OPfDeOKRTFjIABBgeILlj9XQ6Az25ZOs6ck) [Brandable dot com domains.](=.ZpATrTjQZl1AsK3tLJbxwbTBHgRxbX1BBOl6dbjsopI) Give your side project a better first impression with these memorable dot com domains ([full archive](=.RgHsCZ-GMfZDjLy_xWOUfgAaNCrRbVOrXjM1BBL4T4k)) I handpicked recently. They are all available to register right now. Yup! First come, first serve. • [Jetick.com](=.FZXWe0mN0sUCSq7pZwNI8THJpM0v0NL0c7MXVZ0EmGU) • [Dabap.com](=.9ZNXob8tm_r4JqMS6WbeL3P9eRwOkp76VmGEnyY0Bxw) • [Rarson.com](=.c8uPQgOIwyFvOZOMCKgO21ddaDfG16bX812Ylate6tc) • [Bapico.com](=.33_eDmdFe-mQQBZWxBqo1i4IupH4OjjKzF2fY84lBBg) • [Ericio.com](=.BIjaaxIovrO8PNJEtiXjCSm60otjbNLK84xD0nd_tXE) • [Kudka.com](=.fUXPs-wCeKSKtoUOuGmwlCAzrX3FdG83FAetRmTbpOc) • [Tevako.com](=.2hsYfHbtM6DexUzl6Sjr_Sm1UWZkbAECssRbBl7UYcc) • [Hindea.com](=.a06BCY2W1ucosQJomiwySIkyBHG1M_i3guIlgkKxEAY) [Featured Image](=.eC1h4LZ9X5ShqkcyeE0Lnsout9I81D9ILRU8TqXae9E) [Source](=.YxuoN4mtaneR8QWkrmPpUXmWHE4TTFxlpS0Nmh3bmcY) [Bonus](=.ZUHEMwA7qhfHmeVutUcaJA8Avfjm7p75k_mWiuLGdbo) [My favorite online finds.](=.VHttEUIp75CJIjjH6E7jHphtmqthS-1lxoi8zcBRcvk) A few resources for your next project but also some inspiring links to take a break with. Experienced anything special recently? Holla. [Brutalist MacBook Air Mockups ($49)](=.ZP8d70k8je2zgsqXR9pwp1Kmum8V0ti_gsESF_ZV35I)[- 16 hi-res 6000x4500 environments to use for your next launch.](=.rVlET60-Eu947FCTh4LJo-KWjftIp5Gycwp4oJo7RS0) [100 SVG Shapes](=.OKVQ4Hlqefxaxvd53uSv6SVvI9PQwy3Bi-Pc-K4uF-Q)[- No attribution needed. Decent color customization. Copy to clipboard. Cheers Anup Aglawe!](=.nUCYCd9hrkMWsORnwNPs0SMJ_p6rRRkHuAgQcb5W_9E) [Stop saying “fail”](=.BKkDyieRREuvXXgX_vlHxC333h9rNRE0bWNAyFnsk9M)[- Language shapes our perception of setbacks. Use words other than “failure” to describe situations and to suggest the next step. New essay by Jason Cohen.](=.726HjcOZwEQBBlYWxraz1X9_D1hfynOXssiWFnhIGQ4) [How to create isometric diagrams using SVG](=.UBUrePAbyq2E7Mf3C7QwdsT3tadDcQKcwT4oKZsrhSE)[- In-depth, visual breakdown by Artur Khokhlov.](=._dl4spdKJ9-VJ73MypIR7H9ontWJxWJwQm07OrI9FaU) [Grade Club](=.36kCpPg7m9lylyor7lJPDnR8Dt6Qo-GTV95sdyI2_20)[- Remote color grading subscription service. Interesting to see another design-related subscription service kicking off outside of web design.](=.2E6hyeCjAysx7gwKizN1qm-LT9quwN3pTdLYMZUKXfM) [Landing Page Hot Tip](=.vuiZGxp6crCzz2D01Xjxo510MDNTksDcrTVjixPKv6Y) [Use footer for pre-sale](=.9xDDndQ14M2oWy--aMBtgm7WqlVF-4oc0Gy9olZxDEg) Hot Tip #12 is to use your footer area for pre-sale support. If your visitor has not committed by the end of the scroll, they still have doubts. Insert your FAQs, along with your support details: [Use footer for pre-sale](=.hm9u8yUQYD4HeFsKZtdVZ1PTr1HD6W_lQxROv6J5F9c) [Use footer for pre-sale](=.Up8tQfSBBX0ljxK8gHrrG4IMO-3AepSHvIYdHWW1v2g) [Use footer for pre-sale](=._SdD7LjBPguWqY5wH_DcxqrkuM_ixMUYJdUQsv6sIh4) This area could be the difference between a visitor and a customer. ps. here is a collection of [90+ Landing Pages](=.h-wSDB7nXknzAx2kZNntJwXcQLd1-Tm1GVJPz-ThkhM) I’ve curated featuring helpful FAQs near the bottom. [Your Curator](=.TMwWqsIqG7d2Zk2hIM3cHZ2hJAj2pyRJ0ew5_C7DYus) [Hey! I'm Rob Hope.](=.sR7B4dgm93EnpBKgTs1MUyH591O1N1ewVnDQByi8_Yg) If you are enjoying [One Page Love](=.URWuarfY9NXrRK-d2uopoRy6D2vBPpsd0ezPikdEFG4) and the Love Letter editorial here are a few ways to help support the work I do. [Rob Hope](=.xpqOgqpeMm1S55R2t8_-wlnqzzjDbmE1L5-1GqmBkOE) Spread the love about using: [onepagelove.com/letter](=.hYKOd0frnKPyzNvnyGYoHTIf69WtPjm94tDqAzT7GGU) or forward this Love Letter #030 using: [this link](=.Wxo-R2tAcpetfXZhtxWKGCzOccjWIe_SWcTg7eGwL_E). Grab my [Landing Page Hot Tips Ebook](=.ezyDYJyGgOaU-OSZntABc6TxjMkFQdr9jUP6NnLsres) (here is 40% off) Follow [@robhope](=.B86OB8HCh8gZ8fooHsLxz2mP1Fd--janOt8gghh94uo) or [@onepagelove](=.ZsEFVKss0-WFOLv0AaSZdUOk2DHPgBsDfQuEcHMyBUo) on Twitter Review the [Yo! Podcast](=.f_Al2R33vl_D9eu8awBzfB9Rjlrvh5v5xSlGDZ8khSk) on [Spotify](=.wI2cK6yLw9rerrvY6OvH3utmWwphWIz0-cLyEMY7EH8), [Google Podcasts](=.MKs3Vo59jSWPLbiYSe3h0j_ccWjqptxsIUjP9VrQKlc) or [Apple Podcasts](=.ozv7fPyhqTIzKldhF1OFfIrYRl3AP1wPH3cLScKiTcs) Want to build a One Pager with no-code? [Get started free](=.WCMQEbaQg_m68ns6pklRV6h5jyqaRhLi3QGbypy4i4w) using [Webflow](=.LM7EQM2M7ZS2lOQuIuVkJ4Sg8vJaiVVavv2hquBmv50) <3 [Unsubscribe](=.vRockiSFDcTq38PF_pPqEBqqYZv3M_v5CHsgbJ0sMd8) [Love Letter logo](=.MX_CpBsnNC_6_XAU0Md7I3jbJ9amhhpy4rwlgdUDEr4)