Webdesign Services

Bootstrap Turns 10: A Look at Its Impact on the Web

In the web design industry, it’s rare that a tool stays relevant for a decade or more. Things tend to change so quickly that the useful life of an app or framework usually isn’t very long. However, Twitter’s Bootstrap has defied those odds.

Now in existence for over 10 years, the self-described “front-end open source toolkit” is used on over 22% of all websites. And we see it included everywhere from customized UI kits to WordPress themes.

Why has Bootstrap been able to reach such heights? For one, it comes packed with virtually everything designers need to craft a clean, responsive UI. Plus, the fact that it continues to be actively developed and evolve means that web professionals can reliably come back to it again and again.

With a decade under its belt, this is a good time to look at the overall impact Bootstrap has had on the web. Has it been a blessing, curse, or somewhere in-between?

A Tool for Rapidly Implementing an Established Look and Feel

The biggest advantage Bootstrap provides is the ability to implement an established look and feel. Right out of the box, you have a set of UI elements and components that cover just about every use case. It doesn’t matter if you’re selling t-shirts or blogging about your favorite video games – the framework gives you a massive head start on the design.

In addition, Bootstrap is extensible. It’s built with customization in mind, making it a fairly straightforward process to change various components to meet your needs. Creating your own components is also possible.

That goes beyond individuals performing one-off tweaks for a specific project. It also extends to theme developers. They can leverage the framework to bring a familiar front-end UI to content management systems (CMS).

Yet, customization is still optional. If your goal is to design and deploy a project quickly, just installing Bootstrap (or an offshoot UI kit) and familiarizing yourself with its contents is all you need.

This level of convenience and flexibility has undoubtedly played a large role in Bootstrap’s enduring popularity.

The Bootstrapping of the Web

Bootstrap does its intended job quite well. Perhaps a little too well.

As we mentioned, the usage statistics point to nearly a quarter of all websites utilizing the framework. When a UI is so widespread, it’s bound to lead to some sameness when it comes to design.

Much like the early days of the CMS, it’s often easy for the trained eye to pick out elements of Bootstrap within a website. You start to notice the same buttons, navigation styles, and pricing tables. Even sites that don’t use it may well attempt to duplicate certain aspects of the look.

To be sure, it’s generally clean, accessible, and easy to read. While that can be considered a good thing, there’s also a bit of a downside. And it isn’t necessarily an issue with Bootstrap itself.

Rather, it’s about designers either accepting its default styles or changing them only minimally. The result is a web that is becoming increasingly homogeneous.

Bootstrap Feature examples.

Inspiring a New Category of Frameworks

Perhaps it’s a testament to how well put together Bootstrap is. There aren’t a bunch of shortcomings that need fixed. Everything works as intended right from the start.

With that, some designers may not feel the need to radically change anything. One could even argue that it goes against the very point of the framework in the first place.

Unlike a lot of tools aimed at the web design community, Bootstrap has a universal appeal. There is no particular niche that it can’t fit into. That’s a key to its massive adoption rate. And it has inspired an entire category of CSS and JavaScript frameworks.

Other worthy competitors have popped up in recent years, such as Tailwind CSS. It has a similar appeal. However, it differs in that it’s more “utility” based. The various elements are all there, but depend on the designer to customize them to fit a need.

Bootstrap is unabashedly opinionated in its design. Tailwind CSS goes in the opposite direction. If anything, this provides designers with two great options, depending on their own preferences.

Design from the ground up or implement a completely polished UI – the choice is yours.

Bootstrap Theme listing.

A Behind-the-Scenes Powerhouse

Maybe the most impressive aspect of Bootstrap’s 10-year rise is that it’s a completely developer-focused tool. That is, you interact with its code and view the results on the front end. That’s opposed to, say, WordPress, where users create content and install custom functionality via a back-end dashboard.

The framework is generally of interest to professionals. Thus, it relies on web designers for growth. It doesn’t have the same public-facing profile of a CMS.

That says a lot about what Bootstrap has done right over the past decade. To win over a sizeable portion of this industry is no small task. To maintain it and continue to grow for this long is even more telling.

What will the future bring? We don’t have all the answers. But, whatever happens, it’s likely Bootstrap will still play a significant role in web design for years to come.

The post Bootstrap Turns 10: A Look at Its Impact on the Web appeared first on Speckyboy Design Magazine.

Webdesign Services

Fresh Resources for Web Designers and Developers (August 2021)

There are new tools and techniques coming up every day in the field of web development. And sometimes, it gets pretty difficult to keep up with all the new advancements.

Therefore, in this post, we’ve put together some of the most exciting resources to help our fellow web developers to stay up to date. In this round of the series, we have tools and frameworks, a couple of learning materials, and some design resources. Without further ado, let’s jump to the full list.

Fresh Resources for Web Designers and Developers (July 2021)

Fresh Resources for Web Designers and Developers (July 2021)

As a web developer, there’s always something you can learn every day and grow. You can learn design… Read more


A test framework for JavaScript with some interesting takes. First, it includes a nice-looking UI where you can run and monitor the tests of each file.

Secondly, it supports modern JavaScript out-of-the-box, including Aysnc/Promise, TypeScript, and many more to come. All these I think make it stands out from the rest of similar frameworks.

Awesome Guidelines

Awesome Guidelines contains guidelines for code standard and best practices for many programming languages, frameworks, and development environments.

So, if you’re managing a team of developers, this would be a great reference for you to formulate guidelines for your team. You need to have it in your bookmark.


IDB KeyVal

Did you know that browser has a built-in database? It’s called IndexedDB. It works similar to SQL where you can add a database and the columns except that it lives right in the browser.

This library makes it easy to deal with IndexedDB. It addresses all the quirks and compatibility across the different browsers and versions.


Github Open Graph Image

Github has made an interesting update to their platform. Before this update, it used to looked weird when shared a repository URL from Github as it shows the repository author.

Now with the update, Github shows a more relevant image to the repository which includes the repository name, languages, author, etc. In this blog post, Github shared how it works behind the scene.


Absurd Design

A collection of abstract illustrations that look absurd. If you ever need to design a website with a unique persona, you can try to use these illustrations in your design. The illustration comes in two formats: PNG and SVG.



A custom VSCode theme. It comes in a light and dark color scheme and looks great in Retina and in HTML, CSS, and JS codes. Another nice looking theme, you should install to give your code editor a fresh look.


Schema API

A tool where you can parse a website to get structured meta data of the website defined in Schema.org. A pretty handy tool to spy on what your competitors are doing with their metadata. Also, it’s free.



A collection of icons designed for web designers and developers. The collection contains more than 1500 icons from various categories. Here you can find some regular icons to build websites and apps as well as logos of popular tech and services.



A lightweight JavaScript library to highlight code syntax with the proper color. It’s fast and supports 100 languages out-of-the-box including one written in traditional Chinese. It also includes some popular themes such as Monokai, Dracula, Github both dark and the light versions.

Bulletproof React

A pre-defined architecture that covers almost everything you need to build a robust application using React.js. It sets the directory structure and configuration, styled components, state management, authentication, testing, etc.

It’s a great time saver and allows you to start developing immediately. If you ever need to build an application with React.js, this is a great starting point.



A library to render code syntax with a proper color that requires no JavaScript. Yes! unlike similar libraries for the purpose, Torchlight runs on the server-end and outputs a fully rendered HTML with the syntax colors. It supports many lanuages and provides several themes out-of-the-box.


Laravel Zero

A framework to create a command-line (CLI) using Laravel. It comes with some different takes than one built-in Laravel. For example, it adds support for an interactive menu where you can select options right in Terminal, and the ability to send a desktop notification to name a few. It’s a framework to build a robust CLI application.


WP-CLI Fixtures

A WP-CLI extension to generate dummy content. You can generate not only posts but other types of content in WordPress such as Menu, Taxonomy, and Users. This comes in handy for performing automated testing.



Starship is a tool that extends the Shell environment. It adds command completion, extra information of your current projects such as the current Git branch, Git metrics, and version of the current programming language.

It also provides many options that make Shell environment more joyful to use and boost productivity.



A modern command-line application to perform HTTP requests. Unlike some of the existing apps, HTTPie provides a more intuitive syntax. It also has JSON support built-in with more readable output. It’s an all-around HTTP client that helps you be more productive when dealing with HTTP requests.


Learn Anything

Interested in learning something new but not sure where to get started? Head over to this unique search engine that will provide you with guidelines and resources for learning materials. You can search anything – from web design to mobile applications, etc.


VSCode JS Debug

The new and improved JavaScript debugger for Visual Studio Code. It works across different platforms, not only in the browser like Chrome and Edge but also Node.js environment and a VSCode extension.


Lint Staged

Keep your source in compliance with the code standard with this extension. It allows you to check code upon staging it in Git and would prevent it to push before it passes the check. It’s pretty handy if you manage a project in a team or open-source with multiple contributors.



This PHP library allows you to orchestrate a Chrome-headless through PHP. You can use this library to run some automation testing in the browser. I’m sure PHP developers would appreciate this library as they can maintain most of their projects that are using a single language: PHP.


Vitesse WebExt

A boilerplate and development environment to get you up quickly on developing browser extensions built on top of Vue.js and its supporting components.

It also has taken care of the prerequisite configurations such as with the WebExtension polyfills, WindiCSS for styling, ESLint for code lint, TypeScript, etc.


The post Fresh Resources for Web Designers and Developers (August 2021) appeared first on Hongkiat.

Did you miss our previous article…

Webdesign Tips

10 Best Stationery Templates for Creating Professional Documents

Professionally designed stationery is an important part of any brand identity. However, designing a full stationery suite can be time-consuming. The good news is that you don’t have to start from scratch.

If you’re pressed for time, check out this collection of beautifully designed stationery templates. They are a great starting point for designing professional documents and contain everything from a letterhead down to envelopes and folders.

We also have collections of the best poster templates, social media kits, flyer templates, business card templates, project proposal templates, and brochure templates.

Minimal and Professional Corporate Stationery (By Egotype, Adobe Photoshop Format)

This minimal and professional corporate stationery template is a perfect choice for anyone who loves a minimal design. The template comes with a few design variations in both A4 and US letter sizes and includes business cards, letterhead, folder, and an invoice template.

Minimal Stationery Design Template (By EightonesixStudios, Adobe Photoshop Format)

Another minimal stationery design template that was designed in Photoshop and perfect for any type of business. The template includes business card design, letterhead, folder and envelope design.

Minimal corporate stationery business template format

Simple, Clean & Modern Stationery (By Egotype, Adobe Photoshop Format)

If you’re looking for a stationery set with a more corporate feel, don’t miss this Simple Clean and Modern Stationery template. It’s perfect for creative businesses, created in Adobe InDesign. It comes in A4 and US Letter size.

Simple Clean Modern corporate stationery business template format

Minimal Corporate Stationery Design Template (By EightonesixStudios, Adobe Photoshop Format)

This elegant stationery template was designed in US letter size and features a business card design, letterhead, an envelope and a presentation folder. The template is easy to customize to match your brand and comes with well-organized layers.

Minimal Corporate stationery business template format

Stego Stationery Set & Invoice (By andre28, Adobe Photoshop Format)

This template features a colorful design that’s easy to edit. The files are suitable for any type of business and they include invoice, letterhead, business card, folder, envelope, and matching postcards.

Stego Stationery Set Invoice corporate stationery business template format

Minimal Gery Stationery (By Egotype, Adobe Photoshop Format)

The Minimal Gery Stationery template features a simple design with elegant typography. It was designed in A4 and US letter size and offers several design variations. It comes with letterhead, invoice, business card, envelope and presentation folder templates.

Minimal Gery corporate stationery business template format

Modern Geometric Pattern Stationery (By TMint, Adobe Photoshop Format)

Try the Modern Geometric Pattern Stationery if you’re looking for a creative and unique design. This template includes a business card, an envelope, and a presentation folder and can be edited with Adobe Photoshop or illustrator.

Modern Geometric Pattern corporate stationery business template format

Minimal Corporate Stationery Design Template (By EightonesixStudios, Adobe Photoshop Format)

List template features a simple design with pops of color that make the design come to life. The template includes a business card, letterhead, an envelope, and a presentation folder and can easily be customized in Adobe Photoshop.

Minimal Corporate Stationery corporate stationery business template format

Modern Business Stationery (By TMint, Adobe Photoshop Format)

This Modern Business Stationery set features a classic black and white design. It was designed in US letter size and contains a business card, an envelope and a presentation folder.

modern corporate stationery business template format

Olive Identity Stationery Template (By WildOnes, Adobe Photoshop Format)

This template features a feminine style. It includes everything you need for your business – business card design, A4 form design, folder, and envelope design. You can easily customize this template with Adobe Photoshop.

Olive Identity corporate stationery business template format


A well-designed stationery set is a great way to reinforce your brand and build brand recognition. It will help you stand out among your competition and be more memorable in your business communications. Choose one of the templates from this list to get you started and then customize and tweak the template to match your brand.

The post 10 Best Stationery Templates for Creating Professional Documents appeared first on Speckyboy Design Magazine.

Did you miss our previous article…

Webdesign Services

A Guide to Choose Fonts for Your Web Design

(Guest writer: Amelia Harper)

Though it may look like a trivial element, however, choice of fonts influences the success of your web design. A suitable typeface helps maintain the UI’s overall consistency and makes the website look aesthetically satisfying. It also increases the website’s readability for a good user experience.

Choosing the fonts depends on the purposes and tone of your website, but if you are confused, or you do not have enough knowledge about how to select the correct fonts for web designing, don’t worry; this short and interesting guide contains the key points for you to choose the correct fonts.

So, just take a look at this interesting and helpful guide based on the tips shared by experts with the ten important things to consider before selecting the fonts for web designing.

20 Ultra Light and Elegant Fonts for Web Designers

20 Ultra Light and Elegant Fonts for Web Designers

Along with color and layout selections, choosing the right font is essential for producing pretty much any good… Read more

Things to consider when choosing fonts:

Communications play an important role in web designing for establishing a good connection between the website and the users. Communication refers to the textual part of the website where good typography makes the reading seamless for the users, while bad typography turns users off.

Here are 10 key points that can help you choose the best fonts for web your web design for better readability and aesthetics.

1. Limit the number of fonts

If you use more than three different fonts for the same website, then your web design may turn out to be shapeless and unprofessional because the excess of type sizes and styles in one website can ruin its layout.

So, for a good website, you must have to limit the number of fonts to a minimum of 2 or 3 typefaces.

45 Beautiful Free Fonts For Designers (Updated)

45 Beautiful Free Fonts For Designers (Updated)

It’s time to dust off your long-forgotten treasure chest filled with fonts and bring in new ones before… Read more

2. Use the standard fonts

You can access a lot of interesting standard fonts like Gotham, Garamond, Arial, and Roboto on the font embedding services like Google Fonts and Adobe Fonts (Typekit).

These fonts can give your website a fresh and professional look. These are also good for increasing readability for users, branding purposes, and providing a good user experience.

25 Best Websites to Download Free Fonts

25 Best Websites to Download Free Fonts

In the design industry, there’s always a gold rush for a good font that may add impact to… Read more

3. Type of font family

Try to opt for a versatile font family. Some font families like Gotham font free, Garamond, Open sans, and Yellowtail are super due to their amazing versatility that allows web designers to work with more freedom having a lot of options.

4. Use attractive themes

The theme of a typeface is a predefined combination of size, color, and style of the text that can be easily applied to the selected text.

It is a set of formatting choices, including effects, colors, and adjustment options for making your website more attractive to increase site users’ interest.

5. Set line length

The length of the line really matters. You can visit any professional website to check the limited number of characters used in each line.

The correct number of characters used in each line always increases the readability of the website. According to the Baymard Institute, you should have around 60 characters per line if you want a good reading experience.

6. Use a font that’s good for multiple sizes

The users may visit your website using different devices with different screen sizes, so you have to choose a suitable font for both small and big sizes and resolutions.

You should choose a font that is legible in multiple sizes because the extreme number of fonts can wreck your site and will not maintain readability and useability.

7. Avoid using similar fonts

Using similar fonts can make it easy to confuse the same letterforms. So be careful when choosing a font and make sure that it uses different contexts that will not cause any issue for the site users.

8. Avoid using all caps

Using ALL CAPS may be good for the text such as titles or logos. But for the body text you should never use all capital letters. Otherwise, it may be read as if someone is shouting out that text.

9. Do not use less spacing between the lines

In typography, you should not decrease the spacing between the lines, but you have another good term to use that is leading. By increasing the leading, you can increase the vertical space between the lines. Leading should be 30 % more than the character height, which is good for website viewers.

10. Use enough color contrast

Try to use different colors for text and background because it will make your website more attractive, and it will not let the user leave the site.

The small and large color contrasts should have the ratio of 4.5:1 and 3:1, respectively, that most professional designers use for web designing.


So, these were some key points you should consider when you’re selecting a font for your website. By following these key points, you can create a professional website that is seamless to read and aesthetically pleasing.

(This guest post is written by Amelia Harper for Hongkiat.com. Amelia is a professional graphic designer and writer. She has experience of 15 years experience in graphic design and a long stint of freelancing in Sydney and London. She relished the challenge of joining the international design school in New York City and her aim to introduce everyone to graphic design. She likes to write about graphic design, typography, and entrepreneurship.)

The post A Guide to Choose Fonts for Your Web Design appeared first on Hongkiat.

Webdesign Services

40 Free Photoshop Actions for Adding Vintage Effects to Your Photos

If you regularly work on a certain type of project, you probably have your workflow down path, which means you probably repeat the same steps over and over to achieve a specific result. But for a workflow to be truly efficient, it should also save you time. That’s where Photoshop actions come in handy.

Photoshop actions are nothing more than a series of tasks you can record and apply to a single file or a batch of files. They can be as simple as resizing an image and applying a color overlay to more complex such as resizing an image, adding a filter, applying an overlay, and renaming them according to a specific rule.

In most cases, Photoshop actions are used to achieve a certain effect to your images without spending hours recreating the effect from scratch every time. While you can certainly create your own Photoshop actions, don’t forget that there are countless Photoshop actions available for download online.

Among them are Photoshop actions designed to add vintage effects to your images, and in this article, we have collected the best of them. You’ll find a collection of free, high-quality vintage Photoshop actions that you can download, add to your design toolbox, and instantly apply to your designs.

For a more general collection of Photoshop Actions, take a look at this article: 50 Free Time-Saving Photoshop Actions.

More Photoshop Actions:

  • Black & White Effect Actions
  • Bokeh Effect Actions
  • Cinema & Movie Effect Actions
  • Double Exposure Effect Actions
  • Dispersion Effect Actions
  • Duotone Effect Actions
  • Glitch Effect Actions
  • HDR Effect Actions
  • Light Leak Effect Actions
  • Retro & Vintage Effect Actions
  • Sketch Effect Actions
  • Text Effect Actions

Engraved Illustration Effect Photoshop Actions (FREE)

Halftone Automator Photoshop Actions (FREE)

Halftone Automator vintage free photoshop action atn

Retrograde Retro & Vintage Photoshop Actions (on Envato Elements)

Retrograde Retro vintage photoshop action atn

7 Vintage Actions Photoshop Actions (FREE)

vintage free photoshop action atn

Hand-Colored Vintage Photo Actions (FREE)

Hand-Colored vintage free photoshop action atn

Analog & Retro Photoshop Actions (on Envato Elements)

Analog Retro vintage photoshop action atn

Matte Vintage Photoshop Actions (FREE)

matte free photoshop action atn

Vintage Photoshop Action (FREE)

vintage free photoshop action atn

75 Ultra Faded Retro Effects Photoshop Actions (on Envato Elements)

Ultra Faded Retro photoshop action atn

Breeze Vintage Effect Photoshop Actions (FREE)

Breeze Vintage Effect free photoshop action atn

Vintage Light Photoshop Actions (FREE)

Vintage Light free photoshop action atn

Retro Photography Photoshop Actions (on Envato Elements)

Retro Photography free photoshop action atn

Retro Style Photo Effect Photoshop Actions (FREE)

Retro Style Photo Effect free photoshop action atn

Runaway Vintage Photoshop Actions (FREE)

Runaway Vintage free photoshop action atn

Retro Photo Kit for Photoshop (on Envato Elements)

 free photoshop action atn

Vintage Red Photoshop Action (FREE)

Retro Photo Kit photoshop action atn

Vintage Colors Photoshop Actions (FREE)

Vintage Colors free photoshop action atn

Retro Film Photoshop Actions (on Envato Elements)

Retro Film free photoshop action atn

Action Vintage Photoshop Actions (FREE)

Action Vintage free photoshop action atn

Ageing Photo Effect Photoshop Action (FREE)

 free photoshop action atn

Subtle Vintage Photoshop Actions Pack (FREE)

Ageing Photo Effect vintage free photoshop action atn

Grungy Vintage Photoshop Actions (FREE)

Grungy Vintage free photoshop action atn

Vintage Effect Photoshop Action (FREE)

Vintage Effect free photoshop action atn

Stylish Vintage Photoshop Actions (FREE)

Stylish Vintage free photoshop action atn

SweetPea Country Vintage Photoshop Action (FREE)

SweetPea Country Vintage free photoshop action atn

Mondelcore Vintage Photoshop Action (FREE)

Mondelcore Vintage free photoshop action atn

Vintage Effect II PS Actions (FREE)

Vintage Effect II free photoshop action atn

Vintage Photo Effect PSD & Action (FREE)

Vintage Photo Effect PSD free photoshop action atn

Vintage Effect Photoshop Actions (FREE)

Vintage Effect free photoshop action atn

Sweet Vintage Photoshop Actions (FREE)

Sweet Vintage free photoshop action atn

LT’s Vintage Lightleak Photoshop Action (FREE)

LT Vintage Lightleak free photoshop action atn

Rocketlaunch Retro/Vintage Photoshop Actions (FREE)

Rocketlaunch Retro Vintage free photoshop action atn

Buttercream Vintage Photoshop Action (FREE)

Buttercream Vintage free photoshop action atn

Coffee Cup Photoshop Actions (FREE)

Coffee Cup vintage free photoshop action atn

SweettEmottion Vintage Photoshop Action (FREE)

SweettEmottion Vintage free photoshop action atn

Vintage Gradient Photoshop Action (FREE)

Vintage Gradient free photoshop action atn

Vintage Love Photoshop Action (FREE)

Vintage Love free photoshop action atn

Vintage Effect Photoshop Action (FREE)

Vintage Effect free photoshop action atn

Vintage Burn Photoshop Action (FREE)

Vintage Burn free photoshop action atn

Whimsical Dreams Vintage Photoshop Actions (FREE)

Whimsical Dreams Vintage free photoshop action atn

LT’s Vintage Style Photoshop Action (FREE)

LT Vintage Style free photoshop action atn

Cool Vintage Photoshop Actions (FREE)

Cool Vintage free photoshop action atn

Pink Vintage Photoshop Action (FREE)

Pink Vintage free photoshop action atn

Gum Bichromate Print Photoshop Action (FREE)

Gum Bichromate Print vintage free photoshop action atn

Lithprint Vintage Photoshop Action (FREE)

Lithprint Vintage free photoshop action atn

How to Create Your Own Photoshop Action

It is very easy to create your own vintage Photoshop actions. All you have to do is open up the “Actions” palette in Photoshop and click the “New Action” button as seen in the picture below:

This will now open a new window offering you different options for creating your action. You can name the action and can place it in a set.

Alternatively, you can assign a shortcut to your created action for quick access. This will help you immediately activate the action in Photoshop, and you can use this option for those actions that you use regularly.

Now, hit the “Record” button to start recording your desired actions. Here, you should remember one thing that steps like selection sizes, saving, and other specific steps will be duplicated exactly in the action. Therefore, you need to be very careful in keeping your steps as generic as possible. In this way, you can apply them to the complete range of the image on which you want to apply your action to.

When you are done, click the “Stop” button in the action menu. Now, if you want to apply the action on another file, you can simply click the “Play” button.

Installing Photoshop Actions

Installing Photoshop actions is also very easy and there are several ways to install Photoshop actions. You can simply drag the downloaded actions into the “Actions” folder that you can find enclosed within the “Presets” folder in your Photoshop application folder. This would be the easiest way to install Photoshop actions.

Alternatively, you can also use the little arrow on the right of the actions menu, and then click “Load Actions” option. This will also install downloaded actions into your Photoshop quite quickly.

The post 40 Free Photoshop Actions for Adding Vintage Effects to Your Photos appeared first on Speckyboy Design Magazine.

Did you miss our previous article…

Webdesign Ideas

How to Help Your Clients Choose the Right eCommerce Payment Gateway

Depending on who you are, building an eCommerce website usually involves different priorities. If you’re a shopkeeper, you will probably think about the big picture stuff. You’ll want your products to look perfect and your content to drive sales.

For web designers, the priorities are more likely to be buried in the details. Sure, our client wants feature x, y, and z – but how do we make it happen? It’s about finding the tools and customizations to get the job done.

Either way, one of the keys to putting a successful eCommerce website together is the payment gateway. Pick the wrong one, and it could be costly or even outright disastrous.

This is among the most important decisions to be made during a project. Yet, it doesn’t always get the level of attention it deserves. Let’s change that!

Here are some tips for helping your clients choose the right eCommerce payment gateway.

Determine Project Requirements First

The payment gateway should not be the first component chosen in an eCommerce project. Even if your client already has a preference, there’s no guarantee it will be compatible with everything on their wish list.

Before seriously considering gateway providers, you’ll want an outline of project requirements. Discuss the features and functionality the website will need to satisfy your client’s goals.

For example, knowing which shopping cart software will be used is vital. The preferred gateway may not simply plug and play with the cart. In those cases, custom code may need to be written or add-on software purchased.

The same goes for recurring subscription payments, like those on membership websites. Some providers are built to handle this out-of-the-box, while others may require more effort.

And it’s not just a matter of basic compatibility. All of the little details need to be figured out ahead of time. Otherwise, you run the risk of having to go back to the drawing board when something doesn’t work as expected.

It’s better to gain an understanding of a project’s needs before committing to a payment gateway.

Consider the Money Management Workflow

Not only do your clients want to make money from their website, but they’ll also want to manage that cash in an efficient way. When it comes to payment gateways, one size does not fit all.

Some of this does have an impact on the website itself. The ability to provide customer refunds is an area that could see a lot of use. Therefore, a gateway that simplifies the process is worth its weight in gold. You may even find one that allows refunds to be created directly within the shopping cart’s back end.

Other aspects are more about interacting directly with the gateway provider. Among the bigger issues here is how funds are transferred to your client’s bank account. There are some gateways that famously require the account holder to make transfers manually. However, others have a more automated approach.

It’s also worth looking into how quickly funds become available. If sales don’t show up within the account for several days, that may not fit your client’s needs.

A person counting money.

Dig Deep into Transaction Fees and Future Growth

Every payment gateway has an associated cost. Most take a percentage of each sale and put it in their pocket. This can sometimes be combined with a flat per-sale fee as well.

Shopping around will give your client a good idea of cost-effective providers. However, there’s often more to the story.

In some cases, those per-sale transaction fees can scale. The bigger your revenue, the more money the provider keeps for themselves. Thus, it’s important to look at projections and determine the potential costs if sales take off.

Is your client selling to a global audience? Fees for international transactions and currency conversion could be applicable.

Beyond sales, there are other fees to watch out for. Some providers will charge a fee for “priority” transfers to a bank account. These can become significant if your client is moving a lot of money around.

Monthly or yearly subscription fees might also apply. Providers that offer tiered accounts may require these fees in order to unlock advanced features.

So, while a gateway provider may advertise attractive rates – be careful. The real costs are often spelled out in the fine print.

A payment app displayed on a smartphone.

Help Your Clients Help Themselves

Choosing the right eCommerce payment gateway isn’t easy. It’s much more than just signing on with the biggest name or the shiniest transaction rate. A lot goes into ensuring that it’s the right option for your project.

That said, it’s not necessarily a web designer’s job to make the final decision. That’s up to our clients. All we can do is guide them along and show them what to look for.

On the technical side, we do need to know whether a specific provider will meet the project’s functionality needs. But when it comes to rates and managing cashflow, clients really need to take the lead. They’re the ones who’ll have to live with the choice. Thus, they should know the subject inside and out.

Hopefully, this guide will help you fill them in on the details. Good luck!

The post How to Help Your Clients Choose the Right eCommerce Payment Gateway appeared first on Speckyboy Design Magazine.

Did you miss our previous article…

Webdesign Ideas

The 15 Best Free Google Slides Templates & Themes

A professional slide deck can make all the difference between having a successful presentation or boring your audience and losing their interest. However, designing a slide deck from scratch is time-consuming, so it’s good that there are pre-made templates that can save you time.

In this roundup, we’ve gathered the best templates and themes for Google Slides so you can design your presentation in the cloud, share it with others, and collaborate on it with your team members.

The templates on this list will make it easy to get started with your presentation design, but you can also use them as an inspiration if you prefer to create your own presentation design.

If you’re looking for free Keynote templates, take a look at this collection. And, you’ll find free Powerpoint templates here.

How to Import & Install a Template into Google Slides

Google Slides make it easy to create any type of presentation and there are hundreds of Google Slide templates available online that you can use as a starting point for your presentation design. Here’s a quick tutorial on how to import and install a template into Google Slides.

  • Download and unzip the Google Slide template you want to use
  • Navigate to your Google Drive
  • Click the New button and then select Google Slides > Blank Presentation
  • Go to File > Import Slides
  • Click on the Upload tab and drag the downloaded Google Slide template onto the screen
  • Select the individual slides you want to import and press the Import Slides button
  • Once the process is finished, your template will be loaded in Google Slides where you can edit it

Minimal & Professional Google Slides Template (Free)

This minimal and professional Google slides template features a classic black and white design. You’ll find a variety of slide designs as well as charts, graphs, and icons that will help you present your ideas in a professional manner.

Score Slides Template (Envato Elements)

This template has tons of elements that you will need for your presentation. You will find unique layouts, maps, infographics, and charts as well as vector icons. The template includes more than 110 individual slides, 300+ editable icons, and 20+ premade color schemes.

Score google slides theme presentation template

Roderigo Google Slides Theme (Free)

Try this Google Slides theme if you’re looking for a colourful design. The theme includes a variety of slide designs and styles for charts, graphs, and icons. The template was designed in 16:9 screen format.

Roderigo google slides theme presentation template free

Moskva Fashion Google Slides Template (Envato Elements)

This template can be downloaded once you sign up for inverter element subscription the temperature includes 36 different slide designs as well as free vector icons that are easy to resize. The template also includes picture placeholders so you can easily drag and drop your images into the presentation.

Moskva Fashion google slides theme presentation template

Magazine Google Slides Theme (Free)

The Magazine Google Slides theme mimics a magazine look and feel and includes more than 15 individual slide designs. You’ll also find five premade color schemes and different styles for icons, charts, graphs, and other presentation elements.

Magazine google slides theme presentation template free

Fashion Lookbook Google Slides Template (Envato Elements)

This Fashion Lookbook Google Slides template features more than a 100 unique slides and it was designed in two screen formats: the 16:9 and the widescreen format. You’ll find a variety of styles for charts, icons, and other presentation elements as well as premade color schemes and image placeholders.

Fashion Lookbook google slides theme presentation template

Watercolor Google Slides Theme (Free)

If you’re looking for a minimal Google Slides template, give this watercolor Google Slides theme a try. It features 25 creative slides with minimalist design. All slides are fully customizable and easy to edit.

Watercolor google slides theme presentation template free

Creative Google Slides Theme (Free)

This colorful Google Slides theme is perfect for student and teacher presentations. It comes with 25 unique slides that are easy to edit and you will also find high quality vector graphics that you can use to spice up your presentation.

Creative google slides theme presentation template free

Dion Google Slides Theme (Free)

The Dion Google Slides theme is a great choice for any presentation that is centered around the topic of travel and tourism. The template features 27 unique slide designs and examples of styles for graphs, charts and tables.

dion google slides theme presentation template free

Emma Google Slides Presentation (Envato Elements)

The Emma template is a great choice for fashion or beauty presentations. The templates features an elegant and minimalist design style paired with subtle color schemes. The Emma template comes with more than 50 unique slides, image placeholders, and vector icons.

emma google slides theme presentation template

Evoliova Medical Google Slides Template (Envato Elements)

The Evoliova template is a great choice for any type of medical presentation. The template includes more than 50 individual slide designs, custom vector icons, and 4 premade color schemes. Each slide is fully customizable.

Evoliova Medical google slides theme presentation template

Social Media Template (Free)

The Social Media template features 23 colourful slide designs which are perfect for any type of presentation that deals with social media. All of the slides are fully editable so you can easily change colours and fonts and insert your own images. The template also includes high-quality vector graphics.

Social Media google slides theme presentation template free

Salisbury Google Slides Theme (Free)

The Salisbury template features a creative and unique design with 15 different slide types and premade styles for charts, graphs, icons, tables, and other presentation elements. The template was designed in 16:9 screen layout.

Salisbury google slides theme presentation template free

Felipe Google Slides Theme (Free)

Try the Felipe Google Slides theme if you’re going for a more playful look. This template includes 11 individual slides with various designs and it was designed in 16:9 screen format.

felipe google slides theme presentation template free

Rhombus Infographic Slides (Free)

The Rhombus Infographic Slides features 3 unique slide designs which can easily be customized. You can change colors and fonts and easily insert your own images. The slides were designed in 16:9 aspect ratio and include custom vector icons.

Rhombus Infographic google slides theme presentation template free

Alpha Presentation Template (Free)

The Alpha presentation template is a perfect choice if you want to include a lot of photography in your presentation. This template is a great choice for photographers,, designers, illustrators or any other creatives that want to showcase their works. The template includes 10 different slide designs and premade styles for diagrams, charts, graphs and icons.

alpha google slides theme presentation template free

Yellow Bussiness Google Slide (Envato Elements)

This bold and cheerful Google Slide template features 50+ unique slide designs. You can easily change the color to match your brand and use image placeholders to quickly replace the photos. The template also include editable vector shapes and icons.

Yellow Bussiness business google slides theme presentation template

Corporate Google Slides Theme (Free)

This Corporate Google Slides theme features a minimalist and elegant design and comes with ten unique slides. It includes high-quality vector graphics and special slides for images, tables, flowcharts, and graphs.

Corporate business google slides theme presentation template free

Business Google Slides Presentation (Free)

This Google Slides template was designed with business presentations in mind. You will find more than 10 unique slide designs along with premade styles for charts, icons, and graphs. The template also comes with image placeholders.

Business google slides theme presentation template free


Great presentation starts with a stunning slide deck. With the help of Google Slide templates on this list, you can save time on your presentation design and make sure you have all the design elements you will need to create a memorable presentation. Be sure to download them before you get started on your presentation deck.

The post The 15 Best Free Google Slides Templates & Themes appeared first on Speckyboy Design Magazine.

Did you miss our previous article…

Webdesign Ideas

Weekly News for Designers № 607

Tabs in HTML? – Check out this demo of HTML tabs that work differently, depending on viewport size. Could this be the future of HTML?
Example from Tabs in HTML?

Manim – Create precise animations programmatically with this engine for explanatory math videos.
Example from Manim

New Boilerplate Speeds Up Building “Nearly Headless” WordPress Themes – A look at why it might be more efficient to go with a configuration that stops short of being “headless”.
Example from New Boilerplate Speeds Up Building “Nearly Headless” WordPress Themes

Novus – A multi-threaded package manager for Windows that promises speed.
Example from Novus

The Grumpy Designer’s Cure for Massive Expectations – Why attempting to be a knower of all things is a road to nowhere.
Example from The Grumpy Designer’s Cure for Massive Expectations

Sentence Forms (not Mad Libs) – The challenges in building HTML forms that feature fields interspersed within content.
Example from Sentence Forms (not Mad Libs)

Creating An Interactive Gantt Chart Component With Vanilla JavaScript – Learn the secrets behind building your own Gantt chart.
Example from Creating An Interactive Gantt Chart Component With Vanilla JavaScript

Create an Abstract Image Slideshow with OGL, GLSL, and GSAP – Learn how to create a WebGL-powered image slideshow animated using a single value.
Example from Create an Abstract Image Slideshow with OGL, GLSL, and GSAP

Many Plugins, Many Styles: Creating a Consistent User Experience with WordPress – A look at how to deal with WordPress plugin CSS that clashes with your site’s design.
Example from Many Plugins, Many Styles: Creating a Consistent User Experience with WordPress

Grids – Explore the principles behind grid-based layouts.
Example from Grids

Practical Uses of CSS Math Functions: calc, clamp, min, max – Examples of how math functions can come in handy.
Example from Practical Uses of CSS Math Functions: calc, clamp, min, max

CSS Grid tooling in DevTools – Use Google Chrome’s DevTools to better understand and troubleshoot CSS Grid layouts.
Example from CSS Grid tooling in DevTools

The 40 Best Free Lightroom Presets in 2021 – Make quick work of your image processing with these free Adobe Lightroom presets.
Example from The 40 Best Free Lightroom Presets in 2021

Edge – Grab this set of free outline icons available in three distinct styles.
Example from Edge

Free New Zealand Mobile & Desktop Lightroom Presets – Add soft moody, warm, teal and subtle toning in your photographs with just a few clicks.
Example from Free New Zealand Mobile & Desktop Lightroom Presets

Ten Years of Bootstrap – A brief look at the numbers behind Twitter’s popular CSS framework.
Example from Ten Years of Bootstrap

The Role Design Plays in Your Client’s Sales Funnel – What you’re really supposed to be doing as a designer.
Example from The Role Design Plays in Your Client’s Sales Funnel

INSTAD.IO – A tool for quickly turning your images into hand-drawn like illustrations.
Example from INSTAD.IO

The post Weekly News for Designers № 607 appeared first on Speckyboy Design Magazine.

Webdesign Services

10 Lesser-Known & Niche WordPress SEO Plugins

WordPress as a platform is pretty effective when it comes to SEO. And, while there are a couple of really well-known plugins to help optimize your site (I’m pointing at you and you), there are many more under-the-radar options to choose from.

Some plugins may focus on overall SEO, while others home in on just one aspect. Whatever the target, there are some legitimately useful choices worth considering. With that, here are 10 lesser-known WordPress plugins that can help fine-tune your SEO efforts.

BoldGrid Easy SEO – Simple and Effective SEO

Need some helpful suggestions when optimizing your content? Enter a keyword or phrase and BoldGrid Easy SEO will guide you. The plugin looks at your keyword density, content length and other page attributes. From there, you’ll gain some valuable hints that can help you level up.

It also scans your image ALT attributes as well. If you’re looking to boost your rankings within Google Image Search, this feature is a must-have.

Meta Tag Manager

For those who want complete control over their SEO, Meta Tag Manager is worth a look. As the name suggests, the plugin enables you to create various custom meta tags for your content. You can even add Open Graph tags to enhance social media sharing.

There are two ways to add tags. The first is directly within your WordPress post or page. In addition, you can add global tags that will appear across your site or via specific post types.

Meta Tag Manager

Rank Math SEO – Best SEO Plugin For WordPress To Increase Your SEO Traffic

Rank Math SEO has become one of the bigger names in this category, yet still under the “big two” in terms of name recognition. And there is a ton to like with this package.

Inside you’ll find a setup wizard, Schema markup, unlimited keywords per post and integration with Google. There are a massive number of features. However, you can easily disable any that you don’t need via the settings.

Rank Math SEO

SEOPress, on-site SEO

SEOPress aims to be a complete solution, with features like on-page SEO, HTML/XML sitemaps, breadcrumbs, and structured data. There’s also the ability to manage any 301 redirects, ensuring that your traffic doesn’t suffer from any URLs that have changed.

The included import feature is also handy. You can import settings from other SEO plugins and even import metadata via CSV files. This can make quick work of the optimization process.

SEOPress, on-site SEO

All In One Schema.org Rich Snippets

Rich Snippets are such an overlooked part of SEO (this post convinced me of it). They provide search engines with extra bits of useful info like reviews, company details (business hours, address, etc.) and a whole lot more.

All In One Schema.org Rich Snippets provides fields within the WordPress post editor that will let you customize the rich snippets in your content. Such a simple thing, but it can make your search listings more noticeable.

All In One Schema.org Rich Snippet

The SEO Framework

The SEO Framework is focused on automating much of the process of optimizing your site. With a little initial guidance, the plugin will change titles, add descriptions (with anti-spam warnings), canonical URLS, Open Graph tags and structured data.

It will also notify Google, Bing and Yandex if you’ve enabled their sitemap feature. There’s also a color-coded “SEO Bar” that will show you what areas look good and what needs further tweaking.

The SEO Framework

SEO Squirrly

SEO Squirrly takes a different approach to optimizing content. First, you start by entering the topic you plan to write about in a field provided by the plugin. It then ranks keywords in that topic with a color-coded system (green is what you’re hoping for). You’ll also receive “advice” while in the process of writing your post.

The plugin also displays a listing of related, copyright-free images you can use. This is definitely a more handheld approach for those who aren’t well-versed in SEO. One thing to note is that the free version of the plugin only supports up to 5 posts per month. Paid plans are available for sites that publish more content.

SEO Squirrly

ACF Content Analysis for Yoast SEO

Ok, I cheated. ACF Content Analysis for Yoast SEO is meant for those using the ubiquitous Yoast plugin. But hear me out. If your site is publishing content via custom fields – the standard Yoast SEO plugin isn’t counting that in its assessment of your post.

Installing this plugin will ensure that you’re getting accurate SEO grades while using Yoast and Advanced Custom Fields.

ACF Content Analysis for Yoast SEO


WP Meta SEO enables you to edit post and image metadata in bulk – saving you the trouble of clicking into each and every item. Beyond meta, you’re also able to bulk edit image sizes and SEO link titles.

The plugin also features on-page optimization, breadcrumb navigation, social media sharing elements, XML sitemap generation and a broken link checker. This one is an up-and-coming SEO solution.



WPSSO will take your existing content and create appropriate meta tags and Schema.org markup. Descriptions for various providers such as Google, Facebook, Twitter and Pinterest are included. Your site’s media is also optimized in the deal.

WPSSO is also able to work alongside other SEO plugins and can fill in some functionality gaps.


Small Names, Big Optimization

The plugins above prove there are indeed lots of great tools when it comes to SEO beyond the big names. In some ways, they’re like searching the web in that sometimes you may have to dig a little deeper to find some gold.

Take a closer look and see which ones will help you further optimize your WordPress website.

The post 10 Lesser-Known & Niche WordPress SEO Plugins appeared first on Speckyboy Design Magazine.

Did you miss our previous article…

Webdesign Services

How to Handle Losing Your Motivation as a Designer

Sometimes, you just don’t want to do your work. It can be such a hassle to get up, start up the computer, fire up the software, and do what needs to be done.

You feel tired and bored, having lost sight of why you chose a career in design in the first place, and you find yourself wondering whether you should just give it all up and become a dental hygienist.

It can be really demoralizing to lose your motivation part of the way through a project, but what do you do if you absolutely have to get something done regardless of how you feel about it?

I’m going to tell you about a technique you can use when you’re feeling burnt out and you simply can’t bear to think about taking one more step to complete that big, hairy project staring you in the face.

Riding the Rollercoaster

Emotions are not permanent. Sometimes you’re exuberantly happy, and other times you’re depressed enough to cry. This is normal – it means you’re human and not a robot. Most people realize that their current emotional state won’t last forever.

However, most of us seem to conveniently forget that fact when there’s a pile of work that needs to be done, and it isn’t going to do itself. It doesn’t matter if the work is for a client or boss, or just for ourselves.

We can usually find a way to get our work done when there’s a paycheck involved, but sometimes even that isn’t motivation enough to press on.

Procrastination is a problem that affects us all, but for some people, it can be more devastating than usual. Believe it or not, people have lost their jobs, homes, and families because they couldn’t bring themselves out of the trap of procrastination.

Procrastination usually occurs when the emotional side of our brains – the side that loves to laze in front of the television and eat ice cream – overtakes the rational side of our brains.

The rational side no longer has control, and the emotional side is now telling us that there’s nothing more important than catching up on our favorite show or finishing that new video game we just bought.

If this sounds painfully familiar, I have some news for you. First of all, you should realize that procrastination, despite being an annoyance and a major waste of time, is perfectly normal.

Really. You’re not some lazy freak of nature if you procrastinate now and then. There’s no real cure for procrastination, and to be honest, as a creative person, you probably wouldn’t want the cure even if there was one.

Why? Because procrastination is a major source of distraction, and distraction is what allows you to be creative in the first place.

Think about it. If your life was merely a series of tasks from your to-do list, which you did flawlessly all the time, where would you find the time to be creative?

And what are you usually doing when you’re at your most creative? Are you getting things done productively, like a good little automaton? Or are you goofing off – staring into space, doodling aimlessly, thinking about crazy, abstract things that have nothing to do with the task at hand? If you’re anything like me, the answer is almost always the latter.

The problem comes when your procrastination lasts longer than the period it’s required to be useful. If you find yourself avoiding your work for no other reason than you’re just not motivated to do it, there are a few things you can do to get yourself back on track and complete the work that needs to be completed.

First of all, it’s important to understand the nature of human emotion. Don’t worry – this isn’t some esoteric psychology lesson.

It’s actually quite simple: there’s no way you can maintain the same level of enthusiasm for the entire duration of a long-term project. It’s just not possible. Your brain will eventually run out of energy, and you’ll find yourself exhausted and demotivated.

This is normal. And like procrastination, there’s nothing you can do about it. What you can do, however, is something that many people refuse to do: accept that it’s normal and that you can’t do anything about it.

woman working computer

Once you accept that something is inevitable, you’ll be much better prepared to deal with it when it happens.

If you’ve ever lost a loved one to a long illness, you’ll probably recall how, after a certain period, they will begin to make preparations for their own passing. They’ll update their will, and set everything in order for the day when they’ll no longer be around. There’s nothing they can do to stop what’s coming, but they can accept it and make things go that much smoother.

And if a terminally ill person can accept their own mortality, you can certainly accept that you’ll have to continue working regardless of how you feel about it at any given time.

In order to continue working on a project once you’re past that stage of initial enthusiasm, you have to prepare yourself ahead of time to deal with your fluctuating emotions.

It’s important to realize that you won’t always be at the same level of excitement, and that that’s perfectly okay. That way, when you lose steam halfway through, you’ll have a system in place to deal with it and you won’t be completely lost and frustrated.

A lot of people say things like, “it’s not the destination that matters, but the journey.” After you get through wanting to punch those people in the face, take a moment and really think about what they’re saying. If you’re too focused on your goal, you won’t even notice when your enthusiasm runs out and you’re no longer able to rely on it for motivation.

Set Realistic Expectations

Many times, we lose motivation to work on a project because we just aren’t seeing the results we thought we would in the allotted time period.

If you took on a few freelancing jobs in hopes of saving up enough money to take that trip around the world you’ve been wanting to take, or even to just pay some of your bills that have been piling up, and you haven’t gotten as many clients as you hoped you would, you can easily become discouraged.

If no amount of marketing or niching down your target client base has been showing results, perhaps it’s time to reevaluate the amount of time you’ve given yourself to reach your goals.

Are you expecting to double your income through freelancing within six months? If so, you might want to sit down, because I have some bad news for you. Building a successful freelance career takes time – time that you might not have given yourself in the beginning.

Use your “downtime” of minimal motivation to reassess your goals and create a more realistic scenario. When you’re feeling defeated, it can be much easier to accept that your goals will take you longer than you thought.

Why? Because you give your brain hope that they can eventually be reached, rather than thinking that everything is doomed and you’ll never be successful.

Doomed If You Do, Doomed If You Don’t

If you’ve been successful at completing projects before, you might recall that, though you can laugh and joke about it all now, you probably experienced feelings of doubt and anxiety about the success of your project.

Doubt is one of the biggest killers of motivation, because it robs you of the confidence needed to complete any task.

Even if you’ve planned your goals carefully and rationally, and you haven’t miscalculated anything in terms of time or effort required, if you feel you’re still not getting the results you were hoping for, you can start to lose your enthusiasm.

You may feel as though you’ll never reach your goals… until you do reach them. Then, you become totally confident again and nothing can stop you. Right?

am I good enough quote notepad book handwritten

Well, sometimes. I don’t know about you, but even when I’ve been successful with a project, I’ll still get a nagging feeling that I just haven’t done enough to secure my success. If you experience anxiety about succeeding, you can feel as if you’re a fraud, hiding behind a curtain of false confidence like the Wizard of Oz.

The good thing about these feelings is that they’re usually temporary. Most people have them, and they’ll eventually go away after a while. If you began your project for the right reasons, those reasons will always guide you through the wilderness, and you’ll eventually meet back up with your confidence.

Creative people are natural-born risk-takers. Everything we do – from finding freelance clients to generating valuable work those clients will love – involves a risk of some sort.

Even if the only risk is you feeling demotivated or unenthusiastic from time to time, it can still prove too much for you to handle. But imagine how our lives would be if nothing involved any kind of risk. If everything you touched turned to gold and you could never fail, ever.

The post How to Handle Losing Your Motivation as a Designer appeared first on Speckyboy Design Magazine.

Did you miss our previous article…