Collective #742

Original Source: https://tympanus.net/codrops/collective/collective-742/

Collective 742 item image

Inspirational Website of the Week: Barlow Agency

A minimal design with an interesting panning effect. Our pick this week.

Get inspired

Collective 742 item image
This content is sponsored via BuySellAds

Use Kintone to Spend Less Time on the Back-end

Kintone is a powerful web database, providing developers with a convenient environment to test out front-end coding ideas, without having to run a back-end.

Check it out

Collective 742 item image

Readability

A new series of articles by the Google Fonts team where you’ll learn about the qualities of type and typography that make reading easier.

Read it

Collective 742 item image

Designing a Utopian layout grid

This post aims to contextualise the Utopia fluid grid calculator which helps you to define a layout grid by clicking a few buttons. By James Gilyead.

Check it out

Collective 742 item image

Nextra 2.0

The new version of the Next.js static site generator brings some great features.

Check it out

Collective 742 item image

Readymag Websites of the Year 2022

Cast your vote for websites that inspire you and help them win.

Check it out

Collective 742 item image

WebGL Rain

Ash Thornton shares Unseen Studio’s first experiment, refracting WebGL rain drops!

Check it out

Collective 742 item image

A Practical Guide to CSS Media Queries

Take a closer look at what media queries are, how they work, and how to use them correctly, including for creating responsive designs. By Alex Ivanovs.

Read it

Collective 742 item image

Digging Deeper Into Container Style Queries

Geoff Graham takes another look on container style queries and what’s currently being discussed.

Read it

Collective 742 item image

From type to logotype

Tom Muller’s article on the process of creating a logotype.

Read it

Collective 742 item image

Award Winning Animation With Only 20 Lines Of CSS?

Learn how to recreate the sliding image track effect from camillemormal.com in this video tutorial by Hyperplexed.

Check it out

Collective 742 item image

Complementary Space

Donnie D’Amato presents a framework to design spacing tokens semantically.

Read it

Collective 742 item image

Spherical Harmonics

Steve Trettel made this awesome demo for a lecture.

Check it out

Collective 742 item image

How to transfigure wireframes into HTML

The first article in HTMHell’s Advent calendar is about transforming a design into code.

Read it

Collective 742 item image

Basement Foundry

The type foundry by basement.studio where they offer their amazing, ever-evolving typefaces. And what a great site!

Check it out

Collective 742 item image

CSS For URLs and HTTP Headers

Jim Nielsen wonders what if we could write CSS based on any value in the current page’s URL.

Read it

Collective 742 item image

Notion introduces expanded Free Plan & new Business Plan

Good news from Notion: they made some updates to their pricing plans that now include an expanded free plan.

Check it out

Collective 742 item image

Iris 2

A fun Christmas marbling experiment with WebGL by Maeda Mameo. Check out all the other experiments, too!

Check it out

Collective 742 item image

A Performance Maturity Matrix

The year’s Web Performance Calendar starts with an article by Brian Louis Ramirez on a systematic approach to improving performance using a “performance maturity matrix”.

Read it

Collective 742 item image

Infinite Scroll and Wormy Scroll

Alex Dytrych’s funny wormy scroll experiment.

Check it out

Collective 742 item image

A Conversation With ChatGPT

Matthias Ott experimented with the new ChatGPT model by OpenAI and shares his impressive conversation.

Check it out

Collective 742 item image
From Our Blog

Tooltip to Gallery Transition

A concept for page transitions where a tooltip image animates to a gallery layout and fullscreen image.

Check it out

The Best Shopify Plus Apps to Enhance your Store

Original Source: https://ecommerce-platforms.com/shopify-apps/best-shopify-plus-apps

The best Shopify Plus apps provide business owners with a phenomenal way to take their store’s functionality to the next level. While Shopify offers a range of amazing features as standard, the app marketplace ensures innovative entrepreneurs have endless scope to transform their store.

Using the right apps, leaders can unlock new capabilities for delivering amazing service to customers, experiment with different forms of marketing, and even gain useful insights into their audience. Shopify Plus apps are specifically designed to provide enterprise-grade features to Shopify sellers, so they can reach, engage, and convert a larger audience.

Of course, similar to standard Shopify apps, there are a lot of options to choose from. Today, we’re looking at some of the most valuable Shopify Plus apps available for your company.

What Are the Top Apps for Shopify Plus?

Shopify Plus apps are similar to standard Shopify apps and add-ons in a lot of ways. They can help with everything from ensuring you deliver excellent customer support, to enabling referral marketing, cross-sell opportunities and SEO for your ecommerce business. However, these tools are intended specifically for Shopify plus merchants with a higher number of sales.

While some tools are available directly within the Shopify app store, others require you to visit the website for the specific tool to get started. However, all of the solution providers have partnerships with Shopify to ensure excellent functionality.

Today, we’re looking at a range of the top solutions intended for Shopify Plus stores, whether you’re launching a new loyalty program, trying to generate post-purchase product reviews, or simply enhancing your POS functionality.

Go to the top

illustration of a cat climbing a ladder

HubSpot

hubspot service hub - best help desk software for shopify

HubSpot has earned a place as one of the most popular tools for business leaders in the world today. This comprehensive platform supports companies with everything from sales optimization to customer service and marketing. The all-in-one ecosystem gives enterprise owners the freedom to mix and match the tools they need, whether it’s a free CRM system, or an SMS advertising strategy.

The deep integration between Shopify and HubSpot allows brands to integrate their online store data with a powerful CRM, in-depth analytics tools, and a range of promotional services. You can sync customers, products and deals in one place, then use your aligned data for abandoned cart email nurturing, smart content CTAs, product-specific re-engagement ads and more.

In particular, HubSpot is excellent for companies looking to strengthen their position in the inbound marketing landscape. You can align HubSpot with Google AdWords, Facebook, SurveyMonkey, Eventbrite, and a range of other services. Plus, this Shopify Plus certified app has very straightforward widgets for your Shopify plus store.

Pricing

While the integration for HubSpot is free to install, you will need to consider a premium plan from HubSpot to match your Shopify Plus services. Primarily, the integration focuses on leveraging tools from the HubSpot “Marketing” Hub, which comes with 3 plans to choose from:

Starter: Starting at $45 per month for 1,000 marketing contacts, with form and email automation, custom branding, email and in-app chat support, and US payments. You’ll also have access to various free tools for email marketing, live chat, and ad management.

Professional: Starting at $800 per month for 2,000 marketing contacts, with all the features of Starter plus omnichannel automation, AMB tools, dynamic personalization, multi-language content, social media, video hosting, company scoring, collaboration tools, A/B testing, contact create attribution, web traffic analysis and more.

Enterprise: Starting at $3,600 per month for up to 10,000 marketing contacts with all the features of Professional plus hierarchical teams, single sign-on, custom objects, adaptive testing, sandboxes, multi-touch revenue attribution, predictive lead scoring and more.

Pros:

Comprehensive omnichannel marketing capabilities

Integrations with other leading tools and apps

Extensive controls for marketing campaigns

Excellent security and privacy controls

State-of-the-art automation

Fantastic customer support

Cons:

Expensive enterprise packages

Slight learning curve for beginners

Go to the top

illustration of a cat climbing a ladder

Printful Enterprise

printful enterprise - best shopify plus apps

Ideal for companies looking to accelerate sales with print-on-demand opportunities, Printful is one of the leading POD platforms available. The convenient tool makes it easy to create mock-ups of personalized designs so you can sell them directly to your customers on Shopify. You only pay for what you sell, and tricky processes like fulfillment are handled for you.

Once you’ve connected to Printful, you can add your designs to a host of different merchandise options, and as soon as a customer buys something, the team will automatically receive the order. Printful ships products within 2-5 days, using custom branding and packaging specific to your company. You can also easily track the delivery process.

Printful performs comprehensive quality checks and SKU-level product testing. Plus, the company uses world-class printing technology to deliver the very best to your customers. There’s white label support for enterprises, fantastic product visuals, and insider merchandising insights delivered straight from an expert team to business leaders.

Pricing:

While the basic app from Printful is free, it may not be the best option for companies selling large volumes of products.

Printful Plus is the first paid package from Printful, available for $9 per month. This plan comes with all the features of the Free plan, as well as custom product mock-ups, image background removal, and access to a range of promotional tools.

Printful Pro is the second paid package from the service, with customization for up to 444 products, integrations with 28 ecommerce platforms, and a host of excess features. You’ll be able to access the promo maker tool, remove backgrounds from images, and experiment with embroidery files digitized for free. There’s also a carrier-based shipping option. This package starts at $49 per month.

Pros:

Fantastic mock-up generator

Wide range of product options

Quick order processing and delivery

In-depth order insights and tracking

Powerful white label support

Brilliant templates for your designs

Cons:

Some products can be quite expensive

Shipping options may be limited

Go to the top

illustration of a cat climbing a ladder

Octane.ai

octane ai - best shopify plus apps

Octane.ai is a Shopify Plus app, specially designed to help companies gain a deeper understanding of their target audience. The comprehensive enterprise tool allows brands to build powerful product quizzes, designed to help guide consumers towards the correct purchase. You can place product quizzes within your marketing campaigns, feature them on your site, and embed them into pop-ups.

Once you’ve collected the right data from your audience, you can use it to recommend products based on each person’s answers, and sync data to email apps for segmentation. There’s access to SMS integrations too, so you can connect to customers anywhere. This tool is part of the Shopify plus certified app program, making it one of the best Shopify apps for enterprise companies.

Intended to boost the average order value of each customer, Octane is trusted by Shopify itself to create store quizzes. You can learn about visitors with unlimited surveys, logic branches and quizzes, and boost conversion rates with personalized bundle recommendations. Customers can even add all of the products they’re recommended to their cart with one click.

Pricing:

There’s a 14-day free trial for Octane.ai for Shopify. After that, you’ll need to choose between one of two packages. The first is the “Octane” plan for $50 per month which comes with no-code quiz building, pop-ups, and opt-in options. You can also sync data to Klaviyo, Zapier, and other tools for instant personalization opportunities.

Octane Plus, available for $200 per month based on your store’s revenue, comes with everything in the Octane plan, as well as an advanced Klaviyo integration, quiz logic branching, quiz results URLs, custom product displays and custom CSS.

Pros:

Unlimited quizzes, surveys, and branching logic

Integrations with email and SMS marketing tools

Quiz results URLs and add-to-cart buttons

Fantastic personalization capabilities

Deep integration with Shopify data

Cons:

Slight learning curve for beginners

Expensive packages depending on your revenue

Go to the top

illustration of a cat climbing a ladder

Klaviyo

klaviyo - best email marketing software for ecommerce

One of the most popular tools on the market for email advertising and SMS automation, Klaviyo provides businesses with a unified platform for connecting with their target audience. The premium Shopify integration aligns all of your store data with your email tools, so you can get a comprehensive insight into why each customer visits your store, and what makes them click.

Based on the information you receive; you can send emails and SMS content personalized to your customers and their shopping behavior. There’s also the option to create self-sending messages with a host of customizable automations for welcome emails, price drop alerts, abandonment flows and more. On top of that, Klaviyo also integrates with tools like Swell Rewards, Smile.io, Zendesk, Facebook Advertising, Shopify Flow, and Recharge.

Klaviyo’s reporting tools are another fantastic feature available to Shopify store owners. You can design phenomenal reports highlighting everything from which products drive the most sales, to how your company compares to other brands in your industry. For ecommerce brands looking to increase sales and insights, Klaviyo is one of the best app providers around.

Pricing:

Klaviyo has a free plan available for companies with up to 250 email contacts, and 50 SMS contacts. You’ll get forms and push notifications, predictive analytics, A/B testing and segmentations included with this package. To upgrade, you’ll need one of the email or SMS packages.

The email plans start at $20 per month for up to 500 contacts, with all of the features Klaviyo offers for email. The SMS plans start at $5 per month for 150 SMS contacts, with endless 2-way conversations, multi-channel automated flows, opt-in forms and custom reports. With both plans, the price increases based on your subscriber numbers.

Pros:

Excellent data syncing for Shopify, email and SMS

Integrations with leading marketing tools

Convenient pre-built and custom workflows

Great reporting and analytics tools

Segmentation on every plan

Cons:

Prices can increase rapidly for a high number of subscribers

Slight learning curve for beginners

Go to the top

illustration of a cat climbing a ladder

Hotjar

hotjar - best shopify plus apps

Another amazing tool for companies who want to learn more about their target audience, Hotjar is an easy-to-use and insightful marketing tool. Once you complete the setup process, Hotjar will automatically integrate with your Shopify store, providing direct access to secure and scalable information about your target audience and their purchasing strategies.

With Hotjar, enterprise companies can access state-of-the-art heatmaps to help visualize customer behavior and track which products and marketing campaigns get the most attention. You can record visitor activities to gain a behind-the-scenes look at the buyer journey, and track conversion funnels to see where conversions are dropping off.

There’s form analysis to help you increase the number of completions you achieve, as well as support for feedback polls if you want to collect direct information from your audience. Instant visual feedback options are also available, for customers who want to provide deeper insights. Plus you can create custom surveys from scratch with an easy-to-use editor.

Pricing:

A Hotjar plan is required for integration with Shopify. There’s a free plan for up to 1,050 sessions per month, unlimited heat maps, and automatic data capture. After that, options include:

Plus: 39EUR per month for 3,000 sessions, filtering and segmentation, event API support, and everything in the Basic free plan.

Business: 99EUR per month for all the features of Plus, as well as 500 daily sessions, custom-built integrations, API access, confusion and frustration signals, and the ability to remove all Hotjar branding from your site.

Scale: Custom pricing for everything in the Business plan, plus unlimited daily sessions, a dedicated success manager, unlimited sites, SSO support, and access to every feature

Pros:

Excellent insights into customer behavior

Form, survey, and feedback analysis

Easy-to-use editing tools

Customization for all your reports

Native integration with Shopify

Cons:

The basic plans can be too limited for enterprise users

API access can be confusing at first

Go to the top

illustration of a cat climbing a ladder

Salesforce

salesforce - best shopify plus apps

Available via the Salesforce AppExchange, the Salesforce integration for Shopify is intended for enterprise users of the Plus plan, who want to learn more about their audience. The tool brings Salesforce Lightning, Classic, and Shopify into a single dashboard, where users can manage products, location, inventory, collections, orders, and order fulfillment.

The convenient no-code environment makes it easy to track all kinds of customer journeys, with in-depth insights into what drives customer conversions. You’ll be able to sync multiple inventories, products, and collections to one place, and infuse your CRM with in-the-moment data about your target audience. You can send orders direct to your Salesforce CRM account, create leads, contacts, and profiles, and track customer conversations.

The all-in-one solution provides an end-to-end view of customers as they connect with your Shopify store, so you can make intelligent decisions about which marketing campaigns to send to each customer, and where you can increase your sales.

Pricing:

Pricing for Salesforce is a little confusing at first, as there are so many different editions of the tool to choose from. At minimum, you’ll need full access to the Salesforce platform, which starts at £20 per month for the basic features, or £80 per month for each user for the more advanced option, with over 110 custom objects, and app creation tools.

If you’re planning on integrating Salesforce and Shopify, the best option may be to reach out to the Salesforce team for an insight into which package will best suit your needs. You’ll also need to be fully signed up with Shopify Plus.

Pros:

Powerful customer journey tracking

Valuable custom reports and insights

Comprehensive integration with Shopify orders

World-leading CRM tools

Options for marketing, sales, and service apps

Cons:

Complicated pricing structure

Can be difficult for beginners

Go to the top

illustration of a cat climbing a ladder

Listrak

listrak - best shopify plus apps

Listrak is a leading Shopify Plus partner, offering technology to help companies make the most of their customer data. The tool brings behavioral marketing automation capabilities to your email and SMS environment, with tools purpose-built for the retail environment. This industry-leading application comes with thought leadership guidance and insights for business leaders looking to scale their sales and marketing campaigns.

The platform includes access to actionable insights, omnichannel marketing campaign tools, and state-of-the-art testing features. You can reach and retarget your customers through optimized emails, mobile push messages, and SMS or MMS. Plus, the smart segmentation tools come with AI-powered predictive personalization and marketing scheduling solutions.

Listrak listens and responds to consumer signals of intent, translating information into actionable strategies to reduce cart abandonment and increase average order value. You’ll also be able to build full 360-degree customer profiles which connects data from multiple sources to provide a comprehensive view of each client.

Pricing:

Listrak is free to install for Shopify Plus users, though there may be additional costs depending on the advanced features you want to access. As with most Shopify Plus applications, you’ll also need a plan with Shopify Plus. Prices for the Shopify Plus service start at $2,000 per month and are customized according to your specific business needs.

Pros:

Comprehensive customer profiles and insights

SMS, MMS, push messages, and email marketing

Automated coupon creation and AOV tools

Behind-the-scenes marketing testing tools

Valuable intent and predictive analytics

Cons:

Complicated for beginners

Pricing can vary depending on your company

Go to the top

illustration of a cat climbing a ladder

Nosto

nosto - best shopify plus apps

Built to help Shopify store owners increase their online revenue, Nosto is an end-to-end experience platform. Built to work with any theme, custom storefront or advanced Shopify store, Nosto allows users to build and launch dynamic personalized experiences for every shopper. The machine-learning technology allows you to gather product and shopper data in real-time. Plus, you can collect data from a range of touchpoints, to enhance your customer profiles.

At the core of the customer experience platform is a Personalization system, which comes with in-depth dashboards and analytics, A/B testing and optimization, behavioral insights, segmentations, and out-of-the-box integrations with tools like LoyaltyLion and Yotpo. You can also use machine learning tools to predict customer behaviors.

Inside Nosto, companies will also find a number of module options, including product recommendations, category merchandising tools, pop-ups, dynamic bundles, user-generated content options, and email personalization. There’s a co-pilot tool for predictive recommendations, and an advanced set of access controls for admin users.

Pricing:

Nosto is free to install, but you will need a plan from the company to access the full breadth of the platform’s features. The pricing options available from this company aren’t as transparent as they could be. You’ll need to contact the team for a demo, and to build your perfect plan. Personalization packages start at as little as 99EUR per month, but may differ depending on the number of annual online sales you manage.

Pros:

Comprehensive insights into your target audience

Integrations with leading Shopify tools

Multiple modules to choose from for marketing

Endless automation and AI features

Powerful controls and admin features

Cons:

Pricing can be a little confusing

Some tools have a slight learning curve

Go to the top

illustration of a cat climbing a ladder

Pixlee

pixlee - best shopify plus apps

Pixlee is an all-in-one platform for managing, collecting, and utilizing user-generated content in the digital world. The comprehensive tool allows companies to invest in influencer marketing and community-driven campaigns, to boost their reputation and earn more sales online.

This powerful Shopify Plus app makes it simple to track down and optimize content from a community of employees, influencers, and customers. The “TurnTo” platform is equipped with brand and spam protection filtering, image recognition for content sorting, and even product tagging for shoppable displays. There’s also patented dynamic display technology and powerful performance tracking for gaining insights into your marketing strategy.

The included Pixlee for Creators solution also allows companies to turn existing customers into advocates, track down new influencers, and develop their own brand ambassador communities. All of Pixlee’s tools are optimized for the simple and straightforward management of both relationships and content, with powerful analytics throughout.

Pricing:

Pixlee is free to install into your Shopify environment, but an annual contract is required for access to all the features. The only way to get a pricing estimation for the service is to contact the team for a free demo, and a custom package.

Pros:

Excellent content and relationship management

In-depth analytics and reports

Streamlined integration with Shopify

Content sorting and product tagging

Brand reputation protection features included

Cons:

Not the most transparent pricing

Can have a slight learning curve

Go to the top

illustration of a cat climbing a ladder

Choosing the Best Shopify Plus Apps

Whether you’re looking to collect social proof for your stores, boost audience retention or simplify refunds, there’s a Shopify plus certified app partner for virtually every need. Some tools focus on inventory management and upsell sales, while others help to bring brand-new functionality to your ecommerce store.

When making your choice, ensure you pay close attention to exactly how well the tools integrate with Shopify, so you can focus on getting a streamlined and reliable ecommerce experience. Partnership with the Shopify Plus app program should give you some much-needed peace of mind.

The post The Best Shopify Plus Apps to Enhance your Store appeared first on Ecommerce Platforms.

The best lightweight laptops in December 2022

Original Source: https://www.creativebloq.com/buying-guides/the-best-lightweight-laptops

Find the perfect lightweight laptop whether it’s for work, study or play.

5 Upcoming Web Design Trends for 2023

Original Source: https://tympanus.net/codrops/2022/12/06/5-upcoming-web-design-trends-for-2023/

With a new year comes new and improved ways to design websites. 2023 will bring us an interesting mix of website trends — ones that address larger scale scenarios and issues like accessibility, UX, and responsiveness.

In the following post, we’re going to look at the 5 newest web design trends along with 10 pre-built websites from BeTheme that demonstrate how to execute them.

BeTheme is one of the world’s most popular and highly-rated WordPress Themes with 268,000+ sales and a 4.83/5 star-rating.

5 new web design trends for 2023

In order to create more pleasant digital experiences, web designers need to think more broadly about what impacts (both positively and negatively) those experiences. The following web design trends for 2023 will address these larger issues:

1. Hoverable iconography

One of the main priorities in web design is to create interfaces that are so intuitive that anyone can interact with them. However, some of the shortcuts used in web design — especially when it comes to iconography — can create obstacles for certain users and inhibit accessibility. 

Some icons have indisputable interpretations. For instance, icons used in website headers have become so commonplace that most, if not all, users know what purpose they serve and what will happen when they click on them. 

On the BeBiker 4 website, for example, there are three icons on the left for:

Shopping bag/cart

Search

Account

So long as the same iconography is used from site to site, users will have little doubt about how to use this part of a website header. 

When it comes to other, less frequently used icons, however, you have to think about the diversity of your users and how they may interpret them differently. In order to improve user confidence when interacting with website iconography in 2023, web designers will start to include hover-triggered helper text over icons when it’s needed.

You can see an example of this trend on the BeJeweler 2 site:

In addition to revealing helper text when users hover over product icons, the text also appears when users hover over variant swatches. This leaves no room for interpretation and will ensure that every user can confidently interact with website content going forward.

2. More social proof 

Trust is an important element in relationship building — be it in personal relationships or the professional ones that brands have with customers. 

With the website often serving as the first touchpoint between consumers and brands, trust building needs to begin there. In 2023, web designers will utilize social proof and trust marks to do this. 

There are a variety of ways to use these trust builders on websites. One of the most common ways is to include a page on the site and a section on the home page dedicated to real customer testimonials and/or reviews, as the BeDoctor site does:

This particular example showcases three different types of content that can help build trust with website visitors:

An overall customer satisfaction rate

A customer testimonial

An average customer rating — which can link out to a ratings platform like Google or Yelp

For some businesses, it may be too early in the game to have generated a substantial amount of social proof and so you don’t have anything to show off on the site. If that’s the case, trust marks are the way to go. 

Trust marks can come in the form of things like security seals — like an icon placed next to the “Checkout” button so you can assure visitors that their transactions will be secure. Another way to boost credibility and trust is to add context to website claims as BeMarketing 2 demonstrates:

The asterisk next to the headline’s claim is expanded upon down below. You could use this space to provide a disclaimer or to add a link to a page that provides proof of the claim.

3. Mobile-specific features

With each passing year, responsive design becomes easier to do as the general rules are well-known and easy to follow. Also, the vast majority of WordPress themes are built to be responsive, which takes a lot of the guesswork out of it for designers. 

However, this has led to some stagnation when it comes to mobile web design. While responsive websites provide a good user experience, web designers aren’t really encouraged to come up with creative solutions to make them even greater. 

In 2023, that’s going to change as more attention gets paid to the mobile experience. Specifically, how designers build out features that address mobile-specific friction and obstacles. 

One way we’ll see this play out is in the navigation design. Take the BeLanguage 4 pre-built website, for example: 

The page links from the regular, non-mobile website are all present. However, The “Call us” button appears at the top of the list of links on mobile. On desktop, it appears at the very end. 

As designers evaluate the data they have on user habits and goals for the different devices they use, we’ll see small deviations in the way major components like the navigation are designed.

More and more websites will adopt mobile app-like features in 2023, too. BeFurnitureStore has done this. Rather than retain the multi-level header design from the desktop site, the top bar that contains the account, cart, and favorite links now appears as a sticky bottom bar:

Web designers that transform and revolutionize the mobile web experience will be able to position their websites as superior offerings in the years to come.

4. Shape texturization

Many years ago, skeuomorphism brought all kinds of real world textures to our computer and phone screens. However, those textured backgrounds soon became seen as extraneous and distracting, and so the design trend fell by the wayside. 

Just because one web design trend fell out of favor doesn’t make the idea of digital texturization a bad one though.

In 2023, web designers will experiment with using organic shapes to add small and, more importantly, strategic textures to their designs. You’ll find an example of this on the BeRenovate 5 website:

Rounded shapes and lines appear in the background throughout the pages of the site. They make the UI visually interesting without overpowering the design. 

Digital texturization can also be strategic. BeCoaching 3 is a good example of how to draw users’ attention to certain areas of your pages:

There are two shapes used throughout the one-page website. This consistency in texturization will make it easier to direct visitors’ eyes to where you want them to go. 

The shapes often appear closer to the right margin of the page. Since users’ eyes are commonly attracted to the left margin, these shapes should increase how much content the users see and interact with. 

5. Supplemental video

Users have different preferences when it comes to how they ingest content online. Blogs, for instance, are good for people who want to take the time to read something. Video posts or vlogs, on the other hand, are ideal for those who want to watch or listen along.

That said, it’s not like you can provide an audiovisual alternative to every piece of content you place on your web pages. For starters, the design could easily get out of hand as you try to deliver a personalized content consumption experience. What’s more, videos tend to be heavy files and they can easily degrade loading speeds as you add more of them. 

What designers are going to do in 2023 is include a video alternative or supplemental video only when it matters. 

For instance, halfway down the home page of the BeBusiness 6 site is a full-width video section. It’s impossible to miss:

This video section could be used for a variety of purposes. To show off video testimonials. To summarize all the content that came before it. To provide an easy-to-follow explainer for the product’s technical features. And so on.

Supplemental video doesn’t need to take up too much room in order to be effective either. For instance, the BePregnancy hero section has a small cutout where the video resides:

The instantly recognizable “Play” button lets visitors know there’s something to watch there (if that’s what they want to do). Again, this content can serve a wide variety of purposes. 

As a bonus, designers can help improve page loading speeds by using video sparingly and strategically while moving away from autoplay video backgrounds and sections.

What do you think of these website design trends?

Often, lists of web design trends cover superficial changes that will take place on websites — fun color trends, experimental typography uses, animation and special effects, etc. In 2023, however, web designers are going to spend more time focusing on trends that improve the web as a whole and lead to more meaningful user engagements. 
Accessibility, responsiveness, trust building — these are no simple matters. That said, when you use BeTheme to build websites, they will feel simple because they’ve already been accounted for in many of the 650+ pre-built sites included in the WordPress theme.

What is Node.js? Your Quick-Start Primer

Original Source: https://1stwebdesigner.com/what-is-node-js-your-quick-start-primer/

In today’s world of technology, it is important to stay up-to-date on the latest programming languages. One language that has been growing in popularity over the past few years is Node.js. Node.js is built on the Chrome V8 JavaScript engine for running server applications. According to The Sass Way, Node.js “uses an event-driven, non-blocking I/O model that makes it lightweight and efficient.”

Whether you’re familiar with other programming languages and want to get familiar with this one, or you’re brand new to the world of programming altogether — we’ve got you covered.

In this article, we will give you a quick introduction and provide some tips for getting started. Let’s go!

What is Node.js?

Node.js website

Node.js is a JavaScript runtime environment that allows you to run server-side code. It is built on the V8 JavaScript engine, which is the same engine that powers Google Chrome. As mentioned earlier, it is a highly efficient platform that employs an event-driven, non-blocking I/O model. In addition, it has a large community of open-source modules and libraries that can be used to extend its functionality.

Why Use Node.js?

There are a few reasons why you might want to use Node.js for your next project. Let’s discuss those now.

It’s fast: The V8 JavaScript engine compiles and executes code quickly.
It’s scalable: It can handle a large number of concurrent connections with ease. And it has a large network of open-source modules and libraries for extending its baseline functionality.
It’s easy to get started: You can use it on your local machine without the need for a lot of setup.

But if you’re scratching your head as to how to put it to use, we’ve outlined that as well.

Practical Ways to Use Node.js

If you’re just getting started with Node.js, here are some practical ways that you can use it.

Create a basic web server: You can use it to create a simple web server that responds to requests from clients. This is a great way to get started with learning how to use the platform.
Build a CLI tool: It can be used to create command-line tools and utilities.
Create a web app: You can use it to create a web application that stores data in a database and serves content to users.
Build a desktop app: You can use it to build cross-platform desktop applications using tools like Electron.

These are just a few examples of how you can use Node.js. As you can see, it is a versatile platform that can be used for a variety of purposes.

Getting Started with Node.js

Now, we’ll walk you through the steps of setting up a development environment and creating your first program.

Step 1: Install Node.js

The first thing you need to do is install Node.js on your computer. You can do this by going to the website and downloading the appropriate installer for your operating system.

Step 2: Create a Node.js Program

Once it is installed, you can create a program in any text editor. We will use the built-in Node.js REPL (Read-Eval-Print-Loop) environment to run our program.

Node.js REPL

To launch the REPL, open your terminal or command prompt and type node. This will start the REPL environment where you can type JavaScript code and get immediate results.

Try typing the following code into the REPL:

console.log(‘Hello, world!’);

You should see the output Hello, world printed to the console.

To exit the REPL, type .exit.

Step 3: Run Your Program

Now that you’ve written a Node.js program, you can run it using the node command.

To do this, open your terminal or command prompt and navigate to the directory where your program is saved. Then, type node filename.js, replacing “filename.js” with the name of your program.

For example, if your program is saved in a file called hello.js, you would type node hello.js to run it.

You should see the output of your program printed to the console.

And that’s it! You’ve successfully created and run your first Node.js program.

Get Started with Node.js Today

With this newfound knowledge about Node.js, why not give it a try? After all, it would just be yet another tool in your programming toolbox.

Exciting New Tools for Designers, December 2022

Original Source: https://www.webdesignerdepot.com/2022/12/exciting-new-tools-for-designers-december-2022/

Designing a website or app can be a daunting task. But with the right design tools, it can be a lot easier. In this article, we’ll introduce you to some of the best tools, apps, and resources available right now. From client management to AI-powered design tools, there’s tons here to round out the year in style. Enjoy!

WelcomeSpaces

WelcomeSpaces is a collaborative tool for professional designers. Communicate with clients, share files, discuss revisions, and stay on track with an activity feed. Client collaboration has never been so simple.

html.to.design

html.to.design is an excellent plugin for Figma to help you quickly and easily create beautiful designs from existing websites. With just a few clicks, you can import the HTML code for any website and start designing your own version of it.

Squeaky

Squeaky is a privacy-friendly analytics suite that lets you capture up to 60% more data than legacy tools. With Squeaky, you can get insights into your customers’ behavior without compromising their privacy. Use Squeaky to make better decisions for your business.

AI Canvas

AI Canvas is an online collaborative platform that allows users to create and share AI artwork with other community members. Start your artwork with text prompts and watch it grow.

Magician

Magician is an AI-powered plugin for Figma that can create icons, images, and web copy from text prompts. It’s the perfect tool for designers who want to quickly and easily create beautiful designs.

Doughnut

Doughnut is a supportive design and freelancing community designed to help you succeed as a freelance designer. From finding new clients to managing your time, Doughnut has everything you need to make the most of your freelance career.

Deckset

Deckset is a simple way to produce great-looking presentations. Just write your thoughts in your favorite text editor and watch Deckset transform them into beautiful, persuasive presentations.

Vectormaker

With Vectormaker, you can easily convert pixel-based images into colorful vector graphics. Vectormaker uses the Potrace algorithm to trace the edges of your image. You can then choose the colors for your vector path based on the colors in the original.

Wrap

Wrap is a browser extension for capturing and editing product screenshots with ease. With a selection of carefully selected styles to choose from, you can create pixel-perfect designs in seconds—even if you’re not a designer.

Illustration Builder

The Illustration Builder digital designer toolkit is a Figma plugin for creating beautiful illustrations for your business website. You can create any illustration with a wide range of objects, backgrounds, characters, abstractions, and more.

OptiMonk

With OptiMonk, you can create beautiful pop-ups for Shopify, WordPress, MailChimp, and more that will help you increase your marketing reach, increase customer engagement and boost your conversions.

Jot

Jot is a marketing tool that uses OpenAI’s GPT-3 to generate human-like ad copy based on a single product description. With Jot, you can create engaging adverts quickly and easily.

Free Mockup Generator

Pixelied’s free mockup generator allows you to create stunning designs with editable mockups in minutes. With a wide range of customizable templates to choose from, you can design the perfect mockup for your project.

Womp

Womp is a new way to create 3D images. Intuitive and easy to use. With Womp, you can create beautiful 3D designs. Everything you create in Womp is exportable for 3D printing, social media, or directly into a game. It’s a great way to produce 3D icons and illustrations for your website.

Tinkerwell

Tinkerwell is a must-have companion to your favorite IDE. Quickly iterate on PHP code within the context of your web application. There’s no need to waste time opening browsers, creating test URLs, and uploading apps to servers. Use Tinkerwell locally, via SSH, Docker, and even on Laravel Vapor.

Magical

Magical is a tool that helps you speed up the meeting scheduling process. With Magical, you can easily find time slots that work for everyone and create personalized links to those slots. With Magical’s Dynamic Availability feature, you and your attendees can always find the best meeting time.

Explain Code

Explain Code is a great way to understand complicated code. You can see how the code works line by line and learn about programming concepts. Gain in-depth knowledge of how and why code is constructed and fast-track your learning process.

Shuffle Alternatives

Shuffle Alternatives allows you to create multiple site styles with a simple drag-and-drop builder. Create your core design and then choose from different design styles for a site that best fits your brand approach.

Idea Clarity

Get help honing your ideas, perfecting your pitch, and targeting the most profitable directions. Idea Clarity is an app that gives you direct access to experts in your chosen field who will help you revise your rough idea into a concrete plan.

Graphicsly

Graphicsly is an all-in-one graphics assets plugin for WordPress that lets you import directly into your installation. There are 1000+ 3D assets, 3000+ illustrations, and 9000+ icons ready to use today.

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;}

The post Exciting New Tools for Designers, December 2022 first appeared on Webdesigner Depot.

11 Typography Styles to Consider for Your Next Design

Original Source: https://1stwebdesigner.com/11-typography-styles-to-consider-for-your-next-design/

When it comes to typography, there’s a seemingly infinite number of styles to choose from. But which one is the right one for your next design?

That is the ultimate question when it comes to typography. And, unfortunately, there is no one-size-fits-all answer. It all depends on the specific project you’re working on and what kind of message you’re trying to communicate.

However, we can narrow it down to a few general categories.

Here are 11 popular typography styles to consider for your next project.

UNLIMITED DOWNLOADS: 400,000+ Fonts & Design Assets
Starting at only $16.50 per month!

DOWNLOAD NOW

1. Serif

01 - times new roman-Typography Styles

Serif fonts are the ones with the little feet (serifs) on the end of each letter. They are classic and elegant, and they have been around for centuries. Think of Times New Roman or Garamond – these are both serif fonts.

Serif fonts are generally seen as being more formal and traditional than other types of fonts. They are often used for headlines, logos, and other high-impact pieces.

2. Sans Serif

02 - sans serif-Typography Styles

Sans serif fonts are the exact opposite of serif fonts. They have no little feet on the end of the letters, hence the name “sans serif.”

Sans serif fonts are generally seen as being more modern and clean than serif fonts. They are often used for body copy, menus, and other pieces where readability is key.

3. Script

03 - adelia-Typography Styles

Script fonts are designed to look like they were written by hand. They are usually very flowing and cursive, and they can be difficult to read if they are used for large blocks of text.

Script fonts are best used for small pieces, such as headlines or logos. They can also be used for body copy, but only if the design is very simple and easy to read. A good example would be the Adelia Font.

4. Display

Display fonts are any type of font that is designed to be used at large sizes. They are often very bold and eye-catching, and they can be difficult to read at smaller sizes.

Display fonts are best used for headlines, logos, and other short pieces of text. They should not be used for body copy or any other type of long-form text. A good example that shows how bold these fonts can be is Arbutus.

5. Decorative

05 - space time - Typography Styles

Decorative fonts are just what they sound like – they are designed to be used for decorative purposes only. They are often very ornate and can be difficult to read.

Decorative fonts should only be used sparingly, if at all. They can be used for headlines or logos, but they should never be used for body copy. They are a lot of fun though. Just check out the Space Time font.

6. Blackletter

06- cloister black - Typography Styles

Blackletter fonts are a type of serif font that is designed to look like it was written in the Middle Ages. They are very ornate and can be difficult to read. It also goes by the name of gothic script or Old English.

Cloister Black is a great example of a blackletter font that encapsulates this old-fashioned style.

7. Handwritten

07 - autography

Handwritten fonts are designed to look like they were written by hand. They can be either serif or sans serif, but they usually have a more organic feel than other types of fonts.

Handwritten fonts are best used for small pieces, such as headlines or logos. The Autography Font illustrates this typography style well.

8. Slab Serif

08 - rosette

Slab serif fonts are a type of serif font that is designed to be used at large sizes. They are often very bold and eye-catching, and they can be difficult to read at smaller sizes.

Slab serif fonts are ideal for headlines, logos, and titles. They should not be used for body copy or any other type of long-form text though as the line weight is too thick for the confined spaces of paragraphs. The Rosette Font has a chunky look that serves as a good example of a slab serif.

9. Geometric

09 - geometric

Geometric fonts are designed to be very clean and simple. They often have straight lines and angles and rely on a geometric construction to achieve their letter shapes.

This kind of font is best used for headlines or logos, or any other spot where just a few words are needed. They can also be used for body copy, but only if the design is very simple, large, and easy to read.

10. Grotesque

10 - grotesque

Grotesque fonts are a type of sans serif font that is designed to be used at large sizes. Historically, they’re known for looking a bit awkward and unusual.

It is advisable to only use grotesque fonts for headlines, logos, and other brief pieces of text. They are not meant to be used for paragraphs or long stretches of text. Work Sans is a great example of a neo-grotesque style.

11. Humanistic

Humanistic fonts are sans serif fonts as well that are designed to look very natural and organic. They often have curved lines and softened edges.

Humanistic fonts are most successful when used for titles, headlines, or logos. They can also be readable if used sparingly in body copy with a simple design layout. You can look to the Centaur Font as a good example of this classic font style.

Let Typography Style Options Inspire You

There you have it! These are the 11 most common types of fonts that you’ll see used in graphic design. As you can see, each one has its own unique purpose and should be used accordingly.

When it comes to choosing the right font for your project, it’s important to think about the overall style you’re going for. Do you want something clean and modern? Or are you going for a more vintage or retro feel?

Once you have a general idea of the style you’re after, you can start browsing through different font options until you find one that fits your vision. Good luck!

Collective #741

Original Source: https://tympanus.net/codrops/collective/collective-741/

Inspirational Website of the Week: Unseen Studio

A beautiful, immersive web experience with stunning animations. Our pick this week.

Get inspired


This content is sponsored via BuySellAds

Practical, no-nonsense UI design tips

The Design Hacks newsletter will help you create better designs (even if you’re not artsy). Over 50,000 readers.

Check it out

The large, small, and dynamic viewport units

Learn all about the new CSS units that account for mobile viewports with dynamic toolbars in this article by Bramus Van Damme.

Check it out

Color Formats in CSS

In this tutorial, Josh W Comeau takes you on a tour of all the different color options in CSS.

Read it

The easiest way to get started with CSS Grid

A simple, straightforward guide to CSS Grid using grid-template-areas property to visually set the grid structure.

Check it out

GenCup

A generative art project that combines graphic design, football, and data. Using the statics of FIFA World Cup games to generate abstract compositions. Every match is a new poster.

Check it out

D2

D2 is a domain-specific language (DSL) that stands for Declarative Diagramming where you describe what you want diagrammed and it generates the image.

Check it out

gpu-io

A GPU-accelerated computing library for physics simulations and other mathematical calculations. Read more in this thread and check out the examples.

Check it out

Inkbase: Programmable Ink

What would be possible if hand-drawn sketches were programmable like spreadsheets? An amazing project shows what can be achieved.

Check it out

Little Languages Are The Future Of Programming

Learn what “Little Languages” are, why they matter and how they will shape the future of programming.

Read it

What Is the Open Web?

A working definition of an Open Web and what we can strive for to building an open and sustainable internet.

Read it

The BBC’s 15 Web Principles – 15 years later

Back in 2007 the BBC published a document showing their 15 Web Principles. Terence Eden takes a look at how they stack up today.

Read it

FFmpeg – Ultimate Guide

This guide covers the ins and outs of FFmpeg starting with fundamental concepts and moving to media transcoding and video and audio processing along with practical example.

Read it

Score

Score is an open source, platform-agnostic, container-based workload specification.

Check it out

You don’t need HTML!

Sir Tim lied to you, you only need Unicode! 😉

Check it out

Infisical

An open source, end-to-end encrypted tool that lets you securely sync secrets and environment variables across your team and infrastructure.

Check it out

Llama

A simple and minimalistic terminal file manager.

Check it out

Act

Run your GitHub Actions locally for fast feedback and replacing your makefile.

Check it out

Sekisui House Fact Book 2022

A beautiful interactive web experience with creative transitions powered by Three.js.

Check it out

Three.js and Sobel

Jesper Vos explains how he coded very interesting portal effect.

Check it out

Three CSS tips for working with inconsistently sized logos

Some super useful CSS to work with logos that are of a different size. By Wes Bos.

Check it out


From Our Blog

Sketchy Pencil Effect with Three.js Post-Processing

A tutorial where you’ll learn how to create a pencil effect with a sketchy look using Three.js post-processing.

Read it

Bypassing Google Lock on Any Samsung Phones with UnlockGo

Original Source: https://www.hongkiat.com/blog/remove-samsung-frp-unlockgo/

Google Account Verification, also known as the FRP (Factory Reset Protection), is vital in preventing unauthorized access to your phone. However, it is also a double-edged sword; if you forget your password, you will, too, be locked out of your phone.

To prevent the latter from happening, you must guard yourself with the knowledge of how to regain access to your phone again.

In this post, I’m going to share some tips on bypassing FRP on your Samsung model Android phone shall you forget your password and get locked out.

Google FRP lock after factory resetGoogle FRP lock after factory reset

Image: Google FRP lock after factory reset

Features of iToolab UnlockGo for Android

AFAIK Samsung hasn’t developed a tool to help bypass FRP, and if you are to regain access to your locked phone, a 3rd party app could be your solution.

Enter iToolab’s UnlockGo for Android.

This app works without requiring any root permission from your device. Within clicks – literally five – it removes Google’s lock entirely.

Here are more features of this app that make it a great Samsung FRP unlocker:

It has 99.3% effectiveness in bypassing Google FRP lock on Samsung devices from android version 5 to 12.
it is compatible with most Samsung phone and tablet models.
It is easy to use for novice users.
Completes job fast.

How to Unlock Samsung Phone with UnlockGo (Android)?

Below is a step-by-step guide to using iToolab UnlockGo to bypass the Samsung FRP lock. If you are not into reading, there’s a video guide too.

Step 1: Download UnlockGo on Your PC

Download the UnlockGo app from its official website. Install and run the app. UnlockGo is available for both Windows and Mac.

Download iToolab UNlockGo (Android)

Step 2: Start the Process

Connect the locked Samsung device to your PC via a USB cable. Click “Remove Google Lock (FRP)” and then “Start” to continue.

Remove Google lock with Samsung FRP bypass toolRemove Google lock with Samsung FRP bypass tool

Image: Remove Google lock with Samsung FRP bypass tool

Select “All Android Versions” on the next screen, then click “Next”.

One-click Samsung FRP bypass solution for all modelsOne-click Samsung FRP bypass solution for all models

Image: One-click Samsung FRP bypass solution for all models

Step 3: Open Samsung Diagnostics Menu

A pop-up window will appear with instructions on how to enter the Samsung Diagnostic menu. Follow the on-screen instructions, then click “Next” to enable “USB Debugging” on your device.

Enter Samsung DiagnosticsEnter Samsung Diagnostics

Image: Enter Samsung Diagnostics menu with FRP lock

Step 4: Remove Google FRP

The app will take a couple of seconds to bypass, and the device will be rebooted once the process is complete.

Remove Google lockRemove Google lock

Image: Remove Google lock

Unlocking Samsung Phone w/o Password or Google Account

Additionally, the UnlockGo app provides a simple way to unlock your android phone without needing a password.

Here’s how it’s done:

Step 1: Connect Your Device

Connect your Samsung device to your PC or Mac via a USB cable. Click on the “Unlock Screen Lock”, then click “One-click remove screen lock from Samsung”.

Unlock Samsung phones without password or Google accountUnlock Samsung phones without password or Google account

Image: Unlock Samsung phones without password or Google account

Step 2: Unlock Your Device

Follow the on-screen instructions and click the “Unlock” button to continue. The lock screen then goes away, and your device will restart.

Samsung screen locksSamsung screen locks

Image: Unlock Samsung screen locks

When Bypassing Google Lock is Needed?

I’ve shown you the how; now let’s take a look at the when. Here are some possible scenarios when you will need to bypass Google lock on your Samsung device.

1. Selling a Samsung device, but forgot the password

You can’t and shouldn’t sell your current Samsung device without removing your Google account. If you intend to sell but forgot the password to your Google account, then the bypassing operation will be needed.

2. Bought a pre-owned locked Samsung device

If you have unfortunately sold a locked Samsung device from a merchant or seller, then bypassing it yourself may save you a lot of hassle.

3. Running a phone buyback and re-selling business

If you are in the buyback and pre-owned phone-selling business, you will encounter various problems with the phones you acquire. And the Google FRP problem is definitely one of the most common ones. The ability to bypass FRP yourself should be one of the knowledge you should know.

Bonus: Prevention

Last but not least, if you want to avoid being locked-out entirely, it is recommended that you remove the Google account first before performing a factory reset. And to do that:

Go to “Settings” > “Accounts and Backup”
Tap “Manage Accounts”, then select your Google account
Select “Remove Account”, then confirm it.
When prompted, verify your identity and get rid of the Samsung FRP lock.

The post Bypassing Google Lock on Any Samsung Phones with UnlockGo appeared first on Hongkiat.

Sketchy Pencil Effect with Three.js Post-Processing

Original Source: https://tympanus.net/codrops/2022/11/29/sketchy-pencil-effect-with-three-js-post-processing/

In this tutorial, you’ll learn how to create a sketchy, pencil effect using Three.js post-processing. We’ll go through the steps for creating a custom post-processing render pass, implementing edge detection in WebGL, re-rendering the normal buffer to a render target, and tweaking the end result with generated and imported textures.

This is what the end result looks like, so let’s get started!

Post-processing in Three.js

Post-processing in Three.js is a way of applying effects to your rendered scene after it has been drawn. In addition to all the out-of-the-box post-processing effects provided by Three.js, it is also possible to add your own filters by creating custom render passes.

A custom render pass is essentially a function that takes in an image of the scene and returns a new image, with the desired effect applied. You can think of these render passes like layer effects in Photoshop—each applies a new filter based on the previous effect output. The resulting image is a combination of all the different effects.

Enabling post-processing in Three.js

To add post-processing to our scene, we need to set up our scene rendering to use an EffectComposer in addition to the WebGLRenderer. The effect composer stacks the post-processing effects one on top of the other, in the order in which they’re passed. If we want our rendered scene to be passed to the next effect, we need to add the RenderPass post-processing pass is passed first.

Then, inside the tick function which starts our render loop, we call composer.render() instead of renderer.render(scene, camera).

const renderer = new THREE.WebGLRenderer()
// … settings for the renderer are available in the Codesandbox below

const composer = new EffectComposer(renderer)
const renderPass = new RenderPass(scene, camera)

composer.addPass(renderPass)

function tick() {
requestAnimationFrame(tick)
composer.render()
}

tick()

There are two ways of creating a custom post-processing effect:

Creating a custom shader and passing it to a ShaderPass instance, or

Creating a custom render pass by extending the Pass class.

Because we want our post-processing effect to get more information than just uniforms and attributes, we will be creating a custom render pass.

Creating a custom render pass

While there isn’t much documentation currently available on how to write your own custom post-processing pass in Three.js, there are plenty of examples to learn from already inside the library. A custom pass inherits from the Pass class and has three methods: setSize, render, and dispose. As you may have guessed, we’ll mostly be focusing on the render method.

First we’ll start by creating our own PencilLinesPass that extends the Pass class and will later implement our own rendering logic.

import { Pass, FullScreenQuad } from 'three/examples/jsm/postprocessing/Pass'
import * as THREE from 'three'

export class PencilLinesPass extends Pass {
constructor() {
super()
}

render(
renderer: THREE.WebGLRenderer,
writeBuffer: THREE.WebGLRenderTarget,
readBuffer: THREE.WebGLRenderTarget
) {
if (this.renderToScreen) {
renderer.setRenderTarget(null)
} else {
renderer.setRenderTarget(writeBuffer)
if (this.clear) renderer.clear()
}
}
}

As you can see, the render method takes in a WebGLRenderer and two WebGLRenderTargets, one for the write buffer and the other for the read buffer. In Three.js, render targets are basically textures to which we can render the scene, and they serve to send data between passes. The read buffer receives data in from the previous render pass, in our case that is the default RenderPass. The write buffer sends data out to the next render pass.

If renderToScreen is true, that means we want to send our buffer to the screen instead of to a render target. The renderer’s render target is set to null, so it defaults to the on-screen canvas.

At this point, we’re not actually rendering anything, not even the data coming in through the readBuffer. In order to get things rendered, we’ll need to create a FullscreenQuad and a shader material that will take care of rendering. The shader material gets rendered to the FullscreenQuad.

To test that everything is set up correctly, we can use the built-in CopyShader that will display whatever image we put into it. In this case, in this case the readBuffer‘s texture.

import { Pass, FullScreenQuad } from 'three/examples/jsm/postprocessing/Pass'
import { CopyShader } from 'three/examples/jsm/shaders/CopyShader'
import * as THREE from 'three'

export class PencilLinesPass extends Pass {
fsQuad: FullScreenQuad
material: THREE.ShaderMaterial

constructor() {
super()

this.material = new THREE.ShaderMaterial(CopyShader)
this.fsQuad = new FullScreenQuad(this.material)
}

dispose() {
this.material.dispose()
this.fsQuad.dispose()
}

render(
renderer: THREE.WebGLRenderer,
writeBuffer: THREE.WebGLRenderTarget,
readBuffer: THREE.WebGLRenderTarget
) {
this.material.uniforms['tDiffuse'].value = readBuffer.texture

if (this.renderToScreen) {
renderer.setRenderTarget(null)
this.fsQuad.render(renderer)
} else {
renderer.setRenderTarget(writeBuffer)
if (this.clear) renderer.clear()
this.fsQuad.render(renderer)
}
}
}

Note: we’re passing the uniform tDiffuse to the shader material. The CopyShader already has this uniform built in and it represents the image to be displayed on the screen. If you’re writing your own ShaderPass, this uniform will be passed in to your shader automatically.

All that’s left is to hook the custom render pass into the scene by adding it to the EffectComposer—after the RenderPass of course!

const renderPass = new RenderPass(scene, camera)
const pencilLinesPass = new PencilLinesPass()

composer.addPass(renderPass)
composer.addPass(pencilLinesPass)

View the Codesandbox example

Scene with a custom render pass and the CopyShader

Now that we have everything set up, we can actually get started with creating our special effect!

Sobel operator for creating outlines

We need to be able to tell the computer to detect lines based on our input image, in this case the rendered scene. The kind of edge detection we’ll be using is called the Sobel operator, and it only consists of a few steps.

The Sobel operator does edge detection by looking at the gradient of a small section of the image—essentially how sharp the transition from one value to another is. The image is broken down into smaller “kernels”, or 3px by 3px squares where the central pixel is the one currently being processed. The image below shows what this might look like: the red square in the center represents the current pixel being evaluated and the rest of the squares are its neighbors.

3px by 3px kernel

The weighted value for each neighbor is then calculated by taking the pixels value (brightness) and multiplying it by a weight based on its position relative to the pixel being evaluated. This is done with weights biasing the gradient horizontally and vertically. The average of both values is taken, and if it passes a certain threshold, we consider the pixel to represent an edge.

The horizontal and vertical gradients for the Sobel operator

While the implementation for the Sobel operator follows the image representations above almost directly, it still takes time to grasp. Thankfully we don’t have to implement our own as Three.js already provides us with working code for one in the SobelOperatorShader. We’ll copy this code over into our shader material.

Implementing the Sobel operator

Instead of the CopyShader, we’ll now need to add our own ShaderMaterial so that we have control over the vertex and fragment shaders, as well as the uniforms sent to those shaders.

// PencilLinesMaterial.ts
export class PencilLinesMaterial extends THREE.ShaderMaterial {
constructor() {
super({
uniforms: {
// we'll keep the naming convention here since the CopyShader
// also used a tDiffuse texture for the currently rendered scene.
tDiffuse: { value: null },
// we'll pass in the canvas size here later
uResolution: {
value: new THREE.Vector2(1, 1)
}
},
fragmentShader, // to be imported from another file
vertexShader // to be imported from another file
})
}
}

We’ll get to the fragment and vertex shaders soon, but first we need to use our new shader material in the scene. We do this by swapping out the CopyShader. Don’t forget to pass the resolution—the canvas size—as a the shader’s uniform. While outside the scope of this tutorial, it’s also important to update this uniform when the canvas resizes.

// PencilLinesPass.ts
export class PencilLinesPass extends Pass {
fsQuad: FullScreenQuad
material: PencilLinesMaterial

constructor({ width, height }: { width: number; height: number }) {
super()

// change the material from to our new PencilLinesMaterial
this.material = new PencilLinesMaterial()
this.fsQuad = new FullScreenQuad(this.material)

// set the uResolution uniform with the current canvas's width and height
this.material.uniforms.uResolution.value = new THREE.Vector2(width, height)
}
}

Next, we can start on the vertex and fragment shaders.

The vertex shader doesn’t do much except set the gl_Position value and pass the uv attribute to the fragment shader. Because we’re rendering our image to a FullscreenQuad, the uv information corresponds to the position on the screen of any given fragment.

// vertex shader
varying vec2 vUv;

void main() {

vUv = uv;

gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}

The fragment shader is a fair bit more complicated, so let’s break it down line by line. First we want to implement the Sobel operator using the implementation already provided by Three.js. The only difference is that we want to control how we calculate the value at each pixel, since we’ll be introducing line detection of the normal buffer as well.

float combinedSobelValue() {
// kernel definition (in glsl matrices are filled in column-major order)
const mat3 Gx = mat3(-1, -2, -1, 0, 0, 0, 1, 2, 1);// x direction kernel
const mat3 Gy = mat3(-1, 0, 1, -2, 0, 2, -1, 0, 1);// y direction kernel

// fetch the 3×3 neighbourhood of a fragment

// first column
float tx0y0 = getValue(-1, -1);
float tx0y1 = getValue(-1, 0);
float tx0y2 = getValue(-1, 1);

// second column
float tx1y0 = getValue(0, -1);
float tx1y1 = getValue(0, 0);
float tx1y2 = getValue(0, 1);

// third column
float tx2y0 = getValue(1, -1);
float tx2y1 = getValue(1, 0);
float tx2y2 = getValue(1, 1);

// gradient value in x direction
float valueGx = Gx[0][0] * tx0y0 + Gx[1][0] * tx1y0 + Gx[2][0] * tx2y0 +
Gx[0][1] * tx0y1 + Gx[1][1] * tx1y1 + Gx[2][1] * tx2y1 +
Gx[0][2] * tx0y2 + Gx[1][2] * tx1y2 + Gx[2][2] * tx2y2;

// gradient value in y direction
float valueGy = Gy[0][0] * tx0y0 + Gy[1][0] * tx1y0 + Gy[2][0] * tx2y0 +
Gy[0][1] * tx0y1 + Gy[1][1] * tx1y1 + Gy[2][1] * tx2y1 +
Gy[0][2] * tx0y2 + Gy[1][2] * tx1y2 + Gy[2][2] * tx2y2;

// magnitude of the total gradient
float G = (valueGx * valueGx) + (valueGy * valueGy);
return clamp(G, 0.0, 1.0);
}

To the getValue function we pass in the offset from the current pixel, thus identifying which pixel in the kernel we are looking at to get that value. For the time being, only the value of the diffuse buffer is being evaluated, we’ll add the normal buffer in the next step.

float valueAtPoint(sampler2D image, vec2 coord, vec2 texel, vec2 point) {
vec3 luma = vec3(0.299, 0.587, 0.114);

return dot(texture2D(image, coord + texel * point).xyz, luma);
}

float diffuseValue(int x, int y) {
return valueAtPoint(tDiffuse, vUv, vec2(1.0 / uResolution.x, 1.0 / uResolution.y), vec2(x, y)) * 0.6;
}

float getValue(int x, int y) {
return diffuseValue(x, y);
}

The valueAtPoint function takes any texture (diffuse or normal) and returns the grayscale value at a specified point. The luma vector is used to calculate the brightness of a color, hence turning the color into grayscale. The implementation comes from glsl-luma.

Because the getValue function only takes into account the diffuse buffer, this means that any edge in the scene will be detected, including edges created by both cast shadows and core shadows. This also means that edges which we would intuit, such as the outlines of objects, could get missed if they blend in too well with their surroundings. To capture those missing edges, we’ll add edge detection from the normal buffer next.

Finally, we call the Sobel operator in the main function like this:

void main() {
float sobelValue = combinedSobelValue();
sobelValue = smoothstep(0.01, 0.03, sobelValue);

vec4 lineColor = vec4(0.32, 0.12, 0.2, 1.0);

if (sobelValue > 0.1) {
gl_FragColor = lineColor;
} else {
gl_FragColor = vec4(1.0);
}
}

View the Codesandbox example

Rendered scene with edge detection using the Sobel operator

Creating a normal buffer rendering

For proper outlines, the Sobel operator is often applied to the normals of the scene and the depth buffer, so the outlines of objects are captured, but not lines within the object. Omar Shehata describes such a method in his excellent How to render outlines in WebGL tutorial. For the purposes of a sketchy pencil effect, we don’t need complete edge detection, but we do want to use normals for more complete edges and for sketchy shading effects later.

Since the normal is a vector that represents the direction of an object’s surface at each point, it often gets represented with a color to get an image with all the normal data from the scene. This image is the “normal buffer.”

In order to create a normal buffer, first we need a new render target in the PencilLinesPass constructor. We also need to create a single MeshNormalMaterial on the class, since we’ll be using this to override the scene’s default materials when rendering the normal buffer.

const normalBuffer = new THREE.WebGLRenderTarget(width, height)

normalBuffer.texture.format = THREE.RGBAFormat
normalBuffer.texture.type = THREE.HalfFloatType
normalBuffer.texture.minFilter = THREE.NearestFilter
normalBuffer.texture.magFilter = THREE.NearestFilter
normalBuffer.texture.generateMipmaps = false
normalBuffer.stencilBuffer = false
this.normalBuffer = normalBuffer

this.normalMaterial = new THREE.MeshNormalMaterial()

In order to render the scene inside the pass, the render pass actually needs a reference to the scene and to the camera. We’ll need to send those through the constructor of the render pass as well.

// PencilLinesPass.ts constructor
constructor({ …, scene, camera}: { …; scene: THREE.Scene; camera: THREE.Camera }) {
super()
this.scene = scene
this.camera = camera

}

Inside the pass’s render method, we want to re-render the scene with the normal material overriding the default materials. We set the renderTarget to the normalBuffer and render the scene with the WebGLRenderer as we normally would. The only difference is that instead of rendering to the screen with the scene’s default materials, the renderer renders to our render target with the normal material. Then we pass the normalBuffer.texture to the shader material.

renderer.setRenderTarget(this.normalBuffer)
const overrideMaterialValue = this.scene.overrideMaterial

this.scene.overrideMaterial = this.normalMaterial
renderer.render(this.scene, this.camera)
this.scene.overrideMaterial = overrideMaterialValue

this.material.uniforms.uNormals.value = this.normalBuffer.texture
this.material.uniforms.tDiffuse.value = readBuffer.texture

If at this point you were to set the gl_FragColor to the value of the normal buffer with texture2D(uNormals, vUv); this would be the result:

Normal buffer of the current scene

Instead, inside the custom material’s fragment shader, we want to modify the getValue function to include the Sobel operator value from the normal buffer as well.

float normalValue(int x, int y) {
return valueAtPoint(uNormals, vUv, vec2(1.0 / uResolution.x, 1.0 / uResolution.y), vec2(x, y)) * 0.3;
}

float getValue(int x, int y) {
return diffuseValue(x, y) + normalValue(x, y);
}

The result will look similar to the previous step, but we will be able to add additional noise and sketchiness with this normal data in the next step.

View the Codesandbox example

Sobel operator applied to the diffuse and normal buffers

Adding generated and textured noise for shading and squiggles

There are two ways to bring noise into the post-processing effect at this point:

By procedurally generating the noise within the shader, or

By using an existing image with noise and applying it as a texture.

Both providing different levels of flexibility and control. For the noise function, I’ve gone with Inigo Quilez’s gradient noise implementation, since it provides nice uniformity in the noise when applying to the “shading” effect”.

This noise function is called when getting the value of the Sobel operator and is specifically applied to the normal value, so the getValue function in the fragment shader changes like so:

float getValue(int x, int y) {
float noiseValue = noise(gl_FragCoord.xy);
noiseValue = noiseValue * 2.0 – 1.0;
noiseValue *= 10.0;

return diffuseValue(x, y) + normalValue(x, y) * noiseValue;
}

The result is a textured pencil line and stippled effect on object curves where the normal vector values change. Notice that flat objects, like the plane, do not get these effects, since they don’t have any variation in normal values.

The next and final step of this effect is to add distortion to the lines. For this I used a texture file created in Photoshop using the Render Clouds effect.

Generated clouds texture created in Photoshop

The cloud texture is passed to the shader through a uniform, the same way that the diffuse and normal buffers are. Once the shader has access to the texture, we can sample the texture for each fragment and use it to offset the location we’re reading from in the buffer. Essentially, we get the squiggled line effect by distorting the image we’re reading from, not by drawing to a different place. Because the texture’s noise is smooth, the lines don’t come out jagged and irregular.

float normalValue(int x, int y) {
float cutoff = 50.0;
float offset = 0.5 / cutoff;
float noiseValue = clamp(texture(uTexture, vUv).r, 0.0, cutoff) / cutoff – offset;

return valueAtPoint(uNormals, vUv + noiseValue, vec2(1.0 / uResolution.x, 1.0 / uResolution.y), vec2(x, y)) * 0.3;
}

You can also play around with how the effect is applied each buffer individually. This can lead to lines being offset from one another, giving an even better hand-drawn effect.

View the Codesandbox example

Final effect including normal buffer based “shading” and line distortion

Conclusion

There are many techniques to create hand-drawn or sketchy effects in 3D, this tutorial lists just a few. From here, there are multiple ways to go forward. You could adjust the line thickness by modulating the threshold of what is considered an edge based on a noise texture. You could also apply the Sobel operator to the depth buffer, ignoring the diffuse buffer entirely, to get outlined objects without outlining shadows. You could add generated noise based on lighting information in the scene instead of based on the normals of the objects. The possibilities are endless, and I hope this tutorial has inspired you to pursue them!