Weekly News for Designers № 621

MDEditorsy – This GUI-based tool enables you to build a Markdown/GitHub README profile.
Example from MDEditorsy

A Handy Little System for Animated Entrances in CSS – Check out this set of CSS utilities for animating elements as they enter into view.
Example from A Handy Little System for Animated Entrances in CSS

50 Free Christmas Templates & Resources for Designers – A fantastic collection of free Christmas and holiday season resources and templates we know you will love.
Example from 50 Free Christmas Templates & Resources for Designers

Responsive Layouts, Fewer Media Queries – Some tricks and techniques for reducing (or even eliminating) the number of media queries in your CSS.
Example from Responsive Layouts, Fewer Media Queries

Image Optimizer – Reduce load times with this open-source tool for optimizing images and vector graphics.
Example from Image Optimizer

How Web Designers Can Cope with Situations Out of Their Control – Exploring a few difficult-to-control situations that typically impact web designers and ways to let go.
Example from How Web Designers Can Cope with Situations Out of Their Control

Dynamic Color Manipulation with CSS Relative Colors – A look at some new ways to manipulate colors using CSS.
Example from Dynamic Color Manipulation with CSS Relative Colors

2022 Color Trends – What colors will rule the new year? Shutterstock provides their best guesses.
Example from 2022 Color Trends

50 Free High-Resolution Photoshop Brushes – Create stunning image effects with this collection of Photoshop brushes.
Example from 50 Free High-Resolution Photoshop Brushes

SVGcode: a PWA to convert raster images to SVG vector graphics – Turn your standard GIF, JPG, PNG & WebP images to vectors with this handy tool.
Example from SVGcode: a PWA to convert raster images to SVG vector graphics

My Custom CSS Reset – A CSS reset with modern web features in mind.
Example from My Custom CSS Reset

Testing Your Marketing Efforts as a Freelancer Designer – How to test your marketing until you get it just right.
Example from Testing Your Marketing Efforts as a Freelancer Designer

I made a working Gameboy CSS art: try it out – How one developer created a working replica of the iconic game system.
Example from I made a working Gameboy CSS art: try it out

Equinox – Drag and drop your images to make a macOS native wallpaper.
Example from Equinox

30 Free Responsive Email & Newsletter Templates – Browse our collection of easy to edit and free responsive newsletter templates that work well on all email clients and devices.
Example from 30 Free Responsive Email & Newsletter Templates

nnnoise – Create subtle (or not-so-subtle) SVG noise textures with this online generator.
Example from nnnoise

How to design great keyboard shortcuts – Considerations for creating keyboard shortcuts that are discoverable, memorable, and conflict-free.
Example from How to design great keyboard shortcuts

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

Did you miss our previous article…
https://www.1clanek.info/?p=1373

Navigating Harsh Judgements and Self-Worth in Web Design

I make no secret of my love for the web design community. There’s something both unique and beautiful about sharing code, assets, and advice.

But, just as a community can lift you up, certain dark corners of it can put you down. Intentional or not, some commentary can bring about a number of negative feelings. So much so that even an experienced designer can feel them.

People who work in technology tend to put forth some harsh judgements. I’m not talking about direct personal attacks, mind you. Rather, it’s the negativity surrounding the tools, languages, and services we utilize.

What we often don’t realize is how these words can impact other people. When we trash, say, CSS, the message we send can go beyond a simple complaint about the language itself. There may also be a personal toll that goes along with it. Social media and its rapid-fire quickness only serve to exacerbate the issue.

So, how can you deal with all of the noise out there without taking it personally? Here’s some advice for tuning out the darkest parts of the web design community.

Take Opinions for What They Are

Online gathering places such as forums and social media feeds are rife with hot takes. Some designers and developers (myself included) are all too happy to share their thoughts on virtually every facet of the industry.

That’s all well and good. But it’s easy to take things a little too far. For example, it’s one thing to have an opinion on WordPress. But deriding those who use it is something else entirely. The same goes for any content management system (CMS), language, or tool out there.

Seeing these sorts of statements on your screen may lead you to believe that you’re doing something wrong. Or that you’re not a “real” developer because you don’t work with tool x, y and z.

The bottom line is that one person’s opinion, even if they’re considered an influencer, is just that. If they don’t happen to be a fan of the same technologies as you, too bad for them.

Websites are built in all manner of different ways. We can argue the virtues of a specific approach until the sun burns out. But it’s ultimately a personal and professional choice. If it serves both you and your clients well, that’s all that really matters. Let them have their opinions – you keep being you.

Avoid Negative People and Places

Sometimes it can feel impossible to get around all of the negativity out there. Perhaps the only way to do so is by shutting yourself off from online communities. But that would be a shame.

Instead, look to surround yourself with those you can converse with and learn from. On platforms such as Twitter, it’s easy enough to go through your follow list and remove those who don’t fit that profile.

The same thing goes for communities themselves. If you see a lot of nonsense in a particular space, you might save yourself the headache by avoiding it altogether. There are better alternatives.

For example, there are some well-moderated Facebook groups for web professionals where members are expected to behave themselves – and held to account when they don’t.

One of the best aspects of the web design community is that it’s a big place. You’ll find plenty of opportunities to connect with others. It could be online or in-person. Either way, it’s worth exploring.

A person pushes a pin into a map.

Remember, We’re All on a Unique Journey

Self-worth can be a fragile thing. And seeing someone else criticize something you’re invested in can cause doubt. You may start to wonder if you’re wasting precious time with an “inferior” tool.

But the road to a career in web design isn’t the same for everyone. Some study it in school while others learn on their own. There’s no singular “right” way to do it.

