Newsletter design examples

30 Free Responsive Email & Newsletter Templates

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.

5 Psychological Tricks to Use in Email Newsletter

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.

5 Reasons It’s Not Too Late to Start Your Email Newsletter

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...

Email Marketing for WordPress: Why is it Important and Which Newsletter Plugin to Use?

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...

Email Marketing for WordPress: Why is it Important and Which Newsletter Plugin to Use?

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...

How to Get Your Newsletter Read

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.

Email Newsletter Free UI !!

Free UI Newsletter - HashiCorp. Check the Attachment. Show some love ❤️ press "L". Want more? Follow me for cool stuff. Day 192/366

32 newsletter design ideas to get your subscribers clicking

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.

Top 22 Newsletter Designs Loved by Readers That Boost Conversions

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.

Email Newsletter - Infografic Icons pt. 1

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.

Omail - Email Newsletter Apps

Hello there 😍Let me show you my latest exploration of Omail - Email Newsletter Apps.Press “L” to show some love ❤️Have a good project? Let us know ✅💌 10am Email: Message us😍 10am Instagram: Follow us🥳 10am Product: Creative Market | Gumroad | UI8-----------------------I'm available for freelance projects. So let's talk or hit me up through email at setiawanfarism29@gmail.comFollow me on Instagram @uiolehfaris

Email Newsletter

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

DCNY

View full page on nocode.gallery

Newsletter Signup: 7 Essential Tips for Higher Subscription Rates

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...

News You Can Use: Score $800 of Good Stuff From Colossal, Booooooom, and 20×200

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

Email Newsletter

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

Noted: New Logo and Identity for Fanhood by Hoodzpah

“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.

Muzli Publication — Weekly Digest

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.

Writebeam

View full page on nocode.gallery

Email validation animation

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

Handy CSS Snippets, Toggles & Tiles, and a Polyrhythmic Spiral

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.

Email Newsletter Design

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

Email Newsletter Design

Design Pitch for Furniture Ecommerce Company.

A CSS Sunrise, Web Component Mountains, and JavaScript Clouds

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!

A :has() Gallery, a Gravity Game, and Corn-y Clicks

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.

28 Examples of Highly Converting Popup Designs, With the Science Behind Them.

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.

The Typographic Details Behind Typewolf’s Favorite Sites of March 2018

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.

The Typographic Details Behind Typewolf’s Favorite Sites of June 2018

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.

The Typographic Details Behind Typewolf’s Favorite Sites of August 2018

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.

Gradient Borders Two Ways, Three.js Metalwork, and Chain Reactions

This week's CodePen community highlights include two takes on a rainbow gradient border from Jason Lengstorf and Ana Tudor, a Three.js scene showcasing the fine metalwork of prisoner849, and a click-happy minigame from Fabio Ottaviani. Plus, Gabriele Corti brings us "Zdog Monday", and Matthias Hurrle takes us to the WebGL dance floor with volumetric lights. Drag & drop authentication for your app Add authentication, user management, and authorization to your website with our no-code workflows and SDKs. Choose from passkeys, magic links, social logins, and more. Sign up for a Free Forever account today - no credit card required. Buttons - Before/After Nicolas Jessenberger sums up ~10 years of web design history in this side-by-side pairing of a 2010s era glassy button with its subtly skeuomorphic modern day descendant. Multiplayer servers for all your gaming needs Cloud game server, Dedicated game server, or vServer at affordable prices and full root access. Design your laaS individually depending on your project and resource requirements. Ball Chain Reaction - Click! Click to create a chain reaction in this colorful JavaScript minigame from Fabio Ottaviani. Volumetric Lights "Some fancy patterns and reflections using the volumetric light rendering from my previous shader. Maybe a bit too much going on here. Still, I thought it helped to get into a good mood." From Matthias Hurrle. 1 element rainbow spinner 2023 Ana Tudor has been iterating on this concept for 10 years, and the 2023 edition is the sleekest yet! Check out the Pen description for a detailed timeline with linked Pens from from 2013 - today. mathtober day-31: radial Sofia Wood wraps up mathtober with a stellar JavaScript scene and a poem: "multiple passes brings deeper understanding radial - days - nights" Apple Tear Strip w/ GSAP && React Jhey Tompkins emulates the tactile experience of Apple product packaging with this interactive "tear strip". Tear away, then click the button at the top to generate a new one and start all over again. Slider with Two Different Sidebars Ecem Gokdogan keeps the pop party going with this musician showcase, powered by swiper.js. For more in this same groove, see Ecem's retro pop landing page. Rolling Dice "Try your luck rolling a six sided dice" in this playful Pen from Gabriele Corti, part of Gabriele ongoing Zdog Monday series. Bimetallic Ring #2 Take a tour through a Three.js showroom and check out the details in the hyper-realistic gold and silver ring forged by prisoner849. And for a subtler style, check out version 1. Gorgeous animated gradient borders Jason Lengstorf brings us another take on a pure-CSS animated gradient border, drawing inspiration from an @property tutorial from Temani Afif.

