Thumbnail

Linkbuilding: The Citizen’s Field Guide




Linkbuilding: The Citizen’s Field Guide

Myriam Jessier & Stéphanie Walter



Before buying followers on Instagram was a common practice, before Russian trolls made fake news an Olympic sport, we had linkbuilding. Today, we still have linkbuilding, its just that you haven’t noticed it — or have you?

Welcome, to the Twilight Zone, dear folks. You are about to go through a linkbuilding crash course. This will help you preserve your website, detect potential problems in content or consider why you keep receiving strange emails from strangers wanting to get their links all over your content.

Rod Sterling in the Twilight Zone TV series.
Rod Sterling in the Twilight Zone TV series.

Note: If you are a website owner, a marketer, a blogger, a social media specialist or a regular user of the internet (and everything else in between)…you should take the time to read this!

What Is Linkbuilding?

Links are basically a popularity contest. Linkbuilding is the process of gaining links to your online content in order to boost your visibility in search engines.

Through links, search engines can analyze popularity but also other vital metrics such as authority, spam, trust. Google uses links to establish which websites are popular with users, are trusted by users or are seen as spam by users.

Key Signals That Influence The Value Of a Link

You have the stock exchange, and then you have the link exchange. All links are not created equal. Some of you may get flooded with spammy requests while others are reading this article wondering why they’ve never heard of linkbuilding. Some websites are more valuable and thus more targeted than others by linkbuilding attempts. Here are some key metrics that help establish the value of a link:

Global Popularity

The more popular a website is, the more a link from that site will have value. Wikipedia or Huffington Post have a lot of websites pointing to them which is a signal for search engines that these websites are probably important or at least very popular. Here is an example of linkbuilders trying to sell links on well-known publications that may not be aware their platform is used to peddle paid links.


Large preview

Topical Or Local Popularity

Links that are topic-specific and highly related to your subject matter are worth more than links from general or off-topic sites. A link from a dog training business pointing to an SEO training website (like the one I run) will have less value than if Smashing Magazine (a website recognized for its topical authority on the web) will. Which means that placing a link on “SEO training website” would have been an amazing opportunity for me.

Placement In The Page

If a link is “editorially placed”, meaning that it looks like something the author placed in the content naturally, then Google will give it more credibility. If the link is something someone with a shady profile shared in the comments, the impact won’t be the same. The position of a link within a page is important. Most linkbuilders will always negotiate for a link at the beginning or in the middle of your main content. Links in footers and sidebars do not have the same value.1

1The Skinny On Black Hat Link Building,” Link Building For SEO: The Definitive Guide (2018 Update), Backlinko

Types Of Links Matter

A text link tends to have more weight than an image link. Furthermore, most people forget to provide an ALT attribute for their images, which means that Google will have a hard time getting context regarding the link placed on the image. Links can also be placed in iframes.

Anchor Text

You know what would be an even better anchor than “SEO training website” for me? I would love to also push a local signal on top of a topical one with “SEO training in Montreal” Why is that better than placing a link on a random word like “platypus”? Well, because one of the strongest signals used by search engines is anchor text. What is anchor text? Anchor Text is the visible, clickable text in a hyperlink. For most of us, it’s the blue text that’s underlined, like the ones you see below. As you can see, Smashing Magazine has made it a mission to explain why links should never say “Click Here”.


Large preview

Trust Score

The internet is made up of a lot of spam. In order to stay relevant to users, search engines use systems that analyze link profiles and provide a trust score. Earning links from websites with a high Trust metric can boost your own scoring metric and impact your organic visibility. That’s why most SEO experts will favor non-profit organizations, universities or government websites. Those websites benefit from great Trust Score normally. I call the trust factor a trust score because each SEO tool has its own nomenclature (TrustRank, TrustFlow, etc.). This is the Trust Score of Smashing Magazine:


Large preview

So of course, you can imagine that this makes Smashing Magazine a very desirable website to have a link on. This leads to hilarious situations like this comical email by a link builder trying to buy a link from me:


Large preview

Link Neighborhood

The notion of a “link neighborhood” means that if a website is spammy and links to another website, Google will be suspicious that the other website is spammy as well. This is important because sometimes, websites are targeted by negative SEO attacks. One of the quickest ways to sabotage a competitor’s organic visibility is to have a lot of spammy websites pointing to its website. This is where the notion of link neighborhood becomes incredibly important.

Freshness And Pertinence

Link signals tend to decay over time. That’s why it’s important to keep earning new links over time. This helps establish the pertinence of a website. But you have to be careful: If you keep earning links from hype websites that aren’t necessarily trustworthy, your website could be seen as pertinent but not trustworthy. It’s a fine balance between authority and pertinence.

Social Sharing

Search engines treat socially shared links differently than any other type of link. The SEO community is still debating how strong of a signal social links are.

The Importance Of A Link

Getting a link from a website that is considered a reputable and expert source of information is a highly valuable asset. Let’s use this article to do some good and give a link to someone in Web that deserves it. Meet Nicolas Steenhout, a great accessibility consultant in Montreal doing great work. Bonjour Monsieur! I hope this link helps give your work more visibility!

Common Linkbuilding Tactics

Here is a quick recap of what happens to some of us on a daily basis:

  • We receive some type of communication trying to get us to put things on our websites for strange reasons we don’t understand.
  • Someone requests or demands, depending on how combative their writing style is, that we guest blog for free on platforms that we do not know, trust or like.
  • We get folks peddling SEO services. They use scare tactics to push you to pay them for their services.
  • Websites get hacked for links…or worse.

Here are some of common linkbuilding tactics you should be aware of:

  • Broken linkbuilding
    If you notice a broken link in a quality website, you can email the owner and say what page the link is on and what could be a solid resource to replace the current webpage that’s no longer available. Of course, the replacement you offer just so happens to be from your own website that you want to rank in search engines.
  • Comment spam linkbuilding
    There is a reason why strange spammy comments keep trying to peddle certain products or websites – it’s called linkbuilding.
  • Negative SEO
    If you can’t be first because you are the best, then buy a bunch of links to make your competitors go down in Google. That’s basically what negative SEO is. Here is a real life case of negative SEO if you want to see how this can happen to any type of website owner, not just big startups or famous people.
  • Sponsored content linkbuilding
    I have had many bloggers complain to me because they had been duped by agencies “buying” a sponsored article for a year on their blog. They discovered later on that what the company actually bought was a link that they could control.
  • Hacking websites
    Oftentimes, websites will get hacked for SEO purposes. Because if you can’t rank honestly, then parasite good websites to rank no matter what! That’s the philosophy of some ruthless search engine optimization specialists. If you gain access to a website, you can place any link where you want, for as long as you want. As a website owner, it’s important that you secure your website and make sure nothing strange is going on in your content. Want to see what a hacked website can look like? I recently had a case where a very legitimate website in the IT sector was hacked to host and promote a discount NBA jersey store. This is the what the website looks like:


    Large preview

    However, what they were not aware of was that the website had been hacked. Upon analyzing their incoming links, it was clear that this IT focused website was known for “cheap NBA jerseys” and “wholesale NBA jerseys” than anything else. I wondered why, and found a lot of pages were receiving links:


    Large preview

    The wonderful developer team cleaned up the damage and made sure to patch any security breach they found. However, this specific hacker thrives in websites that have been hacked and are full of malware such as this one:


    Large preview

  • Link outreach
    If you get bombarded with emails asking you to review a product or add a link in your blog article, chances are that you have been targeted during a link outreach campaign. You can always decline or simply not answer this unsolicited email. On the flipside of the coin, if you get offers to place your links in some highly regarded publications, know that this is an offer the person is making you to place your links on certain website.
  • Guest blogging
    If someone asks you to create an article on their platform, the often want free quality content with your notoriety to promote it in order to garner links. If on the other hand, someone offers you free content for your website, chances are that it is for linkbuilding purposes.
  • PBN
    A Private Blog Network is a network of websites with great SEO metrics used to build links to a main website in order to help it rank higher in search engines. It means that someone usually ranks multiple websites high in Google in order to use them to place links that will boost the visibility of a chosen site. Google does not appreciate PBN efforts or link exchange efforts and routinely penalizes networks of websites.
  • Creating awesome content
    There are many linkbuilding tactics that push for the creation of tools, content or other types of media that is so good, so useful and so relevant that they will naturally garner links from other website owners. We won’t detail them here but they usually work well because they provide something useful that deserves to be shared with others!

The Hidden Survival Guide To Linkbuilding

Read this part if you are a website owner, a UX, a customer, a visitor, a blogger, my friend Igor (hi Igor, please read this!) or anyone else using search engines regularly to find information. Let’s get started by giving you access to the official Google guidelines on the matter. Website guidelines vary from search engine to search engine. You can check each search engine’s guidelines but oftentimes, the broader concepts of what qualifies as a good website in terms of SEO are the same.

The Ugly Truth: Not All Linkbuilding Is Bad

Google clearly disagrees with paying for links or selling links. However, keep this in mind: not all linkbuilding efforts are bad. Earlier in this article, I gave a shout out to a friend of mine because I know that it will help give his website some visibility in search engines. Offering a link is a way to show your support for a product, an article, a tool, a website, a person. It is a vote of confidence in their favor. If you go out of your way to do it, technically, that counts as linkbuilding. Linkbuilding is also a way to make money. Some website owners may leverage linkbuilding to earn money despite legal regulations and Google’s guidelines.

If You See Something, Say Something!

You can signal bad links and anything strange going on that may be related to a hack, malware or even paid links to Google. You can report bad links very easily. If you want to review the entire list of what constitutes a bad practices in Google’s eyes, you can head on over to this official documentation.

Make It Clear If You Accept Or Refuse Linkbuilding Offers

If you are a blogger, make sure you are aware of your rights and responsibilities when it comes to linkbuilding efforts. Make sure to update your key pages to reflect your linkbuilding policy. This could be done in the about page, the services page if you offer services or the contact page.

Take the time to specify if you accept of refuse commercial or affiliate links in the content of a guest blog post for example. This will also help avoid nasty linkbuilding surprises in the future.

Nofollow: You Can Have Sponsored Content And Still Respect The Guidelines!

So what do you do if you realize that someone is using your website to place a link? Well, if this is something that was done legally, you can fix the situation by placing an attribute on your link that will signal to search engine bots not to follow the link. A nofollow link is a way to make sure that links from sponsored posts are not going against Google’s guidelines. This type of link cancels the linkbuilding benefits as Google gives them no love because the nofollow tag in the code signals “do not take this link into account.” Website owners and administrators should know how to make a link into a nofollow link as it can be done quickly and easily.

This is what a nofollow link looks like in the code:




Large preview

So, what do you do if you are asked for a link in exchange for a review?

This is the most common way most bloggers are approached in order to get links placed on their websites. Here are some guidelines for bloggers that receive free products in exchange for reviews.

If you think your website is hacked for links, you must first secure your website and do a security audit. The second step would entail cleaning up the links and the third step includes submitting a disavow file to Google that signals any shady domains that may be pointing to you because of hacker activity.

Red Flag #1 : You Start Seeing Your Organic Traffic Go Down

If you haven’t changed anything and you see your organic traffic go down, make sure it’s not a link issue. You could have suffered an attack. We recommend you use the Google Search Console tool available to all website owners and administrators. You must validate that you own the website and then, you will be able to receive an alert if Google detects something is very wrong with your website. Careful, if something is wrong with your website, it could mean a penalty and cause a substantial organic traffic drop. To know more about the types of penalties and alerts Google Search Console provides, you can read an article on this topic or check the official documentation.

Red Flag #2: Downloading A Premium Theme Or Plugin For Free

This is a very underhanded technique to obtain links. Some individuals will pay for a premium theme or plugin or software and offer it for free on torrent websites or forums where free or hacked versions of premium products are made available. When someone downloads the theme and uses it on a website, the doctored version of theme is used to place links in the website. Oftentimes, the owners never notice that their website is hosting parasite links.

Red Flag #3: You Start Getting Strange Feedback About Your Website Or See Strange Content Appear

If your readers, customers, visitors or even Google Search Console start telling you about strange content or links showing up on your website, this means that it’s time for an SEO audit and a security audit to assess the damage done to your website. Something tells me that Schneiters Gold did not plan on ever offering the BEST Online Viagra OFFERS…




Large preview

Red Flag #4: You Get A Google Search Console Warning

