Popular Design News of the Week: June 29, 2020 – July 5, 2020

Original Source: https://www.webdesignerdepot.com/2020/07/popular-design-news-of-the-week-june-29-2020-july-5-2020/

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

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

Apple, Big Sur, and the Rise of Neumorphism

 

GIF Directions

 

How to Design a Sleek Dashboard UI

 

8+ Web Design Myths Busted: Old Ideas & Modern Best Practices

 

4 Unique ‘About Me’ Page Ideas to Inspire your own

 

Webdesign Toolbox – Discover the Newest and Best Resources for Web Designers

 

Altermind

 

$0 Marketing Budget? Here are 10 Creative Ways to Land Clients

 

Visual Storytelling for UI-UX Design with Examples

 

DeLorean Ipsum

 

How to Stay Transparent When WFH

 

Scraper AI – Automate Website Data Extraction in a Few Clicks

 

UX Website Audit: How UX Tests Can Make your Site like a 5-Star Resort

 

How Working from Home is Helping Me Design Better Products

 

SEO for Designers: A 101 Primer

 

18 Things Apple Announced for iOS 14 that We Want on Android

 

PEST – Pest is a Testing Framework with a Focus on Simplicity

 

7 Best Practices for Highly Relevant Email Automation

 

Font in Logo – Search Engine for Logos & Fonts

 

25 Most Common Web Developer Interview Questions and Answers

 

Online Illustrations: How to Draw Illustrations on your Computer

 

Introduction to UX Writing

 

8 Essential Bootstrap Components for your Web App

 

Writing Design in a French Style

 

Type Directors Club Shuts Down Amid Allegations of Racism

 

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

Source

p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

Mischievous take on classic cartoon characters in 3D

Original Source: http://feedproxy.google.com/~r/abduzeedo/~3/UKk5nAAerwE/mischievous-take-classic-cartoon-characters-3d

Mischievous take on classic cartoon characters in 3D
Mischievous take on classic cartoon characters in 3D

abduzeedo07.10.20

Gal Yosef, a 3D artist from Israel, has been working on a cartoon series of old and lovely characters like Mickey Mouse, Bugs Bunny… and bringing them to life in some mischievous, yet hilarious compositions. Because of this Gal in June he was featured as the 3D artist of the month from Autodesk. If you don’t know who Autodesk is, they are the makers of some of the most popular 3D applications like Maya, 3ds Max and AutoCAD.

I use a combination of software. For characters, I usually use Maya for modeling, look development, grooming, rigging, and animation. I’ll follow that up with Arnold for rendering. For anything hard surface, I use 3ds Max for look development, XGen for grooming, and Corona Renderer for rendering. I also generally use ZBrush for sculpting and paint with Substance Painter.

For more information make sure to check out

https://www.behance.net/galyosef

View this post on Instagram

After 2 months of work The “Iconic Series Vol.1” is finally done! And this time “Pooh Sold The Honey”. I've created this series gesture for these iconic characters that changed the world. These icons were the reason I've become a 3D Artist & Characters lover from the first beginning, so it's time to bring them to life. I've taken these art pieces to modern life, to show what would happen if they were brought to life these days For the full project: https://www.behance.net/gallery/99319065/Iconic-Series-Vol1 @wacom @louisvuitton @adobe @disney @warnerbrosentertainment @zbrushatpixologic @behance @autodesk @substance3d @photoshop @artstationhq #studioshare #autodeskmaya #autodesk3dsmax #disneyart #warnerbros #characters #galyosef #galyosefart #louisvuitton

A post shared by Gal Yosef (@galyosef) on


8 Design Secrets of B2B Vs B2C Websites

Original Source: https://www.webdesignerdepot.com/2020/07/design-secrets-of-b2b-vs-b2c-websites/

Web design clients come from a wide variety of backgrounds. One day, you’ll be designing a portfolio website for a voiceover artist, the next you’ll be creating a comprehensive ecommerce site for a leading retailer. In an ideal world, you’ll get to a point where you eventually specialize in a niche. However, you’ll need to master both avenues first.

The more time you spend in this industry, the more you’ll learn that every client comes with their own unique requirements and challenges to consider. However, there’s a particularly huge divide between the kind of web design projects you do for B2B clients, and the ones you do for B2C customers.

Both B2B (Business to Business) and B2C (Business to Consumer) websites need to be clear, concise, and aesthetically pleasing. They should always have a strong focus on user experience, and they need to work consistently across devices. However, being aware of the difference between B2B and B2C projects will help you to deliver better results to your customers.

Defining the Differences Between B2B and B2C Sites

Some web design trends remain consistent in any environment.

Whether you’re creating a site for a hairdresser, or a leading SaaS company, you’ll need to deliver responsive design, intuitive navigation, and excellent site security.

Your process is unlikely to differ from B2B to B2C much in terms of project milestones, phases, prototyping and wire-framing. The differences that arise between B2B and B2C projects often come in the approach you take to building certain elements.

Let’s take a closer look at the things you might need to consider:

1. The Target Audience

In any design project, it’s always important to keep the end customer in mind. Knowing your client’s target audience will help you to create both an image and a tone of voice that appeals to the right people.

B2B Websites

With B2B websites, you’ll be speaking to a range of highly-educated individuals who already have a general knowledge of your service. The aim here will be to show the end-user how you can help them achieve better results. For instance, m.io highlights “syncing communication” so you can “effortlessly chat” with your team.

The language and content of the website is all about highlighting the key benefits of the products, and the kind of outcomes that they can deliver. The Nielsen Norman Group reports that there’s often a lot of discussion between decision-makers when they’re checking out a B2B website.  

Designers need to work harder at convincing B2B buyers that they’re making the right decision. This is particularly true when you’re selling something like a software subscription that requires a lot of long—term investment.

B2C Websites

On the other hand, while B2B customers make decisions based on logic, information, and well-explained benefits, B2C customers are more influenced by emotion. They want quick solutions to their problems, and the opportunity to purchase from a brand that “understands” them.

Look at the Firebox website, for instance. It instantly highlights an ongoing sale at the top of the homepage, addressing any concerns a customer might have about price. That combined with a quirky layout full of authentic photos and bright colors means that customers are more inclined to take action.

2. The Purpose

Another factor that can vary from B2C to B2B websites, is the motive behind a customer’s purchase. Knowing what’s pushing a target audience to interact with a brand will help you to create a website that appeals to specific goals.

B2B Websites

B2B websites often aim to solve expensive and time-consuming problems for companies. To sell a decision-maker on the validity of a solution, it’s important to thoroughly explain what the solution is, how it works, and how it addressees a specific pain point.

Look at the Zoom website for instance, they don’t just tell people that they offer video conferencing, they address the practical applications of the platform:

B2C Websites

Consumers are a lot easier to appeal to in terms of emotional impact, because many of them come to a website looking to fulfill an urgent need. Because of this, many web designers can take advantage of things like urgency and demand to encourage conversions. For instance, look at this website from TravelZoo. It takes advantage of a customer’s desire to get away:

A B2B website needs to focus on providing information that helps companies to make more confident decisions. What’s more, with B2B sites, decisions are often made by several stakeholders, while B2C sites ask a single person to make a choice. A B2C website needs to address immediate concerns and connect with customers on an emotional level. B2C buyers still want to do their research on products or services, but the turnaround is much quicker, and often requires less information.

3. The Design Elements (Visual Appearance)

Just as the focus of your website design and the audience that you’re creating the experience for can differ from B2B to B2C websites, the visual elements of the design might change too.

B2B Websites

In most cases, B2B websites are all about presenting a highly professional and respectable image. You’ll notice a lot of safe and clear choices when it comes to typography and imagery. It’s unusual to see a B2B website that takes risks with things like illustrations and animations.

Look at the Green Geeks website for instance. Everything is laid out to encourage clarity and understanding. Information is easy to find, and there are no other issues that might distract a customer.

B2C Websites

On the other hand, B2C websites can be a little more daring. With so many different options to choose from, and most customers buying out of a sense of urgency or sudden demand, designers are under pressure to capture attention quick. This means that it’s much more likely to see large pieces of eye-catching imagery on B2C sites, with very little text.

Movement, like slideshows and animations often play more of a role here. Additionally, there’s a good chance that you’ll be able to experiment more aggressively with color. Take a look at the Yotel website, for instance. There’s very little textual information here, but the appeal of the website is conveyed through sliding images:

4. Website Content

The way that information is conveyed on a B2B website is very different to the messages portrayed on a B2C site. Usually, everything from the language, to the amount of content that you use for these projects will differ drastically.

B2B Websites

When designing for a B2B website, you’ll need to be careful with content, as you’ll be speaking to a very mixed audience. If your site caters to different industries, you’ll need to ensure that you show authority, without using too much jargon. Some companies even create different pages on their site for specific customers. The aspin.co.uk website covers the benefits from a company, sale and integration perspective:

Rather than try to talk to all business owners about their differing communication pains, G-Suite anticipates its audience and creates pages for each.

B2C Websites

Alternatively, B2C websites can make things a little simpler. For instance, on glossybox.co.uk, there’s no need to provide a ton of information for different types of shopper, designers can appeal to one audience, i.e. the “beauty addict”:

In both B2B and B2C websites, the aim of the content should always be to answer any questions that the end user might have.

5. CTA Buttons

Call to Action buttons are often a crucial part of the web design journey. However, it’s sometimes difficult to determine where they should be placed, or how many buttons you need.

B2B Websites

Because the decision to buy something won’t always happen immediately with a B2B website, these kinds of sites often use a variety of CTAs. For instance, you might have a “Request a Quote” button at the top of a page, as well as a Sign in button.

On the Klaviyo site, for instance, you can request a demo, sign up or log in:

You can place CTAs lower on the page with B2B websites too, as it’s more likely that your customers will be scrolling through the site to collect more information before they decide to buy.

B2C Websites

On the other hand, with B2C websites, you usually don’t need to give your visitors as many options. A single option to “Add to Cart”, or perhaps an extra choice to “Add to Favorites” is all your user will need. Customers need to instantly see what they need to do next as soon as they arrive on a page:

On the Evil Hair website, you immediately see how to add a product to your cart.

Remember, the sales process is a lot quicker with B2C customers. This means that you need your CTA buttons to be front and center as soon as someone clicks on a page.

6. Contact Forms

In a similar vein, the way that you design your contact forms will also depend on the end-user that the website wants to appeal to. There’s a very different process for getting in touch on a B2B website, compared to a B2C site.

B2B Websites

B2B websites often require longer contact forms, as clients need to collect additional information about a prospect’s position in a company, and what that company does. B2B companies need to share things like what they’re looking for in a service, and how many users they have, so a sales team knows what kind of demonstration to give.

As with any strategy for contact form design, you should always only include the fields that your client needs and no more. If you demand too much from any client, you could send them running in the opposite direction. Check out this straightforward option from Ironpaper, for instance:

The form addresses as many relevant questions as possible without overwhelming the customer. Because the site handles things like design, it makes sense that they would ask for a link to the company’s existing website.

B2C Websites

On a B2C website, there are very different approaches to contact forms. You may have a dedicated contact form on your website where people can get in touch if they have any questions. A FAQ page where customers can serve themselves is another great way to help your client stand out from the competition. Check out this option from River Island, for instance:

On the other hand, you might implement pop-up contact forms into a website if your client wants to collect emails for email marketing. In that case, it’s important to make sure that you’re only asking for the information you need, and nothing more.

The easier it is to sign up for a newsletter, the more likely it is that customers will do it. Being able to enter their name and email address and nothing else will make the signup seem less tasking.

7. Search Bars and Navigation

Whether you’re designing for B2B or B2C companies, navigation will always be a critical concern. End users need to find it easy to track down the information that they need about a company, whether they’re looking for a particular product or a blog.

B2B Websites

On a B2B website, the search bar often takes up a lot less prominence than it does on a B2C site. That’s because all of the information that a client needs, and the buttons they need to take their next steps, are already visible front-and-center.

As a designer, it will be your job to push as many people to convert as possible, by making the purchasing journey the most appealing path for visitors. For instance, on the Copper website, the “Try Free” buttons are much easier to see than “Continue with Google” or “Login”:

With B2B sites, the focus is on a very specific goal. Although navigation still needs to be available, it doesn’t need to be as obvious as it is on a B2C site.

B2C Websites

On the other hand, most B2C websites offer a wide range of products, and they’re perfectly happy for their customers to purchase anything, as long as they eventually convert. Because of this, they make navigation a much more significant part of the customer journey.

The search bar is often presented at the very top of the screen where customers can see it immediately. Additionally, there may be multiple pages within certain product categories, so that customers can browse through the items they’re most interested in. For instance, look at the homepage on the IWoot website:

The navigation elements in B2C websites need to be a lot more obvious, because consumers are more likely to use them when they’re searching through their options.

8. Social Proof and Testimonials

Finally, social proof is one of the things that will work well for improving conversions on any kind of website. When your customers aren’t sure whether or not they should buy from you, a review or testimonial could be just the thing to push them over the edge.

B2B Websites

On a B2B website, the decision-making process takes a lot longer. Because of this, it’s worth including as much social proof as possible in every part of the website. Client testimonials, reviews and ratings, and even high-profile company logos make all the difference. Many B2B websites include a page dedicated to case studies highlighting the success of other brands.

Your client might even go as far as to ask for a page that highlights their awards and recognition or showcases comparison tables that pit their products against the competition.

For instance, Authority Hacker has a “what the pros say about us” section as social proof:

B2C Websites

With a consumer website, you can include consumer ratings and reviews wherever you like. However, it’s most likely that you’ll want to have a place where customers can see the reviews of other clients on the product pages themselves. On the EMP website the company gives users the option to click on the star review section to jump to a different space on the page where testimonials are listed. This ensures that customers don’t have to scroll through a lot of excess information if they just want to add an item straight to their cart.

Designing for B2B vs B2C

In the world of web design, no two customers are ever the same. While you’ll need to adapt your processes to suit each customer you interact with, you can set your expectations in advance by learning the differences between B2B and B2C strategies.

 