Playing with the Properties API, Timeline Text Effects, and Big Footers

This week's highlights include an infinite Slinky powered by the CSS properties API from Jhey Tompkins, and a slick text effect crafted with CSS and GSAP by Sikriti Dakua. Plus, the CodePen community kicks off the March #CodePenChallege with some Big Footers. And, on CodePen Radio, Chris Coyier chats with creative technologist CJ Gammon. #CodePenChallenge: Big Footers Our March 2022 "Go Big!" challenge began with some Big Footers. Stomp through our collection of Pens from week one, including big footer concepts from TheMOZZARELLA, Jackie Zen, Pepita K, Bruce Botherton, and many more. CodePen Radio #358: with CJ Gammon On the latest CodePen Radio, co-founder Chris Coyier chats with creative technologist and CodePen community member CJ Gammon. CJ has been at Adobe for nearly 10 years and has played with a huge variety of interesting creative technologies. Malwarebytes Endpoint Detection and Response Did you know that 20% of businesses experience a breach? Easily deploy Malwarebytes in minutes to secure all your devices in one place. Get Smarter in 5 Minutes Find out why over 4 million people read Morning Brew - the free daily newsletter covering all things business from Wall Street to Silicon Valley. Turn it up to 11 Yoav Kadosh pays tribute to the 80's comedy "This is Spinal Tap" with a shiny, interactive volume knob built with React and CSS. Sketch Button Andreas Storm issued a challenge to recreate a shiny button, originally created in Sketch, with code. Button master Aaron Iker answered the challenge with this slick button that has a brilliant shine on hover. CSS3d Turn Animation | GSAP Sikriti Dakua combines CSS transforms with GSAP's Timeline sequencing tool to give this text a stunning turn. Papa Roach Life Cutter "An abstract version of the "Life Cutter" used in a recent Papa Roach activation celebrating the 22nd anniversary of "Last Resort." Want your photo added to the demo? Just drop a ✂️ in the comments." From Lee Martin. Emoji in GLSL Lea Rosema shows that GLSL shaders aren't just for psychedelia with this jolly group of animated emoji, crafted with Lea's shader-art web component. CSS Blossoming Flowers at Magical Night Blooming flowers wave in a gentle breeze in this lovely animated CSS illustration from Md Usman Ansari. Hippity Hop Spring has sprung in this generative terrain made with HTML, CSS, JavaScript by Kit Jenson. Navigate with your arrow keys to help the rabbit collect carrots, or pop open the controls up top to zoom around and play with the colors. Split animation on hover with single element Gautam Singla reworks a classic CSS & JS Pen by James Bosworth to create a slick slash effect on hover, using a clever combination of data attributes and CSS. CSS-only Border Hover Effect Temani Afif shares a fun reverse photo frame hover effect, free of extra elements and optimized with CSS variables. Pure CSS Infini-Slinky Jhey Tompkins tosses an infinitely slinkin' slinky into the browser, "powered with the properties API". Here's a pro tip from Jhey: you can mimic a repeated animation-delay by generating keyframes with a CSS preprocessor.

