The Source is a fortnightly letter from Prototypr for its community of ~600k viewers. Written by Sophie Clifton-Tucker, The Source tackles taboo topics, exposes unseen truths, and gets the scoop on the latest in the tech and design sphere.
Last week, we published a piece on the shapeshifting platforms and rebrands of big names like Facebook, Instagram, Airbnb and Twitter, from full-on UI facelifts to little logo nip ‘n’ tucks.
The secret to building great products is not creating awesome features, it’s to make your users awesome. - Kathy Sierra
When it comes to giving your product a new lick of paint, landing pages are a great place to start. You might remember wrestling with clunky WordPress setups, or Wix templates to build your portfolio or landing pages. They appear easy to use at first, but you end up having to learn an entire system just to add a custom font (comic sans be gone).
As Arnob from Olvy explains in our latest interview, website builders should facilitate creativity and help us tell our story, rather than getting us stuck with constraints.
In this newsletter, we’re equipping you with all the latest design tools to help you build, or refresh your product.
From Design To Code
Framer Sites: Meet Framer Sites, your new best friend when it comes to shipping beautiful sites. Framer allows you to create a website on a freeform canvas; just design and publish. Simplicity at its best. Featuring breakpoints, effects, CMS, styles (and much, much more), Framer allows you to design and publish websites faster than ever before, no code required, giving you back valuable time to spend on other important aspects of your project.
The best tools get out of the way, you forget you're using one - Arnob, Designer at Olvy
Anima + Figma: If you’re not willing to budge from Figma, Anima’s Figma plug-in allows you to turn prototypes into code. Easily create breakpoints and flexbox layouts, and turn static elements into interactive components by embedding videos, GIFs, Lottie animations, and live forms. Another pro to this tool is that it eliminates the need for tedious back-and-forth between designer and developer, thanks to its responsive prototypes, developer-friendly code, and team collaboration features.
Letter
Notion Press
Goodbye WordPress, it was nice knowing you (not). Here’s a couple products that let you build a website from a Notion page:
Super: Build fast, functional websites with Notion. Add custom domains, fonts, and even analytics to your Notion docs! They even have a decent free tier to get you started.
Drotion: Drotion is another fab website tool that allows you to build a landing page with Notion in under ten minutes with their user-friendly no-code drag and drop builder. It includes 60+ pre-built components, starter templates, a custom domain, and is fully mobile responsive (a must in today’s world, where our phones are permanently fused to our hands), and offers unlimited landing pages.
Potion: Similar to the two above, and rhmying with Drotion, Potion is great for Portfolios, landing pages, blogs, help docs, career pages, and much more.
Social
Screenshots Pro: This is a nifty tool to create panoramic app screenshots for the App Store and Google Play, but it’s much more than that… Whilst other app presentation tools provide you with the basics, Screenshots Pro goes ten steps further with features that allow you to localise your product and translate it into 40+ languages without the need for any extra software.
BrandBird: Upgrade your Twitter branding with this image editor that beautifies screenshots. Created by indie designer and developer, Jim Raptis, this tool is made for people to grow audiences.
TweetPics: One of the biggest oversights when it comes to social media is not having your posts consistent with your product’s branding. TweetPics is a simple but effective tool that essentially adds a coloured frame to your images to really make them ‘pop’ on Twitter.
Want More?
From SVGs to colours, here’s a few more of my picks this week:
Penpot: An Open Source design tool! Sometimes the hardest part of the design process is the collaboration aspect; Penpot eradicates this issue by assisting you with creating beautiful user interfaces in collaboration with all team members. This open-source design and prototyping platform lets you design components at lightspeed, with extreme adaptability at its core.
Skribbl: Give your product a fresh new look by switching up your illos: Skribbl is a fantastic (and free!) library of premium, hand-drawn illustrations brought to you by a global community of aspiring creatives. There are dozens of designs across a wide range of topics, from ‘music’ to ‘travel and adventure’, and even ‘space and time’. Nice!
SVGator: Take your visuals to the next level with this easy-to-use animation tool. Free, and no code required! The phrase that’s music to my ears. Animate icons, logos, backgrounds, and other illustrations, and power up your SVG with various path, morph, filter, or color animations.
Color Safe: Beautiful and accessible colour palettes based on Web Content Accessibility Guidelines (WCAG) regarding text and background contrast ratios. Color Safe helps designers select colour combinations that allow users to read their content regardless of different visual capabilities and screen resolutions. (For a more accessible design resources, don’t forget to check out our article on Neurodiversity and Inclusion: Choosing Kinder Design.)
People don’t use a product because of the great design; great design helps them use the product. - Viran Anuradha Dayaratne
Prototypr roundup 🌎
Thanks, I Hate It: Shapeshifting Platforms and Instagram Rebrands: Exploring the latest products to undergo changes, including Instagram’s new typeface and logo refresh, Figma’s Auto Layout refresh, and Google Chrome’s flattened logo.
Accessibility: The Biggest Scam in UX: Throwing around words like "inclusivity" and "universal design" no longer cuts the mustard. Dot explores what accessibility really means, and how designers can implement this way of thinking into their products.
11 Realities on Finding Your First Job: After interviewing a bunch of junior UX designers, Morgane Peng has picked up a thing or two about what makes a successful candidate. Here are 11 lessons, from over 10 years of reflection and interviewing 🙌!
Framer Sites: Building Landing Pages to Tell Stories – Creating a landing page for a waitlist in Framer Sites - using gradients, illustrations, and motion to tell a story.
Online events to look out for 👀
Lean UX Process: Integrating UX into Agile Development: 1 June
At this live event, the Lean Product Innovator & UX Strategist with +12 years of experience, and leader of one of the best UX Design studios in Germany, Bonanza Design, Behrad Mirafshar, touch upon the role of designers in a typical agile process and how UX designers can be effectively incorporated at all stages of Agile development.
Immersive Design Free Product Training: 2 June
Learn about no-code immersive design as Kernel Labs debut their immersive design builder (hybrid 3D & VR). For a limited time, receive free access to the product and training from their team.
Thinkful Webinar || UX/UI Design: Creating A Design System: 6 June
Design isn’t just an afterthought in tech circles anymore, it truly helps drive the direction of the product or service. But how does a design team help guide the rest of the company in the right direction? By incorporating a design system. At this event, learn about what a design system is, notable examples, how to build your own, and Figma tips and best practices.
Typography 3.0: 13 June
If you work in design — you know the power of great typography. It can make your branding stand out, your UX more intuitive and your pitch deck more convincing. Learn about Typography 3.0 from the creative directors of Monotype, one of the most famous type foundries who owns Helvetica and Futura.
Buy me a coffee