That’s important to remember, as our personal journey informs how we view the world. These different experiences can lead us to form strong opinions about a specific tool or technology. It’s not necessarily a negative. I think it’s just part of being human.

Negativity is all around us. Yet, no rule says we have to let it affect who we are. The beauty is that we get to decide our own path. If you enjoy working within your niche, keep on doing it!

As for the naysayers, let them continue shouting into the void.

The post Navigating Harsh Judgements and Self-Worth in Web Design appeared first on Speckyboy Design Magazine.

Did you miss our previous article…
https://www.1clanek.info/?p=1371

The Idea Generation Process of Scribbling on a Napkin

Millions of us around the world eat at restaurants every day with our family, friends, co-workers, clients, parole officers… just kidding. Restaurants serve an important purpose in our lives – a purpose that has less to do with food and more to do with the way we connect with one another.

The restaurant has been around, in some form or another, since ancient Rome, and its function – to bring people together over a conveniently cooked meal – has changed very little in all that time.

There’s another benefit of restaurants that specifically applies to designers and other creative people, and that is to stimulate your creativity. That’s right – it’s been proven that socializing improves your intelligence. Not just academic intelligence either – interacting with friends and peers actually helps to make you more creative.

When you go out with others, you’re exposing yourself to an influx of new ideas that can’t help but positively influence your creative process. And food is a natural bonding agent, which is why so many creative ideas are born around a lunch or dinner table with other designers, artists, musicians, writers, et cetera.

Today, I’m going to explore the idea generation process familiar to so many designers who eat out with friends: the “awesome idea scribbled on a restaurant napkin” process.

It’s very high-level stuff. No, really! The lowly napkin sketch (or scrap paper or ledger pad sketch) has been used by everyone from babysitters all the way up to top creative executives at Microsoft and Walmart to bring to life important ideas that change the world, or at least bring in more profits.

Some experts say that the business sector is too dependent on language to express ideas that really should be expressed using visuals (i.e., sketches). That’s good news for us designers, but how exactly do we adapt it to our working process to make things easier for ourselves and our clients?

We designers all know the advantages of sketching: it’s a way to sort out our preliminary ideas and eliminate the ones that aren’t right for the job.

Of course, you don’t have to sketch on a napkin, but any kind of sketch is more useful than just thinking about the idea, because it requires you to use a different part of your brain.

web design flow sketch
Image Source

When you think, or read, or write, you’re nurturing the connections your brain makes between the different thoughts you have (called ‘neural pathways‘), and increasing your brain’s “elasticity.” When you add drawing to that process, you’re exercising important motor skills that can actually feed your creativity.

Personally, I prefer to sketch on paper. Why? Because it allows me the opportunity to step away from the computer for a brief moment and collect my thoughts on something I can touch and hold in my hands.

That’s important to me, and to a lot of designers whose work almost always ends up on the computer one way or another.

We humans respond to things that are interactive, and that allows us to make a direct impact on something. Ever wonder why more and more vending machines are see-through, rather than opaque?

The working mechanisms of those machines are engaging to our brains – we love to put our money in the machine, and literally see our desire (to have a refreshing beverage or snack) being fulfilled right before our eyes. It’s fun.

And guess what? Your clients are the exact same way.

Logo Design on Napkin
Image Source

If you’re a designer or art director redesigning a company’s brand identity, how do you make sure everyone there understands the creative vision you have?

Well, you could tell them. But most people aren’t going to take notes and will end up misinterpreting what you said at some point or another.

You could show them a presentation, which might work for some people. But I think that printing out handouts of your sketches, and walking people through them is the best way to involve them in the decision-making process.

Sometimes, sketching can be used to effectively communicate ideas to people – designers or non-designers – in ways that far surpass, say, a PowerPoint presentation.

Think about what you’d rather have in a department meeting: a dry, preachy collection of slides, or a sketchbook to work out your ideas about the company’s creative direction?

Just like a clear-windowed vending machine allows us to see the effect our money has on it, involving people with live sketching gives them a democratic insight into how design decisions are made.

It can turn a lofty, complicated mess into something that’s easy for everyone to understand. And we all know that an informed client is a happy (and oftentimes repeat) client.

You don’t want to just talk at your clients and lecture them about things that are going to go over their heads. Your clients aren’t stupid (well, hopefully not).

They are running a company, after all. Clients like to feel creative, or at least like they’re contributing to something to the creativity of their businesses. And what better way to make grown adults feel powerful and in charge of something than by handing them some paper and making them draw like grade-schoolers?

All joking aside, people love that stuff. It creates a feeling of harmony and democracy in the company, as anyone, from the janitor to the CEO, can make a sketch.

As Lou Levit explains in his article, How Sketching Will Take Your Design Process to the Next Level, sketching allows you to “dig deeper” with your idea process, uncovering more design solutions that often work much better than the initial ideas you start out with.

Silicon Valley Napkin ideas
Image Source

Another downside to simply absorbing information via presentation is that it tends to lead your client through the design process with minimal challenge to their own imagination.

Because of this, your client may not really understand your reasoning behind a more nuanced design solution, and may fight you on it. Presenting sketches is one way to quiet those feelings of misunderstanding. The more your client can see of your process, the more likely they are to trust your judgement.

The key to engaging your clients with sketching is to think of your design meeting more like a restaurant date with friends. Obviously, you should probably keep the celebrity gossip and alcohol consumption to a minimum, but the general feeling of creative camaraderie should be the same.