Parallax Illusions, Retro Photo Galleries, and Ancient Google Fonts

This week's CodePen community highlights include a clever 3D parallax illusion from Temani Afif, a Polaroid-inspired drag & drop photo gallery from DeyJordan, and a showcase of the ancient side of Google's Noto Sans font from Josetxu. Plus, Andrii Rodzyk transforms your image into an SVG cross-stitch, and loficodes shares a fascinating piece of generative art. 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. Thousands of documentaries on demand Stay informed + entertained about topics like food, science, history, travel, tech and more. Use code "CS23" for 25% off Granny's Famous Apple Crumble Gemma Croad bakes a lot of charming details into this design concept for a recipe page, including crumpled paper, yellowed tape, and a super-tasty recipe for apple crumble! SVG Cross-Stitch from your image Upload your image into Andrii Rodzyk's Pen and watch it transform into a cross stitch! It works best with illustrations but it's fun on photos too. Inspired by Kasey Bonifacio's SVG Cross-Stitch collection. #CodePenChallenge: Pull Quotes The third week of the "Typography of Quotes" was all about eye-catching pull quotes. Flip through our collection from week three, including Pens by Tom D, Mads Stoumann, Joanna Sprott, and Chris Moran. Want to flex your typography skills? The final week of the May challenge starts today! Random Ancient Library Josetxu makes use of Noto Sans' ancient font collection to create an "Ancient Library with random book features: width, height, color, sepia filter, border radius, rotation, language and serial number". Atom Preloader Jon Kantner goes atomic with his latest loader animation! "This (carbon-13) atom is made up of SVG electron orbits and “3D” CSS protons and neutrons." Instant Photo Film Gallery Flip through a photo gallery the old fashioned way with this Polaroid-style drag & drop photo stack from DeyJordan. 3D parallax effect on hover Temani Afif makes clever use of cropping and perspective transforms to create the illusion of 3D parallax on hover. Check out the commented HTML & CSS for details on how it works. Doodle Lines merge, split, and connect into shapes in this captivating piece of generative art from loficodes. Pop this one in your favorite CodePen TV collection! CSS Pyramid Diamond Kostantin Denerz uses the @property rule from the Houdini API to carve a floating diamond-shaped structure made of pyramids. Click for an explosion animation effect that reveals a surprise inside! Skeuomorphic Range Slider Nicolas Jesenberger continues an exploration of skeuomorphic UI elements with this pair of slick range sliders. "It can be achieved by only using the range input and its pseudo-elements but I wanted to make it so any extra element can be added for very complex styling." pulses A pair of neon shapes bounce around in a tumbler until they explode in a shower of sparks in this kinetic canvas animation form Scott R McGann. Stacked Cards Smooth Show on Hover The card of your choice smoothly appears at the front of the stack on hover in this slick CSS demo from Zed Dash.

SendBox - newsletter and email template

SendBox is a modern newsletter and email template for marketing campaigns. Live preview Purchase template

The Typographic Details Behind Typewolf’s Favorite Sites of July 2018

