Designing a newsletter can be tough. Not only do you need knowledge and understanding of how users/readers expect content to be delivered to them, you also have the headache of making the layout compatible with all of the many emails clients.

It helps if you study the layouts of existing newsletters to get an understanding of how the code and layouts work. That’s why I’ve curated 10 of the best newsletter designs that are fully responsive and up-to-date with modern coding standards.

If you’re planning to launch your own newsletter, these designs should be great inspiration for you.

SeatGeek

With a single column design and large typography, I love the way the SeatGeek email uses icons and simple graphics to grab your attention.

The large typography also takes up a high percentage of the page making it very easy to read. Shorter paragraphs, larger text, and a clear CTA at the bottom of the page all increase usability.

For a simple verification email this does the job well.

PlayStation

If you’re looking for a more complex design, Sony’s Battlefield 1 release offers some nice ideas.

Most of this newsletter relies on images to replicate the official Sony PlayStation website. This is great for building brand awareness and trust, but this also feels a bit light on information since it doesn’t tell the reader what to do or what the message means.

Still, it has a really smooth design and it shows how much quality graphics play a role in email layouts.

Social Print Studio

Email verification messages don’t need to be complex. But you should feel okay adding some details about the website/list the user just signed up to.

This email by Social Print Studio is primarily a verification message, but it also includes points about the site and what new users can expect from using it. This even includes a ‘shop’ CTA leading directly to the site where readers can order prints of their Instagram photos.

An excellent example of coaxing users back onto the site while also increasing signup verifications.

Archant

Here’s a real interesting email newsletter with an update preferences message from Archant (online publisher).

The goal is to connect with users who may have subscription settings that are either too strict (blocking all contact) or too lenient (receiving too many emails). It’s a cool way to connect with existing subscribers and ideally get them signed up to more lists.

WistiaFest 2017

Event newsletters like this one are usually pretty simple. They only have a few goals: share information about the event and encourage subscribers to buy their ticket early.

This newsletter has all of that in spades with CTAs to check out the event’s speakers and to sign up for a ticket. The layout also follows a single one-column design which usually works best for emails.

Lists for events also don’t go out regularly, so it’s crucial to include the logo near the very top of the page. This way subscribers know exactly what the message is about since their last message was probably 12 months before.

Sprout Social Webinar

The Sprout Social newsletters are fantastically well-designed and their codebase is phenomenal. Take a look at this simple design promoting an upcoming webinar.

It’s pretty short and uses graphs to draw attention. It also uses bulleted lists with icons to help sell the webinar as bullet points are much easier to read than paragraphs.

Plus, the big green CTA is well above the fold and pushes their webinar schedule. You can replace many of these elements with your own and see fantastic results.

Sprout Social IG Scheduling

Another example from Sprout Social is this promo email covering their Instagram scheduling feature.

One difference with this layout is the alternating two-column features grid. It uses square icons placed alongside square info-boxes with clear visuals. A great concept and it blends in nicely with the overall design.

If you’re looking for a basic template to study and possibly recreate you should check out the Sprout Social emails. Considering all factors like visuals, copy, and page structure, Sprout Social do email marketing right

Moo Design

From business cards to custom stickers, this promo newsletter really sells the product well. You can learn a lot by studying how other websites promote their content, and this Moo newsletter is a terrific example.

Product photos show how these items could be used and you can also learn a lot from the email’s style and flair.

It feels colorful and fun with a light sense of humor. This tells readers how these products feel and why you might want to visit Moo.

The newsletter uses a two-column product feature with blocks of images and text. An excellent way to grab attention and increase conversions.

Under Armor

The Under Armor brand is very popular in the fitness community. They have tons of great products and their newsletter design sells their items well.

Notice how many unique photographs are used in this design. With some products, it just makes sense to add photos more than text. Block elements with photos and CTAs work well for Under Armor’s newsletter and this is usually a good strategy for all physical goods.

Runtastic

Product feature lists are also great for promoting mobile apps and digital software. This Runtastic email relies on app screenshots and small flat-styled icons to grab your attention.

The goal of this newsletter is to encourage clickthroughs and get new users digging deeper into features. It’s an entire suite of programs and tracking tools so it can take time to learn everything.

But with a great follow-up email you can provide just enough info to get people curious and wanting to learn more.