If you get an email from the Google Search Console team telling you about some spam issues or other problems that cause you to break their guidelines, you should investigate immediately the source of the problem and fix the issue fast or you could risk a penalty.

Red Flag #5: The Link Looks Like It Could Be A Hidden Affiliate Link Or A Redirect

Always check the links before placing them. Click the links and see where they lead. You could be provided a link that looks like a high-quality content but instead, it points to a spammy page.

Make sure to ask if a link is an affiliate link. Affiliate links are links that contain information that helps track a sale back to the person who promoted the product. These affiliate partners get a cut each sale that is attributed to them. Companies like Amazon and Forever21 among others have affiliate programs. You do not want someone promoting a product purely for money and you do not want to lose the trust of search engines and human visitors.

Advice For Linkbuilders, Growth Hackers And Anyone Looking to Gain More Visibility In Search Engines

Vet a website before getting in touch

Go ahead, click on the link and check out the website before you do anything else. Otherwise, you will end up contacting your competitors, unrelated blogs, spammy websites, etc.

Read the advertising page

Most websites have a page, it can be the contact, advertise or about page, that lists the specs and guidelines to collaborate with the websites. Respect what’s written on there! Do not bother folks that clearly said they do not want to be contacted for links. No, you are not the one that will make them change their minds. Yes, we’re sure.

Avoid metric blindness

My very good friend Igor, proud owner of Igor.io, gets contacted all the time by linkbuilding companies. Why? Because their website was once upon a time (before they removed their incredible archive of technical articles) had incredible metrics. For reference, Igor has a fully responsive, accessible website and it looks like this:


igor.io


Large preview

But Igor’s weblog’s metrics look like this (and they looked even more enticing to SEOs the last time I checked):




Large preview

This meant that a lot of companies wanted to contact the owner of a website that had more than 1000 high-quality websites referring to it. But if they had bothered to check out Igor’s website, they would have seen that nothing was on there. Back in the days, this website just read: igor’s weblog and the archive was hidden in the code. You had to know where to look for it… or you would find it very easily if you happened to be a bot. That’s why the metrics were the so high: only a bot and those in the know would discover and share Igor’s content.

Know who you are talking to

I get emails telling me to ask my boss if the company can place a link on my website. Now, quick reminder, if you go on myriamjessier.com and contact me, the person with an email that contains the words myriam + jessier, chances are that you are talking to the owner herself, right? Which leads me to another point: write my name correctly please and do not address me as sir, or dear, or dear sir. This is a common issue that Stéphanie Walter has as half of the Internet doesn’t seem to know how to spell her name.




Large preview

Not knowing or ignoring legal guidelines and Google’s guidelines

If you do not disclose why you are asking for a link and that there could be a risk to a website selling you a link, then you are not being transparent.

Bonus Tip

Don’t reach out to experts who do what you do for a living. I receive linkbuilding offers (buying and selling) from other search engine optimization “specialists” all the time. If you found me on the web and are offering to sell me links because my website isn’t visible enough, then maybe, just maybe, my SEO efforts are working no?

Conclusion

We hope that you learned a few things about linkbuilding. Here is a quick recap:

  • There’s money in the banana stand and in linkbuilding.
  • Not all links are equal, key metrics are : authority, freshness, placement, relevancy.
  • People will go to extremes to get links so if a “great deal” is offered to you, look for the hidden link in there!
  • Secure your website to avoid SEO problems. If you make it hard work for hackers, they will often give up and move on to an easier prey.
  • If you want to help someone out, make sure you give them a link with a good anchor! It really helps!
Smashing Editorial
(ra, yk, il)


Read original article:

Linkbuilding: The Citizen’s Field Guide

Thumbnail

So You Want to Persuade Users? Make Things Simple!




So You Want to Persuade Users? Make Things Simple!

Lyndon Cerejo



(This article is kindly sponsored by Adobe.) The persuasive design toolbox is filled with powerful tools based on psychology. These tools range from Cialdini’s set of six principles of persuasion to ten times that number of Persuasive Patterns. Presented with all these methods, it can be tempting to use all of them to cover all possible bases, using a shotgun approach, hoping that one will resonate with your target users.

However, applying persuasion principles and patterns in a haphazard manner just ends up being persuasive design clutter. Like user experience design, designing for everyone is designing for no one. Randomly thrown together persuasive techniques will also make users feel manipulated, not in control, making them abandon the site or experience. The key to persuading your users is to keep it simple: using focused persuasive techniques and tactics that will work for your users.

Persuasion Funnel

AIDA is an acronym used in marketing and advertising to describe the stages that a customer goes through in the purchase process. The stages of Attention, Interest, Desire and Action, generically follow a series of cognitive (thinking) and affective (feeling) stages culminating in a behavioral (doing e.g. purchase or trial) stage. This should sound familiar since this is what we do through design, especially persuasive design.

When it comes to persuasive design, users go through a few stages between Awareness and Action, and the design should guide them from one stage to the next. I don’t have a clever acronym for it (yet), but the stages the design has to take the users through are:

  • Awareness
  • Relevant
  • Credible
  • Usable
  • Desirable
  • Persuasive
  • Action



(Large preview)

When users are contemplating an action (like booking a hotel room), they have to be aware of your site, app, or experience. Once they begin their journey on your site, they quickly evaluate the experience and either proceed to the next step or leave and go elsewhere. With fewer users continuing to subsequent stages, the number of users at each stage begins to resemble the shape of a funnel as shown above.

Let’s peek inside what could be going on in hypothetical users’ minds as they go through the experience of booking a hotel room for New Year’s Eve in Times Square, and some of the reasons they may drop off in each stage.

Awareness

“Hmmm… Where do I start? Hotel chains promise the lowest rate if we book directly with them, but I won’t be able to see other hotel options around Times Square. Hotel… Maybe I should try an online travel agency like Trivago (looks like the Trivago guy / Trivago girl advertising works!) to find a wider range of hotels. I’m going to also quickly Google it to see if there are other options.”

Users have to be aware of your site, app or experience to use it — Duh!

Relevant

“I found HotelTonight on Google. It looks like a great way to get rooms last minute, but not this far in advance — it’s not relevant to me.”

If your experience is not relevant to the task they are trying to accomplish, users will leave and try elsewhere. If your products or services are relevant, but not findable by the user, work on your navigation, search, and content layout to ensure your products and services are visible. Everything does not have to be one click away, but if the user gets the scent of information, or cues that make them think they are on the right path, they will follow the trail to that information.

Credible