This is the 54th 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 June here. Twin Soul The Twin Soul site combines two fashionable, contemporary sans-serifs—Adieu, a wide-bodied sans with high contrast, and Sneak, a quirky grotesque with an s that looks like it is flipped upside down. The addition of the serif ITC Clearface adds a warm, retro touch to the design which harmonizes nicely with the colorful geometric shapes. My only critique is that the type sizes continuously scale up based on screen size, so on a large monitor like mine the headlines end up with gigantic text that fits only one or two words per line when the browser window is at full width. Update: this minor issue has since been fixed. Emergence Magazine Windsor, together with ITC Clearface mentioned above, are two of the more popular typefaces leading the resurgence of 1970s-evoking serifs. I think they add a welcoming feeling of warmth to the design landscape, amidst the cold sterility of neo-grotesques and geometric sans-serifs. The serif Ogg, used for headlines here, has fairly wide proportions, so it was a clever idea to pair it with the extended cut of GT America. When stacked on top of each other, they feel balanced and even. Emergence Emergence (completely unrelated to Emergence Magazine featured above) is a venture capital firm with a brand that comes across as stylish and classy in contrast to the techie look that is stereotypical of VC companies. The illustrations help with this as does the type. Canela feels chic and elegant, while Styrene adds a more modern touch. Neither Styrene nor Canela are ideal for body copy (although a text version of Canela was actually just released by Commercial Type last month), so the ever-popular neo-grotesque/gothic hybrid GT America is added into the mix to set the body text. MIT The MIT redesign was lead by the talented folks at Upstatement, who are one of my favorite design agencies at the moment. It seems like I end up featuring almost all of their projects on Typewolf (they also did the Emergence site above). The entire site is set in Luzi Type’s Messina Sans, with typographic contrast coming from different sizes and weights rather than different type families. The Spotlight section on the homepage features colorful text that switches to a different color theme every day. Some people really despise this kind of type treatment, as evidenced by the “this must have been designed by the same color-blind folks that did Dropbox” comment I saw on Designer News. But that seems to be a common complaint of a certain subset of people whenever a site strays too far from default black text on a white background. I personally love the look and think it adds personality to brands which is sorely lacking on the web these days. 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.

The Typographic Details Behind Typewolf’s Favorite Sites of February 2018

This is the 49th 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 January here. Creative Leadership Salon Antique Olive is a unique typeface in that it has reverse stroke contrast, meaning the horizontal strokes are thicker than the vertical strokes. This is the opposite of standard typefaces, which gives the letterforms a wonky, off-balanced feel. Here, a condensed cut is set entirely in uppercase which makes the reverse contrast not quite as noticeable. The “evil serif” Romana is paired with it, which starkly contrasts with the quirkiness of Antique Olive. Smalls Nimbus Sans, a Helvetica-inspired neo-grotesque, is the sole type family used on the Smalls website. The navigation and subheaders use an extended cut set in uppercase, which helps create hierarchy and breaks up the “sameness” of using a single font. The lowercase text has added letterspacing, which is usually considered a typographic faux pas. I’ve noticed other sites doing this lately and it feels like it is starting to become somewhat of a trend. To me, this loose typesetting gives designs an almost childlike quality, feeling friendly and open like a learn-to-read book. Book of the Month Kris Sowersby of Klim designed Untitled Serif to be a neutral book face that blends into the background. So it is interesting to see it used here as a prominent display face. Graphic designers always end up using typefaces in ways not originally intended by type designers. Grilli Type’s GT America is used for the rest of the site, while the logo is set in Farnham Display italic, showing off some of the gorgeous swash characters. WePresent ITC Clearface continues to be popular as of late—it made an appearance on the recent Chobani rebrand and has been featured quite a bit on Typewolf recently. I feel like it’s losing some of its retro associations and starting to feel contemporary again. I credit OKREAL with helping to revitalize this typeface, as their influential site design from 2014 made prominent use of it (in addition to being one of the first sites to do the whole colored-text-on-a-colored-background thing). The WePresent site may have possibly been inspired by OKREAL but manages to do its own unique thing. The headlines mix in the sans-serif Fakt mid-sentence, giving a distinctive look to the story titles. And I love how some of the stories are individually art directed with their own custom color palettes. The body text is set beautifully in a readable line length with proper apostrophes, quotation marks and dashes used throughout. 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.