These are just some of the best newsletter designs I’ve found but there are dozens more out there. And regardless of what you’re promoting or why you need a newsletter, these designs will help you plan usable layouts with clean source code to boot.

Source File:

Dark patterns describe web design features that trick users into taking actions. They are the gimmicks that trick users into opting into services, annoy them with pop-ups, and shame users into taking action.

Dark patterns are completely unethical, but some companies continue to use them to manipulate user bases. Any business interested in long term sustainability and successful reputation management will run hard and fast away from any company or designer that encourages tricky design elements.

The Most Commonly Used Dark Patterns

The definition of a dark pattern boils the concept down into a neat package. In practice, the imagination is the only thing limiting the number of dark pattern tactics used. Most safe and well-known websites do not use dark patterns. They may display in-your-face marketing messages and advertisements, but they will not try to unethically deceive you into taking action.

Dark patterns are only those checkboxes, phrases, and iframes that will make average users take an unintended action without realizing it. Some of the most common dark patterns used include:

1. Add-ons automatically placed into an eCommerce shopping cart

Amazon may recommend a complementary product to add to your shopping cart upon checkout, but the company will never automatically fill your cart without your permission. Other, less reputable, organizations may try to add an unobtrusive item to your cart hoping that you won’t notice.

Some customers who don’t scrutinize a shopping cart before placing an order may never realize the item was not part of the original purchase. Others may not pursue action because the cost of returning the item may outweigh the convenience of taking the loss.

Automatically adding an item to your cart.

2. Convoluted opt-in/opt-out processes

Some forms, purchases, and other actions will automatically sign users up for continued messaging. The opt-out process, however, is where companies take shady steps to keep subscribers. Some companies will force users to check individual boxes for specific types of content while others will add in filler language to keep the process even more confusing.

While all businesses are subject to the CAN-SPAM act and must legally unsubscribe users who request an opt-out, many let these unsubscribe and opt-out requests sit unaddressed in an email folder that nobody checks. In other words, a user could do everything right to opt-out of messaging and still receive unwanted content.

3. Confusing Wording

App and website users are so comfortable with certain drop down menus and generic forms they often skim through instead of thoroughly reading them. Some companies try to take advantage of the average user’s reading patterns. They will use common cues and patterns used online and interject something that could trick you into opting into an added service or making a purchase.

Wily wordsmiths may even use careful phrasing to make the customer feel glad he or she took an unwanted action. Unclear, confusing, and deliberately deceptive wording can trick users into many different types of online interactions.

4. Forced continuity

Free trials aren’t usually as free as they first appear. While some sites only want your name and email, others need a card on file to start your trial. If you do not take an action to cancel the service in a predetermined period, the company will automatically bill you.

Dark pattern enthusiasts can force users into continuity in a couple of unethical ways. They may make the cancellation process difficult and confusing or fail to remind the user of the free trial expiration date.

5. Hidden gated quizzes and questionnaires

While one of the least-offensive types of dark patterns, hidden gated materials can waste minutes or hours of a user’s time. A website may offer a “free” questionnaire or quiz and lead users right into the questions on the landing page.

When the user hits “submit” at the end of the series, the site asks the user to input information to see results. Some may only require a name and email, but others will charge users a fee to see the results of a career, personality, or health quiz.

6. Misdirection

Commonly used on mobile apps, misdirection takes advantage of a user’s tendency to associate certain visual cues with safe actions. For instance, a green or blue button typically initiates gameplay on gaming apps.

Advertisers may place popups within the game that look similar to the gameplay start page to encourage users to hit the green button, which redirects the user to an advertiser’s content. Other advertisers will make the “X” so small or translucent that many users find themselves sitting through the commercial/cartoon/ad every time it appears.

Even Microsoft, a generally reputable company, was guilty of a dark pattern during the Windows 10 update. In creating a red update initiation button, the company tricked many people into downloading the unwanted update instead of closing the window.

These examples only represent a few of the overarching concepts behind dark patterns. New examples frequently arise, making the digital space a little more perilous for a trusting user.

The Case for Using Dark Patterns

While most digital designers see a clear line between ethical and unethical design patterns, others see the internet as a “users beware” space. Proponents of dark patterns do not feel obligated to hand-hold end users and will do what they think best to meet digital benchmarks.