“This design looks like it hasn’t been updated since the [GeoCities era](http://www.arngren.net/).

— Warning bells go off in head —

I’m out of here.”

Users are aware of many of the risks available online and look for trust indicators including a known brand and domain, secure site, professional design, real-world contact information and third-party certificates or badges. Incorporate these elements to create a comfort level for the user.

Usable

“I can’t figure out where things are in the navigation, and the search results had hundreds of unhelpful results. The homepage has nice big images, but that meant I had to scroll before I could see any real content.”

Usability is surprisingly still an issue with many sites. Follow User Experience best practices during design, and test with users to validate that the design is usable.

Desirable

“This reminds me of Craigslist — it is usable, but the design does not make me want to stay and use it. I’ll try that other hotel website that provides an immersive, interactive experience as I search for hotels.”

As much as we like to believe it, users’ decisions are not always rational, and very often driven by emotion, and we can address that through design. Usability is about making it work well; this is about making it beautiful as well.

In his book Emotional Design, Don Norman explains: “Attractive things do work better — their attractiveness produces positive emotions, causing mental processes to be more creative, more tolerant of minor difficulties.” Don talks about the three different aspects of design: visceral, behavioral, and reflective. Visceral design is about appearance, behavioral about the pleasure and effectiveness of use, and reflective design involves the rationalization and intellectualization of a product.

Persuasive

“Oh, Wow! That’s a long list of hotels, with plenty of availability for New Year’s Eve. There’s no real reason to book now. I’ll just come back to book after Thanksgiving…”

The user was interested, able, and willing, but the design did not motivate him to take intended action. Use relevant persuasion techniques that apply to your user to move them toward the desired action.


Examples of persuasive methods while shopping on Travelocity for a hotel room for New Year’s Eve.


Examples of persuasive methods while shopping on Travelocity for a hotel room for New Year’s Eve. (Large preview)

Action

“Oh, Wow! 65% of hotels are already booked in this area for New Year’s Eve. I better make a reservation now. . This looks like a nice hotel, and it also offers free cancellation – I’m reserving it now!”

The user who made it to this stage was interested, able, and willing, and the design nudged him to take intended action of making a reservation before leaving the site.

Persuasion is not about applying all available principles and patterns to your designs, but systematically identifying how you can address users’ barriers and motivators during each step of the journey, and guiding your users through the funnel to take the desired action.

The KISS Approach

Most of us are familiar with the acronym KISS: “Keep It Simple, Stupid,” a principle advocating simplicity as a key goal in design by avoiding unnecessary complexity. Let’s borrow that acronym for a 4-step approach to persuasive design.

Know The Right Behavior To Target

The first step is knowing the behavior you would like to target, and identifying the simplest action that can lead to that behavior change. Take the example of term life insurance companies who, to put it very bluntly, stand to benefit if their policyholders are healthy and don’t die while the policy is active. While those companies have a long-term ambitious goal of helping their policyholders lead healthy lives (mutually beneficial), that could be broken down into a simpler target behavior of walking 10,000 steps daily. This behavior is simple to understand, achieve, measure, and contributes to the long-term goal of healthier policyholders.

One such insurance company is offering new policyholders the latest Apple Watch for a low initial down payment ($25). The ongoing monthly payments can be waived each month that the policyholder leads an active lifestyle and exercises regularly (e.g. walks about 10,000 steps a day). About half the people who participated have achieved monthly goals, despite potential privacy implications.


John Hancock Term Life Insurance Apple Watch offer targets walking about 10,000 steps a day.


John Hancock Term Life Insurance Apple Watch offer targets walking about 10,000 steps a day. (Large preview)

Identify Barriers And Motivators

User research for persuasive design digs below the surface thinking level to the feeling level, and moves beyond the rational to the emotional level, as shown below. Getting to know your users at a deeper level will help you use psychology to focus your design to get users to engage in the target behavior identified above. User interviews that focus on users’ feelings and emotions are used to uncover barriers and motivators they consciously or subconsciously face while trying to achieve the target behavior. This helps us identify which blocks we need to weaken, and which motivators we should strengthen, through persuasive design techniques and tactics.


Tip of the iceberg user research diagram


(Large preview)

Simplify The Experience

Simplify the design experience of the first stages of the funnel, as users go through the mental verifications of relevancy, credibility, and usability of the experience. This includes making it easy for the user to find what they are looking for, credibility indicators like professional design, contact information, and third-party certificates or badges, as well as addressing usability issues. As Steve Krug put it very succinctly: “Don’t Make Me Think”.

Select Appropriate Triggers

Users who have made it this far in the process are interested in something you have to offer. As a designer, you have to nudge them to take the desired action. A good starting point is Robert Cialdini’s, six key principles of persuasion:

  1. Reciprocity
    People are obliged to give something back in exchange for receiving something.
  2. Scarcity
    People want more of those things they can have less of.
  3. Authority
    People follow the lead of credible, knowledgeable experts.
  4. Consistency
    People like to be consistent with the things they have previously said or done.
  5. Liking
    People prefer to say yes to those that they like.
  6. Consensus (Social Proof)
    Especially when they are uncertain, people will look to the actions and behaviors of others to determine their own.

These principles can be applied through dozens of different persuasive design patterns and methods, some of which have been previously published on Smashing Magazine (patterns, triggers), or in the books listed in the resources at the end. As you may notice, many persuasive patterns are related to UI patterns, because part of persuasion is reducing friction and simplifying what the user needs to do at any given point in time. For example, the persuasive pattern of Limited Choice can be realized through UI Pattern of Progressive Disclosure.

Given that there are dozens of patterns and methods (depending on where you look), it is important to selectively use methods that will resonate with your users. Applying all design patterns in the hope of some working will result in persuasion clutter and overwhelm the user, possibly driving them away from your site.

Examining Persuasion

Let’s take a closer look at the earlier example of the term life insurance through the eyes of someone who is motivated (shopping for life insurance) and has the ability (to pay monthly life insurance cost). Like me, let’s assume that this user was made aware of this through a sponsored post on Facebook. During the stages of awareness and relevance, there are a few persuasive triggers as shown below that make the user click “Learn More”.


facebook


(Large preview)

Clicking the “Learn More” button takes the user to a landing page that we will examine in sections for a persuasive flow:




(Large preview)

The user’s primary motivation in shopping for term life insurance is: “Protect Family,” and a big barrier is “High Cost.”

  1. Reputable Name (Credibility)
    Even if you’ve not heard of this company, John Hancock is a famous person and the term used as a synonym in the United States for one’s signature. The company reinforces it’s longevity later on the page.
  2. Toll-free Number (Credibility)
    Established and legitimate organization.
  3. Message Framing
    Live healthy, is also reinforced by the image of a family enjoying outdoors.
    “This life insurance product will help me live longer, lead a happy life like them, and protect my family in case something happens, and won’t cost much.”

  4. People Like Me & Association
    This family looks like mine (or the family next door) — I can see myself in this wide-open field (visceral and reflective triggers).
  5. Extrinsic Reward
    An Apple watch for $25 — that’s a bonus here!
  6. Visual Cueing
    The person in focus (stereotypical breadwinner) has his gaze directly focused at the form below, leading the user to the next step.
  7. Foot In The Door
    This quote won’t cost anything — zip, nada.
  8. Computer As A Social Actor
    The information takes a conversational tone and format, not the usual form in rows and columns. The information seems reasonable to generate a quote.
  9. Commitment & Consistency
    By filling this quick, easy, and free form, chances are that the user will act consistently and proceed when it comes to the next step (application), unless there’s another barrier (price, benefits, etc.)



    (Large preview)

  10. Control
    The user has a choice of devices.
  11. Extrinsic Rewards
    More rewards to be earned.
  12. Control
    The user controls how much they pay (the more active, the less you’ll pay). Also, in case the user does is not active, the cost is framed as just $13 (for a month).
  13. Credibility
    The company reinforces longevity and protector of America.
  14. Authority
    Licensed Coverage Coach (not just a sales agent).
  15. Flow
    One way to keep users in the flow and not get distracted is by disabling the social media links (which could raise the question: why display them?).

That took longer to dissect and read than it does in real life, where most of this is processed consciously and subconsciously in a few seconds, often with a glance or two.

Apart from the methods establishing credibility, the persuasive methods are used to strengthen the primary motivator of “Protect Family” (get insurance, extrinsic reward will help me live longer for my family), and weaken the barrier of “High Cost” (low monthly cost, additional savings, no ongoing watch payments). Note how they work together and don’t conflict or clutter the experience.

Conclusion

Persuasion is all around us, in our everyday lives. As designers, we can use ethical persuasive design methods to get users to take some action. With plenty of persuasive methods available, we have to be selective about what we use. We can use the KISS approach to keep it simple:

  • Know the right behavior to target
  • Identify barriers and motivators
  • Simplify the experience
  • Select appropriate triggers

KISS also reminds us to Keep It Simple & Straightforward, by selecting a simple target behavior, simplifying the experience for the user, and by applying persuasive techniques that will lead to the target behavior without overwhelming the user.

Further Reading

This article is part of the UX design series sponsored by Adobe. Adobe XD tool is made for a fast and fluid UX design process, as it lets you go from idea to prototype faster. Design, prototype, and share — all in one app. You can check out more inspiring projects created with Adobe XD on Behance, and also sign up for the Adobe experience design newsletter to stay updated and informed on the latest trends and insights for UX/UI design.

Smashing Editorial
(yk, il)


Read this article: 

So You Want to Persuade Users? Make Things Simple!

Thumbnail

Tripwire Marketing: Lure in More Customers With 12 Slam-Dunk Tripwire Ideas

tripwire marketing

You’re unhappy with your conversion rate. People just aren’t buying what you’re selling. The solution might lie in tripwire marketing. The term tripwire marketing might sound a little shady, like you’re trying to get one over on your customer. That’s not the case at all. Marketing and advertising experts have been using tripwire marketing for decades in one form or another, and it works just as well online as it does in brick-and-mortar sales. In fact, it’s even more effective because you can more easily stay in touch with the customer. What is tripwire marketing? And how does it work?…

The post Tripwire Marketing: Lure in More Customers With 12 Slam-Dunk Tripwire Ideas appeared first on The Daily Egg.

Follow this link:  

Tripwire Marketing: Lure in More Customers With 12 Slam-Dunk Tripwire Ideas

Thumbnail

The Holy Grail Of Reusable Components: Custom Elements, Shadow DOM, And NPM




The Holy Grail Of Reusable Components: Custom Elements, Shadow DOM, And NPM

Oliver Williams



For even the simplest of components, the cost in human-labour may have been significant. UX teams do usability testing. An array of stakeholders have to sign off on the design.

Developers conduct AB tests, accessibility audits, unit tests and cross-browser checks. Once you’ve solved a problem, you don’t want to repeat that effort. By building a reusable component library (rather than building everything from scratch), we can continuously utilize past efforts and avoid revisiting already solved design and development challenges.


A screenshot of Google’s material components website – showing various components.


Large preview

Building an arsenal of components is particularly useful for companies such as Google that own a considerable portfolio of websites all sharing a common brand. By codifying their UI into composable widgets, larger companies can both speed up development time and achieve consistency of both visual and user-interaction design across projects. There’s been a rise in interest in style guides and pattern libraries over the last several years. Given multiple developers and designers spread over multiple teams, large companies seek to attain consistency. We can do better than simple color swatches. What we need is easily distributable code.

Sharing And Reusing Code

Manually copy-and-pasting code is effortless. Keeping that code up-to-date, however, is a maintenance nightmare. Many developers, therefore, rely on a package manager to reuse code across projects. Despite its name, the Node Package Manager has become the unrivalled platform for front-end package management. There are currently over 700,000 packages in the NPM registry and billions of packages are downloaded every month. Any folder with a package.json file can be uploaded to NPM as a shareable package. While NPM is primarily associated with JavaScript, a package can include CSS and markup. NPM makes it easy to reuse and, importantly, update code. Rather than needing to amend code in myriad places, you change the code only in the package.

The Markup Problem

Sass and Javascript are easily portable with the use of import statements. Templating languages give HTML the same ability — templates can import other fragments of HTML in the form of partials. You can write the markup for your footer, for example, just once, then include it in other templates. To say there exists a multiplicity of templating languages would be an understatement. Tying yourself to just one severely limits the potential reusability of your code. The alternative is to copy-and-paste markup and to use NPM only for styles and javascript.

This is the approach taken by the Financial Times with their Origami component library. In her talk “Can’t You Just Make It More like Bootstrap?” Alice Bartlett concluded “there is no good way to let people include templates in their projects”. Speaking about his experience of maintaining a component library at Lonely Planet, Ian Feather reiterated the problems with this approach:

“Once they copy that code they are essentially cutting a version which needs to be maintained indefinitely. When they copied the markup for a working component it had an implicit link to a snapshot of the CSS at that point. If you then update the template or refactor the CSS, you need to update all versions of the template scattered around your site.”

A Solution: Web Components

Web components solve this problem by defining markup in JavaScript. The author of a component is free to alter markup, CSS, and Javascript. The consumer of the component can benefit from these upgrades without needing to trawl through a project altering code by hand. Syncing with the latest changes project-wide can be achieved with a terse npm update via terminal. Only the name of the component and its API need to stay consistent.

Installing a web component is as simple as typing npm install component-name into a terminal. The Javascript can be included with an import statement:

<script type="module">
import './node_modules/component-name/index.js';
</script>

Then you can use the component anywhere in your markup. Here is a simple example component that copies text to the clipboard.

See the Pen Simple web component demo by CSS GRID (@cssgrid) on CodePen.

A component-centric approach to front-end development has become ubiquitous, ushered in by Facebook’s React framework. Inevitably, given the pervasiveness of frameworks in modern front-end workflows, a number of companies have built component libraries using their framework of choice. Those components are reusable only within that particular framework.


A component from IBM’s Carbon Design System


A component from IBM’s Carbon Design System. For use in React applications only. Other significant examples of component libraries built in React include Atlaskit from Atlassian and Polaris from Shopify. (Large preview)

It’s rare for a sizeable company to have a uniform front-end and replatorming from one framework to another isn’t uncommon. Frameworks come and go. To enable the maximum amount of potential reuse across projects, we need components that are framework agnostic.


A screenshot from npmjs.com showing components that do that same thing built exclusively for particular javascript frameworks.


Searching for components via npmjs.com reveals a fragmented Javascript ecosystem. (Large preview)


A graph charting the popularity of frameworks over time. Ember, Knockout and Backbone have plunged in popularity, replaced by newer offerings.


The ever-changing popularity of frameworks over time. (Large preview)

“I have built web applications using: Dojo, Mootools, Prototype, jQuery, Backbone, Thorax, and React over the years…I would love to have been able to bring that killer Dojo component that I slaved over with me to my React app of today.”

Dion Almaer, Director of Engineering, Google

When we talk about a web component, we are talking about the combination of a custom element with shadow DOM. Custom Elements and shadow DOM are part of both the W3C DOM specification and the WHATWG DOM Standard — meaning web components are a web standard. Custom elements and shadow DOM are finally set to achieve cross-browser support this year. By using a standard part of the native web platform, we ensure that our components can survive the fast-moving cycle of front-end restructuring and architectural rethinks. Web components can be used with any templating language and any front-end framework — they’re truly cross-compatible and interoperable. They can be used everywhere from a WordPress blog to a single page application.


The Custom Elements Everywhere project by Rob Dodson documents the interoperability of web components with various client-side Javascript frameworks.


The Custom Elements Everywhere project by Rob Dodson documents the interoperability of web components with various client-side Javascript frameworks. React, the outlier here, will hopefully resolve these issues with React 17. (Large preview)

Making A Web Component

Defining A Custom Element

It’s always been possible to make up tag-names and have their content appear on the page.

<made-up-tag>Hello World!</made-up-tag>

HTML is designed to be fault tolerant. The above will render, even though it’s not a valid HTML element. There’s never been a good reason to do this — deviating from standardized tags has traditionally been a bad practice. By defining a new tag using the custom element API, however, we can augment HTML with reusable elements that have built-in functionality. Creating a custom element is much like creating a component in React — but here were extending HTMLElement.

class ExpandableBox extends HTMLElement 
      constructor() 
        super()
      
    }

A parameter-less call to super() must be the first statement in the constructor. The constructor should be used to set up initial state and default values and to set up any event listeners. A new custom element needs to be defined with a name for its HTML tag and the elements corresponding class:

customElements.define('expandable-box', ExpandableBox)

It’s a convention to capitalize class names. The syntax of the HTML tag is, however, more than a convention. What if browsers wanted to implement a new HTML element and they wanted to call it expandable-box? To prevent naming collisions, no new standardized HTML tags will include a dash. By contrast, the names of custom elements have to include a dash.

customElements.define('whatever', Whatever) // invalid
customElements.define('what-ever', Whatever) // valid

Custom Element Lifecycle

The API offers four custom element reactions — functions that can be defined within the class that will automatically be called in response to certain events in the lifecycle of a custom element.

connectedCallback is run when the custom element is added to the DOM.

connectedCallback() 
    console.log("custom element is on the page!")

This includes adding an element with Javascript:

document.body.appendChild(document.createElement("expandable-box")) //“custom element is on the page”

as well as simply including the element within the page with a HTML tag:

<expandable-box></expandable-box> // "custom element is on the page"

Any work that involves fetching resources or rendering should be in here.

disconnectedCallback is run when the custom element is removed from the DOM.

disconnectedCallback() 
    console.log("element has been removed")

document.querySelector("expandable-box").remove() //"element has been removed"

adoptedCallback is run when the custom element is adopted into a new document. You probably don’t need to worry about this one too often.

attributeChangedCallback is run when an attribute is added, changed, or removed. It can be used to listen for changes to both standardized native attributes like disabled or src, as well as any custom ones we make up. This is one of the most powerful aspects of custom elements as it enables the creation of a user-friendly API.

Custom Element Attributes

There are a great many HTML attributes. So that the browser doesn’t waste time calling our attributeChangedCallback when any attribute is changed, we need to provide a list of the attribute changes we want to listen for. For this example, we’re only interested in one.

static get observedAttributes() 
            return ['expanded']
        

