We curate topical collections around design to inspire you in the design process.
This constantly-updated list featuring what find on the always-fresh Muzli inventory.
Last update: 10/30/2024
We have a fantastic collection of easy-to-edit HTML email and newsletter templates that work across all clients and are all responsive. The post 30 Free Responsive Email & Newsletter Templates appeared first on Speckyboy Design Magazine.
Email marketing plays a big part in developing the brand. Whether you run an ordinary blog or hold the reins of a multinational estore, it is one of those... The post 5 Psychological Tricks to Use in Email Newsletter appeared first on Onextrapixel.
Have you been meaning to start a newsletter for a while? Below are 5 reasons it’s not too late – read this and craft your first edition today. Your mind can play tricks on you. You don’t want to exercise because it’s not the new year. You avoid calling that person because you don’t want...
Ahh, email marketing. It’s the oldest way to market your product. But has it also become old-fashioned? In this age of social media marketing and chatbots, the debate has heated up on the relevance of email marketing. And yet, marketers continue to use it and swear by its benefits. So, should you include email marketing...
Ahh, email marketing. It’s the oldest way to market your product. But has it also become old-fashioned? In this age of social media marketing and chatbots, the debate has heated up on the relevance of email marketing. And yet, marketers continue to use it and swear by its benefits. So, should you include email marketing...
Scrintal is the most enjoyable way to shape ideas. Try the powerful canvas to go from ideas to insights. View full page on Landing Gallery
View full page on Landing Gallery
We are a creative studio pushing the world forward with strategy, design and storytelling. For people and the planet. View full page on Landing Gallery
A curated range of high-quality, conscious formulated products built for skin & the world it’s in. View full page on Landing Gallery
Email newsletters are still one of the primary ways to successfully engage with customers. In this article, we’ll show you how to make the most of your email newsletter.
Free UI Newsletter - HashiCorp. Check the Attachment. Show some love ❤️ press "L". Want more? Follow me for cool stuff. Day 192/366
Onward offers professional consulting to high-impact partners and operates an R&D lab, using human-centered design to dismantle systems of oppression. View full page on Landing Gallery
Meet the modern standard for public facing documentation. Beautiful out of the box, easy to maintain, and optimized for user engagement. View full page on Landing Gallery
Get inspired, talk things through, navigate situations or get personalized guidance with Kin. Built for privacy, security, and with memory in mind. View full page on Landing Gallery
Feta helps product and engineering teams capture meeting context, automate post meeting tasks, and focus only on high-impact work. View full page on Landing Gallery
Meet the fastest and easiest way to do B2B creator marketing at scale. Find the right creators on all platforms, book & collaborate, pay quickly & safely - all in one place. View full page on Landing Gallery
August Health helps senior living communities provide outstanding care and optimize operations. View full page on Landing Gallery
Take a look at your email inbox right now. Chances are, there’s at least one newsletter from a company you’ve… The post 32 newsletter design ideas to get your subscribers clicking appeared first on 99designs.
By streamlining and simplifying legal workflows, we empower elite law firms and legal professionals to work more efficiently and effectively. Enabling them to focus on higher-value tasks and deliver exceptional results for their clients. View full page on Landing Gallery
Looking for more daily inspiration? Download Muzli extension — your go-to source for discovering design ideas from world’s top creators!Newsletter design often is a controversial topic. There are generally two kinds of people: those who think email is the best form of communication and those who despise it with all their hearts. Which one are you?Love it or hate it, when it comes to marketing, research shows that email and newsletters remain some of the most effective channels. While most social media networks have engagement rates lower than 1%, a study by email marketing leader Mailchimp shows that the current average email open rate is 35.63%. Newsletter design is one of the key aspects in turning these opens into conversions.Illustration by StatistaIf effectiveness is out of equation, the remaining question is — how to design a newsletter that your readers will love?In today’s post, we will cover:Tips on designing effective newsletters that drive reader actions.How to create actionable CTA buttons that users click.Newsletter design inspiration from top designers in the industry.Is newsletter design still worth the effort?Let’s answer the big question first. People have been saying that email is dead for probably a decade now. However, in reality, it’s not going anywhere — statistics say that there are around 4.48 billion email users in the world.Let that number sink in for a second. Half. Of. The. World.It’s important to remember that designing for email marketing doesn’t mean just creating promotional newsletters. It also includes welcome emails, order updates, customer support messages, user surveys, and other communications that a brand conveys through email.While aesthetics and creativity are always at the top of Muzli’s priority lists, the key mission for email designers is to maintain clarity and consistency across all the different types of material. Visual consistency is what contributes to developing your brand’s trust and credibility in the long run. Clarity is what helps you achieve your business goals.Beautiful newsletter unsubscribe illustration by Lada Chizhoca.The secret ingredient good newsletter design is simplicityWe know that our audience reading this post is super creative, but we have to say this… newsletter design might not always be the best place to showcase fancy ideas. Our experience shows that black-on-white simplicity can often be a more effective choice when it comes to email marketing.But no need to be discouraged; there’s also a bright side to it. While email design structure is pretty limited, it can serve as a helpful guideline to create simple yet effective campaigns. You know what they say — limitation breeds creativity.Design-wise emails usually focus on clear hierarchy and a simple one-column design to be easily scrolled through on both desktop and mobile. Newsletter designers should remember that the main focus of a quality email should be conveying your message effectively.Apple has always been a master of simplicity. This applies to their newsletters too.A few tips to keep your newsletters simple and clearDo not overwhelm your users with complicated design elements.Ensure a clear focus on call-to-action buttons and make them stand out.Stick to simple fonts. While elegant handwritten fonts might work well in other mediums, they generally don’t work well in emails, especially for mobile. Here’s what free fonts we recommend.Choose colors carefully for the best readability. HINT: Red on green is not the best idea.Stick to plain backgrounds. Avoid bright colors and patterns.By the way, if you’re looking for perfectly matching colors and aren’t sure what would fit best, the freeMuzli Color Palette Generator is is a great tool to help you discover your vibe.Now let’s dive deeper into the main element of a killer newsletter design: creating an effective call to action that will drive your readers toward your desired goal.Newsletter design is all about the right CTA buttonsWe have to remember that first and foremost, newsletters are marketing and communication tools. It means that the main goal here is to convey a message or drive your users to another page — an external website, landing page, product page, signing up for a service, etc.This is why designing compelling and clear call-to-action buttons is crucial for emails.Illustration by Sean FournierWhat does a good CTA button look like?It stands out visually. Use contrasting colors, button sizes, and fonts.It uses catchy phrases. Think about the one thing users could benefit from the most and state it clearly. For example, “Read our report” or “Use this code to save.”It has enough space to stand out from other content. This one is pretty self-explanatory — don’t bury your main item in a pile of content.PRO TIP: While the temptation might be there, don’t forget that too many call-to-action buttons might have the opposite effect and distract the user from your primary goal. It’s recommended to focus each newsletter on a single goal.While it doesn’t mean that your emails should only have one link, the hierarchy should be clear, and the main message should immediately stand out from the rest of the content.An example of super-clear CTA button design in a newsletter by Absolut.Blocked images might ruin your emailsWhile the most common email service providers such as Google or Yahoo enable the images on newsletters that are not marked as spam by their filters by default, this might not always be the case.If you are running a B2B campaign and a significant part of your email audience is using company email addresses, the images might get blocked, turning your meticulously designed newsletter into a bland mess.Illustration by Yuran ChoiThe good news is that with a few tricks, it’s pretty easy to avoid this inconvenience:Make sure that your main message is written in a text format; avoid incorporating important text into an image.Add ALT texts to your images describing what’s in the picture. If they get blocked, users will still understand the context.Keep the text/image ratio oriented towards text. A general rule of thumb is 60/40.Don’t forget to test different newsletter design ideasModern marketing is all about testing different approaches to find ideas that click with your audience. The same principle applies to email marketing. Most of the newsletter service providers today allow you to run A/B testing campaigns where you can test out different design solutions.Illustration by BorjanaKey design elements you should test in your newsletter:Call-to-action buttons. Try different sizes, different colors, and different CTA messages.Above-the-fold content. Try experimenting with straightforward messages right at the top or try out more subtle messages incorporated into the email.Length of the newsletter. Does your audience prefer short and straightforward emails or do they want to read longer personal stories? There’s only one way to find out.PRO TIP: Don’t forget to send a test email to yourself or your colleagues after finishing your design to see the final result in the real world and real inboxes.The best online tools to create your newsletterStruggling to find ideas to make your newsletter design stand out? The good news is that your email service provider probably already has dozens of professionally designed templates. The bad news? Even though their demos look great, it almost never translates 100% to what you need in the real world.Hubspot’s email builder.This means that you will have to manually adjust the provided templates to fit your goal. That’s why we recommend keeping this in mind when choosing your newsletter provider. A feature-rich and easy-to-use drag-and-drop editor could save you loads of time in the long run. Additionally, saving your custom templates will allow you to easily keep the visual consistency higher.Here are a few platforms that offer flexible newsletter builders:MailchimpMailerliteBeehiivFlodeskMailmodoNewsletter design inspiration ideas from top creatorsFinally, once the basics are in place, we can focus on creating the design itself. To get inspired to start, check out the favorite modern designs that we have picked.1. Pixel newsletter from Google2. Newsletter design my SMALLS3. Minimalistic design by Seed4. Fjalraven product line showcase newsletter5. Introduction mail by Canva6. User onboarding mail by Miro7. Alltrails mental health tips newsletter8. Black Friday newsletter by Kidly9. Father’s day promotion by Italic10. New collection newsletter by Two Blind Brothers11. Cart recovery email by Rael12. Cart recovery email by Explore Cuisine13. Birthday newsletter by Readymag14. Personalized email by Grammarly15. Welcome email by Headspace16. Email voting contest by XumoTV17. Tubi awards newsletter18. User testimonial mail by Surreal19. Personalized mail by Netflix20. Thank you email by Swan Dive21. Unsubscribe mail by Cuisinart22. Diablo IV announcement by BlizzardTop 22 Newsletter Designs Loved by Readers That Boost Conversions was originally published in Muzli - Design Inspiration on Medium, where people are continuing the conversation by highlighting and responding to this story.
Experience a Bookmark Manager like never before. No more juggling 10 tabs, find all your design inspiration in one place. All with Bookmarkify View full page on Landing Gallery
Build beautiful Shopify stores with Framer! View full page on Landing Gallery
Hey dribbblers, These are some icons from the ''How to Design a High-Converting Email Newsletter'' infographic I've created for @Designmodo. You can learn how to make the most of creating a high-converting email newsletter by following this link. Follow me if you like my works and press L to show some love.
Découvrez mon portfolio de Web Designer créative et freelance à Lille. Explorez mes projets créatifs et profitez de mes prestations sur mesure pour faire de vos projets une expérience visuelle unique. View full page on Landing Gallery
Hi There,This is my Creative Email Newsletter. What do you think about this Design? Please share your opinion in the comment box.------------------------------------------------Contact me if you want to hire me :Gmail: tanianasrin07@gmail.comWhatsApp : +801627564725Follow me on : Instagram | Behance | Linkedin | TwitterThank You
Discover Dutchblue's innovative water management solutions for urban areas and sports facilities. We're redefining sustainability and climate resilience. View full page on Landing Gallery
View full page on nocode.gallery
Web design and web development for brands that don't want boring. Check out what your website could look like here 🚀 View full page on Landing Gallery
Behind every successful mailing list, is a great newsletter signup form. Having an engaged mailing list that will interact with your email campaigns is a must for a successful business that wants to develop an effective customer lifecycle marketing strategy. However, to enjoy the benefits of your mailing list, you need to make sure that...
In partnership with our comrades-in-arts, Booooooom and 20×200, we’re giving you a chance to win a $300 credit in The Colossal Shop, $300 to spend on art at 20×200.com, and two years of membership plus some sweet swag from Booooooom. You can sign up for the giveaway right here. It’s totally free to participate, and by entering to win you’ll be signed up for Colossal’s Daily newsletter, as well as news from 20×200 and Booooooom’s Secret Email Club. More
“When the Hoops Hits the Fan” (Est. 2019) "Fanhood is a members-only newsletter dedicated to basketball enthusiasts. Each week, we cover the untouched stories, and innermost machinations of your favorite game and its players through a beautifully designed email." Design by Hoodzpah (Orange County, CA) Related links Hoodzpah project page Relevant quoteThe Fanhood logo features custom sans serif lettering that feels retro but clean. The icon is a waving banner monogram, a nod to the fact that sports is more than just a game, it’s something that gathers many people together under one banner.We gave the Fanhood team a design toolkit to pick up the torch and carry on the race without us. We set the Newsletter layouts with typography, spacing, and sizing all called out. We also gave them examples of how the typography and layout could work on social media graphics. Easy guidelines that make creating content a cinch. Images (opinion after) Primary logo. Logo variations. Underlying grid. Color palette. Typography. Newsletter layout. Visual language. Instagram posts. Opinion While the monogram is meant to be a waving banner, my initial reaction was that it was meant to reflect the black ridges of a basketball which, to me, triggers more associations to the sport than the core idea of the waving banner, which could apply to any sport — and maybe that’s the idea, that down the road Fanhood could cover any other sport besides basketball. Visually, I really like the monogram and the texture it generates as all the thick lines come together. The wordmark is nice too, with the short ascenders, tall x-height, and very round-y structure. The color palette is quite nice too, stepping away from the vibrant color trend and going with a more vintage aesthetic that is well complemented by the typography’s similar vibe. The bonus script font is a nice touch that plays out really well in application as a kind of archival accent. Overall, as a basketball fan and a design fan, this is an instant sign-up, so mission accomplished.
Hi There,This is my Creative Email Newsletter. What do you think about this Design? Please share your opinion in the comment box.------------------------------------------------Contact me if you want to hire me :Gmail: tanianasrin07@gmail.comWhatsApp : +801627564725Follow me on : Instagram | Behance | Linkedin | TwitterThank You
Weekly Designers Update #455Web design inspiration, weekly recapRead now.Top 22 Newsletter Designs Loved by Readers That Boost ConversionsNewsletter design often is a controversial topic. There are generally two kinds of people: those who think email is the best form of communication and those who despise it with all their hearts. Which one are you?Read now.Weekly RoundupThe most engaged with content on MuzliRead now.Design Studios Need Project ManagersUnlock the full potential of your design team with project managers who streamline processes, manage client expectations, and keep projects on track. Learn why they are essential for balancing creativity and efficiency.Read now.Designing for the public sectorExplore how design thinking can revolutionize public sector projects by addressing complex social issues and enhancing community well-being. Discover the principles and challenges of creating human-centered solutions that drive positive social change.Read now.Designers’ Secret SourceLooking for more daily inspiration? Download Muzli extension your go-to source for design inspiration!Get Muzli extension for freeMuzli Publication — Weekly Digest was originally published in Muzli - Design Inspiration on Medium, where people are continuing the conversation by highlighting and responding to this story.
View full page on nocode.gallery
![[Email] Litmus April 2017 Newsletter](https://cdn.dribbble.com/users/63344/screenshots/3488030/dribbble-apr-newsletter.jpg)
See the Code - See it Full Page - See Details Simple animation if the email is valid Dribbble Shot This Pen uses: HTML, SCSS, JavaScript, and
This week's CodePen community highlights include six stellar CSS snippets from the web dot dev team, a stylish set of skeuomorphic toggle switches from Nicolas Jesenberger, and a set of gorgeous glass tile icons from Jon Kantner. Plus, Hyperplexed treats us to a sonic experience on the canvas with a polyrhythmic spiral. Drag & drop authentication for your app Add passwordless authentication and user management to your website with a few lines of code. Build secure, frictionless, and delightful login experiences using a drag-and-drop workflow editor. Get started with our "Free Forever" tier today - no credit card required. Get 50% off Slack Pro Take your business to the next level. Slack helps you stay organized, save time & get more done. Skeuomorphic Toggle Switch (vol. 2) Nicolas Jesenberger creates a stylish pair of sliding toggle switches with SVG & CSS, based on a Dribbble shot by kolpikov. 7500 Followers Perspective Art Hover over the hanging rods in this CSS scene and watch them move together to form the number 7500. Zed Dash celebrates an impressive milestone with this spectacular work of CSS art & animation. Polyrhythmic Spiral Hyperplexed creates a lovely sonic spiral inspired by project_jdm on YouTube with "plain old js on the canvas". Check out the Pen's description for an ELIF-style explanation of polyrhythms courtesy of ChatGPT. #CodePenChallenge: Blockquote Shane Burns, Sicontis, Josetxu, and Christine Hack. Want to join the May challenge? Week three's prompt just dropped! SVG Pill CeramicSoda shares a "rotating fake 3D toon pill made with pure SVG with SMIL animation". Drop into the comments section on the Pen for a detailed discussion of how it was made. drip. Droplets drip off the descenders in this clever SVG & CSS text animation from Jeff McCarthy. Generative Inspiration Dino Quarin gathers a magnificent collection of inspiring generative artworks, including work from CodePen community luminaries Ana Tudor, Stranger in the Q, and prisoner849. Icons With Glass and Color Tiles Jon Kantner flexes some serious CSS glass-frosting skills in this UI concept, inspired by a Dribbble shot by AyhanALTINOK. Hover over the glass on each icon for a perspective shift. 6 CSS snippets every front-end developer should know in 2023 Learn how to: use container queries & scroll snap, make a "grid pile", make a quick circle, control variants with @layer, and "memorize less and reach more with logical properties" in this super-handy roundup full of Pen demos from web dot dev's Adam Argyle. sting Mustafa Enes emulates the sinister sting of a scorpion in this striking CSS animation. Worms Little worm-like creatures drift and combine when you interact with the page in this SVG & JavaScript experience with microscope vibes from Fabio Ottaviani. Swirling hamburger menu toggle Hamburger menu lines break down into particles, swirl around, then reform as an X in this fun animated UI element from Josh Dillon.
This week's CodePen community highlights include a developer humor alignment chart, D&D style, from Josh Collinsworth, a dreamy watercolor-inspired gradient from Christina Deemer, and a throwback 90s design with present-day tech from mirandalwashburn. Plus, Alvaro Montoro reveals a surprise inside his single-div stapler. And, on the latest CodePen Radio, Chris and Stephen get into the details of the new bulk actions for hosted assets. 90s Portfolio-Style Website A 90s-style design (complete with animated "mood" gif) benefits from some 20s technology in this responsive grid demo from mirandalwashburn. Oh no! The CSS stapler was cake! Did you see the single-div interactive stapler Pen that Alvaro Montoro shared last week? Well, there's a little surprise inside: the stapler is cake! Spider A pair of spider-like creatures climb, stretch, and scurry around the screen in pursuit of your cursor in this creepy-crawly Pen from Stranger in the Q. If you're brave enough for more spiders on your cursor, you'll like Supah's Parametric Spider, too! Making a Morphing 3D Sphere in Javascript with Three.js Johnny Simpson takes you step-by-step through the process of creating a colorful, morphing 3D sphere with Three.js in this beginner-friendly tutorial loaded with example Pens and code snippets. CodePen Radio #382: Bulk Actions for Assets CodePen will host your assets, like images, data models, libraries, whatever. It’s quite useful! But while we've had bulk upload for awhile, we didn’t offer any other “bulk” actions, until now. Stephen and Chris are on the show to talk about how we added more bulk actions for assets, making them all the easier to manage. CSS-only Watercolor Stripe Christina Deemer crafts a lovely gradient with the soft transparency of watercolor "inspired by a fabric I'm using in my next quilt". Manuel Matuzovic's "Til" Manuel's "Today I Learned" page on his personal website features little chunks of front-end development knowledge accompanied by a Pen. Remote Control (cpc) Amit Sheen solves the Remote Control challenge from Cassidy Williams' newsletter with this clever animated keyboard. Check out more Pens from the final August prompt in our #CodePenChallenge: Remote Control collection. FYI: the August #CodePenChallenge has a bonus week, so there's still time to participate! I'm running towards nothing Tom Hinton continues a series of mind-bending, kaleidoscopic shaders with this trippy spiral within a spiral. Check out Tom's profile for more, and see if you can spot the theme in the Pen's titles. Baby Yoda (Interactive) Grant Jenkins builds an interactive scene for Grogu in this Processing-powered Pen, inspired by a Dribbble shot by Emily Roberts. Watch what happens when you "use the force!" Only CSS: Noisy Cube The cube itself is cool, but Yusuke Nakaya's Pen is on another level when you see how the CSS-powered camera action works to let you zoom around the scene and reposition the cube. Check out version 2 for an even "noisier" cube. The Missing API for CSV Import We’ve built a platform to construct powerful data flows from disparate files. Imagine a world where your CSV importer says yes, instead of ERROR. Dev Humor Alignment Chart "Categorizing dev humor as my own meta dev humor, I guess." Josh Collinsworth categorizes the "classic" developer jokes by their D&D alignment in this tidy CSS grid table. Hundreds of unique rules for JS code Find vulnerabilities, security hotspots, bugs & more. Now with rules to help you write secure AWS Lambdas & avoid common CDK pitfalls.
This week, the CodePen community got into the mood to "paint" landscapes! We have a gorgeous sunrise over a field from CSS artist Ben Evans, a css-doodle mountain range from yuanchuan, and a gorgeous "perpetual painting" of clouds from Sophia Wood. Plus, Temani Afif makes some waves with radial gradients, and Bence Szabo crafts a scene of freezing and melting in a tiny SVG. A Moment of Pure CSS Ben Evans does it again! This gorgeous pastoral scene is illustrated and animated in CSS. Take a few moments to watch the sun rise, then check out the timelapse video of how it was made on YouTube. CodePen Radio #384: The 300 Sparks Milestone This very newsletter just had a pretty big milestone! On the latest podcast, Marie joins Chris on the show for a look behind the scenes at 300 weeks of sending a newsletter, and to chat a bit about its future. Perpetual Painting Sophia Wood uses JavaScript to add brushstrokes to the canvas to form an image, which is painted perpetually with strokes added, blurred, or erased as time passes. Sophia included a beautiful image to start, but you can add any image by URL to have it painted. GSAP: ScrollTrigger Sample Yusuke Nakaya demonstrates the GSAP ScrollTrigger plugin with this fullscreen scrolling photo gallery that features a clever sliced transition between names on each of the photo cards. Let's make some waves Temani Afif makes some wiggly waves with a keyframe animation on a pair of radial gradients in this playful Pen. Lotsa Conway Sebastian Schepis brings us "Lots of Conway on one page! Conway's game of life with not that many lines of code, and pretty fast too." Mountain yuanchuan takes us high up into a mountain range in this beautiful demonstration of the css-doodle web component with gradients. Freeze-Melt Animation Bence Szabo continues a series of #PetitePatterns — SVG patterns created "with as little code as possible" with this chilly scene. This Pen is in Bence's ever-growing collection of PetitePatterns, too! #CodePenChallenge: The Gnarly Grid Our September "Fixer Uppers" challenge kicked off with a gnarly grid held together by one flimsy float. Check out how the community fixed it up in week one's collection, including Pens from Greg Vissing, Anja Hülsmans, rohzart, and Ryan Trimble. Frosted Glass Loader Chris Gannon crafts a satisfying loader animation of a dance between a pair of circles: one in frosted "glass", one in solid blue. Watch how the blue blurs under the glass in this beautiful animation. DigitalOcean Get the powerful cloud infrastructure you need to build the app you’ve been dreaming of. With simple tools, predictable pricing, and an active, supportive community of devs just a click away, DigitalOcean helps you grow faster than ever. Get started for free! iPhone 14 w/ Dynamic Island Luke Meyrick recreates the design and color options of the upcoming iPhone 14 with CSS. Press the color buttons to preview the different colors. DigitalOcean Get the powerful cloud infrastructure you need to build the app you’ve been dreaming of. With simple tools, predictable pricing, and an active, supportive community of devs just a click away, DigitalOcean helps you grow faster than ever. Get started for free! Advanced SVG Confetti leimapapa shares a set of fun confetti buttons that each toss out a little something different. "This uses animatepath randomized to where it looks random-ish. Still adding more confetti types to it." DigitalOcean Get the powerful cloud infrastructure you need to build the app you’ve been dreaming of. With simple tools, predictable pricing, and an active, supportive community of devs just a click away, DigitalOcean helps you grow faster than ever. Get started for free!
We want to share a new project concept for Email Newsletter Design for a corporate marketing campaign. Users could sign up on the website to receive an email newsletter. Show love ❤️ press "L". Want more? Follow me for cool stuff! Any feedback please let me know in the comments below! Thanks for watching and Cheers! Do you have a project you’d like to collaborate on? Email us at hello@uicreative.net ====================================== Visit Us : Uicreative.net | IG | FB | Dribbble | Medium | Pinterest
Design Pitch for Furniture Ecommerce Company.
This week's CodePen community highlights include a :has() powered photo gallery and a collection of :has() magic from Jhey Tompkins, a "Newtonian" game from Grant Jenkins, and a little bit of corn-y humor from Dario Corsi. Plus, a great tutorial on creating toon shaders in Three.js from Maya Nedeljkovich, and a beautiful collection of artistic Pens curated by CodePen community luminary Bailh. Newton (Game) Avoid the bombs, bricks, and enemies thrown by the menacing monster Gravitis in this playable game from Grant Jenkins. "It may start off easy, but don't be fooled... A storm is coming to Newton!!" It's Corn You know you got room for one one last chuckle at the "It's Corn" meme before the summer ends! Dario Corsi shares a corn-y interactive Pen that plays sound with every chomp. CodePen Radio #383: Soft Delete All On the latest podcast, Chris & Stephen talk about an internal technical detail we were improving in our database, which led to a public-facing feature for y’all. Now, The Deleted Items area of Your Work now works for all Item Types (Pens, Collections, and Projects). Before, it only worked for Pens, and even there it was a little messy as it didn’t retain the URL slug or comments and such — now it does. Trusted by over 51,000 web developers Use WPMU DEV’s all-in-one platform to manage, update, and optimize unlimited client sites. Get 40% off all plans. Limited time only. Sonar = Home of Clean Code Analyze your code wherever it lives - self-managed or in the cloud - and even starting in your IDE. Try a better way to code. #CodePenChallenge: Remote Control The August challenge wrapped up with a remote control journey through a QWERTY keyboard. Find your path through our collection from week four, including Pens by Aryan Tayal, Michael Urbonas, Amit Sheen, and Peter Norton. Thanks again to Cassidy Williams for the weekly prompts! Sticky Draggable Box Evan Jin (진경성) shares a sticky element that can stretch just so far before snapping right back into position. Click and drag the box in any direction to see the effect. :has() Sibling Gallery Jhey Tompkins combines :has(), :is(), and :focus-within to create a CSS image gallery with a sweet easing between sibling elements. Jhey has even more demos of the power of :has() in web-dot-dev's :has(): The Selector collection. Pop Some Bubbles "You know... for fun!" Bubbles float up and away, and you can pop 'em or just let 'em pass in this playful Pen from Kit Jenson. No score, no timer, just bubble poppin' vibes. :) Delineations Bailh assembles a collection of CodePen community creations that make artistic use of the humble line. Opened in 2015, this collection includes highlights from 7 years worth of creative experimentation. border between list items Josh Comeau shares a quick look at a great use case for :not(:last-of-type) with this demo of a list with underlines on all of the items except the very last. Custom Toon Shader in Three.js Maya Nedeljkovich shares tutorial for creating cartoon-style shaders with a custom vertex and fragment shader in Three.js. If you already know the basics of Three.js this one is a fun next step! Interpolate Between Paths Tom Miller combines GSAP with George Francis' generative-utils to create an animated interpolation between two paths. Draw any two paths with your pointer and check out how the space between them fills with moving lines. Atom BarZ brings Three.js down to the atoms in this scientific scene. Check out BarZ's DNA Pen for more Three.js at the microscopic level.
Personalization is key to make things work. A wide-spreading design thought is that every piece of a website should be personalized, The aspiration is clear, people are getting more of what they like, spam and detached content are gradually disappearing.Deep personalization will probably be fully implemented on most websites in a few years. Even though technology allows high-level personalization, people still don’t like to see popups even when they are personalized like a high-class wedding dress to a bridge.Why?Because a critical variable is missing in the popup personalization equation, Design.We work ambitiously to solve this.Providing maximum personalization wrapped in great design is our goal, Here are 28 examples of what we are talking about:A highly targeted email subscription popup which makes your audience fall in love.The science behindThe surfer image is highly resonating with its target audience, it is strong & emotional. Black & White photos affect users in many ways, in this case, it’s creating a sense of timeless drama. Surfers don’t like to miss waves, so the call to action is FoMO’imsh and talks in the surfer’s jargon and so is the rest of the popup.Who should see itUsers who read enough from your article or blogPotential customers or users who show a medium interest to purchaseUsers who match into your content followers personasPromotion popup to show how great is your new collectionThe science behindThe people who this collection is designed for will fill connected to the image. Why? An image of a luxurious-looking watch in an unusual background- this is contrast. Besides, contrast being an eye-catcher, this is a thick hint of how the collection looks like. Words strengthening the feel of uniqueness: Limited Edition, Summer Collection, Exclusive. ‘spare a glance’ is letting the user feed his curiosity about the question ‘what is so exclusive over there?’Who should see itReturning customersUsers with high chance to convert, i.e the people this collection is designed for.An email subscription popup that embraces a sense of uniqueness.The science behindWe, humans, are getting very curious when we hear about something exclusive. Giving users a chance to ‘get in the club’ might make them enough emotional to seal the deal & give you their email right away.The picture of a luxurious room in an exotic location makes the user’s brain to scream “This is exactly where I wanna be right now!” In addition, the simple and clear language keeps the users emotional so they positively respond to the call to action.Who should see itUsers who fit into your followers' personasUsers who are on the starting point or mid-way of your funnelReturning users who are showing a weak interest in your productEmail capturing popup that makes your newsletter look super exclusiveThe science behindBlack & white make things look simple and dramatic. The call to action button is highlighted in color and with a language which is fun and not dramatic.Talking about missing tips arise FOMO, surely when they are mind blowing and the whole popup environment is so dramatic.Who should see itUsers who love your contentUsers who are similar to your best personasA promo popup that gives the customer everything they love, TWICE.The science behindGenius titles are rare, but here is one. We all know that keeping things clean & natural might not be simple, so we sandwiched these words with a simple sauce, made of soap. Playing with words is amusing and connecting if used with users jargon.Visuals-words correlation is important, so we have a simple but beautiful picture of a young woman in nature. It is also emotional. The offer is coming right after the connecting part for a reason, the decision will be easier.The call to action also deserves a mention, because it strengths the image in the mind of the user and it is fun.Who should see itUsers with a medium to high chance to convert, i.e users thatSubscribers, readers, followersA promotion popup that convinces to check your dealsThe science behindThe visuals here are subtle and attractive, just like any invitation should be like.The titles use words who connect directly to this amazing guitar and with any guitar lover, making the targeted viewer feel emotionally connected.The call to action is so direct because the target audience should be convinced by now.Who should see itUsers with high chance to convert, i.e users who added more than 2 items to the cartReturning usersA cutting-through lead generation popup for serious peopleThe science behindA direct approach is the best approach in many cases, If we simply want people to join our workshop, let’s write exactly that. The colors, language, shape, illustration, and call to action are all simple because the last thing we want is to distract the viewer from the main message.Who should see itHeavy users, i.e returning users who read more than 1 article on your blogUsers who match into the event personasUsers who you have no doubt will join, i.e by using online events we can apply with AdoricPromotion pop-up that makes users’ mind trust youThe science behindA good way to gain trust is by proving your word, The title is a brief summary of the photo Quality speaks. The call to see more photos like this is reliable because of the first impression, which is impressive The green new badge is proven to arouse curiosity.Who should see itUsers who read or buy your related content or productsTest with personas you slightly know (because everything in this popup is so positive)A discount promotion popup to increase revenueThe science behindThe high-end product and image are eye-catching. We highlight the 15% discount so viewers get emotional with the offer. If they already start reading we arise their fear of missing out with a limit of time. Using the word checkout page and then giving a promo code is preparing a perfect land for the call to action — Shop now.Who should see itUsers who show interest to purchaseUsers who try to exit from your websiteReturning customersEmail capturing popup that speaks personally to usersThe science behindFitting your offer to the user jargon is a form of art. Tune in and slide like a pro are a strong way to tell musicians: ‘sign to our newsletter and get awesome tips to improve your musical skills’.The image of a guitarist doing a common-to-guitarists thing proves to your audience even more that you understand them.This popup is all about proving your audience how connected you are.Who should see itUsers who love your content or productsUsers which are similar to your best personasA sign-up popup to create long-term relationshipsThe science behindcreating relationships is easy when you contributing your skills and knowledge by putting it in your contentthe photo of a girl taking a picture unproffesionally is to connecting with the target audience — amature photgraphersAn intresting title making the user mind go ‘this is exactly what i need’Calling to action here is very friendly, only your name and email are required to join a trip which will improve your photography skillsThe image created in the users mind is of getting a high value giftWho should see itUsers who match the targeted personaSuper magnetizing email subscription popupThe science behindPugs are beloved, red color is magnetizing and right typography highlights announcements.Everything here is set up to steal pug owners attention.The wording makes sure we understand the point and not just getting dazzled by visuals.Who should see itReturning customers and usersUsers who are similar to your top personasThe lightest lead generation popup ever madeThe science behindNo one love to talk with a salesman about demos, people precept it as a heavy thing.So why not refute it in a glance?Here we refuted it with a light design, typography and photo. notice that there is nothing special about the words or offer over here.Who should see itCustomers and heavy usersUsers who fit into the personas will attend the eventUsers with high chance to joinTeasing with a promo popup that will make readers returnThe science behindYou surely know the sensation when an episode ends in the peak of the thrill and an ‘on the next episode’ promo shows up.This popup will do the same job for its target audience when done correctly.Cutting down a good piece of content and giving a photo that arises excitement should ease the decision to subscribe to the newsletter and read the following content.Just make sure that the popup is connecting between the first & the second piece of contentNo use in sophisticated language because the people who see this popup should already be convinced to subscribe.Who should see itUsers who have a medium to high chance to read the following contenUsers that read your content but not in your email listArticle promotion popup to awaken readers dreamsThe science behindBesides creating an amazing atmosphere, Bird’s-eye view photos make things look approachable. Just watch the Christ the Redeemer Statue from a bird’s-eye view.After igniting the viewer’s mind we just have to announce strongly that we have 10 best tips for them. The subconscious mind may associate this tips with an amazing, approachable trip and we granted another consumer of the related content.Who should see itUsers who consume related contentUsers who fit into the personas the article is written forA common email subscription popup with a discountThe science behindSimplicity is all over this popup.The design and photo are clean but common, perhaps this is the clothing style of the audienceAn incentive like a discount will increase the chance target audience will subscribe.Who should see itUsers who have a good chance to convertNOT returning customers or existing subscribersBoutique promotion popup for real fansThe science behindPumpkin ramen, good environment, menu fonts and classic design.The target audience well resonate so well with this popup because it has all the elements of a good restaurant.By the way, the outer rectangle and the limited time are there to increase the sensations of uniqueness.Who should see itYour real fans and heavy usersUsers who fit into your best personasA classic discount promo popup for those you already knowThe science behindDrama is generated by black & white colors and a very dramatic guyAfter we played with some viewer emotions, we highlight the 15% discount so they get pushed into actionSimplicity is key here because the emotions generated and incentive given are enough to pull the call to action.Who should see itUsers who show interest to purchaseReturning customersEmotional email promotion that pushes a call to actionThe science behindThe elements in this popup are creating sadness in the viewer mind which lead to a situation changing call to actionThe dog is swallowed in the darkThe title calls the reader to help and the subtitle is a persuasion boostFinally, the call to action comes with a strong-red sense of emergencyWho should see itUsers who match into converted personasNOT existing subscribers or users (they should get directly the email)Seductive promotion popupThe science behindA coupon code is a great way to make potential buyers buy.Happy sensations with great energy are delivered by the great photo and the titleA slight urgency is pushed with a limit of time so viewers won’t get too nonchalant and forget to purchaseThe chances of spa lovers to connect to this popup and buy are highWho should see itBest customersUsers who show medium to high interest in purchasingDramatic promo for an exciting piece of contentThe science behindAll the elements of this popup are creating a sense of drama, a message that the content we promoting is exciting indeed.We, humans, are strongly affected by photos of other humans, the emotion of the photo is transferred with clarity.Black and white colors are dramatic. Have a glance at photos colorized and see how they turn much less dramatic.Strong wording like ‘models shared’, ‘exciting career moments’ are pouring curiosity into readers mind.Assertive fonts are related to luxurious fashion companies which are also trusted.Who should see itUsers which the popup will speak to themA popup to capture the viewer’s email & imaginationThe science behindA strong photo which strongly correlates with text is important for clarity.Our message of a super relaxing vacation with a style is transmitted in both, the photo and titles.In case the subconscious is not convinced yet we capture the imagination by saying ‘catch a flight tomorrow’A fresh language also proves that we know a thing or two about style.Who should see itUsers who consume your related content or productsTest on personas you barely know (How can you fail with this super positive popup?)Targeted promotion popup that uses high-quality elementsThe science behindNo sophistication here, only quality. A photo that simply transfers dancing & fashion, what our new edition is about. A museum-like sensation is created by all the popup elements so art lovers will relate and fill like learning more is a good idea.Who should see itUsers who fit into well-described personasThe science behindEveryone loves vacations and discounts. Combining two things people love in one sentence will make their chance to react much higher. The visuals and typography are simple to let the statement stay clear and highlighted. Slight hint of adventure is giving by the image.Who should see itUsers who showed interest and are about to abandonUsers who consume your content and have a chance to convertExit-intent subscription popup that improves user retentionThe science behindExit intent popup can be tricky, it has to have a good incentive in order to succeed. And you should show them only to people have shown some interest in what you are offering, if not the leaver will leave with a bad taste.This offer will look good to users already shown interest, it is mellow and quick. The title and photo are dramatic in a humoristic way, which is a great way to let people leave with a good taste.Who should see itUsers who read enough from your article or blog and are about to leaveUsers who show enough interest and are about to leaveNOT users who didn’t indicate enough interestInteresting email subscription popup to build a list of hot potential customerThe science behindHow would you know who is interested in your new arrivals? Just let the curious people left their email and there you go. The combination of 3 well-taken photos in one popup will make sure that the right users will subscribe.All the wording and the hot & new badge make sure the right kind of users will get even more excited. The final line is to debunk the suspicion of some people, it can be used in any email subscription popup.Who should see itUsers who match into your personas, i.e use redirected from a specific page or postUsers you want to test to convert, i.e users don’t match any of your personas but checking your product collection for certain timeSubscription popup with a discount to turn visitors into buyersThe science behindFunnel steps are progressive. But firing a popup like this push people from the beginning of the funnel to the end.The design if clean, modern & sharp. If it represents what you’re selling — that will catch the eye of the right people.Offering 10% discount in the first order is like a ‘dare you’ challenge, and if it’s not enough the following words are suggesting that you might stay behind with your old furniture.Having your subscribers name is always good to create a stronger bond.the little checkbox should be a must-agree if you wish to deliver newsletter besides a discount.Who should see itUsers who match into your personasUsers who have a medium to high chance to purchase, i.e users that already added a product to cart and have visited your website for 30+ minutesEmail subscription popup to put the hottest users in your pocketsThe science behindA strong correlation exists between the picture, design, and wording. This popup transfers luxury in all means. Right wording is crucial. the words ‘member’, ‘club’, ‘new product’, ‘special offers’ are right in their place to make users want to join beside getting a sense of luxury. A direct approach is best in this case, let the popups elements speak by themselves.Who should see itReturning usersUsers who match to your best personasBuild & Use pop-ups with Adoric, It is free. Forever.Adoric’s editor, look how friendly we’ve made it :)May all Pop-Ups be beautiful.28 Examples of Highly Converting Popup Designs, With the Science Behind Them. was originally published in Muzli - Design Inspiration on Medium, where people are continuing the conversation by highlighting and responding to this story.
This is the 53rd installment of my monthly feature on Typewolf where I share my favorite type-driven websites from the previous month and then write a little about the typographic details behind the designs. You can check out last month’s post for May here. Jerome Harris This site uses two freely available open-source fonts—the serif Cormorant and the sans Gothic A1—but still has a distinctive look. The headline type is set tightly with negative letterspacing, recalling the tight-but-not-touching vibe of 1970s typography. The designer of Cormorant actually commented on Twitter how he wasn’t a fan of the tight setting here, but I think it matches the look of the rest of the design and gives the type a less formal and more raw aesthetic. Long Lean Club Canela and GT America are two of the hottest typefaces of the moment, and they are both combined here. I really love the overall branding—the logo, type choices, colors and photography all feel spot on. However, I feel like the execution on the website could have been better. The paragraphs extend the full width of the browser window, which makes reading difficult on a large screen. And the introduction of a second sans-serif here—Futura—feels unneeded. Perhaps a different width or weight of GT America could have been added instead to keep the design more cohesive. An Interesting Day Norwegian design studio Bakken & Bæck host a one-day conference every year, with each event getting its own unique website design. This is the fourth feature on Typewolf (check out the 2017, 2016 and 2015 versions), so it’s an interesting way to watch design trends evolve over the years. The 2018 site is a perfect representation of what is on trend at the moment—wide-bodied sans-serifs, heavy borders and quirky illustrations. An extended cut of GT America is used throughout with an even wider expanded style used for the main headline. Will the extended sans still be all the rage next year? We will have to wait and see… Whittle School & Studios I get the occasional complaint from people who think I feature too much harsh, brutalist-inspired design on Typewolf while passing over anything that takes a more timeless and classy approach. The Whittle School & Studios site should please this group. Nothing about it feels overly trendy—it’s just solid typography executed in a tasteful manner. The huge headlines set in the Big optical size of Freight contrast nicely with the smaller text set in GT Walsheim. GT Walsheim is a unique geometric sans that is full of personality, but it still reads quite well at smaller sizes. And it helps that the line lengths of the paragraphs are kept at a narrow, readable width that fits nicely in the oft-recommended 45–75 characters per line range. Stay Tuned for Next Month’s Post I’ll be publishing a new type-driven design roundup post like this at the beginning of every month. Join my monthly email update list if you’d like to be notified when it is published. Learn How to Get Truly Gorgeous Typography I’ve distilled everything I’ve learned from writing these articles over the last five years into a single, definitive resource—the Flawless Typography Checklist. Read it straight through as a complete master course and then continue to use the checklist as a tool on every design project to ensure your type will always be flawless.
This is the 50th installment of my monthly feature on Typewolf where I share my favorite type-driven websites from the previous month and then write a little about the typographic details behind the designs. You can check out last month’s post for February here. Sophie Haig I thought this was Times New Roman at first, but it’s actually Riccione, a design that is super similar to Times but with wider proportions and thinner, sharper serifs. They could have saved a webfont download by just using the default system font instead. However, it does add a slightly different feel to the design, so maybe it is indeed worth the extra bandwidth. A wide cut of Titling Gothic is paired with the serif, adding a contemporary touch to the layout. 11 Honoré Canela continues to be wildly popular with fashion brands—it’s beginning to feel like the twenty-first century version of Optima. Size-inclusive clothing company 11 Honoré make use of the lighter cuts here for their logo and site design. Some of the type is a little on the small size, particularly the thin weights of Canela, which feature delicate strokes that can become brittle if used at too tiny of a size. Smaller type tends to look more elegant though, especially when contrasted next to a larger heading. An expanded cut of Favorit is used at sizes as small as 9px, but it holds up decently due to its sturdy strokes and wide letterforms. Mr. Leight This is another site using the fashionable Canela, but this time a heavier, less-delicate cut is used. The logo looks to be loosely based on Canela as well, but with some strokes erased and triangular shapes tacked on. ITC Avant Garde Gothic is paired with it, used at a tiny size for maximum contrast with the large headlines. Paradiso So we are four-for-four this month on designs using the trendy peachy-pink color. I’m not sure if I specifically seek out this color to feature or if it’s just too popular as to become unavoidable. But hey, it’s a nice color and much more interesting than the default black text on a white background… The Paradiso site is all over the place with its type choices. Windsor gives off a laid-back 70s vibe. Europa feels sleek and modern, but it’s set with generous letterspacing, which gives the geometric sans a more open and friendly feel. The use of Optima adds a refined, classy touch. And Graphite, an upright script face based off an architect’s pencil, seems to be scrawled randomly throughout just for fun. It’s a lot of type to take in, but it makes the entire design engaging and full of personality. Stay Tuned for Next Month’s Post I’ll be publishing a new type-driven design roundup post like this at the beginning of every month. Join my monthly email update list if you’d like to be notified when it is published. Learn How to Get Truly Gorgeous Typography I’ve distilled everything I’ve learned from writing these articles over the last five years into a single, definitive resource—the Flawless Typography Checklist. Read it straight through as a complete master course and then continue to use the checklist as a tool on every design project to ensure your type will always be flawless.
This is the 55th installment of my monthly feature on Typewolf where I share my favorite type-driven websites from the previous month and then write a little about the typographic details behind the designs. You can check out last month’s post for July here. Kleinschmidt Extended sans-serifs have been all the rage lately, especially set in all caps like seen here. It’s refreshing to see Hoefler & Co’s Ringside family used, as opposed to GT America or Druk which seem to be dominating the extended sans market. The entire site is set in Ringside with no other typefaces used. Ringside is a huge family available in a wide range of weights and widths, so it’s well suited to take on such a task. Playa Canela continues to be massively popular in the fashion and beauty products space as evidenced here. The slight tapering on the stroke endings give it a refined, elegant quality that exudes style. It’s paired here with Klim’s geometric sans Calibre which adds a contemporary feel to the design. It’s always nice to see sites like this where the typography matches up perfectly with the product packaging. I’m always surprised at the number of products I see with beautiful type, only to be disappointed when I visit the website to find that it’s set entirely in Open Sans. Tito’s Handmade Vodka I think this is one of the few times I’ve seen a compressed style of GT America used as opposed to the extended style which seems to be everywhere these days. A layered effect is added to the headline type using the CSS text-shadow property, making the text pop out from the background. The smaller headlines and body text are set in Eames Century Modern, which feels like a more modern and refined version of Clarendon. The playful brush script Suti rounds out the design set entirely in uppercase. Heard at Work Berlingske Serif is one of my favorite typefaces, but it seems to be overshadowed by other more popular serifs such as Tiempos (which seems especially overused for this particular style of design). I love typefaces like these that have small details that are unique but don’t immediately jump out at you—the arm on the lowercase r is actually a detached floating circle, but it doesn’t seem to negatively affect the readability of the typeface. Berlingske Serif is paired here with Work Sans, a free font available on Google Fonts. The site uses proper apostrophes and quotation marks, which is pretty important for a site comprised entirely of quotes from co-workers. Stay Tuned for Next Month’s Post I’ll be publishing a new type-driven design roundup post like this at the beginning of every month. Join my monthly email update list if you’d like to be notified when it is published. Learn How to Get Truly Gorgeous Typography I’ve distilled everything I’ve learned from writing these articles over the last five years into a single, definitive resource—the Flawless Typography Checklist. Read it straight through as a complete master course and then continue to use the checklist as a tool on every design project to ensure your type will always be flawless.
Get access to thousands of freshly updated design inspiration pieces by adding Muzli to your browser.
Loved by 750K designers worldwide, Muzli is the leading go-to browser extension for creative professionals.
Designing a newsletter requires a unique approach compared to designing for web or mobile platforms. Newsletters are a direct line of communication with your audience, offering a blend of visual appeal and content clarity. Here’s what designers should consider when creating a newsletter and how it differs from web or mobile design.
Purpose and Audience
Content Hierarchy
Visual Consistency
Readability and Accessibility
Responsive Design
Call to Action (CTA)
Testing and Optimization
Content Delivery and Consumption
Technical Constraints
User Interaction
Designing an effective newsletter involves balancing visual appeal with clear, concise content that engages and informs the reader. Understanding the unique challenges and opportunities of email design, and how it differs from web or mobile design, is essential for creating newsletters that stand out and achieve their intended goals. By focusing on readability, responsiveness, and consistent branding, designers can craft newsletters that not only capture attention but also foster a lasting connection with the audience.