For a time, dark patterns can and will work. People are accustomed to interacting with digital content in a specific way. Most users will fall for subtle changes in forms, and many will write off bad purchasing experiences without thinking twice. The problem with using dark patterns is that they do take advantage of a user’s trust and they are unsustainable.

The internet can bolster and tear down business reputations. As soon as enough customers experience something that doesn’t seem right, the comments and complaints on consumer advocacy sites, social media, and review sites start will begin to eat away at a brand’s reputation. Nobody wants to do business with a brand known for a poor user experience – intentional or not.

Today, the phrase “dark patterns” is no longer some abstract and unheard of term. Thanks to the advocacy of Harry Brignull – a UX designer, consultant, and the founder of darkpatterns.org – more people know about the subtle tricks and sly deceptions businesses use to meet their own ends.

Avoiding Dark Patterns for Customer Acquisition and Retention

Businesses interested in fast growth and sustainable business strategies can reach all of their goals without resorting to dark patterns. If businesses can balance metrics with authenticity and a sense of duty to the user, they can focus on value-added designs and creating a pleasurable user experience. Consider these tips to honestly acquire and keep customers:

1. Keep language clear and concise. Digital users want answers to their most pressing questions. They want to know what you offer, why they need it, and why they should choose you. If you’re not making a clear proposition or offering value-based content, you could walk the line between shady design techniques and dark patterns. Intention largely separates poor design from unethical practices, but businesses should strive to avoid both at all costs.
2. Use psychology, but don’t abuse it. People do follow patterns when they interact with content online. Designers can ethically use color, content organization, and navigational cues to organically encourage users to take certain action. When they use standardized practices and change up the routine, however, they can force users to take actions the user never wanted and cause frustration, anger, and resentment – none of which encourage repeat business.
3. Follow the golden rule. Every designer and company that wants honest business and satisfied customers should follow the golden rule: to do for others what you would have them do for you. If you would feel slighted or misdirected, find an alternative approach. Every business can ethically compete for the market share and doing so will pay off.

From the landing page CTA to the details outlined in the terms and conditions, every word and prompt is an opportunity to serve your customers rather than take advantage of them.

In a time when search engines development places an increased duty of care on businesses, site owners may want to think twice about the content and interface design used. Dark pattern tactics may offer a short-term metrics boost, but they may not serve a brand well in the long run.

Source File:

After the shift away from skeuomorphism to flat design a few years ago, elements such as drop shadows were all-of-a-sudden deemed obsolete.

As flat design slowly evolved back into something less severe, it has begun to implement aspects from formerly popular design trends. Shadows have been the obvious development here as they contrast beautifully with minimal design styles and flat design elements.

In this article, we are going to review a selection of the very finest current implementations of shadows in web designs.

Julian Buehler

Bordering on brutalism, Julian Buehler’s website uses clever 3D shapes with shadows, providing a unique depth effect.

Combined with old school reflections, the shadows give the object a realistic feel and certainly succeed in creating something unique and out of the ordinary.

Ustwo

A more subtle implementation, Ustwo uses overlapping text in tandem with shadows to create a layered effect. This results in adding some separation as well as perspective and visual interest.

ATOLYE15

ATOLYE15 cleverly uses shadows against a white backdrop to create the illusion of transparency in the hero section. This minimal implementation is subtle yet effective, and a great example of how shadows can enhance a website’s design.

Better

Better is unique in its design as the shadows are connected to the objects, creating the illusion of there being a table on which the items are being placed.

Plasso

Plasso is an all around excellent website design. The shadows are implemented sparingly but in perfect fashion. They grace only the primary CTA buttons and content cards, creating a very minimal but stand-out design which highlights and brings attention to all the essential areas.

Stripe Sigma

Stripe is renowned for its excellent design direction. As it continues to roll out more products and features, the continuation of this direction includes an abundance of impressive shadows.

Smallchat

Smallchat includes shadows in their very minimal yet colorful design. They add to the contrast behind product imagery and help differentiate it from the written content. All-the-while, it adds an attractive layer to the design and rounds off an excellent landing page.

Scaphold

Scaphold, like Better above, uses shadows to produce a table-like effect underneath the product illustrations. In this example, it uses a variety of shadow styles including very harsh edges as well as softer, heightened shadows which produce the illusion of elements floating in mid-air.

Have you noticed any examples of shadows in web design recently? Share them with us below!

Source File: