Tag Archives: overlay

Thumbnail

Fixed Elements And Overlays In XD: Incredibly Easy And Fun Methods For Your Prototypes




Fixed Elements And Overlays In XD: Incredibly Easy And Fun Methods For Your Prototypes

Manuela Langella



(This article is kindly sponsored by Adobe.) A fixed element is an object you set to a fixed position on the artboard, allowing other items to scroll underneath. This way, you get a realistic simulation of scrolling on desktop and mobile. With the new overlay feature, you can simulate interactions such as lightbox effects and submenus.

How do famous brands use fixed elements and overlays? Well, let’s take a look at some examples to get some inspiration first.


Examples of brands using fixed elements and overlays


From left to right: 1) McDonald’s mobile home 2) A submenu slides up when you click on the hamburger menu. This is an example of an overlay. 3) Netflix’s Italian mobile website home screen. 4) Netflix sets its call to action as a fixed element. When you scroll down, the button stays fixed to the bottom of the screen. 5) Adobe mobile home 6) By clicking on the menu symbol, a submenu comes out as an overlay. (Large preview)

In this tutorial, we will learn how to set a menu bar as a fixed element and how to apply an overlay transition in a prototype, to simulate a menu opening from the click of a button. Both examples will be done in a mobile template, so that we can see our simulation in action directly on our mobile device. I’ve also included an Illustrator file with icons, which you can use to set up your examples quickly.

Let’s get started.

Preparing The Mobile Template

Open Adobe Xd, and choose the “iPhone 6/7/8 Plus” template. Then, go to File → Save As and choose a name to save your file (mine is mobile.xd).




(Large preview)

Let’s create a restaurant app in which people can select what to order from a list of food.

We will create two home layouts. The first one will be a long page, which we will use to see how fixed navigation works. The second will have a full-screen image, and the user will be able to click and open a menu bar that overlays the home screen.

To get started, click on the artboard icon on the left side, and click to the right of your current artboard. This will create a second identical artboard, near the first one.




(Large preview)

Let’s begin to design our elements, starting with the navigation bar. Click on the Rectangle tool (R) and draw a shape 414 pixels wide and 48 pixels tall. Set its color as #DE4F4F.




(Large preview)

I’ve prepared some icons in Illustrator to use in our layout. Just open the Illustrator file I’ve provided, and drag and drop the icons in your library, as shown below:

Large preview

In doing so, your icons will be automatically uploaded to your Adobe XD library, too.

To learn more about how to use libraries in different apps, read my earlier article, in which I go over some examples of how to add icons and elements to a library (in Illustrator, for instance) and then access them by opening that library in other apps (XD, in this case).

Once you have added the icons, open your XD library. You should see the icons in place:




(Large preview)

Drag and drop the icons on your artboard, as shown below. Position them, and make sure they are all about 25 pixels wide.




(Large preview)

Because we need our icons to be white, we have to modify these. We can directly modify them in the library, as demonstrated in my previous tutorial. With that done, we’ll see them updated in XD directly, without having to drag them from the library again.




(Large preview)

Now that the icons we want are in place, let’s create a logo. Let’s call this app “Gusto”. We’ll simply use the Text tool to add it. (I’m using the Leckerli One font here, but feel free to use whichever you like.) Align the logo to the middle of the navigation bar by clicking “Align center (horizontally)” in the right sidebar.




(Large preview)

Group all of the navigation elements together, and call the group “Menu”. To do this, select all elements in the left panel, right-click and choose “Group”.




(Large preview)




(Large preview)

Let’s add a beautiful hero image. I selected one from Pexels. Drag it on your artboard, and resize its height to 380 pixels.




(Large preview)

Now, click on Rectangle tool (R), and draw a rectangle the same size as the hero image, and place it on the image. Set a gradient for the rectangle’s color, using the values shown in the image below.




(Large preview)

(If you’d like more information about gradients, feel free to see my previous tutorial on how to apply them in XD.)

Insert some white text on the hero image and a circle for a button. Place a little circle with a number on the cart icon as well; we will need it later.




(Large preview)

Next, let’s increase the artboard’s height. We have to do that in order to insert new elements and to create the scrolling simulation.

After double-clicking on the artboard, set its height to 1265 pixels. Be sure that “Scrolling” is set to “Vertical” and that the “Viewport Height” is set to 736 pixels. A little blue marker will allow you to set the scrolling boundary towards the bottom of the artboard, as seen below:




(Large preview)

Let’s add in our content: Gusto’s mouthwatering menu. Click on the Rectangle tool (R) to create a rectangle for the picture that we will add.




(Large preview)

Drag and drop a picture directly into the box we just created; the image will automatically fit in it. Click on it once, and drag the little white circle from an angle inwards, in order to round all of the angles. Their values should be around 25, as shown in the picture below. Get rid of the border by unchecking the border value in the right sidebar.

Large preview

Click on the Text tool (T), and write a title on the right side of the image. I chose Lato as the font, at 14 pixels. Feel free to use another font, but maintain the 14-pixel size.




(Large preview)

Grab the Text tool (T) again, and write some lines for the description (Lato, 10 pixels) and for the price (Lato, 16 pixels).




(Large preview)

Take the Rectangle tool (R) and draw a rectangle of 100 by 30 pixels. Color it with the same orange we used on the button for the hero image; add the text “Add to Cart” with the Text tool (T); and add the cart icon from the library. All of these steps are covered in the short video below:

Finally, click on “Repeat Grid” to create a grid for this section. Once that’s done, we can change images and text easily, as shown in the video below:

If you want to learn more about how to create grids, follow my tutorial.

I used the following pictures from Pexels:

  • https://www.pexels.com/photo/close-up-of-food-247685/
  • https://www.pexels.com/photo/food-dinner-pasta-spaghetti-8500/
  • https://www.pexels.com/photo/selective-focus-photography-of-beef-steak-with-sauce-675951/
  • https://www.pexels.com/photo/food-plate-chocolate-dessert-132694/
  • https://www.pexels.com/photo/bread-food-sandwich-wood-62097/

Add some titles, descriptions and buttons.




(Large preview)

Finally, let’s add a rectangle for the footer, with the text “Gusto” in the center. Set the rectangle’s fill color to #211919.




(Large preview)

Yes! We’ve completed the first template design. Let’s set up our second template before we begin prototyping.

For our second mobile layout, just copy and paste the navigation and hero section from the first layout, and size the hero image to be full screen. Then, add a “Try Now” button to it.

In the short video below, I show you how to copy and paste elements into the second artboard, create a new button with the Rectangle tool (R) and write text on it with the Text tool (T).




(Large preview)

Excellent! Let’s move on and create our prototypes.

Setting Fixed Elements

We want to make the top navigation of our layout fixed, making it stick to its position as we scroll the artboard.

Click on your “Menu” group to select it, and select “Fixed Position” in the right sidebar.




(Large preview)

Important: In order for all elements to scroll under the menu, the menu should be on top of all other elements. Simply place the menu folder at the top, in the left sidebar.




(Large preview)

Now, to see your fixed navigation in action, simply click on the “Desktop Preview” button and try scrolling. You should see this:

Large preview

Tremendously simple, isn’t it?

Setting Overlay Elements

To see how overlays work in XD, we first need to create the elements that will be overlaid. When you click an item in the menu, what would you expect to happen? Exactly: A submenu should appear.

Let’s create three different submenus, like the ones in the image below, using the Rectangle tool (R). I chose a rectangle because the menu will overlay the screen, so it will cover not the whole artboard but just a part of it.

Follow the video below to see how I created the three overlay menus. You will see that I used the Rectangle tool (R), Line tool (L) and Text tool (T). We’re using rectangles to create the menu backgrounds because we need an object to overlay the screen. I’ve included the icons in the Adobe Illustrator file.

Below, you’ll see how I use “Repeat Grid” and how I modify elements inside of it.

Here is the final result:




(Large preview)

We will work on the second home layout at this point.

Set the visual mode to “Prototype”, selecting it from the top left of the screen.




(Large preview)

Next, double-click on the little hamburger menu icon, and drag and drop the little blue arrow onto the “Overlay 1” artboard. When the popup window appears, choose “Overlay” and “Slide right”. Then, click the “Desktop Preview” button to see it in action.

Large preview

Let’s do the same thing with the user icon and cart icon. Double-click on the user icon in Prototype mode, and drag and drop the little blue arrow onto the “Overlay 2” artboard. When the popup window appears, choose “Overlay” and “Slide left”. Then, click the “Desktop Preview” button to see it in action.

Large preview

Now, double-click on the cart icon in Prototype mode, and drag and drop the little blue arrow onto the “Overlay 3” artboard. When the popup windows appears, choose “Overlay” and “Slide left”. Click the “Desktop Preview” button again to see it work.

Large preview

We’re done! These great new features are super-easy to learn, and they’ll add a new level of interactivity simulation to your prototypes.

Quick tip: Want to preview the layout on your phone? Just upload your XD file to Creative Cloud, download the XD app for mobile, and open your document.

Here’s what we have learned in this tutorial:

  • set and create mobile layouts and elements,
  • set fixed elements,
  • use overlays to simulate a click-to-open submenu.

Where would you use fixed elements or overlays? Feel free to share your examples in the comments below!

Smashing Editorial
(il, yk)


Excerpt from: 

Fixed Elements And Overlays In XD: Incredibly Easy And Fun Methods For Your Prototypes

Ask Yourself These 5 Questions Before Launching That Overlay

peter-parker
Be the Peter Parker of overlays. Image via Shutterstock.

You’ve heard it before: “With great power comes great responsibility.

And while Uncle Ben wasn’t explicitly referring to overlays when he said these iconic words to Peter Parker, the same could be said about these handy little conversion tools.

Overlays are modal lightboxes that launch within a webpage and focus attention on a single offer. Still fuzzy on what an overlay is? Click here.

Overlays are powerful marketing tools, not only because they are incredibly effective at snagging conversions, but also because they are so quick to launch.

This combination of power and speed means it’s dangerously easy to launch one without much consideration for user experience. Thus, they’ve developed a bit of a reputation for being effective… and disruptive.

But the disruptive nature of overlays is actually inherent to their effectiveness, because it focuses the visitor’s attention on a single offer. They eliminate the paradox of choice and present the visitor with a simple yes or no question.

However, there are ways to ensure the overlays you launch both achieve your goals and provide value to your visitors.

The first step in accomplishing this is to ask yourself the five Ws:

1. Why are you launching an overlay?

Overlays are most commonly used to accomplish one of three marketing goals: revenue generation, lead generation or traffic shaping.

overlay-goal

Do you want to build your blog subscriber list? Divert traffic to your pricing page? Entice visitors to make a purchase? This is what you need to figure out before you even consider building your overlay.

The marketing team at Hotjar recently implemented an overlay in their lead gen strategy for the first time. But just because it was their first attempt didn’t mean there wasn’t a clear goal. Nick Helm, Director of Inbound Marketing at Hotjar explains:

“We wanted to be able to nurture the new leads coming from different channels and bring them back.”

hotjar-overlay
Hotjar’s premier overlay built with Unbounce Convertables.

If you don’t have a good answer to the “Why” question though, just stop. Overlays, when used irresponsibly, can be intrusive and annoying. So if you don’t have a solid, strategic reason for launching one, hold on until you do.

Nick et al had a clear goal for their overlay and a detailed plan for how to achieve it, and it paid off: “We did get the quantitative results — which for us, measure better than industry standards.”

Your reason for running an overlay might be lead gen, rev gen or traffic shaping (or maybe something completely unique), but just make sure you have one — plain and simple.

Need some inspiration?

Our our latest ebook, 12 Proven Ways to Convert With Overlays, we share a dozen types of use cases you can use today.
By entering your email you’ll receive weekly Unbounce Blog updates and other resources to help you become a marketing genius.

2. Where will you place your overlay?

Overlays offer a reliable way to fill gaps in your funnel, but you need to figure out where those gaps may be.

The easiest way to do this is to visit Google Analytics to determine your highest-traffic pages. Then whittle down the list to only include pages that don’t have a clear call to action — these pages are the low-hanging fruit you can start with to see immediate results.

You should have already determined what the goal of your overlay is; the diagram below will help you decide which of the CTA-free pages pair best with the type of overlay you’d like to launch.

overlay-placement

As you can see, different pages are associated with different levels of buyer intent, and so while a lead gen overlay might perform well on your blog, a rev gen overlay probably won’t.

Now, if you’re a keener and don’t have any high-traffic pages without a CTA then I present you with this anthropomorphic gold star:

giphy-2
Tina star gif via Giphy.

But I also challenge you to consider how you might use overlays on your highest-traffic pages to get even better results (because even though you have a CTA, it doesn’t mean people see it).

Adding an overlay with a complementary offer to your main on-page offer can help bolster the success of your page, because overlays leverage the psychological principle of pattern interruption  to focus the visitor’s attention on a single offer. Your sidebar CTA, on the other hand, can start to blend into the page, so people become blind to it.

Here’s an example from last year’s Digital Agency Day (DAD) signup page:

digital-agency-day

Whereas the signup page’s goal was to get people to attend the digital event, this overlay offered exiting visitors the opportunity to simply get the recordings, even if they couldn’t attend.

The results were some of the best we’ve ever seen: 1,991 full-form conversions on 10,005 views.

3. Who should see your overlay?

The key to high-converting overlays is presenting compelling offers that (1) align with the visitor’s buying intent and (2) are relevant to that visitor’s specific needs or interests. This means targeting, and the more granular you can get the better.

The first thing you want to find out is where your visitors are coming from. If you know that, you can better judge what type of overlay should be presented, because different types of traffic relate to different levels of buyer intent (social traffic, for example, is often less likely to make a purchase than paid traffic).

The following chart further illustrates this.

traffic-sources
Different traffic sources pair better with specific types of overlays.

Another thing you want to think about is whether the traffic consists of first-time or returning visitors, and — if they are a returning visitor — whether or not they’ve already opted in.

Chances are, your page traffic is a mixture of different referral sources and visitor types, so it can be tricky to present an offer that’s relevant to everyone. Fortunately, Unbounce Convertables recently launched referral and cookie targeting, so you can present more relevant offers by customizing the overlays visitors see based on where they’re coming from or what pages they’ve visited before.

4. What is your overlay offer?

By now, you should be seeing a trend — that creating an effective overlay means keeping the visitor experience at the forefront of your mind. And the sweet spot is where your marketing goals align with the goals of the user: you want the sale, they want the bargain; you want the email, they want the ebook; and so on.

So when you consider what your actual offer will be, ask yourself if your overlay is valuable and relevant to your visitor. If it’s not both of these things things, your results will suffer and you risk being obnoxious.

Let’s break this down.

Value

Conveying value means offering your visitor something worth converting for. Here are a few examples:

  1. Offer an exclusive discount, like this lead gen overlay from BustedTees, which offers a generous 40% discount on first orders:
busted-tees
  1. Entice visitors with free shipping, like this rev gen overlay from Diamond Candles:
diamond-candles
  1. Present a free resource visitors can’t resist, like this lead gen overlay from Copy Hackers which offers a free four-part conversion optimization course:
copy-hackers

Relevance

Another thing to consider when deciding on your offer is whether or not it’s relevant to your audience.

Here’s a real-life example: At Unbounce, our analytics showed that a roundup of the 16 Best Digital Marketing Conferences of 2016 was bringing in a lot of organic traffic. Assuming that people who read about marketing conferences are also interested in attending marketing conferences, we served up this overlay (with a ticket discount to sweeten the pot) that directed people to our Call to Action conference microsite:

cta-conf

And, might I point out, the above overlay is also an incredibly valuable offer — $650 savings? Yes please!

5. When should your visitors see your overlay?

We’ve sorted where your overlays should be seen and by whom, but there’s a final piece in the puzzle: When.

You have a few options around when to trigger your overlay, and depending on the type of offer you’re presenting, different triggers may be more effective than others.

Let’s dig in…

On arrival
On-arrival overlays appear when your page first loads. Use this trigger for offers you want users to immediately see (e.g., a coupon code or an event invitation) or for returning visitors who may no longer notice your onsite calls to action.

On scroll
An overlay using an on-scroll trigger will appear once the user has scrolled through a designated percentage of the page. Use it to present relevant offers to users who have implied interest in a topic after spending time on the page (e.g., a free quote) or to catch the attention of returning visitors who may no longer notice your on-site calls to action.

On exit
Overlays that trigger on exit appear when the user moves to abandon the page. Use them for offers that can “save” a potentially lost conversion (e.g., a coupon code or shipping discount) or for offering free resources or collecting sign-ups that enable you to save a user’s details for future communications.

After delay
Sometimes you’ll want your overlay to appear after a designated time delay, typically between five and 20 seconds. Use this type of overlay to present relevant offers to users who have implied interest in a topic after spending time on the page or for returning visitors who may no longer notice your onsite calls to action.

Psst: Unbounce Convertables include all the above mentioned triggers plus on-click trigger, like this one. Use it to present information or forms on demand without cluttering the page (e.g., “click here to sign up” opening an overlay with a form).

Be a conversion hero

That was a lot of information, I know, but as a marketer it’s your responsibility use your powers for good.

And remember: A thoughtful approach to implementing overlays benefits you and your visitor, because your goals are aligned.

Have you had success with overlays? Tell us about it in the comments!

Excerpt from: 

Ask Yourself These 5 Questions Before Launching That Overlay

What Do Conversions, Your Homepage and Vodka Martinis Have in Common?

We’ve all been there: you’re sitting in yet another kickoff meeting, tasked with the impossible: find a way to get more conversions from your homepage with less manpower, fewer resources and a shoestring budget. P.S., can you get it done before the end of Q1?

You leave wondering if it’s too late to take the afternoon off and just let the vodkas martinis slowly wash the pain of your work life away:

Vodka Beach party for conversions, sake!

Don’t give up just yet.

One marketing team used their homepage, existing resources and some savvy know-how to increase conversions on their homepage from 0% to 6%… and you can, too. Read on to find out how (and save those martinis for a victory party)!

The Kiva Microfunds case study

Meet Adam Kirk, Head of Marketing for the US borrower program at Kiva Microfunds, a non-profit organization that connects low-income entrepreneurs all over the world with interest-free loans. Adam explains:

AAEAAQAAAAAAAAcLAAAAJGFkNzJmOGRhLTg1ODgtNDg2MS04MWFkLTExZTYwYTYzYjg2ZgWe’ve done just under 3000 loans to date in the US and over half have been to women-owned businesses, over half to people of color and over half to low income households.

Compared to other lenders in the biz, Kiva is impressively over-indexed in these categories — they’re clearly impacting the people who need it the most.

One of Adam’s main key performance indicators (KPIs) for the US borrower program is loan application completions.

His goal: first generate enough leads from the homepage… then drip content that encourages prospects to sign up for a loan.

His struggle with meeting this goal?

We know that when borrowers hit our homepage, they’re clearly interested in Kiva. But a lot of those visitors don’t do anything once they get there: they bounce.

Adam’s team is tiny (as in…it’s just Adam and an intern running all their marketing programs) and support is scarce. Without a ton of engineering resources, tools and A/B testing options, Adam needs to be scrappy about the projects he tackles.

The overlay conversion play

After doing some research, Adam decided his homepage needed a little something extra to give his abandoning visitors a softer step towards conversion.

His solution?

Use an overlay to focus attention on a single offer and grab email sign-ups for the monthly Kiva newsletter.

exit-delay-trigger_v2What is an overlay?

Overlays appear on top of a page’s content (in a lightbox), focusing the user’s attention on a single offer. They can be triggered on entrance, on exit, on scroll, after delay and on click.

That way, Adam would give visitors a quick next step before leaving and capture their contact information for future follow up (when they’ve warmed up to taking a loan).

Since he was already using MailChimp, he was able to quickly throw together some copy and design to test their free overlay tool on his homepage.

Adam talks about the goal and design of the pop up, laughing:

Well it was pretty ugly. It was just one form field and we couldn’t do any kind of targeting so it literally popped up all the time, after five seconds on the homepage.

To test it, Adam got scrappy and split his homepage traffic 50/50 from a total of 10,000 visitors a month. He then set the overlay live and waited to see if it would make a difference.

Despite the drawbacks, Adam’s experiment worked. From that overlay alone, 3-4% of visitors who would have exited instead entered their email address.

Boom! 150 net new leads from one “ugly” pop-up!

Testing Unbounce Convertables

Adam had reaped the benefits of an overlay, but was ready to start more segmented targeting, so he decided to give Unbounce Convertables a shot. He explains:

I had already shown how the first overlay worked despite its simplicity, so I figured, why not do something now with actual logic behind it.

With the same goal in mind and an arsenal of design and copy in his back pocket, Adam got his Unbounce overlay live in only five minutes.

Since his goal was to provide value by giving abandoners an easy next step before they leave, he set the overlay targeting to appear on exit to new visitors only. This ensured that users would only ever see the overlay once, and that it’d only be presented to people who were getting ready to exit (some visitors to their homepage were likely ready to take action).

Here’s what his overlay looks like:

Kiva Homepage Unbounce Convertable
Screenshot of the Kiva Micrfunds Homepage Convertable

The results?

Of people trying to leave the Kiva borrower hub, Adam’s team is now capturing 6-7% of them. That’s 3x the conversions from what the original overlay provided.

It doesn’t end there. Adam now uses the thank you page (also an overlay) to shape his traffic to the Kiva community.

Showcasing a smiling business owner, the goal of the thank you is to put a face to the loan and entice potential borrowers to click through and read more:

Post-Conversion Thank-You
Screenshot of the Kiva Microfunds Post-Confirmation Thank-You

From farmers and foodies to artisans and app developers, the Kiva community is filled with real-life success stories of Kiva-funded entrepreneurs.

Kiva Community Page
Screenshot of the Kiva Microfunds Community Page

The results from traffic shaping?

We’re still testing! But I’m pumped to see what we can do next.

Lessons learned

Adam and his team at Kiva were able to stretch their existing resources, time and manpower to generate some pretty impressive conversion results — all with overlays.

So next time you’re in a kick-off meeting, tasked with the impossible, think of Adam’s success and remember:

What do conversions, your homepage and vodka martinis have in common?

The answer is VICTORY.

Cheers!

Psst. Already a customer? Log into Unbounce now and start using Convertables at no extra cost. You can use the same drag-and-drop Unbounce builder to drive conversions on both your campaign landing pages and your website!)

View article: 

What Do Conversions, Your Homepage and Vodka Martinis Have in Common?

How to Design the Firefox Logo in Photoshop

This tutorial will go through how you can create the Firefox logo in a scalable Photoshop format.

The World Firstly create a new document at 1024px x 970px and start off with selecting the ellipse tool (U) and drawing a large circle (hold SHIFT to constrain the proportions) and make the top of the circle nearly touch the top of the document and the bottom of the circle nearly touch the base of the document.

See original article here – 

How to Design the Firefox Logo in Photoshop