Featured images by Chris Ross Harris and Mike Kononov.

Source

p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

Adobe Photoshop Camera: Free new app will transform your Insta feed

Original Source: http://feedproxy.google.com/~r/CreativeBloq/~3/RG3gfTPS77U/adobe-photoshop-camera

Creatives everywhere have been waiting for Photoshop on their phones for a long time, and Adobe has finally released Photoshop Camera on Android and iOS devices. Although it may not be exactly what professionals have been yearning for in terms of bringing Photoshop's capabilities to the small screen, it's a fun app that will have its uses – especially for social media users.

Photoshop Camera (now out of beta) is powered by Adobe’s Sensei AI, and gives users "real-time Photoshop-grade magic right from the viewfinder" with its powerful effects and filters. Essentially, it uses the AI technology to add flashy lens effects (you'll definitely want the best camera phone to fully enjoy this), and though you can do some basic photo-editing, it's limited to exposure, contrast, saturation and so on.

Want the real thing? Here's how to download Photoshop, and some top-class Photoshop tutorials to get you started. 

Get Adobe Creative Cloud

Photoshop Camera's effects are created by influencers and artists, with more added frequently, and Adobe has targeted younger users right off the bat with its inclusion of effects created by pop singer, Billie Eilish. The latest AI technology gives the camera some nifty auto-recognition tricks, which enables it to automatically recommend filters and effects that will best complement the photograph you're about to take. 

In truth, there may not yet be much here that isn't already found elsewhere (check out more options in our pick of the best photo-editing apps). However, the powerful technology has the capability for further innovation down the line, and the Adobe name means it'll be a platform for some standout creative work. 

The integrated features, which include the ability to publish to social media straight from the app, make this the perfect companion for a social media user, especially on visual platforms like Instagram. If you're still not using social media to its full extent, here's our guide packed full of social media tips for professional artists and designers.

Read more:

The best social media schedulers in 20205 tips for presenting your work on social media8 top social media platforms for artists and designers

Why Do Websites Look the Same (And Should We Care)?

Original Source: https://www.webdesignerdepot.com/2020/07/why-do-websites-look-the-same-and-should-we-care/

If we don’t question this kind of design homogenization, do we put ourselves at risk of perpetuating the same mistakes in the years to come? Or is it even a mistake to begin with?

Today, I’m going to look at four things that are likely causing this, and what you can do to break the mold.

1. Education

We used to have a design school in every city in the world, each with its own design style or, at the very least, the encouragement of its designers to be creative and come up with something new.

These days, though, traditional design education isn’t as popular as it once was. According to Design Census 2019, only about a third of working designers have a formal education and degree:

The rest have been trained through a variety of means:

Online learning (17%)
Self taught (12%)
Workshops (10%)
Mentorship (6%)
Certificate programs (4%)

Cost and convenience are definitely two factors influencing this shift towards online learning methods. And with a wealth of resources online to teach them how to design and code, why not go that route? Plus, designers have to keep learning new things in order to remain competitive, so it’s not as though a degree is the be-all and end-all of their design training.

Plus, there isn’t as much demand for it from employers. Unless you plan on working for one of the top global marketing agencies, many hiring companies just want to see proof in the form of a portfolio and maybe have you do a test job.

Now, I’m not saying that online courses and other informal design education don’t foster creativity. However, in order to make them cost-efficient and quick to get through, they have to focus on teaching essential best practices, which means less room for experimentation. Perhaps more importantly, their curriculums are guided by fewer voices. So, this could likely be one of the culprits.

2. Design Blogs and Vlogs

You have to wonder if all the design blogs out there (yes, like Webdesigner Depot) impair designers’ ability to break free from the homogeneity of websites.

I think the answer to that is both “yes,” and “no”.

Why, Yes?

What is the purpose of a web design blog? Mainly it’s to educate new and existing designers on best practices, new trends, and web standards.

By their very nature, they really should be teaching web designers the same kinds of things. Let me show you an example.

This is a Google search for “web design trends 2020”:

Most design blogs will publish trends predictions around January 1. And herein lies the problem. The writers/designers can only deviate so far from what we know to be true when writing on the same topic… so these sites end up with similar recommendations.

For instance, the top search results recommended similar things for 2020:

Dark mode
Hand-drawn illustrations
Immersive 3D
Glowing colors
Minimalist navigation
Geometric shapes
Inclusivity
Accessibility

When web designers receive the same guidance no matter where they turn, it’s only logical that they’d end up creating websites that adhere to those same practices.

Why, No?

Because I write for web design publications, I can tell you that there’s a big difference in the kinds of content some of them publish.

For instance, I find that WebDesigner Depot isn’t interested in rehashing what everyone else is writing about this month. We’re given topics that challenge us to think outside the box and present readers with meaningful insights and recommendations.

So, I think that finding design blogs that push the boundaries and don’t just want to recap what everyone else is saying is really important. That’s how web designers are going to master the basic skills they need to succeed while getting inspired to try new things.

3. Designs Tools and Frameworks

This is another one that’s not as cut and dried. I think it depends on the tools used and the intent to use them.

Where Issues Start to Arise

There are certain site builder solutions that you’re going to be hard-pressed to create something innovative with. The same goes with using templates from sources like Dribbble. It’s just the nature of the beast.

If your goal is to create a cheap website very quickly for a client, then you’re probably going to use a cheap builder to do so. With ready-made templates and a lot of the work already done for you, you can create something that looks good with little effort.

When you’re limited by time and cost, of course you’re going to rely on shortcuts like cheap site builders or boring (but professional) design templates.

How to be More Careful

You can run into these kinds of issues with more flexible content management systems like WordPress or frameworks like Bootstrap, too.

Whenever you rely heavily on ready-made templates, pre-defined styles, or pre-built components, you run the risk of someone else’s work informing your own.

The solution is simple: Use demos, templates, UI kits, and so on as a base. Let them lay down the foundation that you work from.

But if you want your website to look different from the sea of lookalikes, you’re going to have to spend much more time developing a unique visual style that’s equally as effective in its mission. Which also means moving beyond clients that have small budgets or low expectations.

4. User Data

Data gathering is an important part of the job you do as a web designer.

You research the target user (or the existing user, when applicable). You look at industry trends as well as the competition to formulate an idea of what you need to build and how you’re going to do it. And you also use resources like Nielsen Norman Group and Think with Google that put out definitive research on what users want.

Even with the most niche of audiences, consumers’ wants and needs are all basically the same. So, obviously, you have to design experiences that align with them. If you deviate too much from what they expect from your site or brand, you run the risk of creating too much friction.

Is This a Bad Thing?

It’s not in terms of usability. If we build simple, predictable and user-friendly interfaces based on data that successfully drive visitors to convert, that’s great. So long as the content remains strong and the UI attractive, there’s nothing wrong with that approach.

But…

This is the same issue presented by templates and site builders. If you do exactly what’s needed and not much more, your site is going to look and act just like everyone else’s. Which comes at the cost of your brand reputation.

Just look at Google’s Material Design. This design system may have made it easier for web and app designers to create new solutions that were user-friendly and responsive, but there was just too much spelled out. And this led to a slew of Material Design lookalikes everywhere you turned.

This is the whole reason why companies take the time to craft a unique selling proposition. Without a USP, brands become interchangeable in the eyes of consumers.

So, again, my suggestion here is to use data to formulate a strategy for building your website. But don’t forget to spend time adding a unique style, and voice of the brand to the site.

Wrap-Up

It seems like, despite all that we’ve learned to do, websites are becoming less and less diverse in terms of design. And I think a lot of that is due to the fact that it’s much easier to design websites today than it was ten, or even five years ago.

Modern-day education, resources, tools, and consumer data take a lot of the questions and the work out of building websites. Which is good… but only to a point.

Unless you’re building websites for clients who have absolutely no budget, you can’t afford to skimp on the creativity and personalization that will set their website apart. Yes, you need to adhere to tried-and-true practices and standards, but beyond that, you should be experimenting.

 

Featured image uses photo by Kari Shea.

Source

p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

Creating Tiny Desktop Apps With Tauri And Vue.js

Original Source: https://www.smashingmagazine.com/2020/07/tiny-desktop-apps-tauri-vuejs/

Creating Tiny Desktop Apps With Tauri And Vue.js

Creating Tiny Desktop Apps With Tauri And Vue.js

Kelvin Omereshone

2020-07-08T11:00:00+00:00
2020-07-09T18:33:48+00:00

Technology makes our lives better, not just users, but also creators (developers and designers). In this article, I’ll introduce you to Tauri. This article will be useful to you if:

you have been building applications on the web with HTML, CSS, and JavaScript, and you want to use the same technologies to create apps targeted at Windows, macOS, or Linux platforms;
you are already building cross-platform desktop apps with technologies like Electron, and you want to check out alternatives;
you want to build apps with web technologies for Linux distributions, such as PureOS;
you are a Rust enthusiast, and you’d like to apply it to build native cross-platform applications.

We will look at how to build a native cross-platform application from an existing web project. Let’s get to it!

Note: This article assumes you are comfortable with HTML, CSS, JavaScript, and Vue.js.

What Is Tauri?

The official website sums up Tauri well:

Tauri is a polyglot toolchain for building more secure native apps with both tiny and fast binaries. By “polyglot”, I mean that Tauri uses multiple programming languages. At the moment, Rust, JavaScript, and TypeScript are used. But there are plans to let you use Go, C++, Python, and more.
It lets you use any HTML and JavaScript-based front-end framework, such as Vue.js, React, or Angular, to build a native desktop app, and it can be integrated into any pipeline.
It helps you build and bundle binaries for major desktop platforms (mobile and WebAssembly coming soon).

So, basically, Tauri allows you to use web technologies to create tiny and secure native desktop apps.

On its GitHub page, Tauri is described as a framework-agnostic toolchain for building highly secure native apps that have tiny binaries (i.e. file size) and that are very fast (i.e. minimal RAM usage).

Why Not Electron?

A popular tool for using web technologies to build desktop applications is Electron.

However, Electron apps have a rather large bundle size, and they tend to take up a lot of memory when running. Here is how Tauri compares to Electron:

Bundle
The size of a Tauri app can be less than 600 KB.
Memory
The footprint of a Tauri app is less than half the size of an Electron app.
Licence
Relicensing is possible with Tauri, but not with Electron. Electron ships with Chromium right out of the box. However, Chromium includes a digital rights-management system named Widevine. The inclusion of Widevine in Chromium makes apps created with Electron frowned upon by users of platforms such as PureOS for the sole reason that it is not free/libre open-source software (FLOSS). Platforms like PureOS are verified by the Free Software Foundation (FSF). This means that they can only publish free and open-source software in their app stores.

In a nutshell, if your app is built with Electron, it will never be shipped officially in the PureOS store. This should be a concern for developers targeting such distributions.

More Features Of Tauri

Security is really important to the Tauri team. Apps created with Tauri are meant to be secure from the get-go.
Tauri is compatible with any front-end framework, so you don’t have to change your stack.
It has many design patterns to help you choose important features with simple configurations.

Pros Of Tauri

Tauri enables you to take the code base you’ve built for the web and turn it into a native desktop app, without changing a thing.
Although you could use Rust in a Tauri-based project, it is completely optional. If you did, you wouldn’t need to change anything in your original code base targeted for the web.

Real-World Tauri

If you have been part of the Vue.js community for a while, then you’ll have heard of Guillaume Chau, a member of the core team of Vue.js. He is responsible for the Vue.js command-line interface (CLI), as well as other awesome Vue.js libraries. He recently created guijs, which stands for “graphical user interface for JavaScript projects”. It is a Tauri-powered native desktop app to visually manage your JavaScript projects.

Guijs is an example of what is possible with Tauri, and the fact that a core member of the Vue.js team works on the app tells us that Tauri plays nicely with Vue.js (amongst other front-end frameworks). Check out the guijs repository on GitHub if you are interested. And, yes, it is open-source.

How Tauri Works

At a high level, Tauri uses Node.js to scaffold an HTML, CSS, and JavaScript rendering window as a user interface (UI), managed and bootstrapped by Rust. The product is a monolithic binary that can be distributed as common file types for Linux (deb/appimage), macOS (app/dmg), and Windows (exe/msi).

How Tauri Apps Are Made

A Tauri app is created via the following steps:

First, make an interface in your GUI framework, and prepare the HTML, CSS, and JavaScript for consumption.
The Tauri Node.js CLI takes it and rigs the Rust runner according to your configuration.
In development mode, it creates a WebView window, with debugging and Hot Module Reloading.
In build mode, it rigs the bundler and creates a final application according to your settings.

Setting Up Your Environment

Now that you know what Tauri is and how it works, let me walk you through setting up your machine for development with Tauri.

Note: The setup here is for Linux machines, but guides for macOS and for Windows are also available.

Linux Setup

The polyglot nature of Tauri means that it requires a number of tool dependencies. Let’s kick it off by installing some of the dependencies. Run the following:

$ sudo apt update && sudo apt install libwebkit2gtk-4.0-dev build-essential curl libssl-dev appmenu-gtk3-module

Once the above is successful, proceed to install Node.js (if you don’t already have it), because Tauri requires its runtime. You can do so by running this:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash

This will install nvm (Node.js version manager), which allows you to easily manage the Node.js runtime and easily switch between versions of Node.js. After it is installed, run this to see a list of Node.js versions:

nvm ls-remote

At the time of writing, the most recent version is 14.1.0. Install it like so:

nvm install v14.1.0

Once Node.js is fully set up, you would need to install the Rust compiler and the Rust package manager: Cargo. The command below would install both:

$ curl –proto ‘=https’ –tlsv1.2 -sSf https://sh.rustup.rs | sh

After running this command, make sure that Cargo and Rust are in your $PATH by running the following:

rust –version

If everything has gone well, this should return a version number.

According to the Tauri documentation, make sure you are on the latest version by running the following command:

$ rustup update stable

Voilà! You are one step closer to getting your machine 100% ready for Tauri. All that’s left now is to install the tauri-bundler crate. It’s best to quit your CLI, and run the command below in a new CLI window:

$ cargo install tauri-bundler –force

Eureka! If everything went all right, your machine is now ready for Tauri. Next up, we will get started integrating Tauri with Vue.js. Let’s get to it!

Yarn

The Tauri team recommends installing the Yarn package manager. So let’s install it this way:

npm install -g yarn

Then run the following:

yarn –version

If everything worked, a version number should have been returned.

Integrating Tauri With Vue.js

Now that we have Tauri installed, let’s bundle an existing web project. You can find the live demo of the project on Netlify. Go ahead and fork the repository, which will serve as a shell. After forking it, make sure to clone the fork by running this:

git clone https://github.com/[yourUserName]/nota-web

After cloning the project, run the following to install the dependencies:

yarn

Then, run this:

yarn serve

Your application should be running on localhost:8080. Kill the running server, and let’s install the Vue.js CLI plugin for Tauri.

vue-cli-plugin-tauri

The Tauri team created a Vue.js CLI plugin that quickly rigs and turns your Vue.js single-page application (SPA) into a tiny cross-platform desktop app that is both fast and secure. Let’s install that plugin:

vue add tauri

After the plugin is installed, which might take a while, it will ask you for a window title. Just type in nota and press “Enter”.

Let’s examine the changes introduced by the Tauri plugin.

package.json

The Tauri plugin added two scripts in the scripts section of our package.json file. They are:

“tauri:build”: “vue-cli-service tauri:build”,
“tauri:serve”: “vue-cli-service tauri:serve”

The tauri:serve script should be used during development. So let’s run it:

yarn tauri:serve

The above would download the Rust crates needed to start our app. After that, it will launch our app in development mode, where it will create a WebView window, with debugging and Hot Module Reloading!

src-tauri

You will also notice that the plugin added a src-tauri directory to the root of your app directory. Inside this directory are files and folders used by Tauri to configure your desktop app. Let’s check out the contents:

icons/
src/
build.rs
cmd.rs
main.rs
Cargo.lock
Cargo.toml
rustfmt.toml
tauri.conf.json
tauri.js

The only change we would need to make is in src-tauri/Cargo.toml. Cargo.toml is like the package.json file for Rust. Find the line below in Cargo.toml:

name = “app”

Change it to this:

name = “nota”

That’s all we need to change for this example!

Bundling

To bundle nota for your current platform, simply run this:

yarn tauri:build

Note: As with the development window, the first time you run this, it will take some time to collect the Rust crates and build everything. On subsequent runs, it will only need to rebuild the Tauri crates themselves.

When the above is completed, you should have a binary of nota for your current OS. For me, I have a .deb binary created in the src-tauri/target/release/bundle/deb/ directory.*

Going Cross-Platform

You probably noticed that the yarn tauri:build command just generated a binary for your operating system. So, let’s generate the binaries for other operating systems. To achieve this, we will set up a workflow on GitHub. We are using GitHub here to serve as a distribution medium for our cross-platform app. So, your users could just download the binaries in the “Release” tab of the project.
The workflow we would implement would automatically build our binaries for us via the power of GitHub actions. Let’s get to it.

Creating The Tauri Workflow

Thanks to Jacob Bolda, we have a workflow to automatically create and release cross-platform apps with Tauri on GitHub. Apart from building the binary for the various platforms (Linux, Mac, and Windows), the action would also upload the binary for you as a release on GitHub. It also uses the Create a Release action made by Jacob to achieve this.

To use this workflow, create a .github directory in the root of nota-web. In this directory, create another directory named workflows. We would then create a workflow file in .github/workflows/, and name it release-tauri-app.yml.

In release-tauri-app.yml, we would add a workflow that builds the binaries for Linux, macOS, and Windows. This workflow would also upload the binaries as a draft release on GitHub. The workflow would be triggered whenever we push to the master.

Open release-tauri-app.yml, and add the snippet below:

name: release-tauri-app

on:
push:
branches:
– master
paths:
– ‘**/package.json’

jobs:
check-build:
runs-on: ubuntu-latest
timeout-minutes: 30

steps:
— uses: actions/checkout@v2
— name: setup node
uses: actions/setup-node@v1
with:
node-version: 12
— name: install rust stable
uses: actions-rs/toolchain@v1
with:
toolchain: stable
profile: minimal
— name: install webkit2gtk
run: |
sudo apt-get update
sudo apt-get install -y webkit2gtk-4.0
— run: yarn
— name: build nota for tauri app
run: yarn build
— run: cargo install tauri-bundler –force
— name: build tauri app
run: yarn tauri:build

create-release:
needs: check-build
runs-on: ubuntu-latest
outputs:
RELEASE_UPLOAD_URL: ${{ steps.create_tauri_release.outputs.upload_url }}

steps:
— uses: actions/checkout@v2
— name: setup node
uses: actions/setup-node@v1
with:
node-version: 12
— name: get version
run: echo ::set-env name=PACKAGE_VERSION::$(node -p “require(‘./package.json’).version”)
— name: create release
id: create_tauri_release
uses: jbolda/create-release@v1.1.0
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
with:
tag_name: ${{ matrix.package.name }}-v${{ env.PACKAGE_VERSION }}
release_name: ‘Release nota app v${{ env.PACKAGE_VERSION }}’
body: ‘See the assets to download this version and install.’
draft: true
prerelease: false

create-and-upload-assets:
needs: create-release
runs-on: ${{ matrix.platform }}
timeout-minutes: 30

strategy:
fail-fast: false
matrix:
platform: [ubuntu-latest, macos-latest, windows-latest]
include:
— platform: ubuntu-latest
buildFolder: bundle/deb
ext: _0.1.0_amd64.deb
compressed: ”
— platform: macos-latest
buildFolder: bundle/osx
ext: .app
compressed: .tgz
— platform: windows-latest
buildFolder: ”
ext: .x64.msi
compressed: ”

steps:
— uses: actions/checkout@v2
— name: setup node
uses: actions/setup-node@v1
with:
node-version: 12
— name: install rust stable
uses: actions-rs/toolchain@v1
with:
toolchain: stable
profile: minimal
— name: install webkit2gtk (ubuntu only)
if: matrix.platform == ‘ubuntu-latest’
run: |
sudo apt-get update
sudo apt-get install -y webkit2gtk-4.0
— run: yarn
— name: build nota for tauri app
run: yarn build
— run: cargo install tauri-bundler –force
— name: build tauri app
run: yarn tauri:build
— name: compress (macos only)
if: matrix.platform == ‘macos-latest’
working-directory: ${{ format(‘./src-tauri/target/release/{0}’, matrix.buildFolder ) }}
run: tar -czf ${{ format(‘nota{0}{1}’, matrix.ext, matrix.compressed ) }} ${{ format(‘nota{0}’, matrix.ext ) }}
— name: upload release asset
id: upload-release-asset
uses: actions/upload-release-asset@v1.0.2
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
with:
upload_url: ${{ needs.create-release.outputs.RELEASE_UPLOAD_URL }}
asset_path: ${{ format(‘./src-tauri/target/release/{0}/nota{1}{2}’, matrix.buildFolder, matrix.ext, matrix.compressed ) }}
asset_name: ${{ format(‘nota{0}{1}’, matrix.ext, matrix.compressed ) }}
asset_content_type: application/zip
— name: build tauri app in debug mode
run: yarn tauri:build –debug
— name: compress (macos only)
if: matrix.platform == ‘macos-latest’
working-directory: ${{ format(‘./src-tauri/target/debug/{0}’, matrix.buildFolder ) }}
run: tar -czf ${{ format(‘nota{0}{1}’, matrix.ext, matrix.compressed ) }} ${{ format(‘nota{0}’, matrix.ext ) }}
— name: upload release asset with debug mode on
id: upload-release-asset-debug-mode
uses: actions/upload-release-asset@v1.0.2
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
with:
upload_url: ${{ needs.create-release.outputs.RELEASE_UPLOAD_URL }}
asset_path: ${{ format(‘./src-tauri/target/debug/{0}/nota{1}{2}’, matrix.buildFolder, matrix.ext, matrix.compressed ) }}
asset_name: ${{ format(‘nota-debug{0}{1}’, matrix.ext, matrix.compressed ) }}
asset_content_type: application/zip

To test the workflow, commit and push your changes to your fork’s master branch. After successfully pushing to GitHub, you can then click on the “Actions” tab in GitHub, then click on the “Check build” link to see the progress of the workflow.

Upon successful execution of the action, you can see the draft release in “Releases” on the repository page on GitHub. You can then go on to publish your release!

Conclusion

This article has introduced a polyglot toolchain for building secure, cross-platform, and tiny native applications. We’ve seen what Tauri is and how to incorporate it with Vue.js. Lastly, we bundled our first Tauri app by running yarn tauri:build, and we also used a GitHub action to create binaries for Linux, macOS, and Windows.

Let me know what you think of Tauri — I’d be excited to see what you build with it. You can join the Discord server if you have any questions.

The repository for this article is on GitHub. Also, see the binaries generated by the GitHub workflow.

Smashing Editorial
(ra, il, al)

Removing Panic From E-Commerce Shipping And Inventory Alerts

Original Source: https://www.smashingmagazine.com/2020/07/ecommerce-shipping-inventory-alerts/

Removing Panic From E-Commerce Shipping And Inventory Alerts

Removing Panic From E-Commerce Shipping And Inventory Alerts

Suzanne Scacca

2020-07-09T11:00:00+00:00
2020-07-09T16:34:18+00:00

When it comes to displaying shipping and inventory alerts on an e-commerce website, you have to be very careful about inciting panic in your shoppers.

“Item is out of stock.”

“Expect shipping delays.”

“Page does not exist.”

These words alone are enough to turn a pleasant shopping experience into a panicked and frustrating one.

You have to be very careful about how you design these notices on your site, too. You obviously want to inform visitors of changes that impact their shopping experience, but you don’t want panic to be the resulting emotion when your alert is seen.

Better Search UX

For large-scale and e-commerce sites, the search experience is an increasingly critical tool. You can vastly improve the experience for users with thoughtful microcopy and the right contextualization. Read a related article →

When people panic, the natural response is to find a way to regain some control over the situation. The problem is, that regained control usually comes at the expense of the business’s profits, trust, and customer loyalty.

Unfortunately, some of the design choices we make in terms of alerts can cause undue panic.

If you want to better control your shoppers’ responses and keep them on the path to conversion, keep reading.

Note: Because the following post was written during the coronavirus pandemic, many of the alerts you’re going to see are related to it. However, that doesn’t mean these tips aren’t valid for other panic-inducing situations — like when a storm destroys an area and it’s impossible to order anything in-store or online or like during the November shopping frenzy when out-of-stock inventory is commonplace.

1. Avoid Out-Of-Stock Notices When Possible

Colleen Kirk is a professor of marketing at the New York Institute of Technology and an expert on territorial shopping.

She has a great analogy to help us understand why this happens:

Have you ever felt as if another driver stole your parking spot or were upset when someone else nabbed the last sweater that you had your eye on? If so, you experienced psychological ownership. You can feel psychological ownership over pretty much anything that doesn’t belong to you, from the last chocolate truffle in a display case to the dream home you found on Zillow and even intangible things like ideas.

When it comes to shopping in person, people exhibit territorial shopping traits by placing their items in a shopping cart. Or when they put a separator bar between their items on a conveyor belt and the person’s behind them.

We don’t really have that luxury on a website. The best we can do is enable shoppers to save their items to their cart or a wishlist, but that doesn’t keep the items from selling out before they have a chance to buy them.

This can lead to huge problems, especially when a shopper has gotten excited about that toy or shirt they “put aside”, only to discover a few hours later that the item is gone or no longer available.

The worst thing you could do is to remove out-of-stock product pages. You don’t want shoppers running into a 404 page and experiencing not just panic but also confusion and frustration.

While not as bad, I’d also recommend against displaying an inactive “Sold Out” or “Out of Stock” notice or button to shoppers as Olivela has done here:

Olivela 'sold out' notice and inactive button for upcycled denim mask

The Olivela website displays an inactive ‘Sold Out’ button for its denim mask product. (Source: Olivela) (Large preview)

Seeing this kind of feels like Google Maps directing you to your destination, only for you to end up at the edge of a lake where there’s supposed to be a road.

“Why the heck did you even send me here?”, is what your shoppers are going to wonder. And then they’re going to have to turn around and try to find something comparable to buy instead.

There are better ways to handle this that will also reduce the chances of your shoppers panic-buying a second-rate substitute for the item they really wanted. And this plays into the idea of territorial shopping (but in a healthy way).

This is what Target does when an item is “temporarily out of stock”:

Target out of stock product - 'Notify me when it’s back' button

Target provides shoppers with the option to get notified when out-of-stock items become available. (Source: Target) (Large preview)

Rather than display an unclickable button and just completely shut down shoppers’ hopes of getting the item, a “Notify me when it’s back” button is presented. This is a more positive approach to handling out-of-stock inventory and, if customers really want the item, they’re more likely to use it rather than settle for something else or try another site altogether. (I’ll talk about the “Pick it up” option down below.)

Another way you can handle this is to do what Summersalt does and turn your “Sold Out” button into a “Pre-order” one:

Summersalt 'Pre-order' button for out-of-stock items

Summersalt provides shoppers with ‘Pre-order’ button for out-of-stock items. (Source: Summersalt) (Large preview)

What’s nice about this button is that it not only empowers shoppers to secure the currently unavailable item they have their eyes on, but it tells them exactly when they will get it.

So, if you know when inventory will be restored, this is a better option than the “Notify” button as there’s more transparency about availability.

2. Don’t Over-Promise Or Give Your Shoppers False Hope

It’s a good idea to keep your shoppers informed about how external situations may impact their online shopping experience. And you can use key areas like the website’s sticky banner or a promotional banner on the homepage to do that.

That said, be very careful what you promote.

Special notices aren’t the kinds of things that get ignored the way that cookie consent notices or lead generation pop-ups do.

Consumers know to look at these areas for things like promo codes and sales event details.

If you put anything else in there, you better make sure the notice is positive, useful and truthful.

Let’s take a look at what’s going on with the Gap website:

Gap’s 'Taking Care Takes Time' banner notice on website

Gap’s ‘Taking Care Takes Time’ notice addresses shipping delays due to COVID-19. (Source: Gap) (Large preview)

Gap has three notices that appear in the header of its site:

In black: “Free shipping on $25+, free returns on all orders.”
In white: “Taking Care Takes Time. We’ve implemented special procedures as we work to keep our teams — and you — safe, so shipping of orders may be delayed.”
In blue: “Extra 50% off markdowns + more.”

It’s overwhelming. And it’s almost as if they wanted the alert in the middle to be ignored (or missed altogether) as it’s sandwiched between two very sharp-looking banners that promote attractive deals.

If your alert is related to something that’s going to affect the shoppers’ experience, don’t bury it and don’t try to massage it with overly optimistic messaging. Also, don’t contradict it with another alert that suggests the first one isn’t one to worry about.

Here’s why I say that:

Gap promotion for 'Our Masks are Back' during COVID-19

Gap promotes ‘Our Masks are Back’ on the homepage of its website. (Source: Gap) (Large preview)

This message is problematic for a couple of reasons. For one, Gap’s masks aren’t really “back” if they’re only available for pre-order. Second, it runs contrary to the top banner’s message about shipping delays.

Unsurprisingly, shoppers did not react well to this hyped-up announcement:

Gap backlash on Facebook during COVID-19

Gap receives an extraordinary amount of backlash on Facebook over mismanagement of shipping and promotions. (Source: Gap) (Large preview)

When Facebook ran a promotion on Facebook about the masks, it received a huge amount of backlash from customers. Many customers didn’t want to hear about the masks because they’d been waiting over a month for existing orders to ship and couldn’t get a customer service rep to talk to them. There were also complaints about items being canceled from their orders, only for them to magically become “available” again in the store.

A website that’s handling similar circumstances well right now is Urban Outfitters:

Urban Outfitters curbside pickup - sticky notice on website

Urban Outfitters is focusing on the positive of a bad situation. (Source: Urban Outfitters) (Large preview)

Urban Outfitters, like a lot of non-essential retailers right now, has had to make some adjustments in order to stay alive. But rather than displaying a notice alerting online shoppers to shipping delays like many of its counterparts, Urban Outfitters has turned it into a positive.

The banner reads: “Your local UO is now offering curbside pickup!”

There’s no hidden message here that tries to explain away the brand’s bad behavior. There’s no greedy cash-grab, promising deep discounts for people who shop with them despite likely delays in shipping. There’s no overhyping of a promise they can’t possibly keep.

This is an actionable offer.

What I’d suggest for e-commerce businesses that want to keep customers on their side — even during a tumultuous time — is to keep their alerts simple, honest and useful. And if you’re going to promote multiple ones, make sure they tell the same story.

3. Soften The Blow By Promoting Multichannel Options

I recently signed a new lease on an apartment but was dismayed to discover that my move-in date and furniture delivery date wouldn’t line up because of shipping delays. I was well-aware of this when I made the purchase, but I wasn’t as prepared as I wanted to be. And because we were in the middle of a city-wide lockdown, I was unable to crash with friends who live over the state border.

I thought, “I’ll sleep on an air mattress. No biggie.” But then remembered I left mine behind in Delaware. So, I had to figure out a way to buy a cheap air mattress.

All of my go-to e-commerce websites had shipping delay alerts. And as I perused their available products (which there were very few), my panic only worsened. Until I discovered a website that offered BOPIS.

Buy-online-pickup-in-store is a shopping trend that’s proven very popular with consumers. According to data from Doddle and a report from Business Insider:

68% of U.S. shoppers have used BOPIS on numerous occasions.
50% have chosen where to shop based on BOPIS availability.
Shipping costs (avoiding them), speed and convenience are the primary reasons why customers prefer to buy online and shop in-store. It’s the best of both worlds.

If you’re building an e-commerce site for a company with retail locations that do this, then make sure you get customers thinking about it right away.

Barnes and Noble, for instance, enables shoppers to set their preferred local store:

Barnes & Noble 'Change My Store' - location selection

Barnes & Noble allows shoppers to set their preferred retail store location. (Source: Barnes and Noble) (Large preview)

This is a great feature to have. The only thing I’d do differently is to place a button in the header of the site that immediately takes them to the “Change My Store” or “Find Store” pop-up or page. That way, shoppers don’t have to wait until they’ve found a product they like to discover whether or not it’s available at their store for pickup.

Once a user has set their store location, though, Barnes & Noble remembers it and uses it to enhance the remainder of the shopping experience:

Barnes & Noble search listings with online and in-store availability info

Barnes & Noble uses shopper location information to enhance search listings. (Source: Barnes and Noble) (Large preview)

This is what search listings look like for “Magna Tiles” on the Barnes & Noble site when the user sets their search to “List” view. Pretty neat, right? While “Grid” view is standard, only showing the featured image, product name and price, this view provides extra detail about availability.

This can provide a ton of relief for shoppers who too-often encounter “out-of-stock” or “not available in store” notices on individual product pages. This way, they can spend their time looking at the items they can get the most quickly and conveniently. There are no surprises.

If cross-channel options are available — between website and mobile app, website and retail store, website and third-party delivery service — make sure you call attention to them early on so customers can take advantage of the streamlined shopping experience.

Wrapping Up

Panicked shopping can lead to serious issues for your e-commerce site. Rather than put your shoppers in a situation where they grow impatient, dissatisfied, and frustrated by the site that seems to put up barriers at every turn, design your alerts so that they turn a bad experience into a positive one.

Smashing Editorial
(ra, yk, il)

Picture perfect photography: Discover Luminar’s Erase and Clone & Stamp tools

Original Source: http://feedproxy.google.com/~r/CreativeBloq/~3/2UnKduPcHrI/luminar-erase-clone-stamp-tool

You’re just about to capture the perfect picture when, out of nowhere, someone walks into the shot. Or you’ve nailed the perfect landscape scene, only to notice an ugly road sign in the way. We’ve all experienced the annoyance and frustration of an otherwise perfect picture being spoilt by unwanted objects in the background. Good news is there’s now a quick and even simpler way to remove them. 

Introducing Luminar 4’s Clone & Stamp and Erase tools. 

The Clone & Stamp tool works in the same way as a regular clone tool, and is particularly effective on repeating patterns, fine details and man-made objects. Getting the tones and colours to match when using a clone tool is a well-known challenge, but this is where Luminar 4’s secret weapon – the Erase tool – excels. 

The Erase tool removes objects intelligently, taking textures, patterns and tones from the surrounding image to cover up the object you want to remove automatically. The majority of the time, results are immediate and spot-on. However, a trickier subject will often require some fine tweaking. Let’s take a look at exactly how both of these tools work…

5 simple steps to remove objects from a photo

Skylum Luminar 4

01. Prep your image

Luminar’s Erase tool creates a composite layer from all the already existing image layers, so it’s important to make any exposure adjustments beforehand. Any tweaks or changes made after the Erase tool has been applied won’t show up. 

Skylum Luminar 4

02. Select the Erase tool

In the main Luminar interface, select the Canvas workspace via the button towards the top-right corner. Here you’ll find all manner of useful tools, including Clone & Stamp and Crop & Rotate and, the one you’re looking for, the Erase tool. Select it, and a new layer will be created.

Skylum Luminar 4

03. Erase an object

Once selected, you will see the Erase tool consists of a circular brush, with an adjustable slider to choose its size. Using the brush, simply paint over the object you want to remove. Don’t worry too much about being exact, but try to avoid the background as much as possible. 

Skylum Luminar 4

04. Remove multiple objects

The Erase tool allows you to remove many objects at the same time. Simply release the brush, alter the size to suit and paint over anything you want to get rid of.

Skylum Luminar 4

05. Clean up

When you have finished painting with the Erase tool and are happy with your selection, click ‘Done’. Use the visibility toggle in the layers panel to see the difference. If the results aren’t right the first time, you can try again on any problem areas, or alternatively use Luminar’s Clone & Stamp tool to make manual repairs…

How to use the Clone & Stamp tool

Skylum Luminar 4

Click top right corner of image to enlarge 

While Luminar’s Erase tool does a fantastic job of removing unwanted objects, more trickier, busy shots might need a bit of fine tuning. This is where the Clone & Stamp tool comes in really handy. Here’s how to make the most of this powerful feature.

01. Create a Clone & Stamp layer

Just like with the Erase tool, selecting the Clone & Stamp feature will create a new composite layer to work on.

02. Clone target area

To start, select the clone source and then paint over the area in need of repair. Press Alt (Option)-click to select a new clone source. 

03. Brush size

The clone brush sizes can be changed to suit using the menu on the top toolbar, or right-click on the image to reveal the brush properties panel. 

04. Brush sensitivity

You can also adjust a brush's soft and hardness options here. A hard brush tends to work well on hard edges, whereas a soft brush is better for blending in areas of softer, shaded areas.

05. Reduce the opacity

For really complex areas, which are proving troublesome, try reducing the opacity and using a larger soft brush to help disguise obvious repairs. 

06. Review

Once finished, click ‘Done’ to generate the Clone & Stamp layer, which you can review or make more repairs on at a later date. 

Get your copy of Skylum Luminar 4 today

Want to give Luminar 4 a go? Right now you can download a free seven-day trial via the Skylum website. Available on both macOS and Windows, should you decide to buy, be sure to use our exclusive discount code CB to save $10/£10 on the regular retail price. 


Eye Vs AI: Harnessing Technology to Successfully Track User Attention

Original Source: https://www.webdesignerdepot.com/2020/07/eye-vs-ai-harnessing-technology-to-successfully-track-user-attention/

Attention is the new gold; brands are in a constant competition for our attention.

A big portion of our time we spend online, where we are bombarded with insane amounts of information and advertisements. It’s hard not to become overwhelmed in this world of consumerism. We have had to become good at quickly evaluating which information is important, especially on the internet.

Good marketing specialists know that they have mere seconds to turn a potential customer into a lead. People are not going to spend a lot of time examining your advertisement or landing page, either it clicks or not. Moreover, most users do not read the articles, they scan them. First impression plays a huge role in the success of your business, so do not leave that to a chance.

You really don’t want your customer to ignore that special sale, subscription option, or another call to action on your webpage. That is why you need to know where that gold-worthy attention goes when a user opens your landing page. Here’s where technology can come in handy.

Eye-Tracking in Web Design

It is very important to know where your website visitor’s attention goes first. How to get that info? Eye-tracking is the answer.

Eye-tracking technology can be used to optimize your website conversions. By tracking eye movements, technology will recognize which content is most intriguing for the users. It will reveal whether people pay most attention where you want them to, which elements are distracting or not visible enough, and where sales are lost. This information is invaluable if you want to succeed in the current market.

This information is invaluable if you want to succeed in the current market

How does it work? An eye tracker, such as webcam or goggles, measures movement of an eye. Collected data is analyzed and presented as a heatmap, highlighting which elements of your design attract most attention. Having in mind that browsing time rarely exceeds a few seconds, this information is very valuable when you try to understand your audience.

You wouldn’t want to spend much time on your website design just to discover it does not generate desired conversion rate. By employing this technology you can make changes based on reliable data rather than intuition and guarantee your business future success.

By now you may think that you definitely need to carry out this eye-tracking study, but there is a catch. A high-quality behavioral observation or eye-tracking is a time-consuming, budget eating complicated process.

If you want to draw conclusions from heatmaps, you would need to include at least 39 participants in a study. One individual test may last from 20 minutes to an hour. Time quickly adds up when you include preparation and analysis of the results. The average eye tracker price is around $17,500 and it may vary between several thousand dollars and $50 000. Of course you can hire a company to carry out this research for you but it may cost you several hundred dollars a month. Luckily, technological innovations allow us to acquire the same insights about users’ attention flow much cheaper and faster than conducting or buying an actual eye-tracking study.

Technological innovations replace real eye-tracking study

AI-Powered Automatization of Eye-Tracking

In this task of understanding how internet users are interacting with your website, Artificial Intelligence (AI) seems to be an answer. AI-based technologies already have become prevalent in various services we use on a daily basis. For example, Netflix’s highly predictive algorithm offers viewers personalized movie recommendations. Medical researchers utilize eye tracking to diagnose conditions like Alzheimer’s disease or Autism. As these algorithms become better every year, AI also becomes an irreplaceable tool in business.

Over the years researchers have collected so much data that human behavior becomes really predictable

How can AI help you to understand your customer’s attention? The main feature of AI is that it can mimic human intelligence and constantly improve itself by learning from data. Predictive eye-tracking is based on deep learning and trained with previous eye tracking study data. Over the years researchers have collected so much data that human behavior becomes really predictable. Technology predicts which specific areas of your website attract most interest. In this way, AI enables you to speed up the UX research process and get insights about your design in a matter of seconds.

Too good to be true? There are already several available tools on the market, such as Attention Insight or EyeQuant. These predictive design tools are based on deep learning and trained with previous eye-tracking studies data. Up to date, they have achieved an 84-90% accuracy.

AI-powered attention heatmap

AI solutions for designers and marketers have already become major competitors to traditional eye-tracking studies. Due to active competition, predictive eye-tracking tools are constantly innovating and recently started generating heatmaps for videos. Another useful feature that provides decision-makers with quantitative data is a percentage of attention. Users can define an object that they want to test and get an exact percentage of attention that the object receives.

Conclusion

Since all digital products are competing for user’s limited attention, it has become one of the most valuable resources. Due to fierce competition, it is not enough to rely on your intuition and gut instinct while making important decisions anymore. Designers have a choice in this economy of attention, though.

Yes, there are eye-tracking studies that require a significant amount of time and financial resources.

However, you can make user-centric, data-driven decisions in a quick, scalable, and private way while your product is still under development. AI-powered predictive eye-tracking tools might be an answer. Attention is a new currency, and you must measure it.

Source

p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}