CSS Carnival Rides, a Typographic Trampoline, and a bit of color-mix()

This week's CodePen community highlights include an amazing animated Ferris wheel from Amit Sheen, a brilliant bounce through the alphabet with Steve Gardner, and a quick rundown of what's cool about color-mix() from Ryan Trimble. Plus, Pavel Boytchev animates a thought experiment with Three.js, and ash_creator shares a trio of spectacularly shiny buttons. Letter Hop Hop through a bouncing alphabet from A-Z and back again in this playful typographic animation from Steve Gardner. For more lovely letter animation, check out Steve's delicious Oreo Smash Donuts, too! Caressed by the Sun Matthias Hurrle weaves webGL into a diaphanous metallic jellyfish-like creature in this gorgeous sunlit Pen. A109: Pastries Come for the "calkly coioils", stay for the super-cool animation on scroll in this collaboration between the human CJ Gammon and the AI image generator Midjourney. CJ has a video on how it was made on YouTube. HTML & CSS Recommended Button If you need a button that does the absolute most, look no further than this dazzling trio of glassy buttons from ash_creator. They glisten, gleam, sparkle and shine! What if the Earth were a capsule? Probably a lot of things would be different! Pavel Boytchev gives us a little preview of what the capsule version of Earth might look like from space in this unusual Three.js demo. Mixing Colors with CSS Ryan Trimble digs into the details of the color-mix() property in this quick tutorial featuring an interactive Pen demo. Custom Giraffe Caret From the "don't do this in production" files, take a dive down a rabbit hole as Stanko Tadić shares the result of experiments with customizing the input caret to add a giraffe icon. #CodePenChallenge: Pickers We wrapped up the "Choice UI" challenge with picker elements. Pick your way through our collection from week 4, featuring Pens by Matthew Davis, Dale de Silva, Jos Faber, and Taha Shashtari. 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. Ferris wheel (CSS only) A pretty pastel ferris wheel spins and rotates in this spectacular animated CSS illustration from Amit Sheen. Headless CMS with Best Tooling and AI Capabilities Stop assisting editors all day. Focus on code instead. Kontent.ai is the first headless CMS with effective UI, visual editing and AI capabilities that editors love. And for you? .NET and JS SDK, CLI, rich text resolver & strongly typed model generator, fast CDN, zero maintenance. inu toast Rory Kasasagi puts the "dog" in Zdog with this cute animated illustration of a slice of toast that looks like a Shiba Inu dog. Rainy Simplex Hills Mustafa Enes shares "a cellular automaton to simulate dendritic drainage patterns [...] There's no real fluid dynamics here. The water just follows the easiest path to follow, erode the way gently, and create vegetation where it touches." ClimaCode Turn the neumorphic dial and press the glowing buttons to customize the weather, time of day, and inhabitants of a mountain scene in this beautifully detailed Pen from RAFA3L.

HTML Email Newsletter Template + Cover Image

Today, we have released newly designed transactional modules for Postcards. We designed and coded 26 absolutely new modules! You can start using them directly in the Postcards App now. 🤗 Finally, you can create and send the eCommerce and other transactional emails. More details about the update on Medium. Postcards App - Try Free Do you like our email newsletter? Download free HTML template here on Codepen. Press L 👍🏽to show some love! Follow the Designmodo Team Send emails with 💌.

SVG Ripples, Custom Shapes with CSS Grid, and a Particle Party