So now our attributeChangedCallback will only be called when we change the value of the expanded attribute on the custom element, as it’s the only attribute we’ve listed.

HTML attributes can have corresponding values (think href, src, alt, value etc) while others are either true or false (e.g. disabled, selected, required). For an attribute with a corresponding value, we would include the following within the custom element’s class definition.

get yourCustomAttributeName() 
  return this.getAttribute('yourCustomAttributeName');

set yourCustomAttributeName(newValue) 
  this.setAttribute('yourCustomAttributeName', newValue);

For our example element, the attribute will either be true or false, so defining the getter and setter is a little different.

get expanded() 
  return this.hasAttribute('expanded')

        
// the second argument for setAttribute is mandatory, so we’ll use an empty string
set expanded(val) 
  if (val) 
    this.setAttribute('expanded', '');
  
  else 
    this.removeAttribute('expanded')
  
}

Now that the boilerplate has been dealt with, we can make use of attributeChangedCallback.

attributeChangedCallback(name, oldval, newval) 
  console.log(`the $name attribute has changed from $oldval to $newval!!`);
  // do something every time the attribute changes
}

Traditionally, configuring a Javascript component would have involved passing arguments to an init function. By utilising the attributeChangedCallback, its possible to make a custom element that’s configurable just with markup.

Shadow DOM and custom elements can be used separately, and you may find custom elements useful all by themselves. Unlike shadow DOM, they can be polyfilled. However, the two specs work well in conjunction.

Attaching Markup And Styles With Shadow DOM

So far, we’ve handled the behavior of a custom element. In regard to markup and styles, however, our custom element is equivalent to an empty unstyled <span>. To encapsulate HTML and CSS as part of the component, we need to attach a shadow DOM. It’s best to do this within the constructor function.

class FancyComponent extends HTMLElement 
        constructor() 
            super()
            var shadowRoot = this.attachShadow(mode: 'open')
            shadowRoot.innerHTML = `<h2>hello world!</h2>`
            }

Don’t worry about understanding what the mode means — its boilerplate you have to include, but you’ll pretty much always want open. This simple example component will just render the text “hello world”. Like most other HTML elements, a custom element can have children — but not by default. So far the above custom element we’ve defined won’t render any children to the screen. To display any content between the tags, we need to make use of a slot element.

shadowRoot.innerHTML = `
<h2>hello world!</h2>
<slot></slot>
`

We can use a style tag to apply some CSS to the component.

shadowRoot.innerHTML = 
`<style>
p 
color: red;

</style>
<h2>hello world!</h2>
<slot>some default content</slot>`

These styles will only apply to the component, so we are free to make use of element selectors without the styles affecting anything else of the page. This simplifies writing CSS, making naming conventions like BEM unnecessary.

Publishing A Component On NPM

NPM packages are published via the command line. Open a terminal window and move into a directory that you would like to turn into a reusable package. Then type the following commands into the terminal:

  1. If your project doesn’t already have a package.json, npm init will walk you through generating one.
  2. npm adduser links your machine to your NPM account. If you don’t have a preexisting account, it will create a new one for you.
  3. npm publish

NPM packages are published via the command line


Large preview

If all’s gone well, you now have a component in the NPM registry, ready to be installed and used in your own projects — and shared with the world.


An example of a component in the NPM registry, ready to be installed and used in your own projects.


Large preview

The web components API isn’t perfect. Custom elements are currently unable to include data in form submissions. The progressive enhancement story isn’t great. Dealing with accessibility isn’t as easy as it should be.

Although originally announced in 2011, browser support still isn’t universal. Firefox support is due later this year. Nevertheless, some high-profile websites (like Youtube) are already making use of them. Despite their current shortcomings, for universally shareable components they’re the singular option and in the future we can expect exciting additions to what they have to offer.

Smashing Editorial
(il, ra, yk)


See the original article here:

The Holy Grail Of Reusable Components: Custom Elements, Shadow DOM, And NPM

Thumbnail

Low Conversion Rate? 13 Reasons (And 13 Fantastic Solutions)

low-conversion-rate-9

A low conversion rate can harm your business by slowing your leads and sales to a trickly. Fortunately, there are plenty of ways to fix the problem. First, though, you need to know why you have a low conversion rate. What’s causing people to bounce from your site or read your content without any other engagement? Data and tools can help you identify the culprit, but it helps to know what red flags to consider. I’m going to take you through 13 potential reasons for your low conversion rate, then answer four common questions involving conversion rate metrics. 13 Reasons…

The post Low Conversion Rate? 13 Reasons (And 13 Fantastic Solutions) appeared first on The Daily Egg.

Visit link: 

Low Conversion Rate? 13 Reasons (And 13 Fantastic Solutions)

Thumbnail

How To Create A Flat Vector Illustration In Affinity Designer




How To Create A Flat Vector Illustration In Affinity Designer

Isabel Aracama



(This is a sponsored post.) If you are in the design world, chances are that you’ve already heard about Affinity Designer, a vector graphics editor for Apple’s macOS and Microsoft Windows.

It was July 2015 when Serif Europe launched the amazing software that many designers and illustrators like me are using now as their main tool for professional work. Unlike some other packages, its price is really affordable, there’s no subscription model and, as mentioned already, it’s available for both Macs and PCs.

In this article, I would like to walk you through just some of its very user-friendly main tools and features as an introduction to the software and to show you how we can create a nice flat vector illustration of a Volkswagen Beetle. The illustration will scale up to whatever resolution and size needed because no bitmaps will be used.

Note: As of today, July 11, Affinity Designer is also available for the iPad. Although the iPad app’s features and functionality almost completely match the desktop version of Affinity Designer, it relies much more on using the touch screen (and the Apple Pencil) and because of that, you may expect to find some differences in the workflows.


Final image that we’ll be creating in this tutorial.


Final image that we’ll be creating in this tutorial. (View large version)

I will also explain some of the decisions I take and methods I follow as I work. You know the old saying, “All roads lead to Rome”? In this case, many roads will take us where we’d like to get to, but some are better than others.

We will see how to work with the Pen tool to trace the main car outline, how to break curves and segments, how to convert objects into curves, and how to use the wonderful Corner tool. We will also, among other things, learn how to use the Gradient tool, what is a “Smart copy”, how to import a color palette from an image that we can use as a reference for our artwork, how to use masks, and how to create a halftone pattern. Of course, along the way, you will also learn some helpful keyboard shortcuts and commands.

Note: Affinity Designer has three work environments, referred to as “personas”. By default, Affinity Designer is set to the draw persona. To switch from the draw persona to the pixel persona or to the export persona, you have to click on one of the three icons located in the top-left corner of the main window. You can start working in the draw persona and switch to the pixel persona at any time, when you need to combine vectors and bitmaps.

The three work environments: draw persona (leftmost icon), bitmap persona (middle icon) and export persona (rightmost icon).
The three work environments: draw persona (leftmost icon), bitmap persona (middle icon) and export persona (rightmost icon). (View large version)

Introduction: The Flat Design Era

In recent years, we’ve seen the rise of “flat design”, in contrast to what is known as skeuomorphic representation in design.

To put it simply, flat design gets rid of the metaphors that skeuomorphic design uses to communicate with users, and we’ve seen these metaphors in design, especially in user interface design, for years. Apple had some of the best examples of skeuomorphism in its early iOS and app designs, and today it is widely used in many industries, such as music software and video games. With Microsoft’s (with Metro) and later Google’s material design and Apple’s iOS 7, mobile apps, user interfaces and most systems and OS’ have moved away from skeuomorphism, using it or elements of it as mere enhancements to a new design language (including gradients and shadows). As you can imagine, illustrations on these systems were also affected by the new design currents, and illustrators and designers started creating artwork that would be consistent with the new times and needs. A whole new world of flat icons, flat infographics and flat illustrations opened in front of our eyes.


iPhone’s home screen (iOS 6 versus iOS 7).


iPhone’s home screen (iOS 6 versus iOS 7). (View large version)




(Image source) (View large version)




(Image source) (View large version)




(Image source) (View large version)




(Image source) (View large version)

Let’s Draw A Flat Illustration!

I am providing here the source file for this work, so you can use it to explore it and to better follow along as we design it. If you do not yet have a copy of Affinity Designer, you can download a trial.

1. Canvas Settings

Open Affinity Designer, and create a new document by clicking Cmd + N (Mac) or Ctrl + N (Windows). Alternatively, you can go to “Menu” → “File” → “New”. Be sure not to check the “Create Artboard” box.

Set the type to “Web”, which will automatically set the field DPI to 72. It should be understood now as PPI, but we won’t dive into the details here. If you want to learn more on the topic, check the following two resources:

Also, remember that you can change this setting at any time. The vectors’ quality won’t be affected by scaling them.

Set the size to 2000 × 1300 pixels, and click “OK”.

Our white canvas is now set, but before we start, I’d suggest you first save this file and give it a name. So, go to “File” → “Save”, and name it “Beetle”.

2. Importing A Color Palette From An Image

One of the things I use a lot in Affinity Designer is its ability to import the colors contained in an image and creating a palette from them.

Let’s see how this is done.

For the illustration I want to draw, I thought of warm colors, like in a sunset, so I searched Google with this query: “warm colors yellows oranges reds palette”. From all the images it found, I chose one that I liked and copied it into Affinity Designer in my recently created canvas. (You can copy and paste the image to the canvas directly from the browser.)

If the Swatches panel isn’t open yet, use menu “View” → “Studio” → “Swatches”. Click the menu in the top-right corner of the panel, and select the option “Create Palette From Document”, and then click on “As Document Palette”. Click “OK” and you’ll see the colors contained in the image form a new palette in the Swatches panel. The default name for it will be “Palette” if you still haven’t saved your file with a name. In case you have, the name of this palette will be the same as your document, but if you want to rename it, simply go to the menu on the right in the Swatches panel again and select the option “Rename Palette”.

I will call it “Beetle Palette”.


Creating a palette from an image.


Creating a palette from an image. (View large version)

We can now get rid of that reference image, or simply hide it in the Layers panel. We will be using this palette as a guide to create our artwork with harmonious colors.

Interface: Before we continue, I will present a quick overview of the main sections of the user interface in Affinity Designer, and the names of some of the most used tools.


Main areas of the UI in Affinity Designer when using the draw persona.


Main areas of the UI in Affinity Designer when using the draw persona. (View large version)


Tools for the (default) draw persona in Affinity Designer.


Tools for the (default) draw persona in Affinity Designer. (View large version)

3. Creating The Background With The Gradient Tool

The next thing is to create a background. For this, go to the tools displayed on the left side, and select the Rectangle tool. Drag it along the canvas, making sure to give it an initial random fill color so that you can see it. The fill color chip is located in the top toolbar.


Click the Rectangle tool and drag it along the canvas. Fill it with a random color.


Click the Rectangle tool and drag it along the canvas. Fill it with a random color. (View large version)

Next, select the Fill tool (the color wheel icon, or press G on the keyboard), and in the top Context toolbar, select the type: “Linear”.


Select “Linear” from the Fill tool’s contextual menu.


Select “Linear” from the Fill tool’s contextual menu. (View large version)

We have several options here: “None” removes the fill color, “Solid” applies one solid color, and all of the rest are different types of gradients.

To straighten the gradient and make it vertical, place your cursor over one of the ends and pull. When you are near the vertical line, press Shift: This will make it perfectly vertical and perpendicular to the base of the canvas.

To straighten a linear gradient, pull from one end, and then press the Shift key to make it perfectly vertical.
To straighten a linear gradient, pull from one end, and then press the Shift key to make it perfectly vertical. (View large version)

Next, in the Context toolbar, click on the color chip, and you’ll see a dialog that corresponds exactly with the gradient we just applied. Click now on the color chip, and an additional dialog will open.

In the combo, click on the “Color” tab, and then select “RGB Hex Sliders”; in the field marked with a #, input the value: FE8876. Press “OK”. You’ll see now how the gradient has been updated to the new color. Repeat this action with the other color stop in the gradient dialog, and input this value: E1C372.

You should now have something like this:


Setting gradient colors.


Setting gradient colors (View large version)

Let’s go to the Layers panel and rename the layer to “Background”. Double-click on it to rename it, and then lock it (by clicking on the little lock icon in the top-right corner).

4. Drawing The Car Outline With The Pen Tool