Engage your clients with spontaneous sketches, draw things out for them that you might otherwise just dryly explain, and observe the difference yourself in their level of understanding, engagement, and trust.

You don’t have to make them draw too, though, as I mentioned before, many people do love that. But just like passing around a napkin at the restaurant table to your friends can result in weird and wonderful new ideas, incorporating sketches in your meetings with clients can propel your projects to heights that you never would have expected.

The post The Idea Generation Process of Scribbling on a Napkin appeared first on Speckyboy Design Magazine.

Did you miss our previous article…
https://www.1clanek.info/?p=1367

10 Totally Free WordPress Backup Plugins

Backing up your precious data is a common best practice these days. But, what about your WordPress-powered website? Yes, most web hosting companies do perform regular system backups.

But beware – not every host is reliable when it comes to backups. And you certainly don’t want to wait until disaster strikes to find out how they did.

You’ll get much more peace of mind if you perform regular site backups yourself. Luckily, there are several outstanding free plugins that will do the job for you.

Note that there are some differences in what various plugins will backup. A WordPress website is comprised of both a database (usually MySQL) and a set of files that sit on the webserver.

You’ll really only need to worry about the /wp-content/ folder, which contains your theme, plugins, and file uploads. Some plugins backup both the database and files.

Others will handle one of the two. Keep in mind that you’ll need both the database and the /wp-content/ folder to have access to all of your site’s data.

Now, let’s check out some plugins to keep your site backed up. We’ll take note of whether they back up a site’s database, file system, or both.

Total Upkeep – WordPress Backup Plugin Plus Restore & Migrate

WordPress software updates can sometimes cause problems. That’s why it’s important to have backups that can be restored immediately.

Total Upkeep’s auto rollback feature will create backups before you run updates, allowing you to easily restore the site to its previous state. A Pro version also enables cloud-based backups and staging sites.

Backs Up: Database and File System (with an option to customize what gets backed up)

WP Staging – Backup Duplicator & Migration

Having a staging environment for your WordPress website is always a good idea. But if your web host doesn’t offer this functionality, WP STAGING can help.

The plugin makes it easy to clone your site and into a subfolder (or a subdomain, if you opt for the Pro version).

Backs Up: Database and File System

WP STAGING – Backup Duplicator & Migration

WordPress Backup & Migrate Plugin

Backup, restore or even migrate your site. Also available is the ability to download a copy of a backup to keep on your local machine. A pro version lets you schedule backups and connect to various cloud storage services.

Backs Up: Database and File System (with an option to customize what gets backed up)

BackupGuard free WordPress backup plugin

WP-DBManager

Schedule regular backups of your WordPress database and have it both emailed to you and stored on your web server. Restore a backup with just a couple of clicks.

Also, you can schedule automatic database optimization and repair.

Backs Up: Database Only

WP Time Capsule

Rather than doing a time and resource consuming full backup each time, WP Time Capsule will perform an incremental backup of just the files that have changed.

You have the ability to schedule backups and connect to Dropbox, Amazon S3 and Google Drive.

Backs Up: Database and File System

WP Time Capsule free WordPress backup plugin

WPBackItUp

WPBackItUp touts its ease of use – just one click to backup your entire site. The plugin compresses the backup into a .zip file stored on your web server. Backup status notifications will arrive via email.

Backs Up: Database and File System

UpdraftPlus

Automatically or manually backup your entire site to your web server, multiple cloud services, email or even an FTP server. Restore backups directly from inside WordPress. Site migration packages can also be downloaded.

Backs Up: Database and File System (with an option to customize what gets backed up)

UpdraftPlus free WordPress backup plugin

WP Database Backup

Backup your site’s database to the cloud, email, or FTP. Set up a schedule to run on a routine basis. The ability to exclude specific database tables is included.

Backs Up: Database Only

WP Database Backup free WordPress backup plugin

BackWPup

You can schedule complete automatic backups for your site and store them in the cloud. Backups can be compressed into .zip, .tar, tar.gz or tar.bz2 formats. BackWPup will also check, repair, and optimize your database.

Backs Up: Database and File System

BackWPup free WordPress backup plugin

BackUpWordPress

This plugin is all about simplicity – there is no setup required. Backup your entire site on a schedule and optionally have the archives emailed to you. Backups will run even on low-powered web hosting accounts.

Backs Up: Database and File System (with an option to customize what gets backed up)

No More Excuses – Backup Your Site!

A WordPress site can break for many reasons, including a database crash, theme or plugin incompatibility, or a failed web host. But you don’t have to leave things to chance.

There are free WordPress backup plugins that cater to every need. It’s time to be proactive with your website and prepare for the worst. If something does happen, you’ll be glad that you took steps to regularly backup your website.

The post 10 Totally Free WordPress Backup Plugins appeared first on Speckyboy Design Magazine.

Did you miss our previous article…
https://www.1clanek.info/?p=1360

8 Best WordPress Plugins for Providing Customer Support

Whether you’re a web designer serving various clients or a developer who offers products, utilizing your website for customer support makes sense. It provides users with a way to both help themselves and receive help directly from you. Plus, it can serve as a means to organize support requests in a neat and tidy manner.

If your website runs on WordPress, then you have a wide selection of support-related plugins to choose from. They run the gamut from building a simple FAQ or knowledgebase all the way to full-blown ticketing systems. This allows you to build a support area that fits virtually any type of business.

With that in mind, here are 8 WordPress plugins that you can use to provide excellent customer service and support.

Tawk.To Live Chat

This plugin will enable you to place a widget from the free Tawk.To chat application onto your WordPress website (a free account is required). You can customize the widget’s look, which pages it displays on, and embed it anywhere with the included shortcode.

A handy scheduler is also included, which will display the widget only during your operating hours. As a bonus, you can use the service’s mobile app to answer queries from wherever you are.

SupportCandy – Helpdesk & Support Ticket System

With just a few clicks, SupportCandy will add a ticketing system to both the front and back ends of your website. Create an unlimited number of support agent users and assign them tickets, while premium add-ons enable you to automate the process.

Customers can submit tickets via their account or as guests. The plugin also supports custom fields, file attachments, and email notifications.

SupportCandy – Helpdesk & Support Ticket System

Knowledge Base for Documents and FAQs

One of the simplest ways to provide support is through a knowledge base. Knowledge Base for Documents and FAQs is a free plugin that will enable you to build up a support section in very little time.

Create up to three levels of categories and sub-categories, choose from a plethora of pre-defined styles and even implement an AJAX live search. Premium add-ons allow for features like custom layouts and hosting multiple bases on the same site.

Knowledge Base for Documents and FAQs

Quick and Easy FAQs

FAQs are a great option for services or products that don’t need overly in-depth documentation. They’re also handy for providing useful pre-sales information. Quick and Easy FAQs creates a custom post type on your site that lets you add as many questions and answers as you need.

You can display your FAQs in various styles, including a simple list, filterable section-based list, and toggle. The display is handled through a WordPress Shortcode.

Quick and Easy FAQs

Ultimate FAQ

Ultimate FAQ will, like other FAQ plugins on this list, allow you to create an archive of questions and answers easily. You can create categories, display questions in various ways and even export them all to a PDF. But the bonus here is that the plugin can integrate with WooCommerce.

This could be quite a powerful feature for stores looking to offer pre-sales information to users. The premium version of the plugin enables a FAQs product tab to make things even easier.

Ultimate FAQ

WP Live Chat Support

In the right situation, live chat can be a very effective means of helping customers. It provides both a personal touch and an immediate response that helps to build brand loyalty. Using WP Live Chat Support, you can hold multiple one-on-one chats with customers – hosted right there on the same server with your WordPress site.

There are plenty of options, and no third-party subscriptions are required. However, if you want to have features like multiple agents (team members) or data trigger automations, you’ll need the pro version.

WP Live Chat Support

Awesome Support

If you’re looking for a full-fledged support ticketing system, you’ll want to check out Awesome Support. Use it to run a WordPress-based helpdesk that, between the free version and premium add-ons, has just about every feature you’ll need.

By default, you’ll have the ability to create an unlimited number of departments, agent accounts, custom priority levels, and more. Add-ons do things such as syncing product lists with either WooCommerce or Easy Digital Downloads, user reply via email, and Slack notifications – among others. There’s a lot of room to build a system that meets your needs.

Awesome Support

weDocs

weDocs is a free plugin that caters to those who want to build and organize vast amounts of documentation on their WordPress website. The plugin UI sports a handy drag-and-drop feature for organizing items – great for getting articles in just the right order.

There is even a way to bring in documentation from an outside source, which could be a really huge help for those moving in existing content from somewhere else.

weDocs

Support Options

What’s so nice about the plugins above is that they offer you different ways to provide support. You don’t necessarily need a big, complicated system to help customers. In some cases, a simple FAQ will do the trick. But it’s also great to know that more robust options exist if you need them.

The key is in helping people to help themselves first. This will cut down on the number of support requests you receive, and the hope is that if they do reach out to you for further assistance, you’ll be farther ahead by having resources readily available on your website.

Whichever path you choose, look for solutions that will make life easier for everyone involved. The choices above should get you off to a running start.

The post 8 Best WordPress Plugins for Providing Customer Support appeared first on Speckyboy Design Magazine.

20 Free Bootstrap UI Kits

Bootstrap is one of the most popular design frameworks. One of the reasons it’s so popular is that it’s optimized for mobile devices and has a well-organized grid system along with hundreds of elements that make prototyping and designing for the web a lot easier.

There is no doubt that Bootstrap is the best framework to help you design beautiful and responsive web pages. From minimal startup websites to complex admin screens, you can find Bootstrap UI kits and templates for any design. Get inspired by these free Bootstrap UI kits and use them in your next design project.

In this roundup, we’ve collected 20 free UI kits built with Bootstrap (both 4 and 5) that you can use as a starting point for your designs.

Free Bootstrap 5 UI Kits

Pixel Free Bootstrap 5 UI Kit

The free Pixel Bootstrap 5 UI kit comes bundled with over 80 UI elements, 5 example page templates, and more than 50 website sections, so you build any type of website.

Snacked Bootstrap 5 Admin Template

Snacked is Bootstrap 5 admin template and UI kit that comes with over 60 custom HTML page templates, multiple chart options, and a vast collection of UI components.

snacked bootstrap 5 five template ui kit free responsive

Boomerang Free Bootstrap 5 UI Kit

This free Bootstrap 5 UI kit includes over fifty custom components, five integrated plugins, and five pre-built page templates. Boomerang kit is perfect for building a business or corporate website.

boomerang bootstrap 5 five template ui kit free responsive

Qexal Bootstrap 5 Landing Pages

The minimally designed Qexal is perfect for creating landing pages for startups or any other type of business. It comes with nine homepage variations, multiple page templates, and a huge collection of UI components and widgets.

Qexal Landing Pages bootstrap 5 five template ui kit free responsive

Lindy Free Bootstrap 5 Startup UI Kit

The free Lindy Bootstrap 5 UI kit includes everything you need for creating professional startup landing pages. The UI kit comes with over 200 UI elements and 5 example page templates.

Lindy stratup bootstrap 5 five template ui kit free responsive

Free Material Design Bootstrap 5 UI KIT

This free Material Design Bootstrap 5 UI kit is an excellent choice for anyone that wants to build a mobile-first website or an app. The kit comes with 400+ material UI elements, 600+ material icons, over 70 CSS animations, numerous templates, tutorials, and much more.

Material Design bootstrap 5 five template ui kit free responsive

WrapKit Lite – Free Bootstrap 5 UI Kit

WrapKit Lite is a free Bootstrap 5 UI kit that can be used in a variety of projects. It comes with a selection of UI blocks and more than 25 UI elements, and 1 landing page to jumpstart your project.

Wrappixel bootstrap 4 four template ui kit free responsive

Material Kit – Free Bootstrap 5 Material Design UI Kit

Material Kit is a perfect choice for anyone who loves the material design. The Bootstrap 5 UI kit comes with over 60 UI elements and three demo page templates to help you get started on your design.

Material Kit design bootstrap 4 four template ui kit free responsive

Free Bootstrap 4 UI Kits

Argon – Free Dashboard UI for Bootstrap 4

The Argon UI kit for Bootstrap is the perfect choice if you’re working on a dashboard design. The kit comes with over 100 components, 6 different screens, and 4 custom plugins.

Argon admin Dashboard bootstrap 4 four template ui kit free responsive

Grandin Bootstrap Admin UI Kit (Envato Elements)

Powered by Grunt, Bower, and SCSS, Grandin is a professional UI kit that comes packaged with plenty of UI components, widgets, forms, tables, charts, pages and applications.

Grandin admin Dashboard bootstrap template ui kit free responsive

Shards Free Bootstrap 4 UI Kit

The free Shards Bootstrap UI kit comes with 10 extra custom components and 2 custom pre-built landing page templates. You’ll also find more than 1,500 icons both from Material and FontAwesome packs.

Shards admin dashboard ux High-Quality bootstrap 4 four template ui kit free responsive

Dashboard HTML Template for Bootstrap 4 (Envato Elements)

This lightweight Bootstrap 4 UI kit includes five dashboard layouts, over 100 components, and a complete set of UI elements, including charts, forms, calendars, tables, and many more.

admin Dashboard bootstrap template ui kit free responsive

Drunken Parrot Lite Bootstrap 4 UI Kit

This kit includes both HTML and PSD files so you can easily customize and tweak the design to suit your needs. The kit is lightweight and it comes with various components and pages that will help to speed up your design process.

Drunken Parrot Lite bootstrap 4 four template ui kit free responsive

Now Free UI Kit for Bootstrap 4

Now UI Kit is a responsive Bootstrap 4 kit provided for free by Invision and Creative Tim. It features over 50 elements and 3 page templates. The kit provides PSD, Sketch, and HTML versions.

now web bootstrap 4 four template ui kit free responsive

Fuzen Bootstrap 4 Admin UI Kit (Envato Elements)

Fuzen is a Bootstrap 4 UI kit that comes bundled with three dashboard layout templates, over 200 UI components, over 3,000 icons, and multiple widgets. It has been designed with Material Design in mind.

admin Dashboard bootstrap template ui kit free responsive

NowSquare – Free Collection of Bootstrap 4 Web Blocks

Built upon Bower, GulpJS, and Sass, this free collection of web blocks has been designed for Bootstrap 4 and allows you to get ahead on your design project. The kit is easy to use straight out of the box and can be easily customized to the needs of your project.

NowSquare bootstrap 4 four template ui kit free responsive

Froala Design Blocks for Bootstrap 4

This Bootstrap UI kit includes over 170 responsive design blocks that are ready to be used in your web or mobile apps. You’ll find blocks for calls to action, profile blocks, contact, blocks, forms, headers, and more.

Froala Design Blocks bootstrap 4 four template ui kit free responsive

Paper Dashboard – Free Bootstrap 4 Admin UI Kit

The Paper Dashboard is another great choice if you need to prototype and design an admin dashboard for your project. The UI kit comes with 16 components, 4 customized plugins, and 7 demo page templates.

Paper Dashboard admin bootstrap 4 four template ui kit free responsive

Anchor – Free Bootstrap 4 UI Kit

Anchor is a free Bootstrap UI Kit with flexible, ready to use UI components that will help you build websites faster. It features a modern and colorful design.

anchor bootstrap 4 four template ui kit free responsive

Stream Free Bootstrap 4 UI Kit

The Stream UI Kit is a beautiful and elegant Bootstrap 4 UI Kit. The UI kit comes with five beautiful complete page templates and includes over 20 reusable and customizable UI Blocks.

stream bootstrap 4 four template ui kit free responsive

Bootstrap 4 Startup UI Kit

Try the Bootstrap 4 Startup UI kit if you’re working on the website design of a startup. The kit features a clean and minimal style and comes with 16 UI cards that you can mix and match to create your own unique layouts.

Startup bootstrap 4 four template ui kit free responsive

Free Bootstrap 4 eCommerce UI Kit

Check out this kit if you’re designing an e-commerce website or an application. The template comes with several starter templates to get you started as well as numerous icons and elements.

eCommerce shop bootstrap 4 four template ui kit free responsive

The post 20 Free Bootstrap UI Kits appeared first on Speckyboy Design Magazine.

Did you miss our previous article…
https://www.1clanek.info/?p=1329

Fresh Resources for Web Designers and Developers (November 2021)

One thing that I love with Web development industry is that we, as developers keep innovating to make the web better. This is why we’ve always found new exciting tools and resources to feature on our list.

In this round of the series, we have a tool to create nice realistic shadows using CSS3, several new frameworks and libraries for React.js, and PHP.

Without further ado, let’s jump in to see the full list.

Fresh Resources for Web Designers and Developers (October 2021)

Fresh Resources for Web Designers and Developers (October 2021)

We’ve been running this series for several years now and it feels like we never run out of… Read more

Shadow Palette

A little GUI tool that allows you to create a more realistic drop shadow for your website. You can customize several of the shadow properties such as the light position, color, and opacity. The tool will generate the CSS rules that you simply can copy and implement on your website.

Firefox Relay

Relay is a service from Firefox that allows you to create an email alias of your real email address. You can create several email aliases of one email address, and use them when signing up on websites like e-Commerce, membership, and subscription, etc. It’s a great service to protect your online privacy further.

SVGCode

A little online app to convert raster images into SVG easily. The tool supports several image formats including JPG, PNG, and WebP. It’s built with the “Progressive Web App” approach, which means even if you’re offline, the app is still going to work. Simply drag-n-drop any image onto the app and it’s all set.

A Look into: Scalable Vector Graphics (SVG)

A Look into: Scalable Vector Graphics (SVG)

Vector graphics have been widely applied in print media. In a website, we can also add vector graphics… Read more

Framework X

A simple framework to create a reactive application using PHP. Internally, it leverages some PHP extension like Coroutines and Fibers (available since PHP8.1) to handle the concurrent and async operations akin to Node.js. You can use Framework X everywhere that runs PHP including shared hosting.

Shopify Hydrogen

Hydrogen is a new React.js framework from the team at Shopify. It comes with building blocks to create a custom Shopify storefront such as utility functions, custom React.js hooks, and components.

If you’re looking to build a Headless store with Shopify, this framework has got you covered with the necessities.

Frappe Charts

A lightweight JavaScript library to create a chart. You can install it as an NPM module or simply load the JavaScript file on your webpage like in the old days.

It supports several types of charts including bar and pie charts. It’s also responsive and fast since it is not dependant on other external JavaScript libraries.

20+ Useful Online Chart & Graph Generators

20+ Useful Online Chart & Graph Generators

Most people, like me, do not understand mere numbers and statistics and for such people charts and graphs… Read more

Chrome DevTools Recorder

Google Chrome has just made an improvement to the DevTools with a feature called “Recorder”. This feature allows you to record your website interaction.

You can replay the recorded interaction or emulate it with certain environment and conditions. It provides a better measure on the real web application performance. This feature will be shipped as a beta feature on Chrome 97.

Remix

Remix is a new full-stack React.js framework that provides an abstraction to build a better website. It handles routing, error requests, and other tiny details of building a website with great user experience — out of the box. The framework will help web developers become more productive.

Redux Toolkit

An official collection of tools from Redux that aims to make developing a website with Redux more efficient. It includes some utility functions and configs for common use cases.

This way you can be more productive, instead of befuddling with the configurations and the boilerplates, which can be a bit cumbersome.

Bulletproof React

A collection of tips, advice, and best practices for developing React.js application. Here you will learn a lot of topics surrounding app architecture, project structure, styling, state management, and a lot more. If want to improve your React.js skills, you should definitely have it bookmarked.

Apache EChart

An open-source initiative from Apache, EChart is more than just a chart JavaScript library. It’s a robust collection of interactive charts with animations, and with an overall better visual. This allows you to convey the data to the users better than a static chart.

Awesome Design Tools

This resource contains a massive list of tools for designers from various categories. Here you can find tools for accessibility, prototyping, sketching, stock assets (icons, photots, etc), and a lot more. I’m pretty sure a lot of designers will find this list extremely useful.

Localstack

Localstack is a fully-functioning local AWS cloud stack. This means you can develop, run and test your AWS application offline. It supports a number of AWS services including AWS Lambda, S3, DynamoDB, Kinesis, SQS, and SNS.

Having AWS stack run locally will help you speed up and simplify the testing and development workflow of your application.

Founder Resources

A collection of resources like tools and content for those who’d like to start their journey as a business or startup founder. Being an entrepreneur is not easy. So get this list bookmarked and get prepared.

EmailValidator

A PHP library that makes it easy to validate an email address. It provides several methods of validation including validation through the email RFC, DNS, or you can also write your own validation.

Docker OSX

A Docker image that allows you to run a container with macOS. This is another cool stuff to help effectively test your application and ensure that it runs across different platforms.

Fonoster

An open-source alternative to Twilio. It allows you to run a stack application from VOIP, SMS, mail, chat, and video on your own server. A great alternative for those who’d like to have full control over their platform and the data.

Freescout

Freescout is a lightweight help desk application built with Laravel. You can use it to help and manage your customer tickets, mailbox, and conversations. It’s open-source, free, and packed with features.

Freescout is overall a great alternative to the paid-platform app like Zendesk and Help Scout, especially if you value and need control over your data.

Laravel Tenancy

A robust PHP library to set up multitenancy in Laravel. This allows you to run a single Laravel application with multiple database connections. It works seamlessly and works out-of-the-box with several popular Laravel packages like Vapor, Nova, Livewire, and a lot more.

SwiperJS

A modern JavaScript library to create a slider. Designed and intended to be used on mobile websites and apps. SwiperJS is framework agnostic which allows you to use any framework including jQuery and Zepto.

On top of that, it also provides official integration that allows it to work out-of-the-box with some of the most popular modern frameworks like Vue.js, React.js, Svelte and Angular.

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

Did you miss our previous article…
https://www.1clanek.info/?p=1309

Love a WordPress Plugin or Theme? Pay It Forward.

WordPress is an open-source application with an enormous ecosystem. The sheer number of available plugins and themes (many of them free) benefits developers and everyday users alike.

If, for example, you need a plugin to help with SEO, you’ll find plenty of options. Even if the first one you try doesn’t do everything you need, you can easily uninstall it and switch to something else. Want to update the look of your site? There are a seemingly endless supply of themes to check out.

The process of enhancing your website with a few clicks is something to behold. And it has also become second nature. If you’re a frequent user of the content management system (CMS), it’s easy to take all of this for granted.

What’s often missing is the act of sharing some love with WordPress plugin and theme authors. Many of us simply don’t take the time. But, by paying it forward, we can positively impact the people and products that help make our websites better.

Need some ideas? Keep reading for some simple ways to say “thank you”!

The Potential Impact

The WordPress developer community is highly-dependent on happy users. Whether they’re established commercial veterans or newbies sharing their first project, a simple act of gratitude from us can go a long way.

Consider a recently launched plugin or theme. It can be incredibly difficult to gain traction in a crowded marketplace. How can a WordPress product find the growth required to stick around for the long term?

Solo entrepreneurs and small agencies can’t necessarily afford to pay for publicity. That makes word-of-mouth from users especially valuable. Each shout-out could mean another handful of users who come on board. Over time, that can add up to something significant.

Even larger players can benefit. Momentum is often fleeting and can lead a product to languish. In a competitive environment, falling behind could mean a slow death. Positive feedback could be the difference in whether your favorite plugin remains actively developed.

Now that we know a little bit about what paying it forward can do, let’s look at some ways to put it into action.

Write a “Thank You” Note

So often, plugin and theme authors don’t hear from users unless something’s wrong. That makes sense, as people tend to go about their daily lives when things are working well. It’s not until a problem arises that we start to take notice.

Let’s meditate on that for a moment. As a developer, you might start to feel a bit underappreciated if you only hear the bad stuff. It could deflate your enthusiasm for sharing your work at all. Eventually, you may throw in the towel.

One simple way to counteract this is by writing a quick “thank you” note. Contact a plugin or theme developer and let them know that you enjoy the product. Point out how it made your website better and any particular features that you enjoyed.

It doesn’t have to go into great depth – even a few sentences will get your point across. But just think about the impact this positivity can have on someone’s day. It could be the affirmation they need to keep moving forward.

A sign that reads "Thank You".

Leave a Product Review

People pay attention to reviews. Whether they’re buying a new toaster or looking for a helpful WordPress plugin, the thoughts of other users can influence their decision.

Reviews especially help in a space with so many options. How, for example, can you tell which WordPress membership plugin is worth your time? Positive reviews are one way to filter out the best of the best.

Thus, if you’ve had a good experience with a plugin or theme, take a few moments and write an honest review. Point out your project goals and how the product helped you achieve them. And, if there were any shortcomings, it’s OK to mention them as well. Constructive feedback is helpful for future improvements.

Where can you leave a review? Items in the official WordPress plugin and theme repositories have designated places for feedback. If the item is part of a larger marketplace, they might also offer a reviews feature. Fail that, the product’s own website is also a possibility.

Star-shaped artwork.

Spread the Word on Social Media

Social media is a great place to sing the praises of a favorite plugin or theme. You can instantly reach a network of like-minded people who may be looking for such recommendations. In fact, there’s a Facebook group for precisely that purpose.

Again, you don’t have to go into great detail. A few words about why you like the product is more than enough.

In addition, it’s nice to tag the developer in your post. This allows them to easily find your feedback and even jump into the conversation.

Social media apps displayed on a phone.

Make a Donation or Go Pro

There are certainly many popular commercial products run by big companies. Still, a significant portion of the WordPress ecosystem is powered by solo developers or small teams.

These developers often make a lot of sacrifices to get their products out there. There’s the time spent writing code, supporting users, and marketing. And the burden can be especially large for free plugins or themes. Some trade a chance at more lucrative ventures for something they’re passionate about.

Providing a little financial support to the author of your favorite product can mean a lot. Even a small amount of money shows appreciation and may help them justify the time spent on the project.

On completely free products, you might see a call-out asking for donations. The WordPress plugin repository also provides space for this. If you have the means, dropping a few dollars into their virtual tip jar is a great gesture.

Otherwise, it may make sense to upgrade to the “pro” version, if one is available. You’ll likely gain access to more robust features and technical support. Even better is that you’ll be supporting the developer’s work. This will help them sustain the product into the future, which benefits everyone.

A person holding coins.

Support the Developers Who Support You

If you’re a WordPress plugin and theme user, think about what those items have meant to you. Have they helped you serve clients? Perhaps they’ve played a role in powering your business?

The amount of time and money you earned (and saved) because of these products can be significant. That’s an awesome thing and shouldn’t be taken lightly.

Therefore, it’s worth making the effort to sing the praises of a product you love. You’re helping other users by recommending something that might benefit them. Plus, you’re giving the author some warm-and-fuzzy feelings. It’s a win-win situation!

The post Love a WordPress Plugin or Theme? Pay It Forward. appeared first on Speckyboy Design Magazine.

Did you miss our previous article…
https://www.1clanek.info/?p=1304

Weekly News for Designers № 610

The Story Behind TryShape, a Showcase for the CSS clip-path property – A look at how you can leverage CSS to make all manner of custom shapes.
Example from The Story Behind TryShape, a Showcase for the CSS clip-path property

Projectile – A GUI-based app to help you manage your JavaScript projects.
Example from Projectile

20 Free Payment Method & Credit Card Icon Sets – Add a touch of style to your eCommerce site with this free icon set.
Example from 20 Free Payment Method & Credit Card Icon Sets

RapidSketch – Create sketch-notes online and access them anywhere.
Example from RapidSketch

Tailwind Mobile – Check out this library of mobile UI components created with Tailwind CSS.
Example from Tailwind Mobile

Can we have custom media queries, please? – How CSS custom media queries could make responsive styling easier.
Example from Can we have custom media queries, please?

The 10 Best Free WordPress Membership Plugins – Build a fully-functioning membership website with one of these free WordPress plugins.
Example from The 10 Best Free WordPress Membership Plugins

Pollen – This library of CSS variables focuses on consistent styling and rapid prototyping.
Example from Pollen

Web Designers No Longer Need to Sacrifice Performance for Beauty – How modern CSS and JavaScript can help strike a balance between looks and load times.
Example from Web Designers No Longer Need to Sacrifice Performance for Beauty

Accordion UI design – Everything you need to consider when creating accordion UIs in your projects.
Example from Accordion UI design

8 CSS & JavaScript Snippets for Creating Infographics – Examples that show how web technologies can benefit infographics.
Example from 8 CSS & JavaScript Snippets for Creating Infographics

Post Poly Application – Create and export 3D shape models via this browser-based tool.
Example from Post Poly Application

Dopefolio – Explore this “blazing fast” multipage HTML portfolio template.
Example from Dopefolio

Colors & Fonts – A color and typography system for designers. Compatible with Figma, Sketch and more.
Example from Colors & Fonts

Sail – This free CLI tool will deploy, manage and scale WordPress to the DigitalOcean cloud.
Example from Sail

50 Simple, Yet Highly Effective Logo Designs for Inspiration – Use these logos to familiarize yourself with simple logo design principles and inspiration.
Example from 50 Simple, Yet Highly Effective Logo Designs for Inspiration

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

Did you miss our previous article…
https://www.1clanek.info/?p=1287

Clients Make Too Many UX Decisions. Here’s How to Stop Them.

The boundaries between a web designer and their client can often become blurred. Designers, in an effort to please paying customers, put client feedback into action – even if it leads the project in the wrong direction.

A client may be pleased with themselves and happy to get their own way. But at what cost? The ensuing results aren’t always pretty. Crowded layouts, inaccessible design elements, and a general sloppiness can seriously harm the user experience (UX).

For example, consider a client who meddles in the design details of their eCommerce website. Leaving UX decisions regarding product layouts, calls-to-action, and hero areas to a non-designer could be disastrous for sales. And yet, any potential fallout may land squarely on your shoulders. Fair? I think not.

Therefore, it’s up to us to prevent such silliness from happening in the first place. Let’s explore some ways to keep clients at a safe distance from UX.

Define the Stakes

User experience is a critical factor for every website. Yet, clients aren’t always fully aware of what’s at stake. As is often the case, it’s up to web designers to provide some background.

It’s worth taking the time to talk about the importance of accessibility and ease of use. How the design of each element within a page needs to be measured against these factors. Oh, and the massive roles that performance and mobile compatibility play as well.

Then there’s the matter of personal preference. Clients often (and unwittingly) put their own opinions above the needs of the average user. Sometimes, implementing their preference is a detriment to everyone else.

The importance of UX and its contributing factors should be brought up from the very start. When clients are informed, they’ll be more likely to follow your lead.

Welcome Feedback, but Set Boundaries

How does a client go from providing useful feedback to taking over a designer’s job? It’s often subtle and can happen quicker than you think.

To be sure, some people insist on having control of a given situation. They may be just as likely to stand over the plumber fixing their leaky pipes as they are to pester a web designer.

In other cases, the mere fact that a client is paying good money for your services gives them a certain sense of entitlement. And although they may be well-meaning, it can lead to overstepping boundaries.

The dilemma is that getting a client’s feedback is necessary for a successful outcome. But it can also be fertile ground for such a takeover. So, how do you prevent it from happening?

The key is in setting clear guidelines. For example, defining goals for a particular item and asking for feedback based on those parameters.

Consider the hero area of a home page. Let’s say you’ve built something beautiful and need client approval. You might approach them by saying something like:

“I’ve set up the hero area, please take a look! Here is what we were hoping to achieve:

  • Introduce branding elements, including the logo, colors and fonts;
  • Encourage users to subscribe to the mailing list;
  • Mention the 20% off discount for new subscribers;
  • Keep the entire area accessible, easy-to-read and concise;

What do you think?”

The example above isn’t all-encompassing. But it puts the stated goals into a client’s mind. This helps you to narrow the scope of their feedback and (hopefully) avoid anything that distracts from the desired outcome.

A sign that reads "We Hear You."

Put UX Back Into the Hands of Experts

Don’t get me wrong – clients should absolutely be involved in the design process. It’s their brand, after all. And things usually turn out best with their input.

But the heavy lifting of UX should be done by experts like you. Your job is to turn a client’s vision into something that is highly usable. It’s about establishing a brand while helping users get to where they want to go.

If all goes well, they’ll take the path to conversion – whether that means sales, contact, or a subscription. That’s simply too important to leave to client whims.

Instead, educate and work with your clients in an effort to drive home UX best practices. Provide them with parameters to work within. The result will be a website that benefits its owner and users alike.

The post Clients Make Too Many UX Decisions. Here’s How to Stop Them. appeared first on Speckyboy Design Magazine.