Webdesigner Depot

syndicated content powered by FeedBurner

FeedBurner makes it easy to receive content updates in My Yahoo!, Newsgator, Bloglines, and other news readers.

Learn more about syndication and FeedBurner...

Current Feed Content

3 Smart Ways to Engage Users with Animation

Posted:Tue, 17 Oct 2017 10:45:32 +0000

Animation was once thought of as just decoration. But as technology advances and internet connections accelerate, designers are embracing the practical benefits. In this article, we’ll focus on one particular benefits of animation—marketing animation or animations that sell. Despite the fact that such animation isn’t intended to improve usability, it can impress the user, and give them some context for the subject.

Designers can utilize this type of animation in following ways:

1. Demonstrate Craftsmanship

People do notice the details. Attention to animation can make the experience feel crafted. When apps/sites create a visually stimulating experience it brings a level of excitement to the user.

Load Screen Animation

Loading animation is one of the oldest uses of animation which is supposed to distract the user from loading times. But even this type of animation can demonstrate that your product is great. For example, when a user launches Uber app they immediately notice an animated drop that is turning into the pin on a map. This animation isn’t purely delightful, it also influences a user’s eyes and control where users should focus. This quick opening moment makes a clean first impression and entices the user to interact further.

Signature Animation

Some companies go even further and use animation as a distinctive feature of the brand. MailChimp is one of the companies that use animation in such way. The company fulfils a fairly technical niche, creating and sending email campaign, but using animation it transforms this dry task into an inviting experience. The service adds small and delightful surprises throughout the user journey and makes sending e-mails a lot more fun.

2. Better Deliver a Key Message

Animated effects help get your message across more clearly. Using animation you can take complex ideas or processes and make them easily digestible in a fun and graphic way.

Interactive Animation

Animation is able to highlight a product’s strengths. Bellroy is a company that sells wallets. They say that strive to create a slim design to reduce pocket bulk. In the example below, you can see how animation used in Bellroy clearly indicates a product’s behaviour and demonstrates its benefits.

Hover Animation

Hover animations are very practical for delivering additional information about your products. This type of animation makes the revelation less jarring and provides an opportunity to add some delightful character to your site.

Storytelling Animation

The storytelling potential of animations can add an emotional connection to an otherwise dull interface. Some common examples of story-telling are pages that will show off a new product by “assembling” it before your eyes. For example, the page dedicated to the Mac Pro on Apple’s website shows you exactly what’s under the hood as you scroll down:

Story-telling animations can also breathe life and fun into the long scroll. Instead of the parallax animations which is very common, opt for something subtler. Consider breaking up your site into scrollable “chunks.” Within each chunk, you can introduce the content through animations. Animations in the example below from Le Mugs website make the content “come alive” by animating simple art illustrations.

3. Engage users to take further steps

The use of animation will influence the eyes of your users, and it can control where they focus their attention on your page. A human eye is naturally attracted to motion and this makes animation the perfect tool for controlling your visual hierarchy.

Direct User Attention

Moving elements are a powerful tool to attract users’ attention. If the goal is to draw the user’s attention to a single element out of several or to alert the user to updated information then an animation will do the trick. As long as there are not many other competing elements on the screen, even the slightest bit of motion will grab attention. Seattle’s Space Needle site takes advantage of this subtlety. The site draws attention to the instructions with a minor—but effective—animation in the up arrows.

Encourage User Action

Fine animation and interactive effects encourage users to click. Look at the design used for the “Chekhov is Alive” site below. The design begs you to click to find your character.

Things To Consider

Animation is a double-edged sword. Incorrectly used, it can ruin user experience.

Avoid animation which distracts the user from their task. In the world of online sales and marketing, distraction can be death.

A very important aspect to consider when designing an animation is the frequency with which it would likely occur within a single user session. The animation might be nice the first time a user sees it, but after 100th attempt, it can get annoying, especially when it has no purpose other than being “fun”.

There are plenty of UI elements you could animate in both fun and down-to-business way. But remember one thing, if you want to create marketing animation you should set a goal of creating an animation which has both style and purpose.

170+ Photo-Realistic T-Shirt Mockups – only $17!

Source
What’s New for Designers, October 2017

Posted:Mon, 16 Oct 2017 10:45:56 +0000

This month’s collection is packed with tools that span the scope of website design projects. From icon packs to seasonal vectors to a few cool typefaces and some code snippets to make your life easier, we think you’ll find at least one element in this roundup that you use right away.

If we’ve missed something that you think should have been on the list, let us know in the comments. And if you know of a new app or resource that should be featured next month, tweet it to @carriecousins to be considered!

Dropbox Design

Dropbox dropped a new design outline and branding this month and it is bold, colorful and packed with trendy concepts. What does this mean for you? When big brands launch new design patterns, they often end up as trends. It will be interesting to see if the bold, mod-style design concept starts trending among more websites.

Khroma

Khroma, which is still in beta, calls itself an “AI color tool for designers.” You start with a set of 50 colors that you pick and train an algorithm to generate colors you like and block ones that you don’t. The algorithm has learned from some of the most popular color palettes on the internet to produce great combinations; you can browse your colors by swatch, gradient, as a palette or in images or type.

Data Viz Project

How do you best visualize data? That’s a big design question. This project showcases plenty of ways to create charts and graphs with information for an easy to understand display. Click on any visualization type for information about how it works, function, shape and examples of live data.

Devices.css

Looking for pure CSS versions of the latest devices? Grab them from Devices.css, including the iPhone X and 8, Google Pixel, Galaxy S8, tablets and more.

URL to PDF

URL to PDF is a microservice for rendering receipts, invoices or any other web content into a PDF. The API converts HTML+CSS content to a PDF with headless Chrome using Puppeteer.

Bubbly Backgrounds

Create a cool animated background image with moving bubbles. The tiny bit of code is less than 1kB and always fills the width and height of the viewport, so it is a plug and play solution for a number of projects. The tool allows you to create a “bubbly” on your canvas as well for a custom look.

Draggable

Shopify has a cool little tool, Draggable, that is a modular drag and drop library. You can move elements, sort and watch everything snap into place with fast and responsive sorting. It works with click, touch, and force touch right out of the box. Plus, it is extendable – write a custom module for additional functionality and submit it to the Github repo for review.

Modulator

The spacing tool can help you make sense of your grid and design system. There are various inputs for units, spaces and widths, plus a type scale.

Nested Symbols and Auto-Updating Styleguides for Sketch

Sketch users will love this “smart” template that uses nested symbols. The template is a starting point so you don’t replicate some initial design phases with every new project and can dive straight into wireframing. The package includes buttons, inputs, dropdowns, notifications, paginations, tooltips, calendar, etc. all as a Sketch template. Just load and start dragging and dropping elements.

Flow.ai

Flow.ai is a tool to create conversations with chatbots using artificial intelligence. The drag and drop interface provides an easy way to create chatbots with advanced functionality.

Untitled Slider

Nathan Taylor’s Untitled Slider puts a fun new twist on the same old slider animation. The rotating, color changing slider is dramatic, interesting and attention-grabbing.

Sticky Sidebar

Sticky Sidebar is a pure JavaScript plugin for making smart and high-performance sidebars that’s integrated with a resize sensor to automatically determine dimensions when the size of the container is changed.

Wired Dots

Wired Dots is a collection of free Bootstrap themes, elements and components. The new site will keep adding freebies.

Clockify

Clockify is a new (and free) time-tracking tool for agencies and freelancers. You can keep up with projects and hours worked for yourself or a team. Track by project or see how productive you are. Manual and automatic time-tracking options are included.

Moocha

Do you feel like it takes too long to find the right online course? Moocha searches all the online course sites so all you have to do is enter a topic – UX design, for example – and you can see everything out there from places such as edX, Coursera, Udacity and more.

Halloween Vector Toolkit

It’s a month of all things spooky and this little vector kit is packed with Halloween themed elements for websites and print designs. (They might be a little more whimsical than creepy.)

Happtizens Character Creator Set

This fun set of cute characters provides a starting point for creating vector creatures and personas. Each character almost looks like a finger puppet in a minimalistic style.

iOS 11 Glyphs

This big set of open source glyphs is in the new iOS 11 style with the new filled icon design. (Those old outline icons aren’t being used in the tab bar anymore.) The pack includes 200 icons that are consistent with Apple Guidelines.

Jam Icons

Jam Icons is a pack of 422 pixel-perfect line icons. There’s everything from web-based icons to directional to player icons to text icons and social media icons. You can use the icon set as a font with a CSS stylesheet or as independent SVG files. (And they are all free.)

TypeStrap

TypeStrap is a CSS-based type kit that uses a modular scale to help users control typography. It is built on Bootstrap 4.

Future Fonts

A group of type designers is working on a project that they are calling a “platform for designers who use type and those that create it.” Future Fonts will allow users to license typefaces while they are still in progress and provide input to help make them better and more useful. It’s like a beta site for type.

Archia

Archia is a simple typeface with mostly uniform strokes and tiny serifs. It includes six styles – only regular is part of the free download – and could work for display or smaller type applications. It supports multiple languages and comes with tabular figures (a major bonus if you are creating tables, pricing lists or financial reports).

Jullian Script

Jullian is a fun script that has a quirky and modern flair. The strokes have a watercolor feel and the typeface comes with a full upper- and lowercase character set, punctuation and numerals.

Mouron

Mouron is a beautiful, modern sans serif typeface in a full uppercase style. It would make a great poster or display typeface and includes numbers and a set of fun alternate characters.

170+ Photo-Realistic T-Shirt Mockups – only $17!

Source
Popular Design News of the Week: October 9, 2017 – October 15, 2017

Posted:Sun, 15 Oct 2017 10:33:22 +0000

Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers.

The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week.

Note that this is only a very small selection of the links that were posted, so don’t miss out and subscribe to our newsletter and follow the site daily for all the news.

Gutenberg

Site Design: Haruki Murakami

North Korea Graphic Design

Designing Dashboards

The 8 Biggest Typography Mistakes Designers Make

Liquid Distortion Effects

The Beauty of Go

Creating a Design System: The Step-by-Step Guide

Anti-invitations for Cancelled Weddings

Mailor – Shared Inbox, Team Portal and Smart Notifications

5 Things I Learned from a 100 Junior UX Interviews

Adjusting Design for iPhone X

Clara: Virtual Assistant

5 Essential Types of User Experience Testing Tools

Splitwise: A UX Case Study

Authory – The Perfect Toolkit for Every Journalist

Apple Announces Launch of Gender Neutral Emojis

Gestalt Theory for UX Design: Principle of Proximity.

Freelance Achievement Stickers

Basil Chat – Design Feedback Via Chat

The Ultimate Guide to Becoming a Designer Without Going to Design School

In Defense of Papyrus: Your Guide for When to Use Despised Fonts

What to Include in your Freelance Portfolio (except for the Obvious)

WeTransfer’s Plan to Disrupt the Creative Process

Google is Really Good at Design

Want more? No problem! Keep track of top design news from around the web with Webdesigner News.

170+ Photo-Realistic T-Shirt Mockups – only $17!

Source
Comics of the Week #411

Posted:Sat, 14 Oct 2017 09:21:22 +0000

Every week we feature a set of comics created exclusively for WDD.

The content revolves around web design, blogging and funny situations that we encounter in our daily lives as designers.

These great cartoons are created by Jerry King, an award-winning cartoonist who’s one of the most published, prolific and versatile cartoonists in the world today.

So for a few moments, take a break from your daily routine, have a laugh and enjoy these funny cartoons.

Feel free to leave your comments and suggestions below as well as any related stories of your own…

The deceptive Skyper

iPhone concert

Detail oriented

Can you relate to these situations? Please share your funny stories and comments below…

170+ Photo-Realistic T-Shirt Mockups – only $17!

Source
12 Best Web Design Podcasts

Posted:Fri, 13 Oct 2017 10:45:18 +0000

The best way to keep up with industry news is through podcasts. So much happens on a monthly basis and keeping a list of the best podcasts can help you stay on top of major industry changes.

We’ve curated some of our top picks here with a nice variety of topics. These podcasts offer a mix between frontend web development topics along with more UI/UX design topics for visual designers.

1. Developer Tea

If you’re big into development then you’ll want to bookmark Developer Tea. Episodes can vary in length from 15-20 minutes up to an hour but the content is always superb.