The next thing we need to do is look for an image that will serve as our reference to draw the outline of the car. I searched Google for “Volkswagen Beetle side view”. From the images I found, I selected one of a green Beetle and copied and pasted it into my document. (Remember to lock the layer with the reference image, so that it doesn’t move accidentally.)

Next, in the side toolbar, select the Pen tool (or press P), zoom in a bit so that you can work more comfortably, and start tracing a segment, following the outline of the car in the picture. Give the stroke an 8-pixel width in the Stroke panel.

Note: You won’t need to create a layer, because the segments you trace will be automatically placed on top of the image.

The Pen tool is one of the most daunting tools for beginners, and it is obviously one of the most important tools to learn in vector graphics. While practice is needed to reach perfection, it is also a matter of understanding some simple actions that will help you use the tool better. Let’s dive into the details!

As you trace with the Pen tool in Affinity Designer, you will see two types of nodes: squared nodes appear first, and as you pull the handles, they will turn into rounded nodes.


Sharp, smooth nodes and handles on a path segment


Sharp, smooth nodes and handles on a path segment (View large version)

Affinity Designer comes with several pen modes, but we will only be using the default one, called “Pen Mode”, and as we trace the car, we will get rid of one of the handles by clicking Alt in such a way that the next section of the segment to be traced will be independent of the previous one, even if connected to it.

Here’s how to proceed. Select the Pen tool, click once, move some distance away, click a second time (a straight line will be created between nodes 1 and 2), drag the second node (this will create a curve), Alt-click the node to remove the second control handle, then proceed with node 3, and so on.

An alternative way would be to select the Pen tool, click once, move some distance away, click a second time (a straight line will be created between nodes 1 and 2), drag the second node (this will create a curve), then, without moving the mouse, Alt-click the second handle’s point to remove this handle, then proceed with node 3, and so on.

Trace the outline of the car and get rid of the handles we don’t need by Alt-clicking.
Trace the outline of the car and get rid of the handles we don’t need by Alt-clicking. (View large version)

Note: Don’ be afraid to trace segments that are not perfect. With time, you’ll get a better grip of the Pen tool. For now, it’s not very important that each node and line looks as we want it to look in the end. In fact, Affinity Designer makes it really easy to amend segments and nodes, so tracing a rough line to start is just fine. For more insight on how to easily use the Pen tool (for beginners), check out Isabel Aracama’s video tutorial.

5. Resculpting Segments And Using The Corner Tool

What we need now is to make all of those rough lines look smooth and curvy. First, we will pull the straight segments to smoothen them, and then we will improve them using the Corner tool.

Click the Node tool in the side toolbar, or select it by pressing A on your keyboard. Now, start pulling segments to follow the lines of your reference picture. You can also use the handles to help make the line take the shape you need by moving and pulling them accordingly. Just do it in such a way that it all fits the reference image, but don’t bother much if it’s not yet perfect. With the Node tool (A), you can both select and move nodes, but you can also click and drag the curves themselves to change them.

Resculpt and correct segments with the Node tool A.
Resculpt and correct segments with the Node tool (A). (View large version)

Once all of the segments are where we need them, we are going to smoothen their corners using the Corner tool (shortcut: C). This is one of my favorite tools in Affinity Designer. The live Corner tool allows you to adjust your nodes and segments to perfection. Select it by pressing C, or select it from the Tools sidebar. The method is pretty simple: Pass the corner tool over the sharp nodes (squared nodes) that you want to smoothen. If you need to, switch back to the Node tool (A) to adjust a section of a segment by pulling it or its handles. (Smooth nodes (rounded nodes) don’t allow for more softening, and they will display a smaller circle the moment you select the Corner tool.)




View large version




View large version

Use the Corner tool on sharp nodes to smoothen the lines.
Use the Corner tool on sharp nodes to smoothen the lines. (View large version)

Once our corners and segments look good, we’ll want to fill the shape and change the color of the stroke. Select the closed curve line that we just created for the car, click on the fill color chip, and in the HEX color field input FFCF23. Click on the stroke color chip beside it and input 131000.


This is what you should have after applying the fill color and stroke color.


This is what you should have after applying the fill color and stroke color. (View large version)

Create now a shape with the Pen tool, and fill it with black (000000). Place it behind the car’s bodywork (the yellow shape). The exact shape of the new object that you will create does not really matter, except that its bottom side needs to be straight, as in the image below. Place it behind the main bodywork (the yellow shape) via either the Layers panel or through the menu “Arrange” → “Back One”.


Black shape behind the car bodywork.


Black shape behind the car bodywork (View large version)

6. Creating The Wheels Using Smart Copy

We need to put the wheels in place next. In the Tools, pick the Ellipse tool, and drag over the canvas, creating a circle the same size as the wheel in the reference picture. Click Shift as you drag to make the circle proportionate. Additionally, holding Ctrl (Windows) or Cmd (Mac), you can create a perfect circle from the center out.

Note: If you need to, hide the layers created thus far to see better, or simply reduce their opacity temporarily. You can change the opacity by selecting any shape and pressing a number on the keyboard, from 1 to 9, where 1 will apply a 10% opacity and 9 a 90% opacity value. To reset the opacity to 100%, press 0 (zero).

Choose a random color that contrasts with the rest. I like to do so initially just so that I can see the shapes well contrasted and differentiated. When I am happy with them, I apply the final color. Set the opacity to 50% (click 5 on the keyboard) to be able to see through as you draw it.

Zoom into your wheel shape. Press Z to select the Zoom tool, and drag over the shape while holding Alt key, or double-click on the thumbnail corresponding to it in the Layers panel. (It doesn’t need to be previously selected, although this will help you to visually locate it in the Layers panel.)

We will now learn how to use Smart copy, and we will paste some concentric circles.

Select the circle and press Cmd + J (Mac) or Ctrl + J (Windows). A new circle will be placed on top of the original one. Select it. This command is found under “Edit” → “Duplicate”, and it’s also known as Smart copy or Smart duplicate.

Click Shift + Cmd (Mac) or Shift + Ctrl (Windows), and drag in to transform it into a smaller concentrical circle. Repeat three times, reducing a bit more in size each time, to fit your reference. Smart duplicating a shape by pressing Shift + Cmd (Mac) or Shift + Ctrl (Windows) will make the shape transform in a relative way. This will happen from your third smart-duplicated shape onwards.

smart copy via keyboard shortcuts
Smart copy via Cmd + J or Ctrl + J. (View large version)

So, we have our concentric circles for the wheel, and now we have to change the colors. Go to the Swatches panel, and in the previously created palette, choose colors that work well with the yellow that we have applied to the car’s bodywork. You can select a color and modify it slightly to adapt to what you think works best. We need to apply fill and stroke colors. Remember to give the stroke the same width as the rest of the car (8 pixels) except for the innermost circle, where we will apply a stroke of 11.5 pixels. Also, remember to put back to 100% the opacity of each concentric circle.

I chose these colors, from the outer to inner circles: 5D5100, 918A00, CFA204, E5DEAB.

Now we want to select and group all of them together. Select them all and press Cmd + G (Mac) or Ctrl + G (Windows). Name the new group “Front Wheel” in the Layers panel. Duplicate this group and, while pressing Shift, select it and drag along the canvas until it overlaps with the back wheel. Name the layer accordingly.


The car should look similar to this now.


The car should look similar to this now. (View large version)

7. Breaking Curves And Clipping Masks To Draw The Inner Lines Of The Car’s Bodywork

To keep working, either hide all layers or bring down the opacity so that they don’t get in your way. We need to trace the front and back fenders. We have to do the same as what we did for the main bodywork. Pick the Pen tool and trace an outline over it.

Once it is traced, modify it by using the handles, nodes and Corner tool. I also modified the black shape behind the car a bit, so that it shows a bit more in the lower part of the body work.


Fenders added to the car.


Fenders added to the car. (View large version)

Now we want to trace some of the inner lines that define the car. For this, we will duplicate the main yellow shape, remove its fill color and place it onto our illustration in the canvas.

Press A on the keyboard, and click on any of the bottom nodes of the segment. In the top Context toolbar, click on “Action” → “Break Curve”. You will see now that the selected node has turned into a red-outlined squared node. Click on it and pull anywhere. As you can see, the segment is now open. Click the Delete or Backspace key (Windows) or the Delete key (Mac), and do the same with all of the bottom nodes, leaving just the leftmost and rightmost ones, and also being very careful that what is left of the top section of the segment is not deformed at all.

(View large version)

I use this method for one main reason: Duplicating an existing line allows for a more consistent look and for more harmonious lines.

Select now the newly opened curve, and make it smaller in such a way that it fits into the main yellow shape when you place them on top of one another. In the Layers panel, drag this curve into the yellow shape layer to create a clipping mask. The reason for creating a clipping mask is simple: We want an object inside another object so that they do not overlap (i.e. both objects are visible), but one nested inside the other. Not doing so would result in some bits of the nested object being visible, which is not what we want; we need perfect, clean-cut lines.

Note: Clipping masks are not to be mistaken for masks. You will know you’re clipping and not masking because of the thumbnail (masks show a crop-like icon when applied) and because when you are about to clip, a blue stripe is displayed horizontally, a bit more than halfway across the layer. Masks, on the other hand, display a small vertical blue stripe beside the thumbnail.


Clipping versus masking in Affinity Designer


Clipping versus masking in Affinity Designer (View large version)

Clipping mask once it is applied
Clipping mask once it is applied (View large version)

Now that we have applied our clipping mask to insert the newly created segment inside the main shape of the car, I’ve broken some nodes and moved some others around a bit in order to place them exactly how I want. I’ve stretched the width a bit, and separated the front from the rest of the segment using exactly the same methods we’ve already seen. Then, I applied a bit more Corner tool to soften whatever I felt needed to be softened. Finally, with the Pen tool, I added some extra nodes and segments to create the rest of the inner lines that define the car.

Note: In order to select an object in a mask, a clipping mask or a group when not selecting the object directly in the Layers panel, you have to double-click until you select the object, or hold Ctrl (Windows) or Cmd (Mac) and click.

Adding extra lines to a segment.
Adding extra lines to a segment (View large version)

After some amendments and tweaking using the mentioned methods, our car looks like this:


How the car looks after a little tweaking of the segments and nodes


How the car looks after a little tweaking of the segments and nodes (View large version)

8. Drawing The Windows Using Some Primitive Shapes

In the side Toolbar, select the Rounded Rectangle tool. Drag on the canvas to create a shape. The size of the shape should fit in the car’s bodywork and look proportionate. No matter how you create it, you will be able to resize it later, so don’t worry much.

Note: When you create a shape with strokes and resize it, be sure to check “Scale with object” in the Stroke panel if you want the stroke to scale in proportion with the object. I recommend that you visually compare the difference between having this option checked and unchecked when you need to resize an object with a stroke.


Make sure this is checked if you plan to resize your artwork, so that it scales the strokes accordingly.


Make sure this is checked if you plan to resize your artwork, so that it scales the strokes accordingly. (View large version)

Once you have placed your rounded rectangle on the canvas, fill it with a blue-ish colour. I’ve used #93BBC1. Next, select it with the Node tool (press A). You will now see a little orange circle in the top-left corner. If you pull outwards or inwards, you’ll see how the angle in that corner changes. In the top Context toolbar, you can uncheck “Single radius”, and apply the angle you want to each corner of the rectangle individually. Uncheck it, and pull inwards on the tiny orange circle in the top-left corner. If you pull, you will be able to round it to a certain percentage, but you can also input the desired value in the input field for it, or even use the slider it comes with (it will show whether you’ve clicked on the little chevron). Let’s apply a value of 100%.




View large version


How the rounded rectangle primitive shape looks in default mode and how it changes when we uncheck the single radius box. Now we can manipulate the corners individually.


How the rounded rectangle primitive shape looks in default mode and how it changes when we uncheck the single radius box. Now we can manipulate the corners individually. (View large version)

Primitive shapes are not so flexible in terms of vector manipulation (compared to curves and lines), so, in order to apply further changes to such a shape (beyond fill, stroke, corners, width and height), we will need to convert it to curves.

Note: Once you convert a primitive shape into curves, there is no way to go back, and there will be no option to manipulate the shape through the little orange stops. If you need further tweaking, you will need to do it with the Corner tool.

Select the rectangle with the Node tool (A), and in the top Context toolbar, click the button “Convert to Curves”. The bounding box will disappear, and all of the nodes forming the shape will be shown. Also, note how in the Layers panel, the name of the object changes from “Rounded Rectangle” to “Curve”.

Now you need to manipulate the shape in order to create an object that looks like a car window. Look at the reference picture to get a better idea of how it should look. Also, tweak the rest of the drawn lines in the car, so that it all fits together nicely. Don’t worry if the shapes don’t look perfect (yet). Getting them right is a matter of practice! Using the Pen tool, help yourself with the Alt and Shift keys and observe how differently the segment nodes behave. After you have created the front window, go ahead and create the back one, following the same method.

We also need to create the reflections of the window, which we’ll do by drawing three rectangles, filling them with white color, overlapping them with a bit of offset from one another, and setting the opacity to 50%.

Place the cursor over the top bounding-box white circle, and when it turns into a curved arrow with two ends, move it to give the rectangles an angle. Create a clipping mask, dragging it over the window shape in the Layers panel as we saw before. You can also do this by following the following alternative methods:

  • Under the menu “Layer” → “Insertion” → “Insert Inside” the selected window object.
  • With the keyboard shortcut Ctrl + X (Windows) and Cmd + X (Mac), select your window object → “Edit” → “Paste Inside” (Ctrl/Cmd + Alt + V).

Repeat this for the back window. To add visual interest, you can duplicate the reflections and slightly change the rectangles’ opacities and widths.

Create the reflections on the windows, and clip them inside.
Create the reflections on the windows, and clip them inside. (View large version)

9. Adding Visual Interest: Halftone Pattern, Shadows And Reflections

Before we start with the shadows and reflections, we need to add an extra piece onto the car so that all of the elements look well integrated. Let’s create the piece that sits below the doors. It is a simple rectangle. Place it on the corresponding layer order, so that it looks like the picture below, and keep inserting all of the pieces together so that it looks compact. I will also move a bit the front fender to make the front shorter.


The car, once the final bodywork pieces have been placed and tweaks made. We’re getting there!


The car, once the final bodywork pieces have been placed and tweaks made. We’re getting there! (View large version)

Now let’s create the halftone pattern.

Grab the Pen tool (P) and trace a line on your canvas. In the Stroke panel (you can also do this in the Pen tool’s Context toolbar section for the stroke, at the top), set the size to something like 7 pixels. We can easily change this value later if needed. Select the “Dash” line style, and the rest of the dialog settings should be as follows:


Settings for the first part of creating the halftone pattern.


Settings for the first part of creating the halftone pattern. (View large version)

Now, duplicate this line, and place the new one below with a bit of an offset to the left.




View large version

Group both lines, duplicate this group with a Smart copy, and create something like this:


Smart copy the first two lines, and create the whole pattern.


Smart copy the first two lines, and create the whole pattern. (View large version)

When you drag a selection in Affinity Designer, only objects that are completely within the selection area will be selected. If you want to select all objects without having to drag over all of them completely, you have the following options:

  • Mac: Holding the (Ctrl) key will allow you to select all objects touching the selection marquee as you draw it.
  • Windows: Click and hold the left mouse button, start dragging a selection, and then click and hold the right mouse button as well. As you are holding both buttons, all objects touching the selection marquee will be selected.
  • Alternatively, you can make this behavior a global preference. On Mac, go to “Affinity Designer” → “Preferences” → “Tools”, and check “Select object when intersects with selection marquee”. On Windows, go to “Edit” → “Preferences” → “Tools”, and check “Select object when intersects with selection marquee”.

To make the illustration more interesting, we are going to vary the beginning and end of some of the lines a bit. To do this, we select the Node tool (A), and move the nodes a bit inwards.

It should now look like this:




View large version

To apply the pattern to our design, make sure everything is grouped, copy and paste it into our car artwork, reduce its opacity to 30%, and also reduce the size (making sure “Scale with object” is checked in the Stroke panel). We will then create a clipping mask. It is important to keep consistency in the angle, color and size of this pattern throughout the illustration.

Applying the halftone mask.
Applying the halftone mask (View large version)

Now, apply the halftone pattern to the back fender and to the car’s side; make sure to create a placeholder for it first, be it the fender itself or a new shape. Make some tweaks if you need to adapt the pattern to your drawing in a harmonious way. You can change the overall size, the dots’ size, the transparency, the angle and so on, but try to be consistent when applying these changes to the pattern bits.

For the shadow below the windows, I drew a curve to be the placeholder, and applied the color #CFA204 so that it looks darker.

10. Creating The Remaining Elements Of The Car

Now, it’s all about creating the rest of the elements that make up the car: the bumpers, the back wheel and the surf board, plus the design stickers.

  • The front and back lights
    For the front light, switch to the Segment tool and draw the shape. Then we need to rotate it a bit and place it somewhere below the car’s main bodywork. The same can be done for the back light but using the Rectangle tool. The colors are #FFDA9D for the front light and #FF0031 for the back light.
Creating the front light
Creating the front light (View large version)
  • Surfboard
    To create the surfboard, we will use the Ellipse tool and draw a long ellipse. Convert it to curves and pull up the lower segment, adjusting a bit the handles to give it the ideal shape.
Creating the surf board
Creating the surf board (View large version)

Now, just create two small rounded rectangles, with a little extra line on top for the board’s rack. Place them in a layer behind the car’s main body shape.


Board rack pieces


Board rack pieces (View large version)

With the Pen tool, add the rudder. Its color is #B2E3EF. And for the stroke, use a 6-pixel width and set the color to #131000.

  • Spare wheel
    Now let’s create the the spare wheel! Switch to the Rounded Rectangle tool. Drag over the canvas to draw a shape. Color it #34646C, and make the stroke #131000 and 8 pixels in size. The size of the spare wheel should fit the proportions of your car and should have the same diameter as the other wheels, or perhaps just a bit smaller. Pull the orange dots totally inwards, and give it a 45-degree angle. For the rack that holds the wheel, create a small piece with the Rectangle tool, and give it the same 45-degree angle, color it #4A8F99, and make the stroke #131000 and 4.5 pixels in size. Create the last piece that rests over the car in the same way, with a color of #34646C, and a stroke that is #131000 and 4.5 pixels in size.

Lastly, let’s create a shadow inside the wheel to add some more interest. For this, we’ll create a clipping mask and insert an ellipse shape with a color of #194147, without a stroke.

Note: We may want to create the same shadow effect for the car wheels. Use the Rectangle tool and a color of #312A00, create a clipping mask, and insert it in the wheel shape, placing it halfway.


Three simple shapes to draw the spare wheel and its rack


Three simple shapes to draw the spare wheel and its rack (View large version)

  • Bumpers
    For the bumpers, we will apply the boolean operation “add” to two basic shapes and then clip-mask a shadow, just as we did for the wheels.

Boolean operations are displayed in the section of icons labeled “Geometry” (Mac) and “Operations” (Windows). (Yes, the label names are inconsistent, but the Affinity team will likely update them in the near future, and one of the labels will become the default for both operating systems.) If you don’t see them in the upper toolbar, go to “View” → “Customize Toolbar”, and drag and drop them into the toolbar.

Important: If you want the operation to be non-destructive, hold the Alt key while clicking on the “Add” icon (to combine the two basic shapes).


Boolean operations: Add, Subtract, Intersect, Divide, Combine.


Boolean operations: Add, Subtract, Intersect, Divide, Combine. (View large version)


Applying the (destructive) Add operation to create a single shape from two shapes.


Applying the (destructive) Add operation to create a single shape from two shapes. (View large version)

Note: If you try to paste the “shadow” object inside the bumper, it will only work if the bumper is one whole object (a destructive operation). So, if you used Alt + “Add”, this will not work now. However, you can still work around this by converting the Compound shape (the result of a non-destructive operation that is a group of two objects) to one Curve (one whole vector object). You just need to click on the Compound shape, then in the menu go to “Layer” → “Convert to Curves” (or use the key combination Ctrl + Enter).

  • Back window
    We are still missing the back window, which we will create with the Pen tool, and the decoration for the car. For the two colored stripes, we need the Square tool and then clip-mask these two rectangles into the main bodywork. The size is 30 × 380 pixels, and the colors are #0AC8CE and #FF6500. Clip them by making sure you’ve put them on the right layer, so that the dark lines we drew before are above them.

  • Number 56
    For the number “56” decoration, use the Artistic Text tool (“T”), and type in “56”. Choose a nice font that matches the style of the illustration, or try the one I’ve used.

The color for the text object is #FFF3AD.

(I added an extra squared shape behind the back fender, which will look like the end of the exhaust pipe. The color is #000000.)

  • Color strips
    Now that we’ve done this, check the color stripes and the window they overlap with. As you can see (and because we put some transparency in the window glass), the orange stripe is visible through it. Let’s use some Boolean power again to fix this.

Bumpers and exhauster added. Check out the overlapped window and the orange stripe!


Bumpers and exhauster added. Check out the overlapped window and the orange stripe! (View large version)

Duplicate the window object. Select both the window object (the one you just duplicated) and the orange stripe in the Layers panel. Apply a “subtract” operation.


Stage 1, before the subtract operation.


Stage 1, before the subtract operation. (View large version)


tage 2, once the subtract operation is applied.


Stage 2, once the subtract operation is applied. (View large version)

Now, the orange stripe has the perfect shape, fitting the window in such a way that they don’t overlap.


Stripe and window with subtraction operation applied.


Stripe and window with subtraction operation applied. (View large version)

  • Smoke
    To create the smoke from the exhaust, draw a circle with a white stroke, 5.5 pixels in size and no fill. Transform it to curves and break one of its points. From the bottom node, trace a straight line with the Pen tool.

Duplicate this “broken” circle, and resize to smaller circles, and flip and place them so that they look like this:


Creating the exhaust smoke


Creating the exhaust smoke (View large version)

Note: Now that the car is finished, group all of its layers together. It will be much easier to keep working if you do so!

11. Creating The Ground And The Background Elements.

  • Ground
    Let’s trace a simple line for the ground, and add two bits breaking it in order to create visual interest and suggest a bit of movement. We also want to add an extra piece to create the ground. For this, we will use the Rectangle tool and draw a rectangle with a gradient color of #008799 for the left stop and #81BEC7 for the right stop. Give it 30% opacity.

Gradient for the ground piece and the grouped car layers for a clean view in the Layers panel.


Gradient for the ground piece and the grouped car layers for a clean view in the Layers panel. (View large version)

  • Clouds
    For the clouds, select the Cloud tool from the list of (primitive) vector shapes. Draw a cloud by holding Shift to keep the proportions. Make it white. Transform it into curves, and with the Node tool (A) select the bottom nodes and delete them. Sub-select the bottom-left and bottom-right nodes (after deleting all of the others), and then in the Context toolbar, select “Convert to Sharp” in the Convert section. This will make your bottom segment straight. Apply some transparency with the Transparency tool (Y), and duplicate this cloud. Place the clouds in your drawing, spread apart as you wish and in different sizes.

My clouds have 12 bubbles and an inner radius of 82%. You can do the same or change these values to your liking.

Creating the clouds with the Cloud tool and the Transparency tool
Creating the clouds with the Cloud tool and the Transparency tool (View large version)
  • Palm trees
    To create the palm trees, use the Crescent tool from the list of primitive shapes on the left. Give it a gradient color, with a left stop of #F05942 and a right stop of #D15846.

Drag to draw the crescent shape. Move its center of rotation to the bottom of the bounding box, and give it a -60-degree angle.

The center of rotation can be made visible in the Contextual toolbar section for the Move (and Node) tool. It looks like a little crosshair icon. When you click on it, the crosshair for moving the rotation center of an object will show. Duplicate it, either via Cmd + C and Cmd + V (Mac) or Ctrl + C and Ctrl + V (Windows), or by clicking and then Alt + dragging on the object, and move the angle of the new crescent to -96 degrees. Make it a bit smaller. Copy the two shapes and flip them horizontally.

I also created and extra crescent.

Creating the palm leaves
Create the palm leaves (View large version)

To create the indentations on the leaves, transform the object to curves, add a node with the Node tool, and pull inwards. To make the vortex sharp, use “Convert” → “Sharp”.

Creating the leaves’ indentations
Creating the leaves’ indentations (View large version)

Create the trunk of the palm tree with the Pen tool, group all of the shapes together, and apply an “add” boolean. This way, all of the shapes will transform into just one. Apply a 60% opacity to it.


The palm tree once the Add boolean operation has been applied.


The palm tree once the Add boolean operation has been applied (View large version)

Duplicate the tree shape several times, changing the sizes and tweaking to make the trees slightly different from one another. (Making them exactly the same would result in a less interesting image.)

The last thing we need to make is the sun.

  • The sun
    For this, simply draw an ellipse and apply a color of #FFFFBA to it. Apply a transparency with the Transparency tool (Y), where the bottom is transparent and gets opaque at the top.

Transparency applied to the sun shape


Transparency applied to the sun shape (View large version)

Now we will add some detail by overlapping several rounded rectangles over the sun circle and subtracting them (click Alt for a non-destructive action, if you prefer).

Applying a subtract operation
Applying a subtract operation (View large version)

Place your sun in the scene, and we are done!

12. A Note On The Stacking Order (And Naming Of Layers)

While you work, and as the number of objects (layers) grows, which will also make your illustration more and more complex, keep in mind the stacking order of your layers. The sooner you start naming the layers and placing them in the right order, the better. Also, lock those layers that you’re done with (especially for things such as the background), so that they don’t get in the way as you work.

In this illustration, the order of elements from bottom to top is:

  • background,
  • ground,
  • sun,
  • clouds,
  • palm trees,
  • car.

Conclusion

I hope you could follow all of the steps with no major problems and now better understand some of Affinity Designer’s main tools and actions. (Of course, if you have some questions or need help, leave a comment below!)

These tools will allow you to create not only flat illustrations, but many other kinds of artwork as well. The tools, actions and procedures we’ve used here are some of the most useful and common that designers and illustrators use daily (including me), be it for simple illustration projects or much more complex ones.

However, even my most complex illustrations usually need the same tools that we’ve seen in action in this tutorial! It’s mainly a matter of understanding how much you can get out of each tool.

Remember the few important tips, such as locking the layers that could get in your way (or using half-transparency), stacking the layers in the right order, and naming them, so that even the most complex of illustrations are easy to organize and work with. Practice often, and try to organize things so that your workflow improves — this will lead to better artwork and better time management as well.

Also, to learn more about how to create this type of illustration, check out the video tutorial that I posted on my YouTube channel.


The completed Volkswagen Beetle illustration.


The completed Volkswagen Beetle illustration. (View large version)

Smashing Editorial
(mb, ms, ra, yk, al, il)


Excerpt from: 

How To Create A Flat Vector Illustration In Affinity Designer

Thumbnail

Google Marketing Live: An Advertiser’s Take on the Highlights

Updates from the Google Marketing Live keynote

For advertisers, the Google Marketing keynote is a hotly anticipated annual event where we get to hear about all of the new features coming up in Google’s suite of marketing tools. It’s also a great indicator of what’s top of mind for Google, and what betas you can expect to roll out (or bug your Google rep to let you into early).

Yesterday’s presentation kicked off with consumer trends, then covered improvements and launches across a range of Google ad platforms. Throughout the event we heard data control and privacy come up often, reminding us that privacy is still a major theme of 2018. And while professional paid media managers may have found the keynote a bit of a bore, there were some decent things to get excited about too.

If you don’t have an hour to watch the full recording, read on for our key highlights (or skim ‘em, if that’s more your thing).

AdWords is no more

Whoah whoah, don’t panic. The ad platform that you know and love (and rely on for your business) is still intact. In fact, if you follow PPC news or read the Google Ads blog, you probably already heard about the shift from Google AdWords to Google Ads that’s coming at the end of this month. Like the old Google Ads interface, you’ve probably already forgotten about ‘AdWords’, right?

the new Google Ads rebrand takes effect July 24th

What’s actually changed?
Here’s a breakdown of what this rebrand means, and what terms to use so you sound smart in front of your boss and clients:

  • AdWords will become Google Ads.
  • DoubleClick and Google Analytics 360 will now be combined into Google Marketing Platform.
  • DoubleClick Search is now Search Ads 360.
  • The rebrand becomes official July 24th, 2018.

Page speed is critical (and more visibility means more control)

We recently shared that we’re close to launching a beta program for Accelerated Mobile Pages at Unbounce, and that page speed is a top priority for us as a leading landing page builder—so naturally we were nodding along yesterday morning as Anthony Chavez, Product Management Director at Google Ads, explained the impact that page speed can have on conversion rates.

Chavez opened his speed segment by reminding us that:

“even the best ads may not perform if your landing pages aren’t up to par, especially on mobile.”

Chavez admitted that landing page speed is often a lower priority for advertisers, who are focused on optimizing keywords, bids, and ad copy. When that’s not enough, “one of the best ways to get better performance on mobile is to improve the speed of your landing pages,” says Chavez. And we couldn’t agree more.

This is why we were giddy when he announced that Mobile Speed Score is now available in Google Ads. Mobile Speed Score is a new score telling you how fast your ad’s resulting landing pages are. This score is on a ten-point scale (ten being the fastest) and includes secret-sauce factors visible to Google—like the relationship between your mobile landing page speed and conversion rates. Plus, it’s updated daily, so you won’t have to wait weeks to figure out if your speed optimizations are working for you.

New from the Google Marketing Keynote: Landing page speed score

Since it’s a column built into your Google Ads account, you’ll be able to sort and filter the landing pages that could use some love. You can find this new column in the Landing Pages tab of your Google Ads account:

Access your landing page speed score in a new column

Chavez went on to suggest using AMP landing pages as a “powerful and easy way to supercharge your site speed,” something we can definitely agree with. By using AMP landing pages together with Mobile Speed Score, you’ll be leaps and bounds ahead of your competition.

Want to get even further ahead of your competition? Sign up for early access to Unbounce’s AMP beta program right here.

Search ads are going responsive

For a while now Google has been integrating machine learning and automation into its ad platform, and it looks like the future is no different. Much like last year’s launch of Smart Display campaigns, Google dedicated quite a bit of time to explaining Responsive Search Ads. However, this may not come as news to you as the Responsive Search Ads beta has been available to many advertisers for months already.

Similar to how Smart Display campaigns combine images with text on the fly, Responsive Search Ads combine headlines and descriptions from variations you’ve inputted to create an ad that’s deemed “most relevant to the searcher.” Ideally this means your ads will be more catered to each user and query, instead of serving up a rotation of generic ads.

This is a step forward in more personalized search results, but also means less control for advertisers, and makes it complicated to test ad copy. One big benefit, however, is that these ads can show up to 90% more copy than Expanded Text Ads, meaning you take over more real estate on the SERP. If this is the future of search ads, SEOs should be worried.

Your ad could show up to three 30-character headlines (vs. just one) and two 90-character description lines (compared to one 80-character description line). And PPC-er’s seem to be on board with this extra space, with the reaction mostly positive, if not a little hesitant:

Not seeing Responsive Search Ads as an option in your account? The beta is still rolling out to English-language advertisers and will be rolling out to more advertisers and languages throughout 2018.

Also, if you still prefer man over machine, you can continue to use Expanded Text Ads in your campaigns.

Even more assorted product updates & improvements

Better cross-device tracking

Tracking users across devices has always been a pain for paid advertisers, but this has been improving over the years. Google reaffirmed its commitment to solving this pain by announcing cross-device reporting and remarketing in Google Analytics (to what sounded like the largest applause of the keynote).

Google Shopping updates

If you’ve ever launched Product Listing Ads (PLAs) on Google Shopping, you know that it can be a whole other beast. Starting this year, Google will be rolling out Automated Feeds which create a feed by crawling your website (no more troubleshooting feeds). Keeping with the theme, Google also talked about the recently launched Smart Shopping campaigns that automatically optimize around a goal.

These changes will make PLAs a lot more accessible to advertisers, but oppositely could increase competition for those of us already advertising on Google Shopping. In fact, Smart Campaigns will soon be integrated with Shopify, meaning Shopify merchants will be able to manage their Smart Shopping campaigns without leaving the platform. This reduces barriers for the 600,000+ Shopify users that may have been previously intimidated by the Google Merchant Center.

Updates to YouTube

On the video side of things, Google announced that later this year they will be bringing a new option to TrueView for Reach ads. In addition to a call to action button, the new Form Ads will allow you to collect leads through a form directly on the ad. Because we didn’t see any examples of how these would look in the wild, I’ll say it sounds like this feature won’t be released very soon. For now though, I can guess it will be something similar to Facebook’s Lead Ads, maybe even more simple.

They also kept YouTube on the machine learning bandwagon, announcing Maximize Lift Bidding. They describe this as a bidding strategy to help you “reach people who are more likely to consider your brand after exposure to an ad.” Google added a bit more context to this feature—currently in beta—on its blog, saying, “it automatically adjusts bids at auction time to maximize the impact your video ads have on brand perception throughout the consumer journey.”

We’ll have to wait until it rolls out officially later this year to learn even more.

Machine learning for small business

If you run a small business, Google used a small slice of the keynote to remind you that you’re still an important customer. They announced the upcoming launch of something called Smart Campaigns, and—you guessed it—it involves machine learning. Google Ads is a sophisticated platform, but can still be intimidating for a small business, or a non-marketer.

Using information scanned from the company’s website and their Google My Business listing, the Smart Display campaign automatically generates ads on both search and display. The goal is to get small business owners up and running with ads as quickly as possible and to help them overcome the learning curve that can come with online advertising (or the cost of hiring an agency). After launch, the campaigns automatically optimize themselves.

Going further, the campaigns automatically generate quick and simple landing pages for small businesses, for when you’re running without a website. While these landing pages include super basic information like your location and phone number, you don’t get any control over brand messaging or even the images that get selected.

As a paid advertiser by trade myself, I’m wary of handing this much control over my ads to Google’s machine learning, but that doesn’t mean this can’t work for a small business customer. The audience for Smart Campaigns is an advertiser starting from scratch (as in, no website-from-scratch) so there would be no historical performance to compare to.

What all these updates mean

While not everything was technically fresh news at this year’s Google Marketing Live, we still had some interesting key takeaways.

What stood out the most to us at Unbounce was the critical need for fast landing pages, especially on mobile. Undeniably though, the strong thread throughout the keynote was the shift toward machine learning.

My prediction is that—over the coming months and years—Google will shift to more and more “Smart” features and campaigns until eventually machine learning becomes so intertwined that we drop the “Smart.” I’m not quite ready to give Google the wheel on all of my ad copy, bids, and optimization just yet, but I’m curious to see the data and hear the results as we move into this new era of online advertising.

Excerpt from:

Google Marketing Live: An Advertiser’s Take on the Highlights

Thumbnail

Better Collaboration By Bringing Designers Into The Code Review Process




Better Collaboration By Bringing Designers Into The Code Review Process

Ida Aalen



Smooth collaboration between developers and designers is something everyone aspires to, but it’s notoriously difficult. But with today’s advanced web, it’s difficult — if not impossible — to build a truly great product without collaborating across disciplines. Because of the range of technologies required to build a product, the product can only truly succeed when all disciplines — developers and designers, content creators, and user experience strategists — are deeply involved from the early stages of the project. When this happens, all ends of what it takes to build a product come naturally together into a unified whole, and a thus great product.

Because of this, no one is really promoting waterfall processes anymore. Nevertheless, involving other people early on, especially people from other disciplines, can feel scary. In the worst case scenario, it leads to “design by committee.”

Moreover, both designers and content strategists often have backgrounds in fields in which a sole creative genius is still the ideal. Having someone else proof your work can feel like a threat to your creativity.

So how can you involve people early on so that you’re avoiding the waterfall, but also making sure that you’re not setting yourself up for design by committee? I found my answer when learning about code reviews.

The Aha! Moment

In July 2017, I founded Confrere together with two developers, and we quickly hired our first engineer (I’m not a developer myself, I’m more of a UX or content designer). Our collaboration was running surprisingly smoothly, so much so that at our retrospectives, the recurring theme was that we all felt that we were “doing it right.”


Three people are smiling and sitting next to each other around a computer. From left to right, they are Dag-Inge (CTO), Ida (CPO) and Ingvild (Sr. Engineer).


Dag-Inge (CTO), myself (CPO) and Ingvild (Sr. Engineer). (Large preview)

I sat down with my colleagues to try to pinpoint what exactly it was that we were “doing right” so that we could try to preserve that feeling even as our company grew and our team expanded. We came to the realization that we all appreciated that the whole team was involved early on and that we were being honest and clear in our feedback to each other. Our CTO Dag-Inge added: “It works because we’re doing it as peers. You’re not being berated and just getting a list of faults”.

The word “peer” is what gave me the aha moment. I realized that those of us working within UX, design, and content have a lot to learn from developers when it comes to collaboration.

Peer reviewing in the form of code reviews is essential to how software gets built. To me, code reviews offer inspiration for improving collaboration within our own fields, but also a model for collaborating across fields and disciplines.

If you’re already familiar with code reviews, feel free to skip the next section.

What Is A Code Review?

A code review can be done in various ways. Today, the most typical form of code review happens in the way of so-called pull requests (using a technology called git). As illustrated below, the pull requests let other people on the team know that a developer has completed code that they wish to merge with the main code base. It also allows the team to review the code: they give feedback on the code before it gets merged, in case it needs improvement.

Pull requests have clearly defined roles: there is an author and a reviewer(s).


Ingvild and Dag-Inge is setting next to each other and smiling. An arrow indicated that Ingvild has sent code to Dag-Inge.


Ingvild (the author) requests a review from Dag-Inge (the reviewer). (Large preview)

As an example, let’s say our senior engineer Ingvild has made a change to Confrere’s sign-up flow. Before it is merged into the main code base and gets shipped, she (the author) creates a pull request to request a review from our CTO Dag-Inge (the reviewer). He won’t make any changes to her code, only add his comments.


Ingvild and Dag-Inge is setting next to each other. An arrow indicates that Dag-Inge has sent comments on code back to Ingvild.


Dag-Inge comments on Ingvild’s code. (Large preview)

It’s up to Ingvild how she wants to act on the feedback she received in the review. She’ll update her pull request with the changes she sees fit.


Ingvild and Dag-Inge are sitting next to each other. An arrow indicates that Ingvild is sending back her code to Dag-Inge, having looked through the code he commented on.


Ingvild updates her code with the changes she sees fit in light of Dag-Inge’s comments. (Large preview)

When the reviewer(s) approve the pull request, Ingvild can then merge her changes with the main code base.


Ingvild and Dag-Inge are sitting next to each other. A thumbs-up is displayed on the code review Dag-Inge has sent to Ingvild. And arrow indicates she pushes this code to the main repository.


After Dag-Inge gives the thumbs up, Ingvild can push the fix to production. (Large preview)

Why Bother Doing Code Review?

If you’ve never done code review, the process above might sound bureaucratic. If you have doubts, here’s a ton of blog posts and academic research about the advantages of code review.

Code reviews set the tone for the entire company that everything we do should be open to scrutiny from others, and that such scrutiny should be a welcome part of your workflow rather than viewed as threatening.

Bruce Johnson, co-founder of Full Story

Code review reduces risk. Having someone proof your work, and also knowing someone will proof your work, helps weed out
 errors and
 heightens quality. In addition, it ensures consistency and helps every team member familiarize with more of the code base.

When done right, code review also builds a culture for collaboration and openness. Trying to understand and critique other people’s work is an excellent way to learn, and so is getting honest feedback on your work.

Always having at least two people look over the code also curtails ideas of “my” code 
and “your” code.
 It’s our code.

Considering these advantages, a review shouldn’t just be for code.

Review Principles For All Disciplines, Not Just Code

With reviews, there is always one author and one or more reviewers. That means you can involve people early on without falling into design by committee.

First, I have to mention two important factors which will affect your team’s ability to do beneficial reviews. You don’t necessarily have to have mastered them, but as a minimum, you should aspire to the following:

  • You and your colleagues respect each other and each other’s disciplines.
  • You’re sufficiently self-assured in your own role so that you feel like you can both give and receive criticism (this is also connected to the team’s psychological safety).

Even if we’re not reviewing code, there’s a lot to learn from existing best practices for code reviews.

Within our team, we try to adhere to the following principles when doing reviews:

  1. Critique the work, 
not the author.
  2. Be critical, but remain 
affable and curious.
  3. Differentiate between a) Suggestions b) Requirements, c) Points that need discussion or clarification.
  4. Move discussions from
 text to face-to-face. (Video counts)
  5. Don’t forget to 