This week's CodePen community highlights include trippy portraits distorted with SVG ripples from Scott Kellum, a two-part tutorial on creating custom shapes with CSS grid from Temani Afif, and a particle party from Matteo Bruni. Plus, Jen Simmons goes in depth on using :has() as a parent selector, and Alvaro Montoro excels at crafting a photorealistic shine with CSS. Understand, fix, and automate across your codebase Sourcegraph helps you code better and stay in flow. It's a code search and intelligence tool for all your company's code to help you quickly understand code, find usage examples, track down bugs, assess the impact of a change, and more. CSV Imports, Reimagined with Flatfile We've built an SDK to construct powerful data flows. Imagine a world where your CSV importer says yes, instead of throwing an exception. Ripple Scott Kellum sends a trippy, liquid-y ripple through a series of portrait photos with a smooth combination of SVG filter primitives. Animated Star Rating Jon Kantner shares a super-fun star rating input with lots of clever details. Try clicking stars one by one, then click across a long range, like 1 star to 5, and watch how that progress animates. Using :has() as a CSS Parent Selector and much more Writing for the Webkit blog, CSS legend Jen Simmons takes us from the basics of how to use :has() as a parent selector through several practical examples of :has() in use, including a pure-CSS dark mode switch. Amazon Fire Remote in HTML and CSS Alvaro Montoro shares a photorealistic recreation of the "aCSSzon" remote. The glossy shine on the navigation ring is just stunning! Space, Rocket Ships, & Electric Cars! hluebbering rounds up an out of this world collection of space-y Pens complete with planets, stars and space vehicles. Some quote or something Bruce Brotherton's modestly titled quote is eye-catching without drawing too much attention to itself. Perfect for an article pullquote or testimonial callout! CodePen Radio #381: Data on External Library Usage On the latest podcast, Marie joins the show to dig into the data of the top 10 most used JavaScript external resources of all time on CodePen, including the rise, fall, and sometimes the rise again, of your favorite JS libraries. #CodePenChallenge: Equal with Deletions In the 3rd week of our "Coding Challenges Challenge", we tested if two strings were equal with deletions. Browse through community solutions in our collection from week two, including Pens by Julian Parker, luke555, Aryan Tayal, and danchepkwony. Thanks again to Cassidy Williams for the challenge prompts! Easiest 3D Button antoniasymeonidou demonstrates how to create a chunky, colorful 3D button with just a little bit of CSS. tsParticles Matteo Bruni introduces the jsDelivr ESM of his tsParticles library with this fun demo that alternates between a confetti storm and a cursor-tracking fizz of multi-colored bubbles. CSS Grid and Custom Shapes On CSS-Tricks, Temani Afif shows you how to create intriguing layouts with complex shapes with CSS Grid. Get into hexagons, rhombuses, and triangles in part one, then dig into part two for the zig-zags. LaserScan prisoner849 brings a retro vibe to the browser with this sweeping "laser scan" reminiscent of TRON and old school science class films.

The Typographic Details Behind Typewolf’s Favorite Sites of May 2018

This is the 52nd 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 April here. Jonesy The 1970s-evoking Windsor typeface continues to be popular here on Typewolf. It gives off a warm, vintage aesthetic which feels like a perfect fit for a brand selling high-waisted underwear. The serif Plantin is used for the text set at smaller sizes where Windsor might be a little too ornate for optimal legibility. Calibre, a geometric sans from Klim, is paired with the two serifs, making the overall design feel a touch more modern and contemporary. Cup of Couple The Cup of Couple site uses four type families, but it doesn’t feel like too many as each typeface is used in a consistent way for a specific purpose. Displace, a high-contrast calligraphic sans, is used for the page headers. The article headlines use Perpetua Titling, a display cut of Perpetua that is available in uppercase only. Franklin Gothic is used for navigation and the body text is set in Garamond. Everything except the body copy is set entirely in uppercase which creates even more contrast between the text areas. Swallowtail Tea Louize Display is an inscriptional typeface from French foundry 205TF that is somewhat similar in style to the ultra trendy Canela from Commercial Type. It isn’t used nearly as much though, so it feels a bit more fresh and distinctive. The monospaced cut of GT Pressura is an unusual pairing choice as it feels more techie and industrial compared to the classical look of Louize, but I think it still works nicely. Texas Monthly Condensed typefaces make for excellent headline choices as they allow for a larger font size while fitting more words per line compared to a standard-width face. The end result is a more efficient use of space with less awkward line breaks. The Texas Monthly site uses Grifinito, a compressed member of R-Typography’s Grifo family, for the main titles with the regular width used for the smaller headers. Hoefler & Co.’s Ringside and Chronicle Text round out the design, used as workhorse faces for navigation and body text. 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.

The Typographic Details Behind Typewolf’s Favorite Sites of December 2017

This is the 47th 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 November here. Designer That Reads This site is set entirely in Romana with everything center-aligned all the way down the page. The designer implements a super simple trick here that has a huge impact on the site’s typography—rather than letting text flow freely, manual line breaks () are inserted to break up the lines into readable chunks. This prevents awkward line wrapping and words floating by themselves. I definitely wouldn’t recommend using this technique on paragraphs, however, for large display type like this (and especially for centered text), it can be a nice touch that improves the flow of reading. Civilization Larish Neue is a chunky serif with thick stems and heavy, bracketed serifs. Its quirky letter shapes pair nicely with the eccentric forms of Gill Sans, especially with the letter a which feels top-heavy in both typefaces. The quotes here are set well with proper quotation marks and em dashes, although the uppercase text below the quote attribution may benefit from a slight amount of added letterspacing. Pre_Invent Tacite is a distinctive typeface with long, spindly serifs that give off an evil sort of vibe. All of the type here is set tightly, with the paragraphs using a line height of just 1.2, which is much lower than the oft-recommended value of 1.5. This tightness gives the layout an uneasy, claustrophobic feeling which may very well be what the designers are intending to evoke. Holiday Correspondence Aid A wide cut of the sans-serif Druk is paired here with an italic cut of the Old Style serif Quarto. Mixing typefaces in mid-sentence is a challenge, but the designers here did an admirable job. The x-height of Quarto matches up perfectly to the cap height of Druk, which creates an even texture to the paragraph. 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.

The Typographic Details Behind Typewolf’s Favorite Sites of January 2018

This is the 48th 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 December here. Penguin Modern The Penguin Modern book covers are probably the single best use I’ve ever seen of ITC Avant Garde Gothic’s extensive ligatures. The typesetting really shows off some of the more exuberant letter combinations and everything lines up in such a typographically pleasing way. This level of exact typographic control would be difficult to accomplish using pure CSS, so it looks like this was integrated using SVG images rather than text. Post Typography A design studio with typography in their name better have type that is on point and these guys certainly do. I really dig the typographic grid on the about page—the body text is offset from the headline with an indent, which helps keep the line length readable while also giving the layout a more dynamic feel. The headlines and body copy are set in Okay Type’s serif Harriet, with prominent use of the beautiful italic cut, while the subheaders are set with Process Type’s sans-serif Colfax in letterspaced all-caps. This type system is used consistently throughout the site, giving the design a cohesive feel. Grayes Canela and GT America are probably the two hottest typefaces from 2017, but their use here comes across as classy and professional rather than trendy. Canela feels inherently fashionable, especially in the lighter weights, with its subtle, delicately flared serifs. The screenshot above shows an awkward line break with a single word floating by itself that could have been prevented with a simple trick: manually add a tag between a and point. This would balance out the two lines of text and would read much better. With dynamic content spit out of a CMS this isn’t always feasible to implement, but it could be worth training writers on the client-side to watch out for weird line wraps like this. Bond This is the first use of Basic Sans I’ve featured on Typewolf, which is surprising as it’s a trendy-looking grotesque that is available to anyone with a Typekit plan. It’s paired here with Schick Toikka’s calligraphic sans-serif Chap. Combining two sans-serifs isn’t usually recommended, but these two are different enough from each other to create sufficient contrast. The layout is built entirely around Lisa Tegtmeier’s gorgeous illustrations, with the color of the type matching up perfectly with the bold colors from the artwork. 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.