New episodes come out every couple days so it’s one of the most up-to-date podcasts you’ll find. Developer Tea follows ideas in web development beyond just coding such as web optimization and security.

But even newbie developers can find a lot of great tips in here with advice for coding bootcamps and handy learning resources. Well worth checking out especially due to the volume of content.

2. Front End Happy Hour

The world of frontend development is always expanding with new libraries and hot new tools. Front End Happy Hour is a weekly podcast updating listeners on the happenings in the web dev world.

Anyone who builds websites should really study frontend development first. It’s the gateway to building great websites and it’s much simpler than backend development which has so many different languages to pick from.

And if you’re just getting into frontend dev work then Front End Happy Hour is sure to entertain.

This podcast is very laid-back so it feels like a friendly conversation rather than business talk. Certainly a more appealing style for devs who enjoy ramblings and opinions along with dev convos.

3. ShopTalk

The ShopTalk Show is a wildly popular podcast hosted by web legends Dave Rupert and Chris Coyier. It’s also a weekly podcast with some really interesting topics that delve pretty deep into modern techniques.

Chris actually founded the well-known CSS Tricks website and he also helped create the online IDE CodePen. You’re in good hands with these two hosts as they wax on about browser quirks, new W3C changes, and the future of the web.

I recommend this for pretty much anyone who runs or manages websites.

It does have a technical barrier to entry so if you aren’t a developer many of these episodes will go right over your head. But the topics are super insightful so you’re bound to learn something along the way.

4. Style Guides Podcast

Corporate brands and company websites all need style guides. These are essential for keeping the same look and feel over many pages and building a consistent design across many mediums (ads, landing pages, mobile apps).

The Style Guides Podcast is actually hosted on the awesome StyleGuides.io website. This site curates a bunch of style guides along with design assets, tips, tutorials, and books covering the process of designing great style guides.

Naturally the podcast is just one more amazing resource for anyone who wants to learn about this process.

Currently in season 2 this podcast offers close to 20 episodes (and counting) with a bunch of talented designers. It’s a niche resource but incredibly valuable for anyone studying style guide design work.

5. Responsive Web Design Podcast

Here’s another niche podcast focusing on responsive web design and how it’s changing each year.

If you do any frontend dev work I highly recommend the Responsive Web Design Podcast. It’s hosted by two industry pros Karen McGrane and Ethan Marcotte, both of whom have extensive knowledge in this area.

Ethan literally wrote the book on responsive web design so you know this is a podcast you can trust. Some episodes talk about trends in the industry, others bring on guests like this episode with the Salesforce team.

Either way this is the de-facto resource for RWD and modern web design in general. It’s great for designers but especially valuable for developers.

6. CodeNewbie

Looking to get into the web dev scene but unsure of where to start? There are tons of free resources to help you learn but it also helps listening to others’ paths breaking into this space.

CodeNewbie is a podcast dedicated to interviewing coders and talking about their journey into the field. It updates roughly once a week with interviews from programmers, frontend developers, and other tech-oriented folks who’ve made coding a career.

Some episodes offer more advice for beginners while others talk about specific subjects like website load time and web accessibility. Each episode is a goldmine for newbies just getting into web development.

7. Motion And Meaning

Val Head and Cennydd Bowles host the fast-growing web UX animation podcast Motion And Meaning.

Both Val and Cennydd have a long track record of incredible design work and they’re experts on the topics of animation, microinteractions, and how these tie into the user experience.

Each episode usually has a special guest who joins to discuss a specific topic in detail. This topic can be general motion graphics or specific techniques like mobile UX prototyping.

If you have any interest in motion design or animation for the web then you’ll find a lot of value in this podcast.

8. CTRL+Click Cast

For something a little more general check out the CTRL+Click Cast. Lea Alcantara and Emily Lewis host each episode with special guests and tips for everything web-related.

Most episodes follow trends in web development with topics on workflow tools like npm and tech stacks. But you can find plenty of episodes on more general web concepts like the mobile web and more design-oriented trends.

This podcast dates back to 2009 so it’s been online for almost a decade. It’s gotta be one of the oldest web-related podcasts and each new episodes delivers even more value.

9. Let’s Make Mistakes

Let’s Make Mistakes is a general design podcast covering ideas beyond just the web. Although it does focus a lot on web design it’s also a podcast for anyone who loves digital design work.

This is another very casual show and it’s not 100% business all the time. You’ll certainly learn a lot but it’s also a podcast for listening to personalities and soaking up design culture.

Totally worth checking out if you’re into digital design or looking to get into it.

10. Non Breaking Space Show

The Non Breaking Space Show brings on a new guest every week related to web design.

It’s been running since 2012 so there’s a long list of episodes to go through. But since the web advances so fast it’s best to stick with episodes from the past 1-2 years (unless you find a guest you love!)

Most topics revolve around web development which can include SVG work, accessibility, APIs, and JavaScript advancements. If you’re into coding then you’ll dig these incredible guests but this may not be as useful to non-techie listeners.

11. Design Life

On the flip side Design Life is very much a designer’s podcast. It’s hosted by two digital designers Charli Marie and Femke who share their thoughts on design industry news, landing jobs, creating portfolios and other related tips.

This is a true design podcast so it’s absolutely stellar for anyone who loves the design side of things.

New episodes come out on a weekly basis and they date back to 2016 so there’s a sizable archive to go through.

12. JavaScript Jabber

JavaScript Jabber is the best resource for picking up tips on JS coding and related libraries.

Each episode brings on a new guest and topics range from Node to Vue.js and even lesser-known JS APIs.

In case you couldn’t tell by the title, this is pretty much 100% JavaScript focused. You should already have experience with JavaScript before listening to these episodes or you’ll wind up lost and confused.

But for developers who can’t get enough JS highlights the JavaScript Jabber podcast is always a great listen. They even have a suggestion page if you wanna toss out topic ideas for future episodes.

170+ Photo-Realistic T-Shirt Mockups – only $17!

Source
Ultimate UX Design Guide to SaaS On-Boarding, Part 3: Drip Campaigns

Posted:Thu, 12 Oct 2017 10:45:45 +0000
SaaS customer onboarding is the process that users have to experience while initiating their journey as a customer on a company’s software application. Customer onboarding comes from the experience that employees previously had to undergo while joining a firm.

The onboarding process sets the tone for a good user experience. Long story short, special emphasis should be given to make the on-boarding process as flawless as possible.

The SaaS customer on-boarding process is based on 6 comprehensive aspects:
1. Sign up form
2. Welcome email
3. Drip campaigns
4. First login & product tutorial
5. Data import & notifications
6. Check up calls & swag
All the aspects of the process play an equally important part in forming a desirable reputation for the brand in the eyes of the customers during the onboarding process. First, we covered the Sign up form. Last time we discussed the second step to the onboarding process, the Welcome Email. Today we will be focusing on Educational Emails & Drip Campaigns.

The purpose of drip campaigns is to retain customer engagement after that much sought after signup. The nature of drip campaigns is educational for the greater part, as they aim to make the customer aware of the features of your product.

Rules of Thumb for Drip Campaigns

Sending educational emails is called engaging in a drip campaign, owing to the frequency with which these emails are sent. The content of the emails within drip campaigns is small and the frequency is consistent, since the idea is to get your customers to gradually use your product to its fullest extent.
- Introducing a single concept / feature is enough for one email.
- The idea is to send the emails consistently. Getting that balance will result in successfully creating customer expectation.
- The objective of drip campaigns is to successfully tempt the customer to try out the feature that you’re talking about in your email. The more of the app they use, the more engaged they will be. So giving a detailed explanation of the feature is not going to work.
What are Drip Email Campaigns?

Drip email campaigns comprise a collection of emails that are automatically sent, either in response to a specific user action, or after a specified period of time. These campaigns are one of the main channels of communication / nurturing for your customers.

There are many kinds of drip email campaigns. The most immediate example is the welcome drip email campaign. This is the set of mails that goes to customers over the span of one or two weeks, who have signed up for a free trial. This is one of the initial interactions between a customer and your company and hence, is extremely critical.

it’s vital to maintain a balance and not bombard the customer with an excess of emails.

Transaction-based drip email campaigns comprise emails that produce an automated action. The objective usually is to authenticate an identity or transaction. Examples of transaction based drip emails are: forgotten passwords, confirmations of purchase, verification of email address, etc.

The objective of any campaign needs to be clear. A welcome email campaign is designed such that the customer is sent approximately four to five emails in a span of few weeks. The objective is to ensure that the customer finishes the signup process and starts to use your app.

Like I said before, it’s vital to maintain a balance and not bombard the customer with an excess of emails.

Main Types of Drip Email Campaigns

Now let’s look at how drip email campaigns are usually designed. The categories listed are not exhaustive at all, but they give an overview of how most drip campaigns work:

Welcome Campaign

Objective – Completing signup and guiding the customer towards first time use of your app.

Email 1 – Welcome Email

Subject: YAY! You’re part of the family < User Name >!

Hey < User Name>,

Thanks for signing up with < Your App Name >! We’re really excited to have you onboard with us. You’re just one step away from using < Your App Name >, so click here < provide link > and we’ll quickly set you up.

If you need any help, click here for our help guides or you can even have a Skype session with me, if you want to have a detailed discussion, I would love to hear from you. My ID is < Skype ID >

Thanks and see you soon!
< Your signature >

Email 2 – Use of 1st Valuable Feature

Subject: < User Name > check this out!

Hey < User Name >,

Did you know that you can create < application specific thing > using the < application specific feature >? See it in action in this quick tutorial < provide link > we’ve made for you.
You can start using this by clicking here < provide link >.

Best
< Your signature >

Email 3 – Tips

Subject: < User Name >, what you’ve seen is just the TIP of the iceberg!

Hey < User Name >,

We’ve compiled a few tips that we email our early users about on how to start using < Your App Name >.

< Tip 1 >
< Tip 2 >
< Tip 3 >
< Tip 4 >

Click here < provide link > to go to your dashboard now.

Best
< Your signature >

Email 4 – Use of 2nd Valuable Feature

Subject: < User Name > check this out!

Hey < User Name >,

Another great feature to use is the < Your App Name >. It makes it really easy to create < application specific thing > within a few minutes. See it in action in this quick tutorial < provide link > we’ve made for you.

You can start using this by clicking here < provide link >.

Best
< Your signature >

Email 5 – Example of Company That is Benefitting From Your Product

Subject: < User Name >, < Company Name > had this to say about us

Hey < User Name >,

< Name of person > is the CEO of < Company Name >, the leading name in < service company provides >. He/she recently wrote a blog on how using < Your App Name > helped < Company Name > increase revenue by < Number >%. Click here < provide link > to read all about it.

Best
< Your signature >

Once first time use of your app has occurred, you can stop the campaign. The objective now changes from getting your customer to use the app once, to getting them to use it to its fullest extent.

User Onboarding Campaign

Objective – Encouraging customers, who are actively using your product, to complete the onboarding process, complete a profile and start using your product more to derive maximum benefit.

Email 1 – Completing Unfinished Flows

Subject: < User Name >, just sign below the dotted line

Hey < User Name >

Thank you for signing up with < Your App Name >! We’re really excited to have you onboard. You’re just one step away from setting up your account with. Click here < provide link > to complete your account setup.
Great to have you with us!

Best
< Your signature >

Email 2 – Tips

Subject: < User Name >, what you’ve seen is just the TIP of the iceberg!

Hey < User Name >,

We’ve compiled a few tips that we email our early users about on how to start using < Your App Name >.
< Tip 1 >
< Tip 2 >
< Tip 3 >
< Tip 4 >

Click here < provide link > to go to your dashboard now.

Best
< Your signature >

Email 3 – Help

Subject: Help Offered for Help Wanted

Hey < User Name >,

Using < App name > can be tricksy at times. Yes, we used the word tricksy. But it’s true! So we’ve put together a couple of guides for you. Here’s a guide < provide link > for getting quickly started and here’s another one < provide link > to get you up to speed with the best features of < App name >. And if you’re the person who loves to dissect software and peer into its insides, we have an extremely detailed Help section < provide link >.

Best
< Your signature >

The focus of the welcome campaign is to give the customers reasons for using the product. The onboarding campaign should be geared towards guiding the customer on how to derive maximum benefit from the product. For example users should be encouraged to “complete their profile” or generally complete user flows that are required.

For example if a user signs up for a free trial, he/she will be sent an email, that’ll welcome them. If the user disappears, he/she will be sent a number of emails, encouraging them to return. However, if the user has begun using the product, but hasn’t completed profile details, then it will be the onboarding set of emails that will be activated for sending. These will outline the product benefits that the user can avail by completing the profile.

Product Engagement Campaign

Objective – Getting potential customers back to using the product. These campaigns are critical for SaaS companies that offer freeware solutions. Companies using the freemium model have to make sure that customers who have not paid for their product are engaged and frequently using the product.

Email 1 – Industry News

Subject: What’s going on in the < relevant industry > industry?

Hey < User Name >,

The < relevant industry > industry is an exciting one to be in! There is constant change as companies come up with new and innovative ways to tackle problems that keep changing with time. We’ve compiled some industry updates for our users so they can constantly stay updated with current trends.

< Link 1 >
< Link 2 >
< Link 3 >

Best
< Your signature >

Email 2 – Product Usage / Features Tips

Subject: < User Name > check this out!

Hey < User Name >,

Did you know that you can create < application specific thing > using the < application specific feature >? See it in action in this quick tutorial < provide link > we’ve made for you.
You can start using this by clicking here < provide link >.

Best
< Your signature >

Upselling Campaign

Objective – Notifying and updating customers about new features and limitations of current usage. The purpose is to get customers to avail advanced features or purchase a restriction free version of the product, i.e. to upsell.

Upsell campaigns are used to notify customers about new features that have been added or new versions that have been released, or to remind the customer about current usage limitations. The idea is to try to persuade the customer into seeing how, with the purchase of the additional features / new version, he/she can receive greater benefit from the product.

Email 1 – Usage Limitations

Subject: < User Name >, you’re holding yourself back

Hey < User Name >,

You’re currently using the free version of < Your App Name >. That means you don’t get to use < Premium Feature 1 >, < Premium Feature 2 > and < Premium Feature 3 >.
Upgrade now < provide link > to use < Your App Name > so that you get the maximum benefit out of it for your company!

Check out this video of how these features are used, and how easy they make the process for you!

Best
< Your signature >

Email 2 – Benefits of Features

Subject: < User Name > check this out!

Hey < User Name >,

Did you know that you can create < application specific thing > using the < application specific feature >? See it in action in this quick tutorial < provide link > we’ve made for you.
You can start using this by clicking here < provide link >.

Best
< Your signature >

Email 3 – New Version Releases

Subject: < User Name >, we just got better

Hey < User Name >,

< Your App Name > has now been upgraded to version < insert number >. That means a host of brand new features and a completely revamped interface. The features are far more integrated than before, log on < provide link > to activate your FREE 14 day trial! Click here < provide link > to permanently upgrade your service.

Best
< Your signature >

Email 4 – Promotions

Subject: Good things are free, better things just cost $< Insert Price >!

Hey < User Name >,

We’re now offering the full range of our services for $< Insert Number >! That means < Insert Number >% off! This offer is limited for this month so click here < provide link > to upgrade your service now!

Best
< Your signature >

Renewal Campaign

Objective – The objective is to remind the customer about renewal of subscription.

These campaigns serve to alert the customers to renew their yearly subscriptions. Automating this communication can ensure that renewal reminders are sent on time and not forgotten.

Subject: Let’s start over

Hey < User Name >,

A year has almost gone by and I’m glad to see we’re still fast friends! It’s almost time for the renewal of your subscription, so click here < provide link > if you’d like to make any changes to your current package. Thanks for using < Your App Name > for so long and have a great next year!

Best
< Your signature >

Transactional Emails

As mentioned before, transactional emails are for enabling your users to reset forgotten passwords, authenticate emails etc. These are also part of the tools of communication that are available to you. These should be designed with care as well.

Subject: < User Name >, is that you?

< User Name >

We got a request for resetting the password of your account. Click here < provide link > to reset your password.
Let us know if you didn’t request this, or better yet, don’t respond and have a good day!

Best
< Your signature >

Conclusion

Drip campaigns are an extremely critical communication channel between your company and potential customers of your product. Therefore the lifecycle of your average customer has to be carefully analysed when you are developing a drip campaign.

To help you get started, we’ve put together an HTML template to help you get started. You can download it here.

170+ Photo-Realistic T-Shirt Mockups – only $17!

Source
5 Design Techniques for Better CTA Buttons

Posted:Wed, 11 Oct 2017 12:45:30 +0000
When we visit most websites, we often have a goal in mind. To get to that goal, there’s usually a series of steps we need to take and the first step starts with clicking on a CTA (call to action) button. Think about the last time you signed up for a service, or downloaded an app, the process likely included an interaction with a call-to-action button.

CTA buttons are the buttons you use in your website to guide users towards your goal conversion. The whole point of a CTA is to direct your site visitors to a desired course of action. Some common examples of CTAs include:
- “Start a trial”
- “Download the app/book/guide”
- “Sign up for updates”
- “Get a consultation”
Today we’ll be discussing 5 best practices for designing CTA buttons together with the best real-world examples to help you get the most clicks out of your landing page.

1. Visually Striking Button

Your button color matters. In fact, if you’re going to take only one single piece of advice from this article, it should be this one: “Consider your CTA button color”. Using color you can make certain buttons stand out more than others by giving them more visual prominence.

Use Contrasting Colors

Contrasting colors work best for CTA buttons, using contrasting color it’s possible to create striking buttons that stand out. You should select a contrasting color from the color scheme of the webpage, while still fitting in with the overall design. Consider the Firefox example below. The green color of the CTA button on the Firefox page is jumping off the page and immediately gets user attention.

Firefox CTA button is bright green and stands out well on a dark blue background

Another eye-catching CTA button can be found on the Hipmunk homepage. A bright orange button captures user attention and defines the next possible action.

Negative Space

Not only is the color important for a CTA, but also the amount of space around it. Whitespace (or negative space) creates essential breathing room and separates your CTA buttons from other elements in your user interface. The old Dropbox homepage was a good example of using negative space to make their primary CTA pop. The blue “Sign up for free” CTA stands out against the light blues of the background.

2. Action-Oriented Text

Writing text for your call-to-action button that will compel your visitors to take the right action isn’t an easy task. Fortunately, there are a few things that can help you to do it:

Begin With a Verb

You should avoid vague and boring words like “Enter for more information” for your CTA buttons, and replace them with more action-oriented words like “Start your free trial” or “Get discount now.” Evernote has one of the most common, but still working action-oriented texts for their CTA button.

Begin with a verb like “Start,” “Get” or “Join”

A more interesting example can be found on Treehouse homepage. The CTA on Treehouse’s website doesn’t just say “Start a Free Trial”; it says “Claim Your Free Trial.” The difference in wording may seem subtle, but “Claim Your Free Trial” sounds much more personal.

Use Brief and Easy to Understand Text for Buttons

Be sure to state exactly what the visitor will get if they click on the CTA. Ideally, you want to keep button text to between two and five words.

Add Value Proposition

Most probably you’ve noticed that many buttons have the words like “free” in their copy and that’s not a coincidence, using such words in button copy emphasizes your offer’s value proposition. Thus, when writing your CTA, try to find a way to integrate one (or all) 3 persuasive words:
- Free
- Bonus
- Instantly
Let me give you an example: One big fear users have before committing to sign up for something, is that it’ll be a pain to cancel their subscription if they won’t like the service. Netflix relieves that fear using the promise “Cancel anytime” right next to the “Join free for a month” CTA.

Create a Sense Of Urgency

Constructing a sense of urgency in your CTA buttons can yield some impressive click-through rates. For example, you could use button text like “Sign Up and Get 25% Off Today Only!” Limiting the time someone has to make the decision makes people want to claim their offer while they can.

Helpful Text

Sometimes you may want to consider adding an extra line of information within your button text. This practice is common with free trial buttons. For example, a free trial button might say “30 day trial, no credit card” in smaller text below the CTA button with “Start Your Free Trial” text. This extra text should ease the decision-making process.

3. Make It Visible Without Scrolling

The placement of your call-to-action buttons is as important as the color and message. A CTA button should be located in an easy-to-find spot that follows organically from the flow of the webpage. You should try to keep your CTA button above the fold so that users never miss it. Ideally, your CTA button should be among the first things a user sees on the page when they reach it. The additional information should stay below the fold, where it remains accessible but not distracting.

4. Large Button With Rounded Corners

Think about how the design communicates affordance. How do users understand the element as a button? Use shape and size to make the element look like a button.

Make it Big Enough

The CTA should be large enough to see from a distance, but not so large as to detract attention from the main content on the page

User Buttons With Rounded Corners

Button shape can play a big role. It’s a proven fact that rounded corners are easier on the eyes. In ContentVerve’s test, a rounded green button did better than a blue rectangle.

5. Less is More When it Comes to Choices

Keep in mind that if you want your customers to take action, you’ve got to assist them, by removing all possible obstacles from their way. When users are given too many choices, they tend to get confused. So, it’s better to offer the potential customers only one option.

If you still want to include multiple button choices, give weight to one choice over others to help funnel users towards a specific path. One good example is Evernote: as soon as you reach a bottom part of Evernote’s homepage, it’s pretty clear that a preferable choice is “Sign up for free”, while the CTA for users to compare plans is very much secondary.

Conclusion

To achieve effective CTA design, you need to consider more than just the button itself. It’s also important to think about background color, surrounding images, surrounding text and many other elements. Basecamp team understand the importance of these elements and designed a perfect layout for their landing page. Even the microcopy they use under the CTA button (“4,714 businesses signed up this week!”) boosts the confidence of potential clients.

I hope that tips mentioned in this article will help you to create a better call to action button for your website. The last moment is the importance of testing—if you decide to recreate a CTA on your site, remember to test to see if it works for your audience.

170+ Photo-Realistic T-Shirt Mockups – only $17!

Source
10 Ways for Designers to Woo Developers

Posted:Tue, 10 Oct 2017 10:45:17 +0000
Hey designers, are you driving your developer peers crazy?

Chances are that you have some habits that don’t translate particularly well to code, and it is making life tough for the developer working with you on projects. Want to be a better coworker (and friend)?

Learn how to better communicate and design so that developers will love you. It will speed up projects and make work life easier. And it’s not a matter of bringing candy to meetings either. You can make developers love you by making slight changes to the way you work.

1. Bring Developers in Early

The biggest problem between designers and developers is that they often work in bubbles. The individuals or teams don’t start talking about a project until the first draft of the design is finished. Then there’s a handoff from the designer to the developer.

Sigh.

That’s just not the way to work. Designers and developers should be involved together from the beginning to talk about how a project will come together. While the designer might focus on color and typefaces and imagery, the developer can provide insight into usability, function and performance.

Designers and developers should have a good idea of what the other side looks like. Designers should understand enough code and usability to speak with developers and understand challenges; developers should have a little knowledge of design theory so they can make suggestions when design ideas aren’t right for the web.

2. Practice Consistent File Management

One of the biggest things a designer can do is prep and package files in the same way every time.

How many times have you opened a Photoshop document with hundreds of unnamed layers? Don’t give this type of file to a developer. Every layer and style—regardless of what software you use—should be named appropriately.

How many times have you opened a Photoshop document with hundreds of unnamed layers?

Styles, color swatches and typography should be consistent throughout the design. (A button shouldn’t look different from page to page.)

Name files and styles in the same way for each project. Group like elements in a similar manner and use a consistent folder system. That way the developer doesn’t have to relearn how to find parts and elements with each new project.

3. Use Google Fonts

One of the biggest challenges for design projects that include print and digital pieces is typography management. Don’t use desktop fonts for print projects for web or app designs and just assume they will work. (Often they don’t.)

For digital projects, opt for Google Fonts for typography. This means you might have to find a similar typeface for the web to match what you are using for print. (That’s OK.)

Don’t make the developer do this for you. Pick out the comparable Google Fonts and use them from the start. You can even note print versus digital typefaces in your style guide.

The reason behind this is simple: Embedding fonts can get a little tricky. Plus, Google Fonts are free and will ensure that you don’t incur additional project costs. (While you are at it, consider doing the same thing with icons and use a package such as Font Awesome, which allows the developer to style icons using CSS, not import a bunch of image files!)

4. Package Image Assets

While we are on the topic of image assets, exporting and packaging files properly is super important. While a developer can open and export all image files to meet their needs, you could ask what they need and do it along the way.

This ensures you get the crops you want on images, while compressing files to help your website load quickly.

Don’t try to do this on your own. Ask the developer how files should be saved, named and compressed for best use.

5. Think About the Environment

There are just so many device sizes and aspect ratios to think about when designing websites and mobile apps. As a designer, you need to know the canvas size, margins, padding, etc. to create a mockup that’s actually usable.

Talk to the developer before you start drawing to ensure that you know what the design environment looks like before you start. There’s nothing worse than a design that looks amazing in Photoshop or Sketch and falls flat in production.

You need to know these things in advance:
- If the framework has specific padding specs at different sizes
- The gutter width between columns (and if it varies)
- The size of the most narrow screen size the developer will code
6. Ask Questions

It’s been mentioned a few times already, but communication between the designer and developer really is the key to making all this work. Communication can make or break projects, impact deadlines and influence the end project design and functionality.

Communication can make or break projects

Take your developer to lunch. Get to know them. Ask plenty of questions along the way. If you aren’t sure whether something will work or not, just ask. Developers aren’t scary people and it’s a lot easier to answer a question early in the process than have to rethink and entire concept.

7. Learn Some Dev Basics

While you are talking with the developer and asking questions, dive deeper. Learn some development basics if you don’t already have these skills in your design arsenal.

Designers working on digital projects should verse themselves in:
- HTML and CSS (you should be able to change a font size or color and understand how the two are different)
- Common user patterns (design for the way users will interact with content)
- Accessibility standards (so your design will work for more users)
- What types of elements need to be served as images and what can be created using pure CSS
- How breakpoints work in responsive layouts
- Trends in website design
You may never actually write code, but learning development principles will make you a better designer because you will understand the value of the tools and workflows.

8. Use a “Living” Style Guide

The design process extends to development as well. Designers, you need to recognize that the developer is just as vital to the design process as you are.

With that in mind, create a “living” style guide that not only includes color and fonts but components as well. Everyone should be able to access and update the document as the project comes to life.

A good style guide will help everyone working on a project maintain consistency with visual elements, provide context for design choices, serve as a point of collaboration for the project and help standardize code. The living style guide allows everyone to share ideas and provide guidance throughout a project. It’s not just a document that someone creates right before a design goes live.

Put the following information in the style guide to make the most of it:
- Logo styles
- Color palette
- Font palette
- Icon palette
- Navigation menu elements (and there they link to)
- Layout options for different pages
- Code snippets that get reused throughout the site (such as buttons)
9. Use the Grid

Respect the grid. In responsive website design, the grid is more than just a guideline for placement of elements on the screen, it can also dictate where elements go at different screen sizes and how columns stack and shuffle.

The grid can help you design and maintain flow. (The challenge is that you can’t arbitrarily break design rules.)

Think about it like this: Your design has four content blocks lined up across the screen in a row (with equal gutter widths) on a full-screen desktop monitor. Then on a tablet, those blocks shift to form two columns, with two rows. On a mobile device they shift to form a single column with four rows.

Understanding how the grid impacts the size of objects and how objects will shift on different devices is important because it can dictate how you design for the content you have. Think about that same scenario again. What if you had five content blocks? It would require a redesign to ensure that you create a consistent visual outline.

10. Don’t Be a Jerk

The real key to ensuring projects come together with ease is to be flexible. Design techniques and standards for the web change all the time. Whereas some projects do allow you to be a stickler for details and unmoving, responsive design doesn’t really work that way.

The golden rule when it comes to working with developers is…don’t be a jerk.

Designers that are easy to work with will earn more respect and have better relationships with developers. This will lead to better and more successful projects. It should go without saying, but too often there’s a lot of jerk-ish behavior out there. Don’t fall into that trap.

Be flexible, open and talk things out with your developer. They will love you for it.

170+ Photo-Realistic T-Shirt Mockups – only $17!

Source
20 Best New Portfolio Sites, October 2017

Posted:Mon, 09 Oct 2017 10:45:38 +0000

Hey WDD readers, it’s October, so you know what that means: it’s time for Christmas-themed websites! No, I wouldn’t actually do that to you. But I don’t have any Halloween-themed websites either. It’s probably for the best.

What I do have is yet another almost-even mix of design trends and aesthetics. Could this be the end of bandwagon-hopping? Could we possibly be that lucky? I doubt it, but the last few months have been pure pleasure in terms of variety, and I hope this continues.

Heartbeat

Today, we start off with Heartbeat, a web and app agency. Their site, while hearkening back to the days of pure minimalism, is loaded with personality, and some pretty ingenious animation. This is the first time in a while that animated inter-page transitions haven’t just annoyed me.

I’d also note how their contact form is dead simple and short. And if even that’s too much for a given client, they put their phone number, Skype ID, and email right where potential customers can find them. I’m sold, and I don’t even need them to make me anything.

Anakin

Believe is or not, Anakin has nothing to do with a certain notable whiny villain who only stops whining when they cut his limbs off, which is presumably one of the better times to whine. It’s a design studio. It’s got that post-minimalist style, lots of white space, and elegant (if somewhat small at times) typography. Some aspects of their site (especially the labels on their contact form) could use a lot more contrast, but otherwise, this site is darned pretty.

Jony Guedj

Jony Guedj is a filmmaker, and his site makes that very, very clear. I mean, the portfolio itself is basically a minimalist “film reel”, with a timeline at the bottom that is reminiscent of video editing apps. The site might be minimalist, but it’s creative, and gets the point across fairly quickly. Plus, I’d say it’s a fantastic example of how to use a horizontally scrolling layout.

George Hastings

George Hastings’ portfolio is a simple, but finely crafted affair. The colors are striking, the type is solid, and the little animations are downright superb. It feels like minimalism had a brief fling with brutalism, and the result is a site that manages to feel utilitarian in a way, but still quite pretty. Also, you should absolutely have a look at this guy’s code and design experiments.

Elsa Muse

Elsa Muse’s work is about as artsy as you can get, and so is her site. It’s got some textbook post-minimalism [I should be writing that textbook] blended rather harshly with the boldest colors out there. The header of the home page is one of those designs that’s a bit of an eyesore on purpose. It’s supposed to stand out, rather than sooth. In a way, it’s genius. With this kind of site, you’ll only ever attract the sort of clients who love your style.

Dries Van Broeck

Dries Van Broeck is a motion designer. While the rest of his site is definitely well-crafted, you’ll be coming here for the animation most of all. So obviously, all of his work and many random site elements are animated, bouncing around, and generally pretty lively. Is it a bit distracting? Yes, but that is literally his job. I’d say this site sells his skills pretty well.

Alex Hunting Studio

Alex Hunting Studio has gone for the white-with-black-lines style of minimalism that used to be everywhere. It’s clean, it fits the textbook modern aesthetic, and presents their projects in slideshow format. They went for that “like a magazine, but online” look, and I’d say they nailed it.

Simon Ammann

Simon Ammann doesn’t take minimalism to a whole new level, but he comes pretty close. Until you actually click through to a project, it’s all about that very small amount of text. Basically, he gets to the point. And he uses white space pretty much perfectly.

Timothy Achumba

Timothy Achumba is a product designer at Facebook, and the experience shows in his work. It’s dark, it’s sleek, it’s pretty. While the UI is simple and unassuming (as portfolios go, anyway), I couldn’t find a single flaw to criticize. Okay, maybe I would have made the contact info more prominent; but this guy’s working for Facebook. He doesn’t need regular clients to hire him often. He just needs to show off his near-flawless work until he moves on to the next billion-dollar corporation.

Matthew Vernon

Matthew Vernon’s portfolio took a fairly normal business site layout and gave it a semi-retro feel with magazine-like typography, and that classic “Internet Blue”. It’s a simple change to a simple site; but it gives the whole thing a bit of a nostalgic feel, while still looking professional.

Malte Gruhl

Malte Gruhl’s website is as psychedelic as his name. That’s really the only way I can properly describe it. Oh sure, “artsy”, “post-minimalist”, “etc.”… these are all fairly accurate descriptors. But really, it’s a bit more like a chaotic art project than a website. I don’t know if it will sell his services, but it’s definitely hard to forget. I’d almost hire the guy just to see what would happen.

Tyler Hancock

After that last visual feast, Tyler Hancock’s light, minimalist, and type-driven portfolio is soothing to the eyes, even while bordering on brutalism. With big text and bigger images, this site is a delight for anyone who prefers simplicity and order in a site design.

Matt Lee

Matt Lee bills himself as a “creative developer”, and judging by his site, I’d say he earned the title. What looks to be—at first glance—a typical dark layout turns out to be quite stylish. From the typography, to the “pixel” theme (you’ll see what I mean if you look hard at the backgrounds), to the way he uses photographs to reinforce the site’s visual themes, everything is put together beautifully.

Laboratorium EE

Laboratorium EE isn’t anything groundbreaking, but it’s a pretty, and well-made site. I do particularly like the way they handle large resolutions, though.

Ben Bate

Ben Bate’s portfolio only looks like it was made with Bootstrap. it’s actually custom made to look like Bootstrap! Okay, all jokes aside, this is an interesting one due to the sales strategy, rather than the aesthetics. Instead of depending on images or the usual copy to sell services, there’s a whole lot of social proof. You get to see the brands Ben has worked for before you even get to see examples of his work. There’s even a few classic testimonials at the bottom of the page.

Even more interesting is his sales pitch: you tell him what you want, and he’ll prepare a PDF of relevant work samples. And hey, at that point, you’re already in email contact with him, right? It’s clever, and requires no more work on the part of the client than usual.

Booreiland

Booreiland is a Dutch digital agency that combines a fairly familiar layout with basically all of my favorite little twists: The effective use of yellow. Drop shadows that don’t suck. Animation that, while obvious, feels understated, and wouldn’t totally break the site were it to go missing. Fantastic type. It’s all good.

LatinMedios

I live in Mexico, and I can tell you that design sensibilities south of the border trend toward the extremely colorful. LatinMedios doesn’t go full double rainbow, but they have kept some of that color in their branding. To be fair, it’s in some of their work, too. It depends on the client.

The rest of the site is a classic nearly-monochromatic business portfolio, with background animations and all the trimmings. It’s a blend of design thinking that could only come from the collision between two or more cultures. LatinMedios is in the U.S., Mexico, and several places in South America, so that just fits.

Upperquad

Upperquad brings us a site that’s just plain pretty. It embraces that post-minimalist style, with soft colors, big type, and some subtle (and sometimes not-subtle) animation to spice things up. The use of seemingly randomized geometric shapes adds to the feeling of asymmetry and artful chaos; but the site itself is still simple and usable.

Xigen

Xigen is another one that is just plain pretty and well-done, while not going too experimental. Give it a look!

Untold

Untold is last, but not least, with a lovely dark, elegant website that gets right to the point. Mind you, it comes with the usual drawbacks of a site that’s meant to be elegant: namely the small body text size. I don’t know when small text got classified as “modern and elegant”, but I’m going to blame the print industry, as usual. (Just kidding, I love you guys.)

170+ Photo-Realistic T-Shirt Mockups – only $17!

Source
Popular Design News of the Week: October 2, 2017 – October 8, 2017

Posted:Sun, 08 Oct 2017 10:45:05 +0000

Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers.

The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week.

Note that this is only a very small selection of the links that were posted, so don’t miss out and subscribe to our newsletter and follow the site daily for all the news.

Beautiful Examples of Motion Design in Web Design

It’s Time to Give Firefox Another chance

A Simple JavaScript Technique for Filling Star Ratings

Site Design: Kickpush.co

Future UI Design Without Buttons

Stripe Elements

Google Logo Sparks ‘Correct Design’ Debate

Shuuka: Use One Nickname for all your Social Networks

How to Have Better UX Before UI Begins

Bobby 2.0

Station – One App to Rule Them all

Vue.js Style Guide

Letter to a Junior Designer

Famous Logos Drawn from Memory

New Design Tool from Dropbox

Redesigning Facebook Reactions

Moving Letters – Open Source Animated Text Effects

Colony: A Platform for Open Organisation

Designers Aren’t Prepared to Make AI–Here’s How to Get Ready

10 Essential Tools for Freelance UX Designers

What You Need to Know About Variable Fonts

Micro Editor – A Modern and Intuitive Terminal-based Text Editor

How Google Created the Least Offensive Design Ever

Papyrus Creator Reacts to SNL Skit

The Best Slack Groups for UX Designers

Want more? No problem! Keep track of top design news from around the web with Webdesigner News.

170+ Photo-Realistic T-Shirt Mockups – only $17!

Source