praise the good parts! What’s clever, creative, solid, original, funny, nice, and so on?

These principles weren’t actually written down until after we discussed why our collaboration was working so well. We all felt we were allowed to and expected to ask questions and suggest improvements already, and that our motivations were always about building something great together, and not about criticising another person.

Because we were being clear about what kind of feedback we were giving, and also remembered to praise each other’s good work, doing reviews was a positive force rather than a demotivating one.

An Example

To give you an idea of how our team uses review across disciplines and throughout a process, let’s look at how the different members of our team switched between the roles of author and reviewer when we created our sign-up flow.

Step 1: Requirements gathering

Author: Ida (UX)

Reviewers: Svein (strategy), Dag-Inge (engineering), Ingvild (engineering).


A whiteboard is showing rough sketches of a sign-up form. A man (Svein) and a woman (Ingvild) are smiling and discussing.


The team gathered around the whiteboard. Svein (CEO) to the left, Ingvild (Sr. Eng), to the right. (Large preview)

Whiteboard sessions can be exhausting if there’s no structure to them. To maintain productivity and creativity, we use the author/reviewer structure, even for something as seemingly basic as brainstorming on a whiteboard. In this case, in which we were coming up with the requirements for our sign-up flow, I got to be the author, and the rest of the team gave their feedback and acted as reviewers. Because they also knew they’d be able to review what I came up with in step 2 (plenty more opportunity for adjustments, suggestions, and improvements), we worked swiftly and were able to agree upon the requirements in under 2 hours.

Step 2: Mockup with microcopy

Author: Ida (UX)

Reviewers: Ingvild (engineering), Eivind (design), Svein (strategy).


A screenshot of a Google Doc mocking up a sign-up form with comments from team members Ingvild and Ida.


By mocking up in Google docs, it’s easy for people from all disciplines to provide feedback early on. (Large preview)

As an author, I created a mockup of the sign-up flow with microcopy. Did the sign-up flow make sense, from both the user and engineering perspective? And how could we improve the flow from a design and frontend perspective? At this stage, it was essential to work in a format in which it would be easy for all disciplines to give feedback (we opted for Google Docs, but it could also have been done with a tool like InvisionApp).

Step 3: Implementing the sign-up flow

Author: Ingvild (engineering)

Reviewer: Ida (UX) and Dag-Inge (engineering).

We had agreed upon the flow, the input fields, and the microcopy, and so it was up to Ingvild to implement it. Thanks to Surge, we can automatically create preview URLs of the changes so that people who can’t read code are able to give feedback at this stage as well.

Step 4: User testing

Author: Ida (UX)

Reviewer: The users.


Two women (Ida and a user) sitting next to eachother in front of a laptop.


Ida doing user testing on a small budget. (Large preview)

Yes, we consider user testing a form of review. We brought our newly built sign-up flow face-to-face with actual users. This step gave us a ton of insight, and the most significant changes in our sign-up flow came as a result.

Step 5: Design

Author: Eivind (design)

Reviewers: Ingvild (engineering) and Ida (UX).


A screenshot from Slack. Eivind, the designer, has posted a screenshot, and Ida replies with enthusiasm.


The first version of the sign-up flow was based on existing design components. In this stage, Eivind developed some new components to help improve the design. (Large preview)

When design suddenly shows up here in step 5, it might look a lot like a waterfall process. However, our designer Eivind had already been involved as a reviewer since step 2. He gave a bunch of useful feedback at that stage and was also able to start thinking about how we could improve the design of the sign-up flow beyond the existing modules in our design system. At this step, Eivind could also help solve some of the issues that we identified in the user testing.

Step 6: Implementation

Author: Ingvild (engineering)

Reviewer: Eivind (design), Ida (UX) and Dag-Inge (engineering).

And then we’re back to implementing.

Why review works

In summary, there’s always just one author, thus avoiding design by committee. By involving a range of disciplines as reviewers early on, we avoid having a waterfall process.

People can flag their concerns early and also start thinking about how they can contribute later on. The clearly defined roles keep the process on track.

Regular Review Walkthroughs

Taking inspiration from code walkthroughs, we also do regular review walkthroughs with different foci, guided by the following principles:

  • The walkthrough is done together.
  • One person is in charge of reviewing and documenting.
  • The idea is to identify issues, not necessarily to solve them.
  • Choose a format that gives as much context as possible, so that it’s easy to act upon the findings later (e.g. InvisionApp for visual reviews, Google Docs for text, and so on).

We’ve done review walkthroughs for things such as accessibility audits, reviewing feature requests, auditing the implementation of the design, and doing heuristic usability evaluations.

When we do our quarterly accessibility reviews, our accessibility consultant Joakim first goes through the interface and documents and prioritizes the issues he’s found in a shared Google Sheet. Joakim then walks us through the most important issues he’s identified.

Meeting face-to-face (or at least on video) to go through the issues helps create an environment for learning rather than a feeling of being supervised or micromanaged.


Three people in a sofa gathered around a laptop. They’re discussing and smiling.


Accessibility review: Joakim (right) walks Ingvild and Dag-Inge through the accessibility issues he found in his audit. (Large preview)

If you find yourself always being tied up with something that’s due for release, or fixing whatever is at the top of your inbox, reviews can help remedy that. If you set aside regular half days for reviewing work you’ve already done, you can identify issues before they become urgent. It can also help you refocus and make sure you’re priorities are keeping along the right lines. Your team should maybe not begin building that new feature before you’re confident that the existing features are living up to your standards.

User Testing Is A Form Of Review

An important motivation for code reviews is to reduce risk. By doing it every single time you introduce a change or add something new to your product, and not just when you suspect something is maybe not up to par, you diminish the chance of shipping bugs or subpar features. I believe we should look at user testing from the same perspective.

You see, if you want to reduce the risk of shipping with major usability issues, user testing has to be part of your process. Just having your UX designers review the interface isn’t enough. Several studies have found that even usability experts fail in identifying every actual usability problems. On average, 1 in 3 issues identified by experts were false alarms — they weren’t issues for users in practice. But worse, 1 in 2 issues that users did in fact have, were overlooked by the experts.

Skipping user testing is just as big a risk as skipping code review.

Does Review Mean Death To Creativity?

People working within design, user experience, and content often have educational backgrounds from art schools or maybe literature, in which the sole creator or creative artistic genius is hailed as the ideal. If you go back in history, this used to be the case for developers as well. Over time, this has changed by necessity as web development has grown more complex.

If you cling to the idea of creativity coming from somewhere deep within yourself, the idea of review might feel threatening or scary. Someone meddling in your half-finished work? Ouch. But if you think about creativity as something that can spring from many sources, including dialogue, collaboration, or any form of inspiration (whether from the outside or from someplace within you), then a review is only an asset and an opportunity.

As long as we’re building something for the web, there’s no way around collaborating with other people, be it within our own field or others. And a good idea will survive review.

Let’s create something great together.

Smashing Editorial
(rb, ra, yk, il)


Original article: 

Better Collaboration By Bringing Designers Into The Code Review Process

Thumbnail

Moving the needle: Strategic metric setting for your experimentation program

Once you have your metrics and KPIs set, you’ll want to devise a system for tracking and sharing your results….Read blog postabout:Moving the needle: Strategic metric setting for your experimentation program

The post Moving the needle: Strategic metric setting for your experimentation program appeared first on WiderFunnel Conversion Optimization.

See original article here: 

Moving the needle: Strategic metric setting for your experimentation program

Thumbnail

Poor Sales? Maybe You Need a Website Redesign: Here’s How

website redesign

Did you know that poor web design can hurt conversions and sales? An unattractive site deserves a website redesign. No matter what your company size or industry is, though, it’s crucial that you take a strategic approach to your website redesign. Know what isn’t working, what does currently work, and what goals you wish to achieve. Otherwise, how will you take advantage of your existing web traffic? Worse, what happens if your web design is causing people to avoid visiting your site at all? Let’s look at some of my favorite techniques for creating a website redesign strategy and implementing…

The post Poor Sales? Maybe You Need a Website Redesign: Here’s How appeared first on The Daily Egg.

View original article – 

Poor Sales? Maybe You Need a Website Redesign: Here’s How

Just another WordPress site