Speckyboy Design Magazine

View Details

Are you thinking about or wanting to create a portfolio of your best work? Or, perhaps you want to compile a fashion lookbook? If either of these scenarios describes your situation, read on.

This collection of free InDesign portfolio and lookbook templates will appeal to a broad audience and offer a convenient way to present your latest fashion shots or portfolio work.

While these templates can be used outside of the photography, fashion, or beauty industries, some design elements will appeal specifically to those niches. These professionally designed InDesign templates are an excellent asset for those looking for a quick way to create a portfolio or lookbook without having to create them from scratch.

Now, without further ado, let’s get into this collection of portfolio and lookbook templates for InDesign!

If you’re new to Adobe InDesign, you might like to take a look at our collections of tutorials to help you get started.

Modern Black & White Lookbook InDesign Template Free to Download

This lookbook template has nine clean, black-and-white layouts. Some page layouts are full photo spreads, and others mix short text blocks with simple layouts. There’s a nice balance of white space and structure. It is free to download.

Clean InDesign Lookbook Template Free to Download

This free InDesign lookbook template offers a simple layout that will allow your fashion or photography work to shine. It comes with 26 layouts, perfect for creating a spread that aligns with your brand and mission statement.

It supports A4 and US letter sizes and could easily be edited for use in brochures, magazines, company reports, etc. However, the layouts offer a fashion feel, so keep that in mind when downloading the package.

Minimal Photography Portfolio InDesign Template This InDesign template is clean and simple in its presentation, yet an absolute stunner. It supports two-page spread layouts for more significant fashion moments and can easily be adapted to suit interior design or architectural fields.

This print-ready, fully layered template is easy to customize thanks to its grid-aligned layout. Your edits will not affect the overall aesthetic.

Modern Design Lookbook Template for InDesign Free to Download

This lookbook template is another solid choice for those looking for a simple way to present their designs or portfolio pieces. What stands out here is the bold background color choices and how they complement the photography on each page.

This template has 13 completely editable pages, is print-ready, and is sized for A4 paper.

Stylish Architecture Portfolio Template Free to Download

The architectural portfolio template has clean lines and a simple layout. It completely embraces minimalism, favoring full-page photo spreads, solid-color backgrounds, and centered text boxes over columns of text or a more magazine-style design.

This template is print-ready, and the included color schemes and layouts will make for a stunning end product.

Portfolio/Lookbook InDesign Template What a beauty this portfolio template is! It can be used for various projects that require a lookbook or portfolio. It is very easy to make your own thanks to its grid-based layout and included vector graphics.

This template is customizable in A4 and US Letter sizes, and consists of 24 pages of layout options and free fonts. Vertical typography choices and subdued photographic backgrounds make a real impression.

Sunday Lookbook InDesign Template The ‘Sunday’ lookbook template comes with a collection of 32 minimally designed page layouts. It would be perfect for showcasing your brand or portfolio in the simplest yet most beautiful way possible. It is free to download.

Free to Download

Fashion Lookbook Layout for InDesign Free to Download

This free lookbook template includes 24-page layouts and would be perfect for anyone who works in fashion, photography, or any other area of creativity. Its design is simple and clean, making it easy for you to edit according to your own needs and style.

Stunning Portfolio Template for InDesign Free to Download

This stunning portfolio InDesign template is perfect for sharing design work, photography, or fashion. It could even be used for architectural spreads.

It includes various page layouts and a front and back cover, making it the complete package. It’s print-ready in US Letter size and includes beautiful typography and color schemes, making it perfect as the backdrop of your latest portfolio masterpieces.

Clean & Minimal Portfolio InDesign Template This clean and minimally designed portfolio template has a business or corporate feel but could easily be adapted for fashion, graphic design, or photography use.

This InDesign template includes 24 page layouts that you can easily customize with your content. It uses free fonts, and all text, images, and colors are editable, so you can quickly create your desired aesthetic.

Portfolio & Resume InDesign Template This portfolio and resume InDesign template includes 32 page layouts, and thanks to the organized layers, it is easy to customize. The custom paragraph and character styles make it easy to create the aesthetic you are looking for.

This template includes a help file that walks you through how to change images, text, and swatches. This multi-purpose file can be adapted for use in various creative niches and business types.

Designer Portfolio InDesign Template Free to Download

This portfolio InDesign template is the perfect choice for a graphic or web designer looking to highlight some of their best work to potential clients. The 8 sample pages offer plenty of layouts for displaying logos, web designs, graphics, and other examples of your work.

Interactive Portfolio & Resume Template Free to Download

This free portfolio and resume template has a three-page layout and two color schemes. It offers just enough editability to ensure you can get the look you want without committing a lot of time to the design.

It would be ideally used for a graphic or web designer’s portfolio since it has a dedicated page where you can input links to websites you’ve worked on recently.

Portfolio & Lookbook Template FAQs What are Portfolio and Lookbook Templates?They are pre-designed layout templates for InDesign for creating portfolios and lookbooks. They offer a range of layouts and styles to showcase your work or products. * Why Use InDesign for Creating Portfolios and Lookbooks?InDesign is ideal for these types of projects due to its powerful layout and design capabilities. * Can Beginners Use These Templates?Yes, these templates are user-friendly. Beginners can easily customize them with basic knowledge of InDesign. * Do I Need a Specific Version of InDesign to Use These Templates?Most templates mention the version of InDesign they are compatible with. It’s best to use a version that matches or is newer than the template’s requirements. * Can These Templates Be Used for Both Digital and Print Portfolios?Yes, InDesign templates can be adapted for both digital viewing and high-quality printing, depending on your needs. * How Do I Choose the Right Template for My Work?*Consider the nature of your work, the amount of content you have, and the style that best represents your projects when selecting a template. ConclusionBefore you put everything together for your portfolio or lookbook, and especially before you spend money on a template, take a look at this collection of free Adobe InDesign templates.

Not only are they great for your budget, but they also feature beautiful designs and layout options that make it easier than ever to create a portfolio or lookbook in just a couple of hours — rather than a few days.

More Adobe InDesign TemplatesBrowse our curated collections of InDesign Templates, including brochures, flyers, proposals, stationery, resumes, magazine layouts, and more.

More InDesign Templates

The post 10+ Best Free Portfolio & Lookbook Templates for InDesign in 2025 appeared first on Speckyboy Design Magazine.

View Details

WordPress Freelancers and agencies often do more than design and development. A full-service company may also maintain and host its clients’ websites.

Providing web hosting has several benefits for freelancers. First, it’s a vehicle to add recurring revenue to your business via reselling or an affiliate program from an established host. That steady flow of money can improve your financial health.

You’ll also have more control over each site’s environment. That helps ensure compatibility and keeps things running smoothly. Plus, you’ll know what to expect regarding performance, security, and support.

However, hosting client sites is also a serious responsibility. It puts you on the hook for technical difficulties. In addition, managing multiple WordPress websites is challenging. One false move could mean a string of crashed or hacked sites.

With that in mind, we have some tips for hosting your client’s WordPress websites. We’ll show you how to keep a watchful eye on each site without breaking your budget.

Keep Each Client Website SeparateWeb hosting costs run the gamut from insanely cheap to, well, insanely expensive. It’s tempting to go the inexpensive route with a shared hosting account.

Hosts often allow multiple WordPress installs on an account. It makes sense from a business perspective. You pay for a couple of hosting packages and run all of your client sites on them.

This strategy has a couple of serious flaws. The first is that server downtime could impact every site you host. It’s bad enough when one site is down, let alone a few dozen.

Malware is the other major concern. Malicious code can easily spread from one site to another in a shared hosting environment. Once a site is compromised, it’s only a matter of time until the others are hit.

The lesson here is to keep each website on a separate hosting account. Make sure your host isolates sites via a container or other barrier. That will help prevent a security nightmare. Again, it’s easier to deal with one hacked site than having multiple infections.

And it doesn’t have to be inconvenient. Many hosts offer a centralized dashboard to access each site, and there are also third-party services that do the same.

Lock Down Your WordPress InstallsOn many hosts, the famous “5-minute WordPress install” has been replaced with a one-click process. Still, older sites may have been installed manually via SFTP. Thus, it’s important to check each install to verify its integrity.

WordPress file permissions are an area of concern. For instance, allowing public access to the site’s wp-config.php file is an invitation to hackers. The file includes your database login and other sensitive information. A lot of damage can be done if it falls into the wrong hands.

The WordPress developer documentation has a handy guide for setting the correct file permissions. Follow its advice and ensure files only have the required permissions.

You might also want to disable file editing within the WordPress dashboard. That will prevent a malicious actor (or adventurous client) from editing theme or plugin files.

Add the following line to each site’s wp-config.php file: define( 'DISALLOW_FILE_EDIT', true );

Other ways to secure the sites you host:

Install a WordPress security plugin.
Add an activity logging plugin to keep track of changes and user actions.
Employ a content delivery network (CDN) with a firewall to block suspicious traffic.
Limit access to the /wp-admin/ folder.

The goal is to enhance each site’s security, which provides peace of mind for you and your clients.

Ensure You Have Enough Server ResourcesEvery website you host will have different needs. For example, a brochure site’s functionality isn’t as complex as a WooCommerce shop. Plus, some will inevitably receive more traffic.

That’s why hosting is not a one-size-fits-all proposition. Hosts offer tiered services that account for storage and bandwidth. They may also limit the number of domains, dashboard users, or site visitors. Crossing these thresholds can be costly.

Also, pay attention to server resources like memory, CPU cycles, and PHP workers. Shared hosting environments don’t usually guarantee a minimum. More expensive accounts, such as VPS and dedicated servers, assign these resources to your account.

It pays to understand what your host offers and how it impacts your websites. A site with too few resources won’t perform well and may break. Meanwhile, hosting a small site on a higher tier could be wasteful.

You can avoid problems by assessing each site you host. Pay particular attention to the following factors:

Monthly traffic (via Google Analytics or other apps);
Security risks (online transactions, user accounts);
The amount of content;
Special functionality (shopping carts, members-only areas, resource-intensive plugins);

Site stability, performance, and security are vital to success. Using the right hosting will go a long way toward ensuring it.

Keep an Eye Out for Hosting ChangesWe know that WordPress, themes, and plugins all require regular maintenance. That’s something we often manage for our clients. But hosts also maintain their infrastructure.

A host will apply new software versions and security patches to their servers. They’ll also upgrade hardware from time to time. You’ll want to know when this happens.

PHP upgrades are a prime example. An outdated theme or plugin could be incompatible with the latest version, which leads to a buggy or broken site.

Staying in the know can help prevent these types of issues. Web hosts often announce maintenance plans ahead of time. They may publish to a blog, add a dashboard alert, or send an email.

Make an effort to inform yourself of what’s happening. It can save you from a future headache or two.

Be a Good HostHosting your client’s WordPress websites keeps you in the loop. You’ll be able to watch over each site and ensure its health. It’s also a path to making some extra money.

When things run smoothly, the burden on your time should be minimal. Ensuring things stay that way is part of the job, though.

The first step is to choose your hosting provider wisely. Look for a host that follows best security practices and has a deep understanding of WordPress. They should also offer enough resources to run each site without issue.

From there, it’s all about being proactive with the sites in your portfolio. Keep them updated and take extra security measures. In other words: control the things you can.

Some things are beyond our control. We can’t predict downtime or a host being sold. However, we can put ourselves and our clients in a position to succeed. We hope the tips above will help you get there.

The post Tips for Hosting Your Client’s WordPress Website appeared first on Speckyboy Design Magazine.

View Details

WordPress block themes offer plenty of flexibility. You can make style and layout changes within your web browser – no coding knowledge is required. They can also include extras like block patterns and style variations.

Style variations give you a head start on design. They allow us to create multiple color and typography combinations. They also house custom block styles defined in the Site Editor. Anything in a theme.json file can also be included in a style variation.

This is handy for web professionals and users alike. Choose the variation that suits your needs and start building your site.

Creating a custom block theme style variation is easier than you think. The entire process takes place in the WordPress Site Editor. A simple variation can be built in minutes.

So, follow along as we build a style variation! We’ll show you how to point and click your way to a custom design.

Style Variation Project RequirementsThe requirements for building a custom style variation are minimal. You’ll need:

A WordPress website (a local install is fine).
A block theme (we’re using Twenty Twenty-Five).
The Create Block Theme plugin should be installed and activated on your website.

We don’t recommend using a production website for this process. A staging or local WordPress installation is the safer way to go.

Let’s Build a Style VariationNow, it’s time to start building! Log in to your WordPress website and follow the steps below.

Step 1: Open the WordPress Site EditorFirst, navigate to Appearance > Editor in the WordPress admin to open the Site Editor. Then, click the Styles link in the left sidebar.

The Styles panel includes links for Typography, Colors, Background, Shadows, and Layout. You’ll also find a Browse Styles link that displays available style variations for the theme.

Finally, the Blocks link allows you to customize individual block styles across the site.

Step 2: Change Your Theme’s StylesThis step is all about personal preference. Work your way through the Styles panel and start making changes.

Color and typography are the most obvious changes, but you can take things further. For example, you can change the layout width and spacing. Plus, every block included with WordPress can be customized. Add margins, padding, borders, or custom CSS.

We covered the basics in our variation, including:

Created a custom color palette;
Installed new fonts from Google Fonts;
Added custom spacing for the Group and Paragraph blocks;
Changed the look of the Button block;

The result is an earthy look that aims for simplicity. But you can do as much or as little as you like. Just remember to save your changes when done.

Step 3: Save Your Style VariationOur next task involves saving our custom style variation. This functionality is part of the Create Block Theme plugin.

The feature is located within the Site Editor. Here’s how to find it:

While in the Site Editor, click on the right panel, highlighted in green below:
Click the wrench icon on the upper right of the screen and select Create Theme Variation:
Name the variation and ensure the Save Fonts box is checked. We’ll call ours “Beautiful Earth.”
Click the Create Theme Variation button to save the settings.

Once saved, the new variation is added to the list in the Browse Styles area of the theme editor. Hovering over the variation reveals its name.

How to Use Your Style Variation on Another SiteStyle variations are portable and can be used on multiple websites. The process involves copying the generated JSON file and adding it to the desired site.

Locate the style variation’s JSON file in /wp-content/your-theme/styles/
Replace your-theme with the name of the theme you’re using (ours is twentytwentyfive).For reference, our JSON file is called beautiful-earth.json
Copy your style variation’s JSON file.
On your new website, paste the file into /wp-content/your-theme/styles/ – you may need to upload the file via SFTP or your web host’s file manager.
You’ll now be able to choose the style variation within the Site Editor.

About Custom FontsEarlier, we mentioned the ability to add custom fonts to a style variation. It requires a few extra steps to work when moving your variation to a new site.

Locate the custom fonts you added at /wp-content/themes/your-theme/assets/fonts/
Copy each font’s respective folder.
Paste the font folders into the same directory on your new site. Once again, you may need to upload them.

Give Your Block Theme a Custom LookStyle variations are a convenient way to add personality to your block theme. You can build them to suit your project requirements.

They also act as a starting point for designers. You can continue to add custom styles after applying a variation. The changes you make will be saved in the site’s database.

There’s also an option to reset the styles to the variation’s defaults. That makes it easy to experiment without losing the key elements of your design.

The best part is that style variations don’t require coding expertise. That puts custom design within everyone’s reach.

The post Learn How to Build a WordPress Block Theme Style Variation appeared first on Speckyboy Design Magazine.

View Details

Modern websites often feature extensive scrolling. Long pages are common on desktop devices, but are even more frequent on mobile screens. The practice creates usability challenges for tasks like navigation and referencing important information.

That’s where “sticky” design elements come in handy. They allow users to scroll without losing access to your site’s menu. You can also use them to keep ads in view, attach social media sharing buttons to the viewport, or create fun special effects.

Implementing a sticky element can be simple, as CSS has a dedicated position property for this function. JavaScript can be used for building more robust features. As usual, there are several methods to achieve your goals.

We searched the CodePen archives to find interesting examples of sticky elements in use. Below, you’ll find various options that enhance the user experience. So, get stuck in your easy chair and be inspired by these code snippets!

Pure CSS Header Animation to Sticky NavigationCreated by Amit

Sticky headers are among the most popular use cases. On Chromium browsers, this snippet uses CSS to transform a tall and narrow header into a full-screen bar upon scrolling. Unsupported browsers receive a narrower, taller, sticky header. Keyframe animation is used to create smooth transitions. The feature is useful, lightweight, and attractive.

See the Pen Pure CSS header animation to sticky nav by Amit

Sticky Responsive Sidebar NavigationCreated by Areal Alien

Sidebar navigation can also take advantage of staying put during scrolling. Hovering over the sidebar expands the navigation to include text labels – it works on mobile too. However, you might also reserve this concept for large screens and use the traditional “hamburger” menu for mobile.

See the Pen Sticky responsive sidenav by Areal Alien

CSS Sticky Table Header & ColumnCreated by Mike Golus

Long HTML tables can be a pain to read. You have to memorize the column headers to understand the context. Sticky headers make even the busiest tables easier to read. Using position:sticky (and a few other tricks) on the first row and column enables scrolling without losing sight of key information. The examples in this Pen demonstrate how it’s done.

See the Pen CSS Sticky Table Header and Column by Mike Golus

Long Scroll Sticky SectionsCreated by Burmese Potato

Here’s a unique way to denote the various sections of a long page. Scroll down the page, and the episode number (displayed in the left column) sticks until you reach the end of the section. The snippet combines sticky positioning with the calc() property on the container’s height to keep the number in view. This little bit of CSS adds a nice touch to the user experience.

See the Pen Pretty Sticky by Burmese Potato

Just Another Sticky Section LayoutCreated by Misala

Sticky design elements can also be used to show off product features. Scroll down this page and watch as featured text and videos change. The layout occupies the entire screen viewport and is responsive for mobile devices. It’s a high-end feature sure to capture a user’s attention.

See the Pen just another sticky section layout by misala

Multi-Navigation Sticky Bars & LayoutCreated by Den

This snippet asks the question: What if you have more than one navigation bar? The first bar is sticky by default. Scroll past a few sections, and a second sub-navigation bar lines up underneath. That second bar also features a neat frosted glass look as content scrolls underneath.

See the Pen Sticky layout + filters #2024 by Den

Sticky Video with CSS @container scroll-state()Created by Jhey

We’re seeing more websites implement sticky videos, where the presentation sticks to the bottom corner upon scrolling. It allows users to view the rest of your content without losing sight of the video. Here, CSS container queries are used to reposition the video player. Use the included config panel to see how different settings impact the animation effects.

See the Pen CSS @container scroll-state() faux PiP video by Jhey

Dynamic Sticky Sidebar ComponentCreated by Ryan Mulligan

Features like shopping carts are a perfect fit for sticky sidebars. The UI makes it easier for shoppers to keep track of their cart and, most importantly, finish their purchase. This sidebar widget keeps track of cart contents and sticks to the screen while you scroll in the page content area.

See the Pen Dynamic Sticky Sidebar Component by Ryan Mulligan

Stick With What Works in Your DesignsWe may think of sticky elements as being used for site headers and navigation. However, the examples above show that they can do much more. There are so many creative possibilities for informing and entertaining users.

What’s more, CSS can do a lot of the heavy lifting for you. Several snippets in this collection don’t require a single line of JavaScript. Still, it’s nice to know you can add some DOM manipulation when needed.

We hope this collection sparked your imagination! Check out our CodePen collection for even more sticky snippets.

The post 8 CSS & JavaScript Snippets for Creating Sticky Elements appeared first on Speckyboy Design Magazine.

View Details

Choosing a managed WordPress hosting plan can make running a website much easier, especially for those who aren’t overly familiar with WordPress. They will handle server maintenance, security updates, backups, migrations, and performance optimization. This means less work and fewer technical concerns for you.

Managed hosts also offer expert WordPress support, which can be helpful when looking for a quick fix to keep your website running smoothly.

The downside of a managed hosting plan is the price. They’re usually a little more expensive than a shared or an unmanaged hosting option. Some managed plans may limit traffic, storage, or the number of websites you can host. For smaller websites or those with lighter traffic, those extra features may not justify the cost.

Every hosting provider on this page includes the key features expected from a managed service — automatic updates, security, backups, and optimized performance. Some plans focus on affordability, while others cater to high-traffic businesses needing advanced infrastructure.

The best approach is to determine what your website needs — storage, bandwidth, support level — before comparing plans. A lower-cost managed hosting plan might work for a personal blog, while a larger business may need something more powerful. Take your time and choose the best managed plan for you and your website or business.

Prices may change based on discounts, renewal rates, and contract length.

Table of Contents1. WordPress.com Business Plan 2. Pressable Personal Plan 3. Cloudways DigitalOcean Plan 4. WP Engine Startup Plan 5. Kinsta Starter Plan 6. Flywheel Tiny Plan 7. Liquid Web Nexcess Spark Plan 8. SiteGround StartUp Plan 9. DreamHost DreamPress Plan 10. Hostinger Premium Plan 1WordPress.com Business PlanThis host is built and maintained by Automattic, the team behind WordPress.org. WordPress.com removes almost every technical task from your plate. Software updates, performance tuning, daily backups, and security monitoring are all included. You also get access to Jetpack features like CDN, downtime monitoring, and advanced SEO tools.

The support team is highly trained in WordPress and available 24/7. If you run a business or blog and just want everything to work without constant tweaking, this is one of the most stable managed hosting options.

However, it has limitations on certain plugins and themes, which may frustrate advanced users or developers who want more control.

Read more about Hostinger

Starting Price$11.99*PER MONTHView Hosting Our Rating: 9.5/10Managed WordPress Hosting Comparison Table

| Provider | Plan | Monthly Price | Best For | Staging | Support Quality | | --- | --- | --- | --- | --- | --- | | WordPress.com | Business | $25 | Simplicity | Yes | Excellent | | Pressable | Personal | $25 | Freelancers | Yes | Excellent | | Cloudways | DigitalOcean | From $14 | Developers | Yes | Good | | WP Engine | Startup | $25 | Growing Sites | Yes | Excellent | | Kinsta | Starter | $30 | Performance | Yes | Excellent | | Flywheel | Tiny | $13 | Designers | Yes | Good | | Nexcess | Spark | $14 | WooCommerce | Yes | Good | | SiteGround | StartUp | $17.99* | Multi-site | Yes | Very Good | | DreamHost | DreamPress | $19.99 | Small Sites | Yes | Average | | Hostinger | Premium | $10.99 | Budget Users | Yes | Improving |

How These Hosts Were ChosenTo keep things fair, each hosting provider was evaluated using the same criteria:

Speed: How quickly does the host load real WordPress sites?
Uptime: Is the site available when visitors need it?
Support: Is help actually helpful when something breaks?
Pricing: Are you getting value for the monthly cost?

Final ThoughtsThere’s no perfect host for everyone. What matters is choosing one that fits your needs right now.

Best for hands-off hosting: WordPress.com Business.
Best balance of performance and support: Kinsta.
Best for budget-conscious users: Hostinger.
Best for developers: Cloudways.
Best for WooCommerce: Nexcess.

If you’re running a client site, agency, or your own growing business, it’s worth paying a bit more for stability and real support. But if you’re just starting out or rebuilding, some lower-cost options will still give you a solid foundation.

Pick based on what your site needs today—not where you think it’ll be years from now. It’s always possible to migrate later.

Prices are accurate as of June 2025 and may change.

More WordPress Hosting Options* 10 Best Hosting Packages for WordPress Developers * 10 Best Hosting Packages for WordPress Agencies * 10 Best WordPress Hosting Options for Bloggers * 10 Best Managed WooCommerce Hosting Packages * Top 10 Cheap WordPress Hosting Packages * 10 Best WordPress Hosting Options for Small Businesses The post The 10 Best Managed WordPress Hosting Providers in 2025 appeared first on Speckyboy Design Magazine.

View Details

Getting started with WordPress is challenging. You install the app, log in, and… then what? Many first-time users face this conundrum – the next steps aren’t obvious.

The content management system (CMS) becomes easier as you navigate its learning curve. But it’s worth wondering how many people give up before they reach that point.

Technology may have a solution. AI-powered site builders are starting to infiltrate the market. They aim to make it easier for non-developers to build a website by answering a few questions.

Perhaps they sound like yet another attempt at a DIY tool, something else to replace web designers. This makes sense on the surface. However, AI has the potential to break down some longstanding barriers to using WordPress. If so, they could be useful to professionals and novices alike.

With that in mind, let’s explore the potential of combining AI with WordPress. We’ll look into the future and make a few guesses as to what’s to come.

WordPress Lacks a Great Onboarding ExperienceBefore we dig into AI’s potential to help WordPress users, we should define the problem that needs to be solved. Logging into WordPress for the first time is like being dropped into the wilderness.

There’s a welcome message at the top of the dashboard and a hefty menu on the sidebar. Both will lead a curious user to explore. However, some may be overwhelmed by the number of options.

Plus, they’ll need to know at least something about these aspects of WordPress:

Where to find and install themes and plugins.
How to edit their theme via the Site Editor (block themes) or Customizer (classic themes).
How to use the Block Editor to create pages and posts.
Any site settings they need to change.
Best practices for security and performance.

Learning WordPress requires commitment. The default onboarding doesn’t put people on that path.

It’s also a burden on web professionals. Setting up a new site means a lot of repetitive tasks, and we’re also responsible for training clients to use the software. All told, we spend significant time doing things other than site building.

Better onboarding could make all the difference.

How AI Could Improve the User ExperienceIn broad terms, an AI site builder is an onboarding tool. Its mission is to learn about your website needs and produce something relevant. So far, the results of these tools have been mixed.

Good or bad, the result isn’t a finished product. It’s a foundation to build upon. We can take what’s there and go further, whether via “chatting” with a bot or doing it ourselves. But the story doesn’t have to end there.

The potential lies in catering to various niches. The current generation of builders tends to focus on non-developers, people who want to build a quick and cheap website. They’re a one-size-fits-all proposition.

However, there’s room to make these tools more specialized. For instance, a site builder aimed at professionals may focus on things developers want. That could include pre-configured website blueprints that install a theme, plugins, and other custom tweaks.

Consider the time we spend getting ready to build a website. The right tool could do these tasks for us, saving time and money. A simple text prompt could check several steps off our to-do list.

AI is already splitting into several subgenres. We have models trained for coding, education, and business. Adding tools for freelancers and agencies follows this trend.

Meanwhile, tools for non-developers also have greater potential. They may recommend plugins (or categories of them) based on industry or other user input. Perhaps uploading a logo helps AI create color and typography schemes.

In addition, these tools can go beyond the initial site build. AI might also help users learn to create and manage content. A tool could provide tips and relevant content from the Learn WordPress archives. They could perform routine checks to keep WordPress as secure as possible.

AI site builders aren’t necessarily doing these things today. However, service providers will recognize the opportunity to do more. A little imagination will go a long way.

An Opportunity to Improve WordPress for AllThe term “site builder” may make you cringe. We won’t blame you – these tools have a checkered history of spotty quality and dubious value. Besides, web professionals aren’t their target market.

That could change as more AI-powered products come online. For example, WordPress.com recently released a tool that will reportedly become part of the self-hosted (WordPress.org) version. Such an open-source app could be tailored to all sorts of interesting uses.

The idea of a site-building tool could be turned on its head soon. If done right, it could solve one of the most frustrating aspects of learning WordPress, not to mention a productivity boost for web developers.

Let’s hope AI helps us take the next step toward making WordPress easier for everyone.

The post Can AI Site Builders Make WordPress Easier? appeared first on Speckyboy Design Magazine.

View Details

The right photo effect can transform an ordinary image into a work of art. Adjustments to lighting, color balance, and texture help you create the perfect mood for your project.

You can use Lightroom presets to achieve professional results in no time. They run the gamut from subtle touches to bold statements.

Each one is configured to change the look of your image. And much of the hard work has been done for you. However, they’re flexible and allow you to adjust them to match your needs.

If that sounds amazing, you’re in luck! This collection features more than twenty Lightroom presets that add artistic effects to any photo. They’re a great addition to your photography toolbox.

Check out our collection and find the presets that catch your eye. They’re so handy that you’ll want to use them again and again.

You might also like our collection of art effect Photoshop actions as well.

Lomo Effect Lightroom Presets Inspired by Lomography, this suite of 19 presets provides a variety of interesting effects. They’re meant to mimic the non-technical joy of classic toy cameras. The effects aren’t meticulously crafted – but that’s the point.

Grunge Effect Lightroom Presets Bring a rough industrial look to your photos using these grunge presets. They support the Lightroom adjustment slider to tweak the effect’s intensity. That makes it easy to go from subtle to dystopian in no time.

Polaroid Effect for Lightroom The look of a Polaroid instant photo is timeless. You can add this classic effect to your images via this set of five Lightroom presets. The washed-out aesthetic brings a retro quality to your portrait photography.

Toy Camera Lightroom Effect Artistic photo effects can be fun! The 20 presets in this collection add a memorable lo-fi look of a toy camera. They also support Lightroom Mobile, so you can take the party with you.

Surreal Colors Lightroom Presets Fantasy fans will want to check out this suite of 50 surreal presets. Their style is reminiscent of popular period pieces like Game of Thrones. There’s plenty here to help you create a whole other world.

Dreamy Soft Focus Lightroom Presets Use these presets to add a dreamlike haze to your photos. They feature soft tones and an airy ambiance that feels like a retro film camera. Give your images a past life with just a click.

Gothic Look Lightroom Presets Dark and moody, this collection offers muted colors and sharp lines. These versatile presets can be paired with portraits, fashion shots, and landscapes. They’ll make any photo stand out from the crowd.

Vaporwave Lightroom Presets The future is full of color according to this suite. Add a bright look to your nighttime landscape photos – especially those including neon signs. Rich hues and high contrast are the calling cards here.

Pop Art Lightroom Presets Want to add some serious vibrance to your images? This collection of six Lightroom presets will boost even the dullest of photos. They make it easy to bring out the bold with a click.

Fantasy Look Lightroom Presets These presets add a high-intensity effect to your lifestyle images. Your colors will be brighter and lines sharper. It’s a great choice for night photography or anywhere dark and light contrast.

Glow Effect Lightroom Presets This collection of 24 Lightroom presets includes a variety of luminous options. Whether you want to add a subtle light boost or something extreme, you’ll find it here. You can also adjust them to find just the right look.

Infrared Lightroom Presets Brighten and balance your photos using any of the 14 presets included here. They work well for outdoor shots or any image that could use a natural color enhancement. You’ll be surprised at how much life is hiding in your image.

Cyberpunk Lightroom Presets Use these color-grading presets to add a moody vibe to images. Colors are boosted to bring out a dramatic look. There’s a lot of opportunity to experiment with the 20 included effects.

Dark Moody Lightroom Presets Embrace the darkness using this collection for Lightroom. Add a tint to photos while emphasizing earthy tones. The effect perfectly adds a cinematic feel to portraits and architectural images.

Neon Glow Lightroom Presets Here’s a way to bring a neon glow to your photos. These presets enhance light colors and bring them to the forefront. Your images will shine with a powerful visual statement.

Matte Effect Lightroom Presets Add a calm balance to any image with these matte effect presets. Inside, you’ll find ten options to achieve a classic film look. Use them to dress up portraits, landscapes, and lifestyle photography.

Bleak Effect Lightroom Presets Your travel photos will benefit from this set of 50 Lightroom presets. They add a washed-out effect that makes them perfect for use as backgrounds. Website headers and hero areas are possibilities, as are print advertisements.

Fire Effect Lightroom Presets Bring a little heat to your fire images with presets built just for them. They aim to create a modern look while avoiding oversaturation. There are several options to choose from to achieve unique results.

Sunray Effect Lightroom Presets Realistic sunshine effects are easy to implement with this collection of overlays. They brighten up any photo with bright rays of light. Add them as a separate layer and experiment with opacity and blends to make something special.

Western Style Effect Lightroom Presets Vintage looks and warm colors make these presets a great option. Use them to turn a dull outdoor image into a dramatic scene. The 10 included effects make it easy to add some retro charm.

Sepia Effect Lightroom Presets This collection of 20 presets will add the timeless beauty of sepia to your photos. The effect is subtle and still allows colors to come through. The result is an antiqued look that is sure to please.

Add Some Artistic Flair to Your PhotosSometimes your photos need an extra boost. That’s where the Lightroom presets in this collection come in. They quickly add virtually any type of artistic effect imaginable.

What’s more, they’re great fun to experiment with. You can adjust them or even combine effects to create something unique. There are so many possibilities!

We hope you enjoy the options above and make them part of your photo editing workflow.

The post 20+ Artistic Effect Lightroom Presets for Creative Photographers appeared first on Speckyboy Design Magazine.

View Details

Final Cut Pro is a popular video editing application for macOS for creating high-quality video content. One of the many features that makes Final Cut Pro so popular is the ability to use pre-designed presets and templates.

As powerful as Final Cut Pro is, there is no denying that video editing can be a long, and at times, tedious process. Still, with the right preset or template, you can significantly cut your video editing time while improving the overall quality of your video projects.

The presets and templates can include everything from color grading and visual effects to titles and transitions, making creating a polished and professional video much easier and quicker.

We’ve rounded up the best free presets and templates for Final Cut Pro that you can download and use in your own projects. Check them out below and add them to your video library today.

You might also like our collection of free Apple Motion templates.

View Details

We talk a lot about web design best practices. The tenets of accessibility, performance, resiliency, and security should be part of every project. They’re essential to a successful outcome.

It doesn’t always work that way out of the box, though. We are becoming more dependent on site-building tools. As such, we rely on them to do things the right way.

These tools aim to simplify the design and build processes. Some do it very well. But there’s a side effect: They take control of the output. And there’s no guarantee that they’ll employ best practices.

It’s an issue as old as the WYSIWYG editor. The difference is that it’s harder to override any problematic code.

There are some less-than-great tools on the market. Site builders that are outdated or deeply flawed. But even a great tool can get in the way. None of them are perfect.

Let’s look at a few scenarios when a tool hinders your ability to follow best practices. In addition, we’ll show you some ways to get around these issues.

How Site Builder Tools Can Impact AccessibilityIt’s never a good idea to assume your website is accessible. Doing so is a risk. You might have created a poor user experience. At worst, the site may not be compliant with the law.

Site builder tools can make accessibility issues less obvious. For example, they may not warn you if you choose an inaccessible color scheme. Subtle color differences could make a big difference.

They might also produce code that isn’t semantic. That makes it harder for screen readers to interpret your content.

There’s also the implementation of special effects. You might add intense animations that are harmful to some users. The tool won’t always tell you the potential consequences. Thus, it’s up to you to use it responsibly.

Accessibility testing is the only way to know – regardless of how you built the site.

Included Features Aren’t Always the Best OptionSite builders often include advanced features. Elements like sliders, modal windows, and media players come to mind. These items are essential for some projects.

Their inclusion doesn’t speak to quality, though. The tool may produce inefficient or buggy code. The result is poor performance.

There’s also a chance of a conflict with other software like themes or plugins. And there’s no guarantee of browser compatibility.

There’s a high level of convenience with these features. You don’t have to search for a plugin that does x, y, and z – it’s already there. However, they’re not always the best fit for the job.

WordPress page builder plugins are an example. The one you use may come with a forms module. Awesome! But does it do everything you need? Are the forms accessible?

It’s worth doing an honest assessment of these items. Look at what they do. Run performance benchmarks. Monitor your browser console for errors. That will help you determine if it’s worth using.

If not, there are plenty of other options. You don’t always have to settle. And moving to a different solution could offer better results.

The Potential for Becoming Locked InSure, a site builder may claim to offer everything under the sun. But will it grow along with your needs? How portable is your site’s content?

You’ll want to know the answers sooner rather than later. Otherwise, you might be stuck with a tool that can’t keep up with you. And moving on can be a tedious process.

That happens with WordPress. A page builder plugin may no longer meet your needs. Or you might want to switch to the native Block Editor.

Making a change is possible. But it’s not always easy. Page builders often have different ways of outputting code. Thus, you might be left to reformat content piece by piece. The WordPress Data Liberation project aims to help with this.

The challenge is a bit different with proprietary systems. Not all of them offer third-party plugins. And some make it hard to move your site to a new provider.

Either way, it isn’t easy to rid yourself of monolithic tools. A modular approach is more efficient. It’s easier to swap elements or add new ones.

Site Builders Are Great – Just Be RealisticThere’s so much to consider when building a website. That’s why site builders are popular. They aim to provide an all-in-one experience. And there’s a lot to like about them.

But there are also some drawbacks. It doesn’t mean you should avoid them altogether, though. Consider the pros and cons before committing.

Look for reputable tools that have a history of stability. Review their features and determine how they fit into your project. Ideally, you’ll find one that will serve you well into the future.

It’s also a good idea to set realistic expectations. A site builder can’t possibly cover every use case. There are times when you’ll need to go outside the box.

With WordPress, that means finding a separate plugin to perform the function you want. On other systems, you may need to write custom code.

The goal should be a website that looks and functions how you want. It should also be flexible enough to accommodate growth. Tools play a significant role.

Keep that in mind throughout the process. It may save you a headache or two along the way.

The post When Website Builder Tools Get in the Way of Best Practices appeared first on Speckyboy Design Magazine.

View Details

Imagine yourself or your product on the cover of a magazine. You wouldn’t be the first to do so. It’s a dream that has been passed down through generations.

There’s something unique about a magazine layout. Whether you’re creating a print publication or a simple mockup, they offer a professional look. They also lend an air of legitimacy to any project.

That’s what makes the magazine layout templates in this collection so fun. They allow you to create a compelling cover, spread, or editorial regarding whatever subject you like. Thus, they’re handy for multiple use cases.

They’re also easy to edit. Each template is compatible with Adobe Photoshop. You’ll gain access to layered files that let you swap fonts and photos with ease.

Check out the templates below and use them to make your magazine dreams come true. Or use them for your client projects – that works, too.

You might also like our collection of magazine templates for InDesign.

Magazine Cover Photoshop TemplatesA well-designed magazine cover is sure to grab a reader’s attention. It starts with an iconic photo that can’t be ignored. From there, typography helps to inform readers and create a mood. These templates offer a great starting point.

Modern Magazine Cover Mockups Photoshop PSD

Minimal Magazine Cover Mockup Photoshop PSD

Professional Magazine Cover Mockup Photoshop PSD

Simple Magazine Cover Mockup Photoshop PSD

Magazine Spread PSD TemplatesTell your story in style with these easy-to-edit magazine spread templates. There’s plenty of room to add your custom photos. You’ll also find unique layouts for showcasing text. They’re perfect for making your content stand out.

Magazine Cover & Spread Mockup Photoshop PSD

Glossy Magazine Spread Mockup Photoshop PSD

Magazine Spread Mockup Scene Photoshop PSD

Magazine Design Mockups Photoshop PSD

Magazine Advertorial PSD TemplatesAdvertorial templates will help you put your product and message on display. Combine bold typography with product shots or illustrations to catch the reader’s eye. Add a call-to-action that makes them want to check out your product or service.

Oden Ads Magazine Print Template Photoshop PSD

Food Delivery Magazine Template Photoshop PSD

Editorial Layout PSD TemplatesUse an editorial template to share your most compelling stories. These flexible templates can focus on text or photography, depending on your needs. They are a great fit for essays, interviews, and tutorials.

Upcycled Book Mockups Photoshop PSD

Cook Book Magazine Template Photoshop PSD

Photography Magazine TemplatesHere’s a way to make your photography the star of the show. Impress readers with your best images and use the included text layouts to tell the story behind them. Create a photo essay or a promotional publication to sell your services.

Photography Portfolio Template Photoshop PSD

Square Photography Portfolio Template Photoshop PSD

Minimal A4 Magazine Mockup Photoshop PSD

Photography Contest Flyers Template Photoshop PSD

Fashion Spread PSD TemplatesFashion spreads are all about the visuals, and there are plenty of options. You can use photo effects to highlight color or create a surreal scene. Or you can aim for a minimalist aesthetic where the image speaks for itself.

Fashion Magazine Cover Templates Photoshop PSD

Minimal Fashion Magazine Mockups Photoshop PSD

A5 Slim Fashion Magazine Mockup Set Photoshop PSD

Fashion Magazine Mockups Photoshop PSD

Lifestyle Spread PSD TemplatesUse these Photoshop templates to inspire your readers to live their best life. Showcase your must-have products or reveal the secrets to a great home aesthetic. Customize them to fit your narrative.

Clean Lifestyle Magazine Template Photoshop PSD

Fashion & Lifestyle Templates Photoshop PSD

Travel Spread PSD TemplatesTake your readers to another place with travel spread templates. Show them the beauty of the beach, the wonders of nature, or the excitement of an urban landscape. The compelling layouts here are sure to whet their appetite for adventure.

Clean Travel Magazine Template Photoshop PSD

Elegant Travel Magazine Template Photoshop PSD

Travel Magazine Cover Template Set Photoshop PSD

Travel Magazine Cover Collection Photoshop PSD

Sports Section Photoshop TemplatesSports section templates let you provide a look inside the game. Fill them with action shots from the field or candid athlete profiles. They’re great for sports publications, training facilities, or local recreational leagues.

Sport Magazine Cover Templates Photoshop PSD

Sport Cover Magazine Template Photoshop PSD

News Section PSD TemplatesSpread the news! Newspaper layouts continue to be a great vehicle for storytelling. These mockups allow you to recreate the look and feel of the genuine article. Use them to promote products or make a big announcement.

Tabloid Size Newspaper Mockups Photoshop PSD

Simple Newspaper Mockup Template Photoshop PSD

Minimal Newspaper Mockup Templates Photoshop PSD

Real Newspaper Mockup Template Photoshop PSD

A Great Way to Tell Your StoryMagazine layouts offer a way to showcase your work to jaw-dropping effect. Use big, bold photos and typography to style your product. Or guide readers through an amazing story. There are plenty of possibilities here.

The templates above will provide you with a terrific starting point. You don’t have to create anything from scratch. Instead, you can customize them to match the look and mood you want to achieve.

So, what are you waiting for? Download your favorites above and start experimenting!

The post 30+ Magazine Layout Templates for Photoshop appeared first on Speckyboy Design Magazine.

View Details

Premiere Pro is a powerful video editing application popular with professionals and amateurs for creating high-quality video content. One of the many features that make Premiere Pro universally popular is its ability to import templates to speed up the video creation process.

Premiere Pro templates are pre-designed project files that can be customized to fit the specific needs of your projects. They can include everything from titles and animated transitions to entire sequences, complete with sound effects. They can be an excellent resource for video editors looking to save time and improve the quality of their video content.

In addition to the pre-made templates that come with the software, many third-party templates are also available. These templates have been created by professionals, are often free to download and use, and can be a great way to add professionalism to your video projects.

Whether you’re working on a promotional or instructional video, business presentation, or YouTube video, you will find the free Premiere Pro video template you need below.

If you’re new to Premiere Pro or video editing, you might like to take a look at our collection of tutorials.

View Details

You can use Lightroom Look-Up Tables (LUTs) to improve the look of any photo. They provide an easy way to add all manner of professional effects. They are a must-have addition to every designer’s toolbox.

Today, we’ll introduce you to some fantastic color-grading LUTs for Adobe’s Lightroom. These presets help you tell visual stories by adjusting aspects of your images, such as color, saturation, curves, and white balance. It’s a way to convey emotion, mood, and even time.

Our collection features a variety of color grading options. Use them to depict times of day, seasons, and color temperature, among other unique effects. The possibilities are nearly endless!

You might be surprised at what can be accomplished through these simple add-ons. Not to mention the time you’ll save by not having to edit your images manually.

Ready to get started? Keep reading to find the perfect fit for your visual storytelling project.

You may also like our free collection of Lightroom LUTs.

Warm Tone Lightroom Color Grading Add warmth to your photos with these Lightroom presets. They’re designed to bring out orange, red, and yellow tones. Use them to enhance landscapes and portraits with a sunny glowing effect.

Cool Tone Color Grading for Lightroom Are you looking to add a cool touch to your shots? These LUTs accentuate cool color tones, making your image stand out to a whole new level. They’re perfect for making your subject pop.

Vintage Film Color Grading Presets Quickly add beautiful vintage film effects to your images with this collection. You can use these presets to bring out rich film tones and create a sense of magic. You’ll find everything you need to design a classic look.

Cinematic Lightroom Color Grading This LUT collection offers a variety of cinematic styles. You’ll find presets for different color temperatures and moods. It’s an easy way to add a bit of Hollywood to your work.

Muted Tone Lightroom Color Grading Enhance your lifestyle photography with this set of muted tone presets. They’re great for setting a dark or serious mood. Even better, you can apply these eye-catching looks with a single click.

Rich Color Color Grading for Lightroom Create just the right mood with these LUTs. Inspired by a good cup of coffee, they bring rich, warm tones to photos. The large number of presets will help you find the perfect effect for your project.

Matte Finish Color Grading Lightroom Presets These color-grading LUTs are designed to add cinematic tones to your photographs. Bring out a dramatic matte finish in an instant. You can also adjust these presets to fit your needs.

Pastel Tone Color Grading LUTs Soft pastel tones are great for portrait and landscape photography. They add a gentle touch and create a light mood. This LUT collection will help you add a look that will produce smiles.

Desaturated Lightroom Color Grading Enhance your urban landscapes with this set of desaturated Lightroom LUTs. Use them to create a moody and contemporary look with just a click. You’ll find a variety of presets here to achieve your desired result.

High Contrast Color Grading Presets Nothing stands out more than an image with rich color contrast. These presets will help you create high-end contrast effects with minimal effort. Add them to your collection and bring out the best in your photos.

Golden Hour Color Grading The warm glow of the “golden hour” is a longtime staple of photography. The color-grading LUTs in this pack can help you enhance or even simulate the effect. Best of all, they work well with just about any photograph.

Blue Hour Color Grading for Lightroom Use this collection of presets to add cool blue tones to your photos. They can bring a moody vibe to your landscapes and portraits. The effect is gentle on the eyes and easy to implement.

Sunset Glow Lightroom Color Grading Bring your images to life with a bright, sun-kissed effect. The presets in this collection can enhance even the dullest low-light photos. The gorgeous glow of a sunset is within your reach.

Infrared Color Grading Presets Here’s a fun collection to make your images look otherworldly. Multiple styles are available, each with a unique spin on infrared film effects. Experiment with these presets to discover a whole world of possibilities.

Cross Processed Color Grading Lightroom Presets Ensure your color stands out with this set of cross-processed LUTs. Choose your desired color, and the preset will do the rest. It’s a great way to add a dominant hue to your photos.

Bleach Bypass Color Grading LUTs These LUTs will desaturate your image – resulting in an understated tone. They’re an excellent choice for fashion and landscape photos where a touch of nostalgia is needed. You’ll have professional effects in no time.

Color Pop Lightroom LUTs Add a vibrant touch with these color-popping presets. You can turn your images from dull to vivid with just one click. Use them to create attention-grabbing social media, web, or print photos.

Autumn Color Grading for Lightroom Transform your photos with rich autumn tones that evoke the season’s spirit. Each LUT offers cinematic quality with an array of options to choose from. A simple way to decorate your images for fall!

Spring Color Grading LUTs Think of lush greens, pastel yellows, and bright whites. Bring out these springtime colors with a collection that’s blooming with potential. It’s perfect for outdoor nature shots and portraits.

Summer Color Grading LUTs Turn up the intensity with this collection of summer-themed LUTs. They’re designed to accentuate the rich, warm tones of your photos. Use them to beautify your summer shots without breaking a sweat.

Winter Color Grading LUTs for Lightroom These presets create a sharp and cool style reminiscent of winter. Each option focuses on a different shade, giving you multiple ways to make a statement. Use them on fashion, lifestyle, and outdoor images.

The post 20+ Best Color Grading LUTs for Lightroom appeared first on Speckyboy Design Magazine.

View Details

Everyone loves a retro aesthetic. Pixel fonts offer a great way to add this old-school techno look to your projects. They prompt memories of classic video games, computer systems, and plenty of pop culture references.

They’re also more flexible than you might imagine. App development is a natural fit. Or use them as a headline font for your gaming blog. They also add a touch of fun to print materials, digital artwork, and video presentations.

Pixel fonts also feature a wide range of styles. Like other fonts, you’ll find both serif and sans-serif options. However, there are also different levels of thickness and character spacing. Each brings a unique personality to the table.

In this article, we’ve rounded up over twenty free pixel fonts available for download. Find your favorites, add them to your collection, and bring on the retro vibes!

Lower Pixel Font (Free)Enjoy the fun look of this video game-inspired pixel font. Look closely, and you’ll find a delightful mix of squares and rectangles – just like the arcades and consoles of old. The relatively thin weight also keeps things legible.

Super Pixels Font Here’s a familiar font for fans of a certain classic game series. The package includes a full slate of characters, including punctuation. It’s an excellent choice for adding a bit of nostalgia to your project.

Fight! Pixel Font (Free)Inspired by old-school fighting games, this typeface features an action-packed look. Its bold and italicized text would be great for headlines and banners. Just don’t get too carried away with your street-fighting and knock over a lamp!

Bitroad Edgy Y2K Pixel Font Bitroad is a mashup of styles representing the 1980s and 2000s. The font makes a bold statement while staying easy to read. It includes multiple typestyles and is available in several popular file formats.

Sheko Headline Pixel Font (Free)Bold retro stylings are a hallmark of Sheko. Use it in places where you want to make the most impact. It features tight kerning that’s perfect for headlines and titles.

Go Pixel Font This all-caps pixel font will do wonders for your retro-themed designs. Each character features a variable outline that adds authenticity. It looks great in any size, and its low-contrast style offers a unique touch.

Dotemp 8Bit Pixel Slanted Font (Free)Add some slanted perspective to your project with this 8-bit typeface. Dotemp is a serif font that faithfully recreates the look of classic computing apps. It’s a variable font with regular and pixel styles.

Anti Pixel Font Here’s a font that mixes elements of the old and new. It’s a pixelated font, for sure. However, it’s highly legible and includes some anti-aliasing. This one is a great fit when a more subtle approach to retro is in order.

Handdrawn Pixel Font (Free)Talk about unique, here’s a hand-drawn pixel font. The result is a fun typeface with classic looks and a decidedly modern charm. It also includes plenty of special characters to make it a versatile pick.

Arcade Pixel Travel back to the days when arcades ruled with this classic typeface. You won’t find any fancy effects here. The look is simple – a good representation of what once was. Sometimes, that’s all you need to make a statement.

Retro Pixel Font (Free)Here’s a font with a twist on the pixelated style. It features a rounded look to soften those sharp edges. It’s a nice alternative to the more brutalist options on this list.

Tiny5 Pixel Font (Free)Tiny5 goes all out when it comes to pixelation. The characters are chunky, and the shapes are free of anti-aliasing. There’s simply no compromise. Therefore, reserve this one for use on headlines and banners.

Silver Pixel Font (Free)Silver was built with game developers (and gamers) in mind. The multi-language font includes gamepad buttons with full keyboard and mouse prompts. Use it in your apps to give users an authentic experience.

Thaleah Fat Pixel Font (Free)Be bold and tell a story with this thick pixel font. It’s aimed at game developers but is also a natural fit for website hero areas. It’s another handy choice for your typography toolbox.

Pixelify Sans Font (Free)Pixelify Sans is a no-nonsense typeface that comes in four distinct font weights. That provides more flexibility than your average pixel font. It can be used in both large and small sizes and maintain readability.

Dogica Pixel Font (Free)You may notice that Dogica is easier on the eyes than most pixel fonts. It offers monospaced and kerned versions. Either way, you’re getting a legible font that can be used at the tiniest sizes. That makes it an all-purpose winner.

Silkscreen Pixel Font (Free)Silkscreen is a cross-platform pixel font built for websites and online apps. It’s an all-caps font with extra spacing between characters. It would work beautifully for the text headers on your tech blog.

Smallest Pixel-7 Font (Free)Need a pixel font fit for smaller sizes? This one fits the bill with the ability to stay legible no matter how low you go. You might use it for those little design accents on websites and print documents.

MultiType Pixel Font (Free)Give your projects a subtly pixelated look with this display font. It features a distorted style that will help your designs stand out. It’s proof that pixel fonts don’t have to be harsh.

Pigxel Modern Pixel Font (Free)Here’s a style that looks like it comes from another galaxy. Pigxel brings a lot of curves to the pixel font playbook. Use it to create titles meant to send users far, far away.

NF Pixels (Free)This minimalistic font’s origins can be traced to an iOS pixel art app. Thus, you can be confident in displaying it on any screen. It also includes plenty of symbols for added flexibility.

PICO-8 Pixel Font (Free)PICO-8 is available in several flavors, including monospaced, all-caps, and wide. That makes it a good option for niche use cases. Beyond that, this True-Type font is a fun way to spice up your designs.

Pixel Millennium Font (Free)This pixel font adds extra pizzaz with blocky glyphs and thick sizing. It’s reminiscent of the systems we saw in sci-fi movies from the 1970s and 80s. Perfect for transporting your designs into hyperspace.

Pixel Code Font (Free)Write code the way our ancestors did – with a pixel font! Pixel Code is a monospaced font designed for use in code editors. It aims to maximize readability and includes a complete set of programming ligatures.

Nb Pixel Font Bundle (Free)Here’s a collection of 20 pixel fonts – all with a public domain license. You’ll find a variety of styles to choose from. There are great options for fantasy gamers, along with more conventional typefaces.

The Power of PixelationPixel fonts are one of the more fun typographic categories. You’ll find basic similarities. But the details are often what separates them. The font’s weight, shape, and letter spacing are defining factors. You can use them to create different moods and aesthetics.

So, choose your favorites and create something awesome!

The post 20+ Free Pixel Fonts for Creatives appeared first on Speckyboy Design Magazine.

View Details

We call ourselves web designers and developers. However, the job often goes beyond those narrow margins.

Freelancers and small agencies deal with a range of non-design and coding issues. We become the first person our clients contact when they have a question. It happens – even when we aren’t directly involved with the subject matter.

“I just received this message from Google. What does it mean?“
“Why can’t I receive email from my website?“
“My website was hacked. Help!“

Yes, we are the catch-all technical support representatives. No matter the problem, web designers are the solution. That’s what some clients think, at least.

We’re often the link between clients and technology. And perhaps we shouldn’t try to tackle every problem. But it wouldn’t hurt to brush up on a few non-design technologies.

With that in mind, here are a few areas that web designers should study. You know, just in case.

SEO & Site Indexing BasicsSearch engine optimization (SEO) is a niche unto itself. Some professionals specialize in making sure websites are indexed and rank well.

That doesn’t stop clients from asking their web designer, though. Site owners want to rank highly in Google search results. And they are often in the dark about how to do it.

To that end, it’s worth learning the basics of SEO. Even if the subject makes your skin crawl.

You’ll be able to explain the hows and whys to clients. That will help them make more informed decisions about content. They may decide to jump in feet first with an SEO professional.

Clients will ask you about SEO. A little background knowledge makes you look smart!

SEO Resources* Advanced Technical SEO: A Complete Guide by Search Engine Journal * It’s Time to Get Back to the Basics of SEO by Eric Karkovack * SEO Basics by Yoast * The Beginner’s Guide to SEO by Moz

DNS & Email DeliveryLaunching or moving a website often includes changing a domain’s DNS settings. These settings ensure that the site directs users to the right place.

DNS is much more than that, though. There are also settings for configuring email as well. That has become a hot topic these days.

Email providers are increasingly requiring domain owners to verify their properties. Domains without DKIM, DMARC, or SPF records may have email delivery issues. For example, Gmail blocks email from unauthenticated domains.

What does this have to do with web design? Well, websites with contact forms can fall victim to these issues. The same goes for eCommerce websites. An unauthenticated domain means clients and users will miss these emails.

Now is the time to learn how DNS works. You’ll want to pay special attention to email. Clients without an IT department may need your help ensuring smooth email delivery.

DNS & Email Resources* About SPF records by Google Workspace * What is a DNS DKIM record? by Cloudflare * What Is DMARC? by Proofpoint * What is Email Deliverability? Best Tips & Practices by Lindsay Kolowich Cox

Security for Websites and BeyondWe live in an age of online insecurity. Malicious actors don’t take a minute off. Instead, they continue to wreak havoc.

Sure, we talk about web security quite a bit. And we try our best to build a virtual mote around websites. But websites are still being compromised.

We’re learning that security goes deeper than installing updates or tweaking .htaccess files. The fitness of a user’s device also plays a role.

Stolen session cookies are a prime example. Hackers can grab them off of a compromised device. A “bulletproof” website is no match for a phone with an info stealer installed. They can waltz right in and do whatever they want.

Understanding how device security impacts the web is crucial. It’s something that can benefit us and our clients. After all, a single weak link can break the chain.

Website Security Resources* 5 Things to Tell Your Clients About WordPress Security by Eric Karkovack * How to Scan WordPress for Malware in 4 Easy Steps by Jeremy Holcombe * Introduction to WordPress Security by Wordfence * Security on the Web by MDN * Seven Important Security Headers for Your Website by Jeff Starr

Command Line ToolsSome of us cringe at the mere thought of using a command line tool. Hasn’t that stuff gone the way of the dinosaur?

Nothing could be further from the truth. Command line tools like WordPress CLI remain popular. Why is that? It’s all about power and efficiency.

The command line doesn’t have the overhead of a graphical user interface (GUI). Thus, it handles bulk operations faster. For example, you can perform a search-and-replace operation on a database more quickly.

You can also do a lot of behind-the-scenes work with your web server. The command line may be the only way to run specific tasks.

It’s worth brushing up on command-line operations. They are a huge time saver in the right circumstances.

Command Line Resources* Linux Commands Cheat Sheet by Linux Training Academy * Master the Linux ‘SSH’ Command: A Comprehensive Guide by Peter Hou * The Linux command line for beginners by Ubuntu * WordPress CLI Handbook by WordPress

Become a More Well-Rounded Web DesignerThe skills above are all adjacent to web design. And the need for this knowledge is growing.

Perhaps that has always been the case with SEO. Meanwhile, security and DNS seem to be just about mandatory these days.

Working with clients means you inevitably will face questions about these subjects. Freelancers and small agencies don’t always have an expert within reach. So, it’s up to us to find answers.

The command line is more about adding another tool to your toolbox. The improved efficiency will benefit you. And the result is better service for your clients.

Web designers tend to be specialists. We focus on the front-end or back-end. But the more we know, the more well-rounded we become.

It’s one way to stay on the cutting edge of the industry for years to come.

The post Those Non-Design Technologies Web Designers Need to Know appeared first on Speckyboy Design Magazine.

View Details

Typewriter fonts can bring a unique style to your creative projects. Their worn-out letters and subtle ink blots replicate those characteristics you associate with vintage typing machines. They are great for projects like posters, branding, or invitations that need a vintage aesthetic.

Most of the fonts in this collection have been digitally designed and inspired by classic typewriters. But we have also included some fonts that have been scanned from the typed text of real typewriters and have those original peculiarities like faded ink and uneven keystrokes.

Whether you’re looking for something clean and refined or a more worn, authentic feel, in this collection we share some of the best free typewriter fonts to help give your projects a classic touch.

View Details

Posters are among the most common art forms. You probably had a few of them on your wall as a child. They cover the full spectrum of people, places, and events.

They also serve as an inspiration for web designers. Their use of color and typography is part of how we see the world. We can see the impact all over the web.

What’s more, we can recreate and enhance the experience online. Goodies like 3D effects and animation bring posters to life. There’s also an element of interactivity. That can be just as powerful as a bold layout.

We wanted to see how designers are using their creativity. So, we perused the archives of CodePen for beautiful poster art. Here are some examples that use CSS, JavaScript, and other technologies. Enjoy!

Furiosa 3D Animated CSS Poster by Olivier 3lancTalk about a poster that’s brimming with life! This 3D rendering places the movie’s characters in a cut-out. The entire presentation looks like a diorama. Everything is powered by CSS – no JavaScript in sight.

See the Pen FURIOSA 3D Animated Poster by Olivier 3lanc

Replicating & Animating Zürich Tonhalle’s Poster by Jon YablonskiThis snippet is part of a project that recreates iconic posters. The beauty here is in the minimal layout and bold typography. Animated lines add a modern touch to this classic.

See the Pen Zürich Tonhalle (1955) by Jon Yablonski

CSS Grid Poster Exercise by Victoria BergquistA combination of Flexbox and CSS Grid fuels this example. The variation of shapes would seem nearly impossible to do without these tools. The included splash of color makes for a compelling result.

See the Pen CSS Grid Poster Exercise 1 by Victoria Bergquist

Donkey Kong Poster Collection by Daniel FontesHere’s a fun tribute to the past. Gamers will instantly recognize this series of images from Donkey Kong. The classic video game posters feature a fun lighting feature. Tug on the chain to illuminate your favorite poster. Bonus points for the flicker effect!

See the Pen Donkey Kong – a small poster collection by Daniel Fontes

PPL MVR CSS & SVG Poster Designby Kristopher Van SantBand posters are a common theme among designers. Perhaps that’s because so many of us have them on our walls. This animated sequence takes inspiration from print artwork. And it’s another example of what CSS is capable of.

See the Pen PPL MVR by Kristopher Van Sant

Grid Duotone Gradient Poster Design by Cassie EvansThe power of CSS Grid is real. The poster is beautiful and complex. Most impressively, the styles consist of less than 200 lines. A little code and a lot of imagination can go a long way.

See the Pen Grid Poster by Cassie Evans

Grunge Poster with the Wave Motion Effect by ilithyaWho can resist the retro vibes coming from this poster? It captures the look of the 1990s – complete with raining triangles. Move your cursor to change the perspective of the photo. It’s a far-out experience, for sure.

See the Pen Grunge Poster by ilithya

The Matrix Resurrections Digital Poster by SparklingmanThe Matrix movie series is known for a different kind of rain. This digital poster may appear simple. However, clicking on it shifts the green and black pattern. The effect is subtle – but fits beautifully with the movie’s aesthetic.

See the Pen The Matrix Resurrections | Sparklingman digital poster #026 by Sparklingman

A New Take on a Classic Art FormThe examples above combine classic print sensibilities with online capabilities. It’s a fun exercise that goes beyond what’s hanging on your wall.

We may think of posters as being simplistic. But they also open a world of possibilities for designers. Thus, we can take this inspiration and run with it.

For example, posters may help us rethink traditional web layouts. Elements like vertical text and unique container shapes come to mind. They can serve as a launching pad for ideas.

Want to see more examples of online poster art? Check out our CodePen collection!

The post Beautiful Poster Art Created with CSS & JavaScript appeared first on Speckyboy Design Magazine.

View Details

The early web (we’ll define it as 1995 – 2005) was an adventurous place. The narrative was that anyone could participate in this new medium. Thus, it attracted an eclectic mix of creators.

We tend to look back to these days with some cringe. Yes, the design and technology of that era were lacking. And there were very few standards to speak of. But there were also plenty of positives.

I’m biased – my web design journey began in this era. Therefore, I have a lot of nostalgia. I’ve written about it a time or 10.

But there are things I miss about those days. Practices and ideas that defined the enthusiasm of the time. Things that have long since faded.

As such, here are some parts of the early web I’d like to see come back – even if only for a day!

The Absence of Big DataSo-called big data wasn’t prevalent in the 90s. Google would plant those seeds in the decade. However, the web was yet to be controlled by trackers and algorithms.

Perhaps we didn’t have the same level of personalization. So what? The side benefit was a lack of manipulation.

We still saw this in the early days of Facebook and Twitter. Remember when your feeds were all in real time? It provided a sense of witnessing things as they happened.

Early search engines had similar perks. You were likely served the same results as someone on the other side of the world. Less convenient? Sure. But also less intrusive.

What we see now is ultimately controlled by companies. We don’t necessarily see the best search results. We see whatever Google’s algorithm deems appropriate.

Social media companies make it harder to view your feeds in chronological order. And advertisements are a little too personal, in my opinion.

It’s easy to understand why things have changed. Manipulating users is a profitable business. Plus, advertisers want to target specific audiences.

Still, I miss the days when the web had more randomness. Stumbling upon something new seems like a lost art.

The Simplicity of Website Design & Structure“Things were simpler back then.” That’s a common refrain when adults talk about their childhood. I think it also applies to web design and structure.

There’s a good reason for that simplicity. HTML was basic. CSS didn’t even exist for part of this time. And there was only so much we could do with the day’s technology.

I can’t deny the prevalence of poor design. Web design was new. We were all amateurs in a sense. I played a role in making the place a bit unruly!

Even so, the limitations were often a good thing. The dangers of overcomplicating things became apparent. Designers eventually learned that simplicity was better for everyone.

On the other hand, we had very few standards or best practices. Things like performance, security, and accessibility received little consideration.

Today, we tend to overcomplicate things as a default. We use heavy content management systems (CMS) for brochure sites. We make a mess of security. And we use DIY tools without much thought about portability or ownership.

Perhaps the good parts of modern design can stay. But how about a resurgence of simplicity?

The Impact of the Solo EntrepreneurEntrepreneurship is still possible on the web. It’s the idea that an individual can make an impact with their creativity. That could be a product, service, or even great content.

I think it has become harder for individuals to succeed, though. There are too many mountains to climb.

Those algorithms make it harder to gain visibility. And there are so many people (and bots) competing for attention.

Not to say it was easy back in the day. But originality tended to shine through. Oddities like the Million Dollar Homepage are a prime example.

Early bloggers also had an opportunity to find a core audience. They built niche online communities dedicated to a shared interest.

Tools like WordPress make it easier to self-publish content. But reaching people has become a full-time job. Creators must often rely on sponsors and product placement to gain traction.

It used to be possible for content to spread organically. Search engines weren’t prioritizing big sites over small ones. Thus, anyone had a shot to be seen by potential followers.

What started as a side gig could turn into something more. That’s still possible in theory.

YouTube and TikTok are the flavors of the minute for this. But they are walled gardens. Doing something similar on an open platform is daunting.

The Freedom to Create and ConnectI love to think of the early web as uncharted territory. We couldn’t look to the past when populating this new medium. So, we made it up as we went along.

There were positives and negatives about this. Even then, some used the web for nefarious purposes. But they seemed like dark corners that were avoidable.

The bigger picture was all about freedom. Anyone could create and publish content. And the web would be a vehicle to make positive connections with others.

There was talk of the great potential it held for society. People without a voice suddenly gained one.

The biggest impediment at the time was access to technology. But that could be resolved through cheaper devices and widespread internet. The sky was the limit.

I believed in the web as a change agent. And that the world would be better for these newfound connections.

We haven’t quite gotten there. Repressive regimes have stifled free speech. Bot farms spread misinformation and create division. Large corporations make the rules with little oversight.

The web didn’t become a whole new world. It instead became a reflection of the one we already had.

Say it isn’t so, Tim Berners-Lee.

Letting the Past Guide UsHere’s the good news: We now have a past era to look to. We can use it as a guide when building the web’s future.

I don’t expect Google, Facebook, or Twitter/X to change their ways. Not without the mandate of a governing body. But we also don’t have to follow their lead.

Those of us who build and publish can keep the ideals of the early web alive. Think of them as small pockets of resistance.

How do we do it? We can start by embracing open tools and platforms. Use a browser that focuses on user privacy. Publish with a CMS that gives you ownership. Support decentralized systems like the Fediverse.

Most of all, pass these lessons to the next generation. They haven’t experienced a truly open web. Show them why it’s worth having.

Perhaps the web was bound to be changed for the worse. But we can still use our little corner of it as a beacon of light.

The post Aspects of the Early Web I’d Like to See Come Back appeared first on Speckyboy Design Magazine.

View Details

We know the importance of website performance and accessibility. Or at least we should. There’s no shortage of content dedicated to these subjects.

That creates awareness. Hopefully, awareness leads to learning. And learning leads to implementing best practices. There, we’ve made the web a better place!

Not so fast. There’s one factor the tutorials didn’t warn us about – clients. Yes, a client can lay waste to our plans for a fast and accessible site.

The question is: why? Why would a website owner get in the way of progress? Why would they insist on features that diminish the user experience?

There are a few possibilities. Let’s look at some common conflicts and ways to resolve them.

A Desire to Impress UsersFirst, let’s state the obvious. Our clients’ hearts are in the right place. They want a successful outcome as much as we do.

Clients also want to impress users. Sometimes, this puts them at odds with best practices.

The use of massive images is one example. Full-screen photos can be attractive. However, they also bog down page loads. An HD or (gasp!) 4k image is like strapping an anvil to a slow internet connection.

Sliders can produce even worse results. Sure, let’s add a few hundred kilobytes of JavaScript. What could go wrong?

People think that these features will promote conversions. The page will be so attractive that users can’t help but click that call to action. Websites used Flash intros for the same purpose back in the day.

They have good intentions. They may be looking in the wrong place, though.

The Belief That Competitors & Peers Are RightCompetition is a great motivator. So is the status of one’s peers. Both make us want to keep pace with those around us.

It’s a common theme when building a website. Web designers can fall for it as much as clients. You see something shiny and want to replicate it.

Perhaps the company across town uses a video background on every page. It may look cool. But is it the right thing to do?

Clients don’t want to be outclassed by someone in the same industry. They may not consider the consequences of adding such a feature.

A client may also fear that they’ll look bad to potential customers. As in:

“Company A has this feature on their website. They’re clearly superior to Company B.”

The reality may be different. The web’s novelty wore off many years ago. Looks are important. But so is usability. And what good is a video background for someone using assistive technology or a cheap mobile device?

That Their Preferences Are All That MattersAs the saying goes, “The heart wants what it wants.” We can say the same thing about our clients.

A client can become an immovable object when it comes to design. They’ll insist on an inaccessible color scheme. Or a font that is difficult to read.

Some won’t sign off on a design unless it includes all their demands. They’re the customer, after all. And they’re always right.

This thinking also impacts existing websites. A client might want to change a hero section. The reason? They’re sick of looking at the same thing every day.

It may make sense to them. However, they’re once again ignoring users. You know, the people they’re trying to serve.

Change for the sake of change could be a negative. It could confuse visitors and lower conversion rates.

Not everyone can see the bigger picture.

How to Help Your Clients See the LightYes, all of the above can be frustrating. There’s no need to lose all hope, though. A good conversation or two can make a difference.

Here are a few pointers for discussing performance and accessibility concerns.

Give an Honest Assessment of Your ConcernsThe first step is to provide an honest assessment. Point out the potential problems you foresee.

From there, it’s about explaining each item of concern. Lay out the benefits and drawbacks. Give examples of how a feature impacts users.

For example, a slider could make site navigation more difficult for a visually impaired person. Your client may not have considered this possibility.

Clients will most often do the right thing in these situations. Being informed could be all it takes.

Offer Better AlternativesIt’s one thing to argue against a client’s idea. But what should they be doing instead?

Our job isn’t to merely dismiss a feature. We should also offer an alternative or two. Things that provide a similar effect – but without the hit to performance and accessibility.

We could suggest a hero area instead of a slider. It will grab a user’s attention while reducing load times. Perhaps it features a background pattern or a photograph that’s optimized. It stays on brand but doesn’t hinder usability.

It’s one way to guide a client toward better solutions. The idea is to improve the product and strengthen communication.

Be PatientClients aren’t always receptive to our ideas. We can warn them about the impact of a feature. But they sometimes need to see the results for themselves.

They might notice an issue when the feature launches. Or they may get complaints from other users. The shortcomings will become apparent either way. Or not.

We’ll need to be patient and bide our time. We can hold out hope that they’ll see things our way, eventually.

Educate & Encourage Good ChoicesThere will always be some give and take when working with clients. That’s part of the design and build processes. Web designers must balance client preferences with user needs.

Accessibility should be non-negotiable. It’s worth fighting tooth and nail for. If a client insists on something that goes against this pillar – the consequences are on them.

Performance offers more wiggle room. Odds are the result won’t be perfect. However, it’s our job to make the best of any situation.

Education is a valuable tool for web designers, though. We can help clients understand why these subjects are worth their investment. That can lead them to make better choices.

The benefits of performance and accessibility aren’t apparent to everyone. Thankfully, we have the power to change that.

The post How Client Requests Can Undermine Web Performance & Accessibility appeared first on Speckyboy Design Magazine.

View Details

Tech companies are baking AI into everything these days. It seems like you can’t avoid a heaping helping of bots and large language models (LLMs). I think I ingested some in my breakfast cereal this morning.

Thus, it’s no surprise that search engines have become best pals with AI. Google and Bing are joyfully adding it to their results. These generated answers are the first thing you see for some queries.

Both companies have a stake in the technology. Google’s Gemini and Microsoft’s Copilot will be keys to their future success. We’ll continue to see these tools added to flagship products.

The early results have been interesting – and perhaps a bit unsettling. For example, AI has recommended that we put glue on pizza. It has also displayed plagiarized content above the original works.

It’s just a reminder that no technology is perfect. And AI is still in its infancy. But there’s more to it. The relationship between AI and search represents a fundamental shift. I’m not so sure I like it. Here’s a look at why.

The Shift to Becoming an Answer EngineThe way search engines work has evolved. In the early days, it was all about matching the keywords used in a query.

That’s why keyword-stuffing and other nefarious SEO techniques worked. Search engines were looking for exact (or fuzzy) matches of keywords. It led to less-than-ideal results. Spammers were great at gaming this system.

Modern search now considers context. It combines content and structured data to determine results. That’s why we can search for “pizza shops near me” and get local results.

As always, these services pick winners. The top results favor sites that match the search engine’s indexing criteria and algorithm. The algorithms are mysterious to us mortals – but fair enough.

So, how does the current use of AI impact this process? For one, it attempts to provide us with a definitive answer.

Let’s forget about accuracy for a moment. Displaying this information first lends confidence to the answer. If it’s first, it must be right – right? Maybe we can skip all the results down the page.

We are no longer encouraged to look for the result that fits our needs. We are instead fed an answer – potentially discouraging us from digging deeper.

The Cost of AI-generated AnswersPerhaps the convenience of an AI-generated answer is favorable. But it also comes with some costs.

Website owners could see a drop in traffic. They already had to contend with sponsors clogging up the top portion of the results page. AI answers are just one more thing to hamper their visibility.

The other elephant in the room is that AI scrapes content from all over the web. The benefits for site owners are questionable at best.

A site that feeds the top result could see some extra clicks. Newfangled services like Perplexity are even offering to pay publishers. However, you might have better odds of winning the lottery than securing this arrangement.

We should also dive back into AI’s potential to discourage further research. Some users may accept that first answer and not bother to think twice.

Maybe this doesn’t impact longtime users. I’m used to scrolling through search results and clicking multiple links. I don’t foresee AI changing my behavior.

But what about younger generations? AI will be just the way things work for them. They may not realize that there’s more information available. After all, Google has already given them the “best” answer.

Here’s where accuracy comes into the picture. There are times when search engines will get it wrong. That seems like an unavoidable situation.

Users who aren’t familiar with researching answers will be misinformed. That could be dangerous, depending on the subject.

Most people won’t put glue on their pizza. But this type of “advice” could be taken seriously by someone. And that has real consequences.

Is This the End of Search as We Knew It?I believe the relationship between search and AI is a long-term one. Companies like Google and Microsoft aren’t spending truckloads of money for nothing. Well, sometimes they do. But I digress.

The current phase is an experimental one. Search providers are trying to figure out where AI fits in. And, oh yeah, they want to monetize it.

There’s been some backlash at the technology’s integration so far. That has led to adjustments. It’s a matter of finding what users will and won’t tolerate.

Regardless, searching the web is going to look quite different. Sponsored and AI-generated results will continue to push organic results down the page. Large websites will rank higher than small ones.

Search is a pay-to-play proposition these days. AI is only going to amplify this practice.

That changes how we search as consumers. We may need to scroll past a lot of nonsense to find what we came for.

It might also change our expectations as website owners. That free traffic we’ve optimized for may not be as plentiful. We’ll have to adjust accordingly.

What Will the Future Bring?Search is another area where web designers and marketers will feel the impact of the move toward AI. The techniques that previously performed well for us may be obsolete.

SEO will still be a worthwhile endeavor, though. Getting your websites indexed shouldn’t go out of style anytime soon.

However, using SEO as a primary marketing strategy doesn’t seem sustainable. Unless your clients are large or in a unique niche, you may struggle to make headway without paid promotion.

Such is life on the web. We can never get too comfortable! Search engines are just another in a long line of seismic shifts.

The post AI in Search? The Grumpy Designer Isn’t Impressed So Far appeared first on Speckyboy Design Magazine.

View Details

Video editing for YouTube has progressed far beyond the early days of simple home videos. The platform now demands content that is polished, engaging, and professional. Achieving this standard requires a blend of creativity, skill, and the right tools.

For video editors looking to improve their YouTube content, Premiere Pro templates offer a practical solution. They provide ready-made assets that save both time and effort while raising the standard of your videos.

This collection focuses on the best Premiere Pro templates for creating professional YouTube content. They will all help simplify the editing process and improve your channel’s overall production quality.

Whether you’re producing tutorials, product reviews, or promotional content, these templates offer a range of options that will improve your YouTube channel’s content and presentation.

If you’re new to Premiere Pro, you might also like to take a look at our collection of tutorials for beginners.

YouTube Intro & Outro Premiere Pro TemplatesThese intro and outro Premiere Pro templates allow you to create strong openings and closings for your YouTube videos, helping your content leave a lasting impression on your audience.

YouTube Blog Intro Premiere Pro Template With a modern, artistic touch, this Premiere Pro template adds creativity and dynamic flair to your content, making it perfect for launching a new YouTube channel. This template streamlines video editing, ensuring eye-catching and colorful intros that set the stage for your success.

Creative YouTube Intro Premiere Pro Template This colorful, modern Premiere Pro template includes seven unique scenes with easy media replacement. Its bold typography and dynamic animations make it an excellent choice for creating a striking introduction for your YouTube channel.

Quick & Dirty Premiere Pro Opener Templates With bold, oversized typography and vibrant colors with tinted backgrounds, this Premiere Pro template delivers a fast-paced, striking opener. This template will bring energy and boldness to your YouTube content.

YouTube & Social Media Intro Template With vivid colors, bold typography, and rapid animations, this template is ideal for vlogs and social media content. It includes 11 text layers and three image placeholders in full HD.

YouTube Lower Thirds Premiere Pro TemplatesThese lower thirds templates allow you to display essential information, such as names, titles, or further information, adding a touch of professionalism to your YouTube videos.

Minimal Lower Thirds Premiere Pro Templates This Premiere Pro lower thirds template features a minimalistic design with a duotone color scheme and bold sans-serif typography. It will add a clean, modern touch to your YouTube content.

YouTube Channel Pack for Premiere Pro This Premiere Pro template pack is designed for video editors preparing to launch a new YouTube channel. It includes all the essentials for a polished and stylish debut.

100 Lower Thirds Video Templates for Premiere Pro This set of 100 lower thirds templates is ideal for YouTube content creators. They are easy to use, offering precise control over time duration and smooth animations. With 4K resolution, these Premiere Pro templates will give your videos a polished and professional look.

Premiere Pro YouTube Starter Pack This YouTube Premiere Pro toolkit is for video editors who are launching new YouTube channels. It includes elements like lower thirds, buttons, slide frames, subscribe panels, and more.

Lower Thirds X for Premiere Pro The Lower Thirds X Premiere Pro template will add modern elegance to your video content. With a sleek duotone color scheme, smooth animations, and minimal design, it will help improve the professionalism of your YouTube videos.

Social Media Lower Thirds for Premiere Pro These clean and simple lower thirds templates will bring a polished touch to your video content. With five elegant options, they will significantly improve your social media presence and provide an engaging aesthetic for your YouTube channel.

YouTube Titles for Premiere ProThese title templates create clear and informative text overlays, capturing your audience’s attention and allowing you to deliver key messages.

YouTube Title & Logo Template Pack This Premiere Pro template collection includes over 40 logo reveals and 12 stylish title templates to boost your YouTube channel’s visual identity. This pack is perfect for establishing a strong brand presence.

Animated Titles Templates for Premiere Pro These clean and simple title templates bring a professional touch to your channel. The seamless animations add to the quality of your content, helping to make your YouTube channel debut memorable.

Modern Premiere Pro Titles Pack This Premiere Pro pack offers clean, simple titles with seamless animations, perfect for professional video content. These titles will help you engage your audience right from the beginning!

Premiere Pro Transition Pack for YouTube ChannelsWith these transition templates, you can add a polished touch to your YouTube videos, making scene changes smooth while maintaining viewer interest.

YouTube Wipe & Light Transitions for Premiere Pro This Premiere Pro transition package includes over 300 dynamic options. Easily applied with a few clicks and adaptable to any aspect ratio, these transitions include zoom, spin, panoramic effects, and more.

Modular Animation Presets for Premiere Pro This collection of over 150 modular animation presets includes stylized effects, logo reveals, transitions, text boxes, and titles. This Premiere Pro pack is perfect for creating simple animations for your YouTube channel.

The Most Useful Transitions Pack for Premiere Pro This comprehensive Premiere Pro collection provides a toolkit for animated transitions, including motion, zoom, glitch, and light effects. Designed to improve your YouTube channel’s flow and presentation, these seamless transitions will help improve and maintain viewer engagement.

Stylish Transitions for Premiere Pro This small pack of user-friendly transitions is perfect for lightweight slideshows and titles. They offer smooth, seamless transitions that improve the flow of your video content.

YouTube Color Grading Presets for Premiere ProThese color grading presets adjust the colors and tones of your YouTube videos, helping you achieve the right mood and style for your audience.

Cinematic Color Presets for Premiere Pro This preset pack offers over 1,000 options for achieving a cinematic look in your videos. With twelve organized categories, it’s simple to find the right effect for your footage. It also allows you to easily add stylish color grading that matches your video type.

Ultra Color LUTs Pack for Premiere Pro Quickly transform your video content with the Ultra Color LUTs pack for Premiere Pro. Offering quick previews, real-time rendering, and compatibility with any resolution, this pack includes presets across ten categories, allowing you to quickly achieve a cinematic aesthetic.

Social Media Promo Templates for Premiere ProThese Premiere Pro templates can help you create effective social media promos. They will help streamline the process of sharing and marketing your video content on YouTube and across other platforms.

Trendy Art Social Media Promo Premiere Pro Templates Improve your social media presence with this 4K promo template for Premiere Pro. Create stylish videos with artistic backgrounds and bold lettering.

Social Media Agency Promo Premiere Pro Template This Premiere Pro social media template perfectly blends simplicity and sophistication. It was created by professionals and offers a clean and elegant look that’s easy to customize. Just insert your image or video, and add your text and audio for a polished result.

YouTube Motion Graphics for Premiere ProThese Premiere Pro motion graphics will add animations and dynamic elements to your YouTube videos, helping to increase their overall impact.

Modern Motion Broadcast Package for Premiere Pro This Premiere Pro broadcast package simplifies updating your YouTube video content. Insert your video or photo, edit the text, and tweak the settings, and you will quickly have a modern design that greatly improves your channel’s aesthetic.

Frequently Asked Questions (FAQs) What are Premiere Pro templates?Templates are pre-designed files that streamline the editing process by providing ready-made animations, titles, transitions, and more tailored for use in Premiere Pro. * How do I install a Premiere Pro template?Simply download the template file, import it into your Premiere Pro project, and drag it onto your timeline. The process may vary slightly depending on the template format. * Can these templates be customized for my YouTube channel?Yes, most Premiere Pro templates offer customization options. You can adjust colors, text, timing, and other elements to match your channel’s specific branding or style preferences. * Will these templates work with any version of Premiere Pro?Templates are generally designed for specific versions of Premiere Pro. Check the template details to confirm compatibility with your version of the software. * How do I choose the right template for my YouTube channel?*Select a template or package that fits your channel’s branding and content style. When making your choice, consider the tone of your videos and the message you intend to communicate. ConclusionThese Premiere Pro templates simplify the editing process, allowing you to focus on creating great content without getting caught up in the technical or design aspects of creating videos for YouTube.

Choosing the right template can greatly improve your video content, allowing you to align it with your branding and style. Consider the purpose of your video, your channel’s identity, and the look you want to achieve.

Whether you’re starting a new channel or refining an existing one, the Premiere Pro templates here will help you achieve that polished and professional presence your channel deserves on YouTube.

Build your brand, and set yourself apart in the competitive space of YouTube content!

The post 20+ Best YouTube Channel Premiere Pro Templates appeared first on Speckyboy Design Magazine.

View Details

The web is a 24/7 medium. But web designers have office hours. That leaves a gap in technical support coverage. What happens if your client has a question about WordPress in the middle of the night?

All jokes aside, client needs won’t always sync with your schedule. And we’ll guess that you don’t want to answer panicked emails during dinner. So, what’s the solution?

Providing clients with resources can help. You can create content that can be accessed whenever they have a question. It’s handy and saves everyone time.

Clients will also learn to help themselves. They’ll feel more confident when working with their website.

Does that sound like paradise? Keep reading for ideas on helping clients – even when you’re not around.

Help Clients Resolve Common IssuesDo you find yourself answering the same questions again and again? That’s because clients often run into similar roadblocks.

You may notice this when building multiple websites with the same content management system (CMS). Or when using the same themes and plugins. Patterns emerge. You’ll discover the pain points clients face.

It’s worth keeping track of these issues. From there, you can write documentation that clients can reference.

You can start small. Even a FAQ (frequently asked questions) page can do the trick. That’s fine if demand is low and the questions are simple.

If your needs change, you might consider building a dedicated support site. For example, a knowledgebase that lets clients browse various topics. It’s something you can add to as needed.

Hint: Be sure to use a system that is easy to maintain. That way, you’ll be more likely to keep your documentation updated.

Use Video to Demonstrate TasksVideo is a powerful tool. A well-made presentation can take the guesswork out of a tutorial. Users can see exactly how to perform a given task.

Thankfully, it’s easier than ever to create video tutorials. A wide range of tools are available. And you don’t need to spend a fortune to get started.

At a minimum, you’ll need a microphone and a screen capture app. That will allow you to narrate as you perform tasks on the screen. You’re all set if your device already has a microphone. And there are free screen capture apps available.

What about quality? Well, it depends on your audience. You certainly don’t need a pro-level production for a quick tutorial. You should be fine as long as the audio and video are clear.

You may want to kick things up a notch if you plan to make them publicly available. Anything you want to promote should look professional. In that case, you might want to invest in attractive video templates.

Otherwise, a 30-second video can often outshine a text-based tutorial. Clients will appreciate your effort and likely learn more in the process.

The Potential of AI in Customer SupportCompanies are integrating artificial intelligence (AI) into all sorts of tools. Customer support is no exception. So, how does that impact web designers?

We’re already seeing AI deployed in chatbot applications. That allows users to ask questions in plain language. The bot provides an answer.

That part isn’t new. Similar tools have been around for years. However, they haven’t always been very accurate. The user experience has also been less-than-stellar.

AI has the potential to produce better results. A model trained on your documentation could give more accurate answers. It might transform a chatbot from a dreaded interaction to a positive one.

It’s worth noting that these solutions depend on the quality of your documentation. The more thorough your content, the higher the quality of the results.

We might also use AI within a CMS like WordPress. The tool could provide support based on what the user is doing. Users could resolve issues without having to leave their site. It might be a game-changer.

We’re in the early days of AI. Thus, it will be interesting to see how it evolves regarding support.

Add an Extra Hand to Better Serve ClientsModern websites can do more than ever. And client expectations have increased as well. That means more support requests.

The reality is that we can’t be there to respond at all hours of the day. So, providing helpful resources is one way to resolve common issues.

The self-serve ideas above could reduce the time you spend helping clients. That’s time you can dedicate to more profitable areas of your business.

You’ll also avoid the stress of dealing with these issues after hours. An extra evening or two of relaxation is worth the investment.

Take time to review your support workflow. Then, create content to help clients help themselves. You’ll be glad you did!

The post How to Help Your Web Design Clients Without Being There appeared first on Speckyboy Design Magazine.

View Details

Brand guidelines are crucial for maintaining consistency and professionalism in a company’s visual identity. They provide detailed instructions on using logos, color schemes, typography, and many more details.

There are a number of free templates available for InDesign that can help simplify the creation of guidelines, making the process much more efficient and accessible. And that is what we have for you here.

Each InDesign template has been designed to meet various branding needs, offering practical solutions for creating comprehensive, polished, and professional brand documentation.

You might also like our collection of branding mockup templates.

The post 15+ Free Branding Identity Templates for InDesign appeared first on Speckyboy Design Magazine.

View Details

User interfaces (UIs) that measure progress are helpful. They offer visual confirmation when completing various tasks, so users don’t have to guess how far they are into a process.

We see these UIs on our devices. Anyone who’s performed an update on their computer or phone will be familiar with them. Thus, it’s easy to take their design for granted.

However, we’re starting to see more creative implementations. And the web has become a driving force. Designers are using CSS and JavaScript to make progress UIs fun and informative. By adding quirky animations and other visuals, we’re well beyond the standard progress bar.

Here are eight progress bars and UIs that have something unique to offer. You might be surprised at how far these elements have come.

Animated Semi-Circular Progress Bar Chart Using SVG by Andrew SimsWe don’t always measure progress in a straight line. You can also use shapes like this beautiful semicircle. The snippet uses ProgressBar.js and SVG to create an attractive presentation.

See the Pen Animated semicircular progress bar chart using SVG by Andrew Sims

CSS Animated Download & Progress Animation by Aaron IkerUsers spend a lot of time downloading files. Progress meters keep them abreast of their status. We love that this example keeps things simple. A single button houses all the information users need.

See the Pen Download progress animation by Aaron Iker

Progress Bar Animation by Eva WythienWho says progress bars have to be boring? Here’s a look at how creativity can spice things up. CSS keyframe animations, patterns, and gradients add fun to the mix.

See the Pen Progress bar animation by Eva Wythien

CSS & JavaScript Progress Clock by Jon KantnerTime is another way to measure progress, and this clock does so in a unique way. Hover on the date, hours, minutes, and seconds to focus on their meters. The effect takes a complex UI and breaks it into bite-sized chunks.

See the Pen Progress Clock by Jon Kantner

CSS-Only Order Process Steps by Jamie CoulterHere’s a fun way to show users the steps in an eCommerce process. Clicking on a step reveals more details. Notice how the box icon changes along the way. This UI demonstrates progress and doubles as an onboarding component.

See the Pen CSS only order process steps by Jamie Coulter

Screen Wraparound Progress Bar by Thomas VaethProgress UIs can also be scroll-based. In this case, a colored bar wraps around the viewport as you scroll. The effect goes in reverse as you move back to the top. Perhaps this example isn’t a fit for every use case. But it could be a companion to a storytelling website.

See the Pen Wraparound Progress Bar by Thomas Vaeth

Responsive Circle Progress Bar by Tigran SargsyanThis snippet uses an HTML range input that syncs with a circular progress UI. The shape makes this one stand out. But so does the color-changing effect. As the slider value changes, so do the colors.

See the Pen Circle progress by Tigran Sargsyan

Rotating 3d Progress Bar by AmitHere’s something different. These rotating 3D progress bars provide a futuristic look. That aside, they were built entirely with CSS, and they’re sure to draw attention.

See the Pen 3d progress bar v2 by Amit

Better Progress Through CodeThere’s no reason to settle for an old-school progress UI. It’s now possible to create something that matches your desired aesthetic. And best of all, you don’t need a lot of complex code or imagery. Make these elements as simple or complex as you like.

The examples above demonstrate a wide range of possibilities. But they’re only scratching the surface. Combine CSS, JavaScript, and imagination to build a distinct look and feel.

Are you looking for more progress UI examples? You’ll want to check out our CodePen collection!

The post 8 CSS & JavaScript Snippets for Creating Animated Progress Bars appeared first on Speckyboy Design Magazine.

View Details

One of the most important aspects of digital art is the selection of color. Color can transform a piece, set the tone, and create harmony. Color choice is not just about aesthetics but also about improving your artwork’s overall composition and cohesion.

Installing and creating custom color schemes in Procreate is easy. You can import swatches from various sources (like the ones below) or create palettes directly within the app. Procreate’s intuitive color wheel and palettes allow for quick adjustments and seamless integration into your workflow, making it easy to experiment and find the perfect color scheme for your projects.

This collection has some of the best free color schemes and swatches available for Procreate. These curated palettes are designed to simplify your color selection process and give you the tools you need to create professional-grade digital artwork.

Whether aiming for vibrant contrasts or subtle harmonies, these free color resources offer valuable inspiration that will help improve your digital creations in Procreate.

If you’re new to Procreate, you might like to take a look at this collection of tutorials. And if you’re looking for brushes, you will love our collection of free Procreate brush sets.

-->The Top Color Schemes for ProcreateProcreate Color Swatches for Painting & Drawing (37 Palettes, Free)This download includes over 35 color schemes. The free palettes offer vibrant hues for cartoon characters, dramatic contrasts for action-packed comic scenes, and delicate tones for expressive manga illustrations.

2024 Colors of the Year Procreate Palettes This small Procreate download includes two swatches inspired by Peach Fuzz, the 2024 color of the year. Perfect for creating warm, inviting designs with a contemporary twist. These color schemes will bring freshness and energy to your art.

Lipstick & Ice Cream Procreate Color Palettes (4 Palettes, Free)This collection includes four unique color schemes: Vintage Pastel, Lipstick Colors, Enchanted Woods, and Ice Cream Colors. They are perfect for creating nostalgic designs, fashion illustrations, and playful artwork. In addition to the swatches, you will also get free PNG images.

Synthwave Procreate Color Palette & Swatches (3 Palettes)This small collection of three color schemes has been inspired by retro 80s Synthwave designs. They are perfect for creating vibrant, neon artwork and retro-futuristic digital illustrations, as well as projects that need a nostalgic feel.

Landscape Color Palettes for Procreate (10 Palettes, Free)This collection includes ten color schemes designed for landscape digital art. These free palettes are perfect for creating natural environments, from lush forests to serene deserts, offering a variety of hues for different scenic creations.

Sunflower Fields Procreate Color Palette (Free)This free Procreate color scheme has been inspired by sunflower fields in the summer. Use these vibrant yellows and greens to create bright, cheerful digital art.

Color Palette Collection for Procreate (234 Palettes)This extensive Prcreate collection includes over 200 palettes and over 7,000 colors, covering a wide range of digital art styles. Ideal for any creative project, these swatches provide numerous options for all your artistic needs.

Skin Tones Procreate Color Palette (Free)This Procreate color scheme includes 30 skin tones. This swatch covers a broad range of shades, perfect for portrait and character design, allowing you to paint realistic and varied human figures.

Chase The Stars Procreate Color Swatch & Palette (Free)The free Chase The Stars color scheme aims to capture the beauty of the sky with bright pinks, deep purples, and other celestial hues. It is perfect for creating atmospheric sky-themed digital artwork.

Bright Candy Procreate Color Palette This Procreate color scheme has been inspired by the bright colors of candy. Use the vibrant hues to create playful designs. It is perfect for illustrations that need a fun and energetic touch.

Various Procreate Color Palettes (6 Palettes, Free)This collection includes six Procreate color schemes: Mutemath, Sweetheart, Cold Winter Air, Botanical Romance, Blinded by the Light, and In the Bubble. These schemes are great for creating diverse themes, from soft and romantic to bright and vibrant digital art.

Christmas Mood Procreate Color Palettes & Swatches This collection includes seven Procreate color schemes: Cozy Christmas, Evergreen, Traditional Christmas, Christmas Mood, New Year Evening, Warm Wishes, and Golden Christmas. These schemes are perfect for creating festive holiday designs and art.

Procreate Color Palette Collection (200+ Palettes, Free)This collection includes over 200 Procreate color palettes covering landscapes, still life, portraits, skin tones, metallics, manga, Pantone, pop art, art deco, impressionism, and more. They’re great for various digital art styles.

Valentine’s Day Procreate Color Palettes This Procreate color palette is perfect for Valentine’s Day artwork and designs. With these carefully selected colors, you can create romantic art that is excellent for cards and illustrations.

Trick or Treat Halloween Procreate Color Palette (Free)Entitled Trick or Treat, this free Procreate color scheme is inspired by Halloween. Use these spooky hues to create eerie Halloween-themed designs and illustrations.

Light Pastel Procreate Color Palette & Swatch This Procreate color scheme of light pastels offers soft, gentle hues. It is ideal for creating delicate, soothing designs, and is perfect for backgrounds, portraits, and minimalist artwork.

Seasonal Color Schemes for Procreate (4 Palettes, Free)This collection includes four seasonal color palettes for Procreate: Snowy Landscape, New Year’s Fireworks, Christmas Art, and Autumn Palette. Each palette offers unique schemes for creating seasonal and festive artwork.

Gorgeous Procreate Color Palettes (4 Palettes, Free)This collection includes four free color palettes for Procreate: Bouquet, Sunset, Coral, and Landscape. They offer a range of colors for floral designs, dramatic skies, ocean themes, and natural scenes.

Artist’s Favorite Procreate Color Palettes (20 Palettes, Free)This free Procreate collection includes the favorite color schemes from 20 popular and talented digital artists. They offer a variety of expertly chosen palettes to inspire and bring something new to your digital art projects.

Autumn Inspired Procreate Color Palette (Free)This free Procreate color scheme, Autumn Allure, is perfect for warm, fall-inspired digital art. Use the rich, seasonal colors to create autumn-themed designs.

Neon Lights Color Palette for Procreate (Free)This free Procreate color palette, inspired by bright neon lights, is perfect for creating vibrant digital art. A Photoshop version is also available.

How to Install & Create Color Schemes in ProcreateInstalling Color Schemes:

Download the Swatches: First, find and download the swatch file (.swatches) you want to use from above.
Import Swatches into Procreate: Open Procreate and navigate to the color panel by tapping the color circle at the top-right of the screen. In the color panel, go to the Palettes tab. Tap the + icon to add a new palette, then select New from File. Locate the downloaded swatch file on your device and tap on it to import the swatches into Procreate.
Good to go: Your color palette is ready to use!

Creating Custom Color Schemes:

Open the Color Panel: In Procreate, open the color panel by clicking on the color circle at the top-right corner.
Select the Palettes Tab: Within the color panel, switch to the Palettes tab to manage your color schemes.
Create a New Palette: Tap the + icon and choose Create New Palette from the options. This will generate an empty palette ready for customization.
Add Colors to the Palette: Use the color wheel or sliders to select a color that fits your scheme. Tap on an empty square within your new palette to save the color. Repeat this process to add additional colors, building your custom palette.
Organize and Name the Palette: To make the palette easier to identify, tap on its title to rename it. You can also drag and drop colors within the palette to organize them according to your preferences.

Procreate Color Scheme FAQs What are Procreate color schemes and swatches?They are predefined sets of colors designed to work well together, while swatches are individual color samples within these schemes. They help maintain consistency and harmony in your artwork. * Are these color swatches compatible with all versions of Procreate?These color swatches are compatible with the latest versions of Procreate, but always check the source for specific compatibility details. * How many colors can a single Procreate palette hold? A single Procreate palette can hold up to 30 colors, giving ample room for a wide range of hues. * Can I organize my color palettes in Procreate? You can manage your palettes by dragging and dropping them within the Palettes tab. You can also rename them for better identification. * Can I share my custom palettes with others? Yes, you can share your custom palettes by exporting them. Go to the Palettes tab, swipe left on the palette you want to share, and select Share. * Can I edit imported swatches in Procreate?* Yes, you can edit imported swatches. Open the palette, select a color, and use the color wheel or sliders to make adjustments. Save the changes by tapping on the palette again. ConclusionThese curated color schemes and swatches for Procreate offer numerous benefits by simplifying your design process and improving the visual quality of your digital artwork.

These palettes will inspire new ideas, spark creativity, and help bring fresh perspectives to your projects. By experimenting with these color schemes, you may discover new styles that inspire you to create even more unique art.

The post 15+ Free Procreate Color Schemes & Swatches for Digital Artists appeared first on Speckyboy Design Magazine.

View Details

Choosing WordPress to power your website is a smart move. You’ll gain access to a world of themes, plugins, and possibilities.

There are also some responsibilities, though. Making sure your installation is up-to-date is among them. And software updates come frequently. Experts tell us to apply updates as they are released. Doing so improves website security, squashes bugs, and adds features.

We may assume that hitting the update button is the right thing to do. But what could go wrong? Is there a potential for harm?

That came to light during a supply chain attack on multiple WordPress plugins. Hackers infiltrated each plugin’s code repository. From there, they added malicious code to otherwise legitimate software. Once installed, that code created a shadow administrator account. It’s scary stuff.

Perhaps this isn’t a common scenario. But it’s a reminder to take precautions before installing an update.

Here are some tips to keep your site safe when updating WordPress.

-->Find out What’s ChangingYes, you can automatically update WordPress core, plugins, and themes. That puts you at risk for a supply chain attack, however.

There’s nothing wrong with automatically updating minor versions of WordPress core. They often contain security fixes. But it’s safer to update plugins and themes manually.

You’ll want to know what’s changing and why. A little research will tell you everything you need to know.

First, take a look at what updates are available for your site. Navigate to Dashboard > Updates to see what’s available.

Next, take note of any plugin and theme updates. Plugins offer version details. Click the link next to each item to see them.

Plugins hosted on WordPress.org also have a support forum. Check them to see if other users have reported issues. You may also find notes from the developer.

It will take a bit more research for items hosted elsewhere. You might check their documentation, private support forum, or GitHub repository.

These details will help you make an informed decision. Seeing bug reports, for example, may lead you to hold off on updating.

Feel free to ask questions if you have concerns. Knowledge is power, as they say.

Back up Your Website FrequentlySecurity isn’t the only potential issue here. A software update could cause other problems. You might find a compatibility issue. Or an update might introduce a conflict with another plugin or theme. There’s also a chance that the update will fail.

It’s never a bad idea to back up your site before applying updates. You’ll have peace of mind knowing you can roll back if needed.

Your web host may provide backup capabilities. If not, you can also use a backup plugin. These options are usually seamless. Choose one that fits your desired workflow.

A tool that creates incremental backups is preferred. The feature improves the efficiency of both backing up and restoring your site.

And don’t forget about backing up your database! Some updates make changes there as well.

Test Each Update for IssuesDon’t update and walk away. You’ll never know what sort of trouble you left behind. At least, not until a client discovers it.

Be sure to test updates after installing them. Ideally, you’ll have a staging environment to work with. That gives you the freedom to test without impacting users.

So, what should you test? That depends on the type of updates you installed.

If you updated WooCommerce, look at your site’s products. Add an item to your cart and test the checkout process. Edit a product or setting from the WordPress dashboard. Be on the lookout for anything that doesn’t work as expected.

Follow the same pattern for other items. Determine what could be impacted by the update. Then, test on both the front and back ends.

You can use your browser’s developer tools to help. For example, the console tab will alert you to issues like 404 and JavaScript errors. These can affect stability and site performance.

The process shouldn’t take more than a few minutes. And you’ll rest easy knowing that everything is working correctly.

A Holistic Approach to Updating WordPressWe all appreciate convenience – especially with mundane tasks. Such is the case with updating WordPress. It’s easy to hit the update button without a second thought.

That puts your site at risk, however. There are a myriad of things that can go wrong. Therefore, it’s worth paying attention.

Perform some research regarding each update. Get a sense of what is changing. From there, you can gauge the potential impact.

In some cases, you might want to delay installing an update. That’s OK. Only security-related updates should be considered an emergency.

Being proactive also means keeping site backups. That will be your safety net should something go wrong. Testing on a staging environment is also recommended.

The bottom line is to pay attention. Your site and its users will be glad you did.

The post How to Stay Safe When Updating WordPress appeared first on Speckyboy Design Magazine.

View Details

As a platform, the web caters to creators. It’s a place to publish and share whatever we want. We’ve used it to fuel the rise of everything from blogs to influencer videos.

The results are impressive. Think of all the careers kickstarted by online publishing. I am living proof. Writing and web design have provided me with income and a platform. I’m forever grateful.

However, the rules of content ownership seem to be changing before our eyes. And it’s not the familiar trope of a spammer copying your text and images.

These days, large companies are trying to stake a claim. Social media has been doing this for years. And now artificial intelligence (AI) is putting the practice into overdrive.

Not everyone wants to own our content outright. Various platforms are looking to profit from what we create, though. Let’s take a look at what’s happening and what it means.

A Misunderstanding That Made Creators ThinkImagine a tool that helps you create compelling content. It then takes your content and profits from it. A recent change to Adobe’s Terms of Use seemed like it might do just that.

Users were up in arms regarding the revised language in the agreement:

“4.2 Licenses to Your Content. Solely for the purposes of operating or improving the Services and Software, you grant us a non-exclusive, worldwide, royalty-free sublicensable, license, to use, reproduce, publicly display, distribute, modify, create derivative works based on, publicly perform, and translate the Content. For example, we may sublicense our right to the Content to our service providers or to other users to allow the Services and Software to operate as intended, such as enabling you to share photos with others. Separately, section 4.6 (Feedback) below covers any Feedback that you provide to us.”

I’m no lawyer or legal expert. But it sounds like the company is permitting itself to use your content. Theoretically, Adobe could use content created in Photoshop to feed its AI model.

Adobe has since clarified that this is not the case. The changes relate to allowing their cloud-based AI tools to modify your content – at your request. Furthermore, the language is there to facilitate the sharing of files via Adobe apps.

Perhaps it was all an honest misunderstanding. But can you blame anyone for being suspicious of the change?

Content Isn’t Just for User ConsumptionThe relentless pace of AI is making some people uncomfortable. Tools are scraping our websites to feed their models. Opting out isn’t straightforward.

It’s also different from social media. The workaround there has been to create content on a platform you control (a website) and promote that content on social media. We’re merely funneling traffic from a proprietary platform—not allowing it to own our creations.

AI has changed the game. The platforms are meeting us where we are. They’re indexing what we’ve published to improve their product.

All of this happens in the background. It may not be a big deal to some. If you can’t see it happening, what’s the harm?

We may not immediately see the effects. But the long-term ramifications could be significant.

What happens when a company chooses AI instead of a copywriter? Or let ChatGPT generate all of its custom code? Or replace a graphic artist with a text-to-image tool?

These things are already happening. Maybe they haven’t impacted you just yet. But pessimists will see this as feeding the machine that will take your place.

Rethinking the Role of Apps in Content CreationI can’t say that I ever considered the role apps play in what I create. For example, I’ve used Photoshop since the 1990s. It was a great tool that helped me accomplish my goals. It still is.

The misunderstanding surrounding its Terms of Use has me wondering. How far will an app go to serve us and itself?

It’s no longer paranoia to think a software company would use our content for profit. And governing bodies can’t act swiftly enough to stop it. It’s the wild west out there. Companies will experiment and go as far as they can.

So, perhaps it’s no longer about using the most powerful tool for the job. Now, it’s about using tools that respect users.

App developers should be clear about their intentions. And, if they are feeding content to AI models, they should allow users to opt out. The process for doing so should be simple.

There’s a market for apps with a privacy-first focus. We see this with web browsers like Firefox and DuckDuckGo. That’s a roadmap for creative apps and publishing platforms to follow.

The New Reality of Content CreationThere’s always been some risk when publishing online. Anyone could copy your work and call it their own. Or they could redistribute your work in an unapproved manner. It’s frustrating, for sure. But we’ve learned to live with it.

These days, the concern is how and where we create. Do we own our content – or are we expected to share ownership? What rights do we have? What does all of the legalese in the Terms of Service mean?

The answers may deter some of us from publishing. That’s a shame because the internet is the perfect medium for sharing ideas.

In reality, we should think twice before using a tool or platform. As creators, we need to know what we’re getting into.

The situation also underscores the importance of free, open-source software (FOSS). Platforms like WordPress ensure content ownership and portability. Integration with AI is optional – even if blocking content scrapers isn’t automatic.

The bottom line is to do your homework. Find tools that respect your privacy and rights to ownership, and avoid the ones that go too far.

We can’t control everything in this industry, but we can make informed choices. For now, it’s our best option.

The post The Fight to Own Your Creative Content appeared first on Speckyboy Design Magazine.

View Details

There’s more to website ownership than meets the eye. However, our clients may not realize this. They might think that the work ends when the site launches.

An experienced web designer knows better. A site launch is just the beginning. Content management systems (CMS) like WordPress are a case in point. A steady stream of updates keeps us on our toes.

It’s one reason why I believe a professional should manage WordPress sites. Even the tiniest of websites have significant maintenance needs.

Still, clients don’t always understand the stakes or the costs involved. Until something goes wrong, that is. But let’s not go that far.

The key to avoiding problems starts with education. Teaching clients the hows and whys of WordPress maintenance can do the trick. With that, here are some points worth driving home in your discussions.

Website Maintenance Is an InvestmentThere are two types of website investments. The first is the cost of the initial design and build. It covers everything from the idea phase to the site launch. That’s the big, expensive part.

The second comes after the site goes out into the world. It ensures both content and software are current. Clients can get tripped up by this one.

What clients may not understand is that websites require care – regardless of whether the content changes. They’re viewing the phrase “website updates” through a different lens.

How do we change their perspective? You could compare website maintenance to that of a car.

Cars need regular care to keep things running smoothly. Doing so prevents problems down the road. It’s an investment in safety and stability.

Websites need the same kind of investment. The goal is to keep it in tip-top shape – and avoid common pitfalls.

WordPress sees frequent updates to plugins, themes, and the core software. Together, they improve the overall security and performance of a website. It’s too important to ignore.

Standards and Best Practices ChangeThe web’s standards and best practices are subject to change. So, that shiny website from a few years ago is now behind the times.

We’ll see this in several areas of a typical WordPress site. Accessibility is a big one. An older WordPress theme may not be up to the current standard. Old or abandoned plugins might also lack accessible features.

Server technology also marches on. A website may run on an outdated version of PHP, for instance. That means you’re missing out on better performance and security.

These issues go beyond a website’s aesthetics. They are fundamental to things like usability and legal compliance. The more you fall behind, the greater the risk.

Resolving these issues requires time and money. We’ll need to review the website and determine what needs to be changed or fixed. From there, it’s time to perform the necessary tasks.

Clients may have a hard time grasping this concept. They can’t always see the need for such changes. Nor can they always measure the results.

However, it’s one of the costs of website ownership. Think of it this way: Brick-and-mortar locations must keep up with building codes. Websites need to do the same.

Vigilance Is an Important Part of the PlanWebsite maintenance is not a once-per-year type of task. It’s an ongoing commitment. WordPress releases a new major version every few months. Plugin and theme updates can drop at any time.

Each update opens the door to potential change. For example, a plugin update might require a new version of PHP. You might also need to update any custom code.

Security is also a key factor. New vulnerabilities pop up frequently. They require us to act quickly. Otherwise, we increase the risk of a compromised site.

Vigilance is important. It comes at a cost, though. Web designers need to keep a watchful eye. That means a combination of manual intervention and automated tools.

These acts won’t guarantee a problem-free experience. But they can prevent a small problem from becoming a major one.

That peace of mind is worth the price – particularly for clients who depend on their website for sales. A broken or hacked eCommerce site could spell disaster.

A Well-Maintained Website Benefits AllIn a nutshell, everyone benefits from a well-maintained website. Web designers can use it as a vehicle for recurring revenue. Users are less likely to encounter problems. And that should make website owners happy!

The other side effect is taking advantage of new features. WordPress is continually refining its core. The same goes for its theme and plugin ecosystem.

It’s an opportunity to do more online. Features that enhance performance, accessibility, or ease of use can mean more sales. That’s one way to increase the chances of customer loyalty.

Make an effort to discuss WordPress maintenance with your clients. Help guide them on the importance of staying on the cutting edge.

They’ll be more likely to commit once they learn the hows and whys. And they’ll be better prepared to adapt to the web’s ever-changing landscape.

The post How to Explain WordPress Maintenance to Your Clients appeared first on Speckyboy Design Magazine.

View Details

WordPress’s immense popularity stems from its robust ecosystem of tools, ease of use, and flexibility. Themes and plugins are central to its versatility. Plugins, in particular, allow users to extend the functionality of their WordPress sites effectively.

Plugins are, in fact, indispensable for adding complex features to a site, eliminating the need for extensive coding or high development costs.

If the term plugin is new to you, you can think of it as an app or add-on for your website. The WordPress library, with over 50,000 plugins, offers extensive design capabilities, allowing you to unlock the full potential of WordPress itself.

A general understanding of what WordPress plugins can do and how they can leverage a website’s value and operational efficiency is key to successful website design and development.

In this collection, you’ll examine seven top WordPress plugins, each excelling in its specific area of functionality.

What You Need to Consider When Selecting a WordPress Plugin1. Purpose & Requirements: Clearly define what you are looking for, e.g., SEO, social media integration, eCommerce capabilities, etc. 2. Plugin Ratings & Reviews: Make it a point to find out what other users experienced, e.g., excellent results, problems encountered, and the level of support received. 3. Compatibility: Make certain the plugin is compatible with the version of WordPress you are using and also compatible with themes or other plugins your website is using. 4. Update Frequency: Plugins should have been updated frequently enough to incorporate improvements, fix bugs, and remain compatible with WordPress. 5. Support & Documentation: Good documentation can help you troubleshoot issues and make the most of the plugin’s features. Robust customer support is also important. 6. Security: Choose plugins from developers that deliver high-quality, secure code. 7. Performance Impact Poorly coded plugins or those overloaded with extra features could slow down your site (and add to your design workflow). 8. Cost: Free is great if you are certain that that option meets your needs. It’s always a good idea to see if the extras a premium version offers will work to your advantage.

The Best WordPress Plugins in 2024 for Your Website Projects1. Amelia – WordPress Booking Plugin for Appointments & Events TL;DR: Amelia is the best choice for service-oriented businesses needing to automate and streamline their appointment booking operations.

Click the video to see this plugin in action.Spas, fitness centers, photographic studios, and other service-oriented businesses can save time and money by installing Amelia’s capabilities while at the same time profiting from increased customer or client satisfaction. With Amelia, event and appointment booking can be managed at multiple locations from a single website platform.

Veterinarian services including dog-walking, vacation care, and other special services can also make excellent use of Amelia, Petcare template.

User Experience: “Amelia is a great booking tool that has a nice look and feel right out of the box. It is a bit overwhelming at first because of the many settings you have but the customer service support is great. I can’t recommend this plugin enough.”
Client Avgerage Grade: 4.8 on Capterra.
Types of Support Material: Discord Group, documentation, and YouTube videos.

View Amelia

wpDataTables – WordPress Table Plugin TL;DR: wpDataTables’ ease of use and powerful data management features allow users to quickly create editable and responsive tables and charts.

Click the video to see this plugin in action.The wpDataTables plugin has long been known for allowing users to work with massive amounts of complex data. Its new Multiple Database Connections functionality goes a step further by enabling users to simultaneously connect to diverse servers.

Users have the ability to create a virtually unlimited variety of tables and charts. This pricing table template, for example, features nine different formats ranging from simplistic to more complex. wpDataTables’ conditional formatting and other customization options provide a powerful means for highlighting critical data.

User Experience: “The support team helped resolve the compatibility issues with my theme. Really helpful and willing to go the extra way to ensure that the plugin works well in any environment.”
Client Avgerage Grade: 4.83/5.
Types of Support Material: Documentation and YouTube videos.

View wpDataTables

Classic Editor WordPress Plugin TL;DR: The Classic Editor plugin restores the long-time favorite WordPress editor and “Edit Post” screen.

Click the video to see this plugin in action.Classic Editor will continue to be supported for as long as it is needed. The plugin allows users to manage default editors or give users the ability to make changes on their own.

User Experience: “Thank you for this plugin. I deactivated it a few months ago, trying to get used to the block editor. A nightmare. No more! I have wasted enough time already in frustration, trying to figure out how to put it to use. Back to classic!”
Client Avgerage Grade: 4.9/5.

View Classic Editor

Slider Revolution – More Than Just a WordPress Slider TL;DR: The Slider Revolution plugin is an excellent choice for anyone interested in creating animated sliders that range from engaging to jaw-dropping.

Click the video to see this plugin in action.Slider Revolution’s top feature isn’t a single tool or function, it’s the many different ways it can be used to create sliders and web page content that will absolutely “wow” its visitors.

Designers or developers can upgrade a run-of-the-mill website to something special in minutes. Think of the last time you saw an advertisement for a Horsemanship training center: still images of happy-looking people on horseback. Now see what Slider Revolution can do with this Professional Training slider template.

Needless to say, Slider Revolution is ideal for one-page websites and portfolio websites.

User Experience: “Great plugin with some impressive features! Support reps are top notch all around and Abid was especially helpful.”
Client Avgerage Grade: 4.2/5 on Trustpilot.
Types of Support Material: Support manual and YouTube videos.

View Slider Revolution

LayerSlider – Best WordPress Slider Builder Plugin TL;DR: LayerSlider is the best WordPress plugin for making creative sliders, slideshows, and popups.

Click the video to see this plugin in action.LayerSlider enables its users to create a live connection between a site’s content and its visitors, whether the animated content is in a slider, a page section, a popup, or a banner for marketing purposes. Its highly customizable interface and advanced features were designed to make beginners and experts alike feel right at home.

The features and templates of LayerSlider provide a universal multi-purpose solution for all kinds of websites. “Fragrance Fantasy” for example, is a template tailored for salons and lifestyle blogs where perfume comes to life in a symphony of colors and scents. This and other templates can be easily customized by adding your own content.

Client Insight:“Super easy to use and the animations are just wow.”
Types of Support Material: Support manual, built-in help in LayerSlider’s Project Editor, direct email, and ticket system.

View LayerSlider

Essential Grid – WordPress Gallery Plugin TL;DR: Essential Grid is an easy to work with WordPress Gallery Plugin for businesses and creatives looking for a way to create breathtaking galleries.

Click the video to see this plugin in action.If you envision any gallery layout, you can create it with Essential Grid. If you can’t envision one, Essential Grid will also be able to help you.

All the tools you need are at your fingertips, plus you can use any of 50+ customizable templates designed to help you create an impressive gallery at a lightning-fast speed. Check out Essential Grids’ Dark Portfolio template with its impressive hover effects.

You can create as many skin variations as you want, choose masonry, cobbles, or any other type of layout, and mix and match the grids until you’re satisfied.

User Experience: “The tool is powerful and very well designed. The support team is incredibly fast, friendly and efficient! All the best to you!”
Client Avgerage Grade: 4.8/5 on Trustpilot.
Types of Support Material: YouTube videos and Support manual.

View Essential Grid

Brizy Website Builder TL;DR: The expertly crafted Brizy WordPress website builder is great for those new to website building, but powerful enough for tech-savvy users as well.

Click the video to see this plugin in action.Brizy is well suited for small businesses, freelancers, and agencies looking to launch a small to medium-sized website. Distinct PRO features for marketers include 3rd party tool integrations, popups, and membership features.

The design kit includes a collection of 500+ blocks designed to make it possible to create a website in minutes.

Brizy’s SAAS landing page template shows how easy website creation can be, especially when you have the needed content at your fingertips.

User Experience: “I’ve been using Brizy for a while now, and their support team is outstanding. Quick, knowledgeable, and always ready to help. They’ve made our website design experience a breeze. Highly recommend Brizy for their exceptional support and user-friendly platform.”
Client Avgerage Grade: 4.4/5 on Trustpilot/
Types of Support Material: Academy with Video Courses, Written DocumentationSupport Manual, Ticket Help-desk, YouTube videos & Facebook Group.

View Brizy

Choosing the Right WordPress PluginChoosing the right WordPress plugins for your website is crucial for maximizing its potential in terms of functionality and overall performance. Knowing upfront what you need in a plugin, checking its compatibility, and assessing user reviews are crucial to making the right acquisition. The plugins featured here offer robust solutions for various website requirements and represent the best in their respective niches.

Whether you choose Amelia’s all-inclusive booking system or wpDataTables’ powerful data management system or elect to take advantage of the WordPress Classic Editor, the Revolution Slider or LayerSlider dynamic content tools, or what Essential Grid and Brizy offer, you can appreciably improve your website’s functionality, user experience, or visual appeal.

Quick Recap

| WP Plugin | Summary | Standout Feature | | Amelia | The best plugin for service-oriented businesses needing to automate and streamline their appointment booking operations. | Great selection of booking and appointment services. | | wpDataTables | Powerful data management plugin for quickly creating editable and responsive tables and charts. | A Multiple Database Connections capability. | | Classic Editor | Classic Editor plugin restores the long-time favorite WordPress editor and “Edit Post” screen. | Used to extend post screens and add old-style meta boxes. | | Slider Revolution | Excellent plugin for creating animated sliders that range from engaging to jaw-dropping. | The ability to add visual “wow” effects without having to rely on coding. | | LayerSlider | The best WordPress plugin for making creative sliders, slideshows, and popups. | Highly customizable interface. | | Essential Grid | Easy to work with WordPress Gallery Plugin for businesses and creatives looking for a way to design breathtaking galleries. | 50+ unique grid skins. | | Brizy | The expertly crafted Brizy WordPress website builder is especially suited for use by non-technical users. | Perfectly suited for non-techies. |

The post 5+ Useful WordPress Plugins You Should Check Out in 2024 Sponsored appeared first on Speckyboy Design Magazine.

View Details

For years, freelance web designers have been encouraged to book new projects. It’s how I built my business. I’m betting that many more have done the same.

There’s great appeal in building a new website. It’s a chance for a fresh start. You can use the best tools for the job. The experience is even better if you are unencumbered with technical debt.

It can also be a lucrative business – but there are challenges. You’ll need to book clients with a sizeable budget. You’ll also need to find a way to stand out among competitors. That’s one path to success.

There are other ways to make money, though. The growing complexity of the web creates a different opportunity for web designers.

Think of all the websites out there. Consider how many of them are “broken” or poorly maintained. An enterprising freelancer could train their focus on these clients.

Let’s examine the pros and cons of fixing websites.

An Opportunity Years in the MakingThere is no shortage of virtual fixer-uppers. You don’t have to look far to see outdated and neglected websites. But why?

I believe much of it stems from content management systems (CMS). Tools like WordPress offer plenty of possibilities for a great website. However, they also require education and commitment.

Sometimes, an entrepreneur may attempt to build it themselves. But, they will soon find that they’re in over their head. Or they don’t know the ingredients of a stable and performant site.

Even those who hire a web professional can run into problems. That web designer may have done a terrific job. However, they may not have communicated the importance of maintenance.

Continued care is required to keep things running smoothly. Outdated themes, plugins, and core software will turn any site into a bucket of bolts.

Website owners aren’t likely to call for help until something is wrong. It appears to be a common issue these days.

I’m Not a Hero – Just a Web DesignerLongtime freelancers know the drill. You receive an email from a panicked website owner. They’re not a client. However, their site has crashed, been hacked – or maybe both. They need to get it fixed right away.

How do you respond? It’s easier to say “no” if you’re busy. Perhaps you have enough clients. But if not?

There’s an opportunity to play the part of hero. It’s also a chance to make money and establish a relationship.

Fixing this person’s site could lead to bigger things. Since you have their attention, you can use that time to make recommendations.

For example, their site may have other issues that need fixing. Things like accessibility and security could be lacking. Maybe they need a complete overhaul.

Helping a client in a difficult situation can create trust. It may be just the motivation they need to level up. You have a chance to guide them in the right direction.

What’s Lurking Inside That Website?Website rehabilitation is not without risk. What you see on the surface is one thing. What lies beneath is another.

It’s among the downsides of inheriting a website. You’re stepping into uncharted territory. That often leads you down the proverbial rabbit hole.

Maybe the site was built using unfamiliar tools. Or it’s so riddled with malware that you can’t find the root cause. These issues aren’t for the faint of heart.

There are also questions about the client. How did their website get into this state? Did they have a poor relationship with their last designer? Did they pay their bills on time?

Sure, people can change. But you’ll want to find out why their site is in disrepair. You may find some red flags that scream, “Stay away!”

Perhaps this is the biggest hurdle for freelancers. The willingness to accept risk and dive in headfirst are musts. Not everyone will have the stomach for it.

Pricing is also a concern. Estimating the cost of a fix isn’t easy. So, develop a formula that protects you from taking a loss on a messy site.

Is This the Right Path for You?Website maintenance services are popping up all over the place. They often consist of teams of developers ready to get to work. There’s a good reason for it. The market needs experts who can turn online garbage into gold.

It’s not as simple a path for freelancers, though. You’ll have to weigh the potential benefits against the drawbacks.

Signing up for these types of projects may take away from other opportunities. But they could be a steady source of revenue. You might also turn them into yearly maintenance clients. And you’ll also be in line to handle the inevitable redesign.

Still, looking at broken websites all day isn’t for everyone. The remediation process can be stressful. Meanwhile, clients are waiting with bated breath for a solution.

There’s plenty of business for those interested in this type of work. It’s unlikely to go away any time soon, as the way we build modern websites almost guarantees it.

The post Why Fixing Websites Is a Growth Opportunity for Freelancers appeared first on Speckyboy Design Magazine.

View Details

Retrieving data from a WordPress site can be a nightmare. Site data could reside in several places. Pulling from these various sources isn’t easy.

Websites that feature eCommerce or memberships are prime examples. Each plugin may store data in a different spot. Some create separate database tables. Others use the default WordPress locales.

Export plugins exist that help in some – but not all – circumstances. For example, you might be able to export customer orders. However, grabbing additional data not directly related to those orders may not be possible.

Writing a custom query is another option. But you’ll need to know your way around PHP and MySQL. Not everyone has the expertise to do so.

Artificial intelligence (AI) can help. As I discovered, tools like ChatGPT can do the dirty work. It simplified the process and saved me loads of time. Perhaps it saved my sanity as well.

Here’s how to use AI to get what you need from the WordPress database.

Before We Get StartedThere are a few items we should mention before starting:

Back up Your Site’s Database or Create a Local Copy of Your Site
None of what we’re doing here should hurt your database. However, create a fresh backup – just in case.
You can also create a local copy of your site for experimenting. That enables you to work without the risk of harming your production website.
Have Access to a ChatGPT Account
We’re using ChatGPT for this demo. Therefore, you’ll want to have access to a free account. You can follow along and experiment.

Other AI tools, such as Google Gemini, may also work. The point is to use an AI tool that will generate code.

Also, a warning: Use caution when generating code. AI tools can make mistakes! Review the code before using it.

What Are You Doing with the Data?
There are a couple of things you can do with the data you retrieve:

Display the data on the front end of your site;
Download a CSV file that contains the data;

You’ll want to determine this beforehand. The process is a bit different depending on your choice.

Oh, and you’ll also need access to your site’s database. Access to your theme is required for displaying data on the front end.

Retrieving User Data from Different PluginsNow, onto our experiment. Let’s take a common sticking point and try to make sense of it.

Our fictional website has two purposes. We sell various products with WooCommerce. Customers come to our site, create accounts, and order from us.

On the other side of the coin, we also sell memberships. Our members pay for access to exclusive content. We use the Restrict Content Pro plugin to power this feature.

Both WooCommerce and Restrict Content Pro have reporting features. For example, we can find out how many members we have. Or the number of WooCommerce customers.

But what if we want to combine this data? There’s no straightforward way to do this. So, let’s see if AI can help.

Step 1: Find the Data You WantThe first step is to determine what data you want to retrieve. Then, you’ll need to find the data inside the WordPress database.

Our goal is to create a CSV export file that includes users who are:

A customer in our WooCommerce shop AND…
Have an active membership via Restrict Content Pro;

Data isn’t always easy to locate. In some cases, you may need to reference plugin documentation. Or contact their technical support. A thorough database search can help if all else fails.

In our case, WooCommerce and Restrict Content Pro create custom database tables. That will make our job a bit easier.

WooCommerce table names use the ‘wp_wc‘ prefix.
Restrict Content Pro table names use the ‘wp_rcp‘ prefix.

We’ll also want to bring in data from the ‘wp_users‘ and ‘wp_usermeta‘ tables. That allows us to tie customer and membership data to specific users.

With that in mind, we’ll look for the following information:

| Data Type | Database Table | Column | | --- | --- | --- | | User ID | wp_users | ID | | First Name | wp_usermeta | Meta Key: first_name | | Last Name | wp_usermeta | Meta Key: last_name | | Customer ID | wp_wc_customer_lookup | customer_id | | Membership Status | wp_rcp_memberships | status | | Membership Level ID | wp_rcp_memberships | object_id |

Step 2: Ask ChatGPT to Create a Database QueryNext, we’ll ask ChatGPT for some help. We’ll want to provide a clear explanation of the task.

Here’s the prompt I used:

I'd like to create a MySQL database query for a WordPress website. I only want to retrieve users who have both a WooCommerce Customer ID and a membership via Restrict Content Pro.Here is the data I'd like to retrieve:From the wp_users database table:IDFrom the wp_usermeta database table:Meta Key: first_nameMeta Key: last_nameFrom the wp_wc_customer_lookup database table:customer_idFrom the wp_rcp_memberships database table:statusobject_id Step 3: Get the ResponseChatGPT’s response included a code snippet and a detailed explanation of it (view the full response). The snippet joins multiple database tables together to produce a single report.

So, how do we see if it works? We can run the query in a tool that connects to the site’s database. I’m using a local website that includes AdminerEvo.

You could also use phpMyAdmin, MySQL Workbench, or similar apps. ChatGPT can even provide instructions for whatever app you’re using.

I’ve pasted the query into the SQL Command screen inside AdminerEvo.

Step 4: Study the ResultsThe results are in! Our fictional website has 198 users. 15 of them have a paid membership. There are also 200 product orders.

So, how many are WooCommerce customers and Restrict Content Pro members? A grand total of seven.

The query results returned the columns we requested. From here, we can tweak things further or export the data.

Going Further with AIOur example query may seem simple. However, bringing together data from multiple plugins is challenging. A custom solution is often the only solution.

I’m no coding expert. Thus, figuring out how to get data became frustrating. Thankfully, AI has proven to be a terrific tool for the job.

It’s one of the areas where this technology shines. Many of us struggle to write this sort of code on our own. Writing a prompt describing what we want isn’t so bad, however.

There are also opportunities to take things further. We could change our prompt to display data on a WordPress page. Or return data relevant to the currently logged-in user.

A working knowledge of PHP and MySQL can take you a long way. So, experiment and see what you can accomplish. And be sure to add up all the time you save in the process!

The post Use ChatGPT to Export Data from a WordPress Database appeared first on Speckyboy Design Magazine.

View Details

The great thing about being a freelancer is that you’re in charge. That can also work against you, though.

You make all the decisions. So, who’s to blame when something goes wrong? Just take a look in the mirror.

That’s OK. None of us are perfect. And I’m right there with you. I’ve made plenty of mistakes in my quarter-century as a freelance web designer.

Mistakes are learning opportunities. But it’s better to learn from someone who’s already made them. They can save you from repeating history.

That’s why I’m here! With that, here are the biggest mistakes freelance web designers typically make. I’ve been there and done them all. Read on to learn how you can avoid them.

Working without Contracts and Other Legal ProtectionsWe may want to believe that everyone is honest. We hope our clients will behave rationally. That’s not always the case.

A bad experience with a client can be frustrating. It might also be devastating – depending on the severity. Make sure the law has you covered.

First, always work with a contract in place. Spell out the terms of each project. Both parties will know their responsibilities and the agreed-upon compensation.

That way, there’ll be no excuses if a client fails to hold up their end of the bargain. You’ll be protected against non-payment or other shenanigans.

It’s also important to consider your business structure. Yes, even solo freelancers need to think about this. Some configurations can reduce your risk.

For example, an LLC (limited liability company) can separate your business and personal assets. That’s a big deal if you get sued.

Oh, and we can’t forget about business insurance. It protects against all manner of issues – including cybercrime.

Be proactive when it comes to your business. You might save yourself from a nightmare or two.

Trusting the Wrong Products and ServicesEvery product and service we use requires a leap of faith. We have to trust that they’ll work as advertised. And that they’ll increase efficiency – rather than hinder it.

Experimenting with products is fun and educational. It may lead us to improve our skills and earning potential.

But freelancers too often do so with their client work. For example, using an unproven content management system (CMS). Or a web host you don’t know much about.

The potential rewards aren’t worth the risks. What happens if the experiment doesn’t work? Your client relationships could be strained – or worse. Plus, you’ll be left to clean up a mess.

For some clients, this approach makes sense. They may need a feature that no one else offers. However, that is the exception to the rule.

Use trusted tools for client work. Your reputation (and theirs) are on the line, after all.

Booking Clients Despite Their Red FlagsNot all clients are worthy of your time. Some turn out to be troublesome – and there are usually warning signs.

There are a multitude of red flags to look for. Clients that are rude or dismissive are unlikely to be satisfied. They don’t respect your effort or talent.

Then you have people who mention the other designers they’ve worked with. Ask yourself why those relationships crumbled. There must be a reason.

Worse still are the penny-pinchers that question every dollar. You often find that they’re also the most demanding. They expect Amazon-type features on a shoestring budget.

Perhaps the worst are those with anger issues. They may not snap at you, specifically. But you’ll hear it when the conversation shifts to their last designer. Or a former employee. Or the barista at the coffee shop you’re meeting in. Let there be no doubt that you’ll be a target if you stick around.

The potential to make a few dollars isn’t worth the risk. Working with these sorts of clients will eventually come back to haunt you. It can take years to recover from the experience.

Pay attention to the warning signs. Follow your gut and not your desire for a paycheck. You’ll be better off without them!

Allowing Their Skills to StagnateThe web is constantly changing. Your portfolio serves as proof. Look at a website you built five years ago and compare it to today. You might be surprised at the differences in design and tech.

More than ever, clients are aware of these shifts. They’re asking for modern looks and features. They’re more in tune with what a website should do.

Web designers must change along with the times. That’s not to say you should abandon tried and true methods. However, you may have to apply them in different ways.

Artificial intelligence (AI) is the elephant in the room. It’s already impacting the way we do our job. Therefore, it’s worth experimenting with these tools now to prepare.

There have also been changes in CSS, JavaScript, performance, and accessibility. Plus, all of the challenges presented by web security.

AI may be an asset in these areas. But it makes sense to keep learning the “old-fashioned” way. That will keep your skills relevant for now and in the future.

Continuing to Offer Low-Profit ServicesThe business decisions you make today have a lasting impact. You’ll see it in the projects you book and the services you offer.

Sometimes that impact is negative. A poor client may be easy to separate from. However, an unprofitable service is more difficult to get past.

Let’s say you want to offer a new service to clients: email list management. You think it will provide some extra revenue with minimal effort. Sounds like a winner, right?

Perhaps things go well early on. A few clients sign up for the service. You’re not making much profit, but things aren’t out of hand.

Now, fast-forward to five years from now. You have a mountain of web projects to complete. And these email lists are taking up too much of your time. You’re stuck working on a low-profit venture while ignoring the real money maker.

Untangling from this mess could take a while. You might have clients under long-term contracts. And an affiliate deal with a provider. You may also need to refer clients to a new list manager.

The point is to be careful about the services you offer. What sounds like a good idea today could become a mess tomorrow.

Mistakes Are Part of Freelancing. Learn from Them.The longer you’re a freelancer, the more mistakes you’ll make. It’s all part of the journey.

The key is to learn from them. That will teach you to think more carefully about future decisions. I can attest to that part. I’m more deliberate about how I approach my business these days.

Yes, I still make the occasional wrong choice. But I’ve made a lot of progress. And I’ve gotten better at identifying mistakes before they become too big.

You can do the same! Think about your experiences. Read about what others have done. Apply those lessons to create a better future for your business.

The post Here Are the Biggest Mistakes Freelance Web Designers Make appeared first on Speckyboy Design Magazine.

View Details

WordPress has been around for over 20 years. Part of its continuing popularity stems from how extensible it is. A skilled developer can make the content management system (CMS) do just about anything.

Its plugin architecture powers shopping carts, forms, and photo galleries. That’s just the tip of the iceberg, though. Niche functionality abounds, so it’s no wonder it leads the pack in market share.

But let’s take a step back. The ability to use plugins came about in WordPress 1.2. It was a new concept in those days. The project needed to educate developers on how things work. To encourage them to build and experiment. But how?

Well, hello, Dolly! Or, if you prefer more formality, Hello Dolly.

It’s one of two default plugins that come with each installation of WordPress. Maybe you delete it. Perhaps you leave it deactivated in your plugins folder. But do you know about its roots as a teaching tool?

In case you didn’t know: “Hello Dolly” is also a song made famous by Louis Armstrong. The jazz legend was a perfect fit for this project. WordPress releases are named for famous musicians. So, “Satchmo” gets some glory here. The plugin shows a random line from the song’s lyrics in the WordPress dashboard.

Love it or not, Hello Dolly (the plugin) has a purpose and is here to stay. I spoke to someone who knows a thing or two about the subject.

Why Matt Mullenweg Is Still Jazzed UpWordPress co-founder Matt Mullenweg is a big fan of jazz. He also developed Hello Dolly. Matt was kind enough to take a quick trip down memory lane with me.

Besides sharing a classic song, what was the inspiration for creating Hello Dolly?Matt Mullenweg: We wanted to riff on the “Hello World” that sits at the inception of many people’s introduction to programming. We felt like actions and hooks were a really nice paradigm alternative to purely object-based extending of applications.

Why has it continued to be a part of every new WordPress install?MM: Because it’s nice to have a plugin with every install, and it’s funny and weird.

The plugin’s inclusion has resulted in some 1-star reviews. Does that keep you up at night?Matt Mullenweg: Not at all.

Do you foresee a time when the plugin might evolve? For example, a Hello Dolly block might be a nice introduction to block development.Matt Mullenweg: I think it would be cool if Hello Dolly could connect people to live jazz happening near them.

According to its development log, Hello Dolly has been around for 16 years and has over 700k active installs. Does that make you think about how far WordPress has come?Matt Mullenweg: It shows that even though Hello Dolly is silly and simple, a pretty significant number of people appreciate the little bit of joy and randomness it introduces into their day.

” This is not just a plugin, it symbolizes the hope and enthusiasm of an entire generation summed up in two words sung most famously by Louis Armstrong: Hello, Dolly.”
– Hello Dolly plugin description from WordPress.org

A Living Connection to the Early Days of WordPressHello Dolly is a bit silly on the surface. However, it also represents something bigger.

Consider the importance of plugins to the WordPress ecosystem. Where would the CMS be without the likes of WooCommerce or Yoast SEO? What about the tens of thousands of plugins at our fingertips?

Every developer has to start somewhere. Some may have used Hello Dolly to take that first plunge into development. And people interested in building plugins can still use its code as a resource.

The plugin has played a role, however small, in the growth of WordPress. We owe it some thanks. Having said that…

Dolly, never go away, promise, you’ll never go away!

Thanks to Matt Mullenweg for chatting with me! Find more from Matt on his blog.

The post An Ode to Hello Dolly with Matt Mullenweg appeared first on Speckyboy Design Magazine.

View Details

Not everything on a website has to be displayed straightforwardly. Sometimes, it’s prudent to hide an element. We can then reveal it automatically or via user interaction.

That’s what makes reveal effects so compelling. They can serve dual purposes. The first is to keep our layouts nice and tidy. The second is to add a bit of flair to the user experience (UX).

And there are many intriguing options for web designers. Using CSS and JavaScript offers a path to creating high-end effects. They not only look great, though. There are ways to build features that are performant and accessible as well.

Want to explore some possibilities? Check out our collection of fantastic reveal effects. They run the gamut in terms of use cases and technology.

Scratch Card CSS Reveal by Nicolas JesenbergerThis reveal effect mimics a real-world experience – using a scratch card. Use your finger or pointing device to “scratch” off the silver foil. You’ll find a little surprise underneath. It’s both clever and well-executed.

See the Pen Scratch Card by Nicolas Jesenberger

Magic Wand Reveal by Kalis NetworkHere’s a snippet that takes web magic to the next level. Move the magic wand from left to right to reveal the image gallery underneath. There’s also a subtle effect for nearby images. They’re blurry and displayed with a lower opacity.

See the Pen Magic Reveal by Kalis Network

Circular Reveal Animation by Liza ShermaysterYou don’t need to go overboard with reveal effects. This simple presentation reveals more of the image upon hover. And it also adds a classy text animation. It would work well on a portfolio or About Us page.

See the Pen circular reveal animation by Liza Shermayster

Text Reveal Animation by OwlypixelHow about a reveal effect that happens automatically? This animated headline is beautiful and sure to get a user’s attention. It’s also powered by CSS. That means there are no messy scripts to slow down your page load times. The JavaScript used in the snippet refreshes the demo.

See the Pen Text Reveal Animation by Owlypixel

Ink Transition Reveal by Ryan YuThese scroll-based animations are incredible. The artwork appears to be drawn on your screen as you scroll. The effect creates a mood to enhance the UX. It’s a case of special effects fitting the content to a tee.

See the Pen Ink transition effect with PNG sprite by Ryan Yu (@iamryanyu)

Movie Poster Interaction Reveal by EthanCard UIs are a popular design element these days. But there’s only so much content they can hold. This snippet offers a solid workaround. Hover over a card to reveal further content. The layout remains neat while adding a bit of interactivity.

See the Pen Movie Poster Interaction by Ethan

Page Reveal Effect by Kevin LevronYes, you can use reveal effects for an entire page! And this tool can help you create the perfect fit for your project. Choose from several animation types and other options to build a beautiful presentation. Plus, it’s just plain fun to experiment with.

See the Pen Page Reveal Effect (CSS/VueJS) by Kevin Levron

Accessible Offcanvas Reveals by Vasileios MitsarasOffcanvas elements are a handy place to store extra info. They’re often used to hide mobile navigation so that users can focus on content. This demo uses jQuery to add elements that can be revealed in multiple ways.

See the Pen Accessible Offcanvas by Vasileios Mitsaras

A Revealing Way to Build a UIReveal effects can take many forms. They’re suitable for everything from a corporate website to an online game. Their potential is vast and varied.

It’s still important to consider the impact on users, though. The best implementations feel natural and add to the UX. Therefore, it’s best to avoid effects that get in the way of accessing content.

Thankfully, CSS and JavaScript provide plenty of leeway. You can use the combination that works best for your project.

Want to see even more reveal effects? Check out our CodePen collection!

The post 8 CSS & JavaScript Snippets for Awesome Reveal Effects appeared first on Speckyboy Design Magazine.

View Details

It seems like an odd mix on the surface. On one hand, WordPress is a content management system (CMS) that aims to democratize publishing.

It’s right there in the mission statement. That harkens back to its roots as a blogging platform. We install the software and push our content out into the world.

On the other hand, WordPress has become a tool to make money. Freelancers, agencies, and DIY users can build commercial websites with it. Developers create themes and plugins as part of an ecosystem.

Just so we’re clear: A corporation can use WordPress to bolster its billion-dollar portfolio. Just as a teenager can publish their thoughts.

Perhaps this sounds like two mutually exclusive ventures. However, they’ve coexisted for over 20 years.

That’s the juxtaposition of free, open-source software. So far, WordPress has handled it as well as anyone.

How has the project done it? And what potential risks could derail the balance? Let’s attempt to make sense of it all!

A Foundation for the WebWordPress project co-founder Matt Mullenweg has said he wants the software to be the “operating system for the open web.” It’s one way to marry commercialization with democratization.

It makes sense for content creators and site builders. The software serves as a foundational piece. It’s free, widely supported, and extensible. Take it and build whatever you want.

This idea borrows from operating systems like Linux, MacOS, and Windows. They lay the foundation for a variety of use cases. An enterprise IT department depends on an OS. So does a student or small business.

Free software lowers the barrier to entry. Sure, there’s a cost associated with hosting a website. However, you’re not stuck with a particular host. WordPress is open-source. It can be hosted just about anywhere – even on a local machine.

This allows for a multitude of possibilities. One can publish, make money, or both. Those interested in web development can learn the software’s inner workings.

Expand it, change it, or use it as-is. That’s the flexibility of WordPress.

The Challenge of a Diverse User BaseAs a project, WordPress has adeptly walked a tightrope. It has provided an opportunity for people around the world. It has also created an economy based on its ecosystem and custom development potential.

Maintaining balance is a challenge – and a great responsibility. The software must remain an attractive option for both camps.

Bloggers and small organizations depend on WordPress for low-or-no-cost flexibility. Developers, freelancers, and agencies want a powerful tool to fuel their growth.

That’s why some features spark debate. Take the Block Editor, for example.

Theme and plugin developers were concerned about this shift toward block-based content. How would it impact their products? Would they be rendered useless? Or require a complete overhaul?

Everyday users also had concerns. Would a new editing experience make it harder to publish blog posts? How large is the learning curve? Would it leave their existing website in the dust?

User perception also plays a role. Some may see a feature as favoring one side or the other. Sometimes, commercial and individual interests diverge.

That places project leadership in a tough spot. You can’t please everyone. But serving a diverse user base is part of the job.

Keeping the Coexistence for Years to ComeSo, how can WordPress continue to provide the best solution for both worlds? It will take a concerted effort. And things seem to be off to a good start.

Recent years have seen a focus on ease of use. In addition, tools like the Site Editor aim to make a default WordPress install more powerful. Plans for a redesigned admin interface are also in the works.

These are all positive steps. A more user-friendly WordPress opens the door to attracting more users. Novices will be able to get started more quickly.

There are also opportunities for those with a commercial agenda. Commercial block themes have yet to take off. But block-based plugins have. There is plenty of space for growth in these areas.

What could go wrong? There are a few potential trouble spots.

A change in project leadership could push WordPress in a more commercial direction. A new regime could theoretically focus on features that primarily benefit corporate users.

The composition of WordPress project teams could also have an influence. Yes, some contributors are volunteers. However, sponsored contributors are only increasing their role in how things work.

One or more sponsor companies may gain an outsized say in the future. What if a future WordPress version integrated something akin to Google’s AMP? This nominally open-sourced technology caused a stir. This sort of move could harm the software’s reputation.

That’s just an example – however unlikely. The point is that maintaining balance requires stewardship. It’s an important part of the project’s future success.

It’s Possible to Do Good and Make MoneyAs a market leader, WordPress is in a unique position. It’s not a commercial product. However, we can use it for commercial purposes.

The software can also give an online voice to just about anyone. It’s a tool that facilitates free speech – even if a person’s circumstances can get in the way.

And, unlike large companies, the WordPress project isn’t beholden to anyone. For example, it doesn’t have to bend to the will of an oppressive regime to access its people. There’s no profit or shareholders to worry about.

Let’s hope it stays that way. We’re living in a world where costs are rising – as are barriers. WordPress bucks this trend as free software.

All you need is a copy of WordPress and an idea. What’s next is up to you.

The post How WordPress Democratizes Publishing & Fuels an Economy appeared first on Speckyboy Design Magazine.

View Details

Analog film aesthetics hold a timeless appeal in digital photography, offering a distinctive look that can create a feeling of nostalgia and rustic artistry. The rich tones, subtle grain, and little imperfections of analog film create a depth often sought after by photographers.

Achieving these effects can be challenging with modern digital tools alone, but Lightroom presets will help to simplify the process. They’re invaluable to photographers who are looking to replicate those classic film styles. These pre-configured Lightroom settings allow you to apply specific styles to your photos with just a couple of clicks, saving time and ensuring consistency across all of your shots.

Whether you’re striving for Kodachrome’s vibrant colors or Fujifilm’s muted tones, these presets offer an easy and effective way to transform your digital shots. In this collection, we share the best free analog film Lightroom presets currently available, each designed to bring the charm of vintage photography to your modern digital workflow.

Magic Film 800 Preset (Free)This free preset offers a nostalgic film look with balanced colors and soft contrasts, mimicking the classic 800 ISO film. It is Ideal for portraits and landscapes and delivers a subtle, timeless aesthetic.

Retro Analog Lightroom Desktop Mobile Presets (7 DNG & XMP Presets)These presets deliver a vintage feel with warm tones and soft highlights. They are perfect for achieving an old-school look on both desktop and mobile and are great for lifestyle, portrait, and travel photography.

Kodak Kodachrome 64 Lightroom Preset (Free)Kodachrome 64 emulates the iconic Kodak film style with vibrant colors and sharp contrasts. This free preset is suitable for various photography styles and brings out rich hues and fine details, making it ideal for portraits, landscapes, and travel photos.

Analogue Film Collection Lightroom Presets (20 Presets)The Lightroom preset collection offers a diverse set of presets that replicate classic film aesthetics. They have been designed to enhance color richness and add a vintage feel to photos.

Kinsfolk 1888 Lightroom Film Presets (Free)Kinsfolk 1888 provides a nostalgic film look with muted tones and subtle grain. Perfect for simulating a vintage atmosphere. These presets work well for portraits, and lifestyle photography, adding a timeless quality to your images.

Analogue Beauty Kodak & 35mm Lightroom Presets (20 Presets)Analogue Beauty mimics the charm of Kodak 35mm film, offering a selection of presets that enrich color and add a vintage quality. They’re great for portraits, street photography, and lifestyle shots.

Analog Film Lightroom Preset (Free)This free preset recreates the classic film look with rich colors and subtle grain. Ideal for portraits, landscapes, and street photography. It provides a timeless aesthetic, enhancing photos with a nostalgic, cinematic feel.

Portra Film Lightroom Mobile & Desktop Presets (10 DNG & XMP Presets)These presets offer a classic film look with soft colors and smooth contrasts, ideal for portraits and lifestyle photography. They emulate the iconic Kodak Portra film, enhancing skin tones and adding a warm, vintage feel to your photos.

Kodak Ektar 100 Lightroom Preset (Free)This free preset will enhance your photos with vibrant colors and fine grain, emulating the popular Kodak Ektar 100 film effect. Suitable for various styles, this preset brings out rich details and bold hues, perfect for outdoor and travel photography.

35mm Analog Film Desktop & Mobile Lightroom Presets (10 DNG & XMP Presets)This preset replicates the nostalgic 35mm film aesthetic. It provides a classic analog look with rich colors and balanced contrast, ideal for adding rustic charm to your photos.

Kodak Film Overexposed Lightroom Preset (Free)This preset mimics the distinctive look of overexposed Kodak film. It enhances images with brighter highlights, softer shadows, and a slightly washed-out effect, creating a dreamy quality in photographs.

Analog Lightroom Presets For Mobile & Desktop (Free)This Lightroom collection includes multiple presets designed to enhance photos with a natural analog film look. It provides consistency, a recognizable style, and a beautiful sun-kissed feel for your photos.

Analog Film Mobile & Desktop Lightroom Presets (Free)This free collection offers various presets that emulate classic analog film aesthetics. These presets enhance photos with rich tones and a timeless vintage feel. They can be used on both Lightroom mobile and classic.

Vogue Film Lightroom Preset (Free)This free Lightroom preset offers a sophisticated film emulation, enhancing your photos with elegant tones and a polished finish. Ideal for fashion and portrait photography, it will add a touch of cinematic quality to your shot.

ColorMax Film Lightroom Preset (Free)This ColorMax Film preset will enrich your photos with vibrant, natural colors without oversaturation. It slightly lowers contrast for a balanced look, enhancing color depth and detail.

Kodak Funtime Retro Film Lightroom Preset (Free)This free preset replicates the charming retro film effect of Kodak’s single-use camera. It enhances photos with light, warm tones, adding a nostalgic and playful feel to various photography styles.

Kodak Portra 400 Lightroom Preset (Free)This preset emulates the iconic Kodak Portra 400 film, known for its exceptional color accuracy and fine grain. It enhances digital photos with natural skin tones and balanced color saturation, perfect for portraits and general photography.

Analog Film Tone Lightroom Presets (Free)This free preset collection mimics the aesthetic of vintage analog film and will add classic film tones, a balanced contrast, and a nostalgic feel to your photos. The preset is suitable for both color and black and white photography.

Fujifilm Dynamic Lightroom Preset (Free)This free Lightroom preset, inspired by Fujifilm film, will enrich your photos with vibrant colors and dynamic contrasts. It brings out rich details and vivid tones, making it ideal for portraits and landscapes.

Kodak Ektachrome Film Lightroom Preset (Free)This preset recreates the iconic look of Kodak Ektachrome film. It features a soft matte texture, vibrant yet natural colors, and balanced contrast, ideal for achieving a classic film appearance in your photos.

Analog Camera Lightroom Preset (Free)This preset mimics the aesthetics of traditional analog cameras. It enhances photos with vintage tones, balanced contrast, and a slightly muted color palette, creating a nostalgic and timeless feel.

Superia 800 Lightroom Preset (Free)This free Lightroom preset emulates the look of Fuji Superia 800 film, enhancing your shots with vibrant yet natural colors. It will add depth to your photos while maintaining smooth skin tones.

Fujifilm Cool Chrome Film Lightooom Preset (Free)This preset captures the distinctive look of Fujifilm Cool Chrome film. It adds cool tones, increased contrast, and vibrant colors to photos, perfect for achieving a modern, polished look in Lightroom.

79th Old Film Lightroom Preset (Free)This free preset will give your photos a retro feel with light magenta hues. It creates a soft, vintage look reminiscent of old film, ideal for adding a nostalgic touch to various photography styles.

Analog Film Lightroom Preset FAQ What are analog film Lightroom presets?They are pre-configured settings designed to replicate the look of traditional analog film. They provide the distinctive tones, colors, and grain associated with classic film photography. * How do analog film presets enhance my photos?They will transform your photos by adding rich tones, unique grains, and balanced contrast, giving them a timeless and nostalgic feel. * Are these presets compatible with all versions of Lightroom?Most analog film presets work with Lightroom Classic, Lightroom CC, and Lightroom Mobile. Before downloading, check the specific compatibility details of each preset. * How do I install these Lightroom presets? Open Lightroom and go to the Develop module. In the Presets panel, right-click and select Import. Locate the downloaded preset files and import them. * Can I make adjustments to the presets after applying them?Yes, these presets are fully customizable. You can tweak exposure, contrast, color, and other settings to match your desired aesthetic. * Are analog film presets suitable for all types of photography?*They are versatile and can enhance various photography styles, including portraits, landscapes, and street photography. Experiment with different presets to find the best fit for your photos. The Perfect Analog AestheticThese presets will save time, help maintain consistency, and simplify the editing process, making it easier to capture the desired analog aesthetic you have been looking for. They allow you to quickly add those rich tones, unique grains, and distinctive analog film effects to your photos.

Experiment with these presets and find the best fit for your personal photography style. Each preset provides a different interpretation of analog film, allowing you to explore various styles and enhance your creative expression.

The post 20+ Free Analog Film Lightroom Presets for Photographers appeared first on Speckyboy Design Magazine.

View Details

Creativity can be freeing for web designers. There’s nothing quite like reaching that “a-ha” moment. It’s when an idea transfers from your head to a screen.

I had that feeling a lot during my early days in this industry. My work wasn’t great, mind you. But I felt the thrill of doing things I’d never done. And it was even better if I had made a client happy.

There was a lot of creative energy back then. The web was a new medium – and we were building it as we went along.

It’s no secret that the industry has changed dramatically. The old methods of building websites are gone. Now, we work with advanced tools and premade elements.

I sometimes feel like web design has lost its creative flair. Has it? Or have we changed how we use our creativity?

Let’s explore what it means to be creative in modern web design.

We No Longer Build from ScratchAn original web design isn’t always a top priority these days. We often prioritize efficiency, usability, and accessibility in our builds.

To that end, we start projects with frameworks and themes that provide a head start. Tools like Tailwind CSS feature readymade layouts and components. WordPress themes may offer a complete website for us to customize. And we can’t forget about the advent of block patterns.

That’s the reverse of how things used to work. We used to fire up Photoshop or some other design tool. We’d start with a blank canvas and build from scratch.

It’s easy to romanticize that era. We may think of web design as a lost art. It’s as if we were craftspeople who built sites the right way. None of these modern tools could match those techniques.

But that practice isn’t sustainable for busy designers. There’s not enough time or budget for a long design process. Not when there are multiple projects to complete.

For better or worse, our workflows have changed. Web designers have had to adapt to keep pace.

Adding a Personal Touch to Predesigned ComponentsHow can we be creative when using predesigned components? Complete originality may be out of the question. However, there’s still an opportunity to add a personal touch.

There is no shortage of areas to change. An element’s color, size, and typography are prime examples. We don’t have to settle for the default look.

We can also choose components that include minimal styling. The WordPress block editor works this way. A default implementation is typically barebones. Tailwind CSS also prioritizes utility over looks.

Knowledge of these tools also helps. We can design in Figma with specific components in mind. That allows us to use our imagination while staying within the lines.

The process is reminiscent of a collage artist. It’s about pulling all of these different pieces together. From there, we seek to create a seamless user experience. The results can be compelling.

The added layer of convenience might make us feel guilty, though. For instance, page builder tools take the pain out of design. It’s more paint-by-numbers than drawing from memory.

Did we even “create” anything here?

Modern Web Design Is a Different ArtformSure, the design process has changed. That doesn’t mean we’re no longer being creative, though.

We’re still using our creativity – just in a different way. We’re using our knowledge and experience to build the best website possible. And we’re using our keen eye to make it beautiful and functional.

If anything, we’re fortunate to have these new tools and frameworks. Websites are becoming more complex all the time.

Perhaps that makes web design harder than ever. Designing from scratch and managing functionality might be too much to handle.

Our focus needs to be in many places at once. So, maybe we’re creating a collage while juggling!

Find New Ways to Be CreativeOne positive development is that designers don’t have to reinvent the wheel. We spend less time on the basics. That allows us time to concentrate on the details.

It’s the little things that can make a website stand out. We now have the tools to give us a head start.

Yes, these new methods can be limiting at times. However, web designers have plenty of experience in that area.

There have always been parameters for us to work within. It used to be the limits of CSS or user devices. Now, we try to bend and shape tools to match our needs. That also takes creativity.

You know what? Despite my initial concerns, those “a-ha” moments still exist. The change is in how we create them.

The post Creativity Hasn’t Left Web Design – It’s Just Different appeared first on Speckyboy Design Magazine.

View Details

Halftone Photoshop brushes are typically used to create a dotted effect, reminiscent of old print media. They are useful for adding a vintage or comic book appearance to digital artwork, making them a popular choice for artists looking to add depth and texture to their work.

Halftone brushes can be used to create backgrounds, add shading, and greatly enhance illustrations. They are popular in comic book art, poster designs, and retro-style graphics. They can transform simple graphics into detailed and engaging visuals, making them a valuable resources for artists looking to add a professional touch to their projects.

In this collection, you will find some of the best free halftone Photoshop brush packs currently available. They are perfect for digital designers at all skill levels and provide a range of options to suit various styles and requirements.

High-Resolution Halftone Photoshop Brushes (10 Brushes, ABR & PNG)This set includes ten high-resolution halftone brushes, all perfect for creating unique digital art. You can also customize colors, sizes, and positions.

Halftone Photoshop Brushes by Ryan Hamrick (Free, 10 Brushes)This free brush pack has been created to give your lettering a retro or vintage look and feel. Created by Ryan Hamrick, this halftone brush set is excellent for adding a subtle textures and a touch of shading to your typography.

Halftone Grunge Photoshop Brushes (12 Brushes)This pack offers 12 grunge-style brushes ideal for graphic novels and distressed art. You will also get four high-resolution vintage paper textures.

Halftone Brushes for Photoshop (Free, 65 Brushes)This huge collection of free Photoshop brushes is perfect for anyone wanting to experiment with their digital art using different halftone effects. You can also use them in Gimp, Affinity Designer, and Procreate.

Halftone Lines Vintage Photoshop Brushes (21 Brushes & 4 Textures)This shadow-hatching pack contains over twenty halftone line brushes, plus a set of high-resolution vintage paper textures as a bonus. These brushes are perfect for projects that need a light vintage touch.

Subtle Halftone Photoshop Brushes (Free, 7 Brushes)This halftone brush set adds a light touch of age and distress to your digital artwork. There are seven free brushes in this pack, and you can use them for your commercial work.

Dots & Squares Halftone Photoshop Brushes (18 Brushes)This pop-art-inspired set includes 18 square and dot brushes, all perfect for creating vintage comic books, retro artwork, or enhancing existing designs with a vintage flair.

2500px Halftone Photoshop Brushes (Free, 15 Brushes)This free collection comes with fifteen high-resolution brushes, all ideal for creating detailed halftone effects. Each brush is over 2500 pixels, allowing for precise and impactful digital art.

More Halftone Photoshop BrushesThese free brush sets were created using older versions of Photoshop but will still work in the latest versions. They are also not of as high a resolution as the brush packs above, but they are all still high-quality and worth your consideration.

Halftone Dots Brushes for Photoshop Free / 9 Photoshop Brushes

Dot Splatter Photoshop Brushes Free / 12 Photoshop Brushes

Halftone Techno Photoshop Brushes Free / 11 Photoshop Brushes

Halftone Lens Brushes Free / 46 Photoshop Brushes

Vintage Halftone Textures & Patterns Free / 25 Photoshop Brushes

Halftone Photoshop Brush Pack 8 Free / 15 Photoshop Brushes

Dots Halftone Brushes Free / 18 Photoshop Brushes

Circular Halftone Photoshop Brush Set Free / 10 Photoshop Brushes

Halftone Brush Pack One Free / 15 Photoshop Brushes

Halftone Brush Pack Two Free / 15 Photoshop Brushes

Halftone Brush Pack Three Free / 15 Photoshop Brushes

Halftone Brush Pack Four Free / 15 Photoshop Brushes

Bright Halftone Photoshop Brushes Free / 3 Photoshop Brushes

Grunge Halftone Photoshop Brushes Free / 9 Photoshop Brushes

How to Install Brushes in PhotoshopWith these simple steps, you will be able to quickly download, install, and organize your halftone brushes in Photoshop, ensuring they’re always at your disposal for your design projects.

Download the Brush Pack: Choose and download the Photoshop brush pack you want to use and save the file to your computer.
Extract the Files: Locate the downloaded ZIP file, right-click it, and select Extract All to unzip it. Save the extracted files in a folder on your desktop.
Open Photoshop: Launch Photoshop on your computer.
Access the Brushes Panel: Go to Photoshop’s top menu, click Window, and then select Brushes from the dropdown menu to open the Brushes panel.
Import the Halftone Brushes: In the Brushes panel, click on the menu icon (three horizontal lines) in the top right corner. Select Import Brushes and navigate to the folder where you saved the extracted brush files. Select the .abr file and click Open to import the brushes.
Organize Your Brushes: Click the folder icon at the base of the Brushes panel to create a new brush group. Name the group (e.g., “New Halftone Brushes“) and drag the imported brushes into this folder. This helps keep your brushes organized and makes it easy to find them the next time you need them.

Halftone Brush Packs FAQ What are halftone brushes?They are resources used in digital design to create patterns of dots or lines. These patterns simulate different shades of color, adding texture and depth to digital artwork. * Why should I use halftone brushes?Halftone brushes can add a vintage or comic book style to your work. They can make flat graphics more interesting and give your projects a unique, textured look. * Can I use these halftone brushes for commercial projects?It depends on the license of each brush pack. Check the terms of use provided by the creator. Some brushes are free for personal use, while others may be used commercially. * Are halftone brushes compatible with other design software?These brushes have been created for Photoshop, but some may work with other design applications like GIMP or Procreate. Check the compatibility before downloading. * How can I improve my designs look better with halftone brushes?Use halftone brushes to add texture to flat areas of your design. Combine them with other design elements, like shapes and colors, to create more dynamic compositions. * Can I adjust the size of halftone brushes in Photoshop?*, you can. Use the brush size slider in the Brushes panel (or press the bracket keys) to re-size the brush.

The post 20+ Best Free Halftone Photoshop Brush Sets for Digital Artists appeared first on Speckyboy Design Magazine.

View Details

The web is in a constant state of change. What we build today will inevitably need to adapt tomorrow. And the challenge of keeping up is only growing.

Modern websites have multiple dependencies. They include everything from PHP, your content management system (CMS), to JavaScript libraries. Even the classic 5-page brochure site can’t escape their clutches.

None of these items are immune to change. Sometimes, those changes add extra work to our plates.

The situation presents a multitude of challenges for developers. We may need to refactor a feature’s code. Or go through an arduous manual testing process. Both involve a lot of time and money.

So, how do you carry out such an endeavor? Here are some tips for managing software changes that impact your website.

Assess the Impact of the ChangeOn the surface, some software changes may not seem so serious. For example, updating your WordPress install. It’s often a routine task – until it’s not.

Sometimes, a theme or plugin undergoes an overhaul. The new version could mean changes to your implementation. Thus, you won’t want to click the “update” button until you assess what’s happening.

You can learn a lot by reading documentation regarding the change. For example, a changelog may offer vital information.

Hopefully, you’ll gain a clearer picture of what steps you need to take. If not, it’s time to contact the developer or post in a support forum.

We’re also assuming you have intimate knowledge of your website. That includes an understanding of how the site was built – along with its dependencies.

What if you inherited the website from another developer? You may need to dig a little deeper to gauge the impact of an update.

Create a Staging Environment for TestingIt’s always worth repeating: Don’t implement critical updates without testing. You run the risk of something breaking in the process. Not fun at all.

A staging environment will allow you to test without risk. It’s an exact copy of your website, hosted locally or on a remote server.

Think of a staging environment as a playground for experimentation. You can turn on debugging or install development tools to catch any errors. Plus, you can add and remove components like plugins or libraries.

You might make a mistake or two – but that’s OK. There’s always an opportunity to reverse your changes or start fresh.

A staging environment is perfect for process-oriented updates – like upgrading to a new version of PHP. You’ll have a separate space to investigate and repair each issue. Again, it’s not something you want to do on a production site.

Your web host may offer a staging option. That may be your best bet. Ideally, you’ll want to use a server configuration that is as close as possible to your production environment.

If that’s not possible, try to get as close as you can with a local install. Having a place to test is the most important thing.

Take Notes as You TestSome web hosts allow you to push your changes from staging to production. However, this isn’t always an option. Therefore, you’ll want to take notes during testing.

There are a lot of steps involved with software changes. For example, you may have implemented several code tweaks. A crucial item could easily get lost in the process. That might be a problem when it’s time to launch.

Having some project documentation on hand can be helpful. It will serve as a reference as you deploy any changes.

What should you include in your notes? Here are a few ideas:

A list of changed files;
Changed server or CMS settings;
Items (like plugins or libraries) that have been added or removed;

These examples are a starting point. Feel free to document anything you think is relevant to your project. You’ll be glad you took the initiative when looking back! This step lessens the chances of making a mistake.

Oh, and be sure to back up your site before making changes. That can be a lifesaver should something go awry.

Prepare for LaunchNow that you’ve tested (and taken good notes), it’s full speed ahead! Much of what happens next will depend on the scope of your project. However, there are a few best practices worth following.

The first is to schedule a time to make the required changes. Try to do so when user impact will be minimal. Be sure to give yourself enough time for deployment and testing. You’ll also want to alert any stakeholders of what’s happening.

Next, create a checklist of tasks. List each step of the process in order. It’s a simple thing – but handy for keeping track of progress.

Also, make sure you have access to everything you need. For example, you may need permission to overwrite files on the web server. Or the account details for a third-party provider.

And don’t forget about any two-factor authentication tied to client accounts. You may need to coordinate a time to gain access.

Once you’re fully prepared, you can move forward with confidence.

Turn Big Changes into No Big DealUpdates to system software and site components could mean extra work. It’s a staple of website maintenance. And you never know when something new will pop up.

Web designers need all the help they can get. As websites have more moving parts, so does the likelihood of something major coming along.

It may sound a bit scary – but do not worry! A solid process can simplify matters.

Assess your situation, test on a staging environment, and document your work. Prepare for the change as you would a job interview. When something comes up, you’ll be able to handle it gracefully.

The post What to Do When Your Website Faces a Major Software Change appeared first on Speckyboy Design Magazine.

View Details

Futuristic fonts are characterized by their geometric shapes, clean lines, and creative shapes. Each contributes to a clean aesthetic that resonates with contemporary viewers. Their appeal lies in their ability to transform basic typography into something more modern, elegant, and innovative.

They can add a stylish, contemporary edge to your work. They are particularly effective in projects that deal with future-thinking ideas or aim to present an ultra-modern image. Because of their distinct appearance, futuristic fonts are popular in logo design, digital media, advertising, or any area where a high-tech aesthetic is needed.

The use of futuristic fonts can influence how a message is perceived. They can make a brand appear more sophisticated and aligned with cutting-edge technology. This can help attract viewers who are interested in innovation, potentially increasing the impact and effectiveness of your design.

In this collection, we have a curated selection of professionally and beautifully designed – and, of course, free – futuristic fonts for you. By choosing the right futuristic font, you can make your work stand out and appeal to the modern viewer.

The Top Futuristic Display Fonts for CreativesMaswen Futuristic Sans-Serif Font (Free)Maswen draws inspiration from space travel. Round and bold, it comes in regular, outline, and stencil styles. It is perfect for adding a modern touch to your projects.

Science Modern Futuristic Font Science is a minimalist, futuristic font inspired by the technology seen in sci-fi movies and games. It comes in two slightly different variants, offering a clean and modern aesthetic for your projects.

Halfomania Sans-Serif (Free)Halfomania is a free futuristic sans-serif with sharp uppercase and rounded lowercase characters. Its minimalist design makes it ideal for projects looking for a modern and innovative aesthetic.

Planeto Elegant Futuristic Font Planeto is a bold, futuristic font with geometrical shapes and sharp angles, giving it a distinctly technological appearance. It is available in a single style, uppercase.

Strato Futuristic Outline Font (Free)Strato is an outline font with a clean, geometrical design. Its characters are a mix of rounded corners and smooth lines, making it ideal for projects that need a minimalistic yet distinctive typography style.

The Bokrun Futuristic Display Font Bokrun is a futuristic font with an angular, sharp, and unique design. It offers three variants (regular, outline, and shadow) and would be perfect for gaming UIs or cutting-edge branding.

Necosmic Futuristic Font (Free)Necosmic is characterized by its unique cosmic-inspired design. It features elongated lines and rounded edges, and is perfect for projects that need an otherworldly aesthetic.

Great Futuristic Sans-Serif Font Great Futuristic is a modern, sci-fi-inspired display font with bold, uppercase characters designed to convey a sense of advanced technology and innovation.

Coder Minimalist & Futuristic Font Coder is a futuristic font designed with a minimalistic, digital aesthetic that mirrors the precision of coding. Its characters are a blend of angular and rounded shapes, perfect for any technology-related projects.

Lombok Futuristic Typeface (Free)Lombok is a distinctive typeface with sharp, geometric cuts and a minimalist style. It’s particularly well-suited for logo design. The light version is available for personal use only.

Venera Futuristic Font (Free)Venera is a free futuristic sans-serif font with weights ranging from light to heavy. Each weight has its own unique character, giving it a dynamic and contemporary look.

Kleemax Futuristic Display Font (Free)Kleemax is a free display font with bold, sharp angles and smooth curves that perfectly capture the cyberpunk aesthetic. It is ideal for high-impact visuals like advertisements or branding design.

Orbitron Geometric Sans-Serif (Free)Orbitron is a dynamic, futuristic font that features clean, geometric shapes with a techno, space-age aesthetic. It is available in multiple weights, including light, medium, bold, and black.

Angular Futuristic Dystopian Font (Free)Designed with a dystopian aesthetic, Angular is a free futuristic font with sharp, angular lines that give it a bold and impactful look. It is ideal for projects that require a bold and edgy typeface.

Stifly Modern Futuristic Font (Free)Stifly is a free, futuristic display font that combines pixelated lines with a blocky structure, making it perfect for delivering a strong message. It is well-suited for bold headlines and modern branding.

Potra Rounded Futuristic Font (Free)Potra is an all-caps futuristic font with a rounded, geometric design, giving it a distinctly elegant look. Its smooth curves and clean design make it highly readable for both print and digital media.

Monoton Futuristic Font (Free)Monoton is a unique, single-weight display font with a continuous, looping line that gives each character a futuristic and retro appearance.

Mars Blocky Font (Free)Mars is a bold, futuristic display font with clean lines and blocky geometric shapes. This hard to read font should only be used on strong and impactful projects.

Space Futuristic Display Font (Free)Space is a free futuristic font with a retro touch that has been designed to emulate the form and order found in spaceships through its use of curved edges and large block elements.

Exo Geometric Sans-Serif (Free)Exo is a free geometric font with a futuristic aesthetic. Its clean, precise lines ensure optimal readability across both digital and print, giving you a versatile font for modern projects.

Lot Futuristic Font Family (Free)Blanka Display Font (Free)Wavy Futuristic Display Font (Free)Mylodon Display Font (Free)Futuristic Font FAQs What are futuristic fonts?Futuristic fonts are typefaces designed with modern, inventive features, often influenced by science fiction and technology. They usually include geometric shapes, clean lines, and are created to appear advanced and stylish. * How do I choose the right futuristic font for my project?Consider the project’s theme and the message you want to share. Look for a font whose style aligns with the overall design and enhances the project’s aesthetic without compromising readability. * What is the best use for futuristic fonts?While futuristic fots are versatile, they work best in contexts that align with themes of innovation and modernity, such as tech startups, gaming, and digital marketing. They might not be suitable for more traditional projects. * What should I consider about readability when using futuristic fonts?Futuristic fonts often have unique designs that can affect readability, especially at smaller sizes. Always test the font in context to ensure that it remains legible and effective in communicating your message. * Should futuristic fonts be paired with other font styles?Yes,futuristic fonts can be paired with other font styles to create a balanced design.It’s usually best to pair them with simple, more neutral fonts to maintain focus and ensure the design doesn’t become overwhelming. * What are the common uses of futuristic fonts outside of digital media?*Apart from digital projects, futuristic fonts are popular in print media such as posters, flyers, and brochures for events or products. They are also used in product packaging and signage to attract a tech-savvy audience.

The post 20+ Best Free Futuristic Fonts for Designers appeared first on Speckyboy Design Magazine.

View Details

A web designer’s schedule can be challenging. We try to plan so that projects don’t overlap. Scrambling to launch multiple websites simultaneously isn’t ideal. But it seems like something always disrupts our carefully crafted agenda.

A stalled project is often to blame. Everything is moving along – until it isn’t. Suddenly, your eager client has gone quiet. And you’re left to wonder and wait.

It may be a temporary situation. But it can drag on for months or longer. And the delay can have a significant impact.

Not only does the situation hurt your schedule, but it can also affect your bottom line. That money you were expecting hangs in the air along with the project. It’s not a good situation for your business.

So, why do web design projects come to a standstill? Here are a few thoughts on the root causes. Along the way, we’ll offer some tips to get things moving again.

Too Much Design by CommitteeProject stakeholders must work together effectively and efficiently. But the more people involved, the harder it is to collaborate. And we can’t forget about the difficulty in achieving consensus.

The result is something that web designers loathe: design by committee. It’s a situation where everyone puts their ideas on the table. The ideas often conflict with and contradict each other. A lack of leadership and a clear vision for the project cause chaos.

This internal strife can grind progress to a halt. Even worse is that web designers are caught in the middle. We listen to the gripes but feel powerless to act.

All is not lost, however. If your client’s leadership is amiss, you might be able to help. Stepping into the void and bringing people together can restart progress.

The key is to get everyone working toward the same goal. Once that happens, things can come together quickly.

The Woes of Client-Created ContentClients can be great at thinking big when it comes to content. They’ll have grand ideas for in-depth pages and blog posts. They envision a website that’s teeming with compelling articles.

Ideas aren’t the problem. The ability to deliver on them gets in the way. The reality tends to hit clients when it’s time to do the work.

It’s among the most common reasons for a slowdown. Ambitious clients bite off more than they can chew. They may feel overwhelmed by the task ahead of them.

The difficulty for web designers is that content is often the last piece of the puzzle. We can’t move forward without it. Thus, a beautiful new website may sit dormant while we wait.

Thankfully, it’s another area where we can pitch in. Our clients aren’t necessarily content creators. Therefore, they need someone to act as a guide.

You can walk them through the content creation process. Provide writing prompts or templates that clients can fill in. Short of that, you might also offer to produce the content yourself.

Content-related delays can go on indefinitely. Being proactive could make a positive difference.

A Client That’s Strapped for TimeSome clients have multiple responsibilities. It’s especially the case for small organizations. A decisionmaker may wear many hats. Their website is just one.

Building a website requires time to focus on the details. A client will need to review the site’s design and content. They’ll also need to coordinate with team members. There’s also the time needed for meetings and brainstorming.

It’s a challenge even during relatively quiet times. And it can slow things down immensely when something unexpected pops up.

It can be difficult for a client to ramp things back up. Regaining momentum after a long break doesn’t come naturally. Thus, they may put the project on the back burner.

You could wait for your client to restart things. But this also adds uncertainty to your schedule.

Communication might bring the project back to life. Get in touch with your client and offer assistance. Try to encourage them to delegate tasks when possible.

Everyone has limited time to get things done. Demonstrating a willingness to help may ease a client’s burden.

Deal with Project Delays Like a ProDealing with project delays is a part of being a web designer. We may pride ourselves on being timely. But client-related stoppages are out of our control.

And there are a variety of reasons for a standstill. A client may have too much on their plate. They might also struggle with managing other stakeholders. Or they had an unexpected issue with their budget. The sky’s the limit.

The challenge for designers is that we need client participation. Sure, we can perform some tasks in the background. But we can’t finish the job without their feedback and approval.

Sometimes a delay is a positive. It frees up time to work on other projects while we wait. But that’s not always the case.

Indeed, the uncertainty can hang over our heads. When a client does get around to restarting, it inevitably clashes with our schedule. We’re left trying to squeeze the project into what we’re already doing.

The best we can do is to try and keep things moving forward. Making an effort here will be appreciated by your clients. As is knowing they aren’t alone in wanting to finish the project.

The post Why Do Web Design Projects Come to a Standstill? appeared first on Speckyboy Design Magazine.

View Details

I’ve learned many lessons in my years as a grumpy designer. One is to try and separate work from the rest of your life. It’s a healthy practice – one that leads to (slightly) less stress.

But, try as I might, certain things stick with me. Things that stay at the front of my mind all day and night. This vicious cycle results in less sleep and more grump. Yes, that’s wonderful for inspiring columns. Not so good for the soul, though.

I’m willing to bet that others are facing the same issue. The growing complexity of web design is making it harder to relax.

Feeling better starts with sharing. So, allow me to dig into the depths of my psyche. The following is a look at web-related issues that keep me up at night. Make a cup of coffee and join me on this nerve-wracking journey.

The Never-Ending Quest for Web SecuritySecurity has long been a thorn in our sides. We can build websites in any number of ways. However, they all seem to be a target for malicious actors.

I work primarily with WordPress. I love the flexibility it offers. But securing these sites is a constant battle.

Hackers have numerous points of attack. They might take advantage of a plugin vulnerability. Or they might crack a weak password. They’re even stealing session cookies these days.

WordPress isn’t alone in the struggle for security. But working with it each day seems to magnify the issue. It has become a constant presence in my mind.

Sometimes, the situation feels hopeless. You plug one security hole – only to see another one pop up. Cleaning up a hacked site is tedious at best. Plus, the thought of data theft is enough to make anyone nervous.

Perhaps the answer lies in not going it alone. Web security is a vast subject. Threats continue to evolve. Thus, working with expert tools (and humans) is worth the price.

Even so, security issues make it harder to fall asleep.

The Always-on Work Culture of a Web DesignerRemember my goal of separating work and life? I’m terrible at it. Sure, I do well enough during slow times. But I drown when things get busy.

The web industry has a 24/7 work culture that’s hard to escape. A website won’t wait until business hours to break. Most clients won’t consider the clock when making a request, either.

It used to be easier to get away. Before smartphones, you could leave your desk and inbox behind.

I can recall vacationing in places that had no internet access. I could go an entire week without email. How quaint!

Good luck avoiding your inbox these days. You’ll need self-discipline and clients who can temporarily live without you.

Yes, I try to turn my brain off. I’ll even abstain from replying to an email – for a while. Eventually, my brain gets the best of me. Things stay on my mind until I address them. So, why not respond?

That makes sense on the surface. It doesn’t lead to much peace after hours, though.

The Things Out of My ControlWeb designers can only control so much. Security is one example – but there are others. Modern websites tend to rely on third-party providers.

That covers everything from web hosting to SaaS (software as a service) to plugins. We may get to choose which tools to use. But we must also trust them to deliver.

What happens when something goes wrong? We might be able to contact a support person. However, some providers take days to respond. Plus, some companies are using chatbots as their first point of contact. Navigating these tools is no picnic.

The result leaves us stuck in the middle. Our clients want to know what’s going on. Meanwhile, we can only rely on what the provider tells us. A lack of communication can be frustrating and worrisome.

It’s about more than downtime, though. Sometimes, a product makes a significant change that impacts your website. Things may not work the way we (or our clients) expect. That leaves us scrambling to figure it out.

Gmail’s recent bulk-sender policy changes are an example. The change’s impact went beyond my expectations. That led to a lot of rushing around to fix email deliverability issues.

Sure, we can try to prepare for the inevitable. But sometimes, all we can do is react.

The Expectations of Clients and MyselfExpectations can keep any web designer up at night. Clients are asking more from us. They want high-end features in exchange for bargain-bin pricing.

That leads us on a wild goose chase. The quest to be faster, cheaper, and better. How do we squeeze in more projects in the same timeframe?

The expectations we have for ourselves are also a burden. I pride myself on getting things done. I want to create the layouts, pick the colors, and write the code. It’s the way I’ve done things for over two decades.

That’s becoming harder, though. The right tools can help. But there’s still a massive responsibility to do the job right.

Part of this may be cultural. Growth is expected and encouraged. After all, who wants to stay the same?

We don’t prioritize comfort nearly enough. Doing so may be perceived as accepting the status quo. Nobody wants to look like they’re stagnating.

All told, this adds to the pressure we feel. We must move onward and upward, regardless of the consequences.

Making Sense and Making PeaceSo, what lessons have I learned? That was the point of writing this down, right?

I think web designers need to create boundaries – and stick to them. Otherwise, it’s too easy to get pulled into that vicious cycle. It’s hard – but better than the alternative.

Self-forgiveness is also a factor. It’s OK if you don’t know how to do something. There’s no shame in needing extra time to complete a project.

Sometimes, we’re harder on ourselves than any client could be. So, permit yourself to be imperfect. Give yourself some grace. None of us go through life without experiencing adversity.

Finally, don’t let your job become your only source of identity. It took me a while to understand that advice. But we all need time away from the online world.

Will the things above still keep me awake? I’m betting that they will. Perhaps it’s better to accept it instead of fighting it. Tomorrow can always be better.

The post Things That Keep the Grumpy Designer Awake at Night appeared first on Speckyboy Design Magazine.

View Details

Heavy fonts are essential resources for any designer looking to make an immediate impact. They have the visual strength to command attention, characterized by their thick strokes and pronounced presence. They’re perfect for when your design needs to speak loudly and clearly.

These ultra-bold typefaces are more than just eye-catching — they shape how a viewer feels about your message. Whether it’s the confidence of a bold headline or the urgency of a promotional ad, heavy fonts can amplify your design’s voice. This makes them ideal for headlines that need to stand out, advertisements that need to capture quick interest, or any text that needs heavy emphasis.

Categorized into serif, slab serif, sans-serif, and display, in this collection we share a curated selection of the best free heavy and ultra-bold fonts currently available. These are the heavy fonts you’ve been looking for!

Heavy & Ultra Bold Serif FontsThese fonts feature prominent, bold strokes combined with traditional serifs, providing a powerful yet elegant appearance. They’re excellent for authoritative print media and digital content where visual impact and readability are essential.

Abril Fatface Fonts (Free)Inspired by 19th-century advertising typography, Abril Fatface features an ultra-bold stroke and fine details, making it perfect for elegant headlines and print materials.

Norgen Heavy Serif Font A robust, modern serif with clean lines and geometric influence, Norgen delivers a contemporary feel that is suitable for impactful editorial content and assertive branding designs.

Bespoke Serif Font (Free)Bespoke Serif is characterized by its tailored appearance and sturdiness, making it a solid choice for any design needing to convey reliability and style.

Arvo Font Family (Free)Arvo is a geometric serif that balances well between heavy and light strokes, offering excellent readability for both print and screen applications.

Espano Heavy Serif Font Espano blends classic serif elegance with bold modernity, providing a dynamic tool for standout headlines and logos that demand attention.

Calendas Plus Bold Serif Font (Free)Calendas Plus incorporates soft brush-like features and strong serifs, which are ideal for creating a sophisticated yet approachable look in upscale marketing materials and book covers.

Fiona Retro Serif Font Fiona captures the essence of vintage design with its heavy, decorative serifs and slightly condensed letters, perfect for projects aiming for an old-school feel.

ZT Chintzy Heavy Font (Free)This playful bold font stands out with its chunky letters and slightly irregular shapes, ideal for creative projects that want to add a touch of whimsy.

Heavy & Ultra Bold Slab Serif FontsKnown for their block-like serifs and hefty form, these slab serifs exude strength and stability. They are ideal for making a pronounced impact in advertising, branding, or headline text that needs to stand out.

Aleo Slab Serif Black Font (Free)Aleo offers a sleek, contemporary design with well-balanced proportions and excellent legibility, making it suitable for both display and body text in both professional and creative settings.

Crabs Slab Serif Font A sturdy slab serif with a friendly appeal, Crabs Slab provides a versatile foundation for branding, advertising, and editorial design that requires a touch of warmth.

Chunk Ultra-Bold Slab Serif (Free)Chunk is a bold, slab-serif font that offers a robust and friendly appearance, perfect for eye-catching headlines and strong statements in print and digital formats.

Toma Sunn Strong Slab Serif Font (Free)Toma Sans presents a sunny, bold look with rounded edges, ideal for engaging advertisements, playful branding, and user interfaces.

Heavy & Ultra Bold Sans-Serif FontsThese sans-serif fonts offer a modern, clean aesthetic with heavy characteristics. They ensure excellent readability, perfect for dynamic branding and high-impact digital displays.

Frick Bold Headline Font (Free)Frick is a geometric, all-caps typeface that stands out with its clean, sharp lines, suitable for modern logo design, headers, and text highlights where clarity is important.

Franie Geometric Sans-Serif Font With its sleek, geometric structure, Franie excels in delivering a bold minimalist elegance for sophisticated logos, packaging, and high-impact visuals in contemporary designs.

Uni Sans Font Family (Free)Uni Sans is a dynamic sans-serif that combines geometric precision with a slight character warmth. It is versatile for both text and display applications across various media.

Bemio Ultra-Bold Sans Serif Font (Free)Bemio is an ultra-bold sans-serif that offers a friendly yet assertive tone, making it perfect for branding that needs to convey confidence and approachability.

Candice Heavy Bold Sans-Serif (Free)Candice is a bold, expansive sans-serif designed to make a big impact in gaming, entertainment, and advertising with its playful yet assertive style.

Outage Bold Geometric Sans-Serif (Free)Outage delivers a striking appearance with its unconventional letterforms and energy, which are ideal for creative projects looking to make a strong visual statement.

Fredoka Round & Bold Sans-Serif (Free)Fredoka is a rounded, bold font that is perfect for interactive designs, offering a friendly look and feel that will help to enhance readability and viewer engagement on any platform.

Chillax Sans-Serif Font (Free)Chillax blends casual style with boldness, which is excellent for designs that call for a laid-back yet compelling tone. Perfect for both digital content and casual print layouts.

Garet Sans-Serif Font (Free)Garet stands out with its clean, geometric lines and contemporary boldness, making it ideal for modern branding, sophisticated signage, and editorial design.

Antipasto Pro Font Family (Free)A playful yet sturdy typeface with distinctive rounded details, Antipasto is excellent for brands looking to project warmth and friendliness.

TypoGraphica Geometric Bold Font (Free)Typographica offers a unique blend of vintage and modern traits, ideal for projects that need a touch of old-school charm with the clarity of modern design.

Clash Grotesk Sans Font Family (Free)This contemporary grotesque font family is designed for high legibility and strong visual impact and is suitable for both text and display purposes in various media.

ONRAMP Bold Sans-Serif Font (Free)Onramp offers a rugged, industrial feel with its heavy, condensed form, perfect for impactful headlines and statements that require a masculine touch.

Finder Heavy All-Caps Sans-Serif (Free)Finder is a bold, all-caps sans-serif that excels in clean, attention-grabbing headlines and signage, offering a modern aesthetic for contemporary layouts.

The Bold Font (Free)This straightforward, bold sans-serif is ideal for designers who need a versatile, impactful font for headlines, posters, and branding that stands out.

Heavy & Ultra Bold Display FontsDesigned for maximum impact, these display fonts are characterized by their unique, bold designs. They are perfect for uses where capturing the viewer’s attention quickly is crucial, such as in banners, posters, title sequences, and logo designs.

Misoka All-Caps Display Font (Free)Misoka offers a soft, rounded design with heavy strokes, providing a friendly yet strong presence suitable for branding, advertising, and user interfaces.

Klashey Heavy Display Font Klashey is a decorative, heavy display font with distinctive letterforms that have been designed to grab attention in any creative or commercial project.

Fat Heavyweight Font (Free)Blogh Quirky Display Sans-Serif Blogh combines bold, impactful letters with a slightly playful edge, which is perfect for modern digital platforms and creative visuals needing a standout font.

Chatlong All-Caps Display Font (Free)Chatlong is characterized by its heavy, elongated letterforms, offering a unique style for editorial content, posters, and advertising that aims to be memorable.

Mosko Mappa Retro Display Font (Free)Mosko Mappa is a retro display font with a distinctively bold, adventurous spirit, ideal for thematic designs in entertainment and retro-inspired projects.

Sniglet Rounded Display Font (Free)Sniglet’s rounded, chubby letterforms exude playfulness and charm, perfect for children’s books, fun packaging designs, or anywhere a touch of whimsy is needed.

Sobear Display Font (Free)SoBear features robust, bold strokes with a casual flair, making it excellent for informal yet strong branding and public-facing messaging.

Motley Forces Heavy Font (Free)Motley Forces provides a commanding, bold look with a touch of irregularity, which is suited for designs that need to make an immediate impact with a bit of ruggedness.

Heavy Font FAQs What are heavy fonts?They are fonts with thicker strokes and strong characters, perfect for capturing attention in various design projects. * Can I use these free fonts in commercial projects?Many free fonts come with licenses that allow commercial use, but always verify the license to ensure compliance. * Where can ultra-bold fonts be used effectively?These fonts are ideal for headlines, advertisements, promotional materials, and any text that needs to stand out clearly. * Can heavy fonts be used in body text?While possible, using heavy fonts for body text can make extended reading challenging. They work best in shorter, impactful statements. * How do I choose the right heavy font?Consider the font’s readability, the mood you want to convey, and how it complements other elements in your design. * How do heavy fonts impact the overall design?Heavy fonts add weight and prominence to your text, influencing the design’s feel and directing the viewer’s attention. * What are some common mistakes when using heavy fonts?*Overusing heavy fonts can overwhelm a design. To maintain aesthetic harmony, it’s best to balance their use with lighter text elements. A Heavy & Ultra-Bold BalanceWhen using heavy or ultra-bold fonts, it’s important to balance their impact to prevent overwhelming your design. They should highlight your most important elements without dominating the entire project.

And when pairing them with other typefaces, a good rule of thumb is to combine them with simpler, lighter fonts. This contrast not only enhances readability but also creates an appealing visual hierarchy.

Experimenting with these heavy and ultra-bold fonts can dramatically change the look and feel of your work. The free fonts here give you the flexibility to test multiple designs without any investment. Try them out in your next project to see how they can enhance your design.

The post 30+ Best Free Heavy & Ultra-Bold Fonts for Designers appeared first on Speckyboy Design Magazine.

View Details

The web makes our lives more convenient. We can order a T-shirt or a pizza with a few clicks. We can conduct global research without leaving our seats. It has changed the way we do just about everything.

As web designers, we seek to add even more convenience. We employ systems to “remember” users. We store customer information in the cloud. These features make it easier for people to get things done.

A seamless user experience is the goal. It’s both well-intentioned and potentially lucrative. There is often a cost when it comes to security, though.

Malicious actors are taking advantage of this convenience. Methods like stealing session cookies are prevalent. Thus, staying logged into your website is a risk.

That’s just the tip of the iceberg. Indeed, making the web more secure means less convenience. Here are a few examples of what that looks like. In addition, we’ll talk about why these measures may be temporary.

Using Two-Factor Authentication EverywhereIt’s becoming harder to avoid two-factor authentication (2FA). This method is in place just about everywhere – including your WordPress site.

The idea makes perfect sense. The extra layer of authentication means a hacker needs more than a username and password. They can’t access your account without a 2FA code.

However, 2FA is far from perfect. The aforementioned stolen session cookies are proof. A hacker with a valid cookie can bypass other login requirements.

Plus, 2FA is a hassle for users. Think about all the extra time it takes to log into each website you use. It makes people want to stay logged in – and run the risk of a stolen session cookie.

Help may be on the horizon. Passkeys are poised to simplify the login process – while maintaining top security.

Passkeys rely on a user’s device to replace a username and password. Users authenticate using the same method they use to unlock their devices. PINs and biometrics are examples.

That may ease the burden. But we’re likely to be stuck with current methods a while longer.

Locked down WordPress FilesThe theme and plugin ecosystem are a big part of WordPress. You can add new items or update existing ones. It’s all done within a single dashboard. Once again, it’s a very convenient feature.

The problems start when a user account is compromised. A malicious actor can add all manner of malware. And they don’t have to be an administrator. Some vulnerabilities allow a lesser user to bypass WordPress permissions.

The answer appears to be locking down your WordPress install. For example, a site may allow its staging environment to write to files. That would allow you to add or update software. But it would also be protected by an HTTP login.

The production site would allow for uploading media files – but nothing else. That means any theme or plugin installations must come from staging first. The same goes for updates.

Yes, it’s an extra step. But it’s one worth taking. This method not only increases security. It is also a best practice for testing. It could prevent issues for mission-critical sites.

Not every web host offers staging, though. Or an easy way to lock down an install. But this may be the best option until something better comes along.

Speaking of that, security providers are devising new strategies. That could provide a balance between security and ease of use.

Limiting Code Execution within Site ContentSometimes, we need to execute code within a site’s content. For example, we might embed JavaScript from an advertising network into a blog post.

WordPress facilitates this via its Custom HTML block. Some plugins enable adding code snippets as well.

It’s a handy feature. You can add all sorts of third-party widgets that engage users. They might also produce revenue.

It’s also an easy way to introduce malicious code. WordPress tries to sanitize input. However, not all themes and plugins follow best practices. Unsanitized code could infect your site – and impact users.

Limiting code execution is one way to prevent security issues. You might disable the Custom HTML block, for instance. You could also create HTTP security headers at the server level.

Artificial intelligence (AI) could soon be a factor. A tool that can detect malicious code in real-time might prevent a successful attack. That would empower users without creating as many security concerns.

A Secure Website Requires SacrificeSecurity puts web designers in a difficult position. We strive to build great user experiences. We want to help our clients to do their jobs with ease.

But we also want our websites to be secure. That requires us to make some difficult decisions. Do we sacrifice convenience for safety?

The answer appears to be “yes” for now. Insecure login methods and writeable folders are risky. So is allowing users to execute code within their content. And it seems that malware continues to thrive in these environments.

As such, closing these avenues of attack makes sense. Even if it creates extra hurdles for users.

We can still hope for a better future, though. The advent of passkeys and AI-driven security might be just what we need. Their time can’t come soon enough.

The post Better Web Security Means Less Convenience – For Now appeared first on Speckyboy Design Magazine.

View Details

World maps play a crucial role in various design projects, helping to convey global perspectives and data visually. They serve as a foundational element for designers looking to highlight international or geographical aspects in their work.

This collection includes a wide range of free world map templates available across different platforms and design software. They come in various file formats, such as Illustrator (AI and EPS), Photoshop (PSD), scalable vector graphics (SVG), and Figma. This diversity of formats ensures that you can easily integrate these maps into your projects using your preferred tools and workflows.

By using these free templates, you can save time and resources while still delivering high-quality visuals that make your projects stand out.

View Details

Web designers take pride in being knowledgeable. We help clients navigate challenges and establish their little corner of the internet. We guide them toward success. Doing so requires experience and know-how.

The industry has worked this way for years. However, the situation feels different these days. The job is now akin to untangling a ball of wires. We keep pulling strands while continually finding new knots.

Building websites is no longer straightforward. There is no shortage of moving parts to manage. Not to mention the related technologies we work with. It’s enough to keep freelancers up at night.

So, how did we get here? And what can we do to bring some sanity back to our lives? Let’s try and sort this out together.

More Powerful Websites Equals More ResponsibilityBuilding a high-functioning website was once limited to enterprise organizations. They had the resources to build from the ground up. The rest of us had to settle for less.

That’s no longer the case. For example, there are now eCommerce solutions for all budgets. A freelancer can put an online store together with off-the-shelf parts.

Tools like WordPress and its ecosystem have closed the gap. The benefits are tangible. A highly functional site is now within everyone’s reach. A whole market has opened up for solo entrepreneurs and small agencies.

However, these tools also place a great deal of responsibility on developers. We now have to consider:

Keeping software up to date;
Security monitoring and remediation;
Interoperability with payment gateways, etc;
Adapting to changes in software;
Accessibility;
Privacy regulations;
Performance;
Customer support and training;

Large organizations have staff dedicated to these tasks. They should also have the budget and expertise to do the job right.

As for freelancers? Well, we must do all or most of it ourselves. All on a shoestring budget.

Looking after a single website is hard enough. Now, multiply that difficulty by the number of sites you manage. The whole thing seems unsustainable.

Website Issues Are More Complicated than EverOdds are, you don’t have time for a broken website. But break they do. And their issues tend to be complicated.

Sometimes, it’s a software incompatibility. Perhaps that plugin update isn’t playing nicely with the rest of your site. You may have to work with support staff to find a resolution. That could take days or weeks.

Security issues are even worse. A hacked website can leave you scrambling for answers. And it can easily monopolize your time. There’s also the possible hit to your (and your client’s) reputation.

Then there are unexpected changes to the software we use. Themes and plugins may undergo major revisions that require developer action. From there, it’s about researching and implementing the necessary changes.

Fixing these issues takes time and money. They also place a burden on freelancers and website owners.

How Do We Simplify This Mess?Maybe the proverbial cat is already out of the bag. Websites are increasingly complex – and they aren’t going back. Clients aren’t likely to ask us to code like it’s 1999.

Having said that, what are some realistic things we can do to simplify? Here are a few possibilities.

Build Websites According to NeedYes, modern website platforms are complicated. However, web designers should also share some of the blame.

We often reach for these solutions – even when they’re not necessary. The result is an over-engineered site with a lot of moving parts. Seriously, does a small brochure site need a dozen WordPress plugins?

All of these tools are within our reach. So, we use them time and again. Maybe it’s time to do more with less.

The bottom line is thinking about your current and future needs. Build websites that are as lean as possible – with room to grow.

Take Advantage of Automated ToolsWe can’t be everywhere at once. However, keeping track of the websites we manage is a full-time job.

Several automated tools can help. We can employ them to monitor security issues, uptime, and performance. They can also apply software updates.

None of this means we should stop checking these items manually. We still have a responsibility to ensure everything’s working.

The idea is to spot issues and get them fixed more quickly. Automation provides an avenue for busy freelancers to do so.

Shift the Burden Where AppropriateWeb designers tend to take responsibility for tasks outside our expertise. Think email deliverability or information technology (IT) issues. It’s a common problem when working with small organizations.

Advising clients on these subjects is one thing. But maintaining them should be their job. Or they should hire specialists to deal with them.

Too often, we are stuck doing more than we should. Clients naturally come to us for answers. However, each task only adds a layer of complexity to our job. Things can get out of hand in a hurry.

Creating boundaries can help. Define your areas of expertise and stick to them. Inform clients on what you can and can’t do.

They’ll have a better understanding of who to call for specific tasks. And you’ll have more time to focus on the things within your niche.

Web Designers Must Adapt to a New RealityBeing a freelance web designer has never been more complicated. There are so many tools, technologies, and best practices to study. Meanwhile, client expectations are through the roof.

All told, it’s getting harder to do our job. Therefore, we must take advantage of anything that helps us simplify.

Perhaps we also need to take a look in the mirror. How are the choices we make impacting our workload? Where can we make improvements?

The old methods of web design no longer work. Not when there is so much ground to cover. We must adapt to the reality in front of us.

Communication should also be a priority. We need to educate clients about the benefits and drawbacks of a given approach. Together, we can choose what’s right for them with an understanding of the consequences.

The key is to find better ways to assess and manage risk. That will help us transition to the next chapter of our industry.

The post Has Web Design Become Too Complex for Freelancers? appeared first on Speckyboy Design Magazine.

View Details

As Tailwind CSS offers greater control over the design of admin dashboards this makes it the preferred choice for web developers who would rather focus on development than on aesthetics. Its utility-first approach aligns well with the need for rapid, responsive, and customizable dashboard design.

Tailwind CSS templates will save you a significant amount of development time. They come pre-designed and include a variety of layout options and components, which means you can set up your admin panel quickly without starting from scratch.

Tailwind CSS is also known for its adaptability. With its utility-first approach, you can adjust the design directly in the HTML, giving you precise control over the appearance of your admin dashboard. This makes it easier to align the dashboard’s design with your application’s overall aesthetic.

The responsiveness built into Tailwind CSS ensures that your admin dashboard will look good on any device. This is critical in today’s diverse device landscape, where you can expect users to access the panel from various devices.

Using Tailwind CSS templates also encourages consistency in design. By starting with a template, you’re adopting a set of design patterns and components that work well together, ensuring a cohesive look and feel across your admin dashboard.

The free Tailwind CSS dashboard templates we have for you here all offer a fast, flexible, and consistent solution for building the admin areas of your applications. If you want to streamline your workflow, these are the free web templates for you!

The post 25 Free Tailwind CSS Admin Dashboard Templates appeared first on Speckyboy Design Magazine.

View Details

I’ve been online since the days before search engines. Imagine a world where you’d find websites by sheer luck. We never knew where a hyperlink would take us. Thus, we “surfed” the web.

Then, search engines came along. Providers such as Yahoo, AltaVista, and (eventually) Google made it easier to find websites.

Almost immediately, humans began trying to manipulate these tools. People would do just about anything to propel their website to the top. Keyword stuffing and adding hidden text were among the “black hat” techniques of the day.

This behavior marked the early days of search engine optimization (SEO). A cottage industry has grown around trying to get Google’s blessing. And it includes people who do play by the rules.

It’s just that the rules keep changing. And they’re not always clear. You might be an SEO champion today. But that could change with a mere hiccup in an algorithm.

The whole thing has left a bad taste in this designer’s mouth. And I wonder if the way we practice SEO is past its prime.

Perhaps we should focus on the basics instead of chasing every new gimmick. Let’s talk about it.

Guessing What Google Wants Us to DoWhat I’m about to say may sound obvious – but here it goes: Google makes all the rules. Sure, there are organizations for putting standards in place. And other search providers exist. Only one company has the power to change the game in an instant, though.

Google publishes plenty of information on SEO. However, it tends to be vague. That’s on purpose. We can’t expect them to share the inner workings of their algorithm, can we?

Plus, every website is different. Perhaps the best Google can do is provide general guidelines. There are too many variables at play to offer specifics or guarantees.

The situation leads to a lot of interpretation and speculation. We may “think” we know what Google wants from our website. If we only do this, that, and the other, we’ll stay ahead of the competition.

Sometimes, we hit the jackpot. Our site ranks well and brings in search traffic. But fortunes can change at any time.

Did a competitor outsmart us? Did Google change something important? Could they have made a mistake?

The answers aren’t always obvious. If you find an answer at all, that is. The reasons for a sudden downturn can be mysterious.

Focus on the Fundamentals of SEOYes, SEO can quickly become a mess. Tracking Google’s every move will have you spinning like a dog chasing its tail. Is it worth all the trouble?

Here’s the thing: we don’t have to buy into all of the hype. Nor do we have to play guessing games.

The fundamentals of SEO aren’t mysterious or broken. Maybe it’s time to step back and focus on what we can control.

Here are a few SEO practices that never go out of style:

Publish Quality & On-Topic ContentThe more we try to please Google, the worse our content gets. In practice, this means repeating keywords ad nauseam. Or artificially inflating word counts.

Sometimes, we train our focus on bots instead of humans. The result is content that doesn’t lead to conversions – or social media shares.

Try to remember the reason your content exists. Think about your audience and the message you want to share. From there, develop a plan to make it work as efficiently as possible.

Content that is informative and helpful will always be a winner. And there are no tricks required.

Take Steps to Organize Your ContentBoth users and search engines appreciate well-organized content. Your website will be easier to navigate. Search engines will gain a better understanding of who you are. It’s a win-win situation.

Content management systems (CMS) like WordPress simplify the process. You can use parent/child relationships and taxonomies to organize content. These tools will help you create a logical content structure.

Meanwhile, features such as breadcrumb navigation and related post listings go a step further. They offer convenience and increase content discoverability.

Adding structured data can also be helpful. This data can enhance your SERP (search engine results page) listings. The information displayed could convince users to make that click.

Use Helpful Tools for On-Page OptimizationThe right SEO tool can help you optimize content with confidence. It’s like having an expert guiding you through each step.

WordPress users have access to an array of options. Several SEO plugins are available – and they specialize in various tasks. Some are jack-of-all-trades, while others focus on niche use cases.

These plugins are great for ensuring quality. For example, some will “grade” your content based on best practices. You can use them to cover the basics.

Don’t follow these ratings too literally, though. You’ll end up in the same trap of trying to please a bot.

Oh, and be careful about combining SEO plugins. Make sure their functionality doesn’t overlap. That can cause problems.

See the Bigger Picture with Analytics & Search ConsoleIf you want to gauge your SEO progress, start with an analytics app. You’ll get a baseline for your search performance. And you can see how various tweaks impact your numbers over time.

Google Analytics is still free to use. And it works well enough – if you can deal with the changes in version 4. But there are other providers worth checking out. Go with whatever tool fits your budget and needs.

Google Search Console is also a worthwhile tool. You’ll be able to learn more about how Google is indexing your content. It will also alert you of any errors.

Build a Great Website – Not a Shrine to GooglePerhaps the folks at Google are flattered by all the attention we show them. Some of us build websites that aim to please them at every turn. But it’s easy to let the search giant distract us from what matters.

Following the hot new SEO trends tends to lead us nowhere. The rug will eventually get pulled out from under us. And what do we do then?

The safer bet is to focus on the basics. Produce quality content. Make sure your website is organized, performant, and accessible. Use the available tools to ensure proper markup. Measure your progress and adjust as needed.

That will put you in a position to succeed. And it doesn’t mean you should ignore algorithm changes. Just don’t live and die with them. Take them for what they are.

Your goal is to build a website that pleases your audience. Users will be happy. And search engines will take note.

The post It’s Time to Get Back to the Basics of SEO appeared first on Speckyboy Design Magazine.

View Details

Unlike larger corporate stores, smaller eCommerce sites have the luxury of not having to conform to pre-defined design styles. They don’t need content-heavy landing pages, mega-menus with hundreds of categories, or sections for suggested or alternative products. All they need is a great designer who can build a simple and modern site that showcases their prized products and includes a buy-it-now button.

Shopping doesn’t have to be complicated, and smaller eCommerce stores don’t have to look like the big players. They can stand out by embracing their unique identity and creating a beautifully designed site that reflects their brand and values.

We’ve created a collection of fifty beautifully designed eCommerce sites to inspire your own eCommerce design. These sites prove that a simple and modern design can be just as effective, if not more so, than a more complex and content-heavy site. From minimalist designs to bold and colorful layouts, there is something for every eCommerce store here.

So if you’re a smaller eCommerce store looking to stand out from the crowd, take a look at these inspiring examples and see how you can create a unique and user-friendly eCommerce site that showcases your products and delights your customers.

You might also like these collections of free WooCommerce themes for WordPress, eCommerce PSD templates, or payment method icon sets

The post 30+ Clean & Modern eCommerce Sites for Web Design Inspiration appeared first on Speckyboy Design Magazine.

View Details

A collection of stencil fonts for creatives. Stencil serifs and sans-serifs with decorative variations for various design applications.

The post The 20 Best Free Stencil Fonts for Designers appeared first on Speckyboy Design Magazine.

View Details

WordPress tends to struggle with messaging. Could it harm its long-term future? What could be done to create a more user-friendly vocabulary?

The post What’s in a Word? WordPress Terminology at a Crossroads appeared first on Speckyboy Design Magazine.

View Details

A collection of eight CSS code snippets for creating elegant, professional and accessible drop caps. Add creative flair to your plain text!

The post 8 CSS Snippets for Creating Stylish Drop Caps appeared first on Speckyboy Design Magazine.

View Details

CSS Loaders – Check out this collection of 500+ CSS loading animations.

Bézier Curves – Take a deeper look at this powerful CSS animation tool.

The Glitch Gallery – Browse this online exhibition of pretty software bugs.

The Dos & Don’ts for Styling Hyperlinks – Advice for making accessible and attractive links.

How Spotify’s Design System Goes Beyond Platforms – How a need for more cohesion led Spotify’s design systems team to take a cross-platform approach to components.

100+ Best ChatGPT Prompts for Front End Developers – Use this collection of prompts to get the most from the popular AI tool.

Connected Grid Layout Animation – Ideas for simple on-scroll animations on “connected” grid layouts.

Dark Mode: How Users Think About It & Issues to Avoid – How to test your design to avoid common dark-mode issues.

Looking Outside of the Web for Inspiration & Ideas – How other artforms can inspire original design.

WCAG 2.2 — It’s Finally Here! – Take a closer look at the WCAG’s latest accessibility standards.

Astro 3.0 – This release marks the first major web framework to support the View Transitions API.

State of CSS 2023 – This annual report aims to help us understand where the language is headed.

Tiny Brief – Learn more about this quick-start approach to generating project briefs.

20 Free Vintage & Retro Fonts for Designers in 2023 – Explore fonts that bridge the gap between old and new.

Case Study: Rebuilding TechCrunch Layout with Modern CSS – A highly detailed take on how the popular website could benefit from modern CSS techniques.

Will There Ever Be a Market for Commercial Block Themes? – How one developer is hoping to change the narrative on block themes.

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

View Details

The following questions may sound silly. But let’s say that you just booked a new web design project. Now, ask yourself:

Who are you designing for?
Are you putting your client’s needs first?
Is showing off the project in your portfolio a motivating factor?

You’d like to think that most designers are ethical. And they’ll keep their focus entirely on client needs.

But we’re all human. And sometimes, we add bells and whistles to a project for the wrong reasons. We may not even be aware of what we’re doing.

It comes down to those little decisions we make during the design process. Sure, they can enhance our portfolios. But they may not have a positive impact elsewhere.

Thus, understanding our motivation is crucial. Are we focused on our clients or ourselves? How can you tell the difference? Let’s try and identify who that fancy feature is benefitting.

Look What I Can Do!I’m fascinated by all the cool trends sweeping the web. Sometimes a new feature will grab my attention. And I simply can’t wait to use it in a project.

Parallax scrolling is a prime example. It’s a widely used effect. But I’ve yet to add it to one of my projects.

Then, I found myself working on a website that seemed like a good fit. It included a stunning hero image that would wow users. So I implemented it.

Technically speaking, the result worked well enough. I beamed with pride when thinking about my accomplishment. And I know that my client will love the aesthetic.

The reality was different. My client wasn’t thrilled about the feature. They correctly pointed out that the effect was distracting to users. It took attention away from the page’s goal of driving conversions.

It turns out that the effect made the site harder to use. It didn’t help visitors find what they were looking for any faster. If anything, it got in the way. So, what went wrong?

Looking back, I was focused on the wrong thing. I used parallax scrolling just because I could. And it didn’t improve the finished product.

I wasn’t happy with myself. This was like a child being mischievous to get a parent’s attention. It may work. But not without annoying someone along the way.

Features Should Have a PurposeDon’t get me wrong. We can still make use of cutting-edge features. But the feature needs to serve a purpose. Whatever we implement should solve a problem or improve the user experience.

Microinteractions, for instance, can be a great way to guide users along a path. They can make processes more intuitive. And animation can call attention to an important piece of information. It’s all about picking the right time and place for using them.

We run into problems when adding features without defining their purpose. Think about what a given feature should accomplish. Is it just for showing off? Or will it benefit both users and your client?

Web design is nothing if not a “me too” industry. We often use these elements to prop up our ego and income. Plus, none of us want to appear to be behind the times.

But we may come to a different conclusion if we’re honest about the project’s needs. Many (if not all) of these extras can likely be left out.

A good rule of thumb: If it doesn’t add anything useful to the final product, it doesn’t belong.

What about Client Requests?Web designers aren’t the only ones adding bells and whistles. Our clients often request these features as well. So, what do we do in these instances?

It’s a tricky situation. We want to keep our clients happy. But we also need to think about best practices. And we owe our clients an honest assessment.

Therefore, the same philosophy should apply. Discuss feature requests with your client. Be sure to mention the pros and cons of implementing them. Most importantly, try to define their purpose.

It may be enough to change their mind. And if not, at least you tried to put the project’s needs first. You can’t win them all.

Design for Your Project, Not Your PortfolioGreat design exists to make things better. However, getting there takes a lot of thought and some soul-searching.

In the end, it’s about finding the right solutions for the task at hand. Having an impressive portfolio means a lot to our success. But doing right by our clients means even more.

With that in mind, it’s OK if your portfolio is missing those trendy features. Maybe you haven’t found the right time yet. There may be an opportunity to implement them down the road.

It’s more important to help clients solve problems and achieve their goals. That will mean more to your chances of future success than anything else.

The post Balancing Client Needs vs. Your Portfolio appeared first on Speckyboy Design Magazine.

View Details

WordPress community members are often encouraged to contribute to the project. That makes plenty of sense. The software is open-source and relies on both sponsored and volunteer contributors. It’s what...

The post What It’s Like to Participate in a WordPress Contributor Day appeared first on Speckyboy Design Magazine.

View Details

A collection of web design tools and resources that will help you build better and faster websites and add useful functionalities to them.

The post 19 Web Design Resources and Tools for Designers and Agencies (2023 Updated) appeared first on Speckyboy Design Magazine.

View Details

This week’s Designer News – № 710 – includes WebGL Image Processing, Playbook for Universal Design, The Twenty Twenty-Four WordPress Theme, The B& W Logo Design Trend, and so much more.

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

View Details

If you're looking for original inspiration, you may need to explore places outside of web design that can be mined for creative ideas.

The post Looking Outside of the Web for Inspiration & Ideas appeared first on Speckyboy Design Magazine.

View Details

Discover the best free retro and vintage fonts for creatives that will add a timeless and nostalgic touch to your design projects.

The post 20 Free Vintage & Retro Fonts for Designers in 2023 appeared first on Speckyboy Design Magazine.

View Details

What should we keep in mind when styling hyperlinks? Here are some tips for making them beautiful and keeping them usable.

The post The Dos & Don’ts for Styling Hyperlinks appeared first on Speckyboy Design Magazine.

View Details

This week’s Designer News – № 709 – includes The Ideal Viewport Doesn’t Exist, The Ending That CSS-Tricks Didn't Deserve, CSS Selectors: A Visual Guide, How the iMac Saved Apple, and so much more.

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

View Details

The number of block themes is increasing, yet not all cater to the needs of web designers. We explore those key block theme features designed for professionals.

The post Essential WordPress Block Theme Features for Web Designers appeared first on Speckyboy Design Magazine.

View Details

I've stuck with Twitter – even through the awkward rebrand. But what about the many niche web design communities? Will they survive?

The post Twitter/X Is Doing Its Best to Chase Away Web Designers appeared first on Speckyboy Design Magazine.

View Details

A curated collection of the best After Effects templates for video and motion designers in 2023. Intros, titles, transitions, and more.

The post The 60 Best After Effects Templates for Motion Designers appeared first on Speckyboy Design Magazine.

View Details

This week’s Designer News – № 708 – includes The Next Generation of Web Layouts, Why Is DNS Still Hard to Learn?, WordPress 6.3 “Lionel”, Bricolage Grotesque, and a whole lot more.

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

View Details

We discuss the types of freedoms that come with freelance design, while also delving into the costs and limitations.

The post Discovering the Freedoms of Freelance Design appeared first on Speckyboy Design Magazine.

View Details

Websites are becoming more complex. And the same can be said for the online world as a whole. Thus, being on the web is no longer simple. It has become...

The post How Online Privacy Is Impacting Web Designers appeared first on Speckyboy Design Magazine.

View Details

The global pandemic had profound impacts. But for me, isolation wasn’t one of them. You see, I’ve worked from home for over 20 years. Being alone in a small space...

The post The Grumpy Designer Meets the Outside World (Again) appeared first on Speckyboy Design Magazine.

View Details

This week’s Designer News – № 707 – includes The 2023 PRINT Typography Report, Randomness in CSS Using Trigonometry, Unravelling the UX/UI Magic of Threads App, The Future of Design Systems Is Semantic, and so much more.

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

View Details

Embrace discomfort to enhance your web design skills! Learn how stepping out of your comfort zone can lead to improved creativity.

The post How Being Uncomfortable Can Make You a Better Web Designer appeared first on Speckyboy Design Magazine.

View Details

Learning new skills on the job can be difficult for web designers. And client projects aren’t an ideal place for experimentation. What if something goes wrong? You could be stuck...

The post 5 WordPress Side Projects To Help You Learn & Grow appeared first on Speckyboy Design Magazine.

View Details

It can be a challenge advising another designer. Whether it’s general career advice, technical knowledge or even tips regarding client relations.

The post Advice for Being a Good Design Mentor appeared first on Speckyboy Design Magazine.

View Details

A collection of unique CSS and JavaScript snippets for creating wood backgrounds, textures, and components.

The post 8 CSS & JavaScript Snippets That Feature Wood Textures appeared first on Speckyboy Design Magazine.

View Details

This week’s Designer News – № 706 – includes Adapting Typography to User Preferences with CSS, Grid Flow Animation, Flexer CSS Playground, Open Runde Typeface, NASA Choose WordPress, and much more.

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

View Details

Being proactive with content is key to a successful project. Here are some ways you can help your clients with their website content strategy.

The post How to Help Your Clients with Website Content Strategy appeared first on Speckyboy Design Magazine.

View Details

Website security is among the biggest challenges that web professionals face. It’s a constant battle to thwart malicious actors. Great effort is required. Yet the results aren’t encouraging. Those of...

The post How Tracking Backend Activity Improves WordPress Security appeared first on Speckyboy Design Magazine.

View Details

A collection of free and premium Adobe InDesign business proposal templates that will help get your project noticed and approved!

The post The 20 Best Business & Project Proposal InDesign Templates appeared first on Speckyboy Design Magazine.

View Details

Clients have big ideas for their websites. It’s an opportunity to build something special. But web designers don’t always share the same level of enthusiasm. That’s not because we don’t...

The post How to Deal with Clients That Have Outsized Expectations appeared first on Speckyboy Design Magazine.

View Details

This week’s Designer News – № 705 – includes Building a Design System with Tailwind CSS, Phosphor Icons, A Checklist for Choosing Type, Multi-Layered Calendars, Vox Media drops its own CMS, and a whole lot more.

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

View Details

What should your clients know about redesigning their website? We take a look at some of the most important concepts.

The post What Your Clients Need to Know About a Website Redesign appeared first on Speckyboy Design Magazine.

View Details

There’s something unique about being a freelance web designer. You can achieve success while also maintaining freedom. But much of it involves chasing new clients and working long hours. It’s...

The post Want to Succeed as a Freelancer? It’s about Time. appeared first on Speckyboy Design Magazine.

View Details

Web design is all about building user interfaces (UI). It’s a massive part of what we do. We create something that we think users will like. We often use established...

The post How to Detect User Preferences with CSS appeared first on Speckyboy Design Magazine.

View Details

A collection of Photoshop actions that makes it incredibly easy to add creative artistic effects to your photos quickly and beautifully.

The post The 50 Best Photoshop Actions for Stunning Art Effects appeared first on Speckyboy Design Magazine.

View Details

This week’s Designer News – № 704 – includes Writing CSS In 2023: Is It Any Different Than A Few Years Ago?, The Ultimate Guide to AI Web Design 2023, Figma Typography Secrets, Inspiration for Text Block Transitions, Source Prompts, An Introduction to Native CSS Nesting, and a whole lot more.

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

View Details

We take a look at (in no particular order) five of the more painful maintenance-related issues that many modern websites have to face.

The post The 5 Biggest Pains in Website Maintenance appeared first on Speckyboy Design Magazine.

View Details

Chasing after new clients is part of being a freelancer or small web design agency. It’s a direct path to growth. But we shouldn’t forget about existing clients. They play...

The post Increase Revenue From Your Existing Web Design Clients appeared first on Speckyboy Design Magazine.

View Details

It’s impossible to escape the hype surrounding artificial intelligence. Stories about this technology are everywhere. Tools like Bard, ChatGPT, and Stable Diffusion are becoming mainstream. And people have a lot...

The post AI Presents Many Challenges for Web Designers appeared first on Speckyboy Design Magazine.

View Details

Create professional, engaging, and visually appealing presentations quickly and easily with these free Keynote templates.

The post 40 Stunning Free Keynote Templates for Creatives appeared first on Speckyboy Design Magazine.

View Details

This week’s Designer News – № 703 – includes Vrite Editor, 90s Websites – Key Characteristics & Examples, Understanding SVG Paths, Git Fundamentals for Developers, Hey Block Theme for WordPress, and more.

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

View Details

Why wasn't Adobe XD a success? And what does its demise say about the state of design tools? We can look to the design community for answers.

The post What the End of Adobe XD Says About the State of Design Tools appeared first on Speckyboy Design Magazine.

View Details

A collection of the best title packs for After Effects. Each of the templates uses a different style to set the tone for your next video project.

The post The 20 Best Titles Templates for Adobe After Effects appeared first on Speckyboy Design Magazine.

View Details

A client referral for your web design business has the potential to increase revenue and gain valuable experience. But there are no guarantees.

The post Why Web Design Client Referrals Aren’t a Slam Dunk appeared first on Speckyboy Design Magazine.

View Details

Eight compelling CSS & JavaScript snippets to present quotes on your website. There is a style here to fit just about every need.

The post 8 Ways To Dress up Quotes With CSS & JavaScript appeared first on Speckyboy Design Magazine.

View Details

This week’s Designer News – № 702 – includes Future CSS: State Container Queries, Style Your RSS Feed, Useful DevTools Tips and Tricks, Tailbreeze, and so much more.

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

View Details

How will collaborative features improve WordPress? We discuss several scenarios that demonstrate how they can streamline working together.

The post What Collaborative Features Will Bring to WordPress appeared first on Speckyboy Design Magazine.

View Details

Imagine how AI could change web design tools in the future. How might it look? Here are a few (thoroughly-unscientific) guesses.

The post How Could AI Change Web Design Tools? appeared first on Speckyboy Design Magazine.

View Details

This week’s Designer News – № 701 – includes State of CSS 2023, The Silent End of Adobe XD, SVG Gradients, Creating Scroll-Triggered Animations, and plenty more.

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

View Details

Discover the pros and cons of relying on a modern CMS. Learn why specialization can provide a more efficient and flexible solution.

The post Why Modern CMS Shouldn’t Do Everything appeared first on Speckyboy Design Magazine.

View Details

We take a look at some desktop features that you should leave out on mobile. Items that are likely to prevent users from getting the most out of your website.

The post The Desktop Features You Should Consider Leaving Out on Mobile appeared first on Speckyboy Design Magazine.

View Details

Font selection in gaming can significantly enhance the gaming experience and evokes powerful emotions. They can also play a pivotal role in establishing the visual identity of a game, contributing...

The post 25 of the Best Fonts for Your Gaming Projects appeared first on Speckyboy Design Magazine.

View Details

The term “accessibility” brings a few related concepts to mind. Design-related features like color contrast and legibility are prime examples. And we can’t forget about adding ALT attributes to images....

The post What You Need To Know About Accessible Web Content appeared first on Speckyboy Design Magazine.

View Details

This week’s Designer News – № 700 – includes Negative-Space Typography, BentoGrids, The Gotchas of CSS Nesting, Stack Overflow Developer Survey, Kablammo Variable Font, 2023 Logo Trend Report, and so much more.

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

View Details

A great photo can transform a webpage. But not just any old photo will do. Finding the right image requires careful consideration. Designers don’t always get to make that decision,...

The post A Quick Guide to Great Website Photography appeared first on Speckyboy Design Magazine.

View Details

As an industry, web design doesn’t sit still. It seems like there’s an almost-daily barrage of new tools and technologies to explore. And some will eventually become standard practice. That’s...

The post Reasons To Change Your Web Design Workflow appeared first on Speckyboy Design Magazine.

View Details

Broadcast packages are flexible and powerful template sets for video creators. With them, you’ll find intros, titles, lower thirds, transitions, and more – all in one place! They help you...

The post The 15 Best Broadcast Packages for After Effects in 2023 appeared first on Speckyboy Design Magazine.

View Details

There are plenty of ways to make text stand out. It could be as simple as placing it in an HTML heading. You might apply color or other basic formatting...

The post 8 CSS & JavaScript Snippets for Animating Words appeared first on Speckyboy Design Magazine.

View Details

This week’s Designer News – № 699 – includes WordPress Has a New AI Tool, Gooey Cursor Effect, Skeleton Screens 101, Apple Design Resources for Figma, WordCamp Europe 2023 Keynote, and a whole lot more.

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

View Details

We discuss the positive effects of a more consolidated web and examine what this means for the web design community as a whole.

The post The Bright Side of an Increasingly Homogeneous Web appeared first on Speckyboy Design Magazine.

View Details

Before you install that do-everything plugin – take a moment to discover the advantages of staying small. You might find that it's the best option.

The post Why Niche WordPress Plugins May Be the Best Option appeared first on Speckyboy Design Magazine.

View Details

We explore the challenges in educating clients about their websites. Along the way, we share thoughts on why knowing it all isn't all that great.

The post Do Clients Need To Know How Their Website Works? appeared first on Speckyboy Design Magazine.

View Details

This week’s Designer News – № 698 – includes Scroll-driven Animations, Mastering CSS Blend Modes, The Evolution of WordPress, BRUTOPIA Bootstrap Theme, and so much more.

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

View Details

Clients need to understand the importance of web accessibility. We’ve created this guide that will allow you to educate your clients.

The post Educating Your Clients About the Importance of Website Accessibility appeared first on Speckyboy Design Magazine.

View Details

I’m convinced that web designers are underappreciated. We work in a highly competitive (not to mention stressful) field. Yet it feels like our achievements fly under the radar of clients...

The post Why I Think Web Designers Are Underappreciated appeared first on Speckyboy Design Magazine.

View Details

Mastering transition effects can take your videos to the next level. Whether creating a captivating intro, a smooth slideshow, or adding visual flair to your project, understanding and knowing the most popular transition effects is essential to the video creation process.

Transitions are a way to smoothly blend or animate between different elements, layers, or scenes in a video or motion graphics project. They help create a seamless flow between different parts of the composition, making the video more visually appealing and engaging.

This guide explores and shares After Effects tutorials of the most popular transition effects, including wipe, dissolve, mask, zoom, blur, glitch, fade, textured, push, ripple, and tear transitions. Additionally, we’ll provide some valuable tips for choosing and effectively using these transition effects in your videos.

You might also like our collection of special effect tutorials for After Effects.

Wipe TransitionsWipe transitions offer a seamless way to transition from one scene to another. With options like linear, radial, or gradient wipes, you can create professional-looking transitions that capture your audience’s attention.

Linear wipes, as the name suggests, provide a smooth and linear movement, while radial wipes add a circular or elliptical motion. Gradient wipes offer a gradual blending of colors for a seamless transition. Incorporating wipe transitions can elevate the quality of your videos, guiding viewers from one scene to the next with visual appeal.

Download Wipe Transitions on Elements

Wipe Transition After Effects TutorialSuitable for beginners and advanced users alike, this After Effects tutorial will help get you started with transitions by showing you how to create basic wipe transitions in After Effects. You can also download the free project files and presets for a more seamless learning experience.

Dissolve TransitionsDissolve transitions provide a smooth and gradual shift between scenes. By fading out one scene while simultaneously fading in the next, you can achieve a subtle yet effective transition that maintains the flow and continuity of your video.

This gradual blending of visuals creates a seamless connection between scenes, enhancing the overall viewing experience for your audience. With dissolve transitions, you can achieve a polished and professional look while ensuring a smooth transition from one moment to the next.

Dissolve Transition After Effects TutorialIn this After Effects tutorial, you’ll learn how to create a smooth dissolve transition by keyframing the opacity property of two video clips. Download the free project files for reference, and follow along to master this transition technique.

Mask TransitionsMask transitions offer a visually appealing way to reveal or conceal parts of your video. By utilizing shapes or custom masks, you can create intriguing transitions that draw the viewer’s attention to specific elements or objects within your scenes.

With mask transitions, you have the creative freedom to control the visibility of specific areas, adding a layer of visual interest and focus. Whether it’s a gradual reveal or a sudden reveal, mask transitions offer a versatile way to enhance the storytelling and composition of your videos.

Download Mask Transitions on Elements

Mask Transition After Effects TutorialIn this After Effects tutorial, you’ll learn how to create a ‘Walk By Transition’ using simple masks. Whether you’re a beginner or experienced user, this quick-start guide will teach you how to achieve smooth masking transitions in no time.

Zoom TransitionsZoom transitions bring a sense of depth and focus to your videos by zooming in or out of a particular area or subject. This transition effect allows you to emphasize important details or smoothly transition between different perspectives.

Whether you want to draw attention to a specific element or provide a seamless transition between scenes, zoom transitions offer a versatile method for adding visual impact and enhancing storytelling.

Download Zoom Transitions on Elements

Zoom Transition After Effects TutorialLearn to create a smooth zoom transition in After Effects in under 2 minutes! With this tutorial, you’ll swiftly grasp the concept of a zoom transition and be able to create and incorporate it into your own videos.

Blur TransitionsBlur transitions create a dreamy and cinematic look by applying a blur effect during scene transitions. This effect adds a touch of elegance and sophistication to your video.

By temporarily blurring the visuals, blurs help soften cuts between scenes, creating a seamless and visually pleasing transition. They serve as a bridge, guiding the viewer from one scene to the next with a subtle and graceful effect.

Download Blur Transitions on Elements

Blur Transition After Effects TutorialFollowing this After Effects tutorial, you’ll learn the techniques to achieve stunning results with zoom blur transitions.

Glitch TransitionsGlitch transitions add a modern and edgy feel to your videos, infusing them with a sense of technological intrigue and excitement. By incorporating digital glitches, distortions, or VHS effects, you can create visually striking transitions that captivate the viewer’s attention.

These transitions mimic the aesthetic of technical malfunctions or digital artifacts, lending a unique and dynamic visual effect to your video. Glitch transitions are particularly effective when you want to convey a futuristic or experimental feel or for creating a sense of disruption or transformation within your video.

Download Glitch Transitions on Elements

Glitch Transition After Effects TutorialIn this AE tutorial, you’ll learn how to create a custom glitch transition without any plugins. Expand your editing capabilities and add an exciting visual element to your videos with this short video tutorial.

Fade TransitionsFade transitions offer a timeless and smooth way to transition between video scenes. They add an elegant and cohesive touch to video projects, whether it’s a narrative, promotional video, or music video.

With a fade-in, the next scene gradually emerges as opacity increases, maintaining flow and visual coherence. A fade-out smoothly transitions the current scene out of view by reducing opacity.

Download Simple Fade Transitions on Elements

Fade Transition After Effects TutorialIn this tutorial, you’ll be taken through the simple process of creating a fade effect (fade-in and fade-out) at the beginning and end of a video clip. This tutorial has been designed to be easy to follow and requires no prior knowledge of After Effects.

Textured TransitionsTextured transitions bring a unique and artistic touch to videos. By overlaying textures or patterns during transitions, you can create visually rich effects. Whether grunge, film grain, or abstract shapes, textures add depth and dimension to your videos.

Timing and duration are key to ensuring a seamless transition. Experiment with blending modes, opacity, and layering techniques to achieve the desired visual impact.

Textured Transition After Effects TutorialThis tutorial will guide you through the process of creating and effectively utilizing textures, allowing you to add texture and grit to elevate the quality of your motion design videos.

Push TransitionsPush transitions provide a dynamic way to transition between scenes. By sliding or pushing the frames in a specific direction, this effect adds a sense of movement and energy to your videos.

The speed and direction of the push transition can add to the visual impact. A fast push creates a more dramatic effect, while a slower push offers a smoother transition.

Push Transition After Effects TutorialIn this video tutorial, you will be taken through the process of achieving a stunning push wipe transition in After Effects. You will be able to master the technique in under 5 minutes!

Ripple TransitionsRipple transitions add a touch of magic to your videos by creating a mesmerizing ripple effect that expands or contracts across the screen, revealing the next scene.

The ripple effect can add a sense of wonder to your video, making it particularly suitable for fantasy, surrealism, or imaginative themes. With ripple transitions, you can add an extra layer of visual intrigue.

Ripple Transition After Effects TutorialThis After Effects tutorial will show you how to generate an initial ripple, then how to enhance it for maximum impact. These techniques will teach you how to add depth, motion, and energy to your videos.

Tear TransitionsTear transitions provide a unique and dramatic effect by simulating the tearing or ripping of the screen to reveal the next scene. This transition adds a sense of intensity and emotion to your videos, making them a powerful choice for storytelling or dramatic sequences.

As the screen tears apart, it creates a visually striking and attention-grabbing effect, heightening the impact of the transition. Tear transitions can convey moments of conflict, revelation, or transformation, enhancing the narrative and potentially evoking a strong emotional response from the audience.

Download Paper Tear Transitions on Elements

Tear Transition After Effects TutorialWith step-by-step instructions, this After Effects tutorial provides a straightforward approach to incorporating torn paper transitions effect into any video editing project.

Tips for Choosing & Using Transition EffectsWhen selecting transition effects for your video, it’s important to consider the tone and mood you want to convey. Choose transitions that align with your video’s overall style and theme, ensuring they complement and enhance the desired atmosphere.

While variety can be appealing, avoid using too many different transition effects within a single video. Maintaining consistency and coherence in your transitions is crucial for a polished and professional look. Stick to a select few that work well together and serve the purpose of your video.

Experimenting with the timing and duration of your transitions can significantly impact your video’s visual flow and pacing. Adjust the speed and length to create the desired impact, whether a quick and snappy transition or a slower, more gradual shift.

Always consider the context and content of your scenes when choosing transition effects. Ensure that the transitions align with the narrative or message you want to convey. The transitions should support and enhance the story rather than feeling arbitrary or out of place.

Don’t be afraid to combine multiple transition effects for added creativity. Layering different effects or using them in conjunction can produce unique and visually stunning results. Experiment with blending transitions to create custom effects that resonate with your audience.

By following these tips, you can make informed decisions when choosing and utilizing transition effects in your videos. Remember, the right transitions can elevate the visual impact and storytelling, creating a more engaging and memorable experience for your viewers.

Mastering these popular transition effects in After Effects is a valuable skill for video creators. By understanding and utilizing them, you can significantly elevate the quality and impact of your videos.

Remember to choose transition effects that align with your video’s theme, experiment with timing, and maintain consistency throughout. With these transition effects, you’ll be well on your way to designing visually captivating videos that leave a lasting impression on your audience.

The post 10 After Effects Tutorials for Creating Professional Transitions appeared first on Speckyboy Design Magazine.

View Details

Patterns are among the most flexible design assets. They can be the star of the show or fit neatly into the background. As such, they can also range from minimal to complex.

And patterns are no longer limited to graphics. CSS offers a surprisingly powerful way to design them.

There are a few advantages to building patterns via CSS. Performance is a big factor, as there are no additional images to load. Second, these patterns can be further manipulated to include features such as animation and masking. What’s not to love?

We’ve put together a collection of unique patterns that were created with pure CSS. Keep reading to see what’s possible when you combine code and imagination!

You might also like our collection of CSS snippets for texture effects.

CSS-Only Wavy Pattern by Temani AfifThis fun pattern consists of a mere 14 lines of CSS. Radial gradients are combined with the calc() function to create repeating shapes. It’s also worth noting that this pen’s creator, Temani Afif, is a prolific author of CSS patterns. There’s plenty more to explore.

See the Pen CSS only wavy pattern by Temani Afif

Repeatable Pattern Design with CSS by NareshHere’s another example of how much can be accomplished with minimal code. Like many snippets in this collection, gradients are front and center. The pattern looks rather complex, but could easily work as a page background with a few tweaks.

See the Pen css pattern design by Naresh

Gradient CSS Pattern by Justyna JThis bright pattern is deceptively complex. Look closely and you’ll find polygons, gradients, and some clever opacity tricks. It’s the sort of background that would have required some serious Photoshop skills back in the day.

See the Pen CSS pattern by Justyna J

Pure CSS Blue Plaid Pattern by Ana TudorPlaid patterns are notoriously intricate. That makes this attractive snippet even more impressive. Notice how the various lines intersect to create a different effect. It’s so good that it could have been ripped directly from a flannel shirt.

See the Pen Pure CSS pattern:blue plaid (under 500 bytes minified) by Ana Tudor

CSS Frog Pattern by Kaylee MurrayThis cute little frog popping up through the water is lighthearted. It would work beautifully on a website geared toward children. And not a single image was needed. There’s a lot of fun to be had with these coding techniques.

See the Pen CSS Pattern Frog by Kaylee Murray

Animated H1 CSS Pattern by CurleyWebDevA pattern doesn’t need to sit by itself. Its impact can be enhanced by using it in conjunction with another design element. This reptilian pattern, for instance, is the perfect complement to the animated text. It gives the entire presentation personality.

See the Pen CSS Pattern On H1 (simplified) by CurleyWebDev

CSS Pattern Noise by VijayThere’s a fun high-tech aesthetic to this pattern. Reminiscent of waveforms, it could serve as an attention-getting background for a hero area. The top and bottom fade effects might also allow it to work as a page footer.

See the Pen Css Pattern-Noise by Vijay

Bold Pattern with CSS Grid by Christina StephanHere’s a pattern that’s big, bold, and sure to draw you in. It’s also a bit heavier on code than many of the examples here. It combines CSS Grid, gradients, and absolute positioning to put this snippet together. The result is a presentation that speaks just as loudly as any image.

See the Pen CSS-Pattern by Christina Stephan

Coding a Pattern of SuccessPerhaps the most amazing aspect of the examples above is the amount of code required to produce them. It is, for the most part, a more efficient process than you might think. The details of these patterns belie the simplicity under the hood.

What’s more, you can fork these snippets and produce wildly different results. All it takes is a little experimentation. Try changing colors, angles, and sizing. The results could surprise you.

Looking for more pure CSS patterns? Check out our CodePen collection for inspiration!

The post 8 Code Snippets for Creating Amazing Patterns with CSS appeared first on Speckyboy Design Magazine.

View Details

This week’s Designer News – № 697 – includes 4 Levels of Grids for Web Designers, Intel One Mono Typeface, Fluent 2 Design System, Why We’re Bad at CSS, and a whole lot more.

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

View Details

Web design is full of existential questions. One of the biggest: Can I build a website today that will still be relevant tomorrow?

The answer depends on how far into the future you look. But the more time that passes, the less relevant a website’s design and functionality become. The future always brings change. And often in ways we don’t anticipate.

This is probably a good thing. It keeps web designers busy. That could mean redesigning a client’s website. But it might also lead to refactoring an existing site.

That’s why it’s important to build websites with the future in mind. Below are a few tips for doing just that.

Use Established Tools and ProcessesContent Management Systems (CMS) have come to dominate the landscape. There are big players such as WordPress and Drupal. But there are also several smaller competitors.

Many of the up-and-coming systems sound compelling. But it’s fair to wonder about their potential longevity. Simply put: They may or may not be around in a few years.

This isn’t a question of their quality. The reality is that it’s an uphill battle. There are bound to be casualties along the way.

This may not be a deal-breaker for small projects. But stability is key for larger websites. Moving to a new CMS because your current platform is languishing (or worse) is a major task.

That’s why choosing a CMS is the biggest decision you’ll make. Choose wisely.

From there, think about any plugins you intend to use. This is especially important for plugins that power core functionality. For example, eCommerce, member management, etc. Mission-critical plugins should be supported well into the future.

All told, the goal is to avoid a major disruption. Choosing the right tools will help.

Design and Code With Flexibility in MindFlexibility is important for the future of your website. Design elements and functionality need to be resilient. This will better allow it to adapt to future needs.

How does that look in practice?

DesignWebsites evolve. New content is added, and formatting is subject to change. We can’t always predict the details, however. Thus, we often design for the here and now.

This doesn’t mean we can’t prepare. One way to do this is by utilizing the newer layout features in CSS. Flexbox, for example, offers multicolumn layouts that automatically adjust to your content. And CSS Grid can power complex layouts with relative ease.

Navigation is another area that always seems to change. We can prepare by following the trends. That could mean placing at least some items behind a hamburger menu. Or by organizing items into a “mega menu” structure. This allows for growth and doesn’t require radical design changes.

Above all, look for solutions that are both creative and practical. This will help you avoid future dilemmas.

CodeJust as content needs to change, so do functionality requirements. Therefore, it makes sense to both anticipate and accept this fact.

Writing code that allows for future tweaks can be challenging. Sometimes just getting our code to work takes all our energy. Planning for the future? That could be an afterthought.

Plus, there are many ways to accomplish the same result. But this is a positive. Once you have achieved your initial goals, you can revisit your code.

From there, think about ways to streamline your work. Look at how easy it will be to extend the functionality later. Go back and make your code as efficient as possible. Taking these steps could prevent a future mess.

Look for Areas of Potential GrowthBuilding websites for clients is a guessing game. It involves interpreting vague requests and anticipating how they’ll react to your ideas. It can be difficult to get on the same page, so to speak.

That’s why it’s important to ask the right questions. This can be helpful for spotting areas of a project that might expand over time.

For instance, let’s say that a client is looking for a simple eCommerce site (which doesn’t exist, by the way). This is an area primed for growth.

New products and features will likely be added at some point. Thus, you can design and build their site accordingly.

One example is implementing a shopping cart that is extensible. That flexibility will come in handy someday.

You Can’t Stop the Future, but You Can Try to Build for ItPredicting the future of web design and our client’s needs isn’t an exact science. Yet it’s still a worthy endeavor. There will be instances when we guess wrong. But implementing forward-thinking practices will help us better adapt to change.

It’s about making smart decisions every step of the way. Whether it’s choosing a CMS or writing some CSS, it’s important to think about how these decisions impact the future.

Nothing we create is going to last forever. But with preparation, we can help to ensure that its evolution is as smooth as possible.

The post Building Websites with the Future in Mind appeared first on Speckyboy Design Magazine.

View Details

As we celebrate 20 years of WordPress, I wanted to take a moment to talk about its community. Sure, I’ve written about it before. But maybe not in the context of its impact on me.

I started using WordPress around 2010. It was a difficult time in my career. Things had grown stagnant. I wasn’t sure if I wanted to stay in web design.

But the software connected with me in a way other apps hadn’t. It empowered me to take on larger projects. Building highly functional, custom websites was finally within my reach.

However, the software wasn’t what kept me going. It was the community. The guidance of other WordPress developers made me eager to explore. And seeing the challenges others faced made me feel part of something bigger.

With that, I’d like to share a few valuable lessons I’ve learned from the WordPress community. Some may sound basic. But they’ve impacted both my career and life.

You Don’t Have To Be an Expert To Share KnowledgeThe willingness to share is what makes a community thrive. But members are more likely to share when they feel comfortable doing so.

Sometimes, that feeling of imposter syndrome creeps up. It can keep us from sharing what we know. And it’s particularly relevant in tech. You may feel like your knowledge isn’t worthy of sharing.

The open and informal nature of WordPress helps immensely. It has made me feel comfortable sharing ideas. Even though I don’t consider myself an expert, I can publish what I’ve learned.

And I can also engage with other members. Some are more experienced than I, others less. Regardless, there’s an opportunity to learn from each other.

Interacting with the community has been reassuring. It let me know that I could be a part of something. Whether it’s at a WordCamp or on social media – I feel a sense of belonging.

You Can Be YourselfThe WordPress community is diverse. It consists of people from all backgrounds, identities, and geographic locations.

But it’s by no means perfect. Diversity is celebrated, but not universally. We sometimes see a lack of representation at WordCamps. And not all voices receive equal time.

Still, I feel like WordPress is ahead of the curve. I find that most people are accepting and welcoming. Not every community can say that.

The project has helped by setting an example. WordPress 5.6 featured an all-women release squad. And WordPress 6.4 will consist of an all-women and nonbinary group.

The benefit is that members can be themselves. This ties in with the willingness to share. It also makes people feel at home. Thus, they’re more likely to stick around.

There’s Joy in Paying It ForwardWhen we think of contributing to WordPress, it’s often in an official capacity. Writing code or building new features, for example. But there are other ways to give back.

The great thing is that everyone can participate. You can do so regardless of skill level. Good deeds like answering a question in the support forums count. As does publishing a blog post about your favorite plugins.

There are ways to contribute that don’t require formal commitments. You can give in a way that fits your personality and schedule.

It also provides an incredible feeling. Knowing that you’ve helped someone is satisfying. And it compels you to do more.

I’ve received help on several occasions. Others have taken time to provide advice or a code snippet. Their kindness has gotten me through some difficult situations.

The result is wanting to pay it forward. I think it’s a big reason why this community has thrived for 20 years.

Connections That Are Worth KeepingThe biggest lesson I’ve learned? It’s that this community is worth being a part of.

As with any group of people, there are ups and downs. Passionate debates can get out of hand. And not everyone will behave appropriately. But the vast majority of members do.

Plus, the resiliency of the WordPress community is impressive. It has evolved alongside the software. It continued to thrive through a worldwide pandemic.

Overall, it’s been a key to a successful open-source project. Without the support of the community, WordPress wouldn’t dominate the market.

So, pat yourself on the back, WordPress community. You’ve earned it!

The post Things I’ve Learned From the WordPress Community appeared first on Speckyboy Design Magazine.

View Details

Let’s face it: today’s job market is tougher than ever. We work in a competitive global landscape, and it can be difficult to stand out! That’s where a powerful and striking resume design comes in.

But hiring managers may see hundreds of resumes. How can you help ensure that yours gets noticed? Resume templates for Figma are a great starting point.

These slick, polished, modern designs bring your skills and experience to the forefront. They let you share your qualifications and work hostory in moments. And even better, you don’t have to be a design expert to get the full benefits from them.

In this collection, you’ll find 25 resume templates for Figma. They’re free to download and use. They span a wide array of styles and design aesthetics, so it will be easy to find the layout that best fits your skills and your sense of style.

Don’t hesitate to explore these designs! Find your favorite, and get to work building a fantastic resume. It’s the first step on in your journey toward landing your dream job. One last thing, make sure you include everything that’s expected from a professional resume!

More Free Resume Templates* Free Resume Templates for Designers * Free InDesign Resume Templates * Free HTML Templates for Resumes

More Figma Resources:

50 Free Web & Mobile UI Templates for Figma
25 Fantastic Tutorials For Learning Figma

Free Modern Resume Templates for Figma Modern and sleek, this resume works for any career path. You can quickly drop in your credentials and have a workable, stunning design in just a few moments.

Flyer Resume Template for Figma on Envato ElementsThe Flyer Resume template combines the elements of a flyer with a professional CV. It features vibrant colors, bold typography, and graphical elements to make your resume stand out.

UX & UI Designer Resume Template Built for designers, a resume template like this is heavy on style. It’s simple to work with but packs an eye-catching column layout that employers will notice.

Videre Resume/CV Figma Template on Envato ElementsVidere offers a clean layout with sections for personal details, work experience, education, skills, and references. The Figma template is customizable and easily allows you to create a professional and visually appealing resume or CV.

Simple Resume Template for Figma Do you need a one-page career overview to land your dream job? This template has you covered. It lets you share without resorting to messy and cluttered layouts.

Minimal Resume Template for Figma This minimalist resume design puts your credentials front and center. It’s meant for creatives, designers, developers, and anyone with skills to share.

Interiorch Architect Resume Template on Envato ElementsCreated for architects and interior designers, this resume template has a clean and modern layout with sections for personal details, professional summary, work experience, education, skills, and portfolio. The Figma template allows you to showcase your design projects and can be customized to suit your style and industry.

Professional Resume Design Template Here is a sleek modern resume design for 2023 and beyond. Your name and profile runs down the right-hand side. The heart of your skills and experience are listed in the main section on the left.

Pluribus Personal Resume/CV Template on Envato ElementsPluribus is a clean design for creating a professional personal resume or CV. It features sections for personal information, professional summary, work experience, education, skills, and references. The template offers customization options and a visually appealing layout.

Free Professional Resume Template Professional Resume is a template with a simple but elegant layout. It’s easy to customize by adding your skills, experience, and education.

Fabius Resume/CV Figma Template on Envato ElementsFabius sports a modern and stylish design for creating a personalized resume or CV in Figma. It offers sections for personal information, professional summary, work experience, education, skills, portfolio, and contact details.

Free CV & Resume Figma Template With a blue sidebar including a profile photo, this resume design stands out. You can easily add your logo or personal brand and then export the finished product to PDF format for sharing with hiring managers.

Free A4 CV/Resume Template Three design options have been included here, making this a versatile resume template. Each template is in A4 format.

Computer Technician Resume Template Here is a resume template meant for computer technicians and other IT professionals. With it, it’s effortless to share your role-specific background and skillset.

Figma Resume for Freshers & Professionals There are now more remote workers than ever, and it’s time for resume templates to catch up. Here’s a design tailored for those who aim to work from anywhere.

Free Flat & Minimal Resume Template This minimal resume template lets you place a professional headshot in the upper center. Below, you can list your work history, degrees, skills, and much more.

Free CV Template for UX/UI Designers Another template for designers, but this comes with a contemporary look. It has ample room for content, while keeping a clear and readable layout.

32 Resume/CV Template for Figma Are you searching for flexibility? This template pack has you covered, with 32 designs to choose from. They vary by style but share a colorful elegance that reviewers will appreciate.

Informative UI & UX Resume Template Informative and inspiring, this resume template is a top candidate for 2023. It uses subtle color contrasts with clearly defined spaces between each section.

CV Template for Designers & Engineers Designers and engineers have many technical skills to share on their resumes. Here is a template meant for just that, with multiple pages of layouts to fill in credentials.

Curriculum Vitae Template for Figma A CV template like this is colorful yet professional. At the top, you can add a photo and your profile. Below are listed skills, links, and your work history.

Clean & Simple Figma Resume Template This template will always focus on your professional story. It focuses on your accomplishments, with clearly defined sections and a refined modern style.

Software Developer Resume/CV Template Software development is a huge growth field, full of highly qualified candidates. Stand out from the crowd with this sleek resume design for 2023, with room to highlight your achievements.

Three Simple Resume Templates Grid layouts help your resume content stay clear, concise, and easy to read. This template has been built around that idea, with three templates inside.

UI & Developer Resume Template for Figma Color contrasts help your resume stand out while maintaining a professional style. With forest green hues, this design is a stylish option that doesn’t sacrifice a pro look.

Angular JS Developer Resume Template Images and branding help you call attention to key details on your resume. This free Figma template has ample room for these, with an excellent modern design used throughout.

Basic Resume Template for Figma The best resume templates stand out for their flexibility. They work for any industry or set of skills. Here is a top example with a versatile layout that’s easy to edit.

Community Resume Template for Figma Customizable in a few clicks, this design lets you share your work story with others smoothly. In the upper right, you’ll find room for a professional headshot.

A4 Resume/CV Template for Figma A classic resume layout, this template is straightforward to work with. Drop in your details and create a PDF copy for sharing,

Clean & Minimal Figma Resume/CV Template This resume uses two columns to list your career content. Across the top is a customizable heading and section for contact details.

The 10 Key Things You Should Include in a Resume1. Contact Details: Your full name, mobile number, email address, and your address. 2. Professional Summary: Provide a concise overview of your career goals, skills, and experience. Tailor this section to match the specific job or industry you are applying for. 3. Work Experience: List your previous employment history in reverse chronological order. 4. Education: Include your educational background, starting with the most recent degree or qualification you obtained. Mention the institution’s name, degree or certification earned, and the year of completion. 5. Skills: Highlight your relevant skills that are applicable to the job you are seeking. Include both hard skills (technical abilities) and soft skills (personal qualities and attributes). 6. Achievements & Awards: Mention any notable achievements, awards, or recognition you have received in your professional or academic career. 7. Certifications & Training: List any certifications, licenses, or professional courses that are relevant to the position you are applying for. 8. Projects or Portfolio: If applicable, include a section for showcasing examples of your work, such as projects, designs, writing samples, or presentations. 9. Languages: Specify any languages you are fluent in, particularly if it is relevant to the job or if you possess language skills that are in high demand. 10. References: It is common to omit references on the resume itself, but you can mention that references are available upon request.

The post 25 Best Free Resume Templates for Figma in 2023 appeared first on Speckyboy Design Magazine.

View Details

Like many web designers, I’m a fan of routine. I like having a set process for getting things done. And crafting a design can greatly benefit from this practice. For...

The post How No-Code Tools Disrupt the Design Process appeared first on Speckyboy Design Magazine.

View Details

Iconsans – This set of 320+ free icons includes versions for Vue and React.

Recreating the Gradient Mask Hover Effect from Evervault – A recreation of the hover effect seen on the customer grid on the Evervault website.

What’s New in CSS & UI: I/O 2023 Edition – Take a look at 20 exciting and impactful cross-browser features that have recently landed or are coming soon.

Ways That AI Can Enhance Your Website – Explore areas where AI is already being leveraged on everyday websites.

Vertical Rhythm Using CSS lh and rlh units – How these new CSS units make creating a vertical rhythm easier.

Type Scale – This tool will help you create an attractive type scale that looks great on every device.

Should a Web Designer Ever Provide Discounts? – Everyone wants a bargain. But be careful with who you give them to.

Conditional CSS with :has and :nth-last-child – How to change an element’s layout relevant to its number of child elements.

10 Books to Improve Coding Skill in 2023 – Selections to help you level up your code.

Could Niche Web Communities Come Back? – How the combination of social media uncertainty and improved technology are making web-based communities more attractive.

Classic Editor vs Gutenberg: The Ultimate WordPress Showdown – Comparing the benefits and drawbacks of each WordPress editing experience.

Proportio App – A tool for creating proportional scales for typography, iconography, spacing, and components in design systems.

Beautiful Business Cards with Holographic Effects for Inspiration – Impressive designs that are sure to draw attention to your brand.

Solving Media Object Float Issues With CSS Block Formatting Contexts – Common problems using CSS floats and how to solve them using a block formatting context (BFC).

WordPress 6.2.2 Restores Shortcode Support in Block Templates, Fixes Security Issue – The latest version fixes a block template bug introduced in WordPress 6.2.1.

WordPress 20th Anniversary: Cast of Characters part 1 – This podcast looks back at some memorable moments during WordPress’ first 20 years.

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

View Details

Humans crave comfort, familiarity, and routine. It applies to our work and life.

For example, I take my routine to the next level. I start each morning the same way: I turn on my computer and open the apps I need – all in the same order. Maybe I’m a bit obsessed?

But this behavior goes further. It also applies to the way I build websites. There are certain styles and layouts that I’m comfortable with.

Don’t get me wrong – I do like some variation in how things look. But I also have a preferred way of working. Thus, I become unnerved when someone asks me to change.

There’s both a level of fear and frustration when leaving one’s comfort zone. But it can be a more rewarding experience than our brains will allow us to believe.

Let’s explore why projects outside of our sweet spot can cause such discomfort. Along the way, we’ll discuss some things we can do to meet these challenges with enthusiasm (or cautious optimism, at least).

Finding Your Design Happy PlaceSuccess breeds complacency. That’s why, in the world of sports, it’s incredibly hard to win multiple championships in a row. Maintaining that same level of intensity is difficult.

In web design, successfully completing a project makes us feel great. But it can also result in becoming formulaic in how we do things.

Our process may evolve in some areas. But overall, we do what has led to positive outcomes in the past. It’s a natural reaction.

This approach is also great for efficiency. Especially when we have multiple projects to manage. Repeating these steps allows us to get more done in less time.

That is, until someone comes along and disrupts our happy little pattern.

Thanks for Ruining a Good ThingHas a client ever asked you to create something that isn’t your style? It can throw you off your game.

I’ve been in this situation before. A client wants a unique layout for their site. Hearing this makes me feel a bit insecure. They were well within their right to ask. But I immediately felt like I was going to fail.

What was I so afraid of? They’re asking me to go beyond my comfort zone. Since I haven’t built this type of site before, how can I possibly succeed? Maybe this project will destroy my confidence. What if I disappoint my client?

This is an irrational way to approach the situation. I’ve been at this for long enough to where I should know better. But, like it or not, that’s usually my first reaction when life takes me to unexpected places. I don’t count it as one of my strengths.

Take a Deep Breath & Come To RealityThe biggest hurdle in these situations is taking the first step. Maybe it’s the fear of failure or the sense that you aren’t good enough. But it seems that the longer you avoid doing uncomfortable things, the worse you feel.

The solution is to get to work. Eliminate any distractions and spend some quiet time with your project. You may find that a decent idea can grow into something better. Pretty soon, you’ll be on your way to a successful outcome.

Problem-solving is a part of design that doesn’t always come naturally. When you’re handed the same problem over and over, you solve it the same way. But when handed a more unfamiliar riddle, you might be unsure of the answer. Uncertainty is uncomfortable, after all.

For me, the initial panic usually gives way to laughter. I wonder why I ever worried in the first place. Practicing patience and allowing myself room to experiment often leads to positive results.

With that in mind, here’s what I’m going to tell myself the next time I face a similar project. Maybe it will help you, too.

You’re Not Being Punished – Being uncomfortable can be the worst feeling. It’s as if a curse has been put on me. I know that’s not the case (at least, I don’t think it is). But it’s important to remember that this is just another challenge in a life full of them. Others have been through far worse.
You Might Fail Initially – Your first idea may not be the best one – but that’s OK. You have to start somewhere. Design is a process. And it’s particularly tough when you’re swimming in uncharted waters.
You’ll Get It – Eventually – Working a different way often requires some trial and error. It also takes a bit more time. Patience and persistence are keys. If you keep working, you’ll end up with the right answer.
The Experience Will Make You Better – Oftentimes, the best way to combat being uncomfortable with a project is to force yourself to do it. The reward is that you’ll feel more confident about having taken it on. You’ll also be able to lean on this experience when facing future challenges. That’s good because another one is always just around the corner.

It’s All Part of the JobWhen you think about it, web design (and life) would be pretty boring if we did things the same way every time. Still, going outside your comfort zone is hard.

Your initial reaction may be to run as fast and far away as possible. But that leads to complacency and stagnation. Neither trait is good for your career.

It turns out that the key to dealing with these situations is to work through your fears and preconceived notions. Along the way, you’ll find that your design skills are much more flexible than you might have thought.

The post Taking Trips Outside of Your Design Comfort Zone appeared first on Speckyboy Design Magazine.

View Details

PDF (Portable Document Format) has been around for a long time. You might say it’s almost as much a part of the web as HTML.

Not that these files are in any way vital. It’s just that you see them everywhere. Their continued presence is both understandable – and a bit baffling.

PDFs can be viewed on any platform or device. Native browser support makes using these files a no-brainer over proprietary options like Microsoft Word.

And they’re also quite flexible. It’s possible to embed anything from multimedia to interactive forms inside a document. Plus, they retain formatting. Fonts, colors, and layout are consistent – no matter how you view the file.

It’s not all sunshine and rainbows, though. PDF files can run into accessibility issues. And some files can be quite large – eating up precious bandwidth.

Perhaps the biggest drawback of PDF is in how we use it. Maybe it’s laziness or a lack of forethought. But in many instances, PDFs aren’t necessary.

So, where do PDFs fit in? Let’s explore when uploading a PDF to your website does (and doesn’t) make sense.

The Role of PDFs on Early WebsitesThe primary reasons we use PDF can be traced to the early web. We didn’t have the advanced CSS layout techniques of today. Browsers were ill-equipped for much beyond a single-column page. And web typography was severely limited.

Thus, PDF provided a more polished look than HTML. Users could also expect more consistent results when printing these files. So, even when weighed against slow connection speeds, the format made sense.

To some degree, PDFs represented the web’s future potential. The ability to create multi-column layouts that mimic print. Large images and multimedia presentations took center stage. Fonts that added personality and worked on every screen.

At the time, the format gave designers the advantages of utility and vanity. PDF could do things that a web page couldn’t. That made it a popular choice – even if it wasn’t always the right one.

The web has evolved, however. The advantages of using PDF aren’t quite as clear. CSS and HTML have matched (and maybe surpassed) many of PDF’s core capabilities.

Are PDFs a ‘Lazy’ Way to Share Content?PDF files also add a layer of convenience for web designers. That can be both a good and bad thing.

Tools such as Adobe Acrobat make it easy to convert files to the format. And content management systems (CMS) like WordPress make uploading and media management a cinch. Thus, it’s tempting to use PDF even when it’s not necessary.

For example, let’s say a client sends us a Word document. It has some complex formatting. And perhaps we don’t feel like trying to clean up an HTML export of the text. In this case, converting the document to PDF is simply easier.

Or maybe that client sends us a file that’s already a PDF. Exporting to HTML has improved over the years. But it can still be a hassle. Once again, it’s easier to upload the file rather than tidy up a mess.

It’s difficult to blame anyone for using the easiest solution. But there’s a cost:

It forces the user to make an extra click to access the file;
The file may or may not be easily accessible to screen readers or other assistive technology;
PDF files tend to be difficult to read on mobile devices;
The file size may be significantly larger than HTML;
Its content may not be as readily indexed by search engines;

Each of these factors is enough to give us pause. Convenience is valuable – but not at the expense of usability.

When It Makes Sense To Use PDFAll of this isn’t to say that PDFs don’t have a place. There are still scenarios when it makes sense to use them:

Documents designed to be printed: Items like press kits and product manuals have traditionally used PDF. This is particularly useful when those documents are meant to be printed.
Forms that shouldn’t be submitted online: Sometimes you don’t want users to submit a form online. For example, one that contains sensitive personal information. Medical and legal documents come to mind. In this case, the user is asked to print the form and submit it offline.
As an alternative to HTML content: A PDF can be a handy way for users to take content with them. Consider a news article or real estate listing. Some users may prefer to download a copy rather than bookmark the HTML version. It’s also reasonable for content that is only available for a limited time.
‘Official’ documents: Some organizations have strict rules regarding documents. They may require users to download only the original version. With that, HTML equivalents might not be acceptable. Tax and other government-related forms are possible examples here.

This isn’t an exhaustive list. But it does show that the format still offers some benefits. Much depends on context, however.

It’s important to consider why PDF is (or isn’t) a viable option. What impact does it have on users? Does it serve the best interests of the website?

If it’s a matter of mere convenience for web designers – that’s not enough. Using PDF should result in a net positive for everyone involved. Short of that, HTML will likely be the more appropriate choice.

We Should Rethink Our Usage of PDFOld habits are hard to break. And years of uploading PDF files have become standard practice for many of us. But it’s time to rethink this strategy.

Modern web technologies can handle virtually every function a PDF can. In some areas, like mobile usability, CSS and HTML even outshine the venerable file format.

In short, there are now more reasons to use HTML and fewer for using PDF. So, the next time you receive a lengthy Word document from a client – think about what format makes the most sense.

You may find yourself using that PDF creation software less often. That’s probably a good thing for the web and its users.

The post Why Do We Still Use PDF Files on the Web? appeared first on Speckyboy Design Magazine.

View Details

WordPress has evolved steadily. It has added significant features, while somehow maintaining familiarity.

But much of the user and developer experiences are based on our choices. Do we go with a battle-tested classic theme or opt for a newfangled block theme? Do we embrace the Block Editor or stick with the trusty Classic flavor?

These are defining decisions. They chart a path for how we work with the content management system (CMS). And they influence everything from how we build a website to how content is created.

You might even say they’re distinctly different experiences. Here’s why I hope it stays that way.

Flexibility To Fit Any Type of ProjectFlexibility has long been a strength of WordPress. Its open-source code and extensibility make for nearly endless customization.

Developers can tweak the front and back ends to match project needs. If the default functionality isn’t enough, you can build your own. And we can’t forget about the massive theme and plugin ecosystem.

This means that building virtually any type of website is possible. Single-page portfolios, enterprise-level multisite installations, and everything in between are within reach.

Still, the advent of the Block Editor (WordPress 5.0) and Site Editor (WordPress 5.9) raised a big question. How would these additions impact flexibility?

If anything, they add more avenues for customization. The Block Editor will work with any type of theme. And in some cases, it may eliminate the need for page builder plugins or hard-coded custom templates.

The Site Editor, meanwhile, allows us to build an entire website with blocks. Block themes can serve as solid no-code solutions. They may be the perfect fit for specific types of sites.

And if that weren’t enough, you can also combine the best of classic and block themes. Features like block template parts let theme developers create their preferred mix of tools.

Yes, WordPress is still flexible. Although one could make the case that choosing the right path may be harder than ever.

Concerns About the Present & FutureIt’s great to have choices. But there are a few concerns with having two distinct ways of building with WordPress. Perhaps the biggest is how it impacts the future.

If you choose a classic theme, will it still be viable within a couple of years? Or will these themes have been phased out by then? That could conceivably leave you with a mess when it’s time for a redesign.

On the other hand, some rightly wonder if block themes are capable enough. The Site Editor is still relatively young. And blocks can’t account for every possible use case. Plus, block themes continue to make up a relatively small segment of the market.

As such, some will prefer the tried-and-true method of writing PHP and CSS. All the talk these days is about blocks. But it may be that classic themes are still the best fit for highly customized websites.

Taken together, it seems like developers are caught between worlds. After all, no one wants to go in the wrong direction. But is there a bad choice here?

You Can Still Build to Suit With WordPressThere has been some compelling debate about the current state of WordPress development.

Chris Coyier wrote a fantastic piece about the uneasy transition to blocks-for-everything. He wondered if perhaps PHP-based themes have met their demise. Ben Word, meanwhile, spoke of how you can use PHP to get the best of both worlds.

Look around social media, and I’m sure you’ll find others who align with one stance or the other. For my part, I can identify with both points of view.

Each approach has its strengths. With that, maybe the decision should come down to what’s best for your project.

As a developer, there is great power in being able to build according to need. Since both classic and block themes are supported, there’s no reason we can’t use what works best for us.

If you feel like PHP-based themes aren’t where it’s at, why shouldn’t you use a block theme? And if block themes don’t provide enough flexibility, classic themes make perfect sense.

This is what separates WordPress from other platforms. You aren’t stuck with a single way to do things. Sometimes this can create extra layers of complexity. But it’s arguably better than being limited in how or what you can build.

The Beauty of More Options & PossibilitiesMaybe WordPress isn’t always the best option for a given project. For instance, it may be overkill for a simple one-page site with no dynamic content. Thankfully, each of us can decide if that’s the case.

But I love that I can use WordPress to build that type of site. Or any other type of website. And I can choose a path to building that aligns with my needs.

Sure, there are drawbacks. And there are also areas of the CMS that are languishing. But by and large, WordPress works as advertised.

I understand that some may see the existence of block and classic themes as an unnecessary complication. But I choose to look at it as having two legitimate options to build a website. And I hope that continues to be the case.

The post WordPress Offers Two Very Different Paths: That’s a Good Thing appeared first on Speckyboy Design Magazine.

View Details

8 CSS & JavaScript Snippets for Creating Beautiful Bokeh Effects – Bring the popular photographic effect to your website.

How To Use AI Tools To Skyrocket Your Programming Productivity – Why AI is an opportunity to take your programming to the next level.

10 Best Virtual Reality and 360° Tutorials for Premiere Pro – Learn how to add VR to your video projects with these helpful tutorials.

Speed Trap – The story of how Google’s AMP project caused many to lose trust in the company.

Apple Brings Final Cut Pro & Logic Pro to iPad – The popular desktop apps will be available for iPad starting on May 23.

AI Tools Are Scraping Your Website. Is That a Good Thing? – AI tools get their content from all over the web. But website owners aren’t necessarily reaping the benefits.

The Contrast Triangle – This tool will help ensure that your background, text, and link colors are accessible.

Introducing the Android UI Design Hub – A resource for building exceptional user interfaces across all form factors.

Introducing Baseline – Is that shiny new feature or API safe to use yet? Google’s initiative aims to shed light on this common issue.

Scoped CSS is Back – A look at how this W3C spec could provide more control over styling CSS selectors.

10 Beautifully Designed Portfolio Websites that Tell a Story – Portfolios that make a powerful impact on visitors and leave a memorable impression.

The Ongoing Defence of Frontend as a Full-Time Job – Exploring the importance of front-end development work.

Alt Text Generator – Upload an image and this tool will generate ALT text.

Getting Your Design Work in Front of the Right People – Ways freelance web designers can position themselves for success.

A Curated Resource to Kickstart Your Design Education – A collection of links, books, articles, and more that will help boost your career.

The Only CSS Flexbox Illustration You Will Ever Need – This handy cheat sheet will help you visualize how Flexbox works.

Exploring the Future of WordCamps With Angela Jin – A look at the proposal to modernize WordCamp events with a more narrow focus.

2022 Annual Survey Results & Next Steps – A breakdown of the annual WordPress survey results.

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

View Details

One of the first things you learn as a freelance web designer is that everybody wants a deal. It happens with both new and existing clients. You’ll receive plenty of requests for discounted pricing. They must think that web designers are akin to a used car lot.

Haggling over price is as old as commerce itself. But we still need to make a living. Thus, if we provided a discount every time one was requested, we’d go broke.

That’s why full price should be the norm for most clients. Doing things this way has several benefits.

For one, it keeps your bank account in good shape. Plus, it helps you predict future revenue and serves as a motivator. A case can also be made that it reduces stress. You’ll avoid becoming desperate for that next project to come along.

Still, that doesn’t mean discounts are never a good move. There are scenarios where it might make sense for your business. Here are a few times when a discount should be on the table.

Charity Website ProjectsMany businesses offer discounts to non-profit organizations. For example, everyone from internet providers to banks provides money-saving deals. Some see it as a moral obligation. Others may look at it as a chance to gain some positive publicity.

For web designers, especially solo entrepreneurs, it can be more complicated. We don’t have the financial resources of bigger companies. Deep discounts can disrupt our revenue stream.

There is room for compromise, however. Perhaps discounts could be reserved for causes that are close to your heart. A local charity with a tight budget is a prime example. A food bank, a homeless shelter, or an animal rescue are possibilities.

In those cases, you might find building a website to be a true labor of love. As such, money shouldn’t be the main object.

It is important to be judicious about who receives discounts, however. You don’t want to get into a situation where you’re putting in hours of work without fair compensation.

Loyal Clients Looking for a Website RedesignThe truly lucky among us will have clients that stick with us for years. Not only are they a pleasure to work with, but they also pay on time and make referrals.

These folks help to keep your business going. Because of that, they deserve a special place on your client list. They are VIPs.

Providing a small discount on a website redesign is both good business and a way of saying “thank you.” If they’ve generated substantial revenue, any amount you can knock off the price is worth it.

This helps to continue building goodwill in your relationship. In turn, you’ll know that you can count on their continued patronage. And they’ll be happy to spread the word about your business.

During Tough TimesInevitably, one of your clients will go through a difficult time. It could be part of a widespread crisis such as a pandemic. Or maybe something localized like a fire or bankruptcy.

Regardless, this might be an appropriate time to provide a discount. Again, it’s about helping to strengthen your relationship. This demonstrates that you have your client’s back.

There’s also some practicality involved. If you charge recurring fees for maintenance packages or web hosting, it may be difficult for your client to pay. Providing a discount or splitting up payments might make the ultimate difference in whether you get paid.

Not sure what to do? It may depend on your experience with a particular client. If they’re generally on time with payment and great to work with, this makes the decision easier.

When NOT to Discount Your Web Design ServicesThe scenarios above are the exception. Plenty of people will ask you for discounts. It’s usually better to say “no.”

Prospective clients are shopping around for the best deal. That’s their prerogative. But web designers will not benefit from a pricing war. It’s a race to the bottom that will leave you with regret.

Some proclaim that providing a discount now carries the promise of “more work” later. This is one of the oldest tricks in the book – don’t give in. Unless future revenue is guaranteed in writing, you’re unlikely to ever see those brighter days.

Existing clients are a bit more complex. As we mentioned earlier, it’s fine to provide discounts to your VIPs. They’ve more than made up for whatever deal you offer.

But some people simply don’t want to pay for anything. And they expect others to bend to their demands.

It can be a sign of a one-way relationship. One where your experience and expertise aren’t valued. It might be better to see them walk away in an angry heap than to feed their ego.

It’s Your Business, Your DecisionThe lesson here is simple: just because someone asks for a discount doesn’t mean they should receive one. You might even make the case that the opposite is true.

Some people do deserve a break, though. For example, non-profit organizations and loyal clients. Their actions may move you to offer lower pricing without being asked.

It’s your web design business. Therefore, you get to make those decisions. Choose wisely!

The post Should a Web Designer Ever Provide Discounts? appeared first on Speckyboy Design Magazine.

View Details

If you are looking to add unique elements to your illustrations or elevate your projects to a higher standard, you will require some high-quality Illustrator brush packs. Despite the popularity of Illustrator, finding the perfect brush pack can be time-consuming, especially when compared to the plethora of brushes available for Photoshop.

Using Illustrator brushes can add unique and creative elements to your artwork that would be challenging to achieve manually. They allow you to quickly and easily create textures, patterns, shapes, and lines that can enhance your designs and take your projects to the next level.

We’ve curated this collection of the best high-resolution brush packs for Illustrator to save you time and effort. Within this collection, you’ll discover a diverse range of free Illustrator brushes in various styles, including brush, stipple, grunge, vintage, doodles, and many more.

Whether you require an inspiration boost or a method to enhance your artwork, these free Illustrator brush packs will make your illustration work stand out. Simply download the brush packs and use them in your next project.

Vintage Banner Brushes (Free)This free set consists of ten hand-drawn Illustrator brushes that will add a vintage touch to your illustrations. Perfect for retro-inspired posters, website banners, and social media graphics.

Massive Pack of Illustrator Brushes & Symbols (330 Brushes, Envato Elements)No matter what type of project you’re working on, this pack is a must-have. This huge collection of Illustrator brushes contains over 330 strokes, speech bubbles, swooshes, splashes, and tons of other high-resolution drawings and paintings.

Preppy Art Illustrator Brushes (Free)With the Preppy Art Illustrator Brushes Kit, you can add a touch of elegance to your work. This free set includes 24 high-quality brushes, each with a preppy, sophisticated look and feel. These brushes are perfect for adding delicate details and subtle textures.

Watercolor & Black Pattern Brushes (42 Brushes, Envato Elements)This huge set of Illustrator brushes contains 42 watercolor brushes and a bonus set of 42 black pattern brushes. You can easily use them to create mandalas, wreaths, or borders.

Wax Crayon Brushes (40 Brushes, Free)If you’re looking to add a naive charm to your designs, then look no further than this free chunky texture brush set. There are a total of 40 wax crayon brushes in the free pack. You can also use this brush pack in Affinity Designer.

Patts Brush Collection (50 Brushes, Envato Elements)As well as including 50 Illustrator brushes, this pack also comes with 60 seamless patterns. With this Illustrator brush pack, you can make simple illustrations look beautiful.

Spray Paint Stipple Brushes (Free)This free set comprises 12 high-quality Illustrator brushes that will add a realistic spray paint effect to your designs. Perfect for creating edgy artwork such as graffiti-style posters, punk rock album covers, and urban landscapes.

Scribble & Scrawl Brushes (44 Brushes, Envato Elements)This set of 44 Illustrator brushes is perfect for any primitive-looking artwork or childlike drawings. You’ll find various elements that are easy to apply and edit to suit the needs of your project.

Spray & Hatch Brushes (20 Brushes, Free)This free Illustrator texture package includes ten spray and ten hatch brushes. They will allow you to create volume and shadowing, highlight details and point out composition elements.

Chemist Stipple & Grain Illustrator Brushes (35 Brushes, Free)Are you working on a design project for a chemistry lab? You won’t want to miss this brush pack. In this set, you will get scatter shader brushes, textured and clear line brushes, grain and stipple brushes, and as a bonus, retro texture brushes for Photoshop.

Free Floral Pattern Brushes For Illustrator (25 Brushes, Free)This brush pack features a lovely collection of floral pattern brushes for Illustrator. You’ll find 25 pattern brushes and 25 individual illustrations for your projects.

Free Lipstick Vector Brushes for Illustrator (5 Brushes, Free)Consider this free Lipstick Vector Brush Pack for Illustrator if you need a unique vector brush for a fashion or beauty project. The pack contains five individual brushes and is free for personal and commercial use.

Big Illustrator Brushes Pack (56 Brushes, Envato Elements)This brush pack contains a set of 56 various Illustrator brushes, including stipple brushes, chalk and pastel, ink, flourish, patterns, and more. The download also includes four distressed stipple seamless vector swatches.

Rodeo Hand Drawn Rope Brush (Free)This brush pack includes a hand-drawn rope brush that’s perfect for any design. You can easily adjust the width of the rope and change its color. The brush set is free for personal and commercial projects.

Pencilcraft Brushes for Adobe Illustrator (30 Brushes, Envato Elements)This brush pack is a perfect choice if you need to add a real-life hand-drawn feel to your illustrations. The free pack contains a total of 30 brushes with infinite lengths.

Texture Illustrator Brushes (Free)These ten free texture brushes will allow you to add depth to your illustrations. They’re perfect for adding realism to your work.

Free Floral Watercolor Brushes Bundle (38 Brushes, Free)Try this floral watercolor brush pack if you’re working on a wedding project. You can use these brushes to create unique backgrounds or trims for wedding invitations. The free package contains 38 brushes, and they can be used in personal and commercial projects.

Free Doodle Brushes for Illustrator (4 Brushes, Free)With the help of this doodle brush pack, you’ll be able to easily create unique wreaths and borders in your project. The package contains four different brushes, and you can easily change the colors to match the project you’re working on.

Free Halftone Vector Brushes (5 Brushes, Free)Consider this brush pack containing halftone vector brushes for Illustrator if you want to add a grungy feel to your design. The package includes five brushes, and can be used in both your personal and commercial projects.

Paper Tooth Free Line Brushes for Illustrator (Free)If you’re trying to achieve a printed look for your design project, then this brush pack is the perfect choice. The package contains four brushes that give your artwork a “jagged edge” printed look.

Adobe Illustrator Metal Gradients (140 Brushes, Free)Finding great gradients for Illustrator can be challenging. With this set, you will no longer find yourself lacking. The pack comes with 140 brushes which are free to use.

Marker Pen Strokes AI Brushes (64 Brushes, Free)This set contains 64 high-quality brushes featuring marker pen strokes and scribbles. You’re free to use them in both personal and commercial projects, and attribution is not required.

Free Natural Sketch Doodle Lines Illustrator Brushes (Free)This is another excellent set if you want to add a hand-drawn feel to your designs. You’ll find various doodle lines, and you can freely use them in any personal project.

Free Hairy Fur Illustrator Brushes (Free)This set of 8 furry brushes is perfect for any design project featuring pets and animals. The brushes are free for personal use and work best when applied gradually in different tones.

Free Urban Squares Illustrator Brushes (Free)Spice up your designs with this free urban square brush pack. These brushes can be used in personal and commercial projects, and attribution is appreciated but not required.

Free Vintage Shading Brushes for Adobe Illustrator (30 Brushes, Free)If you want to add an etched or a vintage look to your designs, then be sure to check out this vintage shading brush pack for Adobe Illustrator. You’ll find 30 different brushes that are free to use, and you can easily apply them via the brush, pencil, or line tool.

Free Illustrator Grunge Brushes (Free)These grunge brushes are perfect for adding a grungy look and feel to your artwork. The pack contains various brushes that can be used in personal and commercial projects.

How to Install & Use Illustrator BrushesHere’s a quick tutorial on how to install and use an Illustrator brush set.* Download and unzip the Illustrator brush file you want to use * Save the brush file in a folder that’s easily accessible * Launch Illustrator and go to Window > Brush Libraries > Other Library * Locate the downloaded brush folder, select the brush file, and click Open * The brushes will now open in Illustrator. However, they will disappear if you quit Illustrator. To fix this, click the hamburger menu in the opened Brush panel and select Persistent. * To use the brush, select it from the brush panel and apply it to the canvas The post 25+ Free High-Resolution Illustrator Brushes appeared first on Speckyboy Design Magazine.

View Details

There’s an adage that says everything is cyclical. You can see examples of it everywhere. Things like fashion, music, and books all come back into the mainstream after some time away.

The web is finally old enough to see the return of some trends. Brutalist design is a prime example. Web designers spent years building increasingly complex layouts. But many have gone back to the basics in recent times.

I’m wondering if we’ll see the same thing happen with online communities. Years ago, we built niche sites that catered to a specific group. We installed forums (shout out to phpBB), opened our blogs to comments, and tried to stake out a little corner of cyberspace.

Social media changed all of that. Communities began moving to larger, proprietary platforms. The likes of Facebook, Twitter, and Reddit have become places to meet and discuss hot topics.

The move made sense at the time. Access to powerful servers, globalized networks, and providers that handled moderation (to a degree, anyway). Why would we ever go back to the way it was?

Well, recent events have made me long for those good old days. Here’s why I’d like to see a return of niche web communities. That is, with some modern conveniences.

We’re Subject to the Whims of CompaniesEverything is great on social media – until it isn’t. Social media companies can change policies (or, ahem, ownership) at any time. And too bad if you don’t like the results. Users have zero control.

Twitter has become the poster child for what can go wrong. The reduction of content moderation staff means slower responses to harmful behavior. Meanwhile, the platform’s user verification policies have been turned on their head.

And Facebook causes its share of headaches as well. Algorithm changes have made it harder to see posts from Groups in your main feed. Plus, I believe that the Groups feature is becoming more cumbersome to use. The service shows what it thinks I want to see. It rarely guesses correctly.

Sadly, users appear to be low on the priority list. Shareholders and overzealous billionaires get top billing. The rest of us are an afterthought.

A web-based niche community can put users first. Stakeholders may not have complete control of the experience. Much depends on the platform being used. But there’s a better chance for stability and sustainability.

Users Don’t Have an Ownership StakeLet’s say that you’ve decided to leave Twitter. Good for you! But what happens to your tweets?

You can’t simply import them to Mastodon or a similar service. You’ll have to start from scratch. That’s especially painful if you value any of the content or interactions you had.

But open-source tools like WordPress don’t lock you in. You own the content you post. And the site’s data is portable.

This means that you can move to a new host or redesign your website without losing anything. In addition, you’re not reliant on finicky APIs that can go down or start charging money at any time.

How Does a Modern Web Community Look?There’s a reason why so many people abandoned the idea of web-based communities. Social media was easier. It did much of the dirty work for us. All we had to do was show up and start making connections.

At the same time, building and managing community-based websites was not easy in the 2000s. The tools at our disposal lacked cohesiveness. You could have, say, a website and a forum. But tying them together wasn’t a simple process.

That’s no longer the case. New tools and protocols can solve many of the previous generation’s pain points. With that, here’s how a modern web community could look:

It Runs on a Single PlatformIt’s now possible to provide a more unified experience. Membership sites have become mainstream. Several plugins exist that make setup a breeze. You don’t need to invest a lot of money or know how to code.

In addition, other functionality can be added to suit your needs. The community can be open to the public or invite-only. Membership can be monetized or remain free. Content moderation and spam prevention tools are vastly improved.

A single WordPress login is all a user needs. They can use it to access their profile, communicate with other members, and register for events.

WordPress isn’t the only option, of course. There are plenty of platforms for community builders. But it is a natural fit for this type of site. You no longer have to cobble together a collection of unrelated tools.

It Ties in With the FediverseWhat’s the opposite of a corporately-owned platform? A decentralized network of services that can communicate with each other.

That’s what the Fediverse is all about. It encompasses larger services like Mastodon. But individual websites can also join in via the ActivityPub protocol.

Install the ActivityPub WordPress plugin, and you can automatically publish from your site to connected services. It’s like using Twitter’s API to auto-publish. But you’re not limited to that singular walled garden. Your content could go to social networks, websites (via the Friends plugin), or anywhere else that supports the protocol.

Communication is also two-way. So, when someone replies to your post on a federated service, it could also become a comment on your blog.

It sounds complex. But the result is that communities can more easily curate like-minded content. In that way, your community expands beyond your website. People can interact where they are rather than being limited to specific channels.

It Still Uses (But Doesn’t Rely On) Social MediaNone of this is to say that social media is dead. It’s still an important way to reach people. But it doesn’t have to serve as a community hub, either.

Instead, these platforms can be used to drive traffic to your website. Posting content to Facebook, Twitter, etc., increases visibility. That can help attract new members.

One positive of this approach is that you’re being self-reliant. You won’t have to depend on social’s APIs or infrastructure. Yes, you’re still beholden to their algorithms. But they’ll have a much smaller impact on your community’s day-to-day operations.

Big social networks can be used as an enhancement rather than a foundation. This allows you to take advantage of what they do best.

The Web Can Benefit CommunitiesBuilding a web-based community used to be difficult. The technical challenges of time prevented some groups from reaching their potential.

Meanwhile, the advent of social media brought renewed hope to community wranglers. But the landscape is in a constant state of upheaval. That makes it harder to maintain stability and growth.

Thus, a move back to the web makes sense. Tools like WordPress have grown by leaps and bounds. And they offer more flexibility when it comes to design and functionality.

Is this the wave of the future? We’ll see. But it’s exciting to think about what’s possible. Online communities may find a new home in a familiar place.

The post Could Niche Web Communities Come Back? appeared first on Speckyboy Design Magazine.

View Details

When crafting business cards, it is often believed that everything lies solely in the design. We tend to rely on eye-catching illustrations, unique typography, or clever ideas that make our 3.5 x 2-inch card stand out in a sea of others. However, there is always an alternative worth exploring. This alternative involves experimenting with the actual material used as the base for your business card.

One solution that holds the power to truly transform a business card is the use of holographic foils. Their inherent properties offer a vibrancy that spans from light to dark tones, catering to the diverse needs of various designs and styles. Let’s delve into our selection of inspiring examples that demonstrate the immense potential of taking this approach.

Pink & Holographic Business Card Designed by Alexia RouxThe name of this project says it all. The business card takes its beauty from the color pink and a holographic foil that covers a significant part of the front side.

The latter has been designer using colder colors that perfectly balance the pink background, keeping it from looking too schmaltzy. Paired with the letterpress effect, it makes the content look fantastic. The business card conveys not just a feminine beauty, but also the creative soul of the designer.

Sweetland’s Business Card Designed by Lukasz DrozdzStanding in stark contrast to the example above, the brand identity of Sweetland shows everyone that dark paper and holographic foil can form a potent partnership.

While the black paper gives the design a strong businesslike feel, the radiant holographic foil features a gorgeous gradient, making it feel sophisticated.

Daniel Barkle’s Personal Identity Designed by Dan BarkleThe personal identity of Daniel Barkle gives us a lovely combination of silver foil with a gradient overlay that creates a subtle holographic effect.

It is used on the entire front of the business card, making it eye-catching. The backside of the card is fairly minimal and clean, with all the contact information allocated to the corners, making it feel spacious. On the whole, the card looks businesslike with a touch of chic.

Soul Scapes Branding Designed by Mai CreativeMuch like the previous business card, the silver foil effect in this example is the focus. It not only offers a simple metallic effect, but it also establishes the mood.

Both cards look similar, but the designer behind Soul Scapes has used a dark background and white font on the backside. This twist gives the design a classy appeal.

Square Holographic Business Card Designed by PixelbuddhaThis high-resolution, square-shaped business card template boasts a mesmerizing holographic effect. Its unusual and effective memorable layout guarantees a lasting impression.

Dawn Creative’s Identity Designed by Dawn CreativeWith Dawn Creative, the holographic foil is not just used for decorative purposes. It’s also a way to display the content on both sides of the business card. The card’s front side greets potential clients with two clever semi-circles that symbolize the agency’s branding.

The back of the card, in turn, contains all of the contact information, which glows at various angles. Note the high quality of the paper. As a result, the business card feels sophisticated.

Joaquin Homs Branding Designed by Anagrama StudioThe personal brand identity of Joaquin Homs has two variants. The first features a radiant holographic foil to display his name on the front. It serves as a base for the contact information on the back. In contrast, the second option has the same design but uses silver foil.

The business card with the holographic effect instantly commands attention with its warm appearance. Even though the black paper attempts to hold back the vibrancy of the foil, you can still feel its power.

ILNP Boutique Cosmetics Designed by Marcin UsarekIn this business card example, the silver foil makes the letterpressed name stand out from the textured grey background, and the holographic effect on the edges gives the card a touch of vibrancy. This design is excellent for those who want to stick to a businesslike card yet still be brave enough for a little holographic creativity.

HBS Group Designed by Lange & LangeIf you are not quite ready to be swept away by the holographic effect, you can simply use it for establishing natural focal points on your business card, like the way the creative team behind the HBS Group brand identity has done.

They have merely sprinkled the business card with a bit of holographic magic that lightens the mood and enriches the dark environment with a marvelous classic appeal.

Borealica’s Business Card & Identity Designed by Anagrama StudioIn this example, the designers behind Borealica have used a holographic pattern as a decorative panel on the front side of the card and made it the main design feature.

Even though it occupies almost 90% of the card, it doesn’t feel overwhelming. On the contrary, its gentle beach-inspired gradient makes it soft and kind to the eye.

Holographic foil is a compelling medium. It is not just fancy paper with intricate coloring. It’s much, much more than that. It can sometimes exude a personality that can sometimes be difficult to hold back.

But, if you pair it with high-quality paper, subtle coloring, a beautiful font, and a large scoop of creativity, you will end up with a business card that no one will forget in a hurry.

The post 10 Beautiful Business Cards with Holographic Effects for Inspiration appeared first on Speckyboy Design Magazine.

View Details

Although years in the works, it seems like artificial intelligence (AI) came out of nowhere. The technology descended upon the web like an alien spaceship. And we’re all scrambling to find ways to use it to our advantage.

Tools like ChatGPT and Google’s Bard can certainly help to streamline our workflow. They help us troubleshoot code, build plugins, and conduct research. But it can also be used to enhance your website.

There’s plenty of experimentation underway. We’re in the early stages. But AI is being enlisted to help with everything from improving chatbots to generating blog posts.

Today, we’ll look at a few areas where AI is already being leveraged on everyday websites. Take a look and you might find something that moves your site to the next level!

Note: This article mentions specific products that use AI. We do not endorse these products. Nor can we vouch for their quality or accuracy. As always, conduct thorough research before using them.

Help Users Find What They’re Looking ForThe concept of chatbots makes sense. You’re not available to answer user questions 24/7. Thus, these automated features can serve as an always-on customer service representative.

But all too often, chatbots don’t measure up. Their user experience (UX) can frustrate even the most patient among us. Accuracy isn’t always a strong point. And it can take a lot of “conversing” to get what you need.

AI is poised to change that. Several tools have been released that promise to improve the experience.

Take DocsBot AI, for example. It uses your website’s content and documentation to “train” a bot via ChatGPT.

There are a few positives to this approach. First, since it uses your content, accuracy shouldn’t be a problem. That eliminates one of the main drawbacks that AI tools have had thus far.

It also takes advantage of ChatGPT’s conversational skills. Previous generations of chatbots struggled with context. Answers often felt like “canned” responses. AI can create a more natural flow to user interaction.

Generate Relevant Website ContentAI tools that generate content seem to be making the biggest splash so far. It has created a buzz. Enough that some companies have attempted to replace human writers (this writer thinks that’s a bad idea, by the way).

WordPress has been fertile ground for these tools. Several have been integrated into the block editor. Provide the tool with a prompt and AI will do the rest. The best part is that you don’t have to leave your website’s back end.

This could be a huge time saver. There are no guarantees when it comes to quality or accuracy, however. Therefore, we wouldn’t recommend publishing generated content without close review.

But AI-generated text can serve as a great starting point. And web designers can even use it when working with clients.

Waiting for a client to provide content is a common issue. So, why not generate sample text that a client can revise? This could greatly speed up the process. Plus, it sure beats using Lorem Ipsum.

Oh, and we can’t forget about images. AI image tools such as DALL-E and Stable Diffusion can produce compelling results. They might be a nice alternative to run-of-the-mill stock photography.

Improve Your Website’s Accessibility and SecurityNot all website enhancements are visible. And what happens behind the scenes can be just as important. Both accessibility and security fall into that category.

Automated Accessibility ToolsAutomated accessibility tools have existed for quite some time. They’re helpful for testing during the design and development phases of a project. As such, they’re aimed toward web designers more than everyday users.

But user-focused tools are also available. And AI is beginning to increase its capabilities.

For instance, consider software that automatically adds ALT attributes to images. While it works in a technical sense, it may not provide accurate context. Simply adding generic text to an image won’t help users.

But what if a tool could accurately describe the content of an image? Tools like EveryAlt aim to do this with an assist from AI. It may sound like a small thing. But it could dramatically enhance the UX for those who use assistive technologies. It’s also a boost for search engine optimization (SEO) as well.

A Better Way To Detect MalwareKeeping our websites safe is becoming more complex and costly. And despite our best efforts, malicious code still runs wild on the internet. It feels like a losing battle.

A combination of AI and machine learning could be just what we need. Imagine software that’s being fed a steady stream of new threats. As it “learns” the telltale signs of each attack, it can adjust on the fly to detect the code. From there, it could theoretically stop it from being executed. It might even detect new vectors of attack.

MAL{ai} is among the tools taking this approach. Early models are focused on detecting malicious PHP. But expanding the technology to cover languages like JavaScript is also possible.

Building Better Websites With the Help of AIA website should provide users with the best possible experience. This means producing high-quality content and making sure it’s easy to find. And it’s also important to ensure that its features are accessible and safe to use. AI can play an important role in all of these areas.

None of this is foolproof, however. We shouldn’t rely on AI to do all the work for us. But it can certainly help. Think of it as a collaborator in your quest to build a great website.

What’s more, the ideas above are all in their infancy. As tools continue to improve, we’ll undoubtedly find new uses for them. Therefore, the little enhancements we make today could lead to bigger things tomorrow.

If you’re an early adopter, feel free to experiment. The knowledge you’ll gain will help you better navigate this quickly-expanding technology.

The post Ways That AI Can Enhance Your Website appeared first on Speckyboy Design Magazine.

View Details

10 Free Slideshow & Gallery Templates for After Effects – Use these outstanding templates to showcase your images within a video presentation.

The Periodic Table of WordPress Plugins – See the 108 most popular plugins in a familiar format.

Tetrisly Icon Library – Check out this free library of 260+ clean and consistent icons.

UX Cheat Sheet: Preview & Full Display – Explore the different ways you can preview and display content to make navigation easier for your users.

How Security Is Driving up the Cost of Website Maintenance – A look at how malware and bad bots are turning web maintenance on its head.

Accessible Target Sizes Cheatsheet – Practical guidelines to prevent rage taps and rage clicks with accessible tap targets for icons, links, and buttons.

Container Query Units & Fluid Typography – Explore three ways to create dynamic fluid typography in CSS.

20 Beautiful Free Brush Fonts for Designers – Find the perfect font to add an artistic effect to your project.

CSS HD Gradients – Generate beautiful CSS gradients in your browser.

CSS Custom Properties Beyond the :root – Is there a good reason why we’re defining global custom properties on :root/html and not on body?

How To Survive a Nightmare Client – A bad client experience can hurt you personally and professionally. But it’s also a learning opportunity.

Prettier – An opinionated code formatting tool for use with Tailwind CSS.

Accepting Design – Thoughts on redefining your expectations to match purpose.

The Battle of Freelance Stability vs. Growth – Steadiness may be good for the soul. But can it do the same for your bank account?

CSS To Tailwind – This tool will convert your CSS to Tailwind syntax in real time.

Image Tiles Menu Animation – Learn how to create image tiles that transform into a full image when a menu item is clicked.

Winamp Block for WordPress – Add a Winamp-style audio player to your WordPress website.

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

View Details

Launching a website for a client doesn’t mean the end of the road. You may continue to work together for years to come. Things like maintenance, repairs, and maybe even a lucrative redesign could all be in the cards.

To get to that point, you’ll need to build a strong relationship. There are no guarantees. But it’s still the best way to ensure that a client will keep coming back.

However, each client is unique. They have different personalities and approaches. Much of relationship building involves taking these traits into account.

There are also some best practices for web designers to follow. Let’s look at ways to create a strong foundation for a successful partnership.

Be Honest and DirectBeing truthful is one of the easiest and most universal ways to earn trust. Lying, on the other hand, will only cause harm to a relationship. Don’t go there.

Plainly describing a situation can work wonders. Explain what needs to be done and why. Conversely, the more you talk in circles, the more it can rub someone the wrong way.

Honesty is always the best policy. But brevity shouldn’t be ignored, either. This is especially important when discussing highly-technical issues. You’ll run into clients who aren’t interested in technical jargon and don’t care to learn it.

It’s usually best to get to the point. For example, let’s say that your client uses WordPress. You might recite a laundry list of reasons for keeping their installation updated.

But it may be more effective to talk about the consequences of not doing so (broken functionality, security issues, etc.). If they want to know more, you can always elaborate.

Your client will appreciate both your honest approach and ability to communicate effectively.

Follow Up & Follow ThroughWe all need to prioritize our schedules. The bigger the project (and client), the higher priority it is. It just makes sense.

But that doesn’t mean ignoring other clients or pushing them aside. If you’ve ever experienced a similar situation, you’ll know how frustrating it can be. So, imagine what a client feels like if they are continually left hanging.

This is where a little bit of communication can help. People will often empathize with your dilemma. But you must let them know in advance.

Therefore, take some time to explain what’s going on. Let your client know if a delay is expected. Then provide an estimate of when they can expect to see progress.

From there, you must follow through. This demonstrates that you can be counted on to get the job done.

Accountability is a rarity in our world. Thus, following through will make you indispensable in a client’s eyes.

Be a Resource for Knowledge & AdviceSome client relationships will be a bit sporadic. You won’t hear from them very often. Still, it’s important to stay in touch. And there are a few easy ways to do so.

Direct ContactBeing in direct communication with your clients helps to build a personal rapport. Consider reaching out once or twice a year via phone or email – just to see how things are going. Ask if they are still happy with their website. See if there are any changes they want to make.

Clients often have website-related items on their to-do lists. But they get pushed to the back burner for whatever reason. Just the simple act of reaching out can get the ball rolling.

And don’t be afraid to make suggestions. For instance, clients who have older sites may need mobile or accessibility optimization. Your client may not be aware of the need unless you bring it to their attention.

Publish Blog Posts & NewslettersWhile less personal, content that targets existing clients can serve two purposes. First, it keeps your name fresh in their mind. Second, it’s an opportunity to inform them about new services you’re offering, industry trends, or other items they need to know about.

The best part is that you don’t have to publish frequently. It doesn’t have to be particularly in-depth, either. But you may be surprised at how much feedback you get.

Host a WebinarHosting a webinar for a group of clients offers the best of both worlds. You’ll make a personal connection while also sharing relevant knowledge. You don’t even have to leave your desk!

Your subject matter should focus on things that will impact clients. Recent examples include the WordPress block editor or changes to Google Analytics.

You can also discuss matters that relate to your client’s business. Subjects like email marketing, increasing conversion rates, or interpreting usage statistics are always popular. Regardless, the interaction can be very beneficial for everyone involved.

Show That You’re in It for the Long HaulThe steps above aren’t difficult. But they do require consistent effort and accountability. Master them, and you’re sure to build lasting client relationships.

In all, it’s about demonstrating that you’re there for your clients. It shows that you’re not out to make some fast cash, only to disappear afterward. Rather, you’re committed to being there for the long haul.

It’s an effective means of building loyalty and keeping clients on board. Plus, it’s the right thing to do. This will help your business thrive for years to come.

The post How to Keep Freelance Clients for Years to Come appeared first on Speckyboy Design Magazine.

View Details

Perhaps no movie franchise has more fans than Star Wars. For over 40 years, each new episode has generated great anticipation – not to mention monster profits.

Both the movies and their long list of unforgettable characters have also served as a great inspiration to popular culture. Web design is no exception, as it seemed like the minute people started building websites, online tributes to the franchise began popping up.

Naturally, CodePen is teeming with Star Wars-related creations. Everything from character representations to quotes to games have been added over the years. Here are a few of our favorites.

The Star Wars Crawl by Tim PietruskyIt all started in 1977, when the original Star Wars debuted with this otherworldly text crawl. It set the scene for what was to become a cultural phenomenon. Here is a pretty faithful recreation, complete with audio.

See the Pen Star Wars opening crawl from 1977 by Tim Pietrusky

The 80’s in One Snippet by Yusuf BakırHere’s an example of taking one the most indelible images from the 1980s, a Stormtrooper, and combining it with another – the Moonwalk. Yes, it really is a Stormtrooper doing the Moonwalk. Not only that, but you get the pixelated goodness of the era’s video games as well. The only thing missing may be an old school television.

See the Pen StarWars Pixel Stormtrooper Moonwalk by Yusuf Bakır

Choose Your Side by Kasper De BruyneToggle switches are a common element these days. But we don’t usually see them with this much attention to detail. When the switch is to the left, a Death Star is displayed – complete with an unnerving red color scheme. Thankfully, toggling over to the right shows a much more loveable Millennium Falcon. The animation effects are stellar.

See the Pen Star Wars Toggle by Kasper De Bruyne

Lord Vader’s Helmet by Kiarash ZarinmehrNot only is Darth Vader one of the most recognizable villains in this or any other galaxy, he has also been used (unofficially) to represent the NFL’s Oakland/Las Vegas Raiders. You’ll often see fans dressed up as Darth (a.k.a. Luke’s dad).

This snippet actually combines the Raider-like font with Lord Vader’s iconic helmet. Be sure to rotate the helmet and check out those incredible light and shading effects.

See the Pen 3D Darth Vader Mouse Move Animation Star Wars by Kiarash Zarinmehr

Reach Hyperspace on Your Screen by JheyHave you ever driven a car and wished you could put that thing into Hyperspace? Maybe that’s not going to happen in our lifetimes. But, thanks to this nifty use of HTML5 canvas and JavaScript, you can get there by simply holding your mouse down. Nice!

See the Pen Jump to Hyperspace 🤓⭐️#CodePenChallenge (Hold click/touch) by Jhey

X-Wing on the Water by Felipe AlfonsoThe fictional equipment and landscapes are also a key part of the Star Wars story. We get a bit of both here with this X-Wing fighter racing over water at low altitude.

See the Pen X_WING by Felipe Alfonso

The Galaxy Is Aglow by ChaseThis scene depicting Star Wars:The Last Jedi offers special effects worthy of the film. It uses SVG masks to create transparency, while particle animation creates an otherworldly starry background. The glow of Kylo Ren’s lightsaber and the afterburner on the Millennium Falcon are icing on the cake.

See the Pen Star Wars The Last Jedi by Chase

Memorable Words of Wisdom by Thomas VaethIt seems like there is a Star Wars quote for just about every occasion. If you’re looking for one to drop into your next conversation, try this random quote generator. You’re sure to find either wisdom or a wisecrack worth remembering.

See the Pen Random Quote Machine by Thomas Vaeth

Tributes Worthy of a Jedi Browsing the vast number of Star Wars tributes on CodePen, these developers’ talent and passion become apparent. This fictional world has inspired multiple generations and, with the steady stream of new additions to the franchise, that should continue long into the future.

Want to see even more amazing tributes? Check out our CodePen collection for a treasure trove of great code snippets!

The post A Long Time Ago: Code Snippets Inspired by Star Wars appeared first on Speckyboy Design Magazine.

View Details

Are you looking to add an extra level of depth to your typography and make it stand out in your next video project? If so, 3D typography might be just what you need. With 3D text, you can create a visually stunning effect that adds a professional touch to your video projects.

Thankfully, with the power of After Effects, creating 3D text has never been easier. With various tools and techniques at your disposal, you can quickly and easily add depth and dimension to your text.

But where do you begin? To help, we’ve compiled this collection of the best tutorials for creating 3D text effects in After Effects, whether you’re a seasoned professional or a beginner.

These tutorials cover a variety of techniques and styles, from basic 3D text to more complex effects like metallic finishes, particle effects, and more. With these step-by-step tutorials, you’ll be able to create stunning 3D text effects that will make your video projects stand out.

Free After Effects Templates* Free Animated Icons for After Effects * Free Animated Typefaces for After Effects * Free Logo Reveal After Effects Templates * Free Lower Thirds After Effects Templates * Free Opener Templates for After Effects * Free Slideshow Templates for After Effects * Free Title Templates for After Effects

More After Effects Resources:

35 Free After Effects Presets
40 After Effects Tutorials

Create 3D Text Animation in After Effects Producing your 3D text animation is a breeze with this comprehensive After Effects video tutorial that takes you through each step. With the included project files, you’ll be able to follow along and learn everything you need to know to bring your creation to life.

How to Create 3D Floating Text in After Effects Discover how to integrate floating text elements into your upcoming videos with this practical After Effects tutorial. By mastering the techniques demonstrated in this tutorial, you’ll be equipped to replicate text effects similar to those featured in Eminem’s “Lucky You” music video.

3D Text Openers (After Effects Template)Short on time but in need of high-quality 3D text? Look no further than this resource pack, which features full HD renders in both 720p and 1080p for maximum customization. The project includes clean and dynamic transitions with 3D text layers that require no third-party plugins.

How to Create True 3D Text Take your text effects to the next level with this After Effects video tutorial that demonstrates a simple and efficient method for generating genuine 3D text effects without the need for an excessive number of duplicate layers or complex distribution in a 3D space. By utilizing the Shatter effect, you can accelerate render times and streamline the customization process.

Create Stunning 3D Text in After Effects With this After Effects tutorial, crafting beautiful 3D text effects from scratch has never been easier. Master the necessary techniques to produce one-of-a-kind 3D text that can be integrated into any project, allowing you to stand out from the video crowd.

3D Text Styles Cinematic Trailer ToolKit (After Effects Template)Maximize your efficiency and minimize effort with this time-saving resource pack for After Effects that includes 15 unique 3D text styles. This pack requires no plugins, making it easy to customize to your specific needs. With these 3D text styles at your fingertips, you can quickly add a professional touch to your video projects and enhance your overall workflow.

Create 3D TEXT in After Effects & Cinema 4D Unlock the power of After Effects and Cinema 4D to create stunning 3D text animations that truly captivate your audience. In this tutorial, you’ll learn how to combine these powerful tools to add depth to your text through lighting, camera angles, and keyframe animation.

Three Ways to Create 3D Text in After Effects This video tutorial provides a comprehensive overview of the various methods for generating 3D text. Learn a range of techniques, including leveraging the power of the Element 3D plugin, utilizing Cinema 4D, and using After Effects alone. With this tutorial, you’ll have a solid understanding of multiple approaches for creating 3D text, allowing you to choose the best method for your needs.

Camera Tracking & 3D Text Extrusion Join Richard Harrington in this video tutorial to discover how to harness the power of Adobe After Effects’ 3D Camera Tracker. In addition to mastering this valuable tool, you’ll gain insight into using other 3D features, such as the ray-traced 3D engine. With this tutorial, you’ll have learned the skills you need to create immersive 3D compositions that take your videos to new heights.

How to Create 3D Sci-Fi Metallic Typography Unleash your creativity and forge your own metallic 3D typography with this After Effects tutorial. You’ll learn how to craft intricate metallic text from scratch, as well as how to integrate them into your videos seamlessly. With the skills you acquire in this tutorial, you’ll be able to produce polished, professional-looking metallic 3D typography that will take your projects to the next level.

Stylish 3D Texts and Logos (After Effects Template)Streamline your workflow and save time, money, and energy with this versatile 3D text resource pack for After Effects. Featuring a variety of styles, including cinematic, chrome, grunge, and more, this pack is your go-to resource for creating stylish 3D texts and logos.

From Text to a Cool Extruded-3D with After Effects Learn how to add depth and dimension to your video typography by incorporating specific lighting and particle effects that make your words stand out. With this tutorial, you’ll have the skills to create a professional-looking text effect that will leave a lasting impression on your audience.

With the help of the tutorials in this collection, you’ll gain the skills necessary to create 3D text that can be integrated into any project using a variety of techniques.

Whether you’re a beginner or an experienced user, these tutorials will provide you with the knowledge you need to take your 3D text effects to the next level.

The post 10 Stunning 3D Text Effect Tutorials for After Effects appeared first on Speckyboy Design Magazine.

View Details

These days, every website we build must be responsive. With mobile web usage accounting for over half of all traffic, catering to these users is a no-brainer.

Thankfully, foundational technologies like CSS and JavaScript have made this easier. Web designers no longer need nonstandard hacks or separate mobile templates. Modern layout and document object model (DOM) manipulation techniques allow us to build for all devices.

Testing your designs on mobile, however, is a different story. Ensuring a pixel-perfect look on every phone, tablet, and hybrid device can be a massive challenge.

It doesn’t help that mobile screen resolution is all over the map. In years past, there were a few outliers that defied the expected number of pixels displayed. But now it seems like every smartphone generation comes with a different set of viewport sizes. Not to mention enough quirks (thanks to additions like notches and dynamic islands) to throw off the most carefully-crafted CSS media queries.

That begs the question: how can we design and test with any confidence? Today, we’ll look at the common pitfalls of mobile testing and share some tips for making your designs look great on every screen.

New Devices Are Clashing With Traditional Media QueriesThe early years of responsive design brought a fairly standard set of device viewports, such as:

Phones (portrait): 320×480 pixels
Tablets (portrait): 768×1024
Laptops: 1024×768 or 1240×1080
Desktops: 1240 and up

We say “fairly” standard, because not every device used these exact viewports. Still, writing CSS media queries within these generic dimensions was a common practice.

That’s not such a safe bet today. Manufacturers have turned those basic guidelines on their heads.

Take the iPhone 14, for example. It has several versions available – and they come with varying viewports:

iPhone 14 Pro Max (portrait): 393×786
iPhone 14 (portrait) / iPhone 14 Pro (portrait): 390×664
iPhone 14 Plus (portrait): 428×746

Mathematically speaking, the differences aren’t huge. But they are enough to potentially disrupt a website’s mobile layout. Thus, you might feel compelled to test each model.

To be fair, this isn’t just an Apple phenomenon. Devices from Samsung, Google, and other manufacturers are adopting similar strategies.

Regardless, it makes a web designer’s job that much harder. And it’s a clear indicator that we need to adjust how we build and test.

Adapting to the New Mobile Design LandscapeWe can’t rely on mobile devices to consistently fall within a specific viewport range. Therefore, it’s up to us to make some adaptations.

Perhaps the biggest single step designers can take is to simplify mobile design. This is already good practice, as overly-complicated layouts don’t tend to work well on small screens. But anything that requires a specific viewport to work is bound to cause headaches.

Building with resiliency in mind is worth the effort. It may not look as fancy. But it will allow content to better adapt to the multitude of screens out there.

In addition, there’s something to be said for letting CSS layout techniques work unfettered. Both CSS Grid and Flexbox are responsive by default. Plus, the control offered by CSS clamp() can take the guesswork out of sizing elements.

By forgoing some of the bells and whistles (on mobile, at least), layouts will be better able to adapt. That means fewer worries about potential breakage as new devices come to market.

Use Tools To Stay On Top of TestingMobile website testing has always been a challenge. But with so many makes, models, and viewports available, it has risen to another level.

The good news is that there are plenty of tools to help. And there are both free and commercial options.

It all starts with your desktop web browser. Virtually every modern browser includes the ability to test on a variety of mobile viewports. And they can also emulate the exact viewports of specific devices.

Here are a few resources to get you started:

Chrome – Simulate Mobile Devices with Device Mode.
Firefox – Responsive Design Mode.
Microsoft Edge – Emulate Mobile Devices.
Safari – Web development Tools.

These tools can be a massive help in ensuring that a design works across a wide range of screens. They’re not perfect. But they still provide a lot of insight. And you can’t beat the price!

But what if you need to test a lot of devices and browsers – including some more obscure choices? Doing this one at a time can be incredibly tedious. Plus, it can be difficult to access budget phones and niche browsers.

That’s where commercial tools come into play. Some offer hundreds of real devices to test with. And with automated testing, you can save massive amounts of time. If your project requires this sort of functionality, these services are worth the extra cost.

The bottom line is that no matter your budget, you can test on devices well beyond the ones you own.

Beauty and Function on Every ScreenThe requirements of a responsive website are becoming more complex all the time. And the glut of unique mobile devices is only adding fuel to the fire.

More than ever, getting things right means a commitment to simplicity in design. It also takes a lot of testing to catch potential issues firsthand.

It may seem like a tall task – but we don’t have to do it alone. There are tools available to make the process easier. Not to mention that modern CSS layout techniques were developed with responsiveness in mind.

The key is to develop a plan for designing, building, and testing for quality. Once established, it’s something that you can rely on for each project.

The post Better Design and Testing for Mobile Viewport Madness appeared first on Speckyboy Design Magazine.

View Details

Let’s pretend we’re back in the year 2003. You and I are sitting in a coffee shop. And I casually mention this new blogging software called WordPress.

We discuss some of its built-in features. And how it makes starting a blog easier. Oh, and we can’t forget that it’s free and open-source.

It sounds pretty good, right? That is until I tell you that it will still be around 20 years from now. That’s when you politely excuse yourself and grab a seat at the other end of the café.

“He’s delusional.”, you think. And I wouldn’t blame you for assuming as much.

After all, there are very few things on the web that last for 20 years. And even fewer that continue to grow and thrive. Yet, WordPress has beaten the odds. It celebrates the big 2-0 on May 27, 2023.

With that, I thought it would be appropriate to look at how WordPress has made it this far. What are the secrets of its success? Here are a few factors that have led the software to incredible heights and longevity.

A Focus on Ease of UseThe first wave of content management systems (CMS) was often frustrating to work with. The installation process was a pain. And creating content was clumsy, to say the least.

WordPress and its famous 5-minute install process were refreshing. Yes, it required some technical knowledge. But it felt like a cakewalk when compared to its contemporaries.

That focus on ease of use carried through to the dashboard. Even today, a core installation of WordPress is relatively simple to navigate. It’s only after you start adding themes and plugins that the UI becomes muddled. But I digress…

Plus, content could be easily created and organized. That allowed bloggers to focus on writing, rather than overcoming technical hurdles.

Perhaps this doesn’t sound like a big deal. But it was a game changer in the early 2000s. Once I tried WordPress, I could no longer recommend popular competitors like PHP-Nuke or Typepad. I suspect many users felt the same.

What’s more, the software has had further advances in UX. The Site and Block editors have come a long way in recent years. And many web hosts now provide one-click installations.

Is WordPress the easiest CMS to use? That’s debatable. But it still provides a path for getting started with minimal effort.

Built With Customization in MindWordPress also excels when it comes to customization. It’s been built to accommodate all manner of tweaks and enhancements.

The most obvious example is the massive theme and plugin ecosystem. Developers can hook into and extend the core software. That made it possible to go beyond blogs. Users can leverage WordPress to run virtually any type of website.

But you don’t have to rely on third-party code. It’s also possible to build themes and one-off custom plugins. This enables us to create site-specific looks and functionality.

Customization also extends to site content. The advent of custom post types and taxonomies has given us fine-grain control over organizing posts. And custom fields have brought the same capabilities to every part of the CMS.

In my opinion, this still separates WordPress from much of the CMS market. Many DIY build tools limit your options. Thus, if you want to go fully custom, WordPress continues to be a great choice.

At the same time, you also have access to tens of thousands of themes and plugins. This allows you to choose between readymade and bespoke solutions.

The Embrace of an Open-source EthosThe tandem Mike Little and Matt Mullenweg co-founded WordPress as a fork of b2/cafelog. The software has remained free and open-source. And it has received contributions from people all over the world.

But what if WordPress had been commercial software? If Little and Mullenweg had charged, say $100.00 per install, would the CMS still be around?

It’s certainly possible for a commercial product to survive 20 years. But there’s no telling how it would have impacted the software’s direction. And perhaps the size and strength of the ecosystem wouldn’t be on the same level as it is today.

Adopting an open-source ethos and GPL licensing may have been risky in 2003. Projects on the scale of WordPress weren’t common. Not to mention the stigma that free software faced from the corporate world.

There were no guarantees that this structure would work. And yet it has continued to thrive. The mission to “democratize publishing” has held strong.

Anyone can download a copy of WordPress and share their message. Web designers can use it to make a living. The decision to remain an open-source project has helped make this possible.

A Community Dedicated To SharingThe above ingredients are vital to fostering a community. They have helped WordPress build a cult-like devotion that is rarely seen in the software industry.

Community members contribute to WordPress in many ways. Some work directly on the core software or various official teams. Others are keen to interact and share what they’ve learned.

People of every background and skill level take part. There’s a robust online community. And in-person events such as WordCamps have come back post-pandemic. Indeed, WordPress meets us where we are.

Like any community, there are positives and negatives. But the continued participation of WordPress fans worldwide keeps the software relevant.

Unlike commercial competitors, WordPress does not have a huge marketing budget. They can’t hire celebrity spokespeople.

Instead, they rely on users, agencies, and freelancers to spread the word. In other words: we’re the ones powering WordPress and nurturing its growth. No other CMS can make this claim – at least not on such a large scale.

I’m convinced that, no matter how amazing the product, WordPress needs a strong community to thrive. Maintaining and improving that synergy is key to making it another 20 years and beyond.

Happy Birthday, WordPress!It’s not often that you can say that software changed your life – or the trajectory of your career. But WordPress has done both for me. And I know many others feel the same.

So, let’s take a moment to think about the people that have contributed to the project. Their work often happens behind the scenes. We owe them a debt of gratitude.

Happy birthday, WordPress! It’s been quite a ride so far. I can’t wait to see what’s next.

The post WordPress Turns 20: Its Secrets of Success appeared first on Speckyboy Design Magazine.

View Details

Build Your Own Database From Scratch – Learn to build a minimal persistent database implementation.

Build in-Browser WordPress Experiences with WordPress Playground and WebAssembly – A look at the potential of browser-based development.

Should a Block Theme Power Your Next WordPress Project? – How recent improvements to the Site Editor are making block themes a more viable option.

Web Accessibility: A Reference to Creating Inclusive Websites – This comprehensive guide includes key principles and best practices for inclusive design.

Pattern Club – Check out this curated collection of patterns, textures, and other visual assets.

Don’t Shortchange Yourself When Inheriting a Website – A website built by someone else is likely to include some surprises.

Bard Now Helps You Code – Google’s AI tool can generate, debug, and explain code snippets.

Color Mechanics in UI Kits – Examining a model for color mechanics and best practices for implementation.

Tips for Freelance Designers Who Work as a Sub-contractor – Items to consider when working for an agency or another freelancer.

Typography Manual – A collection of simple rules for using typography on the web.

A README Template – With an Automatically Generated Table of Contents – Use this guide to build an effective README document.

The 10 Best Free Lower Thirds Templates for After Effects – Add a professional look to your video projects with these free templates.

Embracing AI as a Material for Design – Tips for designers experimenting with AI tools.

Starting Design Work in a Spreadsheet – Why this old-school tool may be a better starting point than Figma.

Space Elevator – Scroll up to learn about space on this unique website.

Massive Abuse of Abandoned Eval PHP WordPress Plugin – Learn how a long-abandoned plugin is being used to spread malware.

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

View Details

Finding consistent work can be a challenge for freelancers and small agencies. There’s often a feast-or-famine cycle. Either we’re overloaded with projects or are sitting idly, waiting for something to do.

That’s why it’s appealing to have clients that provide a steady flow of projects. Having a predictable workload and revenue stream is the Holy Grail for many web designers. And it’s easy to understand why someone would follow this path.

Imagine not having to go out and beg for new clients. Sounds pretty good, doesn’t it?

But this approach could arguably lead to less growth. Steadiness may be good for the soul. But can it do the same for your bank account?

Identifying the Right Opportunities for Your BusinessThere are a lot of interesting opportunities for web designers. Some might even be life-changing in terms of offering a consistent workload and a steady paycheck.

However, deciding whether to commit can be difficult. Could the job monopolize your time? Would it prevent you from booking other gigs? And would this be positive or negative for your business?

These are legitimate concerns. After all, this type of arrangement might seem like the opposite of the freelance narrative. We are often told to pursue as many clients as possible to fuel growth. It’s always more, more, more.

But we’re only human. There are limitations in how much work we can handle. And sometimes we talk ourselves out of an opportunity. We don’t want to commit to something for fear that better projects are just around the corner.

Yet, we may sacrifice a chance for something good. It’s easy to wonder what else may be out there. But there’s a danger in continually asking “What if?”

Thus, it may be worth looking at long-term arrangements as a positive. So long as they meet certain criteria, that is.

When a Steady Approach Makes SenseThere are several factors to consider when deciding to book a steady design gig. First and foremost is how it could impact the direction of your business.

Some designers enjoy working with many different clients. Thus, working with the same people over a longer period can seem a bit stifling. If you see your role as nomadic, then it’s OK to stay on that path.

For others, constant change and uncertainty can become a burden. Not everyone is interested in hopping from one client to the next. They may welcome opportunities to build a business around steady work.

Once you’re comfortable with the direction you’ve chosen, it’s about finding projects that fulfill your needs. If you’ve decided to aim for stability, look for gigs that:

Fit in with the type of work you enjoy doing;
Offer consistent pay and workload;
Have well-defined processes for getting things done;
Allow you to work at a comfortable pace;

Not every opportunity is going to fit this mold. But the idea is to align yourself with something that you can see yourself doing (and enjoying) over the long haul.

Growth is Still PossibleYou might worry that working with a smaller number of clients will limit your income potential. While it’s possible to paint yourself into a corner, there is still room for growth.

For example, there’s no rule that you must focus solely on long-term projects. Instead, you could leverage those clients to build a solid foundation. This allows you to pursue new projects that are of a size and scope that will boost your revenue.

So, rather than go after every new project, you can pick and choose the ones that make sense. Cutting out the low-cost/highly-stressful clients keeps your sanity in check. And you can still add to your bottom line.

In other words: If you don’t have to battle for each dollar, you can focus on the things that will improve your business. That’s why running around in circles to book new clients is often counter-productive. As you move from one place to another, you’re simply trying to recapture the same ground.

The Best of Both WorldsThere are a lot of benefits to working with long-term, steady clients. It provides a level of security that is hard to come by in the freelance world. Knowing you can pay the bills each month brings peace of mind.

With that also comes the luxury of focusing on the right opportunities. It sure beats taking every new client that comes your way.

Indeed, stability can be a driver of growth, rather than an inhibitor.

So, if you’re tired of the vicious cycle of constantly having to find new clients, think about a different approach. It might just take you where you want to go.

The post The Battle of Freelance Stability vs. Growth appeared first on Speckyboy Design Magazine.

View Details

Brush fonts are a type of typeface that mimics the look of calligraphy created with a paintbrush or marker. They are typically characterized by their imperfections, irregular shapes, and varying stroke widths, which give them a more natural and organic appearance than traditional fonts.

Brush fonts are often used in design to convey a sense of creativity, authenticity, and informality. They’re often used to target a youth-oriented audience, such as music, gaming, fashion, or food.

From bold and chunky to gentle and graceful, brush fonts come in various styles and weights depending on the actual brush used to create the font. They can add an authentic feel to a design, but are typically used to create urban, playful, or graffiti-style typography.

Because of their uniqueness and imperfections, it’s vital that you choose the perfect brush font for your project carefully to ensure the best possible results. To help with your selection, we have a curated collection of our favorite free brush fonts that you can download and use in your own creative projects.

More Free Fonts* 100 Free Fonts * Clean Fonts * Coding Fonts * Comic Fonts * Disney Fonts * Gothic Fonts * Headline Fonts * Icon Fonts * Logo Fonts * Minimal Fonts * Outline Fonts * Quirky Fonts * Retro Fonts * Sci-Fi Fonts * Script Fonts Debby Hand-Drawn Brush Font (Free, Designed by Artimasa Studio)Designed by Artimasa Studio, Debby is a free hand-drawn brush font with a personal and imperfect feel. Use it to add character and uniqueness to your designs.

Flat Brush Font (on Envato Elements)This brush font combines heavy black ink with a well-used artist’s sable brush to create a stunning hand-made and textured typeface. Its distinctive appearance makes it readable in both large and small sizes, making it ideal for many projects.

Zallord Brush Font (Free, Designed by Alice Whales)Zallord, designed by Alice Whales, is a versatile brush font featuring both uppercase and lowercase characters, numbers, punctuation, and a few extra marks. Its aggressive style is perfect for creating striking displays, labels, clothing designs, posters, movie titles, album covers, logos, and other exciting projects.

Namashte Brush Font (on Envato Elements)Namashte Brush Font is a stunning typeface with a strong paintbrush texture that’s perfect for creating eye-catching designs. It is an excellent choice for designing posters, branding materials, and more. With its bold and expressive style, this font will help you make a strong impression.

Perfect Moment Handwritten SVG Font (Free, Designed by Ivan Rosenberg)The Perfect Moment font is a dynamic and adventurous SVG typeface that perfectly captures the energy of handwritten brush strokes. This Open Type font can be used for creating striking headlines, banners, posters, and more!

Mighty Brush Font (on Envato Elements)Mighty Brush is a versatile script handwritten font that’s perfect for various design projects. Use it for prints, logos, branding, invitations, social media posts, and more!

Besom Brush Font (Free, Designed by Krišjānis Mežulis)This hand-drawn brush font has been created using a thick brush that resembles a traditional besom brush, from which the name is derived. The font includes only uppercase letters, giving it a bold and impactful look, perfect for creating unique and distinctive designs.

Northen Brush Font (on Envato Elements)Northen is a stunning script font with a dry brush style that combines smooth curves with an urban feel. Its stylish and eye-catching design makes it perfect for creating logos, branding, handwritten quotes, product packaging, merchandise, and more.

Hensa Hand-Painted Brush Script Font (Free, Designed by Vlad Cristea)Hensa is a hand-painted brush script font with a stylish design. It includes uppercase and lowercase letters, punctuation, numerals, ligatures, and swashes. Use it for logos, quotes, packaging, and more!

Shuttles Brush Font (on Envato Elements)Shuttles is a modern brush font that’s perfect for most design projects. No matter what type of project you’re working on, Shuttles will surely add elegance and sophistication to your designs.

Hey October Brush Font (Free, Designed by Khurasan)The Hey October free font boasts a playful and whimsical style with irregular letter shapes that give it a fun and quirky feel. It’s the perfect choice for greeting cards, posters, and other design projects where you want to add a touch of whimsy and personality.

Painter Brush Font (Free, Designed by Jammy Creamer)Painter Font is a free typeface that features thick brush strokes and a playful, handwritten style, making it an ideal choice for a multitude of design projects. With its unique and distinctive look, Painter Font will add a touch of character to any design.

Kust Brush Font (Free, Designed by Krisjanis Mezulis)The Kūst brush font is a free typeface with unique distorted letters, created by fashion designer and painter Ieva Mezule using a thick brush and pure black ink on hard paper. Use it to add a bold and striking touch to your design projects.

Willful Handwritten Brush Sans Font (Free, Designed by Mr.Typeman)Willful is a vibrant and playful handwritten brush font that’s perfect for adding character to your designs. Use it alone or with thin typefaces to create stunning artwork.

Crocky Brush Font (Free, Designed by Creatype Studio)Crocky is a hand brush typeface with a casual and scratchy brush script style. It’s perfect for branding projects, social media posts, product packaging, and any project that needs a classy handwritten touch. The font is available for free download for personal use.

Better Hobby Highlighter Font (Free, Designed by Letterhend Studio)Better Hobby is a free display font with a unique and playful design that is perfect for projects requiring joy and a touch of fun. With its colorful highlighter markers and overlaying strokes, this font will bring a lively touch to any design.

True South Brush Font (Free, Designed by Stefie Justprince)Mazak Hand-Drawn Brush Font (Free, Designed by Ewelina Gąska)Designed by Ewelina Gąska, Mazak is a hand-drawn brush font that’s available for download in both Illustrator AI and TTF formats. With its distinctive uppercase design, this free font will add a unique touch to any design project.

Lemon Tuesday Brush Font (Free, Designed by Daria Kwon)Thorn Brush Font (Free, Designed by Stefie Justprince)Chocoleta Brush Font (Free, Designed by CruzineDesign)Wildrock Brush Font (Free, Designed by Creatype Studio)Brush King Font (Free, Designed by Subectype)

Brush fonts are a beautiful representation of imperfect handwriting. Each character is unique and carefully crafted by hand, resulting in a distorted and irregular appearance that adds character and personality to any design.

With their charm, brush fonts seamlessly blend with modern design trends, making them a versatile choice for various creative projects.

It’s worth noting that professional designers have created all of these fonts and can help you create something truly unique.

The post 20 Beautiful Free Brush Fonts for Designers appeared first on Speckyboy Design Magazine.

View Details

Working with clients is a mixed bag. The experiences you have are valuable. But there’s no guarantee that they’ll be enjoyable.

Thankfully, most clients are fair and honest. Yes, some can be difficult to work with. But it’s still possible to form a productive relationship with them.

On the other hand, you’ll find the occasional nightmare client. Someone that (intentionally or not) breaks all the rules. They’ll mistreat you, argue about every detail, and generally make a mess of things.

I’ve spent over two decades in the web design industry. I can attest to the damage that comes from working with the wrong person. It can turn both your business and life upside down. It can even be traumatic.

There were times when I questioned my ability to move past the situation. The good news is that it’s possible to survive – even thrive – afterward. Here are a few things I’ve learned along the way.

First, Look at What HappenedWhen you’re in the midst of a bad situation, things move fast. Our fight-or-flight response takes over. Thus, you don’t always have time to fully understand what’s happening in real-time.

Looking back at an incident or even a relationship can help. It enables you to examine the details more closely. You might even find things you’d missed.

The goal is to identify the root cause of the issue. For example, maybe a client rubbed you the wrong way during your initial conversation. What was it that made you feel uncomfortable?

If a project went sideways, there could be a specific turning point. Maybe it was an action the client took or something they said. Where did things take a turn for the worse?

Digging up the past may be difficult. But it can also be very beneficial. What you learn might prevent a similar situation from happening in the future.

How Does It Change Your Business?Working with a nightmare client can have a profound effect on your business. That might be a negative in the short term. Dealing with the aftermath can put you behind on projects and hurt your bottom line.

The big picture can be more positive, however. The experiences allow you to see things differently. And a changed perspective can lead to a changed business.

They’ve led me to implement new policies. Some are technical, like having managed cloud backups for the websites I maintain. Others are more philosophical, like insisting that clients control their domain names. Spelling out terms in a contract is also a live-and-learn experience.

And while self-preservation is a good reason to change – it’s not the only one. Taking action feels great. It’s empowering. The confidence you gain in the process can carry through to future projects.

Again, it’s about avoiding bad people and situations. Being proactive is a giant first step toward that goal.

Learn To Move Forward With PurposeI’m happy to say that most of my client experiences have been positive. An overwhelming majority, in fact. If that weren’t the case, I might have left web design long ago!

But you can’t stay lucky forever. Eventually, you’ll run into someone who tests your mettle. They’re way beyond a standard picky client. You might say their behavior is malevolent.

Do you want examples? Well, I really shouldn’t. But let’s see…I’ve been yelled at, threatened, and lied to. If we ever have an adult beverage together, I’ll go into further detail!

That’s not to say I’m a perfect human. I make mistakes and have misunderstandings, too. But I can say that just about every nightmarish instance I’ve experienced had a solution. Better communication can fix almost any situation – except one.

Some people are simply irrational. The reasons behind this are best left to experts. But I’ve learned that it’s nearly impossible to communicate effectively with such clients.

In that case, the best we can do is move forward. You might have to fire them. Or it may require cleaning up a mess before you can break free. There could also be some financial losses.

But it’s totally worth the short-term pain. In the long run, you’ll leave with lessons learned and your dignity intact.

Don’t Let a Nightmare Client Steal Your JoyA nightmare client can make you dread coming to work. And they can give you a jaded perspective that lasts well beyond your relationship. It’s a potential long-term side effect of dealing with them.

But it’s important to consider a broader view. Think about the many clients you’ve worked with. This one bad experience shouldn’t outweigh all of the good ones.

True, the ordeal may leave you shaken for a while. However, you don’t have to stay in that mindset forever.

Do something you’re passionate about. Maybe it’s a side project or just taking time to be creative. Connect with others in the web design community. These things will provide a much-needed reset for your mind.

Nightmares only last a little while. Thankfully, you can wake up from them!

The post How To Survive a Nightmare Client appeared first on Speckyboy Design Magazine.

View Details

Maintenance is a part of daily life for many web designers. Looking after the websites we build helps to keep them running smoothly. And it’s also a great way to earn recurring revenue.

I’ve been maintaining websites for over two decades. I started with old-school static HTML websites. These days, I work primarily on sites built with WordPress. Much has changed.

For example, websites that use a content management system (CMS) have multiple moving parts. And updating core software, themes, and plugins is the main focus.

The process could be relatively simple – except for one thing: security. The myriad of threats is enough to keep us up at night. It seems to be a never-ending battle against bots, malware, and whatever else is lurking in the shadows.

In short, security has turned website maintenance on its head. Thus, we must consider it when pricing the services we offer. Let’s explore the challenges involved and why it’s driving costs through the roof.

Software Updates Require More ScrutinyThere are routine software updates. And then there are security fixes. The latter should become the higher priority.

It takes effort, however, to discern the contents of an update. Looking at a software’s change log is usually the only way to find out.

This isn’t a big deal if there’s only one application to monitor. But consider a typical WordPress install. It will consist of the core software, plus an untold number of themes and plugins.

You may find yourself scrutinizing a dozen or more change logs regularly. Oh, and multiply that by the number of websites you maintain.

Sure, you could simply hit the update button on each site every day. But it’s important to know what is included with each new version. And it’s also worth browsing support forums to gauge stability.

Testing is also crucial – particularly on mission-critical websites. And even security-related updates should be tested. That’s because, quite often, a security fix isn’t the only item included in an update. Thus, ensuring that there are no compatibility issues is still important.

All of this adds up to a lot of time spent researching and applying updates.

The Need for Third-party Security ToolsEvery website is a target. Therefore, taking extra security measures is always worthwhile.

Some tactics, such as the use of strong passwords and locking down file permissions, are free. But third-party tools and services are also a key part of the equation. They often have a cost.

There are a variety of options. Everything from WordPress security plugins to content delivery networks (CDN) that include a firewall is useful. They create an extra layer of protection from malicious actors. As such, one of these tools could be the difference in keeping a website clean from infection.

If you provide web hosting for clients, these types of tools should also be included. It may mean a price increase. But that should be easy to justify. Hardening security is part of the cost of doing business these days.

Cleaning up a Hacked Site Is UnpredictableImplementing best practices is no guarantee of immunity. A website can still be compromised. And cleaning up a hacked site will eat up your time and resources. That holds whether you do the work or hire an expert.

For one, locating the source of a hack is like finding the proverbial needle in a haystack. There are numerous ways for malware to creep in. And its impact could reach beyond the issues you can see.

Reinfection is all too common. Even when you think that you’ve fully cleaned a website – the same problems can come back at any time. This unpredictability makes it hard to provide accurate time and cost estimates.

A hack can quickly exhaust maintenance contracts that include a specific number of hours. Clients may race past their expected budgets.

With that, a maintenance agreement might be considered a minimum cost. A security breach will throw a wrench into the works and lead to higher costs.

The Cost of Security Can’t Be IgnoredSecurity has become a major factor in website maintenance. The top priority is to prevent a site from being compromised. But there is also the reality that nothing is 100% effective. Thus, cleanup is also part of the job.

All things considered, maintenance has become a constant. It’s no longer just about making changes to the design and content. Each site must be monitored to ensure that it’s both clean and secure.

These costs must be taken into account. Prices should reflect the effort required to proactively implement security tools and practices. In short, if it costs you time and/or money: pass it along to your clients.

Security is simply too important to ignore. It takes time and money to do things right. And things work best when clients understand what’s involved. Therefore, it’s worth discussing.

The post How Security Is Driving up the Cost of Website Maintenance appeared first on Speckyboy Design Magazine.

View Details

How ChatGPT Works – Take a look at what powers the AI app – complete with plenty of helpful diagrams.

User Journeys vs. User Flows – Examining the differences in scope, purpose, and format of these two phrases.

8 CSS & JavaScript Snippets for Recreating Iconic Titles – Worthy imitations of titles from film, television, and video games.

Recreating the Title Effect from CreativeSouth.com – This tutorial demonstrates a 3-D mouse-aware text effect.

Color Contrast Checker – This tool will check color contrast ratios and, when appropriate, suggest alternatives.

How to Draw with SVG Code – Learn how to start drawing basic shapes using code.

Things Every Website Owner Should Know – Basic items that clients need to be aware of.

The Complications of Typographic Size on the Web – What to consider when sizing type for various page elements.

Grid View Switch Animation – Check out this concept for a view switch animation that goes from grid to slideshow.

DPaint.js – A web-based image editor that focuses on retro Amiga formats.

Mirrorful Framework – A design system framework aimed at helping you easily create and share themes.

Things to Look for in a Great Web Design Client – The traits that can help you choose high-quality clients.

SVG Doodles – A free collection of copy-and-paste hand-drawn vector graphics.

Figma Cheat Sheet – A handy reference for developers using Figma’s Inspect mode.

Trig.js – The easy way to create CSS scroll animations that react to the position of your HTML element on the screen.

Tutorials for Creating Seamless Patterns in Adobe Illustrator – Learn how to design beautiful vector patterns for your projects.

Why Do They Ignore My Awesome Design Documentation? – Tips for writing documentation that clients will actually read.

WordPress AI: Generative Content & Blocks – An example of how artificial intelligence can enhance content creation within WordPress.

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

View Details

Imagine that you’re a contestant on one of those crazy reality shows. The kind where they drop you off, blindfolded, into the jungle. They give you a compass and a rudimentary map. The goal is to find your way to a posh resort.

Inheriting a website that you didn’t build can feel similar. You may have a basic understanding of its many components. But there are surprises around every corner. And no guarantee that you’ll arrive at your destination unscathed.

It’s a familiar experience for many web designers. Yet it should never be taken lightly.

Here are some reasons why you may want to think twice about accepting such a project. And if you do, be sure to charge accordingly.

You’re Dealing With the Decisions of OthersWe often make choices based on what seems like the best option at the time. But humans are fallible. And sometimes we make terrible decisions. Thus, there are consequences.

For example, that WordPress plugin you installed five years ago may have seemed fine. But that doesn’t mean it will stand the test of time.

It’s bad enough if we made the decision ourselves. But it feels even worse when inheriting the choices made by someone else. That makes it easier to second guess what was done.

Plus, the issues you’ll face can be difficult to resolve. Security flaws, compatibility bugs, and abandoned software are just a few examples.

Therefore, charge accordingly.

Websites Don’t Age WellFine wines get better with age. But that doesn’t apply to a typical website. Even a well-maintained site can fall behind when it comes to technology. And a site that’s been ignored is likely to face significant issues.

It falls on web designers to deal with whatever problems arise. That may be a matter of refactoring code or a dated design feature. In other instances, you might be best served by starting from scratch.

Surprises can pop up at any time. Thus, it’s important to remember that you’re working on someone else’s vision. They may not approach things the way that you do.

They weren’t necessarily wrong, either. Perhaps they did a fantastic job. Still, it’s not easy to figure out what someone else was thinking when they added a specific feature.

Unless they provided detailed documentation, you might be left to guess their intent. Otherwise, you’ll need to do a thorough code review. It’s often a matter of going line-by-line to make sense of it all. That process takes time.

Therefore, charge accordingly.

It’s Never as Easy as You ThinkClients love to describe things in simple terms. “It’s a basic shopping cart,” they’ll say. That may be an accurate description of their perspective. But they may not be fully aware of how their website was built. Surprises, you know.

And problems aren’t always readily apparent. How many times have you clicked through a website and said to yourself, “No problems here”? Only later do you realize how wrong you were. It’s happened to this designer more than a few times.

A cursory review won’t tell you everything. Some potential issues don’t appear until you dig deeper. Adding a feature or investigating a user complaint are prime examples. That provides a clearer picture of what’s happening below the surface.

The lesson is that there will always be intricacies and complications that you can’t foresee. Therefore, charge accordingly.

Despite the Downsides, It’s a Learning ExperienceInheriting a website built by someone else can be challenging. There are times when you’ll wonder why you ever agreed to do it. But it’s also an opportunity to gain some valuable knowledge.

When you think about it, there may be no better way to improve your skills. Diving into someone else’s code and making sense of it is often difficult. But at some point, you’ll likely start to understand how things work. That can give you a satisfying sense of accomplishment.

And what you learn can be applied to future projects. You’ll have a better grasp of how to approach an unfamiliar website. Spotting potential issues will become easier.

The result is that you’ll become an expert in your field. And for that, you can charge accordingly.

The post Don’t Shortchange Yourself When Inheriting a Website appeared first on Speckyboy Design Magazine.

View Details

Among the core ideas behind freelancing is that you can work with whomever you want. It’s one reason why so many web designers are attracted to this type of business. You get to define your niche. Then you can go out and find clients to match.

But there’s a twist that we don’t often talk about: freelancers who work as sub-contractors. This might entail helping another design agency with projects. Or you might supplement an organization’s in-house team. Other scenarios could also come into play.

Sub-contracting can be lucrative and keep your schedule full. It may mean not having to worry about hunting for new projects. It’s also a decidedly different path – one that comes with unique challenges.

Curious about the benefits and drawbacks of sub-contracting? You’ve come to the right place! Here’s some advice for determining if it’s right for you.

A Chance for Security, While Maintaining FlexibilityWorking as a sub-contractor can be as flexible (or not) as you’d like. Much of it depends on your goals and the available opportunities.

It’s possible to find a long-term working relationship. Some clients need a designer or developer who has regular availability. They may not have the resources or workload to hire someone on a full-time basis. Thus, bringing in a contractor makes perfect sense.

Perhaps the biggest positive is having the best of both worlds. You can get steady work and a dependable income. But you’ll also have the freedom to work on other projects.

Conversely, there are also opportunities for picking up short-term gigs. These tend to be situations where a client could use a helping hand with a particular project. It could be weeks, months, or just a few small tasks.

This is a great arrangement if you enjoy variety. It’s a chance to meet new people and experience how different organizations work. There’s always something new to engage your mind.

The Ability to Work Behind the ScenesNot everyone enjoys working directly with clients. It can be stressful. Plus, the time commitment is an obstacle to getting things done. Endless meetings, complicated email chains…who needs it?

The challenge for most freelancers is that client relations are part of the job. And when you work solo, there’s no one else to do it for you.

That’s one advantage of sub-contracting with a web design agency. In many cases, they’re the ones dealing with clients. Thus, you can happily do your work behind the scenes.

Even better is that you could end up with a single point of contact. Imagine working with the same person throughout multiple projects. It could lead to greater efficiency, provided everyone has solid communication skills.

That last point is an important one. If there’s a communication breakdown, that could make the whole process harder. However, this is something that can improve with experience. Even if the first few projects are messy – give it time.

This type of working relationship takes some effort. But it can be well worth it if you want to focus on code and design, rather than figuring out what a client needs.

A Look at Potential DrawbacksThere are no guarantees of perfection. Working as a subcontractor often means balancing your needs with what’s available. Therefore, it can be a bit of a journey until you find the right fit.

With that, here are some potential drawbacks to consider before jumping in.

It Can Be Hard To Find What You’re Looking ForMany opportunities exist for web designers looking for sub-contracting work. But that doesn’t mean you’ll find one that has everything you want.

Pricing and workload are among the hardest items to match. For instance, many clients have a specific price range in mind. If your pricing is on the higher side, they may not be willing to adjust.

When it comes to workload, this can be all over the map. Finding a client that offers a suitable amount of work isn’t easy.

Thus, compromise may be your best bet. If both parties are willing to negotiate in these areas, it’s a signal that you can work well together.

You May Have To Adapt to a Different WorkflowAgency clients tend to have an established workflow. They have preferred tools, coding standards, and protocols for documenting their work. As a freelancer, you’ll likely have to adapt to their way of doing things.

If you’re not familiar with how they work, it can be a difficult adjustment. And some agencies may not be willing to fully train you or provide access to tools. Rather, they may be looking for someone who can jump right in.

Clients that work with open-source tools like WordPress could make the transition easier. But commercial tools could mean spending your own hard-earned money. You’ll have to judge whether that sort of investment will be worthwhile.

You’re Often the Last To KnowWhen working with sub-contractors, most clients are welcoming and inclusive. But you can also find yourself out of the loop when it comes to details.

Much depends on how communication is structured. If you’re part of a large team, you may have access to a project management app. That’s great for staying in the know and asking questions.

But if communication is a one-to-one affair, the task can be more difficult. You’re relying on someone to tell you what you need to know. If they’re not detail-oriented, you may be missing some key information.

This can lead to having to build (and rebuild) various aspects of a project. Not very fun!

The Time Commitment Could Limit Other OpportunitiesLet’s assume that you find a sub-contracting gig that keeps you busy. There are plenty of positives that come with steady work. But it can be limiting as well.

For one, you might have to turn down other opportunities. A schedule that’s full of contract work could prevent you from taking on anything new.

And it could also leave little time for growth. Sometimes, contract work has a sameness to it. This is great for efficiency. But the downside is that you can’t branch out and expand your skill set.

Therefore, it’s worth taking a hard look at your priorities before signing on with a client. If you don’t want a gig to monopolize your time or growth potential, look for opportunities that require less commitment.

A Web Design Career Path Worth ExploringFreelancers face a lot of uncertainty. Maintaining a steady flow of new projects is daunting – even in the best of economic times.

Working as a sub-contractor is one way to add some predictability. If you find the right opportunity, you could be set up with a foundation of work and income for the long term.

Just know that it will likely require patience and good judgment to get there. Finding the right client isn’t easy. And you need the foresight to see the potential in some arrangements.

It’s also worth noting that there’s nothing wrong with starting small. If you feel like there’s potential for a working relationship to grow, take a chance and see where it goes. That’s better than getting in over your head.

Is working as a sub-contractor right for you? Take time and think about your goals. It might end up being exactly what you need.

The post Tips for Freelance Designers Who Work as a Sub-contractor appeared first on Speckyboy Design Magazine.

View Details

Block themes have now been a part of the WordPress ecosystem for a few years. And with the WordPress Site Editor moving out of beta, I thought it might be a good time to revisit them.

The included features of both block themes and the Site Editor are no longer experimental. Nominally speaking, that makes them a viable option for production environments.

It may also help to boost their presence in the theme market. As of this writing, block themes make up just under 5% of the listings on the official theme repository.

But quantity doesn’t necessarily speak to the quality of the themes. The classic theme marketplace has been littered with low-quality offerings for years. Thus, numbers don’t tell us everything.

In the end, it comes down to features and functionality. So, do block themes have what it takes to power your next WordPress project?

A New Standard for Custom StylesBefore the Site Editor, we had the Customizer. It provided a standardized interface for theme authors to add custom options. The feature worked, but some themes created a nested mess of settings panels.

Block themes offer a different approach to customization. A global styles palette allows for setting important items like typography and colors. And theme authors can include readymade style variations that can dramatically change the look with just a click.

Beyond that, global styles can now be applied to specific blocks. For instance, you can set custom margins and padding for the Paragraph block. Or you might use custom colors and fonts on the Button block. There’s also the ability to add custom CSS to any block via an integrated textarea.

That’s a big deal. Previously, customizing block styling wasn’t easy. You might overwrite the default CSS in your theme. But new WordPress releases tended to change styles – meaning you’d have to readjust accordingly. Configuring the theme.json file was also possible. But having to manually insert specific styles is tedious at best.

Now, most tasks can be done directly within the Site Editor. Even better is that the custom styles you generate are portable via theme.json and the Create Block Theme plugin.

This makes for a smoother, browser-based design experience. That will likely hold more appeal for web designers than earlier incarnations of the Site Editor.

The Twenty Twenty-Three theme includes several style variations.

Fixes To Previous Pain PointsImproving the Site Editor experience has been a priority for the project. And recent versions of WordPress have brought some welcome changes on that front.

For one, a new UI has made the Site Editor easier to navigate. Templates and template parts are neatly organized. And it’s easier to recognize the exact item you’re editing.

And the much-maligned Navigation block has also received an overhaul. Menu items can now be intuitively managed via a settings sidebar.

The Style Book feature should also come in handy. It provides a glimpse of how each block is styled. Previously, you’d have to manually add a block to a page to see how it fits within your theme. The ability to visually inspect seldom-used items in the back end helps to ensure that they meet our needs.

These and other enhancements have smoothed over a previously scattered user experience. That’s an important step. Because if the Site Editor isn’t easy to use, block themes will suffer as a whole.

The WordPress Style Book.

A Better Experience, but the Same DifferencesA polished UX is a great step in the right direction. But that isn’t the only relevant part of using a block theme. You must also buy into the philosophy surrounding these features.

This may be the hardest thing for some web designers to accept. And there are a couple of issues at play:

A Different Way to WorkThe Site Editor and block themes provide a visual way to build a website. This no-code approach can be liberating – or frustrating. The answer depends on how you prefer to work.

Developers who are used to building classic themes may not have the desired flexibility. Writing code means unlimited freedom. Every style and function can be customized to suit your needs.

As such, this newfangled way of working means accepting certain limitations. For instance, the global styles palette doesn’t include every possible styling option.

And while you can still use custom CSS within the Site Editor, it isn’t as well-organized as a traditional stylesheet. That could make future maintenance more cumbersome.

Not everyone is ready or willing to adopt a new workflow. Block themes force our hand.

Giving up Total Control Over LayoutClient-proofing can be a major part of building a website. The idea is that we can allow clients access to the items they need (content, the ability to upload images, etc.). At the same time, we can protect the integrity of the site’s layout.

Block themes aren’t necessarily built with this in mind. They provide ready access to the site’s header, footer, and everything in between. A rogue client could easily do some damage.

The Site Editor includes a “lock” function that prevents tampering. But it’s easy to disable.

With classic themes, it’s possible to embed elements directly into a template. This makes it completely off-limits within WordPress.

This shift has led to a debate within the WordPress developer community. For some developers, giving up control may be a bridge too far.

Template Part Blocking in the WordPress Site Editor.

Block Themes Have Grown UpAll told, block themes are in a better position to fulfill their potential. And much of the credit should go to the team behind the Site Editor.

The improvements to building within WordPress are noticeable. This should help to put block themes on the map. They are now a serious option for web designers, rather than a curiosity for early adopters.

This doesn’t mean they’re the right fit for every project and person. The philosophical differences between block and classic themes still exist, after all.

But the future looks bright. With the Site Editor being stripped of this “beta” label, theme authors are more likely to build for it. And the rest of us will have more products to choose from.

Will there be a point when block theme adoption surpasses its classic counterparts? If it happens, it won’t be immediate. But it will be interesting to see how things evolve.

The post Should a Block Theme Power Your Next WordPress Project? appeared first on Speckyboy Design Magazine.

View Details

Favicon Generator – Upload an image and this tool will generate a set of favicons.

Ideas for Pixel Page Transitions – Examples of building compelling transition effects.

20 Free Intro & Opener Templates for After Effects in 2023 – Use these video templates to capture a viewer’s attention.

A Short History of Artificial Intelligence – A review of major turning points that have led us to the current state of AI.

Meet Adobe Firefly – Take a peek at the new AI art generation tool from Adobe.

Grid World – This essay details the importance of the grid in both design and everyday life.

Is That Commercial WordPress Plugin a Good Deal? – How to determine whether a “pro” plugin is worth your investment.

Regex.ai – This AI-powered regular expression tool will read your text input and highlight the matching strings.

Sticky Page Header Shadow on Scroll – A quick tutorial for adding a sticky header with some extra visual effects.

Beyond Algorithms: Skills Of Designers That AI Can’t Replicate – Why non-technical skills may be the biggest advantage that humans have over AI.

Little Things That Hamper the User Experience – These common practices are likely to drive users away from your website.

Figma Behavioral Design System – Use this tool to create evidence-based designs.

Designing a Single Grid System for all Wikimedia Projects – Explore the process of creating a standardized grid for the Wikimedia Foundation.

A Comprehensive Guide on Creating UI Designs for iOS Apps – Learn the essentials of high-quality app design that meet Apple’s guidelines.

Accepting Your Limitations as a Web Designer – Examining the pressures of keeping up and the realities of this industry.

4 GitHub Alternatives for Code Repositories – A look at other places for hosting your code.

Accessibility for Designers: Where do I Start? – Articles, resources, checklists, tools, plugins, and books to design accessible products.

WordPress 6.2 “Dolphy” – The latest version of WordPress features some significant upgrades to the Site Editor.

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

View Details

Building a website can be a complex process. And there are several key ingredients to finding success. That’s why many site owners choose to hire professionals like us.

Indeed, bringing a freelance web designer or an agency on board is a great decision. It’s an opportunity to collaborate with experts. And the result is often much better than trying to go it alone.

Having access to a professional removes a massive burden on clients. We handle the dirty work while they relax. But there can be a disconnect when it comes to important information.

If you work with clients, you’ve likely seen it many times. The basic information you need to perform a task is nowhere to be found. Things like logins, license keys, and web hosting details are crucial to getting things done.

We’re simply stuck in the mud without them. And our clients could be in a heap of trouble when they need them down the road. That’s where our ability to educate can help.

Today, we’ll share a handful of items that every website owner should know. They may seem basic. But there is no shortage of people who are missing some or all of this information. Thus, it’s up to us to raise awareness.

Where Their Domain Name is RegisteredThis is a big one. And it’s something that clients don’t necessarily think about. But knowing where their domain is registered (and how to access it) is vital.

Much of the confusion stems from who initially registered the domain. Sometimes a web designer did so and never shared the account details. In other cases, it may have been a former employee. They might have performed the registration under their email address.

Either way, clients are left out of the loop. This can come back to bite them when it’s time to renew, or a DNS change is required. It can also cause a new website launch to come to a screeching halt.

Thankfully, the solution is simple. Web designers can help by ensuring clients know the registration details and putting them in control of the account. Just as important – making sure that the domain’s contact information is up to date.

How to Access Their Content Management SystemUsing a content management system (CMS) to power a website brings flexibility. Features and functionality can often be added with a few clicks.

And they also empower anyone with access to make changes. Whether it’s adding a blog post or editing a team member listing – all you need is an account and a web browser.

But not all clients are interested in maintaining their websites. Some would prefer to have someone else perform those tasks – fair enough.

They should still have an account on file, even if they have no intention of logging in. There may come a time when they need access. And if you’re not around to help, they’ll be effectively locked out of their website.

Where to Find Digital Brand AssetsThis has been a problem since the dawn of the web design industry. And yet you’ll still find organizations that have no idea where to find their digital brand assets.

Items such as logos, marketing images, and multimedia files are necessities. They’re crucial for a few reasons.

First and foremost, having access to high-quality assets improves the finished product. Using a low-quality logo, for example, can limit design options. Not to mention the pain of rebuffing a client’s request to “make it bigger.”

Second, a lack of assets can impact branding. Consistency across mediums is key to messaging. If certain elements are missing, it could be a missed opportunity.

Unfortunately, web designers often have little control in this area. But if you’re able to help a client locate these items, stressing their importance is worthwhile.

Software Subscriptions and License KeysThe average website often depends on software from a variety of sources. WordPress themes and plugins are prime examples. Theoretically, a site could rely on commercial apps from multiple vendors.

But keeping track of subscriptions and licensing can be messy. If you’ve ever inherited a website and found expired licenses, this may be the reason why.

Even so, maintaining software is critical. Security is a major factor, as an outdated app is a sitting target.

It also helps to ensure compatibility with new versions of their CMS. This keeps things running smoothly over the long haul.

Any time you purchase software for a client, send them a copy of the license information. Better yet, create a shared document with all of their apps. This will allow you to perform regular updates and keep them in the know.

Web Hosting & SaSS Provider AccountsFor some organizations, web hosting can be an afterthought. Especially so when their web designer or agency manages the service. Yet this is a major component of an organization’s online presence.

The same goes for software-as-a-service (SaSS) provider accounts. Consider services that handle tasks like email deliverability and content delivery networks (CDN). They power mission-critical features.

If there’s a problem or service request, a client may come to you for help. But what if you’re not available? Or perhaps they’re no longer clients? Without prior knowledge of the providers, they won’t know who to contact.

These items are the lifeblood of a website. Therefore, clients need to know who’s responsible for taking care of them.

Help Clients Stay InformedWeb designers are often expected to retain a wealth of knowledge. And while it’s great to have insight into every detail of a website, that doesn’t absolve clients. They have a responsibility to stay informed as well.

At a minimum, they should understand who and what keeps their website running. The items above are all pieces of the puzzle.

Part of our responsibility is to pass this knowledge along to clients. It also doesn’t hurt to explain why they should care about it. This will (hopefully) inspire them to make it a priority.

The post Things Every Website Owner Should Know appeared first on Speckyboy Design Magazine.

View Details

We often discuss the worst aspects of people. And it makes sense. Freelance designers are likely to deal with the occasional client from hell. Oddly, these stories tend to bring us together. We can swap tales of disaster and laugh.

I’m thankful that most of my client experiences have been positive. And many relationships have withstood the test of time. Some have lasted for 20+ years.

And just as bad clients display certain traits – so do good ones. They provide clues as to what it’s like to work with them. Maybe we can refer to them as “green” flags – as opposed to red.

With that in mind, let’s look at traits that make for a great web design client.

They’re Willing To Listen to Your IdeasWhen someone hires you to build their website, it’s nice to know that they trust your expertise. After all, a web designer does more than take directions.

Providing advice is part of the job. It can help clients get the most out of a project. We know what works and what doesn’t. And our experience with different tools and techniques is beneficial.

The best clients tend to seek your professional opinion. And they seriously consider what you have to say. It doesn’t mean that they’ll always do things your way. But they value your opinion.

They Have Realistic Goals for Their WebsiteProjects that lack a clear goal are difficult. But clients aren’t always sure of their specific needs. Thus, designers are forced to work with the few puzzle pieces that are provided. And they must also fill in any remaining gaps.

On the other hand, a client who has specific, tangible goals for their website brings clarity. Knowing someone’s needs and expectations allows you to create a plan. Here’s to no more guessing games!

It’s also worth noting that you have an opportunity to help guide clients in the right direction. Therefore, don’t be too discouraged by a slow start. There’s still time to develop those goals.

They’re Willing to Spend for QualityEven the biggest projects have budgetary restrictions. It’s something we all deal with. But there are circumstances when a project’s expectations have simply outgrown its budget.

Sure, there are plenty of free resources available. WordPress themes and plugins come to mind. But they aren’t always the best tool for the job. Without an investment in quality, the outcome will suffer.

You’ll gain an appreciation for clients who understand this reality. Sometimes money must be spent to do things right, particularly when it comes to eCommerce. A little money invested upfront can save extra costs (and headaches) down the road.

This also goes together with clients who are good listeners. Part of our advisory role is to recommend tools and services that produce the best outcomes. The hope is that they’ll take our advice and make the best decision possible.

They Value You and Your TimeSome clients don’t make you feel like a valued member of their team. They’ll dismiss your ideas and toss aside concerns. You may even be left out when big decisions are made.

On the other hand, it’s a wonderful feeling when someone treats you like family. They understand that you’re busy. They don’t waste your time. And when something happens in your life (good or bad), they offer words of encouragement.

For example, I witnessed the birth of my daughter and the passing of my mother. In both instances, several clients took time to send congratulations or condolences. It makes for a stronger relationship – one where everyone feels like they matter.

It also helps when clients make a good-faith effort to pay invoices. Doing so is a sign that they value and respect you.

They Tell Their Friends About YouClient referrals are a great compliment. It says that someone enjoyed working with you and is happy with the results. What’s more, you get the sense that they want you to succeed.

Referrals must be earned, though. Hard work, honesty, and a job well done are key ingredients.

But it takes a special person to recognize your efforts and recommend your services. Even if a referral doesn’t work out, their thoughtfulness still counts.

A Great Client is a GiftWe all have an idea of a “dream” client. Maybe it’s someone that pays well and asks for little in return. Or it could be someone who provides you with creative freedom. Maybe they drive a Ferrari and let you get behind the wheel.

Fantasies aside, it’s important to recognize those who value what we do. The greatest clients are the ones who keep our businesses running. Without their trust, we wouldn’t be here.

So, let’s raise a glass to our best clients. Give them thanks for being part of the journey!

The post 5 Things to Look for in a Great Web Design Client appeared first on Speckyboy Design Magazine.

View Details

Title sequences can become iconic. These familiar scenes from movies, television, and video games often become etched in our memories.

They also serve as a cultural marker of sorts, helping us define an era. For example, Star Wars has come to define the late 1970s and early 1980s. These days, the title of Stranger Things has forged its own signature.

Thus, it’s no wonder that web designers use title sequences as a proving ground. By recreating their favorites in CSS and JavaScript, they’re sharpening their skills and paying tribute.

Let’s have a look at eight famous titles that designers felt worthy of imitation. Some are spot-on facsimiles, while others use a bit more artistic license. But they’re all worth celebrating in our book.

Avengers Infinity Title Morph by Noah MalewiczThe Avengers comic and movie series is a worldwide phenomenon. This morphing presentation starts with the unmistakable logo and shuffles through various characters. SVG and JavaScript combine here to create a smooth and sharp animation style – Hulk would be proud!

See the Pen Avengers:Infinity Morph by Noah Malewicz

CSS Itchy & Scratchy from The Simpsons by Alvaro MontoroEveryone’s favorite cartoon cat and mouse are represented here with pure CSS. The opening title (shown in countless episodes of The Simpsons) demonstrates the power of CSS positioning and transforms. It might even outshine the intentionally simplistic style of the original.

See the Pen CSS Itchy &Scratchy (from The Simpsons) by Alvaro

Animated CSS Title from Frozen by Mandy MichaelThe title text from the much-adored Disney films is recreated using a variety of CSS techniques. The snippet combines gradients, blend modes, and background clipping to bring the logo to life. Even better is that you can customize the text by clicking and writing a message.

See the Pen CSS only Frozen text by Mandy Michael

Netflix Intro Animation in Pure CSS by Claudio BonfatiReady for some binge-worthy shows? This Netflix intro sequence looks incredibly authentic. Best of all – there’s not a single line of JavaScript in sight. This intricate presentation fully consists of HTML and CSS.

See the Pen Netflix Intro Animation Pure CSS by Claudio Bonfati

SNL Text Animation by Tom MillerLive from the web, it’s Saturday night! The legendary Saturday Night Live has gone through multiple styles. This animation reflects the modern motif, with a mix of hand-drawn letters and the New York City skyline. The best part? You don’t have to stay up late to watch.

See the Pen SNL Text Animation by Tom Miller

Responsive Pac-Man Title & Playable Game by Margaux DarriberougeWhile not a full-on recreation of the title sequence, this PAC-MAN snippet still looks familiar. And thanks to some clever JavaScript, you can play the game right on your device. Go ahead and give it a try – we’ll be here when you get back.

See the Pen Pac-Man Game (vanilla JS) – Responsive by Margaux Darriberouge

Friends TV Title & UI by Echo BrainRelive the glory days of the popular 90s sitcom with this snippet. The instantly-recognizable font and colors are all there. You’ll also find a card UI, with fun character quotes that display upon hovering over one.

See the Pen F.R.I.E.N.D.S by echobrain

Aliens Animated Title by Chris SmithThis spooky glowing text from the sci-fi film franchise certainly sets the mood. And it was built using surprisingly little CSS. We’re not sure what’s scarier: the movies or the ease with which this was created!

See the Pen Aliens text animation by Chris Smith

The Fusion of Code & Pop CulturePerhaps people don’t gather around the television to watch as a group these days. But TV shows, movies, and games still connect us. And the code-based tributes above are a fun way to share that bond.

They also demonstrate some impressive technical leaps forward. Web animation, typography, and special effects have evolved quite a bit. Each plays a role in making these snippets recognizable and enjoyable.

Want to see more famous titles recreated with code? Be sure to visit our CodePen collection!

The post 8 CSS & JavaScript Snippets for Recreating Iconic Titles appeared first on Speckyboy Design Magazine.

View Details

Patterns are a fantastic way to add cohesion and visual interest to any design project. Once you understand the basic principles, creating custom patterns in Illustrator becomes easy.

This roundup features the best tutorials from around the web to help take your Illustrator skills to the next level and create custom, seamless patterns for your current and future design projects. From basic pattern creation to advanced techniques for intricate designs, these tutorials offer a wide range of design possibilities.

You’ll learn how to use various tools and features in Illustrator to create unique patterns that are visually stunning. You’ll discover how to play with color, texture, and shape to create patterns that are both functional and aesthetically pleasing.

These tutorials provide valuable insights and tips on design principles, such as balance and repetition, that will help you create cohesive and harmonious patterns.

You might also like our free high-resolution collection of seamless pattern sets.

More Illustrator Tutorials* Character Design Illustrator Tutorials * Icon Design Illustrator Tutorials * Logo Design Illustrator Tutorials * Poster Design Illustrator Tutorials * Text Effect Illustrator Tutorials How to Create a Summer Underwater Seamless Pattern With summer just around the corner, this tutorial is the perfect way to brush up on your Illustrator skills and create a seamless pattern featuring an adorable underwater scene. Perfect for branding projects as well as for beachwear designs.

Geometric Seamless Vector Patterns (on Envato Elements)Geometric patterns are great for any project that wants to reflect a minimal and modern vibe. However, there might be times when you can’t afford to design a pattern from scratch. Use these beautiful geometric patterns to save time in your design process.

How to Create a Cubical Pattern Geometric patterns might look complicated, but they are pretty simple, usually consisting of a few basic shapes. Thanks to this tutorial, you’ll learn how to create an interesting cubical pattern in Illustrator.

Seamless Black & White Chili Pepper Pattern (on Envato Elements)If you’re working on a project that requires food-related patterns, don’t miss out on this template. This black and white chili pepper pattern is a great way to spice up your designs, and it comes in a high resolution of 5000x5000px.

How to Create Colorful Pattern Masking In this tutorial, you will learn how to apply a colorful pattern to your text and keep it fully editable. The result is truly spectacular, and even though it sounds complicated, it only takes 12 steps.

Vintage Seamless Patterns (on Envato Elements)If you need vintage patterns, check out this template. It comes with 16 high-resolution patterns in vector format, perfect for wedding cards, stationery, wallpapers, and other projects.

How to Create Line Patterns in Illustrator Line patterns can make for some interesting effects, and this tutorial takes you step-by-step through the process of creating a line pattern in Illustrator. The best part about this tutorial is that it uses nothing more than basic shapes and clever adjustments.

How to Create a Tribal African Patterns Learn how to use basic shapes to create tribal African symbols like the ankh cross and the cowrie shells, then combine them into a pleasant composition that makes up a beautiful pattern.

Doodle Patterns (on Envato Elements)If you’re on the lookout for doodle patterns, be sure to check out this collection of eight handmade patterns. They can be used as backgrounds or wallpapers.

How to Create a Hexagon Pattern In this tutorial, you will learn how to use the Pattern tool in Illustrator to create a hexagon pattern. The tutorial takes you through the steps, one at a time, and you will also learn how to use the Pattern mode to experiment with your pattern design.

How to Create a Set of Hand-Drawn Retro Patterns This tutorial teaches how to create a set of hand-drawn retro patterns in Illustrator. You’ll learn how to make use of the Pattern option tool to create a fun and bold pattern design.

Designing your own patterns is a fun learning experience that pushes the boundaries of your creativity and skill.

Thanks to the tutorials here, you’ll learn how to create a variety of great-looking patterns that can be used in a multitude of projects. Best of all, you’ll sharpen your Illustrator skills and be able to add another skill to your toolbox.

The post Tutorials for Creating Seamless Patterns in Adobe Illustrator appeared first on Speckyboy Design Magazine.

View Details

If you have strong design sense, a well-marketed business concept, and the energy to keep moving forward, your design startup is sure to grow.

However, not all growth is good growth; it is dangerous to expand in unsupported or erratic ways. By laying out a plan for your business’s future now, you will move forward with a stability that is built to last, and make a name that consumers can depend on.

As you plan, there are small things you can start doing now that will really pay off down the road — some of which you may already be doing with your marketing!

Here’s a list that will help you identify the good practices you’re already pursuing, along with some that it would be wise to implement:

Always take time to brainstorm. Set a specific time each week to come up with new ideas for your business. An idea you need might be lurking at the back of your brain, waiting for a good brainstorming before it’ll jump out.
Reach out to current customers about working with them on future projects.
Play around with unfamiliar social networks. You might discover that a platform you’ve never heard of is actually a perfect fit for your design business.
Advertise yourself more than a general “designer”. Include your specialties. Leave the explanation of your full range of abilities to face-to-face prospective client meetings (it’s less overwhelming that way).
Talk with fellow designers — Don’t just dispense advice in an attempt to sell yourself as an authority figure in your field. Listen and take an interest in others. Get your name out there through as much online and offline interaction as you can.
Write a piece on how businesses can use design in their self-promotion, and share it with local businesses. This establishes you as an authority and gives them someone obvious to call when they realize their current brand image is underperforming.
Be prepared to pitch a short summary of your services whenever you strike up a conversation in public — commonly known as an “elevator speech.” Explain what you do and why you do it so well, without talking so much that you alienate your listeners.
Keep your online portfolio updated and limited to only your best work. When you share the link, on your business card or other informational items, you want to be confident that what your prospects will find best represents the work you do.
Learn something new. Coding, content writing, SEO, or another skill that ties in well with what you already do and enables you to offer more to your clients.

Little self-improvements here and there will make you a stronger company in the future.

Ways to Build Relationships that Strengthen Your BusinessYour relationships with your clients — especially in the early days — will set the tone for your future business interactions. Those who come later, referred by your first clients, will already have an idea of what to expect. This means you must be proactive and personable when going on the hunt for new patrons.

According to industry veteran David C. Baker, you won’t get very far without four things: a unique statement of your own value, confidence in your abilities, strategically sought connections, and ongoing involvement in the client search. If you aren’t original, don’t nurture connections, and aren’t confident, you won’t get much business.

Even if you’ve nailed the uniqueness, confidence, and connectedness requirements, you can’t slack off from your responsibilities. You are the driving force behind your design company, especially in the beginning. Don’t let yourself fade out of usefulness as your team and business grow.

You may have been told “beggars can’t be choosers” when you’re looking for customers, but that isn’t always true. Undervaluing your services for the sake of making a quick profit can trap you in a rut of taking on projects from cheap, demanding clients. If you have a bad experience with a customer, don’t be afraid to turn them away.

It’s not only clients you need to consider, but employees. Unless you plan to remain small enough to handle everything on your own, you’ll probably need to bring in help to keep up with demand. Hire those who are excited about your vision and seek to give rather than take. Involve workers like this in higher-level decisions that benefit everyone rather than relegating them to drudge work.

Not building the right kinds of relationships can affect your profit. If you don’t hire strategically or bring in experts when you need to, you could find yourself overworked and in major debt.

Similarly, undervaluing your services with attractively low pricing may bring in a flood of initial business, but this low-profit margin will not be sustainable. To avoid this, focus on the areas that are most profitable for you and promote your work in those fields.

Long-Term Goals to Work toward TodayIf you see your business as a potential career rather than a temporary gig, it’s never too early to start thinking about the future. Your first long-term consideration should be to build a brand that you’ll be happy with for years, rather than blindly latching onto the latest trends.

A brand is more than just a logo; it’s the story you tell prospective customers about yourself. If you produce halfhearted content (tweets, blog posts, etc.) instead of building a valuable and strong foundation with your clients, your sales will suffer in the long run.

Another way to grow well over time is to focus on moving forward and producing quality work. Let go of some decisions and trust your employees to handle them. At the same time, don’t be afraid to urge others forward even if they don’t see the need; letting complacency develop is the shortest route to bad, lazy decisions.

In addition, learn how to sell yourself in a way that feels natural to your temperament and the atmosphere of your business. People prefer to do business with someone who is persuasive because they know their own value. Know why your services are just that — and don’t be afraid to talk about it.

The post Building Your Design Business the Right Way appeared first on Speckyboy Design Magazine.

View Details

UX Basics: Study Guide – This resource serves as a starting point for learning the basics of UX.

2023 State of Design Systems and Where We Take Them Next – Thoughts on how design systems are changing.

Amazing Metallic Effects Built With CSS and JavaScript – Examples of attractive and interactive effects.

Flectofy – Create unique SVG shapes with this tool.

Things Your Web Design Clients Should Manage Themselves – A look at why web designers shouldn’t control every aspect of a client’s online presence.

Visually Hidden Content is a Hack that Needs to be Resolved, not Enshrined – The downside of hiding content via CSS.

Improving CSS Shapes with Trigonometric Functions – How math can help us create better and more complex shapes.

Code Snippets That Demonstrate the Repelling Effect in Web Design – Fun features that encourage user interaction.

The Ultimate Guide to Image Optimisation – Take a deeper look at why optimizing images is important, along with helpful tools and techniques.

Jumping HTML Tags – Another Reason to Validate your Markup – Some tools can produce problematic HTML output.

The Four Ways that Freelancers are Mistreated – A look at common transgressions, along with ways to combat them.

Fluffy Guide – This free styleguide kit for Figma can speed up your workflow.

Fighting Inter-Component HTML Bloat – How component authors can encourage “good markup hygiene”.

CSS Masking – Learn the secrets behind CSS masking, complete with use cases.

Free Mockup Templates for Logo Design – Showcase your logo in a variety of ways using these free templates.

Slim Icons – Check out this free and open-source library of 100+ icons.

Tech Icons – A free set of PNG/SVG icons representing a multitude of tech brands and tools.

Code to Image – This tool will turn your code snippets into beautiful custom images.

16 Little UI Design Rules that Make a Big Impact – A UI design case study to redesign an example user interface.

Proposal: The Interactivity API – A better developer experience in building interactive blocks – WordPress may someday support interactive front-end blocks.

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

View Details

With the overwhelming number of tools, libraries, and technologies out there, it’s impossible to know everything. Yet web designers place a great deal of pressure on themselves to keep up. It can lead to a feeling of being burned out and hopelessly behind.

The truth is that there is only so much you can know. After all, you have clients to serve and a limited amount of time for learning. Thus, we must focus on what’s most relevant to our job.

This is one of the hardest things to accept. We’re often bombarded with messages about the things that we should know. If not, we may not measure up to our peers.

Each of us has limitations. So, how do we learn to accept them? How can we still thrive as designers and developers? Let’s examine the pressures of keeping up and the realities of this industry.

The Trouble With Forcing Yourself To LearnRaise your hand if you’ve ever been in this situation. You’re working on a project, and your client requests a new feature (never mind the scope creep for the moment). The feature requires a skill you aren’t so adept at – let’s say it’s writing some custom PHP.

Sure, you have some experience with the language. But you’ve never taken on something of this magnitude. You’re a little bit wary but agree to do it.

You’re hoping to learn as you go. And maybe you pick up on some of the concepts involved. But you quickly realize that you are running into some roadblocks.

You’re spending precious time and resources trying to piece things together from tutorials and support sites. Meanwhile, a deadline is approaching. This is not a good feeling.

Adopting a Better Approach To LearningThis scenario has likely happened to most of us at one time or another. At first glance, it may seem like lacking a certain skill is the culprit. But that’s not the whole story.

Sure, it would be nice to have a Jedi-like mastery of the language. But it’s not in our repertoire just yet. And by refusing to accept this, we put ourselves (and our client) in a tough spot.

We often put things into the same context as sports or action movies. You know, the brave soul who takes a hit but comes back stronger. However, web design is neither of those things.

Learning a complicated skill on demand isn’t easy or realistic. Star athletes and action heroes can afford to spend copious amounts of time and money on improving. We don’t have this luxury.

So, while attempting to improvise sounds noble, it’s also counter-productive. Instead, there are more effective ways to approach the situation:

Explain the Situation to Your ClientWhen it comes to client relations, honesty is the best policy. As such, having a frank discussion about your limitations can be a bit freeing. Plus, it sets a realistic level of expectation.

For the most part, clients will appreciate this information. It helps them understand what’s possible and adjust their budget accordingly.

Make a PlanThe job still needs to be done. Thus, it’s important to have a plan for how it will be implemented.

This could mean delaying the project’s launch. The advantage here is that you’ll have enough time to work through any potential roadblocks.

Or it might require hiring an expert to help. That will save you the trouble of doing everything yourself. Plus, you’ll be able to focus on the other items on your to-do list.

Follow Through With a SolutionClients are usually focused on the result. Therefore, the path we take to achieve a goal isn’t as important. But working with them to find a solution is a key part of the process.

The conversation can be difficult. But by showing you have their best interests in mind, things can come together nicely.

The lesson here is that having personal limitations doesn’t necessarily hurt the project. By acknowledging your limits, you can create a plan that works for everyone. That’s a valuable skill in itself.

It’s All About PerspectiveThe web design industry often sees limitations as a character flaw. It’s as if not having a particular skill should disqualify you from getting an opportunity.

Both freelancers and agencies tend to perpetuate this myth by promising the world. The whole “we can do it all” narrative is great for marketing, but little else.

The reality is far different. Accepting what we don’t know is the first step towards breaking free of these impossible standards.

We can still create great outcomes for clients. Meanwhile, we can continue to learn at a comfortable pace.

From there, we start to treat learning as a journey – not a race.

The post Accepting Your Limitations as a Web Designer appeared first on Speckyboy Design Magazine.

View Details

To quote an iconic (and personal favorite) song from the 1990s: it’s the little things that kill. In this case, we’re talking about a website’s user experience (UX).

Sometimes these elements can be afterthoughts. Or put into place for marketing or analytical purposes. But they will drive users both crazy and away from your website.

Overdramatic? Maybe. But it’s a stark reality. Regardless of how brilliant your design and content may be, a bad UX sticks with users. And unless they have a compelling reason to come back, they probably won’t. You can’t blame them. Who needs the bother?

Let’s take a moment to outline some of these annoying practices. Sadly, they’re prevalent across the web. But that doesn’t mean we have to partake in them.

Modal Windows That Change Your Scroll PositionModals are everywhere. It seems like everyone is vying for our attention by putting pop-up windows in our faces.

The practice has become so commonplace that it’s easy to ignore. Users can simply click and rid themselves of the interruption. No harm done.

But there is one implementation that is harder to justify. And it may not even be intentional.

Imagine visiting a page and beginning to scroll down. Everything’s going great until a modal window appears – and resets your scroll position to the top of the screen.

This puts users right back where they started. And not everyone will have the patience to restart their journey.

Whether this effect is due to buggy JavaScript or by design, it’s not ideal for UX. Regardless, it’s worth testing modal features to ensure that they’re as minimally invasive as possible.

Requiring Extra Clicks To See Full ContentFor news-oriented websites, it’s standard practice to display an index of articles. A user can find an item of interest and click to access it. Content management systems (CMS) like WordPress make this easy to implement.

And that’s usually the end of the process. Users can view the chosen content and decide what comes next. Except it doesn’t work that way on every site.

Some websites have added an extra step. You’ll only get a partial view of the content – maybe a paragraph or two. At some point along the way, you’ll be asked to click a button to reveal the rest of the article.

If the content is behind a paywall and requires a login, that’s an understandable step. But otherwise, it’s preventing users from accessing the very item they wanted to see.

Whatever the benefits of this strategy, happy users are not among them. Users should not have to click twice to view content.

Third-party Features That Slow Page LoadModern websites are capable of loading content and functionality from third-party sources. Connecting to social media APIs, for example, is a widespread practice. The same can be said for analytics, remotely-hosted fonts, and various software-as-a-service (SaSS) providers.

These features can be problematic, however. First, there are potential privacy issues. Users are becoming more aware of what they share and who they share it with. Some may be turned off by the idea of allowing Facebook, etc. to track their movements.

Page load times are also a concern. Even if your web host performs well, pages can still be slowed to a crawl by these third parties. They may prevent users from navigating your website.

Thankfully there are ways around this issue. Fonts can be stored locally. And some plugins cache social media feeds for faster loading. Locally-hosted analytical apps are also available.

Implementing features from third parties is fine. But it should be done in a way that minimizes the inconvenience to users.

Multimedia That Scrolls With the UserVideo presentations are often placed at the top of a page. This makes it easy for users to find and watch. But if they scroll past the video, what does that say about their intent?

Far too often, these videos are configured to travel along with the user. As a user scrolls, the video shrinks and tucks into a corner. In some cases, it completely disregards user intent and is set to automatically play.

This is particularly frustrating for those hoping to read the associated content. Having moving images in the field of view, even if they’re off to the side, can be a distraction.

And mobile users are in worse shape. The unwanted video takes precious screen real estate away. This makes it more difficult to focus and read.

Is Your Website Frustrating Users?When it comes to poor UX, the items above merely scratch the surface. But they’re prime examples of well-intentioned features gone wrong.

There are often legitimate reasons to put them into place. And the occasional feature may end up being more annoying than you realize. Still, it’s worth weighing the benefits and drawbacks.

Anything that gets in the way of a user’s ability to access your content is a risk. Push them too far and you may end up missing out on conversions. And who can afford that?

Conducting UX testing is a great way to catch these annoyances before they cost you. But it’s not necessarily within every budget.

In that case, take a closer look at how your website works. If you find items that aren’t user-friendly, take action to improve them. It may be the difference between a loyal customer and one that got away.

The post Little Things That Hamper the User Experience appeared first on Speckyboy Design Magazine.

View Details

There are over 60,000 listings in the WordPress plugin repository. And while all are free to use, many offer commercial upgrades. These “pro” versions usually include more robust features and technical support.

Free plugins can be quite useful. But inevitably, you’ll run into a scenario where upgrading makes sense. This is particularly relevant when your website relies on a specific plugin for eCommerce or other advanced functionality.

The decision to put down your (or your client’s) hard-earned money isn’t always easy, though. Both pricing terms and licensing can vary. It seems like each plugin author has a different strategy.

And then there’s the quality of the added features and support. Will they be worth the cost? And will the plugin stick around for the long term?

Indeed, there can be a lot of uncertainty. But not to worry – you’ve come to the right place! Here’s how you can determine if a commercial WordPress plugin is a good deal.

Do the Price and Terms Fit In Your Budget?So many plugins, and so many pricing structures. WordPress plugins run the gamut from one-time purchases to yearly subscriptions. That’s fair enough – but things can get complicated in a hurry.

For example, there can be several tiers to choose from. The general rule of thumb is that the more expensive the tier, the more features you get.

The number of site licenses offered also varies. Depending on the plugin, the cheapest tier may allow for use on a single site. And while some have unlimited site licenses, others place strict limits – even on their most expensive plans.

And if the plugin requires yearly renewals, that’s also a consideration. The cost adds up over time. Thus, you’ll want to think about your long-term plans for the software.

Most plugins will continue to work if you decline to renew. However, you’ll lose access to updates and support. Therefore, keeping an unlicensed plugin installed is not recommended.

The biggest factors here will be cost and value. If the plugin provides enough value (monetary or perceptual), then there is a good reason to make the purchase.

Do You Need the Pro Features?Features are often the biggest reason to upgrade to a pro version. And WordPress plugin authors have become adept at showing you what you’re missing.

Sometimes you’ll see grayed-out items in the settings panel. Or those ubiquitous ads in the WordPress dashboard. It’s good marketing in that it creates the temptation to spend money.

Still, you’ll want to think about how useful those extra features are. Will they add anything valuable to your website?

For instance, let’s consider a form builder plugin. Perhaps the free version makes it easy to create a simple contact form. But the pro version includes several extra field types.

If you can envision using those extra fields, an upgrade can be easily justified. They could help you capture more relevant data from users – not to mention improving ease of use. In that case, the power and flexibility make the cost worthwhile.

On the other hand, what if you aren’t going to use those pro features? Sticking with the free version may be your best move.

How Important Is the Plugin’s Future?Cost and features are important factors. But if a plugin acts as a key cog in your website, so does longevity.

That’s as good as any reason to purchase a commercial plugin. After all, software developers need to earn a living. Providing financial support for the product is a great way to help.

Your money will help to fund future updates. That could include new features, but also security and bug fixes. They’re vital to ensuring that the plugin stays competitive and compatible.

Then there’s the subject of technical support. This can be a huge burden for solo developers and small shops. Sales revenue can be used to improve service and potentially hire staff.

Most of all, purchasing a plugin license lets its developer know that you value its product. That’s crucial, as a lack of user interest can often lead to a plugin’s demise. The more it sells, the better chance it has for long-term survival.

This doesn’t mean that you should ignore cost or features. Rather, it’s a prompt to think about what a particular plugin means to you. Helping to keep it alive might be a good enough reason to stretch your budget.

Are You Ready To Go Pro?Unless you have very deep pockets, it’s important to carefully consider what you buy. Determining whether a commercial WordPress plugin is a wise investment is part of that responsibility.

Admittedly, it’s easy to go overboard. I can attest to that, as I’ve made more than my share of impulse purchases. Thus, a few plugins are sitting around on my hard drive collecting virtual dust.

And make no mistake about it – supporting WordPress plugin authors makes a difference. Every sale goes to keeping their business afloat.

But it’s also a good idea to look at how that software fits into your plans. It needs to be affordable and have features that add value to your website. If you’re a freelancer, you might also consider the potential for using it on multiple websites.

With so many plugins to choose from, it’s unlikely that anyone can afford to buy them all. Therefore, it’s all about finding what’s most important to you.

The post Is That Commercial WordPress Plugin a Good Deal? appeared first on Speckyboy Design Magazine.

View Details

Enlightenment in shape: geometry. If your clients want to create a memorable brand out of their businesses, designing the logo is the first stop on your journey. And when it comes to brands that want to emphasize their knowledge and wisdom, there’s nothing like geometric logos.

Geometric logos have plenty of benefits. Most notably, the human psyche responds well to geometric shapes – we’ve all been taught to recognize shapes such as triangles. Every shape has its own meaning: We associate circles with wholeness and balance. Triangles give us dynamism; we see triangles and think: it’s time to move towards greater things. Squares, with all their perfect angles, give us a sense of stability.

Every geometric shape has its own meaning, so if your clients want to showcase their values and visions, starting with their logo, it’s time to create the perfect geometric logo. But you don’t have to start from scratch! These geometric logo templates allow you to improve your brainstorming process or cut down on the time you spend on the drawing board.

Pick the perfect template (from minimalist logos to logos that show movement and action), customize it for your clients, and voila! You’ve got a beautiful logo that reflects your client’s vision.

More Logo Templates* Animal & Pet Logo Templates * Bakery & Cake Logo Templates * Feminine Logo Templates * Food & Drink Logo Templates * Gamer Logo Templates * Logo Creator Kits & Templates * Minimal Logo Templates * Monogram Logo Templates * Photographer Logo Templates * Restaurant Logo Templates * Sport & Fitness Logo Templates * Travel & Vacation Logo Template * Vintage Logo & Badge Templates * Fonts for Creating Logos Elephant Poly Colorful Logo Template (AI & EPS)This colorful elephant logo template composed of geometric elements is the perfect choice for a variety of businesses, but especially creative and entertainment brands. The files are 100% editable in Illustrator, so you can easily customize them for a beautiful and bold geometric logo.

Geometric Letter G Logo Template (AI & EPS)G like gorgeous! This geometric letter G logo template is a unique take on geometric logos, complete with typography perfect for luxurious and elegant brands that want to showcase their uniqueness. It’s a bold choice, but you can edit the colors and text in Adobe Photoshop and Illustrator.

Geometric Rose Color Logo Template (AI & EPS)Is your brand beautiful and innovative? Show it with this geometric rose logo template! This gorgeous gradient template makes the most of both worlds: the perfect harmony of geometry and gentle colors. It’s the perfect logo for a variety of business types, from beauty to entertainment and more.

Stariola Geometric Shape Logo Template (AI, EPS & SVG)Make your brand instantly recognizable with Stariola, a star-shaped geometric logo template. Stariola leaves a positive impression on customers and showcases your clients’ stability, security, and dynamism, making it the perfect choice for tech, finance, real estate, insurance, and other industries. You can easily customize it in Adobe Illustrator.

Flying Bird Logo Geometric Logo Design (AI, EPS & PNG)Serene and subtle, this flying bird geometric logo template is perfect for clients who want to hint at their dynamism while staying grounded in quality and compassion. This geometric logo template is 100% editable and includes shapes and colors. Mix and match elements to make it completely fit your brand!

Minimal Geometric Logo Collection (EPS & AI)Create a beautiful and intricate geometric logo with this minimalist geometric logo collection. Featuring a combination of squares and circles, this geometric logo collection is incredibly easy to edit in Adobe Illustrator and allows you to create a beautiful logo that suits aesthetically-informed niches, from jewelry brands to luxury brands.

Geometric Logo Templates Vol.2 (AI, EPS & PSD)Not sure where to get started with your next geometric logo project? Get this geometric logo template collection, and you’ll have plenty of ideas to work with before you know it! Featuring 50 diverse logos that suit all kinds of businesses, this logo collection is a splendid choice.

Modern Geometric Logo Template (AI & EPS)Grounded in the aesthetic of geometry and informed by modern design tendencies, this geometric logo template is a versatile and bold choice. Featuring triangles and straight lines, it’s perfect for invoking a sense of direction and innovation in your clients’ logos. You can customize it in Illustrator!

30 Premade Geometric Logo Templates (AI, EPS & PSD)Are you looking for a powerful addition to your standard logo design kit? Choose these geometric logo templates. This collection features 30 diverse logos that play with both shapes and typography, allowing you to create a complete brand identity from scratch. Each logo comes with four styles you can customize in Illustrator.

Low Poly Geometric Colorful Lion Mascot Template (AI & EPS)It’s time to show your power! This geometric lion mascot template is perfect for brands that fit the Ruler archetype – they offer stability, power, and quality. The colors allow you to add a dash of dynamism and futurism to standard branding, and it fits unique brands perfectly.

50 Geometric Logos Vol.1 (AI, EPS & PSD)Create beautiful geometric logos with this geometric logo template collection that features 50 unique logos for your next project. With a combination of shapes (with ready-made typography), this logo collection is perfect for a variety of industries. Of course, you can completely customize every logo from the pack in Adobe Illustrator.

Set of Minimalistic Geometric Logo Templates (AI & EPS)Create dynamic and innovative geometric logos with these minimalist templates. This collection features eight clean and simple geometric logo templates that mainly feature triangles. They’re perfect for businesses with a dose of dynamism, from tech companies to sports and athleisure brands that want to inspire and delight customers.

50 Abstract Geometric Logo Collection (AI, EPS, SVG & PNG)Abstract and clean, these 50 geometric logo templates are perfect for telling a whole story with just your logo. You’ll find a great number of options for your next projects, so this geometric logo template collection is a perfect addition to your design kit. They are all customizable.

Hexagon Geometric Vector Logo Templates (AI & EPS)Simple and minimalist, these hexagon geometric logo templates are perfect for unassuming and powerful logos. You’ll get four diverse logos in a linear, outline style presenting hexagons, squares, and other similar geometric shapes. They’re really easy to customize and look beautiful on a variety of logos.

Geometric Butterfly Logo Template (PNG, AI & EPS)Create a connection with your audience with the recognizable butterfly shape, and then seal the deal by showing how innovative you are by presenting the butterfly as a geometric shape. This geometric logo template is truly unique, and your more modern and innovative clients (and their clients) will love it!

Abstract Artificial Intelligence Face Logo Template (AI, EPS & PNG)Create a powerful first impression with this geometric logo template showcasing an artificial intelligence face. This logo is perfect for tech companies, as well as marketing, business intelligence, finance, and similar brands. You can change colors, shapes, and more. All you need is Adobe Illustrator, and you will be set!

Luxury Geometric Letter “S” Logo Template (AI, EPS & PNG)Luxurious and powerful, this geometric logo template presents the letter “S” in a unique application. Clean and simple while retaining the impression of power and luxury, this letter S logo template is perfect for elegant brands and brands that want to hint at their reliability and high quality.

Colorful Dynamic Flying Bird Logo Template (AI & EPS)Lively and passionate, this colorful geometric logo template is a bold choice for active brands. With a color palette that reminds us of Firefox’s iconic logo, this dynamic bird logo template is sure to stay imprinted in your customers’ minds. It’s completely editable in Adobe Illustrator.

Set of Abstract Geometry Symbols (AI & EPS)Abstract, subtle, and luxurious, this set of geometric logo templates is perfect for elegant brands with a long tradition. This set contains logos inspired by ancient symbolism, such as Vedic iconography, and comes with white, black, and gold outlines for that extra kick. They’ll look absolutely beautiful!

Geometric Infinity Cross Logo Template (AI, EPS & PNG)This geometric logo template is the perfect combination of the geometric symbols of the cross and the circle, and leaves audiences with the impression of infinity and power. You can customize it in Adobe Illustrator and create beautiful logos for clients who aren’t afraid to show their power.

Owl Head Poly Colorful Logo Template (AI & EPS)Wisdom and vigor come together to form this beautiful, geometric owl head logo template. Composed of shapes such as triangles, circles, and hexagons, this owl logo template is a bold choice for education, tech, and entertainment brands. Since the logo is vector-based, you can completely customize it in Adobe Illustrator.

AVX Design Letter Logo Template (AI & EPS)Modern and organic, this geometric logo template leaves audiences with the impression of stability and friendliness. It’s a great choice for brands that have a visual identity rooted in organic imaging, particularly technology and marketing businesses. The logo comes with color variations, and you can customize it in Illustrator.

Geometry is never wrong. If minds like Paul Rand, Johannes Kepler, and even Plato are to be trusted. (And we trust them.) Geometry radiates brilliance, knowledge, and security. If you have clients that want to embody the same values, they’ll love the beautiful logos you can prepare for them.

And thanks to these geometric logo templates, you don’t even have to spend dozens of hours coming up with the right idea. Instead, pick the right template, customize it for your clients, and you’ll be good to go!

Combine the geometric shapes with bold colors or interesting color palettes that reinforce your chosen shape’s meaning. Your clients will love it – their brands will rise and remain in the front of their customers’ minds. And with these template designs, you’ll have plenty of loyal and happy customers!

The post The 20 Best Templates for Creating Geometric Logos appeared first on Speckyboy Design Magazine.

View Details

Ultimate ChatGPT cheatsheet for UX UI Designers – A set of prompts to help improve your workflow.

Better Responsive Design With CSS clamp() – Learn how to produce more efficient styles using this handy function.

OpenAI Extends ChatGPT with Plugins, Including a Browser – A look at some compelling new plugins added to the artificial intelligence tool.

Laying Out a Print Book With CSS – One designer’s unusual method for creating a print layout.

Cyberpunk inspired Three.js Scene with JavaScript and Blender – Follow along as this tutorial demonstrates a vibrant Cyberpunk scene.

How Efficiency Makes You a Better Designer – Ideas for saving time and getting more done.

The End of Front-End Development – Why AI won’t be replacing humans anytime soon.

What Does this Code do? – Paste a code snippet into this tool and it will explain how it works.

5 Common Tasks That ChatGPT Can Perform for Web Developers – You might be surprised at some of the time-saving tasks AI can tackle.

Float UI – A free and open-source collection of UI components.

Some Cross-Browser DevTools Features You Might Not Know – A few lesser-known things you can do with your browser’s developer tools.

10 CSS & JavaScript Snippets for Creating Text Distortion Effects – Get inspired by this collection of incredible text effects.

Visual Design Rules You Can Safely Follow Every Time – A handy list of tried-and-true design techniques.

5 Levels of Using CSS Variables – Tips for implementing CSS variables into your designs.

GradientSpace – Create a CSS gradient using this browser-based tool.

CSS-only Widgets Are Inaccessible – Examples that demonstrate how to improve the accessibility of interactive widgets.

Navigating the New Era of AI-Assisted Code Generation in WordPress – A look at the growing concerns of code quality and ensuring GPL compatibility.

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

View Details

To many web professionals, freelancing means freedom. The freedom to work on what you please, when you please. It seems to be the perfect career path for this on-demand world.

However, being on your own does have some downsides. Solo entrepreneurs don’t have the same benefits and protections as employees. And it often leaves us at a disadvantage.

We don’t have a legal department to make sure that everybody plays by the rules. They help to set policies, ensure compliance, and defend company interests when needed.

Clients know this. And a particularly unscrupulous one will take full advantage.

There are several ways that clients can mistreat you. Let’s explore four of the more common transgressions, along with ways to combat them.

Refusal to Pay the Agreed Upon PriceThere are many reasons why a client doesn’t pay. Sometimes, it’s a financial hardship. But there are also situations where someone simply strings you along. They may see it as a way to gain leverage.

If you’ve been in business for a while, you’ve most likely run into this type of person. They’ll try to get even more work out of you while continuing to pay you nothing (or next to it).

Sure, you likely have some legal recourse. But it’s not necessarily cost-effective unless you are owed a large sum of money. Paying for a collection agency, lawyer, or court costs may negate any benefit you might receive. Not to mention all the wasted time in going through this process.

And this is exactly why someone will expect to get away with such behavior. They know it’s not worth your while to seek justice.

Fight Back!
Always work with a contract that sets clear payment guidelines. This can act as a deterrent, as a client knows that they won’t have a solid defense in court.

And do some research on a person before you start working with them. It won’t necessarily weed out every scofflaw. But you’ll at least have a chance to look for obvious red flags.

Expecting You to Work After HoursJust because you can work nights and weekends doesn’t mean that you necessarily want to. After all, there’s only so much you can do before you risk burning out.

It seems that there is an unhealthy perception of freelancers. As if we sit around in loungewear, working at all odd hours of the night. This is especially the case if you work from home (if I had a dollar for every time someone has brought that up to me).

Most clients are realistic and won’t expect you to be available 24/7. But some don’t respect your time. They assume you’ll jump at the chance to please them.

There have been instances where clients have expected me to take phone calls after hours. Some have been peeved that I didn’t immediately respond to a message on a Saturday night.

Yet I seriously doubt they’d do the same if working with a large agency. They may be overestimating their value.

Fight Back!
You must set expectations and boundaries in a client relationship. For example, performing tasks for a client after hours will lead them to assume it’s normal. They may simply expect you to be available.

So, instead of blindly obeying all after-hours demands on your time, set some rules. If you reply, say that you’ll be happy to take care of their request the next business day. You can also offer to do the work – but at a significantly higher rate. Or, just ignore the message until you get back into the office.

The key is to make sure that you take charge of the situation.

Repeatedly Wasting Your TimeA client may also assume that you have loads of free time. Anyone who hangs out in their pajamas all day must be looking for something to do, right?

Thus, they assume that it’s no big deal to call you whenever they have “a thought” about something. And they’ll want you to attend seemingly-pointless meetings or conference calls whenever another “thought” occurs to them.

This can be stressful for solo freelancers. Every interruption takes you away from the items on your to-do list. That places an even heavier burden on your shoulders about getting things done.

Fight Back!
Clients who routinely take up your precious time need to be (gently) put in their place. Tell them that your schedule is packed. In addition, mention that it might be more efficient to limit things to a single discussion (weekly, monthly, or, better yet, centennially – sorry, I kid).

Adding structure to your relationship is vital. Once a client understands this, they are more likely to respect your time.

Being Left Out of Relevant DiscussionsAs a freelancer, you shouldn’t expect to be the main decision-maker. But you should have a seat at the table when relevant discussions are being had. You were hired in part for your expertise. The key moments within a project are when you’re needed the most.

Unfortunately, not all clients see you as a stakeholder. Instead, freelancers are merely “hired help” and not much more. This can hurt the project. It could lead a client to make decisions that aren’t based on solid ground.

These situations can make a freelancer feel out of the loop. It’s hardly a great motivator for getting things done.

Fight Back!
First, realize that it’s okay to call out a bad decision. This should be done tactfully and honestly. Explain why you feel that a decision isn’t necessarily the right one.

It’s also worth mentioning that you’d like to be involved in the discussion. Explain that it will help you get a better sense of the project’s needs. Hopefully, such a request will help a client see the value of your opinion. If not, at least you tried.

Don’t Let It Happen to YouFreelancing allows you to work with different people. Each has a unique personality. Most people will treat you fairly. But some will try and take advantage of your “non-employee” status.

The best way to combat or avoid these situations is by being assertive. Make your policies clear both verbally and in writing. This lets others know that you’re a serious professional and should be treated as such.

This can be difficult, especially when you’re starting in the business world. It takes a lot of practice. But eventually, you’ll be able to stand your ground.

This will make it more difficult for clients to take advantage of you. Even better is the sense of confidence you’ll feel – no matter what you’re up against.

The post The Four Ways That Freelancers Are Mistreated appeared first on Speckyboy Design Magazine.

View Details

Today, we’d like to highlight the repelling effect – a unique trend in web design that’s both repulsive and attractive at the same time.

By pushing elements in various directions or blowing them away encourages users to interact with the page and explore its details. Despite its seemingly off-putting behavior, it’s an incredibly engaging feature that can make the user experience more exciting.

We’ve curated a collection of inspiring demos complete with code snippets to showcase this trend. These examples will allow you to see firsthand the beauty and intrigue of the repelling effect.

More CSS Effects Snippets* Border Effects * Cursor Effects * Flame Effects * Glassmorphism Effects * Halftone Effects * Liquid Effects * Metallic Effects * Neumorphic Effects * Neon Effects * Noise Effects * Pattern Effects * Parallax Effects * Pixelated Effects * Scroll Effects * Shadow Effects * Skeuomorphic Effects * Transition Effects Repelling Lines by Daniel VelasquezThis first repelling effect example is reminiscent of a set of guitar strings. At first glance, the lines appear static, but as soon as you move your cursor over them, something magical happens. The lines start to bend and deform, eventually forming a small sphere.

The options panel on the right-hand side of the screen gives you complete control over the effect. You can adjust the radius of the mouse range, add or reduce the number of lines, or change the distance between the strings—a truly impressive and realistic simulation.

See the Pen Repelling Lines by Daniel Velasquez

30,000 Particles by Justin WindleJustin Windle’s example is a breathtaking example of the repelling effect applied to thousands of dots. The densely packed particles react dynamically to your mouse cursor, frantically scattering away as you hover over them.

Despite their frantic movement, the mouse range holds the dots in place, resulting in a large, hollow circle. This stunning and interactive display is a testament to the popularity of the repelling effect in modern web design.

See the Pen 30,000 Particles by Justin Windle

Interactive Particle Logo by Tamino MartiniusIf a simple rectangular frame isn’t enough to inspire your creativity, take a cue from Tamino Martinius’ Interactive Particles project. In this mesmerizing demo, every letter of the word is constructed from hundreds of dots that can be blown away with your mouse cursor.

The project has controls where you can change the parameters of the demo and adjust it to your liking. This pen is a prime example of how the repelling effect can be used in creative ways.

See the Pen Interactive Particle Logo by Tamino Martinius

Text to Particles by Louis HoebregtsLouis Hoebregts’ Text to Particles project is an excellent example of how color and size can add liveliness to the repelling effect. Unlike Tamino Martinius’ solution above, the dots in this project have varying radii and colors, making for a visually striking display.

You can even change the text by setting it using the input, allowing you to experiment with different phrases and words. The mouse cursor’s gentle behavior disperses the crowd, leading to a small but satisfying disturbance in the playground.

See the Pen Text to particles by Louis Hoebregts

Balls & Gravity by Marco Dell’AnnaThe repelling effect can be combined with other physics-based solutions to create outstanding results, as exemplified in the Balls and Gravity project.

Gravity and the repelling effect are the central concepts behind this mesmerizing demo. In the demo, you must grab the circle and use it to push the other circles away, almost like a game of billiards. Each colorful flat ball reacts to your movements, creating an engaging and interactive experience.

See the Pen BALLS&GRAVITY by Marco Dell’Anna

Attractor with MatterJS by Marco Dell’AnnaWhat’s unique about this project is that even though the particles move away from their original position, they always strive to return to the circle, creating a fascinating visual effect. The mouse cursor plays the dual role of a magnet, attracting particles back to the circle and a tool for pushing the dots away, at least temporarily.

This project is a prime example of how the repelling effect can be used in conjunction with other physics-based concepts, resulting in stunning displays that capture the imagination.

See the Pen Attractor – MatterJS by Marco Dell’Anna

Repellers Project by Rein van der WoerdThe repelling effect is not just limited to particle and physics-based solutions. It can also be used to create stunning text effects, as demonstrated in this example, where a word is constructed from short, thin lines that are directed toward the viewer, creating a sense of depth and volume.

As you grab your mouse cursor and drag it across the text, the lines begin to dance and move in response to your movements.

The lines’ behavior is smooth and visually pleasing, creating a stunning effect that enhances the sharp and acute nature of the text. In addition, the lines move on their own, creating a sensation of a gentle breeze that sways parts of the demo.

See the Pen Repellers by Rein van der Woerd

Despite its purpose of pushing details away, the repelling effect is undeniably magnetic. Its playful behavior immediately catches the eye and encourages interaction with the scene.

The repelling effect is not alone in its quest to capture the audience’s attention. When combined with other types of animations and effects, it can result in unique and attention-grabbing solutions.

The possibilities are endless, and web designers can use the repelling effect as a powerful tool to enhance the user experience and create captivating web pages.

The post Code Snippets That Demonstrate the Repelling Effect in Web Design appeared first on Speckyboy Design Magazine.

View Details

Freelance web designers have a lot of responsibility. It goes beyond building beautiful and functional websites. We must also think about things like accessibility, performance, and security. Not to mention the challenge of keeping clients happy.

Because we juggle so many moving parts, we tend to take on more than we should. That often includes items that would be best handled by clients.

Sometimes we do so for the sake of convenience. Or it might be that a client is uncomfortable with a particular task. But it’s a potentially risky situation.

For one thing, what happens if you and your client are no longer working together? And what if something goes wrong? You could be left dealing with a major mess.

With that in mind, let’s take a look at where your responsibilities end and a client’s job begins. We’ll review some common areas that they should manage themselves.

Domain Name ManagementFor some clients, interest in domain names is limited. They may be excited to register a new one. But after that, it’s out of sight and out of mind.

Many web designers, meanwhile, will be happy to register new domains for their clients. This isn’t necessarily a bad thing. But if care isn’t taken, it could cause problems down the road.

It’s all too easy for a domain to fall through the cracks. And if your relationship dissolves or something happens to you, things can get worse. This is particularly so when a client doesn’t have access to the registrar’s account.

In that case, a domain could expire and eventually return to the open market. Or your client may be unable to make a required DNS change. Either scenario could lead to an inaccessible website.

To prevent this type of situation:

Domains should be registered in the client’s name (it’s OK if you’re listed as the technical contact);
Clients should have an account with the domain registrar and have a payment method on file;

Being proactive in this area is highly recommended. It may just save everyone from future frustration.

Software Licensing and SubscriptionsThese days, a typical website will likely use third-party software. Content management systems (CMS), themes, and plugins are common examples. But it may also extend to desktop/mobile apps, fonts, and stock photography.

For sites that use commercial products, there will usually be licenses associated with them. Some may require a one-off purchase for lifetime access. But yearly subscriptions have increasingly become the norm.

Web designers will often purchase software and bill clients for it later. Similarly, you may even handle the yearly subscription renewals. This presents a scenario like that of domain names. If a client loses access, it could have a negative impact on their website.

Plus, if you’re a freelancer with multiple clients, license management can be messy. Subscriptions renew at various times of the year. And then there’s the waiting that comes with paying now and invoicing clients later.

That’s why it’s beneficial to put clients in charge of any software and subscriptions their website requires. It’s one less thing you’ll have to deal with. And it also gives clients the peace of mind that they’ll have unfettered access to these items.

Email AccountsIf you offer web hosting to clients, email may be part of the package. And while it may seem like a nice perk, it also has the potential to become a burden.

Perhaps it’s fine when everything is working correctly. But problems can require immediate attention. And they aren’t always easy to fix.

Issues like overzealous spam filters and inaccessible servers are common. They also fall within the responsibility of the hosting provider. This means you’ll likely be caught in the middle. You can’t fix it yourself, but your client will expect you to provide answers.

Therefore, clients that rely on email should invest in a dedicated service. Companies like Google and Microsoft offer affordable solutions. They allow clients to fully manage their accounts. And, most importantly, they provide support.

This takes you off the hook for any problems that arise. You’ll also avoid those unexpected phone calls that take you away from more important matters.

Help Clients Stay Accountable for Critical ServicesBeing a “full-service” web designer can be a great thing. It can help you build positive client relationships. You may even book new projects via word-of-mouth. Still, it’s important to draw a line when it comes to what you manage for them.

Sometimes, taking responsibility for certain things can put both parties at risk. The rule of thumb here is to avoid responsibility for anything critical to a client’s organization.

Domains, software licensing, and email all fall into this category. Each can outlive a singular person or relationship. Thus, clients need to have full control of these items.

That doesn’t mean you can’t help with related tasks. It just means that you shouldn’t be the only one with access. And the accounts shouldn’t be in your name.

Clients – even those that aren’t tech-savvy – must oversee these key components. Doing so will put everyone in the best position for long-term success.

The post Things Your Web Design Clients Should Manage Themselves appeared first on Speckyboy Design Magazine.

View Details

Metallic effects are both attractive and flexible. They’re often used to create an industrial or high-tech aesthetic. They work great as backgrounds, yet can also make even the tiniest elements stand out. Everyone from manufacturers to sci-fi bloggers can benefit.

Traditionally, these effects required complex images. This could result in slower page load times.

But that’s no longer the case. These days, some well-crafted CSS and JavaScript can do the job. It’s now possible to create beautiful metallic effects with minimal use of images.

Curious about what’s possible? We’ve put together a collection of code snippets that demonstrate how far these tools have come – enjoy!

More CSS Effects Snippets* Border Effects * Cursor Effects * Flame Effects * Glassmorphism Effects * Halftone Effects * Liquid Effects * Neumorphic Effects * Neon Effects * Noise Effects * Pattern Effects * Parallax Effects * Pixelated Effects * Repelling Effects * Scroll Effects * Shadow Effects * Skeuomorphic Effects * Transition Effects Metallic Bordered Text with CSS by Shireen TajThis text sports an incredible gold border effect. Using a combination of CSS gradients, filters, and transforms, the look is razor-sharp. CSS Grid is used to stack the foreground and background layers. The best part is that there are no images in sight.

See the Pen Metallic Bordered Text with CSS by Shireen Taj

Rounded Box Matcap Texture by Victor VergaraHere’s a 3D presentation with an otherworldly vibe. It does use images – but in an incredibly clever way. Take the metal box, for example. Stock photos have been superimposed onto the object to add texture. The whole thing is also interactive, as you can drag to rotate and change your perspective.

See the Pen Rounded Box – Matcap texture by Victor Vergara

Coffee Mug in CSS by Alvaro MontoroThe ability to create lifelike objects using CSS is impressive. This coffee mug is a prime example – right down to the metallic band at the top. The brushed look was built using a combination of gradients.

See the Pen Coffee Mug in CSS by Alvaro Montoro

Metal Olympic Rings in Pure CSS by JosetxuThis Olympic-inspired animation lets you change the color of the iconic rings. Click on a gold, silver, or bronze medal (built with HTML radio buttons) and the rings update accordingly. There’s quite a bit of CSS at work here – but no JavaScript.

See the Pen Metal Olympic Rings – Pure CSS by Josetxu

Thor StormBraker with Pure CSS by ManzMetallic effects don’t always need to be realistic. There’s also value in more cartoonish looks – like this axe. Inspired by the Thor comic series, the texture has a decided clipart feel. It’s a great example of how designers can leverage CSS to create a low-tech feel.

See the Pen Thor StormBraker with Pure CSS by Manz

Metal & Fire SVG FX by David RogersThe classic combination of metal and fire is on full display here. This medieval presentation features glowing, animated text and rapidly rising sparks. Taken together, the scene does a great job of creating a mood.

See the Pen Metal and Fire SVG FX by David Rogers

Procedural Newton’s Cradle by Brandel ZachernukNewton’s cradle seems to be a staple of office décor. But if you don’t have room for one on your desk, this slick snippet is a great alternative. Powered by JavaScript, these metallic 3D balls are an excellent facsimile of the real thing. You can also drag the model to change the perspective.

See the Pen Procedural Newton’s Cradle by Brandel Zachernuk

Metallic Badges with Angular Pseudo-Gradients by Ellesa SabasajeWe see a lot of metallic buttons in the real world – think appliances and automobiles. Thus, they are a natural fit for recreating these effects online. This collection of badges offers faithful reproductions using pure CSS.

See the Pen Metallic Badges with Angular Pseudo-Gradients by Ellesa Sabasaje

Add Some Heavy Metal to Your ProjectsThe above snippets use metallic effects in ways both bold and subtle. But either way, they bring depth and detail to design elements. They’re capable of being the main attraction or finishing touch.

However you use them, the look is sure to draw attention. And modern development practices make them easier than ever to implement.

Want to see even more metallic masterpieces? Then be sure to check out our CodePen collection!

The post 8 Amazing Metallic Effects Built With CSS and JavaScript appeared first on Speckyboy Design Magazine.

View Details

How Blogs Shaped the Web – A look back at the early days of blogging and how it impacted the online world.

Fullscreen Clip Animation – Explore clip-path animations where a fullscreen image moves into a row/grid of smaller images, morphing its shape along the way.

Modern Font Stacks – System font stack CSS organized by typeface classification for every modern OS.

Jumping Through Hoops for Prospective Web Design Clients – What to do when someone pushes boundaries before becoming a client.

CSS Nesting – Check out this time-saving feature now built into CSS.

Shapes App – A copy-and-paste library of SVG shapes.

Make Bookmarklets – Use this tool to build tiny JavaScript applications stored in a bookmark URL.

Why Is Microsoft Edge Adding Its Own UI to Websites? – How the Visual Search tool is augmenting the look and functionality of websites.

What Leonardo Da Vinci Can Teach Us About Web Design – How the artists’ methods and outlooks still apply today.

6 CSS Snippets Every Front-end Developer Should Know in 2023 – Handy snippets for creating modern layouts.

30 Tutorials for Creating Stunning Photo Effects in Photoshop – Learn to make your photos stand out using these helpful resources.

Shantell Sans – This marker-style font is built for creative expression, typographic play, and animation.

Extra Thicc Icon Set – Download this free set of 300 vector icons.

Why Losing a Client Can Be a Positive for Your Business – Seeing a client go may open you up to new opportunities.

The Role of X-Height in Typefaces – Take a deeper look into how character height impacts readability.

One Problem That is Now Solved by CSS Subgrid – How to use CSS Subgrid to solve the problem around aligning content in different columns.

State of WordPress Security In 2022 – Get the details behind exploits, reported bugs, and more.

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

View Details

I’m a big fan of efficiency. That doesn’t necessarily make me a hit at parties. But it does help me get through a workday with a sense of accomplishment. And it allows me to focus on the more enjoyable aspects of web design.

The good news is that there are plenty of opportunities to create and improve efficiency. Virtually every part of the design process can be tweaked and refined. But they’re not always easy to spot.

You could go years without knowing they’re there, waiting for you to take advantage. But once you find them, you’ll get more done in less time. And those efficiencies can also reduce stress. That frees your mind and inspires creativity.

But where do you start? And what are the “right” areas to be efficient? Here are a few ideas to kickstart the process.

Find Little Things That Can Add UpThe next time you start a new design project, think about your workflow. Create a list of each step you take along the way. For me, it looks something like this:

Gather project requirements;
Determine the best solution;
Design a prototype/mockup;
Make revisions until the mockup is approved;
Build the product;
Test and make any final revisions;
Launch!

Each step above can be made more efficient. For example, gathering project requirements isn’t always a smooth process. Oftentimes there are information gaps, contradictions, and other vagaries that can slow things down.

To speed things up and increase accuracy, you might create an online questionnaire that asks all the important questions. Once you have the answers, you can follow up and clarify your client’s needs.

When we’re juggling multiple responsibilities, the small details tend to slip our minds. Thus, finding ways to automate or strengthen the process can help. Do this for each step and you’ve saved untold time and energy.

Build Templates and Libraries for Quick AccessWeb designers often find themselves with repetitive tasks. That could involve anything from building prototypes to writing code, or accessibility testing. This is an area ripe for building efficiency.

Templates and web components can be a huge help in enabling progress without hurting originality. A basic set of HTML templates or Figma UI kits can provide a quick starting point for a design.

Meanwhile, a WordPress starter theme can be beneficial when you’re ready to move from concept to production. It doesn’t have to be anything fancy. Rather, something that can serve as a “skeleton” for you to build on top of.

When it comes to coding, a snippet library provides quick access to common functionality. For instance, I keep a file of PHP, JavaScript, and CSS that I frequently use. Having everything I need in one spot means not having to reinvent the wheel. A tool like GitHub is perfect for this type of repository.

Simplify or Outsource Non-Design TasksSometimes your to-do list will include items not related to design. This is especially frustrating for freelancers. Playing the roles of both the creative talent and business manager can leave you with little free time.

Billing is an area that can always be made leaner. For instance, I realized that my billing scheme was too complicated. I was spending more time than I wanted on sending out monthly invoices (often for very small amounts of money).

My solution? I started offering yearly packages hoping that it would be more convenient. As it turns out, several clients have signed up. I now spend a fraction of the time on invoicing each month.

However, there are times when we simply can’t bring these tasks to a more reasonable level. Or we may just get tired of having to do them at all.

This is where you might consider enlisting the services of another professional. Much depends on your specific needs and budget. But having someone you can trust to carry out these tasks can help you focus on what you do best.

Take a Serious Look at Your ServicesWhile business-related tasks can be a burden, so can the services you offer. Therefore, it’s worth reviewing the types of projects you accept. From there, you can determine what is and isn’t working.

Let’s say, for example, that you tend to work with a lot of small clients. Crunch the numbers and see if your revenue matches the effort you’re putting forth.

Sometimes smaller projects end up taking too much time and destroying profits. You may find that it’s costing you a chance at more lucrative opportunities.

Review what you offer to clients and think about the benefits they provide. If something isn’t worth the effort, you can either rework it (by increasing the price) or drop it altogether.

Become a More Efficient Web DesignerWhen starting as a web designer, it’s easy to add a task or process here and there until things get out of control. That’s understandable. After all, we don’t often consider the long-term consequences.

Incorporating efficiency often comes later, after you begin to see the real-world impacts. Thankfully you can make changes.

So, take a close look at what you’re doing. Then create a list of ways to make it work better for you. You might be amazed at the amount of time you’ll get back.

The post How Efficiency Makes You a Better Designer appeared first on Speckyboy Design Magazine.

View Details

With so many mobile devices on the market, we’re flooded with viewport sizes. That makes it especially challenging to design a fully-responsive website.

CSS media queries have long been the go-to tool. But it’s getting more difficult to account for evolving screen resolutions. If a device fails to match the viewport range you’ve set, the results can be less than ideal.

That’s where CSS clamp() can make a positive impact. It doesn’t rely on predefined viewport sizes. Instead, it provides a range of values and allows the web browser to scale an element as needed.

clamp() doesn’t necessarily replace the need for media queries. But it may well reduce the number of styles we place within them.

The following are basic examples of how clamp() can be used to produce better responsive designs. Let’s get started!

What Is CSS clamp()?The concept of clamp() can be a bit confusing. But stripped down to the basics, it provides a way to combine the min() and max() functions into a singular line.

So, before we go any further, it’s important to note that clamp() is a means of setting a minimum and maximum value for an element. That could be text, the sizing of a container, or just about anything else that needs to be responsive.

A typical line could look something like this:

font-size: clamp(**1.125rem**, 2vw, **1.5rem**);

Note the first and last values. In this case, 1.125rem is the minimum value, while 1.5rem serves as the maximum.

Still with us? Great! Now, about that rascal in the middle…

The middle number above (2vw) is our preferred value. MDN defines it as: “The preferred value is the expression whose value will be used as long as the result is between the minimum and maximum values.”

As such, we can think of it as the border between two countries. Move to the left, and you’re in Portugal, where the minimum value applies. Go to the right, and you’re in Spain, where the maximum will be used.

The preferred value can be a constant number or a mathematical expression. This allows for fine-grain control over how it’s calculated.

But back to our example. Taking a cue from MDN’s documentation, our font size will initially be set at 1.125rem.

However, once our preferred value of 2vw is greater than 1.125rem, our text will scale up to the maximum of 1.5rem.

In practice, small screens will see the minimum value, while big screens get the maximum. The preferred value merely sets the threshold.

A Few Basic Examples of clamp()Now that we know a bit more about what clamp() does, let’s take a look at it in action. The following are examples that demonstrate the function’s basic capabilities.

Fluid Typography That Adjusts to Screen SizeCreating responsive styles for text can get complicated. Staying with the desktop sizing may look overwhelming on mobile. But applying new sizing for each CSS media query means more maintenance. And getting the scaling just right can be a pain.

Thankfully, fluid typography is an area where CSS clamp() excels. The function allows text to scale based on the parameters you’ve set. Best of all, a single line of code replaces what used to require multiple instances.

Here, we’ve set our body and h2 text to scale based on the viewport. Large viewports will see bigger fonts. Meanwhile, the text shrinks accordingly on smaller screens.

Our body text will display between the defined minimum and maximum sizes (1.125rem – 1.5rem, or 18px – 24px). The h2 text has a min/max of 2rem – 2.75rem (32px – 44px).

See the Pen CSS clamp() Demo – Heading & Body Text by Eric Karkovack

A Container That Adjusts for Large ViewportsWhen dealing with responsive containers, we can’t forget about large screens. 1080p (1920×1080) is now serving as something of a minimum resolution for desktop and laptop devices. Thus, it’s important to consider how layouts impact these users.

A container that stretches the full width of the viewport can be cumbersome – particularly if it includes text. Having too many characters per line makes the text harder to read on large screens. Whereas this configuration is more desirable on mobile.

This example uses clamp() to improve the user experience across viewports. Small screens, where our maximum value of 90vw is greater than our 1100px preferred value, will receive a wide container.

On large screens, the container will display at its preferred value. This should make for easier reading.

Also of note is our minimum value of 40vw. It only comes into play on exceptionally large viewports. The value could be increased if you want to see it triggered sooner.

See the Pen CSS clamp() Demo – Container Width by Eric Karkovack

clamp() Down on Your Responsive StylesAs CSS evolves, it provides us with more advanced tools. They often increase efficiency and push more of the “dirty work” to browsers. clamp() certainly fits this mold.

In this case, it means having less code to maintain. By reducing the number of styles we place into media queries, clamp() makes our job easier. In addition, it keeps our designs looking good across devices – even those with unique viewports.

Best of all, it’s supported in all modern browsers. Therefore, it’s something you can immediately add to your workflow.

To learn more, please check out the resources below!

Further CSS clamp() Resources* clamp() by MDN * min(), max(), and clamp() CSS Functions by Ahmad Shadeed * min(), max(), and clamp(): three logical CSS functions to use today by Una Kravets * Intrinsic design, theming, and rethinking how to design with WordPress by Justin Tadlock * Modern Fluid Typography Using CSS Clamp by Adrian Bece

The post Better Responsive Design With CSS clamp() appeared first on Speckyboy Design Magazine.

View Details

Every web developer has tasks they’d rather avoid. Or ones that simply take up too much time. Quite often, they’re little things that get in the way of more important work.

You could hire someone to help with these tasks. But that can be cost-prohibitive – not to mention inefficient. And there’s also the challenge of finding someone who is reliable.

This is where the advent of artificial intelligence (AI) tools like ChatGPT comes into play. While they can’t do everything for us, they can make quick work of common tasks. That leaves you with more time to focus on other aspects of your projects.

Today, we’ll look at a few common tasks that ChatGPT can perform for web developers. You might be surprised at some of its capabilities.

Create a Regular Expression Based on Your InstructionsThe logic and syntax of regular expressions (regex) can be difficult to grasp. So much that you may cringe at the idea of having to write one. We hear you!

On the other hand, regex can be quite powerful. It can be used to find matching data in even the most complicated text strings. If you’re writing code, you’ll eventually need one.

Based on our experiments, ChatGPT is surprisingly good at creating regular expressions. We asked it to write an expression that could find a unique ID within a URL. With just a few basic parameters in our prompt, the tool immediately produced the code and explained how it works.

If you use AI for nothing else in your life, this may be the one task worth trying. It could save your sanity.

Write a Basic WordPress PluginSometimes, the hardest part of writing a custom WordPress plugin is getting started. Trying to include “all the things” at once can lead to frustration. And working within the various APIs WordPress offers can be confusing.

ChatGPT can help. No, it won’t write you a fully-fledged WooCommerce competitor. But it can help get you pointed in the right direction.

For example, you might use it to create a basic plugin. And the tool can also help you add features as you think of them. ChatGPT remembers your “conversations” and lets you go back to them at any time.

A good start is crucial. AI can take care of the initial dirty work. Once you have a solid foundation for your plugin, the sky’s the limit.

Summarize a Blog Post for SEOAdding a meta description for website content is good practice. It can have a positive impact on search engine optimization (SEO). Plus, it helps readers understand the subject matter when browsing a search results page (SERP).

But writing these summaries can be a pain. Particularly if the content was written by your client. You’ll have to read it whether you’re interested or not. And then you’ll need to write a description in 155 characters or less.

Why not ask ChatGPT? Provide it with the URL and ask for a character-limited summary. In a few seconds, you’ll have a good starting point.

Sure, you may need to fine-tune some of the wording. But that’s still faster and easier than doing it all yourself.

One side benefit: if you’re using WordPress, you can also use the generated text as an excerpt.

Troubleshoot a Buggy Code SnippetIt’s easy to get frustrated while debugging code. You could spend hours trying to figure out why a snippet isn’t working. And even the tiniest syntax error can be the culprit. There are better ways to spend an afternoon (or evening).

Modern development tools can point out errors. Or they’re effective at telling you there’s an error – they don’t always give specifics.

Before you reach your wit’s end, give ChatGPT a try. It’s capable of spotting those pesky syntax issues. If the tool is feeling especially generous, it may provide you with a corrected version.

In our testing, the tool was able to identify errors in both JavaScript and PHP snippets. And it took mere seconds.

This doesn’t guarantee that you’ll be able to fix every issue. But it’s worth the time to see if AI can be of help.

Find the Right Tool for Your ProjectResearching tools for development projects can be time-consuming. Plus, depending on the functionality you need; it’s not always easy to find a great match.

Thankfully you can use AI as a trusted consultant. Ask ChatGPT to recommend ways to build a specific type of website and it may have just the solution.

For example, asking: “What WordPress plugin can I use to build an online course?” produces a handful of results. It doesn’t tell you which one is the best, but is there to provide options. From there, you can take a closer look.

At the very least, it could lead you to a tool you hadn’t considered. You might also save a bit of time searching the web.

Take Advantage of What AI Can Do for Your WorkflowTwo things can benefit every web developer: a helping hand and more time. AI, and ChatGPT in particular, can provide a bit of both.

And we’re just starting to scratch the surface of what’s possible (for better or worse). These tools won’t take over your job during a vacation, but they can help you get things done quicker.

The items above are examples of how AI can turn your workflow into a well-oiled machine. It’s especially handy for those who work in a fast-paced environment. Because the last thing we need is to get bogged down with a menial task.

It seems like developers are finding new ways to leverage the power of AI daily. Therefore, feel free to experiment. Think of tasks that get in your way and see if this new technology can help. It could result in crossing more things off of your to-do list.

The post 5 Common Tasks That ChatGPT Can Perform for Web Developers appeared first on Speckyboy Design Magazine.

View Details

Type Design Resources – Tips for everything from learning the basics to running your own foundry.

Creating a Clock with the New CSS sin() and cos() Trigonometry Functions – Math nerds will want to explore the potential of these additions to CSS.

2023 Web Framework Performance Report – Comparing the real-world performance of popular frameworks.

How to Improve Client Email Communication for Web Designers – Make the most out of the medium and get on the same page with clients.

How AI Technology Will Transform Design – Answers to common questions and practical tips on how designers can make the most of using AI tools.

Relative Rounded Corners – This tutorial will show you how to match the border radius of nested elements.

Free Brochure Templates for Adobe InDesign – Explore a wide variety of templates suitable for a range of businesses and projects.

Atomize 3.0 – This design system for Figma includes 150+ styles and 3,000+ components.

Regenerative UX – A look at the future of UX and its role in tech.

HorizonUI – Check out this dashboard template for Chakra UI, React, NextJS, Tailwind CSS, and Figma.

How to Plan a Redesign of a WordPress Multisite Network – Learn to plan for the unique challenges presented by WordPress multisite.

Frontender – A Figma plugin that writes front-end code for you.

Lemmony WordPress Block Theme with 30+ Patterns – Get your project off to a quick start with this free block theme.

Simple Ways to Make Content Look Good – Tips for dressing up basic textual content.

Making the Most of Slow Times at Your Web Design Business – A slow day may be the perfect opportunity to learn (or relax).

The Anatomy of a Good Design – An examination of what it takes to build a well-designed website.

AI Generated Git Commit Messages – How an AI tool can help you with version control.

An End to Typographic Widows on the Web – Discover the new text-wrap:balance CSS declaration and what it means for typography.

Digging into the WordPress Block Protocol Plugin – A new plugin that uses platform-agnostic blocks.

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

View Details

Booking new clients for your web design business is challenging. First, you have to find someone interested in your services. Then it’s a matter of hammering out an agreement so that you can start your journey together.

This sounds easy. But the process can feel like being in a reality show competition. Once in a while, you’ll run into a prospective client who plays the part of the sly host. They’ll test your limits by asking all sorts of philosophical questions and assorted odd requests.

Frankly, it’s a bit unnerving. Sometimes it can feel belittling. You’re trying to land a new client but have to endure the third degree. You might start to wonder if you’ll ever just get to the project.

How much of this must you tolerate? Where do you finally draw the line and say, “Thanks, but no thanks…”?

This is a subject with a lot of gray areas. But to help you decide, we’ll dive right into the heart of the matter. Let’s get started!

Are They Hiring a Web Designer or Performing a Background Check?First, let’s get the obvious out of the way: prospective clients have a right to ask questions. It’s their time, money, and reputation on the line. Thus, a designer should always be prepared to answer.

Still, it is very possible to go too far. For instance, being asked if you’re available 24/7. Really? We’re web designers, not all-night donut shops. Many of us have set hours, just like other businesses. If a client wants that type of availability, they’d better be prepared to pay handsomely for it.

Sometimes it’s not just the questions they ask – it’s what they imply. Some people think web design isn’t a serious profession. Their queries sound like something you’d ask an untrustworthy teenager in a job interview.

After 20+ years in the industry, I still run into this every so often. It makes me think back to landing my first gig in the 1990s. Back then, the web was a new concept to mainstream businesses. Whether it’s misunderstanding or mistrust, it can be a bit insulting.

When you feel disrespected, take a step back. It’s certainly possible that you’re overreacting. But if that’s not the case, you’re better off walking away with your dignity intact.

Taking Advantage of Your Precious TimeGoing beyond the interrogation stage, you might also get caught up in long, drawn-out conversations with a prospect.

Again, there’s nothing inherently wrong with engaging in such banter. It can be a nice way to form a relationship. This is beneficial when working together. But that’s not always the case.

In some situations, a prospective client may (figuratively) chew your ear off to get free advice – even if they have no intention of working with you. Whether it’s constant phone calls or emails, this can quickly get out of hand.

There’s a fine line between demonstrating common courtesy and allowing someone to waste your time. If a prospect crosses that threshold, it might be wise to politely push back.

You could say, for example, that you’re happy to give advice. But to go in-depth, you’ll have to charge an hourly fee. This should get the message across.

Looking for Free or Cheap “Favors”Another approach taken by some prospects is angling for free or deeply-discounted work. And there aren’t a whole lot of benefits for web designers to play along.

Think of it this way: if someone isn’t willing to pay you what you’re worth, they’re not valuing what you do. All of your hard work, the successful portfolio, and hours of learning don’t particularly matter to them. They simply want something for nothing – or almost nothing.

Early in my career, I fell into the trap of giving away time and effort. What I learned is that the working relationship with a client tends to get stuck in a vicious cycle. They start to expect that you’ll leave money on the table to please them. And you, being fearful of losing a client, don’t want to push the envelope.

It’s important to remember that you don’t owe a prospect anything. Even if they’re friendly and complimentary of your work, it’s unlikely you’d call them an actual friend. Therefore, don’t be sweet-talked into any arrangements that won’t result in being fairly compensated.

This is among the more difficult aspects of running a business. You want to offer great service. But you also want to achieve financial independence. Even if it goes against your nature, you should still make decisions with this philosophy in mind.

Sometimes, a Web Design Project Isn’t Worth the HassleOver time, you can develop a keen eye concerning prospective clients. You’ll start to spot red flags for projects and people you want to avoid. All told, it’s about understanding the types of clients you want to work with.

One of the telling signs of a project is how you’re treated during the initial process. While perfection shouldn’t be expected, there are some basic tenets that a client should follow.

Are you being valued and respected? Is the person on the other end listening to what you have to say? Pay careful attention, as these characteristics will help you make the right decision.

The post Jumping Through Hoops for Prospective Web Design Clients appeared first on Speckyboy Design Magazine.

View Details

I’ll readily admit that I’m not a regular user of Microsoft Edge. The browser works just fine. But I’ve been a diehard fan of Firefox for years. The Chromium-based successor to Internet Explorer never gave me a compelling reason to switch.

Thus, I was greatly surprised by a recent question from a client. They wondered why, when hovering over an image on their website, a small icon appeared. Was this a new feature?

Usually, these types of issues are caused by an overzealous browser add-on. Or (gulp) maybe a malware infection. But neither of those scenarios applied here. My client noticed that it was only happening with Microsoft Edge.

Sure enough, I fired up the little-used app on my PC, and…huh? Hovering over certain images revealed a button UI. Clicking on it allowed me to conduct a Bing image search, which opened in a sidebar panel.

This seems like an audacious move. And the more I looked into this feature (dubbed Visual Search, enabled in version 95.0.1020.30), the more concerned I became. It begs the question: should web browsers be doing this?

Microsoft Visual Search is the Default OptionPerhaps the browser wars were decided long ago. After all, Google Chrome is by far the dominant app. As of this writing, it holds 65% of the market, while Edge boasts just over 4%.

With that in mind, it’s hard to blame Microsoft for trying to stand out. Plus, they have every reason to point users toward their Bing product (and away from Google). It also stands to reason that Visual Search could come in handy. But the way it has been implemented is frustrating.

Users must opt out of the feature. By default, Visual Search is enabled and will display when a user hovers over an image. It doesn’t appear to activate on every image, however.

For example, background images don’t seem to trigger the UI. And smaller images also appear to be left out (you can right-click and initiate Visual Search via a context menu – Google Chrome does something similar).

The feature is fairly simple to disable within the UI. And it can be turned off for a single site or entirely. But it’s still an extra step for users – not to mention a potential source of confusion.

Microsoft Visual Search is enabled by default. Its UI displays when hovering over an image.

Website Owners Can’t Opt OutThere are several potential reasons for a website owner to feel uncomfortable with Visual Search. For one, the UI added by the feature looks like it is simply part of the page. Users may, for example, click it expecting to open a photo gallery. Not to mention that the UI literally shows up on photo galleries as well.

When a Visual Search is initiated by the user, the ensuing results are also of concern. What if the search turns up a competitor’s product or a negative review? What if the images it displays are offensive or otherwise inappropriate?

Perhaps the most concerning issue is that websites can’t opt out. This means that website owners are stuck with the Visual Search UI being implemented – whether they want it or not.

This sort of “enhancement” is unlikely to be welcomed by everyone. And not all users are savvy enough to understand its purpose or origin.

In the end, this could lead to more questions for site owners and web designers to answer. The worst part? The situation is completely out of our control.

We visited Honda’s website and performed a Visual Search on a product photo. It returned similar images from competing products.

Where’s the Line? Did Microsoft Cross It?Hopefully, features like Visual Search will spark a productive debate. Is placing a browser-specific UI on a website acceptable?

Users need to draw a line between convenience and intrusive behavior. Visual Search may only be the beginning. Web browsers could take this concept and go even further.

What would happen if browsers start highlighting specific words within the content? Or do they add UI elements that end up breaking a website’s layout? It could be that features once reserved for browser extensions become the default. Are we OK with this?

Perhaps Microsoft is experimenting to see what we’re willing to tolerate. Here’s hoping that users make their opinions heard.

In the meantime, I’ll happily stick with Firefox – and keep recommending it to others.

The post Why Is Microsoft Edge Adding Its Own UI to Websites? appeared first on Speckyboy Design Magazine.

View Details

Photoshop is a powerful tool for creating a range of stunning photo effects that can take your images to the next level. With the help of these tutorials, you will learn how to recreate various effects, including glitch, sepia tone, watercolor, tilt-shift, HDR, cinematic, bokeh, sketch, and many more.

By mastering these techniques, you can add an artistic touch to your photos and make them truly memorable. Whether you’re a professional photographer, graphic designer, or just someone looking to enhance their photo editing skills, learning how to create these photo effects in Photoshop can be a valuable asset.

Exploring the world of Photoshops and experimenting with different photo effects can be a lot of fun. With a bit of practice and creativity, you will soon be creating stunning results that are sure to impress.

So why not start learning to recreate these photo effects in Photoshop today? With dedication and a little time, you can become a master of photo editing in Photoshop in no time.

If you prefer a different application, we also have collections of tutorials for Lightroom, Procreate, and Figma.

Table of Contents* Analog Effect * B&W Effect * Bokeh Effect * Cinematic Effect * Color Grading Effect * Comic Effect * Cross Processing Effect * Dispersion Effect * Double Exposure Effect * Duotone Effect * Glitch Effect * Grain Effect * Grunge Effect * HDR Effect * High Contrast Effect * Infrared Effect * Lens Flare Effect * Light Leak Effect * Lomo Effect * Motion Blur Effect * Oil Painting Effect * Posterize Effect * Selective Color Effect * Sepia Tone Effect * Sketch Effect * Solarize Effect * Tilt-Shift Effect * Vintage & Retro Effect * Vignette Effect * Watercolor Effect

More Photoshop Tutorials:

Top Tutorials for Mastering Photoshop
Icon Design Tutorials for Photoshop
Poster Design Tutorials for Photoshop
Product Mockups Tutorials for Photoshop
Photo Manipulation Tutorials for Photoshop
Text Effect Tutorials for Photoshop
Tutorials for Learning Design in Photoshop Analog Effect in Photoshop (Video Tutorial)The analog photography effect mimics the look and feel of old film photographs. This aesthetic can be achieved by adding grain, light leaks, and desaturated colors in Photoshop. This tutorial takes you through the steps to re-create the effect, giving your photos a nostalgic charm and artistic touch.

Analog Effect Photoshop Actions on Elements

Black & White Conversion Effect in Photoshop (Video Tutorial)The black and white photography effect is a classic style that emphasizes contrast and texture, creating a timeless and elegant look. This Photoshop video tutorial will teach you how to create stunning black and white images in Photoshop.

Black & White Effect Photoshop Actions on Elements

Bokeh Effect in Photoshop (Video Tutorial)Bokeh is a photography technique that creates a blur in the background of a photo, emphasizing the subject and adding a dreamy, romantic feel. This Photoshop tutorial will guide you through the steps to add the bokeh effect to your photos.

Bokeh Effect Photoshop Actions on Elements

Cinematic Effect in Photoshop (Video Tutorial)The cinematic photography effect is a dramatic and moody style that mimics the look and feel of movie stills, with deep shadows, rich colors, and a cinematic aspect ratio. This tutorial will show you how to re-create the cinematic effect, giving your photos a professional and cinematic flair.

Cinematic Effect Photoshop Actions on Elements

Color Grading Effect in Photoshop (Video Tutorial)Color grading involves adjusting the colors in a photo to create a specific mood or atmosphere. Using Curves and Hue/Saturation adjustments, this Photoshop tutorial takes you through the steps of adding stunning color grading effects to your photos.

Color Grading Effect Photoshop Actions on Elements

Comic Effect in Photoshop (Video Tutorial)The comic effect is a fun and playful style that mimics the look and feel of comic book illustrations, with bold outlines, vibrant colors, and halftone patterns. This Photoshop video tutorial will teach you how to create stunning comic effects, giving your photos a creative and whimsical vibe.

Comic Effect Photoshop Actions on Elements

Cross-Processing Effect in Photoshop (Video Tutorial)Cross-Processing is a photography technique that involves developing film in the wrong chemicals to create unexpected and artistic color shifts. This Photoshop tutorial will take you through the steps to add cross-processing effects to your photos, giving them a retro feel.

Cross-Processing Photoshop Actions on Elements

Dispersion Effect in Photoshop (Video Tutorial)The Dispersion effect is a creative and dynamic style that creates the illusion of a shattered or fragmented subject, with particles or fragments dispersed across the photo. This effect can be achieved in Photoshop using various tools, such as the Liquify filter and layer masks. This tutorial will show you how.

Dispersion Effect Photoshop Actions on Elements

Double Exposure Effect in Photoshop (Video Tutorial)The Double Exposure effect blends two or more images together, creating a dreamy and surreal composition. Using layer masks and blend modes, this tutorial guides you through the process of creating stunning double exposure effects in Photoshop.

Double Exposure Effect Photoshop Actions on Elements

Duotone Effect in Photoshop (Video Tutorial)The Duotone effect is a creative technique that uses two contrasting colors to create a bold and striking final image. It is often created using gradient maps, curves, and color balance in Photoshop. This tutorial will show you how to add this unique effect to your photos.

Duotone Effect Photoshop Actions on Elements

Glitch Effect in Photoshop (Video Tutorial)The Glitch effect mimics the look of digital errors and glitches, creating a distorted and fragmented image. This Photoshop video tutorial will show you how to create fantastic glitch effects, allowing you to add an edgy vibe to your photos.

Glitch Effect Photoshop Actions on Elements

Grain Effect in Photoshop (Video Tutorial)The Grain effect is a timeless technique that adds a film-like texture and grain to digital images, creating a vintage and nostalgic look. This Photoshop tutorial will take you through the steps to re-create the effect in your photos.

Grain Effect Photoshop Actions on Elements

Grunge Effect in Photoshop (Video Tutorial)The Grunge effect is an edgy style that creates a raw and distressed look in photos, often with scratches, stains, and grungy textures. This effect can be easily achieved in Photoshop, using various techniques like brushes, textures, and blend modes.

Grunge Effect Photoshop Actions on Elements

HDR Effect in Photoshop (Video Tutorial)The HDR (High Dynamic Range) photography effect is a popular technique that combines multiple exposures to create a more detailed and dynamic image. This tutorial guides you through the steps to create the HDR effect using Photoshop tools like merging and tone mapping.

HDR Effect Photoshop Actions on Elements

High Contrast Effect in Photoshop (Video Tutorial)The High Contrast effect is a striking style that emphasizes the difference between dark and light areas in a photo. Photoshop can achieve this effect using various adjustments, such as levels and curves, and this tutorial will show you how.

High Contrast Effect Photoshop Actions on Elements

Infrared Effect in Photoshop (Video Tutorial)Infrared photography is a surreal style that creates a false-color effect in photos. Using channel swapping and color balance, this Photoshop tutorial guides you through the process of re-creating the effect.

Infrared Effect Photoshop Actions on Elements

Lens Flare Effect in Photoshop (Video Tutorial)The Lens Flare effect is a dynamic technique that adds a burst of light to an image, often simulating the look of the sun or other light sources. Learn how to add lens flares to your photos in this Photoshop tutorial, giving you a dramatic and cinematic touch.

Lens Flare Effect Photoshop Overlays on Elements

Light Leak Effect in Photoshop (Video Tutorial)The light leak effect simulates the look of light leaking into a camera, creating a dreamy and, at times, nostalgic look. This easy-to-follow Photoshop tutorial will show you how to add stunning light leaks to your photos.

Light Leak Effect Photoshop Overlays on Elements

Lomo Effect in Photoshop (Video Tutorial)The Lomo (Lomography) effect is a creative photography technique that mimics the look of photos taken with a Lomo camera, with bold colors, high contrast, and vignetting. This Photoshop tutorial will guide you through creating your own Lomo effects.

Lomo Effect Photoshop Actions on Elements

Motion Blur Effect in Photoshop (Video Tutorial)The Motion Blur effect is a popular technique used to convey motion and speed by blurring moving objects. This Photoshop video tutorial will show you how to create stunning motion blur effects in your photos, adding a sense of dynamism and energy.

Motion Blur Effect Photoshop Actions on Elements

Oil Painting Effect in Photoshop (Video Tutorial)The oil painting effect is an artistic photography style that mimics oil paintings by applying filters to a photo giving it a textured, brushstroke look and feel. This Photoshop video tutorial will show you how to do it yourself.

Oil Painting Effect Photoshop Actions on Elements

Posterize Effect in Photoshop (Video Tutorial)Posterize is a photography effect that reduces the number of colors in an image, creating a bold and simplified look to create a poster-like appearance. Learn how to create stunning posterize effects in this Photoshop tutorial.

Posterize Effect Photoshop Actions on Elements

Selective Color Effect in Photoshop (Video Tutorial)The selective color effect allows you to highlight or change the colors of specific parts of an image and convert the rest to black and white (or desaturated). This Photoshop video tutorial will show you how to create your own selective color effects.

Selective Color Effect Photoshop Actions on Elements

Sepia Tone Effect in Photoshop (Video Tutorial)The sepia tone effect is a photography technique that adds a warm and vintage look to digital images, giving them an aged, antique look. This Photoshop tutorial will take you through the steps to add sepia tones to your own shots.

Sepia Tone Effect Photoshop Actions on Elements

Sketch Effect in Photoshop (Video Tutorial)The Sketch effect is an artistic technique that mimics the look of a hand-drawn sketch, with lines, strokes, and shading. Following this sketch effect Photoshop tutorial, you can add a personal touch to your photos.

Sketch Effect Photoshop Actions on Elements

Solarize Effect in Photoshop (Video Tutorial)The Solarize effect converts the colors in a photo to create a high-contrast, surreal effect. This video tutorial will show you how to add this unique and bold effect to your photos.

Solarize Effect Photoshop Actions on Elements

Tilt-Shift Effect in Photoshop (Video Tutorial)The tilt-shift effect is a creative photography style that simulates the look of a miniature world by blurring parts of an image. This easy-to-follow Photoshop tutorial will show you how to add the effect to your photos.

Tilt-Shift Effect Photoshop Actions on Elements

Vintage & Retro Effects in Photoshop (Video Tutorial)Vintage and retro effects are a timeless photography style that adds a nostalgic and old-fashioned look to digital images. This Photoshop video tutorial will guide you through the steps so that you can add your own vintage and retro style to your photos.

Vintage & Retro Effect Photoshop Actions on Elements

Vignette Effect in Photoshop (Video Tutorial)The Vignette effect is a versatile technique that’s achieved by darkening the edges of a photo to draw attention to the center. This Photoshop tutorial will take you through the steps to create your own vignettes.

Vignette Effect Photoshop Actions on Elements

Watercolor Effect in Photoshop (Video Tutorial)The watercolor effect is an artistic technique that mimics the look and feel of watercolor paintings, with soft colors, blurred edges, and brush strokes. This Photoshop tutorial will guide you through creating your own watercolor effects.

Watercolor Effect Photoshop Actions on Elements

Learning new effects in Photoshop is not only fun but can also be a valuable skill. By mastering the art of photo editing, you can offer your clients unique and visually stunning imagery that will set you apart from the competition.

By diving into these photo effect tutorials, you will, of course, learn valuable new skills, but you will undoubtedly unleash your creativity as well!

The post 30 Tutorials for Creating Stunning Photo Effects in Photoshop appeared first on Speckyboy Design Magazine.

View Details

No one likes to lose a web design client. Especially when you consider the hard work that goes into finding one. And we can’t forget about all of the efforts it takes to provide them with great service.

The whole experience can leave a bad taste in your mouth. Not to mention a hole in your revenue stream and a void in your schedule.

It’s an unfortunate part of running a business. But it doesn’t have to be all negative.

The reality is that there are times when losing a client is a net positive. It could, for instance, lead you to explore new opportunities. There’s also a chance for some self-reflection.

Today, we’ll look past the downside and focus on how losing a client can potentially help your web design business.

You Might Find Growth OpportunitiesWorking with a client for a long time helps to build a sense of security. They’re someone you can count on for continued business. But that comfort can also limit your upward mobility.

This is especially so when a project involves repeatedly doing the same tasks. A big maintenance contract, for example, is a source of steady income. Yet it also leaves little room for growth.

When this type of client leaves, you may suddenly find yourself with a lot more free time. This provides the necessary space to determine what comes next. It could be just the thing you need to refine your growth strategy.

Sure, it’s possible to simply fill that spot in your daily routine with a similar client. But, even with a small revenue bump, it’s not exactly a case of moving up.

The idea is to find ways to steadily increase profit while avoiding the previous time trap. That could mean offering services with recurring fees or even outsourcing some of the grunt work.

Sometimes it takes losing your security blanket to make positive change.

There Can Be Valuable Lessons To LearnRunning a web design business is a constant learning experience. And while we may associate it with gaining technical knowledge, there’s more to it.

Take client relationships. Not all of them are healthy, and some can be downright toxic. But even the worst ones contain valuable lessons.

You’ll learn to navigate common issues like design politics, and how to stand up for yourself when a client crosses a line. Plus, the experience might help you recognize the warning signs of a potentially bad situation. It could save you from a lot of future headaches.

Losing a client also gives you a chance to look at your business practices. Any insight you can pick up regarding why they left could provide clues on what went wrong. From there, you can make some necessary tweaks and strengthen any weak spots in your service.

Whether the lesson is, “I don’t want to go through that again” or “Here’s what happened,” there is plenty to learn.

There’s Less Weight on Your ShouldersWe’ve all dealt with clients who stress us out. You know, the ones who are highly demanding and yet always seem to be late in paying invoices.

In these situations, even a high-revenue client is likely more trouble than they’re worth. Money is great, but peace of mind has value too. Thus, watching them leave may feel more liberating than sad.

Indeed, ridding yourself of their bad behavior is a boon to creativity. Now that you’re no longer saddled with that heavy weight, you can focus on doing the parts of your job that you love most. At the very least, it’s one less thing to worry about.

Plus, despite what a client may think, some projects are simply a higher priority. Those that pay well (not to mention on-time) and are willing to collaborate belong at the top of your list. Losing someone that is not in this category is no reason to lose precious sleep.

Now, what will you do with that newfound freedom?

A Not-so-Bittersweet Goodbye?There are times when it hurts to lose a client. Particularly if it’s someone you’ve had a positive relationship with. And not everyone is easily replaceable.

But as they say, there’s always a silver lining. You may well be better off with certain clients no longer in your portfolio. Beyond that, there will likely be some valuable knowledge gained and doors of opportunity opened.

It also seems like processing these occurrences becomes easier over time. After a while, seeing clients come and go begins to feel normal. The hope is that this experience leads to no longer dwelling on the negatives.

If you’re lucky, it may even be a case of addition by subtraction.

The post Why Losing a Client Can Be a Positive for Your Business appeared first on Speckyboy Design Magazine.

View Details

The Most Popular Build Tools for Front-end Developers in 2023 – Discover tools that will help you build, test, and deploy front-end code.

8 CSS & JavaScript Snippets for Custom Text Paths – Examples of text path effects that mimic print design.

Double Image Hover Effects with Clip-Path Animations – Effects that reveal images in clever ways.

Scrollbar.app – This app makes it easy to create custom scroll bars.

How to Help Your Clients Master eCommerce – Teach clients to manage their eCommerce websites and guide them towards success.

A Guide To Accessible Form Validation – Items to consider when implementing form validation techniques.

React Libraries for 2023 – How to choose the right library for your React application.

The JavaScript Site Generator Review, 2023 – A look at the top site generation tools on the market.

25 Free Lightroom LUTs for Stunning Photo Effects – Use these tools to transform your photos into stylish, eye-catching images.

Tips for Better CSS Transitions & Animations – Learn to create animations that add a high-quality look to your designs.

Mondrian Generator – Use this tool to create unique works of art.

Why the Grumpy Designer Isn’t Sold on the AI Hype Machine – AI has massive potential. But it’s not necessarily the Utopian dream some are selling.

Generate Tailwind CSS Components Using ChatGPT – This AI-powered tool will craft custom components for the popular CSS framework.

Web Interface Guidelines – A non-exhaustive list of details that make a good web interface.

Introducing ChatGPT & Whisper APIs – You can now integrate these popular AI tools into your own apps and products.

WordPress 6.2 Source of Truth – A comprehensive list of features and changes in the upcoming version.

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

View Details

Part of being a web designer means learning how to deal with extreme situations. Some days can be insanely-busy, stress-filled work marathons. Clients need your help, things are breaking – you know the drill. These types of days make you wonder how you’ll ever get through all the obstacles in your way.

Yet you may encounter days or weeks where things are extremely quiet. At first, you may be thankful for some downtime. But it doesn’t take long until your mind starts racing again, impatiently waiting for something to do. This can be just as maddening as when you’re super busy.

The difference is that slower times present you with a terrific opportunity. It’s a time when you can do something productive (or not) and recharge your spirit. You can also use it to get ready for the inevitable deluge that is always lurking around the corner.

Here are a few things you can do to make the most of a slowdown.

Sharpen Your SkillsWhen life is hectic, the quest for self-improvement often takes a back seat. But even a little bit of free time provides a chance to work on boosting your skills.

Depending on what you want to learn, you may only need to dedicate a few hours. You can even spread them out over time.

For example, let’s say you want to take an online course to learn the latest CSS layout techniques. You could break it up into bite-sized chunks – say, 15 minutes a day. It may require a few weeks to complete the course. But the reward is that you’ll manage to learn something new without feeling overwhelmed.

The fun part is that it doesn’t matter what subject you choose. Ideally, it would be something that helps you in your daily work. But the process of learning helps to keep your brain occupied and will give you a sense of accomplishment.

Get Creative by Starting a Side ProjectA side project can be a great place to apply those new skills. Plus, it can be a fun respite from the daily grind.

Now, this doesn’t mean that you necessarily have to go all-in with a new venture. You can pick and choose how seriously you want to take things.

The project can run the gamut in terms of size and time requirements. It could be a full-fledged web application that will turn the world upside down. Or it might be a little Figma UI that you never share with another soul.

The beauty is in creating something that you’re passionate about. And it’s a chance to experiment with different tools and techniques. This can stir your creativity and renew your enthusiasm.

Take Stock of Your BusinessThe hustle of running a design business leaves little room for looking at the bigger picture. Thus, this could be the right time to examine where you are and where you want to be.

To start, study your current clients. See who’s paid and who hasn’t. You might also review their websites. There’s a chance you’ll find opportunities for a redesign or beneficial new features.

Quite often, clients are thinking of these very same things. However, they may have placed it on the back burner. By being proactive, you might convince them to act – and boost your revenue at the same time.

It’s also worthwhile to perform an analysis of your workflow. This will allow you to address common roadblocks that make it harder to get things done. It might be an opportunity to test out a new tool or just a different way of working.

There are plenty of other areas to explore. Everything from the types of projects you’re working on to the services you offer. Both you and your business can benefit from this type of review.

Get Out of the OfficeOne of the most common traps for business owners is trying to make every moment productive. Sure, it can be effective during the work day. However, there’s also the danger of giving yourself a case of burnout.

Therefore, it’s important to take advantage of downtime. Use it to do something fun and relaxing – and do so without feeling guilty.

Take a trip, anywhere. It doesn’t have to be far away. You don’t even have to leave town. But spending some time away from your office can do wonders.

As much as we may love our jobs, work can still take up a disproportionate amount of our lives. There’s a great benefit to adding some balance.

Time Is a Gift: Use It WiselyThe one thing we don’t seem to have enough of is time. That’s why a slow period at work can be such a great gift. It affords us a chance to do some things that we might not otherwise do.

So, the next time you find yourself with a clear schedule, take it as an opportunity. Learn something, practice your skills, improve your business, or take a well-deserved break.

Regardless of what you do, make sure you take advantage of that extra time. You never know when the next opportunity will come.

The post Making the Most of Slow Times at Your Web Design Business appeared first on Speckyboy Design Magazine.

View Details

Communication is among the most important aspects of our relationship with clients. Much depends on our ability to effectively explain concepts and reach a mutual understanding. Creating positive project outcomes without it is nearly impossible.

Yet many web designers are stuck using the most impersonal form of communication: email. This creates barriers that can slow the design and development process to a crawl.

At the same time, there is an immediate convenience to email. We don’t always have time to hop on a remote meeting – let alone an in-person gathering. And while there are several collaboration tools available, they often have cost and setup barriers of their own.

To that end, it’s about making the most of the medium we use most often. Let’s explore some ideas for improving client email communication. Hopefully, it will result in getting everyone on the same page!

Start with the Basics of AccessibilityAccessibility isn’t just for websites. The emails we write should also follow best practices in this area. This is a key first step, as communication becomes increasingly difficult when a message isn’t legible.

And since messages rely heavily on text, typography plays a massive role. Choose a basic font that works on multiple platforms and is easy to read at a relatively small size (10 – 14pt). If your email app allows for custom line spacing, it’s worth tweaking to ensure that long paragraphs aren’t bunched together.

Color contrast is just as important in email as it is on the web. Use color combinations that comply with WCAG AA standards.

To further simplify the appearance, avoid using textured backgrounds or fancy themes. Even if they look OK on a desktop, they may be too complex for mobile users.

Take Advantage of HTML Formatting OptionsThe days of sending plain-text emails are gone. That’s a good thing, as support for HTML provides a variety of formatting options. This can help readers better absorb the content of your message.

Modern email apps include plenty of basics. That should be more than enough to make your content easy to follow. It’s not much different than using your favorite word processor.

The same rules apply. Use headings to create a visual separation between new topics. Ordered and unordered lists can be used to outline instructions or related thoughts on a topic. Adding relevant text links can replace the practice of pasting long URLs.

And the ability to add inline images can also come in handy. Images add context and make instructions easier to follow. They’re ideal for showing clients where to click, what to look for, or pointing out bugs.

Images can become unwieldy, though. Therefore, try to keep them minimal in terms of dimensions and file size. Oh, and don’t forget the ALT text!

Keep Content Focused and RelevantIs there a hard limit to how long an email can be? Probably not. Should you try to find out? Please don’t.

Keeping emails short and to the point can be challenging. This is especially so for something as in-depth as a web project. There are so many technical and design details. Sometimes it’s difficult to know what to leave out.

Our best advice is to consider why you’re writing the message. For example, let’s pretend that you’re troubleshooting an error message. How can you ask the right questions without overwhelming your client?

Let the initial goal guide you. Try to stick to the basic facts of the issue. You might want to ask about the specific error message they experienced. From there, move on to where they saw it and what they were doing at the time.

It’s fine to leave out any extra commentary about PHP or how a recent software upgrade has been buggy. These items may be somewhat relevant, but could also take the focus away from the information you’re hoping to gather.

Creating a friendly atmosphere is also important. Making small talk can be an effective way to accomplish this. But it’s best reserved for a more casual conversation. Use your best judgment here.

Understand When Email Isn’t EffectiveAs we mentioned, email often feels impersonal. And the context of a message isn’t always obvious. As such, there are situations when it’s simply not the best way to communicate on a particular topic.

Basic misunderstandings are a prime example. When one party can’t accurately get their point across, email threads tend to get long. And continuing down this path is more likely to be a waste of time.

Plus, the level of resulting frustration can hurt your relationship. Not to mention the impact it can have on your project. The snowball effect of poor communication could make for an equally poor outcome.

Rather than pushing the issue, look for an alternate means of communication. A phone or video call might be just what is needed. Short of that, a real-time text chat could also improve understanding.

In the end, it’s about finding the best way to conduct business. Email isn’t always the answer.

Effective Emails = Happy Designers & ClientsImperfect as it is, email is a part of our daily ritual. For all its shortcomings, it would be hard to imagine going back to the days of phone calls and snail mail for communication.

And since we spend so much time with email, it makes sense to harness its potential to the fullest. It starts with writing messages that are accessible, easy to read, and concise.

That covers web designers – but what about clients? Well, not everyone considers these things when writing an email. As they say, it takes all kinds of people to make a world.

But by following the tips above, you’ll hold up your end of the bargain. And you might influence your clients to do the same.

The post How to Improve Client Email Communication appeared first on Speckyboy Design Magazine.

View Details

There’s a lot to love about WordPress multisite. It allows for hosting multiple websites on a single installation of the content management system (CMS). And it offers a great way to share themes, plugins, and even content among a related group of sites.

For example, multisite is often used by larger organizations like universities, governments, and retail franchises. There’s a level of flexibility and convenience that makes it easy to spin up new sites and perform maintenance tasks. Plus, it’s possible to have a completely different group of users on each site.

Be that as it may, WordPress multisite also adds a layer of complexity. That’s especially so when launching a redesign. The larger and more varied the network, the more difficult the process becomes.

Putting it all together requires attention to detail – and there are a lot of little details to consider. Here are some tips for making sure your WordPress multisite redesign goes as smoothly as possible.

Determine What Will Be ChangedOn some levels, redesigning a multisite network isn’t all that different from a single WordPress site. Some of the same potential pitfalls apply.

It’s just that they’re now multiplied across several websites. And there are a few ripple effects that are unique to this environment.

One of the first steps is to determine exactly what will change. This will help you develop a plan for approaching the project.

When it comes to themes, they are activated on a site-by-site basis. Therefore, any required tasks that come with implementing a new one may have to be repeated several times. Theme options panels and WordPress Customizer settings are two common examples.

But what about changes to content? For older sites, you might be converting pages and posts to use the Block Editor. This will allow you to restructure content layouts, but can also add some extra steps to the launch prep process.

Page builder plugins can further complicate matters – particularly if custom styles have been added. If there is no centralized stylesheet shared by all sites, they may need to be changed individually.

And what if only some of your network sites are being redesigned? Be sure to consider how this may impact any content or functionality that will be shared across the network.

Establish a Place to WorkChoosing a place to work on your multisite’s redesign is an important decision. That’s because it can have a major impact on how you launch the refreshed network of sites.

Perhaps the easiest path is to duplicate your multisite to another spot on your server. Even better if your web host provides a staging environment. The entire process may be automated.

From there, you can work on it in the background. This helps to avoid inconveniencing users on your production sites.

The other advantage of using a duplicate network is that, when ready, you can repoint your domain(s) to the new install. This minimizes downtime while ensuring that the design and content are perfect.

However, that’s not always feasible. If your network is content-heavy and constantly updated, keeping two WordPress installations synced can be a chore.

In that case, it may be worthwhile to create duplicate sites on your existing network. From there, it’s possible to use a plugin like Broadcast to share content across the old and new versions of each site. Content will stay current, even while you work on that sparkling new look.

Look at the WordPress Install’s DatabaseHere’s where things start to get tricky. Depending on how you plan to launch the redesign, you may need to make changes to the install’s database.

Pushing your WordPress multisite network from staging to production may do all the heavy lifting. Some hosts will automatically search and replace URLs for you. But other methods aren’t so simple.

For example, if you’re switching your network’s main site to a different location on the network, that means remapping your domain name. You’ll also have to edit your installation’s wp-config.php file. There are several database tables that you might need to access, including:

wp_blogs
wp_options
wp_site

In addition, there could be site-specific tables where URLs will need to be swapped out. You’ll need to know the site’s ID to do this correctly, as tables include it in their name. Each site’s ID can be found by hovering over its domain listing on My Sites > Network Admin > Sites.

The ID will be shown at the end of the URL: https://www.domain.com/wp-admin/network/site-info.php?**id=1**

When possible, a search-and-replace tool like the one included with WP-CLI or a separate plugin is recommended. That’s much easier than making changes manually via a database tool such as phpMyAdmin or MySQL Workbench.

But be careful! Even a simple mistake – a misspelling, for instance – could cause some serious problems. Make sure to create a backup of your database before attempting any changes.

Test All the Things (Again and Again)The impacts of a redesign can reach across your multisite network – even to sites that aren’t part of the project. Therefore, testing is key to catching issues before launch.

To start, click through each site in the network. Verify that each page is displaying as expected. Ensure that any custom functionality is in working order.

It can also be helpful to mimic your typical workflow. Carry out tasks such as adding new posts, editing existing content, and uploading media files. In short: try to replicate everything you typically do across several sites.

Plus, there’s always a possibility that any new themes or plugins can conflict with existing software. Make sure that plugin settings screens are accessible and allow you to make changes. Open your browser’s developer tools and watch for any console errors.

Be as thorough as possible to try and avoid any unwelcome surprises at launch.

Redesigns Are Complex, but Planning HelpsThe very idea of redesigning a WordPress multisite network can be intimidating. Indeed, no one could blame a web designer for getting a bit nervous. After all, there are a lot of details on which to fixate.

Thankfully, planning provides a dual purpose. First, it helps us determine the best way to proceed. Second, the knowledge we gain from the experience can help to steady those nerves.

That’s not to say that you won’t find a few bugs after launch. Quite honestly, it’s part of the job. As such, you may be better off expecting some little issues to pop up. But thorough testing can eliminate the most impactful problems.

Even better is that it’s a learning opportunity. Once you’ve successfully launched a network redesign, subsequent projects will become easier.

We hope this guide will help you streamline the process and reach your project goals!

The post How to Plan a Redesign of a WordPress Multisite Network appeared first on Speckyboy Design Magazine.

View Details

The Ultimate LinkedIn UX Designers Roundup – Check out this listing of recommended UX thought leaders.

How WordPress Media Management Can Be Improved – A look at specific features that could make for a better user experience.

Some More On-Scroll Typography Animations – View examples of unique animation effects.

Unovis Framework – A modular data visualization framework for React, Angular, Svelte, and vanilla TypeScript or JavaScript.

Advice for Beginners That Are Starting in Web Design – Whether you want a professional career or to pick up a new hobby, here are some tips for getting started.

Building an Animated SVG Logo with Animejs – Learn how to create a cyberpunk-styled logo with this tutorial.

Try Out CSS Nesting Today – This handy new feature can now be tested in Chrome and Safari.

Tips for Graphic Designers Who Want to Build Websites – Ideas for making a smoother transition from print to web.

Resizing with CSS – How to allow users to resize an element on their screen.

Kitchen Components – Design UI in React or React Native with optimized and customizable styled-components.

35 Tutorials to Learn & Master Adobe Lightroom – Check out an extensive collection of tutorials that will help beginners and professionals alike.

Windstatic – Download this set of elements and layouts made with Tailwind CSS and Alpine.js.

Buttons, Links, and Focus – Thoughts on appropriate usage of buttons and links.

All About Iterative Design – How this philosophy can increase the value of your design initiatives.

Intrinsic Design, Theming, and Rethinking How to Design with WordPress – Exploring how to combine modern design techniques with WordPress blocks.

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

View Details

If you build enough eCommerce websites, you’ll eventually discover that none of them are simple. Each one comes with unique challenges. And it takes a lot of work and effort to get things right.

Among the biggest challenges is finding out exactly what a client wants and needs. Small businesses, especially ones that haven’t sold online before, are particularly tough. Quite often, they come into the planning stages of a website without a full understanding of how things work.

This leads to a lot of uncertainty around how to handle shipping, payment gateways, and other key functionality. This makes it hard to provide an accurate price quote. And it also means that you may not have the resources to finish the project if it’s already in progress.

So, how can web designers help? First, it’s all about showing clients the lay of the land. From there, it’s time to encourage them to do a little research on their own.

Let’s look at some ways to help clients make sense of eCommerce.

Start Small with Tough TopicseCommerce is a vast subject. And depending on which platform you work with, the number of options can be overwhelming.

Therefore, it’s best to keep things basic in the beginning. Provide clients with the minimum they need to know to spark a deeper conversation.

Take shipping methods as an example. It’s one of the most difficult things for small businesses to grasp. There are, depending on geography, several potential carriers, methods, and pricing scales. Not to mention the logistics of making it work without losing money.

To say the least, this is a subject that can quickly lead to confusion. However, it’s possible to relieve some of that stress by asking the right questions and offering the simplest solution.

In this case, you might ask what the client’s expectations for shipping are. Do they have a specific carrier in mind? Do they have products of varying sizes? While this is just a fraction of what you’ll need to know, it can help to break the ice.

Based on the answers, you can share specific solutions that work with the chosen eCommerce platform. If they’re unsure, point them towards something basic, such as a table or flat-rate shipping.

This doesn’t necessarily provide the final solution. But it is a foundation upon which you can build.

Take a Holistic Approach to Client TrainingSelling online brings a variety of tasks and responsibilities. To keep things running smoothly, clients will need to process orders, manage inventory, and provide support to their customers.

This is where client training plays a big role. By showing them the ropes of running an online store, you can help them develop an effective workflow. In addition, it will (hopefully) limit their reliance on you for common issues that pop up.

Start with the basic tasks that take place when they receive an order. Walk them through the process of verifying payments, changing the status of the order, and providing tracking information to the customer. They’ll get a sense of how things work and can then determine ways to maximize efficiency.

It’s also important to understand how the customer experience works. Too often, we focus on teaching administrative tasks, while forgetting about the front end. Clients will need to know the finer points of that to support their customers.

Encourage Independent ResearchOur clients depend on us for guidance. Still, they must be the ones to make business decisions. All we can do is help to point them in the right direction.

That means introducing them to helpful resources. But also asking that they do some of the legwork. For example, you might mention a few different payment processors that could be a good fit. From there, you could encourage your client to look at each option’s rates and policies.

This helps to ensure that there are no surprises. Telling a client to use a specific service without their review could lead to problems later. They need to understand what they’re getting into. And they (or an associate) should be responsible for figuring out the best option.

You can still answer any questions they might have. But it’s all about making sure that they have the information they need to make the right decision.

Talk About the FutureSuccessful shops are constantly evolving. And there are always opportunities for retailers to grow their offerings and revenue. These are things clients should both know about and consider. That’s why it’s a good idea to discuss what the future may bring.

Even when a website starts small, it doesn’t have to stay that way for the long term. Data can be used to determine where to take things next. It might be a new feature that makes searching for products easier or maybe an affiliate program. The answer will vary by client, but there are likely options for every need.

This is important for web designers as well. Not only do we help our clients grow, but we also stay in the loop for new phases of the project. That’s money in our pockets, too.

Keeping eCommerce Within Reach for All ClientsWhen you think about it, eCommerce is still a relatively new way to sell products and services. Two-plus decades is a tiny sample size when compared to traditional methods.

Therefore, it’s understandable if small business owners aren’t well-versed in the details of selling online. And most don’t have the resources to bring in high-priced consultants. As such, a lot of the educational duties fall on web designers.

Helping clients figure things out can be a challenge – but it is very much possible. Patience, explaining the concepts around eCommerce, and training all play a role. You can guide clients toward success. From there, you’ll have the opportunity to grow together.

The post How to Help Your Clients Master eCommerce appeared first on Speckyboy Design Magazine.

View Details

Lightroom Look-Up Tables, or LUTs, are powerful resources for photo editing that can transform your photos into stylish, eye-catching images with minimal effort. Applying Lightroom LUTs to your photos can completely alter their color and tone, giving them a unique and creative look without the need for tedious manual adjustments.

These versatile tools can be used to enhance the colors in your photos, fix color imbalances, and add mood or style to your images. Whether you want to achieve a vintage, film, or moody look, Lightroom LUTs make it easy to do so.

Even if you’ve no photo editing experience, using LUTs is a breeze. Simply select the LUT you want to use and apply it to your image in just a few clicks.

In this collection, you’ll find 25 free Lightroom LUTs that offer a wide range of styles for your photos. Whether you’re a pro photographer or simply enjoy taking photos for fun, these LUTs will help you take your photos to the next level.

Don’t wait – start using these free Lightroom LUTs today and unlock your full creative potential.

More Free Lightroom Presets* 50 Free Lightroom Presets * Free B&W Lightroom Presets * Free Movie Lightroom Presets * Free Outdoor Lightroom Presets * Free Portrait Lightroom Presets * Free Travel Lightroom Presets * Free Wedding Lightroom Presets

Learn Lightroom

35 Tutorials to Learn & Master Adobe Lightroom Mountaineer Lightroom LUTs (Free)If you’re into mountain photography, you’ll love these free LUTs that are specifically designed for this genre. They are tailored to enhance the appearance of snowy landscapes, rocks, and other natural features found in mountain scenes.

Bleak Lightroom Presets & LUTs (on Envato Elements)Add a touch of moodiness to your photos with this pack. Designed to create a desaturated, melancholic look, these presets can transform your photos into something truly unique.

Lifestyle & Commercial LUTs (Free)LUTs from this pack are meant for professional commercial photography. Use them if you’re taking photos for a marketing campaign, for example.

Hiking Lightroom Presets & LUTs (on Envato Elements)Designed to enhance the colors and tones of your outdoor photos, these presets can make your landscapes and portraits truly stand out. Ideal for hiking, camping, and nature photography.

Free LUTs Landscape (Free)These LUTs have been designed specifically for outdoor landscapes, allowing you to quickly edit and transform your photos into something truly special. With a wide range of styles to choose from, you can easily achieve the look and feel you want.

Nomad Lightroom Presets & LUTs (on Envato Elements)Give your photos a touch of wanderlust with this pack of presets and LUTs. Designed to enhance the colors and tones of your images, these presets can add a touch of adventure to your photos.

Classic Noir LUTs (Free)Black & white images have a timeless, classic vibe that’s hard to replicate with color photos. But with this elegant Lightroom Look-Up Table (LUT) pack, you can easily create your own.

LUTS Pack Lightroom Presets (on Envato Elements)Whether editing portraits, landscapes, or anything in between, with over 150 unique presets and 15 LUTs, you can easily add a touch of style to your images with these presets.

LUTs Emulation (Free)If you’re looking for a color grading LUT that can make any image shine, this one is an excellent choice. Specifically designed to enhance photos captured around dawn or dusk, this LUT can give your photos a stunning, warm glow.

Urban Desaturated Lightroom Presets & LUTs (on Envato Elements)With this pack of Urban Desaturated Lightroom presets and LUTs, you will be able to enhance the colors and tones of your city photos. These presets can add a touch of grit and style to your photos.

Moody Bohemian LUTs (Free)If you’re looking to add a touch of moodiness and bohemian style to your photos, these free LUTs are an amazing choice. With their unique, distinctive shades, these LUTs can transform basic photos into something truly remarkable.

Vintage Vibe LUTs (Free)These LUTs have been designed to give your photos a classic, retro feel that will never go out of fashion. With a range of vintage effects to choose from, you can easily achieve the look you want.

Black & White LUTs (Free)Here’s another winning option for black and white photos. Change and edit any image quickly, and with just a few clicks, you can achieve stunning black and white effects that will make your photos stand out.

Classic Ride LUTs (Free)If you’re a fan of vintage cars and want to make your photos stand out, Classic Ride is the perfect free Lightroom LUT for you. Tailored specifically for vintage car photos, this LUT has been designed to bring out every detail and make your wheels look their absolute best.

Sweet Caramel LUTs for Photo & Video (Free)If you’re looking for free LUTs that are ideal for outdoor portrait photos, look no further than these. Specifically designed for weddings, senior photos, and other outdoor portrait shots, these LUTs can help you achieve the perfect look and feel.

Cali Vibes LUTs (Free)If you’re looking to capture the golden, sun-kissed look of California in your photos, the Cali Vibes Lightroom LUT is a great option. Designed specifically to enhance your photos with a retro, Californian vibe, this LUT can give your images a stunning, warm glow.

12 Free LUTs (Free)If you’re unsure of what look you want to apply to your images, this free LUT pack is a great choice. Spanning an array of aesthetics, this pack includes a dozen LUTs that can help you achieve a range of effects and styles.

Arctic Chill LUTs (Free)With its icy design option, this LUT can help you achieve a modern, sophisticated look. By enhancing the colors and tones of your photos, this LUT can give your images a cool, icy vibe that’s perfect for a wide range of styles and genres.

Moody Aesthetic LUTs (Free)If you’re looking to add a touch of moodiness to your photos and make them stand out, this Lightroom LUT is an excellent choice. With its moody effects, this LUT can transform run-of-the-mill photos into something truly special.

Nature & Wildlife LUTs (Free)These free wildlife Lightroom LUTs have been designed to help you style your nature photos, making them stand out and shine. Your landscapes and wildlife shots will look their absolute best, allowing you to showcase your work with confidence and pride.

Dark Pearl Cinematic LUTs (Free)Dark pearl effects, like the ones featured here, can add a dramatic and eye-catching touch to any photo. Whether you’re looking to create a moody atmosphere or simply want to make your photos stand out, these effects can help you achieve your desired look.

Free LUTs for Photo & Video (Free)With their versatility and flexibility, these free LUTs work well for images of all kinds. Whether you’re editing portraits, landscapes, or anything in between, these LUTs can help you achieve the perfect effect.

Cinematic LUTs (Free)These free Cinematic Lightroom LUTs have been designed to lend your photos a movie-grade look and feel. If you’re looking to add a touch of drama and make your shots stand out, these LUTs are an excellent choice.

Day for Night LUT (Free)The Day for Night Lightroom LUT desaturates daylight hues to transform day into night. It helps you get that dark look without sacrificing any details from your photos.

Saving Private Ryan LUT (Free)This free LUT has been inspired by the film Saving Private Ryan and has been designed to give your photos a gritty vibe. When applied, the LUT flattens and dulls the colors, resulting in a distinctive and stylish effect.

Highlands Cinematic Landscape LUTs (Free)Perfect for landscapes, these LUTs make the colors appear vibrant and natural. They’re a fantastic option for amplifying the quality of your outdoor photos.

Color Boost LUTs (Free)The name speaks for itself: these LUTs bring out the best and brightest colors in any photo. They’re flexible enough to work with images of all categories.

Cinematic LUT Enhancement Collection (Free)This is another option for cinematic LUTs, perfect if you need to give your photos a dramatic film feel. You’ll have the option to enhance any specific color that you need.

Digital to Film LUTs (Free)The unmistakable look of photos shot on film is something many photographers aim to replicate. But you don’t need to shoot on film to achieve this effect. With this free Lightroom LUT pack, you can easily apply a film-like look to your digital photos.

How to Install Lightroom LUTsIt’s important to check that the LUTs you’ve downloaded are compatible with the version of Lightroom that you’re using, so that they can be used properly in your photo editing.

Once you have downloaded your chosen LUT, extract the files to your preferred location on your computer.
Launch Lightroom, and navigate to the Develop module.
In the Develop module, click on the + icon at the top of the Presets panel.
Select Import Presets from the drop-down menu that appears.
Navigate to the location on your computer where you saved the LUTs and select them.
Once selected, click the Import button to add them to Lightroom.
You can now start using the LUTs by selecting them from the Presets panel in the Develop module of Lightroom. The post 25 Free Lightroom LUTs for Stunning Photo Effects appeared first on Speckyboy Design Magazine.

View Details

It’s like clockwork. When a new technology emerges, you can count on a couple of things: some will hail it as society’s greatest achievement, while naysayers will bemoan its existence. Artificial intelligence (AI) simply continues the trend.

As ever, the reality is more nuanced. For every potential good thing to come from the tech, it seems there are as many drawbacks. And finding balanced expertise on the subject has been a challenge.

I’m personally on the fence. From what I’ve seen so far, AI can do some very useful things. And I think it can be incredibly helpful to web designers.

Yet some aspects give me great concern. In part because I feel like I’ve seen this movie before. An innovation that is predicted to change the world. Only it’s not necessarily the Utopian dream some are selling (see Zuckerberg, Musk, et al.).

With that, maybe we should take the hype regarding AI with a grain of salt. And, to keep up with that sassy Bing chatbot, add in a dash of grumpiness.

AI Solves Problems and Creates New OnesIt’s no surprise that some of the biggest proponents of AI are those that stand to gain the most. And it’s hard to blame them. The job of a salesperson is to accentuate the positives – not dwell on the negatives.

And tools like ChatGPT have several positive aspects. They’re capable of increasing efficiency and knocking down technical barriers. This benefits everyone from writers, and medical researchers, to auto mechanics.

Even better is that these tools don’t have to do everything for us. Something as small as a gentle nudge in the right direction can save us precious time.

Using web design as an example, a few brave souls (and me) have used ChatGPT to generate a WordPress plugin. But it could just as well help write CSS or JavaScript. You might even use it to help explain a complex concept to a client. Imagine the burden this could lift off our shoulders.

On the other side of the coin, several potential negatives could also come into play:

Inaccurate Content and Built-in BiasesAI tools are built by humans. Therefore, they’re imperfect. They’re also subject to the inherent feelings, biases, and motivations of their creators.

In practice, each tool is only as good as the people who created it. The quality of the content they feed into the app makes all the difference.

So, what are the downsides? One example seems to demonstrate the possibilities: a social media company’s algorithm.

Let’s imagine a social media network that tilts its algorithm towards showing inflammatory or inaccurate information. That’s what users are going to see most often in their timelines.

Similarly, there’s no guarantee that an AI tool will provide the correct answers. And even if its creator is reputable, there still might be biased information being returned.

Large companies may use the opportunity to share their point of view, in addition to facts. Or it may have inadvertently been fed content that perpetuates stereotypes.

Thus, AI isn’t immune to human fallibility.

Humans May Put Too Much Trust in AIIf an AI app produces an inaccurate response, there’s no guarantee that a user will catch on. Like so much of what’s written on the internet, some may simply believe what they read.

And this doesn’t just affect fact-based content like news or medical information. It could also find its way into the code these tools produce.

Take an AI-generated WordPress plugin, for example. You might test the results and find that it indeed works. That’s awesome! But how do you know that best practices were followed?

The code could contain a gaping security hole. Even worse, it might be hiding something malicious. Once deployed, this generated plugin could cause a whole lot of trouble.

Sure, a human coder might do the same thing. But that’s the point. Quality and accuracy aren’t assured in either case.

Creative Works Could Be Used Without PermissionIt wasn’t so long ago that we saw a wave of legal threats from stock photography services. When an (allegedly) unlicensed version of a copyrighted image was found, the provider came down hard on the offending website owners.

AI is already providing those same lawyers with plenty of work. Getty Images, for example, filed a lawsuit against a tool that generates artwork.

At first glance, this may appear to be a battle between corporations. But the impact could trickle down to end users as well. It’s fair to wonder about the risk of using AI-generated images on your website. Will it leave you open to legal threats?

Code is also a potential trap. Perhaps open-source materials are fine to use. But what if a tool indexes a snippet from a private repository? And how can an end user tell the difference?

Without processes in place that allow creators to opt-in to feeding AI tools, we’ll never know where content comes from. That’s a risk.

There’s Always More Than Meets the EyeThose touting the game-changing potential of AI aren’t necessarily wrong. There’s every reason to believe that this technology can reshape entire industries – if not the world.

But the skeptic in me feels like we’re only getting a partial story. After all, any tool that can be used to do good can also be used to harm. And the final judgment is truly in the eye of the beholder.

The bottom line is that individuals, organizations, and governments will use AI in ways that benefit them. Their interests won’t always align with everyone else’s. We must be smart enough to gauge their motives and determine whether they’re acceptable.

That’s worth keeping in mind as we’re inundated with grand proclamations about this nascent technology.

The post Why the Grumpy Designer Isn’t Sold on the AI Hype Machine appeared first on Speckyboy Design Magazine.

View Details

The ability to manipulate text content’s shape and path are powerful. It allows designers to create a unique flow and make specific elements stand out.

But it seems like these effects have always worked better in print design. While web designers have had access to floating images around text, other bells and whistles have required hacks. That’s changing, thanks to modern CSS and JavaScript.

Now it’s possible to place text on custom paths that closely resemble those seen in print. Even better is that you can add animation and hover effects to further enhance the experience.

The possibilities are endless. To prove our point, here are eight CSS and JavaScript snippets that demonstrate custom text paths. As you’ll see, the results can be quite impressive!

SVG textPath Element Sale Banners by @BrawadaComThis collection of fictional ads offers two compelling examples of custom text paths. Both the serpentine ticker text and rotating text banner could be perfect for a sidebar. Each takes advantage of the SVG textPath element. The look is an attention-getter and even works well on small screens.

See the Pen Sale banner by @BrawadaCom

Fluid Gooey Text Background with SVG Filters by Luke MeyrickHere we have a bit of stair-stepping text that combines basic HTML with some clever use of CSS. SVG filters help define custom shapes, while Flexbox powers the layout. The entire presentation is responsive and scales beautifully on every screen size.

See the Pen Fluid Gooey Text Background by Luke Meyrick

SVG Paths Stretch Animation on Hover by Evan JinThere’s not much to see at first glance. But hover over this attractive text and watch the characters reach new heights – literally. SVG ensures that the text looks incredibly sharp, while JavaScript makes it interactive. It’s an example of how custom text paths can add the element of surprise to your content.

See the Pen SVG paths stretch animation on hover by Evan Jin

Text Path:Stamp by Peter NowellA bit of rounded text can do wonders for a logo. The fit and finish of this snippet are as good as anything you’ll find in print. You might even mistake it for an image. But the small bit of text at the bottom is indeed selectable.

See the Pen Text Path:Stamp by Peter Nowell

Text Path SVG Animation On Scroll by CorrThis snippet shows that text paths can also be used to enhance scroll effects. Text winds its way around a square-shaped path and reverses its course when scrolling up. The look is subtle and adds to the UX without overwhelming it.

See the Pen Text Path SVG Animation On Scroll by Corr

Mobius Methodology by Wayne McWilliamsHere’s an incredible navigation UI that demonstrates how design can add context to content. In this case, it’s used to illustrate the different steps in a process. Hover over an element to see a full-text description below.

See the Pen Mobius Methodology by Wayne McWilliams

Zip-Unzip Text Animation by Cojea GabrielThis animation offers a fun way to reveal (and subsequently hide) content. Text scrolls vertically before “unzipping” itself to either side of the presentation. The effect is reversed to zip the content up again. The GSAP library is used in conjunction with SVG.

See the Pen Zip-Unzip Text Animation by Cojea Gabriel

CSS Grid & Shape-Outside Venn Diagram by Adrian RoselliEveryone loves a good Venn diagram, right? And this one is especially impressive, as it’s built with only HTML and CSS. CSS Grid makes the layout possible while allowing text to responsively fit the shape of its container. Scroll down to see an outlined version that shows exactly how each container was built.

See the Pen CSS Grid and Shape-Outside Venn Diagram by Adrian Roselli

Standout Shapes for Web LayoutsWhen you want to make a statement, custom text paths are an effective way to do so. They’re infinitely flexible and can be made to adapt to any screen. And when combined with other effects, they’ll add a “wow” factor that users will enjoy.

Want to see even more custom text path examples? Check out our CodePen collection!

The post 8 CSS & JavaScript Snippets for Custom Text Paths appeared first on Speckyboy Design Magazine.

View Details

Design Threads – This project aims to help unravel the current state of design.

Effective Resumes for UX Students and Graduates – A guide to getting past the “blank-space” problem for young designers.

The Ups & Downs of Being a Self-Taught Web Designer – A look at the unique challenges facing those without a formal education.

Keys To An Accessibility Mindset – Learn how to approach and develop accessible content.

Container Queries Land in Stable Browsers – This web feature is now available in all three major browser engines!

React.js: The Documentary – Watch the full story of the early days of this popular JavaScript library.

20 Free Resume Templates for Designers – Use one of these amazing free templates – built especially for creative professionals.

Quick & Small Accessibility – A series of short (< 150 words) posts that teach key accessibility concepts.

Improved Font Fallbacks – Take a deep dive into providing fallbacks for locally-hosted fonts.

25 Fantastic Tutorials For Learning Figma – Get the most out of the popular design tool with these helpful tutorials.

Win11React – A project that replicates the Windows 11 experience using standard web technologies.

Lessons of Design – Designer Fabricio Teixeira shares important lessons he’s learned throughout his career.

Keeping Barriers Low for Clients Who Update Their Website – Things to keep in mind when setting your clients up for content management success.

Glint App – Check out this cross-platform graphical interface for Git.

Notion Icons – Download this Notion-style icon library, made in Figma.

Rethinking What it Means to be a Web Designer – How the job description has changed in modern times.

Do We Need CSS flex-wrap Detection? – A look at scenarios where this functionality could be useful.

Microsoft’s Internet Explorer divorce is complete – The old school browser is no longer available for most Windows 10 users.

Industry-Wide Tech Layoffs Impacting WordPress Professionals – Some big players are now cutting WordPress-related jobs.

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

View Details

The web design community is great at sharing knowledge. But quite often what we share has some prerequisites attached. You’d likely need to already be a web designer or developer to get something out of it. But what about beginners?

If you’re just starting your journey in web design, you may feel left out. With all the expert tutorials out there, it can be hard to know where to begin. It’s not the lack of information that is limiting. Rather, it’s the sheer amount of resources that can muddy the picture.

Web design is a vast subject. There are just so many different technologies to learn and paths to take. But those first steps when starting are universal.

And that’s our focus today. We’ll help to guide you towards becoming a web designer. Whether you want a professional career or to pick up a new hobby, there’s something here to get you on your way.

Learn HTML and CSS: The Foundations of Web DesignBoth HTML and CSS have been around for a very long time. On that basis alone, it might be tempting to dismiss them. Yet, these languages have continued to evolve.

They are still the foundation of how websites are built. And a case could be made that they are as important as ever.

Semantic HTML5 structure is vital for things like search engine optimization. CSS3, meanwhile, helps to keep pages looking beautiful, lightweight, and interactive. Both languages also play a huge role in accessibility as well.

While there are plenty of tools out there that will write markup and styles for you, it’s still important to learn how HTML and CSS work. They’re more intricate than any WYSIWYG editor can properly convey.

It’s this foundational knowledge that will help you plan and build a better end product. Understanding the likes of grid layouts, media queries, and how HTML5 handles video is essential.

Don’t hesitate to dive in and learn all the things when it comes to these two.

Build and Maintain a Side Project (Or Two)Creating a side project is one of the best ways to learn what web design is all about. Not to mention that it can also be a lot of fun.

Pick a subject that you’re passionate about. Maybe it’s books, music, or sports. Perhaps you want to build a community for other like-minded people. Whatever it is, jot down some simple goals for the project.

For example, think about how you want the site to look and what sorts of functionality you’ll need. What is it that you want to communicate with visitors? What actions should they take?

The great thing about this type of website is that you can go at your own pace. It’s often better to start small and enhance things over time. This will help you understand what it takes to maintain a website. You might even learn some lessons on how to build with the future in mind.

You’ll likely make mistakes and run into some roadblocks – but that’s part of the fun. It’s real-world experience, but without the pressure of working with clients.

Experiment with Systems, Frameworks, and AppsWhen you’re first starting in web design, it’s tempting to simply go with the most buzzed-about items. That means signing up to work with the most popular CMS, the can’t-miss JavaScript framework, or that shiny new code editor.

And it’s certainly OK to go down that path. But there is so much more to do and see. Putting yourself in a bubble right from the start isn’t necessarily the best thing for professional growth. Besides, if you only ever use one particular tool, how do you know what separates the good from the great?

Take some time to try out different tools, whether on a project or just for curiosity’s sake. The experience you’ll gain will help you to develop your niche over time.

Plus, having experience with many apps, frameworks, and systems could come in handy. When it comes to technology, nothing lasts forever. The more varied your expertise, the better you’ll be able to roll with the changes.

Be Kind to YourselfIf you pay much attention to the web design community, you’ll undoubtedly come across the “rock stars” of the trade. These are the folks who look like they have it made. Their portfolios are full of high-profile, jaw-droppingly gorgeous projects. And they’re often thought leaders in the industry.

While seeing what these great designers are doing can be inspirational, it can also have the opposite effect and lower your confidence. Imposter syndrome is a real thing. The secret is that just about everybody feels this way at one time or another – even the glitterati.

Therefore, don’t be too hard on yourself if you run into difficulties. Whether it’s a bit of code that’s driving you mad or trouble grasping a concept, stick with it. Understand that struggles come with the territory and that hard work can pay off.

Most importantly, don’t feel that you have to measure up to anyone else. We’re all on a journey, and yours is unique.

Enjoy the Opportunity to Grow as a DesignerTaking the first steps towards becoming a web designer is an exciting, if uncertain, time. But even if you don’t fully know what you’re doing just yet, learn to embrace that feeling.

The truth is that you may feel that way again and again as you learn new tools and techniques – even years from now. Learning new things is a key part of the experience. So much of it is a trial-and-error process, but you’ll be better off having gone through it.

Find joy in the opportunity, and don’t be afraid of failure. Now, boldly move forth into the world of web design!

The post Advice for Beginners That Are Starting in Web Design appeared first on Speckyboy Design Magazine.

View Details

It’s no secret that graphic design and web design are different animals. And despite how far the web has come in terms of flexibility, there are still limitations.

For example, CSS has made it possible to create complex layouts. Yet responsiveness and accessibility must also be taken into account. Creating something that can withstand various devices and use cases requires a lot of care.

This can be difficult for seasoned web designers to manage. But if you’re coming from the world of print design, the challenge is even greater.

For those making the transition from print to the web, this article is for you. We’ll offer some tips on what subjects to study, potential pitfalls, and some key concepts to keep in mind.

Look under the Hood and Find Out What Makes the Web WorkThe web is full of visual tools that allow for building websites without writing code. They make the design and build processes easier. It’s perfectly OK to use them.

However, it’s also worth your time to get to know HTML and CSS. They’re foundational elements of web design. By understanding how they work, you’ll gain an advantage when using no-code tools.

As good as these tools are, they’re not perfect. And there will likely be occasions when the results aren’t what you expected. Working knowledge of these languages can be a huge help when troubleshooting.

For example, consider a layout that looks great on a desktop device but not on a phone. Having some background information on CSS Grid or Flexbox might lead you to diagnose and fix the issue.

Once you have a feel for the basics, you’re free to expand your horizons. Learning languages like JavaScript and PHP can also be beneficial. They may even help you think about design differently.

Thankfully, coding expertise isn’t a requirement. But a little knowledge can go a long way.

Keep Your Designs Simple to StartA talented graphic designer can produce amazing work. Intricate layouts, elements that are positioned perfectly, layer upon layer of textures. The possibilities are endless.

These effects are possible on the web, just as they are in print. But if you’re just starting with web design, embrace simplicity first.

Effective web design needs to work on every device. It must also be easy to read and navigate – regardless of a user’s screen or physical abilities.

There’s a cost to being a bit too ambitious with web layouts. Sometimes, they don’t hold up on mobile devices. Or they may do more harm than good when it comes to accessibility.

Therefore, there’s no need to pressure yourself into building a complex design right off the bat. Starting small allows space for growth. You can always add those extra bells and whistles as you gain experience.

Get To Know UsersOne of the biggest differences between print and web design is the intended audience. You could, for instance, design a business card and print 1,000 copies. Each person that receives your card will experience it in pretty much the same way.

That’s not so on the web. There are different devices, internet connection speeds, assistive technologies, and web browsers. Not to mention that people from all over the world can access your website. And let’s not forget about the search engines that will index your content.

In practice, we build websites for an untold number of use cases. We don’t necessarily know how every single user will access a site, but we can do some predictive analysis.

Data exists to help us know a bit more about how people use the web. In the broadest sense, it can tell us the most popular web browsers, screen sizes, and operating systems, among other useful stats.

For existing websites, tools such as Google Analytics can provide a snapshot of who’s visiting your website and how they found it.

The idea is that, once you know your users, you can build a website that gives them the best possible experience. The more you learn about them, the more you can cater to their needs.

Apply Your Talents to a New MediumIf you already have an eye for design, you’re in a great position to start building on the web. And knowledge of tools such as Figma and Photoshop will also come in handy.

But web design is indeed a different discipline. And you may run into roadblocks when trying to make sense of its unique challenges. But take heart in knowing that virtually every other web designer has gone through the same thing.

All told, the transition from print to the web is as much about perspective as it is about skills. That’s why it’s important to have a basic grasp of how web technologies work. By starting with a solid foundation, you’ll likely have an easier time understanding the differences.

From there, aim to start with a few simple projects. Experiment to see what works and what doesn’t. Determine how typical users will view your work and keep refining the experience to please them.

Most of all, take advantage of the myriad of available resources. Tutorials and code references can help you get past those rough spots. And there is an online community that you can lean on for guidance.

In time, designing for the web can become like second nature. It just takes practice!

The post Tips for Graphic Designers Who Want to Build Websites appeared first on Speckyboy Design Magazine.

View Details

Adobe Lightroom is a powerful tool for managing and editing your photos. It’s an application with many apps inside one convenient package. Photographers use it as a hub to take their images from import to export.

But like most Adobe apps, it does have a learning curve. While it’s easy to get started with the application, you may soon feel overwhelmed by the many sliders and panels. And you might just be asking: how do I make my images look their best?

To help you conquer that learning curve, we have an extensive collection of tutorials that will help beginners get up and running quickly and allow professionals to learn something new. Whether you want to know more about importing, organizing, or adjusting images, there’s a tutorial for you here.

Table of Contents* Lightroom Beginner’s Guides * Adjustments & Edits in Lightroom * Masking & Selective Edits in Lightroom * Workflow & Library Management in Lightroom * Photo Effects in Lightroom

Free Lightroom Preset Collections

50 Free Lightroom Presets
Free B&W Lightroom Presets
Free Movie Lightroom Presets
Free Outdoor Lightroom Presets
Free Portrait Lightroom Presets
Free Travel Lightroom Presets
Free Wedding Lightroom Presets Lightroom Beginner’s GuidesThis section focuses on resources that can take you from beginner to proficient users. They are all-in-one guides that give you what you need to know to get up and running in Adobe Lightroom.
Lightroom Classic Tutorial Course for Beginners This comprehensive guide is the perfect launch point for Lightroom learning. It takes you from import to export to help you get the most from your images. Plus, you’ll see tips to speed up the editing process at every step.
The Lightroom Tips Beginner Photographers Should Know When you learn a new app, it’s hard to know its possibilities. What features does it include, and how do you make the most of them? This video helps you do that with an overview of top features you might not know.
Adobe Lightroom Tutorial for Beginners 2022 If you’re running short on time, this is the Lightroom beginner’s guide for you. It features all of the essential Lightroom tools in just over 20 minutes.

Adjustments & Edits in LightroomThe adjustment and editing phase is where you change the look and feel of an image. Photographers love this step because it unlocks the potential of the frame you captured. With so many possibilities, these tutorials will help you explore how to get the most from a raw image.

Learn the Basics of Photo Editing Lightroom The first time you open Lightroom’s Develop module, you might feel overwhelmed by the number of sliders you see. This crash course helps you think about how to control them so that you can create the image you have in mind.
Lightroom Classic Color Grading Tricks If you can control color in the editing process, you’ll be able to create stunning effects. Lightroom gives you many tools to color grade your images, and you’ll learn six tricks in this video that you can use instantly.
How to Create a Ghostly Light in Lightroom Classic Want an edit that’s out of the ordinary? This ghostly light is precisely what you’re looking for. Learn to recreate it with this quick video.
How to Edit Dramatic Landscapes in Lightroom Landscape photography captures the magic of the world. Your shots may need some tweaks to reflect the real-life magic that great scenes make us feel. Learn those editing tricks in this video.
Better Portrait Editing in Lightroom A great portrait is hard to recreate. After all, people are never in the same moment twice. You can get the most out of your portrait image with these tips.
How to use the HSL COLOR Panel in Lightroom Lightroom gives precise color controls with the Hue, Saturation, and Luminance (HSL) panel. You can control how each individual color appears in your image. This tutorial will spark your creative thinking as you learn to command each color.
How to Color Grade Like a Pro in Lightroom If you want your images to feel like they’re part of a feature film, this is the Lightroom tutorial for you. This video teaches color grading techniques that feel like they’ve fallen straight off the silver screen.
Learn How to Use Tone Curve in Lightroom The tone curve is a magical tool that’s tough to learn but gives you a lot of power once you master it. This tutorial shows you the potential for several adjustments using the tone curve.

Masking & Selective Edits in LightroomLightroom has leveled up its local adjustment tools. That means that you can adjust and correct a region of an image with precise control. These tutorials will teach you to do just that.

Learn Masking in Lightroom Masking is more powerful than ever in Adobe Lightroom. That means you can adjust a specific area with the same level of control as the entirety of the image. Learn more about the latest masking features and how to use them in this guide.
Learn How to Mask with Luminance Range in Lightroom Classic The hard work of creating a mask is selecting the desired area of the image. Luminance range masking helps you make much faster selections by using brightness ranges. Learn how to use this tool with this screencast.
Learn How to Create a Dramatic Sky in Lightroom Who doesn’t love a dramatic sky that shapes a landscape photo? With sky-specific masking, Lightroom makes this process a breeze. Learn how in this video.
Learn How to Use Sky Masking in Lightroom Classic Sky masking is so powerful that it’s worth seeing a second perspective on how to leverage the feature. This resource hones in on the power of the AI-assisted sky selection tool.
Learn How to Use the Color Range Mask Tool in Lightroom Remember, masking is time-consuming. You need tools to help you speed up selection. This lesson shows you another technique for selection using a color range. Imagine selecting only the blue hues in an image, for example.
Learn How to Smooth Skin in Lightroom Your portrait clients are sure to appreciate your hard work during post-production. With this screencast, you’ll learn a helpful skin-smoothing technique. It will help to make your photo magazine ready with very little work.
Learn How to Use the Healing Brush Tool in Lightroom Classic Got a pesky object in your frame? Lightroom has you covered. You can remove it with the healing tool and the knowledge in this video.

Workflow & Library Management in LightroomOne of Lightroom’s go-to features is the ability to import, organize, and categorize your images. It helps you curate a collection of unlimited size. With the right tools, you can always find the image you need at a moment’s notice. These tutorials will teach you how.

Learn How to Master Importing in Lightroom Every edit begins with an import. It’s essential to nail this step so that your images are stored safely, and this tutorial teaches you the steps you need.
Learn How to Import & Organize Photos in Lightroom Classic Importing correctly is so crucial in Lightroom that it’s great to get a second perspective. Plus, this screencast goes further with tips to organize the structure of your library. It’s sure to save you time managing your library.
Learn How to Use Keywords in Lightroom Classic Keywords are crucial. They help you tag images with meaningful reminders so that you can find them at a moment’s notice. Learn how to make the most of them with this video.
Learn How to Filter & Favorite Images in Lightroom Classic After you add keywords and other metadata, your library is much more explorable. But you’ll need to know more about filtering, which uses metadata to divide and conquer your library. Let this video be your guide.
Learn How to Use Screen Modes in Lightroom Classic This quick tip is a powerful one. You can alternate the display options you use in Lightroom based on the type of work you want to do. Learn how with this excellent tutorial.
How to Create Custom Print Layouts in Lightroom Classic A great place to finish your workflow is with a custom print. This tutorial will go beyond the basics and show you how to create prints with multiple images in one finished product.
The Most Important Checkbox in Lightroom Classic You need a second backup for your image edits. Lightroom supports this by creating small text files with image-level adjustments. Turn on this setting and learn why it matters in this video.

Photo Effects in LightroomHere you will find a collection of Lightroom tutorials that will quickly show you how to achieve a specific look or effect with your photos.

26. Cinematic Effects in Lightroom
This simple tutorial will show you how to bring a cinematic look and feel to any photo you want.

27. Stunning Blue Skies in Lightroom
This step by step tutorial will show you two easy methods for getting the most out of your blue skies.

28. Vintage Effects in Lightroom
With this step by step tutorial, you will learn how to add a vintage effect to your photos in Lightroom.

29. Monochrome Effects in Lightroom
Learn how to give your photos a vintage appearance using black and white monochrome colors in Lightroom.

30. Lomo Effect in Lightroom
Quickly master the techniques needed to give all your photos the quirky Lomography effect in Lightroom.

31. Light Leak Effects in Lightroom
With this step by step tutorial, you will be able to add light leak effects to almost every image in no time.

32. Soft Pastel Effects in Lightroom
This tutorial will show you the techniques needed to turn your shot into a softer, more heart pulling image.

33. Grainy Matte Effects in Lightroom
This tutorial will teach you everything you need to know about giving your shot a grainy matte finish.

34. Color Grade Landscapes in Lightroom
Learn how to make the right adjustments to your landscape photos to take them from good to great in no time.

35. Black & White Effects in Lightroom
Learn how to quickly transform any photo into beautiful high contrast black and white photos for a timeless look.

The post 35 Tutorials to Learn & Master Adobe Lightroom appeared first on Speckyboy Design Magazine.

View Details

If you want to know what frustrates WordPress users, just ask. Recently I put out a call on Twitter for recommended improvements to its media management features. And I received a virtual earful of gripes and suggestions.

True, it’s a thoroughly unscientific sampling. But it appears that the WordPress Media Library is lagging behind the times.

There are a couple of potential reasons for this. First is that the open-source project has shifted focus toward the Block and Site Editors. Both are large, complex undertakings. And they require plenty of human involvement. That leaves little time to address other issues.

In addition, there are an untold number of plugins for enhancing the Media Library. It’s another example of the WordPress community stepping up to fill gaps in the core software.

Still, it seems clear that some of these features should be baked into the core. Here’s a look at a few areas where WordPress media management could stand improvement.

The Ability To Replace Existing FilesIt sounds so simple. Yet replacing or overwriting an existing media file in WordPress is anything but. You can’t easily do it without a plugin like Enable Media Replace.

And there are many times when this functionality could be useful. For example, consider a website with a collection of important PDF documents. Let’s say they’re updated every year.

Sure, you can simply upload new versions each year. But new files are assigned a new permalink. Thus, any site that links to the previous documents will show outdated content. Not to mention performing a possible search and replace to make sure the correct URL is being used on the original website as well.

This can be a major inconvenience to site administrators. But it’s particularly difficult if the website hosts a lot of media files. Every change can require multiple steps. The result is a lot of time spent tracking where a given file is referenced.

It’s great that plugins exist to streamline the process. However, not everyone is aware of them. Therefore, these features would be a helpful addition to WordPress core.

The Enable Media Replace plugin.

Categories and Tags for Media Files + Improved SearchAs it stands, media files in WordPress are organized into date-based folders. For example, every file you’ve uploaded in February 2023 would reside in: /wp-content/uploads/2023/02/

From a file storage perspective, this makes things nice and tidy. But it doesn’t do much to help users find a particular file.

And while there’s a search feature, it’s quite limited in scope. You can search by a file’s title meta, but that tends to be rather generic by default. In addition, you can narrow things down by media type (image, document, video, etc.) and date uploaded.

But what if you don’t remember a file’s title or upload date? You’ll be stuck clicking through numerous files, hoping to find a needle in a haystack.

That’s where the ability to create custom taxonomies, categories, and tags could help. It’s the sort of functionality included in the Enhanced Media Library plugin. And it could make locating a particular file much easier.

Imagine being able to classify media files in a way that makes sense for your website. Any files used in a press release section, for instance, could be tagged as such. This assigns a purpose to each file and provides context for users.

Or you might search based on the contents of the caption or description meta. These items may offer more specific detail than the title alone.

Search engine optimization (SEO) and privacy could also be factors. On a membership website, there could be certain media files that you don’t want to be indexed. Blocking a specific taxonomy from search engines would be desirable.

The WordPress Media Library can easily get out of hand. The above features could bring some sanity to it.

Using the Enhanced Media Library plugin to sort images by category.

More Control Over Image SizingBy default, WordPress creates multiple versions of each image you upload. Besides the original file, you’ll find large, medium, and thumbnail sizes. And a theme or plugin can programmatically add custom sizes as well.

This comes in handy for serving up appropriately-sized files for mobile devices via srcset. The downside is that it can also eat up storage space and processing power. Plus, not every version of an image may end up being used.

In a time when we must be conscious of a site’s environmental impact, every unnecessary process should be reconsidered. Yet there’s no easy way to stop multiple versions of an image from being generated. This results in wasted resources.

The WordPress Media Settings (Settings > Media) are short and sweet. In addition to organizing uploads into date-based folders, you can also set default custom image size dimensions.

More control in this area would be beneficial. The ability to turn off a particular image size (the thumbnail, for example) could reduce clutter. And limiting files generated on a per-image or per-post-type basis might also prove useful.

Energy, storage space, and processing cycles are finite resources. Changes to the way WordPress handles uploaded images could help to minimize usage in all three areas.

Find Out if Media Is Being UsedAs a website evolves, some media files can fall by the wayside. They merely sit on the server collecting virtual dust.

But identifying these files is difficult. And in some cases, there is a risk in allowing them to stick around.

Consider our earlier example of an outdated PDF document. It might contain incorrect information. Therefore, a user who finds this file via a search engine could be led in the wrong direction. An inconvenience at the very least.

Plugins like Media Cleaner can keep you informed of unused files. It identifies them and provides a way to review and take further action.

But it seems like this could also be implemented as core functionality. Since WordPress can already tell you if a file is attached to a particular piece of content, it stands to reason that it could tell us what’s not being used as well.

The goal should be to put website owners in control of what’s available to users.

The Media Cleaner plugin finds unused files.

WordPress Media Management Has Room for GrowthMedia files are an integral part of modern websites. As such, the ability to manage them efficiently is critical.

This is an area where WordPress has plenty of room for growth. The existing Media Library has some useful features. But it’s also lacking key functionality that takes things to a higher level.

Thus, it’s worth taking a good long look at potential improvements. The plugins mentioned above can serve as inspiration, as can user feedback.

WordPress core doesn’t have to do everything when it comes to media. But it could certainly do more.

The post How WordPress Media Management Can Be Improved appeared first on Speckyboy Design Magazine.

View Details

TypeTrials – Use this virtual playground to experiment with variable fonts.

Shuffling Typography Animation – Learn how to build a shuffling type animation with various effects for a geeky terminal look.

Design for AI: What Should People Who Design AI Know? – Defining a unique set of skills for “AI Design.”

How To Convince Clients To Invest in a Custom Website – Help prospective clients understand the differences between custom websites and those from DIY builders.

The Truth About CSS Selector Performance – Tips for improving how well CSS performs.

ChatGPT Is Constantly Tricked by People, but Who’s Fooling Who? – A look at what makes the AI platform so easy to trick.

Beyond Design & Development: Skills to Boost Your Career – Exploring three skills that can help provide a boost to your career.

How To Build A Magazine Layout With CSS Grid Areas – Techniques for creating this complex and popular layout style.

Visual Design Rules You Can Safely Follow – A collection of rules to help you create attractive and accessible designs.

50+ Free Photoshop Actions for 2023 – Create amazing image effects in less time with these actions.

Moving Backgrounds – Practical examples for implementing moving background images.

Native CSS Masonry Layout – You’ll no longer need JavaScript to create this popular layout type.

8 Black & White CSS & JavaScript Snippets That Make a Bold Statement – A mix of basic colors and incredible effects.

Atlas icons – A free, open-source library with 2,700+ icons.

How to Favicon in 2023 – A fresh look at the use of favicons in modern web browsers.

New AI Image & Text Generator Blocks Arrive in the WordPress Editor – WordPress.com is experimenting with AI content generation tools.

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

View Details

Not so long ago, web design was a brand-new industry. As such, there weren’t many opportunities to get a formal education on its fundamentals. Thus, the most direct path to becoming a professional was to teach yourself the necessary skills.

That’s how my career started. I studied the source code of different websites and figured out how things worked. I experimented with Photoshop, CSS, and eventually PHP and JavaScript. Most of what I know has come from the process of trial and error.

But being self-taught brings a mixed bag of feelings and challenges. On the one hand, it’s very freeing. On the other, it can be scary. It can even lead to feeling less qualified than your peers.

With that in mind, let’s explore the good, bad, and ugly of being a self-taught web designer.

Learn What You Want, How You WantThis is where the sense of freedom comes from. There’s an incredible depth of educational resources available for web design and development. Thus, you can pick and choose your focus.

That contrasts with formal education. There, you are obliged to follow a set path in your learning. This is usually for a good reason (you need to understand the basic principles before tackling the smaller details). Still, learning on your own means having the right to set your agenda.

I believe there is a significant upside to learning the skills that interest you the most. For one, you’re more likely to be passionate about the subject matter. When following someone else’s curriculum, it can be difficult to find the same enthusiasm (something I struggled with in school).

And because you are taking a different path, you might start thinking differently. This can lead to creative ideas and solutions that may not have occurred to you otherwise.

Finally, when it comes to how you learn, there are unlimited options. It might be a series of tutorials or a video-based training course. Whatever your preference, you can choose the format that best suits your learning style.

You Might Miss Something ImportantPerhaps the biggest downside of being a self-taught web designer is that there could be gaps in your skill set. And that could mean missing something important.

For example, let’s say you want to learn how to do some specific tasks with PHP. You may find a great tutorial and master its content. That’s all well and good. But what if the tutorial left out a major point of emphasis, such as security?

I’ve run into this situation in my career. Learning things in a piecemeal format works to some degree. But when put into practice, I often find that I need to search out other details. Some items may have been either glossed over or ignored.

This isn’t a critique of the available resources. Rather, it’s an observation of this approach to learning. It’s an area where traditional education has the upper hand.

Therefore, it’s important to recognize whatever gaps exist and seek to fill them in the best you can.

Staying Relevant in a Competitive FieldDespite the potential knowledge gap, a self-taught designer can indeed hang in there with the competition. There are a couple of reasons for this.

The first is that our industry includes a wide range of niche markets. Each of us has strengths and preferred areas of specialty. Not to mention the array of price ranges out there. As such, the list of direct competitors may be narrower than we think.

The niche I’ve worked in for the past two decades has allowed me to make a decent living. It has also created opportunities for continued learning. I’m not the most highly-skilled person. But it proves that you don’t have to know everything to find success.

Second, the job description has changed for many of us. The prevalence of content management systems (CMS) and no-code tools provide a great foundation. From there, we can go as far as our skills (and desire to learn) will take us.

Understanding how these multiple pieces fit together is as much a part of our job as building a beautiful UI. That provides a market for both formally and self-educated web designers.

A Unique Opportunity for the Right PersonOne of the most amazing aspects of a career in web design is that you don’t necessarily need a formal education. It requires a little bit of talent, an internet connection, and a desire to learn. And you can apply your skills as a freelancer or by working for someone else.

Being self-taught may be the more difficult path to take. For all the freedom it provides, you might miss out on both the fundamentals and finer details of the craft. And once you’ve established yourself as a professional, finding time to improve your skills can be tough.

Still, if you understand the challenges and love what you do, you can overcome just about any obstacle. It’s an opportunity that seems truly unique to web design.

The post The Ups & Downs of Being a Self-Taught Web Designer appeared first on Speckyboy Design Magazine.

View Details

In a competitive job market like the creative industry, it’s important to make your resume stand out from the crowd. One way to achieve this is through an eye-catching design that showcases your skills and work experience in a creative and professional way.

Potential employers are busy people, after all. They have the time-consuming task of reading many applications and resumes before selecting the perfect person. When you have the arduous task of sifting through so many CVs, they’re only going to be looking for something memorable and unique that will stand out from the rest.

And that is where your resume design plays such a critical role in the application process.

This collection of free resume templates has been specifically created for designers. From minimalist and modern designs to more creative and artistic styles, these templates offer customizable layouts and easy-to-use formats (Figma, Photoshop, Illustrator, Word, and InDesign) that are perfect for all creative job seekers.

More Free Resume Templates* Free InDesign Resume Templates * Free HTML Templates for Resumes

Clean Cover Letter & Resume Template (Free, in InDesign Format)This free resource from Pixelbuddha is a highly customizable resume and cover letter template with a sleek and professional design, well-organized sections for showcasing your skills, education, and experience, and it comes with a minimalist layout.

Neat Resume Template for Designers (Free, in Photoshop PSD Format)The Neat Resume is a contemporary and customizable free template with an eye-catching header, well-organized content sections, and a clean, minimalist design that focuses on beautiful typography.

Minimalist Resume Template for Creatives (on Envato Elements, in PSD, AI & InDesign Formats)This resume template prioritizes readability and attention to detail, making it an effective and polished option for creating an impressive resume. As well as a resume template, you will also get a cover letter and printable portfolio template.

Minimal Resume Template (Free, in Figma Format)Simple and minimalist and featuring well-organized and spacious content sections, this free resume template is fully customizable in Figma with editable colors, fonts, and layout.

Clean & Modern Resume Templates (on Envato Elements, in Word, PSD, AI & InDesign Formats)With a clean and minimalist design, this highly creative resume template comes with clearly labeled and organized layers, making it easy to customize in your favorite application.

Clean & Professional Resume Template (Free, in Figma Format)This highly professional and polished resume template focuses on beautiful typography and perfectly measured content sections. As well as a resume template, you will also get a printable portfolio template that has been designed in the same style as the resume.

Resume Template for Designers (Free, in Sketch & PSD Formats)This free resume template comes with a simple and stylish design, well-organized sections, and customizable Sketch and Photoshop files. Its attention to detail and readability make it an effective option for creating a professional-looking resume.

Resume Template for UX & UI Designers (Free, in Figma Format)Minimal Resume Template for Creatives (Free, in Illustrator AI Format)Whether you’re looking for your first creative job or a professional looking to update your resume, this free and highly customizable minimalistic resume is all you need to make a memorable first impression.

Creative Resume & CV Template (on Envato Elements, in Word, AI & InDesign Formats)With its focus on creativity, this resume template is perfect for all designers and creatives looking to create a polished and highly professional resume.

Multi-Color Modern Resume Template (Free, in PSD, Sketch & Word Formats)Clean, colorful, and highly customizable, this free template is a great choice for creative job seekers and professionals that need to create or update their resumes quickly.

20 Resume & CV Templates for Designers (Free, in Figma Format)This is a collection of 20 modern and minimally designed resume/CV templates. All of the templates focus on clarity and readability, making it an excellent option for creating a polished and professional resume in Figma.

Resume, Cover Letter & Portfolio Templates (on Envato Elements, in Word & InDesign Formats)Perfect for all types of creatives, this package includes a resume template, a cover letter template, and bonus business cards. Minimal, customizable, and professional, it is the complete job application package.

Resume Template for UX Designers (Free, in Figma Format)Highly customizable and sporting a professional layout, this free Figma resume template for UX designers features sections for your personal information, work experience, education, skills, and any other relevant information.

5 Bold Resume/CV Templates (Free, in Figma Format)Featuring bold typography, eye-catching graphics, and minimalist layouts, this collection of five free Figma resume templates is perfect for designers, developers, and marketers looking to create a professional layout.

Creative & Modern Resume & Cover Letter Templates (on Envato Elements, in PSD, AI & Word Formats)This modern and professional resume template features a minimalist layout and puts a lot of focus on bold typography. It’s fully customizable to match personal branding and includes sections for education, work experience, and skills. It also comes with a cover letter template.

Minimal Resume or CV Template (Free, in Figma Format)This spacious resume template features a black-and-white color scheme and is perfect for professionally showcasing your work experience, portfolio, education, and contact information.

Typographic Resume Template (Free, in Word & InDesign Formats)Make a great first impression with a resume that features beautiful and bold typography. This template can be edited in InDesign as well as in Microsoft Word.

Simple Resume & Cover Letter Template (Free, in Word & InDesign Formats)This minimalistic resume template has a clean design that’s been neatly organized into two columns. There’s also room for your profile photo, and the template can be edited in both InDesign and Word.

Self Promotion CV Template (Free, in Illustrator AI Format)This resume template has a bold and unique design that’s perfect for promoting your skills and projects. The template can be edited in Illustrator and features a two-page design.

Resume Booklet Template for Designers (Free, in Photoshop PSD Format)If you want a creative resume design, be sure to take a look at this resume template. You can edit it in Photoshop and use it to apply for a job in any creative field.

A Simple Resume Template (Free, in Photoshop PSD Format)This resume template has a clean, two-column layout that’s easy to edit. The template was designed in Photoshop and comes with well-organized layers.

Resume Template Vol.3 (Free, in Photoshop PSD Format)Check out this resume template featuring a modern and minimalist design. The template includes a one-page resume made with Adobe Photoshop and well-organized layers for easy editing.

Clean & Minimal Resume & Cover Letter Template (Free, in Illustrator AI Format)This resume template was designed in Illustrator and contains a two-page resume and a matching cover letter. Thanks to its minimal design, it can be used for any job application.

Minimalistic Resume Template (Free, in Photoshop PSD & Illustrator AI Formats)Capture the attention of any employer with this beautiful resume template. It has a beautiful header image and uses modern and clean typography that’s easy to read.

Clean Resume Template (Free, in Illustrator AI Format)This clean resume template has the standard two-column layout where you can easily showcase your education and work history in the larger column and use the sidebar to share your contact information and skills. The template can be edited in Illustrator.

There are plenty of web-based services for creating a resume, and yes, the internet is chock full of resume or CV templates, but not many of those have been designed with creativity in mind. They certainly don’t consider modern design trends, nor do they consider the competitiveness of applying for a creative role.

The free resume templates we have for you here have all been created by designers for designers. They’re all perfect templates for creating a resume that will help you land your dream design job. Good luck!

The post 20 Beautiful & Free Resume Templates for Designers appeared first on Speckyboy Design Magazine.

View Details

The ability for clients to update their websites has become a common project requirement. Thanks to content management systems (CMS) such as WordPress, this functionality is now well within reach. In its most basic form, a user needs only an account and a web browser to get started.

But while the technology is in place, a streamlined experience for clients isn’t guaranteed. Depending on what types of content they’ll need to add or edit, the process can become overly complex. The result could be anything from a broken layout to desperate calls (or emails) asking for help.

Therefore, web designers must carefully consider how we implement certain features. It’s one thing to build a UI that a seasoned developer can manage. Crafting something easy for a non-coder to work with is quite another.

The answer is in making things as simple and intuitive as possible. Here are a few things to keep in mind when setting your clients up for content management success.

Consider What Could Go WrongA little planning now can save a lot of pain in the future. Especially when it comes to the portions of a website that will be maintained by your client.

Much can change between the time a website launches and when a client needs to make a change. Needs may have evolved. And clients may not be aware of the limitations of what you’ve built.

That’s why it’s important to think ahead. Not only should you consider the expected usage of a feature, but also how it will react to the unexpected.

Think of an area that is comprised of text. What happens if your client decides to add an image to the mix? How will that impact the integrity of the layout? Will it continue to work across mobile and desktop devices?

While you might not be able to prepare for every scenario, you can build a great deal of resiliency into a site’s design. This will keep things looking good – even when a client goes rogue with content. Plus, your clients won’t have to face the trauma associated with a broken website.

Don’t Assume Clients Are Tech SavvyIn situations where you’re implementing a UI, simple is always better. And it’s crucial to remember your intended audience.

Sometimes, it’s difficult to place ourselves in the shoes of a user. Not everyone lives and breathes code or high-tech tools. Thus, don’t make assumptions as to how tech-savvy the person using your creation is. If anything, start from ground zero.

Language is a prime example. Use terminology that anyone can understand. Avoid buzzwords and complex explanations. Instead, opt for content that is short, succinct, and easy to read.

Visual indicators can also be of help. The use of icons, animations, and quick tutorial videos makes for a more intuitive onboarding experience. And they can also serve as a handy reference if a client isn’t sure of how to perform a task.

By designing the simplest UI possible, you’ll empower clients while saving yourself future support requests.

Take Complex Processes Out of a User’s HandsThe more tasks we ask a user to complete, the more opportunities there are for mistakes to be made. This rule of thumb applies just as much on the back end as it does on the front.

For example, consider a feature that allows a client to swap out an image. Perhaps that image needs to be cropped to a specific size to keep the layout intact. Or it might need to be in a particular format to maintain a transparent background.

That’s fine – as long as the client is adept at using a photo editor such as Photoshop. And they also need to remember to crop and save the image to match the website’s requirements.

Still, there’s always a chance they’ll forget one or more of these steps. It’s also possible that a new team member isn’t aware of the process you have put into place. This could produce undesired results.

This type of scenario might be avoided by employing the help of some tools. In the case of WordPress, the software is capable of automatically cropping an uploaded image to a predetermined size. And using a plugin such as Advanced Custom Fields allows us to limit what types of files are uploaded to a particular feature.

By automating these processes, we’re removing multiple layers of complexity. As such, our client won’t need to remember these steps. Instead, they’re taken care of in the background. And if the client does make a mistake, we can build in a failsafe to check and remind them of what needs to be done.

If a Task Is Too Complex, Tell Your ClientDespite our best efforts, some tasks may require a high level of technical knowledge. This might be a tricky design feature your client insisted on or a bit of custom code that powers crucial functionality.

This introduces some additional risks in terms of maintenance. As we noted above, multistep processes leave more room for user error. And anything left out in the open is fair game for breakage.

Rather than leaving a gaping hole in your client-proofing efforts, discuss the situation with your client. Explain the risks involved and offer ways to avoid issues. And if a feature is simply too difficult, perhaps it’s best left in your capable hands.

Regardless of how you manage the task, having an open dialogue is the best place to start. When clients understand the limitations, they’re more likely to help you arrive at the best solution.

Show Clients the Best Side of TechnologyThere are plenty of reasons why a client would want to manage their website updates. And web designers have a variety of ways to provide the required functionality. But, as they say, the devil is in the details.

The challenge is in making the process accessible to all users with basic skills. That means building intuitive features that can withstand unexpected usage. Users can also greatly benefit from automating complicated tasks when possible. And if a task can’t be simplified, it may be worth managing yourself.

It all starts with creating a plan. Think about how things should work and what might go wrong. Communicate with your clients and help them set up a workflow that eases their burden.

Yes, it’s a lot of work. But the end goal is helping clients to help themselves. When they can do their work efficiently and without problems, that benefits everyone – including you!

The post Keeping Barriers Low for Clients Who Update Their Website appeared first on Speckyboy Design Magazine.

View Details

Figma is a browser-based design tool that lets users create, edit, and collaborate on user interface designs. It’s a popular choice among designers, developers, and creative teams, thanks to its powerful interface and real-time collaboration features.

Tutorials are an excellent way for beginners to learn new design tools like Figma. You can quickly learn new skills or improve techniques.

Tutorials provide step-by-step visual examples, making it easy to understand and follow. You’ll learn how to navigate the interface, create and edit designs, and make use of Figma’s features.

In this round-up, we feature the best Figma tutorials from around the web. They cover a wide range of topics, from UI basics to more advanced techniques. With the help of these tutorials, you’ll be able to master Figma in no time.

Table of Contents* Figma Tutorials For Beginners * Figma Web Design Tutorials * Figma Auto Layout Tutorials * Figma Prototype & Button Tutorials * Other Figma Tips & Tricks * Free Figma Templates Figma Tutorials For BeginnersTo get started, let’s explore some winning resources for beginners. If you’re totally new to Figma, these handy tutorial guides will help you get up and running fast.

What is Figma? (Video Tutorial)Are you just curious about Figma and what it can do? Those questions and many more are answered in this brief, bite-sized tutorial video for 2023.

Learn Figma In Under 10 Minutes (Video Tutorial)Ready to get started with Figma? This quick intro video is a great way to get going. It covers the basics in less than ten minutes!

Design a Website from Start to Finish with Figma (Video Tutorial)Do you want to build an entire website in Figma but need help figuring out where to start? This video is here to help, showing you how to build an entire website from scratch using Figma.

Introduction to Figma Prefer written tutorials over videos? Try this one, with handy step-by-step guides to help you find your way around Figma and its basic features.

A Complete Figma Tutorial for Beginners This complete guide is another resource for Figma newbies. It assists you with getting up and running, building unique content with Figma quickly.

A Beginners Tutorial to Figma (Video Tutorial)Many of us learn best by doing. This complete video guide showcases and explains the essentials of Figma.

How to Use Figma for Your Next Project Last but not least, start your Figma journey with this introductory tutorial. A sample design is used for a real-world example. You can follow along and learn how to start making edits of your own.

Figma Web Design TutorialsNow, let’s dive into the details. You’ll learn how to start using Figma to design amazing websites of your own in no time. Read on!

How to Use Figma for Website Design Figma is crafted for robust website designs. Learn how to use Figma to construct sleek, readable layouts in just a few clicks.

Advanced Features in Figma Explained (Video Tutorial)Building a workflow in Figma is a key part of success. This video guide shows off several productivity tools that will help you work smarter and create designs faster.

Variants in Figma Tutorial (Video Tutorial)Variants in Figma help you make alternate versions of a single object. This video shows you how to use them and offers ideas for how to leverage their power effectively.

Figma Auto Layout TutorialsIn this set of tutorials, you will learn how to use Auto Layout in Figma. With it, you can make dynamic designs that adapt to different screen sizes and layouts.

Auto Layout & Components in Figma (Video Tutorial)You’ll learn how to use two of Figma’s essential features here. They are auto layout and components, both of which are covered here in detail. You’ll watch the features at work and learn to troubleshoot common issues.

Getting Started with Auto Layout in Figma (Video Tutorial)Auto Layout in Figma is a newer feature for building advanced designs. It can seem daunting, but this tutorial simplifies things. It’s detailed without becoming overly lengthy.

Learn Auto Layout in Figma Another option is this written Auto Layout article. It stands out for its detailed descriptions of Auto Layout features and how they work. Use it to boost your understanding of Figma’s creative options.

Figma Auto-Layout with Responsive Components Tutorial (Video Tutorial)Combine the power of Auto Layout and components using the skills you’ll learn in this tutorial. They help you maintain a steady design aesthetic across projects, even while working faster.

Figma Prototype & Button TutorialsPrototypes in Figma let you create interactive mockups of designs. Buttons are one of the critical parts of creating interactive prototypes. Here, you’ll learn to use both.

Working with Figma Button Components Components are user interface elements in Figma. Learn how to build and work with them in this task-based tutorial article.

The Correct Way to Prototype in Figma (Video Tutorial)Prototyping helps you see how users will experience your finished product. It ensures your content works flawlessly and stays current. To do it right, turn to this tutorial guide for Figma.

Create & Test a Prototype in Figma Robust and detailed, this tutorial shows you how to create a prototype in Figma. You’ll learn how to connect key parts of your design, and then share it with others.

How to Create a Button With a Hover Functionality in Figma (Video Tutorial)In this guide, you’ll learn how to create a button in Figma. This is an incredibly common use case, and here, it’s simplified so that you can get to work quickly.

Three Tips for Building Complex Prototypes in Figma Here, you’ll learn three tips for complex Figma prototypes. They will help you dial in the specifics you need to put your work to the test.

Other Figma Tips & TricksTo close out our tutorial roundup, we’ve compiled even more helpful resources. These written guides and videos help you make the most of Figma by unlocking its most powerful features.

10 Figma Hacks for Boosting Your Productivity Users of every skill level can always enjoy learning new skills. Here, ten Figma tips and tricks are featured to help you do your very best work. It’s a fast read that may save you hours of work.

15 Tips to Design Faster in Figma (Video Tutorial)Expert Figma users know tips and tricks that save time. Here, 15 of these are compiled into one fun video. It’s essential viewing if you want to master Figma.

How to Export Figma to HTML Exporting HTML is easy in Figma – and you don’t have to learn to code! Learn exactly how in this written tutorial. Prefer a video? You’ll find a link here too.

Advanced Figma Tips & Tricks (Video Tutorial)Advanced Figma features help you focus on details and fine-tune designs. Here, you’ll learn how to scrub fields, save image styles, add properties, and so much more.

How to Build a Design System in Figma You don’t have to construct design systems from scratch. Figma supports work just like this, and the fundamentals are mapped out in this tutorial guide.

What is FigJam? FigJam is a whiteboard built by Figma that works online. It’s an effective tool for design and collaboration. Learn the basics and get to work with FigJam after learning about the features in this tutorial.

The post 25 Fantastic Tutorials For Learning Figma appeared first on Speckyboy Design Magazine.

View Details

Can web design still be considered a “new” industry? Sure, it hasn’t been around for as long as tech stalwarts like software development or graphic design. But it’s no longer an emerging career opportunity, either.

The industry has matured. And the job description has evolved as well. Web designers are expected to know much more than basic HTML and CSS. At the very least, we need to understand the tools that help us build with those languages.

But that’s only a starting point. The depth of available knowledge is staggering – as is the variety of technologies we can work with. Even the most dedicated designers would have difficulty absorbing it all.

The expectation used to be that web designers had to know a little bit of everything. In addition to the basics, we could dabble in PHP, JavaScript, MySQL, server operating systems, and graphics tools. But being a generalist only gets you so far these days.

Therefore, maybe it’s time for us to rethink what it means to be a web designer.

Code Is Now an Optional SkillThe past few years have brought a massive shift regarding web design tools. A wave of no-code editors has made it possible to build without back-end expertise.

WordPress alone offers several options – including the baked-in Block Editor. This allows us to visually create custom page layouts and add functionality. Meanwhile, the Site Editor takes things a step further. It extends those block-based capabilities into the site’s theme templates. And we can’t forget about the likes of Divi, Elementor, and other third-party page builders.

That’s just one example of a wider industry trend. Code, and coding knowledge, are becoming increasingly optional.

This doesn’t mean we should forego learning these skills. They are still crucial for features that go beyond what no-code tools are capable of. And there is still great revenue potential in building custom solutions.

But code is no longer a hard requirement for being a web designer. It’s now possible to launch a career by mastering these powerful tools, rather than studying computer science.

Finding Core Areas to Focus OnThe age of working with multiple platforms may be coming to an end. It’s still possible to use a myriad of content management systems (CMS) or server environments. But the task of keeping up with and maintaining these skills is daunting.

Each platform is unique and intricate. As such, switching from WordPress to Drupal to Shopify requires in-depth knowledge. While some broad concepts may carry over, there are so many details that don’t. Finding the time to learn them all isn’t for the faint of heart.

Web designers don’t necessarily have the luxury of doing one-off projects using a random CMS. The future implications of this approach can become a burden. Having a single client that uses a different setup than the rest might get in the way of those that are more relevant to your core business.

That’s why specialization is so important. The idea is to find a platform that allows you to achieve project goals and provide room for growth. Dedicate your time and resources to learning and evolving alongside it.

It’s still OK to experiment with other options. But by choosing a core focus, you’ll be able to build a solid foundation for your career.

Workflow Is as Important as Technical SkillsTechnology allows us to build websites faster than ever. That’s a double-edged sword, though. It means that we can get more done. But it may also leave us with more websites to maintain.

And as what we build becomes more complex, maintenance does too. This can result in being overwhelmed when managing client websites. Things like security holes, malware, bug fixes, and everyday software updates tend to pile up quickly.

Developing sound processes for website maintenance helps to calm the chaos. Without a system in place, you leave yourself open to risk. For example, making mistakes while rushing to get things done or, worse yet, forgetting critical steps.

Thus, you need an efficient workflow – no matter your level of technical knowledge. It can help you move from project to project with confidence. And when something does go wrong, you’ll be able to respond to it effectively.

Getting a website up and running is one thing. Keeping it functional and secure is a completely different skill set. Modern web designers must master both.

Web Design is an Evolving FieldWhen the web was a new medium, the expectations of what it meant to be a web designer were vastly different. It was the equivalent of being a virtual sheriff in the wild west, wrangling code and lassoing a variety of technologies.

These days, the definition has become more flexible. Coding knowledge, although helpful, isn’t always necessary. And working with a broad set of platforms has given way to specialization.

Yet this doesn’t decrease the amount of knowledge required to be proficient. The tools we choose to work with are more advanced. There’s still plenty to learn – it’s just more narrowly focused.

The processes we use for getting things done have also taken on a greater role. This is especially so for those of us who provide website maintenance. Managing multiple websites can easily get out of hand without an efficient workflow.

Indeed, web design has evolved quite a bit. And we’ve changed right along with it.

The post Rethinking What It Means to Be a Web Designer appeared first on Speckyboy Design Magazine.

View Details

Refraction, Dispersion, and other Shader Light Effects – Learn how to create realistic lighting effects with React Three Fiber.

How to Use Block Template Parts in a Classic WordPress Theme – A new feature that brings block-based editing to classic theme templates.

Accessible Hamburger Buttons without JavaScript – A look at building a navigation UI with CSS and HTML.

8 CSS & JavaScript Snippets for Creating Unique Photo Galleries – Examples that go beyond basic layouts and feature stunning effects.

Coding a Kinetic SVG Typography Animation – Create a captivating motion type effect using SVG and GreenSock.

A Fancy Hover Effect For Your Avatar – Make your avatar stand out by adding depth and movement.

35 Free Sets of Brushes for Procreate App – Add some bling to your artwork with these awesome brushes.

The Guide To Responsive Design In 2023 and Beyond – Tips and techniques for building modern responsive layouts.

clamp() Calculator – A handy tool for calculating viewport-based CSS clamp values.

Defining the Goals of Your Website Redesign – Why a redesign is an opportunity for more than just a fresh new look.

10 Best GitHub Repos for Developers – Improve your workflow with features, tools, and other items of interest.

CSS Art Tutorial: Create a Cute Cartoon Creature – A beginner-friendly guide to getting started with CSS art.

Learn Images – Take this free, in-depth course about using images on the web.

The Benefits & Dangers of a Designer’s Ego – Exploring the good, the bad, and the ugly of a designer’s ego.

CSS color-mix() – Mix colors, in any of the supported color spaces, right from your CSS.

How to Use Mastodon: A Step-by-Step Beginner’s Guide (2023) – Get started with this decentralized competitor to Twitter.

Calligrapher.ai – Experiment with this web-based tool for creating computer-generated handwriting.

WP20 Commemorative Logos – Special logos designed to celebrate WordPress’ 20th birthday.

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

View Details

The web design marketplace is flooded with choices. And it’s especially tough for those of us in the mid-to-high pricing tiers. We’re competing with both discount designers and DIY services that promise the moon (all for one low monthly price).

Thus, convincing a client to invest in a custom website can be difficult. They may see the low-cost options as being just as good. Or they simply may not understand the difference.

It’s up to us to educate prospective clients about what we have to offer. We must demonstrate the advantages of a custom website and its long-term value. Here are some tips for making your case.

Explain the DifferencesIf you offer custom design and development, it’s getting more difficult to compete based on price. Popular services like Wix and Squarespace offer business owners an easy and cheap way to build a website.

As such, designers will lose out when the decision is based on initial cost. But prospective clients don’t always look at the fine print. It’s often the details that show the true value of a service.

Let’s look at a few key factors worth pointing out:

Limited Functionality vs. Custom FunctionalityDIY services may offer functionality that a site owner is looking for…or not. They’re good at including features that users have come to expect. But they don’t offer everything. If what they have on hand doesn’t match your needs, you’re out of luck.

A custom website doesn’t necessarily run into these issues. If, for example, a WordPress plugin doesn’t exist for a desired feature, it’s possible to build one. You’ll pay more, but you’re also getting exactly what you want.

Nowhere is this more evident than in eCommerce. It seems that no matter how “simple” an online shop is supposed to be, there are always quirks. This often requires writing code or adding a niche plugin. That’s what puts the “custom” in a custom website.

Readymade vs. Original DesignDesign should be an area where web professionals have the upper hand. A custom website is built around your business and the message you want to convey.

This differs from squeezing your logo into a readymade theme. The ability to have something unique that matches your specifications is also important.

There will always be those who are willing to sacrifice a unique look in exchange for a lower price. In that case, there are other worthy arguments to make.

Locked In vs. Freedom to MoveWhen buying into a DIY service, you’re usually working within the confines of a walled garden. You can’t take your website with you since the platform is proprietary. Closed systems do have some advantages, but they’re also a one-way street.

A custom site using an open-source CMS won’t lock you in. You’re free to host it just about anywhere. And there are usually tools available to help you switch to a different platform.

Web Designers Offer Experience and ExpertiseA great website requires several ingredients. There needs to be a strategy behind its look, functionality, and content. Without such goals, it’s easy for a website to become inconsistent and aimless.

This is especially the case for small businesses. They may not have a team of experts on hand. It’s also an area where an experienced web designer can be an asset.

There is great value for clients in hiring someone who knows what they’re doing. A designer can pick up on those little details that would otherwise be missed.

An organization’s website is too important to be trusted by anyone less than an expert.

Building Successful Long-Term RelationshipsWeb designers often build long-term relationships with clients. And we are there to provide expertise, support, and advice. Those things can’t be easily replicated or replaced.

It’s an important distinction and a key selling point. The ability to easily communicate with a designer is vital. It’s also an advantage over large conglomerates. It sure beats waiting on hold for a support representative (who may or may not be able to answer your question).

Plus, the personal relationships we develop with clients mean that we are invested in their success. They’re not just another number. They’re a person who can rely on you to provide great service.

A dependable partner is worth their weight in gold. It’s one less thing for a business owner to worry about.

An Investment in GrowthWhen speaking with a potential client, note that building a custom website is a long-term investment. It’s something that can evolve and grow along with their business. While budget is an understandable constraint, you get what you pay for.

Many of the low-cost site builders provide a respectable product and have a legitimate place in the market. But in general, they’re for those with either extremely low budgets or a real DIY spirit.

Frankly, most organizations don’t have the time to put things together themselves. Nor do they have the design or marketing expertise to create something impactful. Depending on the tool they use, some end up frustrated by the process and decide to hire a professional.

Business owners tasked with doing it all themselves on a limited platform may be wasting time. It also takes them away from their true strength – running their business. That can stall growth and negate any initial cost savings. That’s kind of a big deal.

Custom Websites Are Usually the Best OptionIndeed, freelancers and small agencies aren’t the only game in town when it comes to web design. But we still provide a level of service and expertise that isn’t easily matched.

Those who need a website are hearing mixed messages about which path to choose. Some site builder tools can afford huge ad campaigns to tout their services. The rest of us must rely on the quality of our portfolios and communication skills.

Thankfully, that more personal approach provides us with the opportunity to show our true value.

The post How To Convince Clients To Invest in a Custom Website appeared first on Speckyboy Design Magazine.

View Details

Certain skills are essential for web designers. First, you need an eye for good design, an understanding of the concepts involved, and the ability to use related tools. Beyond that, a working knowledge of code (CSS, JavaScript, PHP, etc.) will help you put your ideas into action.

We often focus on these areas – and for good reason. They form the foundation of what it takes to work in this industry.

But there’s more to running a successful freelance web design business or small agency. Skills that don’t directly relate to code or aesthetics. Rather, they’re a part of being a well-rounded professional.

In some instances, you may need them to better serve your clients. Or they may take the pain out of everyday business tasks. Either way, there’s a lot of value in learning them.

Today, we’ll explore three skills that can help provide a boost to your career. Let’s get started!

Master All Things GoogleOdds are that you already interact with Google quite a bit. Using it to search for coding advice is part of being a developer, after all.

In addition, you might know some best practices for SEO. But there’s an opportunity to go deeper. You can help yourself and your clients in the process.

By studying the search giant’s latest algorithm changes, you’ll be able to pass this knowledge on to your clients. They’ll appreciate your ability to help them navigate an often-confusing subject.

Working knowledge of Google’s various tools can also be beneficial. For example, setting up custom reports in Google Analytics and interpreting the data will help clients make informed decisions.

Likewise, the data within Google Search Console offers further context. It can provide a glimpse of strengths and weaknesses in performance and usability. This data is crucial to refining a site’s user experience.

These tools are free to use, and you can charge clients for your expertise. If you’re looking to expand your service offerings, this area can be a revenue driver.

Learn the Basics of Content WritingThe need for quality content will never go away. Whether it’s a blog post, an About page, or support documentation – there’s plenty of demand.

Content helps organizations reach their audience. Plus, users need it to gain valuable knowledge. And there are plenty of benefits to anyone producing these materials.

Once again, this is a service that can be offered to clients. Procuring website content from them is traditionally a struggle. It’s often an obstacle to getting projects launched on time. By contributing your talents, you’re making money and keeping things on schedule.

But even if you’re not writing for clients, your content can still have a positive impact on your business. Blog posts that target prospective and existing clients help to establish you as an authority. These concepts can also be used in email marketing and on social media as well.

It should be noted that there are some barriers to writing. Most often, it’s a lack of confidence. The good news is that you don’t need to be an expert or technically perfect writer.

The ability to present ideas in a concise, easy-to-understand manner is the biggest challenge. Master that and you can be on your way to writing effective web content. Plus, writing tends to improve with experience. That, along with helpful tools to check for grammar and structure can further shorten the learning curve.

Become Adept at Record-Keeping & OrganizationWeb designers can get away with being disorganized to some degree. But as your business grows, it can become a drain on efficiency. Every second spent scrambling to find documentation or figuring out how much a client owes are seconds wasted.

Sloppy record-keeping can also land you in trouble. If your business undergoes a tax audit, missing documents or inaccurate numbers could make your situation worse.

Therefore, if you have a pile of papers on your desk (or a stack of important data sitting in your email), make a plan to get organized. It can provide you with peace of mind and more time to tackle your projects.

And speaking of projects, being organized is also important there as well. Using a productivity tool to track what you’re working on, what’s coming up, and when it needs to be done makes work easier. This way, you’ll be able to keep tabs on progress and be less likely to forget something important.

It may seem like a large (or even impossible) task. But there are several products, services, and blogs dedicated to organizational techniques. Take advantage of their ability to simplify the process.

The key is to start small and create manageable goals. Stick with it and you’ll remove a stressor from your life!

Valuable Skills That Help You and Your ClientsThe skills above share a few common threads. Each can enhance your everyday routine. And, even though they aren’t directly related to web design, they do offer a chance to increase both your revenue and productivity.

What’s more, you don’t necessarily have to add them to your list of client services. The fact that you’re learning for yourself also has value. At the very least, it can build confidence and increase your depth of knowledge.

One bit of advice: if you choose to learn any of the above, start with organization. It’s a skill that can carry through to every part of your work and life.

Outside of that, the world is your oyster. There are a variety of other skills that can benefit your business. The best part is that you can choose whatever interests you.

The post Beyond Design & Development: Skills to Boost Your Career appeared first on Speckyboy Design Magazine.

View Details

Most designers and photographers spend many hours in Photoshop, whether for designing or editing photos. In your client projects, you may receive photos that need to be touched up, or you may be a photographer yourself.

Photoshop brings the endless potential for photo editing, and one of the best ways to make use of Photoshop’s capabilities is to use actions. Photoshop actions are useful for quickly completing repetitive tasks, like performing the same steps to achieve a specific photo effect.

Countless actions can be purchased or downloaded for free, but finding the best high-quality actions can take quite some time. With that in mind, this post showcases fifty different action sets that are all available for free.

The actions showcased here will allow you to create all kinds of different types of effects for your photos, from matte and film looks, to vintage effects, to stunning black & white conversions, and even HDR. With these actions in your arsenal, you will be able to save time while editing photos, and you also will not need to scour the web to find high-quality free actions.

Please browse through this collection, find the actions that suit your needs, and try them with your photos. You’ll find that you can create some fantastic effects in very little time with the help of the right actions.

Table of Contents* Free Vintage & Retro Actions * Free Film & Cinema Actions * Free Color Effect Actions * Free Special Effect Actions * Free HDR Effect Actions * Free Black & White Effect Actions * Free Matte Effect Actions * Free Light Leak Effect Actions * Free Golden Hour Effect Actions * Free Sketch Effect Actions * Free Lomo Effect Actions * How to Install Photoshop Actions

More Photoshop Actions:

3D Effect Photoshop Actions
Art Effect Photoshop Actions
Black & White Photoshop Actions
Bokeh Effect Photoshop Actions
Cartoon Effect Photoshop Actions
Cinema Effect Photoshop Actions
Dispersion Effect Photoshop Actions
Double Exposure Effect Photoshop Actions
Glitch Effect Photoshop Actions
HDR Effect Photoshop Actions
Light Leak Effect Photoshop Actions
Retro Effect Photoshop Actions
Sketch Effect Photoshop Actions
Text Effect Photoshop Actions Free Vintage & Retro Photoshop ActionsOld & Dirty Photoshop Action (Free)Turn your colorized photos to black and white, and then apply a subtle vintage effect. The action works with Photoshop as well as Lightroom.

Animated Retro Vintage Film Photoshop Actions (with Envato Elements)This action adds a vintage retro look and feel to your photos. It can also be applied to videos and includes 24 different colors, which are applied non-destructively.

Vintage Landscape Photoshop Action (Free)As the name suggests, this free Photoshop action is perfect for landscape photos that you want to style to appear vintage.

Faded Films – 75 Film & Retro Effects (with Envato Elements)Apply the faded look similar to Instagram filters with this collection of 75 retro and film effects for Adobe Photoshop. Actions are easy to use and customize.

Instant Hipster Retro Photoshop Actions (Free)This Photoshop action pack contains ten actions that will make your photos appear more retro and vintage. The actions mimic Instagram filters.

Vintage Art Photoshop Action (with Envato Elements)This Photoshop action makes use of various brushes, filters, and effects to create a vintage art look. It works well with action photos.

Faded Retro Photoshop Actions (Free)This collection of Photoshop actions will make any photo appear aged and give it that old-time look and feel. The pack includes several colorized effects and a subtle light leak effects.

Vintage Heaven Photoshop Action (Free)Apply a nice vintage look to your photos with the help of Photoshop and this beautiful set of Photoshop actions. The actions work with Photoshop CC versions.

Vintage Wedding PS Action (Free)Wedding photographers rejoice as this free Photoshop action will allow you to add a vintage effect to your wedding photos. The collection comes with a total of 15 individual actions.

Retro Effects & Polaroid Frame Photoshop Actions (Free)With this collection of Photoshop actions, you will be able to quickly generate vintage, lomo, and retro effects, and apply them to your photos.

Free Film & Cinema Effects Photoshop ActionsOld Film Photoshop Action (Free)Try this Photoshop action if you want to apply an old-film look to your photos. The action supports Photoshop CC and Lightroom 4 and higher versions.

Vintage Film Photoshop Actions (with Envato Elements)This pack of 10 Photoshop actions will turn any photo into a vintage-looking photograph. The pack supports non-destructive editing.

Cyberpunk Photoshop Action (Free)This free action applies a specific set of effects that will give your photos a cyberpunk-style. Cyberpunk is characterized by a futuristic feel, featuring neon lights, and sci-tech elements.

Free Cinema Photoshop Action (Free)This Photoshop action, called Warm Cinema, will give a cozy and cinematic look to your photos. This action is part of a more extensive collection and speeds up your workflow considerably.

Film & Cinema Effect Photoshop Actions (with Envato Elements)Try this Photoshop action if you want your photos to have a cinematic look and feel. This collection is perfect for bloggers, wedding, and portrait photographers.

Vibrant Film Photoshop Action (Free)This Photoshop action produces an interesting vintage effect with brilliant, vibrant colors. The action works with Photoshop as well as Lightroom.

Film Effect Photoshop Action (Free)Make your photos come to life with this Film Effect Photoshop action. The action makes your colors pop and applies them non-destructively.

Free Color Effects Photoshop ActionsSplit-Toned Photoshop Action (Free)This free Photoshop action will apply a vintage-like, split-toning effect to your photos, enhancing the color and feel of the shot.

Double Color Exposure Actions (with Envato Elements)Create a striking effect with your photos, text, and other graphic designs thanks to this collection of beautiful and bold double color exposure actions. The collection includes seven different color styles.

Blue Evening Photoshop Action (Free)The free Blue Evening Photoshop action will apply an atmospheric, blue-toned effect to your photos, creating a calming and serene look and feel.

Photoshop Crimson Shimmer Action (Free)This Photoshop action is bound to make your photos stand out as it adds a subtle touch of crimson to any photo. The action is easy to adjust and apply.

Color Fusion Photoshop Actions (with Envato Elements)Add pops of neon coloring to any photo with this Color Fusion Photoshop action. The action is applied non-destructively and can be adjusted to your liking.

Honey Photoshop Action (Free)Choose this Photoshop action if you want to make your food photography pop. The action is applied non-destructively and can easily be adjusted.

Color Dust Photoshop Action (with Envato Elements)Create a stunning color dust explosion effect with this Photoshop action. It will instantly transform your photos and make them appear more dynamic.

Nightmare Photoshop Action (Free)With this action for Photoshop, you can apply a dark and somewhat haunted look to your photos. A great choice to help you create a dark, moody look and feel.

Copper Photoshop Actions (Free)Apply an interesting copper look to your photos with the help of this free Photoshop action. You can tweak and adjust the action to your needs.

Creamy Photoshop Actions (Free)If you want to apply a soft, almost pastel-like look to your photos, this collection of Photoshop actions is a must. The action works best for portrait and outdoor photos.

Silver Photoshop Action (Free)The Silver Photoshop action will transform your colorized photos into black and white. This effect works well with a variety of photos and is applied non-destructively.

Autumn Warm Glow Photoshop Action (Free)Add an instant autumn glow to any photo by using this free Photoshop action. The action works non-destructively and works best with landscape and nature photos.

Sunset Photoshop Action (Free)Enhance your sunset photos or give any other photo a warm, golden glow. This action works best with nature and outdoor photography.

Free Special Effects Photoshop ActionsCreate Tiny Planets Photoshop Action (Free)Tiny planets are all the rage but creating them from scratch takes work. This Photoshop action will change that and allow you to transform any photo into your very own tiny planet.

Dust Storm Animation Photoshop Action (with Envato Elements)Make your photos appear more dynamic with these Photoshop actions. The action works with Photoshop CC.

Corrupted VHS Photoshop Action (Free)This Corrupted VHS Photoshop action will make your photos seem as they were captured on an old VHS tape, giving your shot a distinctive and artistic appearance.

Brick Mosaics Photoshop Actions (Free)Ever wanted to turn your photos into fun mosaics? Well, now you can with the help of this Photoshop action! The pack includes a total of 10 actions.

Anaglyph / Glitch Photo FX Actions (with Envato Elements)This Photoshop action allows you to quickly and non-destructively apply a fun glitch effect to your photos. The actions are easy to use and include video instructions.

Pixelate Photoshop Actions (Free)Similar to the action above, this Photoshop action collection will pixelate your photos. Perfect for creating unique backgrounds. The collection also includes frame and border styles.

Dispersion Effect Photoshop Action (Free)Try this Photoshop action if you want to produce a cool-looking dispersion effect. Make any photo appear as if it’s dispersing. Play the action and make adjustments as necessary.

Comic Poster Photoshop Actions (Free)Turn any photo into a comic poster using this Comic Poster Photoshop action. The action works in Photoshop and newer as well as Photoshop CC editions.

Firestorm Photoshop Action (with Envato Elements)Add an interesting effect to your portraits and make them appear as though they are disintegrating into a giant firestorm. The action works in Photoshop CS4 and newer versions.

Glitch Effect PSD Photoshop Action Kit (Free)This free Photoshop action will add a subtle glitch effect to your photos, making them mimic the look of old VHS tapes. The action works non-destructively, and you can make adjustments.

Double Exposure Photoshop Actions (Free)With this pack of Photoshop actions, you can easily recreate the double exposure effect without starting from scratch.

Free HDR Effects Photoshop ActionsHDR Photoshop Action (Free)Add a strong and bold HDR effect to your photos with the help of the HDR Photoshop action. The pack contains a non-destructive action, so you can safely revert back if needed.

HDR Pro Photoshop Action (with Envato Elements)Try this Photoshop action if you want to add a sharp look to your photos. The action supports Photoshop CS4 and newer versions and is applied non-destructively.

HDR Lightroom Preset & Photoshop Action (Free)Use this Photoshop action to open up the dynamic range of your photo and apply a beautiful and bold effect. The action works with both Photoshop and Lightroom.

HDR Stock Photoshop Actions (with Envato Elements)This set of 18 different Photoshop actions will allow you to reproduce an HDR effect on any of your photos quickly. The pack supports non-destructive editing.

HDR Photo Action (Free)This beautiful Photoshop action will apply a stunning HDR effect to your photos. It works well with all kinds of photos, especially nature and outdoor photography.

Free Black & White Effects Photoshop ActionsBlack & White Photo Actions (Free)This set of Photoshop actions will allow you to turn your photos into black and white works of art. There are several actions included which allow you to turn photos more white, more black, give them a more faded look, and more.

Black White Photoshop Actions (with Envato Elements)This collection of Photoshop actions contains a total of 31 actions which are applied non-destructively and work exceptionally well with portrait photography.

Shifted B&W Photoshop Action (Free)Turn your photos into black and white but with a hint of color. This produces a nice vintage effect and makes your photos pop.

High Contrast Black & White Photoshop Action (Free)If you want to apply high contrast to your photos and turn them black and white, don’t miss out on this Photoshop action. It works with both Photoshop and Lightroom.

Free Matte Effect Photoshop ActionsMatte Photoshop Action (Free)Apply a matte effect easily to your photos with the help of this Matte Photoshop action. The action is free and works both with Lightroom and Photoshop.

Matte Blogger Photoshop Actions (with Envato Elements)If you’re a blogger and want to make your photos have a matte look, try this Photoshop action. An excellent choice for fashion, travel, and lifestyle bloggers.

Matte Lightroom Preset & Photoshop Action (Free)With the help of this free Photoshop action, you will be able to quickly and easily apply a subtle matte effect to your photos. The action comes as a Photoshop action and Lightroom preset.

Warm Matte Photoshop Action (Free)This action will apply a warm matte look to your photos, making them appear retro and vintage. It works well with portraits, as well as landscape and nature photos.

Matte & Faded Photoshop Actions (with Envato Elements)This set of matte actions will not only add a matte effect but will also fade out colors and produce an interesting effect. This action is perfect for nature and landscape photos.

Deep Matte Photoshop Action (Free)If you’re looking for a deep matte look, be sure to give this action a try. It’s compatible with both Photoshop and Lightroom.

Vintage Matte Photoshop Action (Free)The Vintage Matte Photoshop action will make it easy to add a lovely vintage effect to your photos. The action supports non-destructive editing.

Oil Painting Photoshop Action (Free)These free actions will transform your photos images into oil paintings, replicating the unique brush strokes, textures and color variations of classic art.

Free Light Leak Effects Photoshop ActionsLight & Bright Photoshop Action (Free)Add bright light leaks to any photo with the help of the Photoshop actions in this pack. The action creates layers and supports non-destructive editing.

Light Leaks Bundle (with Envato Elements)This Light Leaks bundle contains 32 actions to add various light leak effects to your photos. The collection works well with landscapes with bright scenes and even portraits.

25 Light Leaks Photoshop Actions (Free)These free actions will allow you to add various light leak effects to your photos, giving the impression that light has leaked into the camera body during exposure.

Premium Looks Photoshop Actions (Free)Add a touch of class to your portraits with the help of this Photoshop action. The action contains five different effects and two light leaks that can be combined for a unique look.

Free Golden Hour Photoshop ActionsGolden Hour Photoshop Action (Free)Use this Photoshop action whenever you need to make a photo look like it was taken during the golden hour. It works well with cityscapes and nature photos.

The Golden Hour Photoshop Actions (with Envato Elements)This set of 12 Photoshop actions that will produce various golden hour effects. The collection works great on nature photos.

Golden Glow Photoshop Action (Free)This Golden Glow action will lighten your photo and give it a golden tint. Use it with landscape and nature photos, but don’t be afraid to experiment with other types of photos as well.

Free Sketch & Pencil Effect Photoshop ActionsPencil Drawing Photoshop Action (Free)Make your photos appear sketched using this Pencil Drawing Photoshop action. The action works non-destructively and produces a black and white sketch.

Pencil Sketch Photoshop Actions (with Envato Elements)This Photoshop action will turn any photo into a realistic black and white sketch. The set contains 15 unique actions which are applied non-destructively.

Sketch Photoshop Action (Free)This set of Photoshop actions makes it easy to apply the sketch effect with a single click. You can even adjust the result to your liking.

Free Lomo Effects Photoshop ActionsLomo Photoshop Action (Free)Apply a Lomo effect to your photos and make them appear as though they were taken with a Lomography camera. The action produces a fun vintage effect.

Lomographist Photoshop Actions (with Envato Elements)With the help of these 10 Photoshop actions, you’ll quickly make your photos appear vintage. This set of actions is compatible with Photoshop CS4 and newer.

Lomo-Inspired Effects Photoshop Actions (Free)The Lomo-Inspired Photoshop action applies a retro effect that works well with a wide variety of photos. It’s a great way to add a fun toy camera effect.

How to Install & Use Photoshop ActionsPhotoshop actions will help you transform your photos into works of art and save you time during your editing workflow. They will also help you achieve a consistent look easily instead of trying to remember all the adjustments and filters you used. Here’s a quick tutorial on how to install and use Photoshop actions:* Download and unzip the action file * Launch Photoshop * Go to Window > Actions * Select Load Actions from the menu and go to the folder where you saved the unzipped action file to select it. The Action will now be installed * To use the newly installed action, locate it in the Actions panel * Click the triangle to the left of the action name to see the list of available actions. * Click the action you want to play and press the play button at the bottom of the Actions panel

You’re a creative talent. The last thing you want is to be stuck performing the same task a hundred times on different images. These Photoshop Actions are for you.

With Photoshop Actions, a set of otherwise repetitive tasks can be applied automatically, freeing you up for the real work: being creative.

The post 50+ Free Time-Saving Photoshop Actions for 2023 appeared first on Speckyboy Design Magazine.

View Details

There’s nothing simpler than a black-and-white color scheme. And yet these fiercely contrasting colors may form the most powerful of combinations.

For starters, it’s infinitely useful. Using black text on a white background provides the ultimate in accessibility. It’s always a safe bet when designing content.

But it goes beyond mere utility. Black and white can also be used to make a bold artistic statement. It’s perfect when crafting those can’t-miss elements on a website or mobile app.

Today, we’ll show you eight examples of CSS and JavaScript snippets that go all-in on B&W. Here we go!

Mesmerizing CSS Optical Illusion by Mark BootsA few lines of CSS are all it takes to create this mesmerizing pattern. Conic gradients are used to create the lopsided orientation. Meanwhile, black-and-white boxes bring some visual chaos. Don’t stare at this one for too long!

See the Pen optical illusion by Mark Boots

Sliced Text Effect by Shireen TajThis snippet also counts as a bit of an optical illusion. It consists of two HTML <div> tags, each containing the same word. CSS is used to overlap them and create the “slice” effect. Perhaps not great for accessibility, but it does make for a standout bit of design.

See the Pen Sliced Text Effect by Shireen Taj

Stroke Logo Animation by Jon KantnerAn animated logo can provide a great way to introduce your brand. But it’s often best to keep things subtle. That theory certainly applies to this beautiful presentation. The simple black-and-white text is revealed gently with staggered layers of stroke animation.

See the Pen Stroke Logo Animation by Jon Kantner

CSS Animated SVG Mum with Cub by Mikael AinalemThe clever use of SVG makes this mama and baby animation a fun one. Notice how the cub slips underneath mom’s leg, adding the elements of depth and surprise. It may be incredibly simple, but also an attention-getter.

See the Pen Mum with cub by Mikael Ainalem

Black & White Abstract CSS Doodle Animation by Alisa KinThis animation has a lot of moving parts, but surprisingly little code running it on the surface. That’s because it uses <css-doodle>, a web component that assists in drawing CSS patterns. In addition, each click produces a new version.

See the Pen Black and White Abstract CSS Doodle Animation by Alisa Kin

CSS Animated Gambit Squares by Chris GannonInspired by a sequence in The Queen’s Gambit series, these rotating boxes would be the perfect complement to a logo or hero area. And because it’s built with SVG, it will look sharp at any size.

See the Pen Gambit Squares by Chris Gannon

Black & White Scrolling Effect by CrianbluffBlack and white contrast is in full effect here. As you scroll, the text instantly changes color, depending on the background. The secret sauce is CSS mix-blend-mode, which ensures black changes to white and vice-versa.

See the Pen Effect black & white scrolling by Crianbluff

Vertical Image Loop with Scroll Acceleration and GSAP by Cameron KnightFinally, we can’t forget about the power of black-and-white photography. It’s put to good use in this scrolling photo gallery. The faster you scroll, the faster the images move vertically through the presentation. Hovering reveals the full-color image. The CSS blend effects on the text make for a seamless look.

See the Pen Vertical image loop with scroll acceleration with gsap by Cameron Knight

Timeless Colors, Bold LooksThe world is full of color. But when you want to get back to basics, there’s nothing quite like black and white. It offers a classic look that is sure to draw the attention of visitors.

The examples above demonstrate that being basic doesn’t have to mean being boring. Indeed, the use of movement and interactivity kick things up a notch.

Want to see even more black-and-white snippets? Check out our CodePen collection.

The post 8 Black & White CSS & JavaScript Snippets That Make a Bold Statement appeared first on Speckyboy Design Magazine.

View Details

Animating CSS Grid (How To + Examples) – Techniques for adding movement to grid properties.

Managing the 24/7 Work Culture of Web Designers – How to navigate the stress and expectations of working on the web.

8 Most Common Problems in Website Design – A look at potential pitfalls and ways to fix them.

Neurodiversity Design System – Standards and principles for making accessible learning management systems (LMS).

PHP in 2023 – A yearly look at changes and advancements in the popular language.

The 50 Best Free Lightroom Presets for 2023 – Add power and efficiency to your photo editing workflow with these outstanding presets.

Our 6 principles for creating components – Tips for building better dashboard interfaces.

Yotako – This free tool will turn your Adobe XD and Figma designs into a WordPress website.

The CSS Practices That Can Hurt Accessibility – How to avoid some undesirable side effects of CSS.

Creating A High-Contrast Design System With CSS Custom Properties – Leveraging the power of CSS to make more accessible designs.

Accessible hamburger buttons without JavaScript – Learn how to build a fully-functioning navigation UI with HTML and CSS.

The Case for Showing Freelance Clients Your Authentic Self – You don’t have to pretend to know it all when communicating with clients.

Use the dialog element (reasonably) – Practical advice for using HTML dialogs in your projects.

25 Tutorials for Getting the Most Out of DaVinci Resolve – Master the free video editing app with these helpful tutorials.

Accessibility Tools and Resources for Designers – A handy list of resources for testing and ensuring your designs are accessible to all.

Design Documentation Template – This free Figma template is designed to help you quickly produce project documentation.

20 Killer JavaScript One-Liners That’ll Save You Hours of Coding – Tiny-but-mighty snippets to speed up development.

The Wordfence 2022 State of WordPress Security Report – A data-driven look at how attacks against WordPress websites are evolving.

Big Picture Goals 2023 – Find out what the WordPress project will be working on this year.

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

View Details

I’ll admit it: I have an ego. I like to be praised when I do something well (and maybe even when I didn’t do so well). I’m quite certain that I’m not alone, however.

It’s probably a safe bet that most of us have an ego – even if we don’t necessarily show outward signs of one. After all, who doesn’t want to feel good about their abilities?

An ego, in and of itself, isn’t an evil thing. It can be quite beneficial to your design career and your life. But there’s a fine line between using it healthily and letting it get in your way.

Today, we’ll dive into the good, the bad, and the ugly of a designer’s ego.

How a Healthy Ego Can Boost Your BusinessA little bit of ego can indeed be a good thing. For one, it can bring a higher level of confidence as you approach your work. Instead of fretting that a project is impossible, you’ll be reassured of your ability to take it on.

Having confidence and the right perspective can also keep you humble to a certain degree. Knowing that you have talent and a good reputation sets a high level of expectation. It can help you stay focused and hard at work.

The more you rise to meet the challenge, the more this all becomes a self-fulfilling prophecy. You’ll continue to stay hungry while achieving your goals.

Moving forward, a healthy ego can lead you to make sound business decisions. A balance of confidence and awareness will help you decide which projects to jump on and which to turn down.

You won’t feel desperate to grab a hold of every opportunity that comes along. Instead, you’ll wait for the right one.

How to Get ThereDeveloping a “good” ego takes time. You may have to go through several ups and downs before you gain a balanced view of yourself and your abilities.

To start, realize that you’re human and are going to make mistakes. When you do, accept responsibility, and try to rectify it. Do your best to learn from what happened and move on.

Confidence can be a fragile thing. During rough patches, remember why you became a designer in the first place.

Think about what inspired you. Perhaps someone encouraged you along the way. Recalling your love for design can be a great confidence builder.

For example, I like to recall some of the first websites I built. While they wouldn’t be very impressive by today’s standards, they do give me a sense of pride. I also look back at some mentors who helped me learn and evolve.

Even after a long day’s work, I’d race home and spend hours practicing and creating. Back then, it made me feel good. Now, it helps me to remember where everything started. It’s something I can turn to when confidence is low.

When Your Ego Can Become ProblematicInstances of egos gone mad are all around us. Whether you’re reading a history book or watching the news – the signs are everywhere.

For designers, a bad case of ego can take shape in several ways:

You Stop Listening to OthersIndeed, clients don’t always make the best suggestions. And when you hear enough bad ideas, you might start tuning people out. However, that’s a big mistake.

When you refuse to take other people’s opinions seriously, you start creating things only to please yourself. Listening to others and working to understand their point of view is critical to a successful project.

It’s perfectly fine to state your case and (gently) argue for what you believe in. Just remember that it’s also OK to compromise when necessary. Great ideas can come from anywhere.

You Stop LearningI’ve fallen into this trap throughout my career. Once you become proficient with a skill (HTML, CSS, graphics, etc.), it’s easy to become a bit lazy.

But web design is an industry that can leave you behind in a heartbeat. Learning is critical to staying relevant. To put it bluntly: your future depends on your ability to adapt.

There was a time when I felt that I was smart enough to get by, regardless of my skill level. Discovering WordPress, oddly enough, made me realize how wrong I was.

The platform is incredibly extensible and forced me to start learning again. From there, I found that I had been missing out on a lot of key concepts. It was a truly valuable lesson.

You Operate on Instinct AloneNewsflash: Your “gut” feeling only means so much. Information is key to making decisions – whether you’re talking about code or your career.

Your ego becomes a problem when you make decisions without bothering to do research. That doesn’t mean you have to toil for hours on end – not every choice is that consequential. It just means recognizing that there are things you don’t know.

Once again, it comes down to a willingness to learn. Assuming you know it all is a dangerous game.

Choose Your Path Wisely, DesignerIf we’re not careful, ego can creep up and bite any one of us. And contrary to popular belief, it’s not just egomaniacs that fall prey. It’s often the smaller transgressions that do the most damage.

But ego can play a big role in our ability to succeed. Thus, it’s worth looking at why we make certain decisions. An honest assessment may be the first step toward positive change.

The post The Benefits & Dangers of a Designer’s Ego appeared first on Speckyboy Design Magazine.

View Details

A website doesn’t stay relevant forever. Design trends change along with functionality needs. As such, a redesign is a healthy part of a site’s life cycle.

The opportunity is about more than putting a fresh coat of paint on an old website, though. It’s also a chance to assess both success and strategy. Stakeholders can take a deep look at what has worked and what hasn’t with the previous version.

And if big decisions need to be made, this would be the ideal time to do so. After all, you’ll likely be knee-deep in code and graphics. You might as well discuss the most important questions with your clients.

A website redesign can be just the thing to create organizational momentum – the kind that reaches beyond online presence. But it requires some critical thinking skills and well-defined goals.

Here are some tips for figuring out where you (or your client) stand and creating a plan for where you want to go.

Look at the Good and Bad of Your Current WebsiteThe odds are that the current version of your website does some good things. Maybe the typography is easy to read, or you built in some awesome custom features.

Whatever the case, put those positives on a list as items you want to carry over (if not further improve). This will help to ensure that they don’t get lost in the shuffle as you work on a redesign.

Just as likely, there will be some negatives. For example, an older website may look outdated. It could also lack best practices for modern accessibility and responsiveness.

In addition, there could be several other aspects to review, depending on your site’s niche. User data, eCommerce sales, and content are all possibilities.

Analytics can be a great tool for determining your site’s successes and areas of need. It can also fill you in on how users are finding and viewing your site. This can be a huge help when thinking about a redesign.

Have Your Needs Changed?A new look is only part of a redesign’s potential impact. Along the way, you may find that new functionality (or a refactoring of old) is needed.

The challenge here is two-fold. First, you’ll want to map out the process for adding this functionality. That could be as simple as buying a piece of software or subscribing to a SaaS (software-as-a-service) provider.

But it may also entail writing a lot of code yourself or hiring a developer to help. All of this must be factored into the project’s timeline and budget.

Second is how any new features or apps may affect your web hosting situation. You may need more processing power or storage to keep things running smoothly. And it’s much more convenient to tackle this during a redesign than after launch.

If a change is required, this will ideally allow you to gather everything you need in a development environment. You’ll have the freedom to work in the background without interfering with the live site. Plus, there’s peace of mind in knowing that your new setup will have enough horsepower to handle whatever you throw at it.

Prioritize User Experience, Performance, and AccessibilityEven if your current website is just a few years old, user expectations have likely changed. Not to mention that best practices have also evolved.

Each iteration of your website should take the latest standards and expectations into account. That means refocusing on user experience (UX), performance, and accessibility.

It sounds simple. But it’s also more challenging than we may think.

That’s because a redesigned website often carries the technical debt of its predecessors. Some parts of those previous builds usually come along for the ride. And they could potentially drag down these key areas of your new site.

Consider a feature that requires user input – like a search UI. It may have worked well enough in its heyday, but it is cumbersome when compared to the latest techniques. And perhaps it isn’t easily navigable by keyboard, making the process harder for disabled users.

Existing content and features should be revisited and judged against current best practices. This will ensure that they keep up with the rest of your shiny new website.

Putting It All TogetherNow that you’ve reviewed your current website and gained an understanding of your needs, it’s time to create a list of goals!

Thankfully, there’s a lot of flexibility here. Your goals can be as broad or narrow as you like. And much of it will depend on your organization and type of website.

An eCommerce site may set out to increase sales by a certain percentage. Or a content-focused site might hope to increase clicks to featured articles. Meanwhile, a freelance portfolio may simply want to optimize load times.

Each goal can be customized to fit your needs. But it’s still important to list them. That will provide a basis for comparing them and measuring results later.

In addition, taking the time to list goals keeps them in the front of your mind. It’s something you can reference throughout the redesign process. Thus, you’re more likely to implement them in the finished product.

A Redesign Is an Opportunity for ChangeAll told, a website redesign is an opportunity to create positive change. It’s a chance to build something that looks and performs better. And it can also help you keep up with the latest trends and best practices.

That’s why it’s crucial to look beyond just the cosmetic aspects of the project. Take the time to study how things work and their impact on the user experience. From there, determine the best ways to improve and invent. And when it comes to goals, hold yourself accountable.

You’ll likely have to live with the results for several years. Therefore, it’s worth taking full advantage of the opportunity while you have it.

The post Defining the Goals of Your Website Redesign appeared first on Speckyboy Design Magazine.

View Details

Procreate is an app designed for artists that makes it easy to create paintings, drawings, illustrations, and other works of art while on the go.

From quick sketches to animations, this app is truly versatile and is marketed as a mobile art studio. Though it comes with over 200 brushes, you can still add more to further add to the complexity of your work.

That’s why we’ve put together a collection of brush sets that you can use in Procreate. And the best part about these brushes is that they’re free, so there’s no risk to you for trying them and you can feel that little bit freer to experiment.

Though we’ve researched these brushes and found them to be free, it’s still a good idea to read any license agreement or terms and conditions before using them in your commercial work. Better to be safe than sorry!

You can download Procreate here.

Table of Contents* Free Textured Effect Brushes * Free Hair & Fur Procreate Brushes * Free Cloth & Textile Texture Brushes * Free Painting Effect Brushes * Free Nature Effect Brushes * Free Comic & Cartoon Effect Brushes * Free Typography Effects Brushes * Free Pencil & Pen Effect Brushes * Free Constellation Procreate Brushes

Learn Procreate:

25 Procreate Tutorials for Drawings, Illustrations, Paintings, and More

Free Textured Effect Procreate BrushesProcreate Grain Brushes (Free)Procreate Grain Brushes are precisely what they sound like: brushes that add graininess to your work. These speckled, dusty-looking brushes can be used to add texture or age to a project.

Stippling Brush Set (Free)This Stippling Brush Set consists of 17 brushes in all: nine stipple brushes, three liner brushes, and five texture brushes. These brushes are multi-faceted and can be used for just about any project you work on.

Eclectica Stipple Brushes for Procreate (Envato Elements)Eclectica has been inspired by the retro style from the 1970s and added a touch of pop art to give you a collection of Procreate brushes you can use to create something truly unique. There are a total of 18 stroke and stipple brushes in the pack.

Very Dry Gouache Brush for Procreate (Free)The Very Dry Gouache Brush lives up to its name. This brush offers a super dry texture that makes every single brush stroke visible. This can be a great thing if that’s the artistic style you’re going for. Plus, it reveals different textures depending on how hard you press.

Geometry Brushes for Procreate (Envato Elements)This collection of geometry brushes includes 34 different brushes that make it easy to add shapes, design motifs, and patterns to your work. They could even be used creatively for shading.

Cardboard Procreate Brush (Free)The Cardboard Procreate brush has a semi-streaky look that can be used for various lettering projects, from signs to business cards to logos.

Collection of Procreate Brushes (Free)Here’s another small collection of Procreate brushes that will add texture and personality to your artwork. This set includes six brushes, including two Gouache, two oil paint, and two watercolor brushes. Each performs beautifully and are solid brushes to have in your kit.

Distressed Wall Procreate Brushes (Free)Distressed Wall is a free Procreate brush for adding a chalky-style texture to your designs. Perfect for illustration backgrounds.

Free Hair & Fur Procreate BrushesHairBrush Set for Procreate (Free)If you want to draw realistic hair in Procreate, you will greatly benefit from this HairBrush set. With them, you can create straight or curly hair and achieve a variety of textures.

Fur Brushes for Procreate (Free)In this collection, you will get four free fur Procreate brushes (including thin, harsh, ski, and ranged) that you can use to create fur or hair and also add texture to other types of art.

Free Cloth & Textile Texture Procreate Brushes15 Textile Factory Procreate Brushes (Free)This free set of Procreate brushes includes 15 swatches of varied cloth or textile patterns that you can use to add texture to your paintings.

Bristle Brush Linen (Free)This free Procreate brush features a natural bristle brush for creating the look of brushstrokes on a linen canvas. It also uses the wet blending feature in Procreate to mimic a realistic painting experience.

Free Painting Effect Procreate BrushesOil Paint Procreate Brushes (Free)This set of five oil paint brushes are made to look and function just like real oil paints. The collection includes True Oil, Small Liner, Bristle Brush, Super Wet, and Legacy Smudger.

Pro Painters Procreate Brushes (Envato Elements)The Pro Painters brush set contains 31 brushes, all perfect for adding light paint or pencil textures to typography and illustrations.

Matt’s Painting Procreate Brush Set (Free)Matt’s Painting Set is an all-purpose brush set for those using the gouache painting style. Add fine lines, texture, grit, or even airbrush effects with this free set.

Art Brushes for Procreate (Envato Elements)This collection of art brushes includes 21 different brushes for imitating real painting techniques, and they naturally have both wet and dry looks.

Jason’s Art & Illustration Procreate Brushes (Free)This collection of 14 multi-use art and illustration brushes is perfect for anyone just starting out using Procreate. They have been designed for use with the Apple Pencil and requires Procreate 5.0 or higher.

Bookshelf Brushsets for Procreate (Free)This free set of nine brushes will allow you to quickly paint a selection of books on a bookshelf. You can also use these brushes in Photoshop CC and Clip Studio Paint

Tears Brushes for Procreate (Free)This free brush set will let you quickly add various types of tears to your art. You can also you use these brushes as small splashes or splatters.

Milk Brushes for Procreate (Free)While milk may not be at the top of most people’s list of required brushes, this free collection will allow you to add various types of splatters, splashes, and drops to your artwork.

Jingsketch Basic Procreate Brushes (Free)This collection of ten basic brushes is perfect if you’re starting out using Procreate. These versatile brushes can be used in a multitude of ways.

Procreate Swatches (Envato Elements)This collection of swatches aren’t brushes per se, but they are still extremely useful for creating artwork in Procreate. With these, choosing colors should no longer be an issue.

Wet Media Brushes for Procreate (Free)Here’s a collection of 48 (yes, you read that correctly) brushes for Procreate that let you mimic wet media. There are too many watercolor effects to name here, so you’ll definitely want to download it for yourself.

Free Nature Effect Procreate BrushesNature Brushes for Procreate (Free)This free Procreate brush set will allow you to rapidly speed up the process of painting landscapes. You will get stamps for flowers, foliage, grass, leaves, rock, ivy, trees, and even glowworms.

Natural Brushes for Procreate (Envato Elements)Here’s another set of brushes for Procreate that center around nature. This natural brush set includes 20 brushes in all and consists of pencils, chalks, and shaders.

Flora Vegetation Brushes for Procreate (Free)The Flora Vegetation Brushes is a massive set with a whopping 91 brushes! All of these brushes are designed to mimic the textures, weights, and tone of things you’d find in nature. A must-have for creating nature scenes or even drawing backgrounds.

Rain Brushes for Procreate (Free)This pack of free brushes will allow you to add various types of textured rain to your artwork to give them a moody, atmospheric look and feel. There are 25 free brushes in the set.

Free Floral Stamp Procreate Brushes (Free)The Free Floral Stamp brushes consist of five different brushes that help you capture the look of petals, leaves, vines, and more.

Free Comic & Cartoon Effect Procreate BrushesComic Ink Brush Set for Procreate (Free)The Comic Ink Brush Set for Procreate includes 16 inking and SFX brushes for creating comic books from scratch. From fine liners to gradients, you have everything you need here to get started.

Comics & Halftone Procreate Brushes (Envato Elements)The Comics and Halftone Procreate Brushes offer up those brushstrokes that have become so synonymous with comic books. They can be used to add the look of real paper or brush strokes — like hash lines, for instance — to a drawing.

Anime Bokeh Procreate Brushes (Free)Here’s a collection of 7 anime bokeh brushes that are certain to add flair to your next drawing. And they can be used in several ways to achieve different effects depending on the layer style you use.

Free Typography Effects Procreate BrushesBanner Wave Calligraphy Procreate Brush (Free)Banner Wave is a free Procreate brush set for creating textured and bold hand-drawn typography and calligraphy.

Stripe Procreate Brush (Free)Stripe is a single brush that’s well worth the download. It’s a smooth calligraphy or lettering brush, and it responds to pressure and layering. A fantastic choice for adding script to your work.

Fire & Ice Brushes for Procreate (Free)Created by Kelly Sikkema, this free Procreate brush is perfect for creating beautiful typography on a dark background.

Lettering Procreate Brush Set (Free)This is a nice collection of lettering brushes that are a bit unusual and honestly appreciated. There’s a shrub brush, a wood grain brush, and even a worm brush!

Free Pencil & Pen Effect Procreate BrushesPencil Brushes for Procreate (Free)Another great free Procreate brush are these Grain Pencil and Copic Marker sets. They mimic the look and feel of real pencil strokes and real lines drawn with a Copic marker — the latter of which manages a level of buildable coverage that is stunning.

Procreate Pencil Brushes (Free)A free set of pencil brushes that are perfect for both adding texture to an item and drawing. There are a total of 24 unique brushes in the set.

Procreate Ballpoint Pen Brushes (Free)The Ballpoint Pen brush mimics the look of a real ballpoint pen, offering fine strokes that you can layer to build shadows and contrast by applying greater pressure and through the use of hatching.

Marker Brushes for Procreate (Free)Need marker brushes? This set offers two options: an opaque marker and a variable opacity marker. They offer irregular coverage that looks more natural.

Liner Procreate Brushes (Free)Cheap Fine-Liner Brush for Procreate (Free)The Cheap Fine-Liner Brush is a recreation of a 0.6 technical pen. It’s precise and allows you to create fine line drawings or to fill in tiny details. A great addition to any brush collection.

Pencil, Inking & Painting Basic Brush Set for Procreate (Free)The Pencil, Inking, Painting Basic Brush Set consists of 7 brushes for creating comic art from scratch. It’s got all you need to conceptualize a piece from the sketch phase through painting.

Free Constellation & Sky Procreate BrushesBright Sky Brushes for Procreate (Free)While this premium set includes 49 constellation brushes, you can download the free trial of four brushes for personal use.

Constellation Brushes for Procreate (Free)With this free Procreate constellation brush set, you can add depth and atmosphere to your art. The set also includes free zodiac signs.

Now that you’ve had a chance to browse this collection of free brush sets for the Procreate app, hopefully, you’ll have either already downloaded a few or have put together a nice shortlist to revisit.

These free brushes make it easy to add precision or texture to your work without creating designs from scratch. Plus, they add the dimension your work needs without adding cost. All in all, this is a solid collection of Procreate brushes that can be used in various types of art. Happy creating!

The post 35 Free Sets of Brushes for Procreate App appeared first on Speckyboy Design Magazine.

View Details

Sometimes, it’s the unexpected features that make WordPress so powerful. Those little things that you didn’t know you need can end up having a big impact.

WordPress 6.1 has brought about one of these hidden gems: the ability to use block template parts within a classic theme.

It takes the capabilities of block themes and ports them over to their classic counterparts. Classic themes still make up the overwhelming majority of the market. Therefore, it makes sense to bring them up to speed on the latest tools.

Let’s explore what this feature does and why you might want to use it. Then, we’ll demonstrate how you can implement it on your website.

What’s a Block Template Part?WordPress 5.9 introduced Full Site Editing capabilities. When combined with a block theme, the feature allows users to edit various templates within the back end.

Block template parts represent any area of a website you’d like to manage within the WordPress Site Editor. Examples include the site’s header and footer. But they could also include niche areas as well.

Theoretically, a block template part can be as broad or narrow as you like. This allows web designers to define only the theme elements they want to make editable. At best, this offers convenience for site owners while protecting the layout from any major mishaps.

Unlike the custom templates that have long been used in classic themes, block template parts are saved as HTML files. They also consist of block markup, rather than PHP.

Classic themes have traditionally used the WordPress Customizer to make specific areas editable. The feature works well enough but lacks the advanced capabilities of the Site Editor. Now, there’s a way for these themes to move past those limitations.

Adding a Block Template Part to a Classic ThemeAdding a block template part to a classic WordPress theme is a relatively simple 4-step process. Here’s an example of how to set things up.

Step 1: Allow Block Template Parts in Your ThemeThe first step involves allowing your theme to use block template parts. This can be accomplished by adding a code snippet to your theme’s functions.php file:

Code snippet courtesy of Learn WordPress.

Note that if your theme’s functions.php file already has a function that adds theme support for other items, you’d only need to paste add_theme_support( 'block-template-parts' ); within the existing function.

Step 2: Design Your Template in the Block EditorNext, it’s time to fire up the WordPress Block Editor. The easiest way to go about this step is to create a new page – we’ll call ours “Test Block Part”. It can be deleted once we have our block template part up and running.

Within this page, we’ve created a simple two-column layout. It includes our fictional client’s contact information and links to their social media profiles. Everything here uses standard blocks included with WordPress core.

The idea is to allow our client to make edits to this information as needed – but without having to touch the rest of the site’s layout.

Step 3: Copy and Paste Block Markup into an HTML FileNow that we have our layout built, it’s time to copy and paste the block markup into an HTML file.

There are a couple of options for copying the block markup:

Select the blocks you’d like to copy within the Block Editor and enter CTRL + C (or COMMAND + C on a Mac) to copy the markup, OR;
Enter the WordPress Code Editor for your page by clicking on the Options button within the Block Editor, then copy the relevant markup;

Next, open the code or text editing app of your choice and paste the block markup into a new file. Our markup looks like this:

Save the file as an HTML document into the /parts directory of your theme (create the folder if it doesn’t already exist). Note that you don’t need anything else in the file besides the block markup.

For our example, we’ll call our file footer-contact-info.html. Make note of the file’s name, as we’ll need it in the final step.

Step 4: Add the Block Part Template to Your ThemeNow that we have our block part template created, we’ll need to add it to a PHP template in our classic theme.

WordPress has a built-in function called block_template_part() that we can use to call our block template part into the theme. It uses the HTML file’s name (minus the “.html” extension) to locate the template. Here’s what our code looks like:

We can add this function wherever we’d like the block template part to display. In this case, we’ll add it to our footer.php template.

All that’s left is to upload our updated theme files to the server. Once that’s complete, we’ll refresh the page and find our block template part proudly displaying at the bottom of the site.

Edit Your Block Template Part AnytimeWhenever we need to make a change, our custom block template part is only a few clicks away. To find the template, visit Appearance > Template Parts, then click on the template’s name (footer-contact-info).

Edits can be made via the Block Editor – just like any WordPress page or post. Save your changes and they’ll appear on the front end of the website.

*Note: Some early implementations of this feature contained a bug that caused a block template part to be uneditable within WordPress. Adding a theme.json file to the theme temporarily fixes the issue.

Bringing Classic WordPress Themes into the Block EraThe ability to use block template parts in a classic WordPress theme is a step forward. Theme developers can stick with the power and flexibility offered by PHP-based themes while adding block template support where needed.

It’s also a way to open specific elements up to back-end editing without having to switch to a block theme. The process is easy to implement and much less labor-intensive than starting from scratch. The result is savings in both time and money.

In addition, it offers us a way to move beyond the Customizer. That feature will likely be phased out over time, so the ability to switch to block template parts helps us get a head start on migration.

Best of all, there are tons of potential use cases for this functionality. It may be just the thing you need to add a layer of convenience to your next WordPress project.

The post How to Use Block Template Parts in a Classic WordPress Theme appeared first on Speckyboy Design Magazine.

View Details

Photo galleries are a must-have feature for just about every type of website. Businesses, non-profits, and bloggers alike can use them to inform and entertain visitors.

It’s also a feature that inspires a high level of creativity. That makes perfect sense, as the ability to present images uniquely helps you stand out.

Web designers are taking advantage. They’re using the latest CSS and JavaScript techniques to create abstract layouts and compelling special effects. Everything from enhancing the basic grid gallery to otherworldly user interfaces is being developed.

With that in mind, here are eight unique photo galleries to help inspire your next project.

CSS Animated Mini Photo Gallery by Alvaro MontoroSize is the standout feature of this photo gallery snippet. Traditionally, galleries tend to take up large portions of our screens. This “mini” gallery turns that practice on its head, with animated transitions packed into a tiny space. And it requires zero JavaScript!

See the Pen animated Mini Photo Gallery by Alvaro Montoro

Sliding Image Track with CSS & JavaScript by HyperplexedThis gallery also makes efficient use of space while adding interactivity to the mix. Swipe the gallery horizontally to both reveal images and experience a cool parallax effect. The whole presentation is attractive but subtle.

See the Pen Sliding Image Track by Hyperplexed

Accordion CSS Image Gallery by Stefan C.Accordion UIs are incredibly flexible. Sure, they can hold plain text content – but where’s the fun in that? We’re starting to see them used more for multimedia, as is the case with this silky-smooth gallery.

See the Pen Accordion Image Gallery by Stefan C.

Hexagon Gallery in CSS by Gabriela JohnsonHow about going beyond basic squares and rectangles? Thanks to features like CSS -clip-path, all kinds of interesting shapes are possible. Here we have a beautiful hexagonal grid with some slick hover effects added in for good measure.

See the Pen Hexagon Gallery by Gabriela Johnson

Responsive CSS Photo Gallery Grid with Lightbox by MajedAdding a lightbox to a gallery has traditionally required JavaScript. That’s no longer the case, as this responsive snippet displays full-sized images via CSS. In addition, the use of CSS grid and flexbox makes for a gorgeous masonry layout. There’s a lot to like here.

See the Pen Responsive Photo Gallery Grid with Lightbox and – No Script by Majed

Layered Horizontal Scroll Gallery with CSS by Ivan BogachevCheck out the stunning level of detail in this horizontal gallery. Each image is carefully layered, with various opacity levels creating a seamless look. Hovering over an image reveals its full-color view, while scrolling unlocks animated transitions.

See the Pen Horizontal Scroll Gallery (Locomotive Scroll) by Ivan Bogachev

Flex Image Gallery with Hover Effect by Cynthia CostaPerfect for portfolios, this gallery uses Flexbox to power a full-width masonry layout. Captions are revealed upon hovering, as is the image’s true color. And each image can be hyperlinked so visitors can learn more. It also adjusts beautifully to smaller screens.

See the Pen Flex image gallery with hover effect by Cynthia Costa

Puzzle Grid Gallery by Goran RakicHere’s another example of a gallery that takes the idea of shape to another level. Hover over an area of this puzzle to reveal the full image. Given the level of visual complexity, it’s also impressive to see that this snippet still works well on mobile devices.

See the Pen Puzzle Grid Gallery by Goran Rakic

Photo Galleries as a Work of ArtThere’s nothing wrong with a basic photo gallery. But there are also times when it pays to kick things up a notch. The snippets above are perfect examples.

Artfully presenting images entices users to interact. And it doesn’t have to come at the cost of performance, thanks to modern CSS and JavaScript. Nor does it mean a clunky mobile experience. Galleries can maintain their looks and functionality across screens.

We hope you found inspiration in these incredible galleries! And if you’re looking for even more examples, check out our CodePen collection.

The post 8 CSS & JavaScript Snippets for Creating Unique Photo Galleries appeared first on Speckyboy Design Magazine.

View Details

On-Scroll Typography Animations – Effects that add an extra layer of creativity to a website.

GSAP CodePens 2022 – Explore this collection of code snippets featuring the popular animation library.

8 CSS & JavaScript Snippets That Celebrate Books – Check out examples that recreate the look and experience of books.

Complete Guide To Make You a Regex Guru – This handy resource will help you tame a complicated subject.

Interactive SVG Reference – Learn and play with various SVG concepts using this guide.

How Do You Define a Successful Web Project? – Why personal success doesn’t necessarily mean project success.

Code Documentation, Streamlined – Best practices and techniques for automating documentation.

Building an Accessible Theme Picker with HTML, CSS and JavaScript – This tutorial demonstrates a feature that allows users to choose a website color scheme.

Top 50 Free Web UI Kits Templates – Check out these outstanding free kits that are available in a variety of formats.

10 Things No One Told Me About Design Systems – Helpful tips for better understanding what a design system is (and isn’t).

More Real-World Uses for :has() – Common scenarios when the CSS pseudo-class can be useful.

Even With Tools Like AI, Building a Great Website Is Still Hard – Why human involvement is still a key factor in web design.

OKLCH Color Picker & Converter – A new, browser-supported method for encoding colors.

Accessibility Kit for Web Developers – Discover how one agency tests its work for accessibility.

Hicon – A simple vector icon pack realized in Figma and crafted for designers and developers.

Unicons – This tool will help you find the perfect icon font or SVG within your favorite design apps.

Scalable CSS – A basic guide to finding the best approach to writing CSS that scales to any sized project.

50 Free Responsive Web Layout HTML Templates – Free templates that are easy to use and customize.

Simpler CSS Selectors With :is() – Stop writing redundant code with this handy CSS pseudo-class.

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

View Details

Web design and development are vast subjects. And it seems that those within the industry are expected to know every nook and cranny of it. There’s a narrative that sees us as all-knowing beings who can solve any web-related problem.

However, buying into this narrative means putting a massive amount of weight on our shoulders. Whatever the actual expectations of our clients, we might feel the need to project an image of having it all under control.

The truth is that we’re not superheroes – even if there is pressure to act the part. And that’s OK. We don’t need to be perfect.

Yet there can be a stigma attached to letting clients see us as we are – flaws and all. But today, I’m going to make the argument for dropping the façade and learning to be yourself. It might just be the best thing for your career, your client relationships, and your mental health.

A More Comfortable Form of ProfessionalismNow, I’m not suggesting that you start showing up to meetings (virtual or in-person) in tank tops and flip-flops. You still need to look presentable and act professionally and courteously.

What I am saying is that there’s no need to have a perfect answer for every question. And it’s fine if there is a particular skill missing from your resume. You don’t even have to be an ideal fit for every project.

If there’s something you’re not sure of or doesn’t fit with who you are, say so. There’s freedom in being honest.

This not only relieves you of some internal pressure, but it also breaks down a wall between you and your client. Instead of acting as if you have the keys to the online universe, you can have an honest discussion about client needs and the challenges involved in meeting them.

The result may be that you see each other as more authentically human. It builds a level of trust that can be near-impossible to achieve when you’re playing a role, as opposed to just interacting as people.

The Potential for Better ProjectsThis newly authentic you can also bring a revitalized sense of confidence – especially when it comes to the projects you take on. With no pretenses of being an all-knowing designer, you can freely state if something isn’t a good fit.

For example, I’ve been approached with projects that require skills that are outside of my specialty. And sometimes, they take a level of commitment that I can’t fit into my schedule. Once in a great while, I’ve even been faced with a project that might just be life-altering.

Early on in my career, I would often force myself into projects where I knew I wouldn’t be comfortable. But I’ve learned that the best policy is to be upfront with my concerns.

If a project isn’t a good fit for me, I communicate it to the prospective client. If it requires that I get up to speed on a specific skill, I’ll readily admit it. The result is that sometimes we move forward together, while other times we don’t.

You might wonder what advantage there might be in admitting your shortcomings. Not all clients are going to be happy with your answers. So what?

I believe that if a project is over my head in some capacity, it will eventually come to light. That may show up in the form of a mistake. Or it may be that we hit a roadblock in the middle of the process. Either way, we’ll likely have to face this reality at some point.

Getting this out into the open from the start is better for everyone. Clients can understand my limitations, while I don’t feel the need to pretend.

When in Doubt, Just Be YourselfBeing more authentic with clients can be difficult. After all, everyone wants to put their best foot forward. Plus, no one wants to appear unqualified for the gig.

But the reality is that not every project is going to work out. Wouldn’t it be better to realize this right away rather than six months into doing the work?

Authenticity helps you filter out less-desirable opportunities. And it enables you to establish a better relationship with your clients. When someone knows who you are, they’re more likely to give that same level of honesty in return. This fosters a better working partnership and increases the odds of a successful outcome.

The bottom line is that, no, you don’t have to be a superhero. But being yourself, however imperfect, is more than enough.

The post The Case for Showing Freelance Clients Your Authentic Self appeared first on Speckyboy Design Magazine.

View Details

One of the great aspects of the web is that it’s always there. Want to buy a pair of socks at 2 AM? Searching for the title of a song you haven’t heard in years? It’s all there, all the time. Indeed, if New York is the city that never sleeps, the web is the medium that likewise refuses a nap.

24-hour convenience has a hidden cost, though. Those of us who have a role in building and maintaining websites often pay the price. We do so via our time and elevated stress levels. And we’re not just talking about working during regularly-scheduled hours.

For many designers and developers, it seems that we’re dealing with various tasks at all hours. Answering emails, debugging code, or trying to catch up with a pile of work. And then there are emergencies like a crashed site or malware infection.

This 24/7 work culture impacts web professionals of all stripes. Whether you’re working as part of a large team or as a solo entrepreneur – none of us are immune.

The situation brings to mind a few questions regarding how to better manage (if not completely change) the culture. Let’s see if we can find some answers to help us navigate the challenges.

Why Is It Difficult to Step Back?The easy answer to feeling stressed and overwhelmed is to take a step back. Remove yourself from the situation and give your mind and body a rest. Sounds amazing, right? Yet, it’s also a bit unrealistic for many of us.

When you have responsibilities, it’s difficult to simply shut them out. The reality is that our projects still require attention. Clients will continue to send email messages. Unexpected issues will pop up without considering our need for a break.

The irony of it is that technology was supposed to make our lives easier. And while it might improve the design and build processes, the rest is still up to us. Artificial intelligence (AI) can help on that front – but don’t expect miracles.

Plus, the sites we build are now more complicated than ever. Just think – the more eCommerce and subscription-based websites you manage, the more urgent maintenance and repairs become. Every second of downtime has an economic impact.

And this is precisely why we feel the need to stay constantly connected. Because when we finally have a moment to ourselves, our phones buzz with yet another notification. It’s akin to being a firefighter, always at the ready – even in the calmest moments.

How Can Web Professionals Adapt?It’s a safe bet that the web won’t be going on holiday. It won’t turn off for a few hours in deference to our needs. Therefore, it’s up to us to adapt.

Much of the challenge is in setting the right expectations. That applies to what clients expect from us, as well as what we expect from ourselves.

Setting boundaries can be difficult when it comes to providing great customer service. You want to be available when your clients need you. And it’s important to ensure that questions are answered, and problems are resolved.

Still, some clients will knowingly (or not) push the envelope in this area. If they send you an email in off-hours and you respond within a few minutes, they’ll come to expect it. Don’t be surprised if they start doing so more often.

On the other hand, if you routinely reply the next day, those expectations could change. No longer will they anticipate that you’ll spring into action at a moment’s notice. If you lead the way, they’ll likely follow along.

Context also plays a role. It’s important to prioritize the items that can or can’t wait. An emergency may require immediate attention. A basic question, on the other hand, can be saved for tomorrow.

In addition, putting your phone down and turning off notifications for a bit is highly recommended. Particularly when spending time with family and friends. You don’t want to be that person furiously typing away on a screen while a loved one is telling you about their day.

Perhaps you won’t be able to get away for long stretches. But you’ll at least give your brain a break and be better able to focus on other things.

Control What You CanAn always-on mindset seems like a modern problem. And it’s exacerbated by an industry where we can work from just about anywhere – including home. For many of us, there’s no traditional office to separate these different parts of life.

There are no hard-and-fast guidelines to live by, either. The responsibility of keeping a work/life balance is ours. Neither clients nor colleagues will do it for us.

The good news is that there is an opportunity to shift the narrative. None of us has to be the web designer that works all odd hours of the day. By putting some boundaries in place and processes to back them up, we can form healthier habits.

In the end, that helps you serve both your clients and yourself in the best way possible.

The post Managing the 24/7 Work Culture of Web Designers appeared first on Speckyboy Design Magazine.

View Details

DaVinci Resolve has a price point that can’t be beaten: it’s free! It’s a professional-level tool for video editing that’s accessible to everyone. You can use it for an entire edit, from ingesting footage to exporting a finished, Hollywood-grade video.

Want even more power in your edit? Resolve is made up of other more powerful modules inside one package. Fairlight helps you mix and master audio at a professional level. Fusion gives you options for compositing in 2D and 3D. You can even collaborate with other users on the same project.

In this round-up, we’re featuring 25 of the web’s best tutorials to learn DaVinci Resolve. Whether you’re a beginner or a seasoned editor looking to level up your skills, we’ve got you covered.

If you’re looking for free DaVinci Resolve templates, you will find them here.

Table of Contents* DaVinci Resolve Beginner Guides * Color Grading in DaVinci Resolve * Special Effects in DaVinci Resolve * DaVinci Resolve Workflow * Audio & Music in DaVinci Resolve

More Motion Design Tutorials

Tutorials for Adobe After Effects
3D Text Effect After Effects Tutorials
Tutorials for Adobe Premiere Pro
Virtual Reality Tutorials for Premiere Pro
Tutorials for Adobe Audition Beginner Guides to DaVinci ResolveIn this section, we’ll focus on resources that are best for beginners. If you need help figuring out where to start, let these courses, guides and lessons chart your path.

Complete Tutorial for DaVinci Resolve 18 Are you looking for a one-stop shop to learn DaVinci Resolve? This is a great resource. In around 40 minutes, you’ll get a strong overview of the features that every editor needs to know.

Video Editing in DaVinci Resolve for Beginners This is another excellent course that can help you learn DaVinci Resolve. It truly covers nearly every aspect of the app with practical tips at the forefront. Watch it, and you’re well on your way to creating an award-winning film.

Learn DaVinci Resolve 18 in 15 Minutes In a rush to finish your video project? This might be the perfect resource for you. It covers the basics of what you need to know as you navigate DaVinci Resolve.

Master DaVinci Resolve in 20 Minutes Here’s another great lesson when time is limited. This 20 minute guide covers the essentials of DaVinci Resolve with efficiency in mind.

DaVinci Resolve Tips for Beginners & Professionals If you don’t have time to watch a complete course, this grab bag of tips is a great resource. You’re sure to pick up a tip or two that transforms your approach to editing.

Complete Beginner’s Guide To Using DaVinci Resolve 18 Rounding out our beginner resources is yet another complete guide to help you learn the app. This is built with combining and sequencing clips in focus, and is more than enough to get you started.

Learn Color Grading in DaVinci ResolveColor grading is a significant part of the creative process when you produce videos. With the powerful tools built into DaVinci Resolve, you can totally transform the look and feel of the footage. Let’s look at the best resources to help you learn this skill.

DaVinci Resolve Color Grading for Beginners This course can take you from beginner to advanced in a single session. This gives you a technical deep dive into how to control the hues of any scene to your preference. You’ll see a variety of methods to color grade.

How To Color Grade in DaVinci Resolve Need a second resource to learn more about color grading? This is a great way to see another perspective on the skill.

How to Achieve Cinematic Color Grades in DaVinci Resolve This written guide is a fantastic walkthrough of color grading with cinematic effects. You can make your footage look more like your favorite Hollywood movies with these techniques.

Editing & Special Effects in DaVinci ResolveIf you’re ready to go beyond the world of standard edits, this section is for you. From animation to compositing, you’ll learn about advanced editing features.

Learn DaVinci Resolve’s Fusion Fusion is a powerful software built into Resolve. You can use it to produce special effects and composite 2D and 3D models. It’s used in professional productions like Hunger Games and Avengers, but you too can utilize it with the help of this tutorial.

Learn How to Green Screen in DaVinci Resolve Green screen editing techniques allow you to replace a background. This is popular in studio shoots and is an essential skill. Learn how to use Resolve’s built-in tool with this video.

DaVinci Resolve Effects in Just 100 Seconds Believe it or not, you can learn nine unique editing effects in under two minutes. This video covers camera shake effects, simulates a video call, replaces skies, and so much more! It’s all covered in this straight to-the-point, no-fluff video.

Learn Slow Motion in DaVinci Resolve Slow motion appears in a considerable proportion of cinematic productions. But don’t think you need professional-level gear to recreate it yourself. In fact, this video will teach you to apply slow motion with DaVinci Resolve, and no other tools or software are needed.

Learn Animation in DaVinci Resolve Are you interested in animation? This video is right up your alley. You’ll learn to use the free add-on tool MagicAnimateV2 to create animations without learning the skill from scratch.

9 Effects Inside DaVinci Resolve 18 Here’s another tutorial will spark your editing effects creativity. Shake your video with heavy bass, add a glitch effect, and create a split screen with these easy-to-build effects.

DaVinci Resolve WorkflowThe workflow is the structured set of steps that editors use to produce videos. You might know each tool in Resolve, but putting it together in a logical sequence requires thought. Here are resources that help you think more about the big picture of an edit.

Editing Workflow Guide for DaVinci Resolve 18 This video is a must-see for video editors working on their first production. Think of it as a guide that teaches you how the parts of an edit fit together. It focuses on efficiency and teaches you a logical sequence of steps of video production.

DaVinci Resolve for iPad Editing Tutorial Blackmagic recently released a fully featured version of Resolve for the iPad. This tool is drawing rave reviews from beginners and professionals alike. To keep your edit moving while on the go, check out this introduction.

Handy Tips for Easy Editing & Better Grading in DaVinci Resolve Quick tip videos like this are fantastic for leveling up your knowledge. It’s a great variety of tools that save you time and give you outstanding results while editing.

Workflow Organisation & Project Setup in DaVinci Resolve Even if you aren’t a documentary filmmaker, this video is worth a watch. You’ll learn how a real production comes together, managing many hours of footage to weave together a narrative. It’s a must-watch as you build your video storytelling skills.

Audio & Music in DaVinci ResolveTo take your video to the next level, you need to go beyond the video itself. Learn how to make the most of music, vocal tracks, and more with this collection of lessons.

Learn Voice Isolation in DaVinci Resolve We’ve all dealt with noisy audio where background interference overcomes the talk track. Resolve has a great set of tools to help you cope with this in post-production. Find out more about voice isolation for a spoken word focus in this video.

How To Add Music to an Edit in DaVinci Resolve A well-placed background track can transform a video. There’s an art to how to add and adjust audio to fit your video. Learn how to add music and make the most of it with this screencast.

How to Edit to the BEAT in DaVinci Resolve I love high-energy reels where the audio and video seem intertwined. This is an effect generated by following the beat, which you’ll learn to replicate in this lesson.

Voice Isolation & Dialogue Leveler in DaVinci Resolve This tutorial covers two crucial skills: isolating vocal tracks and keeping dialogue level. The second of these skills is crucial so that each scene is consistent and comes across clearly to the audience.

Crash Course to Fairlight in DaVinci Resolve Fairlight is built into Resolve. Think of it as the hub where you mix and adjust your audio. It’s incredibly powerful, but it requires some mastery to make the most of it. Luckily, this Fairlight boot camp can take you from beginner to professional in one sitting.

Sound Tips for DaVinci Resolve Fairlight Ready to take your Fairlight knowledge further for the best mixes? This video gives you even more tips that you didn’t even know you needed!

The post 25 Tutorials for Getting the Most Out of DaVinci Resolve appeared first on Speckyboy Design Magazine.

View Details

CSS has become an all-powerful language. What started as a means to add basic styling to text and other design elements is now capable of much more.

We can use it to craft virtually any layout imaginable. Special effects and interactivity that used to require JavaScript or browser plugins are now supported natively. The language has gone from a basic tool to one of the foundational technologies behind every website.

But like any powerful tool, CSS can also have unintended side effects. Accessibility is among the biggest areas of concern. Some implementations can indeed do more harm than good.

With that in mind, let’s look at a few CSS practices that can hurt accessibility. They include common features that require careful consideration before you start writing code. Let’s get started!

Displaying Important Text Using the content PropertyThe CSS content property offers a slick way to add visual enhancements to an element. For example, you might use it in combination with a pseudo-element to add an icon before a passage of text or list item. It can also display images or strings of text.

But that last one can be particularly troublesome. Text added via the content property is not included in the document object model (DOM). That means assistive technology such as screen readers may not recognize it.

This is fine for purely decorative items. However, it could lead to accessibility issues if the text provides vital context to a page. Users may miss out on important information.

Therefore, it’s best to avoid using the content property for displaying text. That is unless you’re confident that it won’t interfere with a user’s ability to comprehend the page.

Creating Intense Flashing Animated SequencesAnimation is an area where CSS has seen a major evolution. Effects that were once the territory of third-party libraries can now be crafted with relative ease. And since they’re natively supported, they can take advantage of features such as hardware acceleration to boost performance.

Basic transitions and transforms can do wonders to create a mood and grab a user’s attention. And it’s also possible to construct incredibly realistic effects with the help of JavaScript.

But certain animation styles can have negative effects. For some users, too much movement can be disorienting – or much worse. Intense flashing or strobe effects can lead to seizures. This is possible on the web – just as it is in movies, television programming, and video games.

The WCAG 2.0 offers some research-backed guidance for creating animations that won’t trigger seizures or other adverse reactions. For instance, it’s recommended that a presentation is set to flash no more than three times per second, along with keeping sizing small and avoiding the color red.

Thankfully, this doesn’t limit our ability to impress users with movement. There are still plenty of opportunities to enhance our work. But the types of animation used and their potential impacts must be scrutinized.

Unintuitive :hover or :focus States on Interactive ElementsCSS is adept at styling interactive elements. Consider what’s possible with everyday items such as hyperlinks and form fields. They can be customized to the point of being unrecognizable when compared to their default look.

That’s all well and good. But it’s also important to think about what happens when a user interacts with an element. Imagine clicking a button that doesn’t offer any visual cues to confirm what has happened. Or using a keyboard to tab through a menu that doesn’t highlight the current link.

They may be simple, but these micro-interactions help provide users with context. Confirming a button click or understanding what menu item your cursor is focused on are just two examples. And each brings a sense of confidence as a visitor browses a website.

The initial styling of an interactive element is only half the battle. Offering intuitive styles for the :hover and :focus pseudo-classes complete the user experience.

It’s worth noting that these styles should be easily perceptible. In practice, that means using more than just color as an indicator. Adding animations, outlines, or icons can help ensure that no one is left out.

Taking the Basics of Accessible Design for GrantedWe’ve all been there. A project deadline is rapidly approaching and you need to get things done. In the race to launch, some accessibility-related items might slip through the cracks.

Quite often it’s the basics of accessible design that get left behind. Those CSS practices that designers might take for granted and assume are already up to standard.

Prime examples include fundamentals such as legible typography and acceptable color contrast ratios. Without considering and testing these items, a website might not be as accessible as you think.

That’s why it’s worth taking some extra time to review the broader aspects of your site’s styles. Even if an item passes the “eyeball” inspection, go the extra mile to perform an audit. You might be surprised at how many opportunities for subtle improvement you’ll find.

It’s about Using CSS ResponsiblyBecause CSS is so powerful, it’s easy to be tempted by the possibilities it has to offer. Why settle for a basic animation when you can create something cinematic? And how could we not love the convenience of using it to generate content?

It all comes down to empathy and responsibility. Like any tool, CSS is capable of great things. But just because we can implement a specific feature doesn’t mean it’s right for accessibility. We live in a world where people from all walks of life will consume what we build. And it’s our job to ensure they can do so without obstacles.

The bright side is that avoiding the practices above is within everyone’s reach. For the most part, it’s a matter of thinking about the potential impact of what we do. From there, testing provides us with the data we need to refine things further.

CSS is there to make accessibility easier. It’s all in how we choose to use it.

The post The CSS Practices That Can Hurt Accessibility appeared first on Speckyboy Design Magazine.

View Details

40 Free Templates for DaVinci Resolve – Creating a winning video using these outstanding templates.

Design-Pattern Guidelines: Study Guide – Use this resource to help you implement the right UI patterns.

Top Front-End Tools Of 2022 – Discover useful tools that will help speed up your workflow.

Bring Back Blogging – A movement in response to Twitter’s decline.

The State of JS 2022 – Take a look at what JavaScript has been up to in the past year.

The State of Email 2023 – Check out this annual report with expert tips, industry stats, and data-driven forecasts for sending better emails.

Dealing with the Low Profit Areas of Your Freelance Business – Learn to identify problematic services and determine whether they should stay or go.

2022 JavaScript Rising Stars – Discover projects that have been trending upward during the past 12 months.

Our Top Core Web Vitals Recommendations for 2023 – A collection of the best practices from the Chrome DevRel team.

How Social Media Uncertainty Reinforces the Importance of Websites – Why a website is still the best bet for establishing your brand.

:has is an Unforgiving Selector – A look at how the CSS selector has changed recently.

ScrollyVideo.js – A component for creating scroll-based video playback.

How to Help Clients Round Out Their Ideas – Advice for taking the first step in the information-gathering process.

3D in CSS – A reference for creating 3D effects.

Conditional CSS – Common examples of how to write CSS that meets defined conditions.

A Refresh of WordPress.org/Themes – Take an early look at the WordPress Theme Directory’s redesign.

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

View Details

Have you ever been asked a question that you weren’t quite prepared for? Once, during a meeting with a prospective client, I received one that caught me by surprise: “What was your most successful project?”

On the surface, it sounded simple enough. But I had much more trouble providing an answer than anticipated. Success can have different definitions. Frankly, I didn’t have a clear picture of it in my head. In my state of confusion, I flubbed the answer.

That got me thinking. Subjective as it may be, what constitutes a successful project? And how do you effectively explain it?

Personal Success Does Not Equal Project SuccessA project could theoretically be successful for any number of reasons. You might consider the amount of money you made, the prestige of the client, or the existence of a specific technical or design element you created.

For instance, I’m proud of some WordPress websites I’d built that included some sort of customization. Especially when they include features that I didn’t think I was capable of. Thus, I can chalk them up into the categories of personal success and technological achievement.

But do clients even care about those aspects? Sure, they want their website to perform certain functions. But it seems like most wouldn’t think about what goes into the technical side of things. They simply hire us to take care of that for them.

I have a hard time believing that any client is going to focus on a designer’s achievements as a measure of a project’s success. That’s not to say that the things we high-five ourselves for don’t have meaning – they do. But my little PHP breakthrough doesn’t necessarily have the same gravitas for a client.

Tangible Results Are What Matter MostConversely, what a prospective client would more likely want to know about are the results of a project. In other words: How did you help one of your clients to achieve their goals?

This can be tricky – especially if you don’t have detailed case studies to share. And you certainly don’t want to explicitly show an outsider any sensitive data, such as a Google Analytics report.

To start, you may have to be a bit more general in terms of what you share. In that way, you’re talking more about processes than specific numeric benchmarks. An example of this would be a client who was stuck on an ineffective eCommerce platform. Their goals might have included things like easier product management and building a customer loyalty program.

You could then explain that you used WooCommerce and some nifty extensions to create that loyalty program. In addition, you also customized the WordPress back-end to allow for some client-specific layout options. Finally, you provided training and support to ensure that every process can be done as efficiently as possible.

All of the sudden, this project is sounding like a success. And the technical achievements you made do play a role. You did x, y, and z to help a client with their stated goals. Perhaps you can even list this client as a reference (just ask them first).

The idea is that you’re providing a more complete narrative. That’s likely more effective than listing personal accolades.

After all, when a company hires you, they’re doing so in part because they believe you can help them solve problems. This is one way to illustrate how capable you are of doing just that.

Highlight Successful Projects in a Way That Impacts ClientsIt’s worth remembering that, as designers and developers, our idea of a successful project may not be the same as a prospective client’s. Thus, what makes for a great conference talk isn’t necessarily relevant to the people we’re trying to sell our services to.

In my case, I had forgotten this very important point. I tend to get so wrapped up in the actual “doing” part of a project and often remember that more than any other aspect.

But part of being a good web designer is in how we communicate with clients. It’s about understanding what’s important to them and, just as crucial, showing them that we understand. Repeating all the technical jargon that went into building your latest site may work in some instances, but will usually fall flat.

Hopefully, the next time I’m asked about my most successful projects, I’ll be prepared to explain my client’s goals. From there, I can describe how I helped to make them a reality. Or, it may end up like my eighth-grade geography test in that, while I studied hard, I froze when it came to the moment of truth.

Either way, at least I’ll have a better idea of what I should be saying (even if I can’t say it).

The post How Do You Define a Successful Web Project? appeared first on Speckyboy Design Magazine.

View Details

Web designers are fortunate to live in an age that provides access to some incredible tools. They make it easier to create user interfaces, edit images, and even write code. New technology touches virtually every part of our work.

And now the buzz surrounding artificial intelligence (AI) is creating a higher level of expectation. Not only should AI make processes easier, but it should also simply do them for us.

After all, why go to the trouble of writing a WordPress plugin from scratch when there’s a bot that can build one via a few commands?

On the surface, it appears that a massive shift is underway. Web design (or select portions of it) is becoming increasingly automated. That’s a positive in that it removes a little bit of weight from our shoulders.

But tools alone can only do so much. Building a great website requires a whole lot more than a slick UI or advanced algorithm. Here’s why that’s not likely to change anytime soon.

Websites Require Thought and PlanningDid you ever hear the story about the person who bought a readymade website and was an instant success? All it took was a couple of tweaks to the layout and the addition of a logo. Within a few weeks, they were a millionaire!

To the best of our knowledge, that didn’t really happen. The point is that success is rarely something you fall into. It requires careful thought and planning. This applies to websites just as it does in other areas of life.

A great tool can help us execute a plan. But it’s ultimately up to humans to create the right plan. One that provides a vision for what the website should be.

Consider the ingredients of a great website:

Attractive looks;
Ease of use and accessibility;
Offers relevant and compelling content;
Optimized for performance and search engines;
Works across all devices;

None of the above can appear out of thin air. And even the most advanced technology can’t implement these items independently.

Rather, it takes project stakeholders working together to achieve defined goals. From there, tools can be employed to help make these goals become a reality.

Technical Knowledge is Still a MustAn app that does the hard work for us is great – until there’s a problem. For example, think of a page builder tool that produces a flawed mobile layout. Or a buggy code generator that outputs a PHP syntax error.

These issues can and do happen. So, where does that leave us? Having technical knowledge is key to effective troubleshooting. Without it, we’re left scratching our heads and hoping that a support ticket offers a solution.

Knowing how a website works on both the front and back ends is empowering. And it goes well beyond squashing bugs.

First and foremost, it helps us identify what tools to use. We can look at a website’s project requirements and determine the best path forward. This helps to ensure that a website will work as desired and be better able to adapt to future needs.

And speaking of the future – the web changes quickly. Technologies evolve and age out. The ability to stay on top of these shifts is critical.

In addition, we need to understand the process and potential risks of making changes. Thus, at minimum, a basic grasp of these subjects is necessary to succeed in both the short and long term.

There’s No Magical Solution for Building a Great WebsiteIt seems like highly-advanced design and development tools are being released daily. Just when we are wowed by one, something else comes along to steal the spotlight.

Technologies like AI-powered art generation and chat are becoming mainstream. And as we experiment with them, it’s only natural to predict what they’ll be capable of. For some of us, that could lead to feelings of fear. Others may see it as a boon for productivity.

Either way, it’s worth keeping things in perspective. These advancements don’t mean that we’ll be able to sit back and put the entire web design process on autopilot. There’s still much work to be done.

And there are also plenty of opportunities to learn. We can try these tools and see how they might fit into our workflow. Some may end up benefitting us in ways we can’t yet imagine.

But for now, the ingredients of a great website haven’t changed. As such, a web designer’s expertise is as valuable as ever.

The post Even With Tools Like AI, Building a Great Website Is Still Hard appeared first on Speckyboy Design Magazine.

View Details

Are you in need of a new website or looking to give your current site a fresh, modern update? Look no further! We have a collection of 50 free responsive web and HTML templates that will impress your visitors and make your content shine.

These templates are easy to use and are all fully customizable, so you can quickly create a professional-looking website without breaking the bank.

By using templates, you’ll impress visitors to your website. They’ll be amazed by your design prowess – and you don’t need to be an expert to achieve this result! Templates save you time and effort whenever you build webpages online.

Whether you’re a small business owner, blogger, or designer, there’s a template in this collection that will suit your needs. So why wait? Start building your dream website today with these fantastic free templates!

Table of Contents* Free Landing Page HTML Templates * Free Agency HTML Templates * Free Portfolio HTML Template * Free Landing Page HTML Templates * Free One-Page HTML Template * Free Business HTML Templates * Free Blogging HTML Templates * Free Photography HTML Template

More Free Web Templates

Bootstrap Admin Themes
Bootstrap UI Kits
Bootstrap Templates & Themes
Free HTML Resume Templates
Free Responsive Newsletter Templates
Free Figma Templates
Free Web UI & Templates Free Landing Page HTML TemplatesNova Landing Page Web Template (Free)This handcrafted app landing page is a good option for promoting your app. It helps you share key features and encourage your audience to download now.

Moto Multi-Purpose Landing Page Template (on Envato Elements)Moto is a sleek and modern design for any use. You can share key details in a clear and concise way.

Landing Bootstrap Web Template (Free)With a bold and colorful design, this template is perfect for a creative agency or portfolio website. The responsive layout adjusts to any device size, making it easy for clients to view your work.

Oreo Creative Landing Page Web Template (on Envato Elements)Bold black and white hues form the design aesthetic of this free template. It’s a landing page design to quickly bring viewers up to speed on who you are and what you do.

Booth App Landing Page HTML Template (Free)Booth helps you promote your mobile app in style. It features ample room for illustrations and screenshots that let you show off the features of your app.

Solid HTML Landing Page Template (Free)Vibrant and colorful, this template is perfect for a creative agency or portfolio website. The responsive design ensures it looks great on all devices.

Landwind Landing Page Template (Free)Here is a robust template with an array of design options included. You’ll see pre-built menus, page layouts, and more.

Dtox SAAS Landing Page Template (Free)Software as a service businesses need to make a winning impression online. Dtox is a template to help do just that, free of charge.

Uisual Landing Page Templates for Startups (Free)With a sleek and modern design, this HTML template is ideal for a technology or startup company website. The customizable layout allows you to easily showcase your products or services.

Scribbler Landing Page Template (Free)Scribber is geared towards coders and web developers. You can use it to share release notes, product updates, design ideas, and much more.

Responsive Landing Page Template With Flexbox (Free)A landing page delivers the critical first impression of your website. Don’t let it go to waste – use a responsive template like this to feature your content in a modern, minimalistic way.

Land.io UI Kit (Free)Need a responsive web template that helps share details? Here, you can quickly build out fully-featured product overviews and intros that inspire audiences to purchase your products.

Switch Landing Page Template for Startups (Free)Geared towards startups, here is a template that brings your new vision to life. It works on all devices, making it easy to share across the mobile universe and more.

Free Agency HTML TemplatesAgen Creative Agency HTML Template (Free)Featuring a bold and vibrant design, this HTML template is ideal for a creative agency or portfolio website. The customizable layout allows you to easily showcase your work.

Balzac Creative HTML5 Template for Agencies (on Envato Elements)Sleek and elegant, this is a lavishly illustrated HTML online portfolio. This is a perfect option for a design studio, fashion brand, or photographer.

Medio Web Design Agency Template (Free)Medio embraces the minimalist aesthetic in its design. Animations are included to bring each page layout to life with the creative use of motion.

Creative Agency Web Template (on Envato Elements)Colorful pages and layouts help your web template stand out from the crowd. With this one, you have many bold and vibrant options to choose from – all included.

Doob Agency HTML Template (Free)Doob is a no-frills HTML template perfect for your company or agency. Text sharply contrasts from the background, bringing key details of your homepage to life.

Free Portfolio HTML TemplateMinimal Bootstrap Portfolio Template (Free)Minimal Bootstrap helps you share your portfolio. You’ll find space for imagery, along with links and text descriptions that fuel engagement and drive sales.

Sonex Minimalistic Portfolio Template (on Envato Elements)Sonex is another free portfolio option. The minimal graphics help your work stand out, and the page layouts won’t ever be a distraction to readers and viewers.

Magnet Minimalistic Portfolio Template (Free)Magnet is a simple, yet refined HTML template for your online work. The complete list of features is readily customizable, helping you craft your own website quickly and efficiently.

Oifolio Creative Portfolio Web Template (on Envato Elements)Home page layouts like this are sure to generate a second look. You’ll see high-contrast text and large placeholders for images, videos, and animated graphics.

Ethos Modern Resume Website Template (Free)Are you building an online homepage for yourself? An online resume is a popular way to jumpstart your career, and this template is specifically geared for this purpose.

OAK Creative Portfolio Web Template (Free)OAK is a creative portfolio template with contemporary, polished styling. It’s reminiscent of printed magazine layouts, with lots of spaces for images and subtle text on the sides.

Kross Creative Portfolio Template (Free)Kross has a fun purple background that readers will enjoy. Think of using it for your own online resume or as a homepage for your design firm or small company.

Dopefolio Portfolio Template for Developers (Free)When potential clients seek a developer, they need to know exactly what you’ll do for them. When you use a template like Dopefolio, you’ll be able to present these key details in a stylish way that’s easy to navigate.

Phantom Portfolio Web Template (Free)Phantom is the ideal starting point if you need to build an entire website but are pressed for time. Each of the colorful boxes helps page viewers navigate through separate sections of your online page.

Global HTML5 Portfolio Website Template (Free)Dark backgrounds are easy to read, and they’re incredibly stylish. Embrace their use with the Global HTML5 Portfolio Website Template, which is filled with cinematic colors and contrasts.

Howdy Responsive HTML Template for Freelancers (Free)There are millions of freelancers online – so how can you stand out? Begin with the Howdy HTML, a fully featured landing page template to introduce yourself to potential clients everywhere.

Free One-Page HTML TemplateSynthetica One-Page Website Template (Free)Single-page websites help you convey essential info at a glance. The Synthetica free template helps you build a homepage just like this, with everything on one page.

Modak One-Page HTML Template (on Envato Elements)Modak is a template built for creatives anywhere online. With it, you can share your credentials, introduce your team, and show off your work.

Floper One-Page Portfolio Website Template (Free)A single-page portfolio lets you show off the highlights of your work in a flash. Floper is a template to help you build just such a layout, saving you time and trouble as you work.

Brex One-Page Parallax Template (on Envato Elements)Brex is a free template targeted at creative agencies. It’s especially useful if you have a large amount of detail that you need to share with audiences in one place.

Boxify One-Page Website Template (Free)Are you introducing a new mobile app or tech product? Bring its features to life using Boxify, a slick modern web template for tech and creative firms.

Paradigm Shift HTML Template (Free)Paradigm Shift: the name says it all. Elevate your online presence to the next level with this professional yet easy-to-use template design for 2023.

Luther One-Page Resume Website Template (Free)Luther serves up studio-grade styling for your next resume website. It’s sure to help you stand out from other job candidates when you fill in your experience and credentials.

Ethereal One-Page Vertical HTML Template (Free)Ethereal, as the name suggests, features a beautiful 3D gradient background design. It’s a good choice if you have plenty of imagery and creative designs to share online.

Forty HTML5 Web Template (Free)Forty is responsive and simple to work with as you build a website. But it never compromises usability and style, a fact that your online audience will appreciate and enjoy.

Homene One-Page HTML Template (Free)Homene is a text-forward design for your website. The HTML design is quick and efficient to edit, and it helps you generate sleek websites with just a few clicks.

Dimension One-Page Web Template (Free)Websites that focus on the fundamentals put you first. Dimension is just such a template, with elegant buttons and menus that make your content easy to navigate.

Sedna One-Page Website Template (Free)Sedna is a creative design template that makes use of contrasts to help sections stand out. Think of this one if you’re introducing a new mobile app or design feature for a product.

Stellar HTML5 One-Page Template (Free)Stellar helps you get back to the basics of online design. It’s a winning option if you need a fully functional site very quickly.

Free Business HTML TemplatesPromodise Startup Business Web Template (Free)Promodise is geared towards startups and newer businesses. You’ll find space to introduce your team and outline your pricing structure for potential clients.

Panorama Responsive Business Email Template (on Envato Elements)Panorama is a top-grade email business template. Give it a try to elevate the quality of your marketing communications that you send out via email.

Hook Dark HTML Web Template (Free)Need a bold, eye-catching design for your landing page? Hook is unmatched, with an inky background and crisp white fonts.

Activebox Responsive One-Page HTML Template (Free)Activebox works for any business that needs a simple landing page. You can put your key details all in one place to help readers navigate.

Free Blogging HTML TemplatesSpurgeon Clean & Minimal HTML Blog Template (Free)Spurgeon is a minimal, sleek design for your blog. You can use it to introduce yourself and categorize posts and other content efficiently.

Emily Personal Blog HTML Template (on Envato Elements)Here is another free template for your personal blog. The homepage is structured as an “About Me” section, while other categories exist for written and visual content that you share each day.

Editorial & Blogging HTML5 Web Template (Free)If you share many types of content, this template is for you. It has a full set of menu sidebars, and a helpful search function to help audiences find what they’re looking for with no issues.

Genial Minimal Blog HTML Template (on Envato Elements)Genial is a template for your blog or online portfolio. Drop in your content and place it across over 15 page designs and layouts.

Brook Minimal HTML Template for Blogs (Free)Brook puts content front and center without compromising stylish looks. It’s an excellent choice for bloggers who like to illustrate and put their words first.

Future Imperfect HTML5 Blog Template (Free)Future Imperfect presents content in clearly defined sections, making it easy to navigate. You can control text previews, image thumbnails, and more, helping drive engagement on key topics.

Dropcast HTML Website Template (Free)Dropcast is built for podcasters and multimedia content creators. Consider this one if you need to elevate your outreach to your listening audience.

Massively Blogging HTML5 Web Template (Free)A lookbook design combines portfolios and blogs to share visual content in new and creative ways. It helps you capture (and keep) the attention of future readers, clients, and customers.

Free Photography HTML TemplatePhotography Website Template (Free)Photographers must have an illustrated portfolio website to show off their work to the world. This template is meant just for that, with ample room for imagery and details like rates, specialties, and more.

Apollo One-Page HTML Template for Photographers (Free)Apollo is a single-page layout for photographers anywhere. It provides room for a quick introduction and a small sampling of your favorite work.

A ready-made template is a perfect option for you to build a powerful website for your business. So, go ahead and find the best template for your website and give it a brand new look and enhanced functionality.

The post 50 Free Responsive Web Layout HTML Templates appeared first on Speckyboy Design Magazine.

View Details

As a publishing medium, books are survivors. They continue to flourish, even as our society embraces other high-tech forms of content consumption. There’s still something about holding one in your hand that feels right.

Thus, it’s no surprise that web designers express their book fandom through code. Some pay homage to their favorite titles. Others seek to recreate the medium’s form and function on a screen.

Today, we’ll introduce you to some impressive book-related code snippets. They use CSS and JavaScript to bring literature to life. You’ll find everything from 3D objects to fully-interactive page-turners. Here we go!

CSS Coffee Table Book Effect by Lynn FisherWith the help of CSS, any image can become a book. This snippet takes advantage of the CSS transform and clip-path properties to create a 3D rendering. Perfect for displaying on your coffee table (or virtual desktop).

See the Pen CSS coffee table book effect by Lynn Fisherhello

Pure CSS Book Loader by Aaron IkerLoading graphics offers a simple way to improve the user experience (UX). But you don’t have to settle for something generic. For example, book-related websites could add an extra touch of context with this fun animation.

See the Pen Pure CSS Book Loader by Aaron Ikerhello

Missing Book 404 Page Animation by ValeriiaHere’s an interesting way to use books in web design. This 404-page layout opens up a cabinet to reveal a stack of books. Each book is a clickable navigation element. An empty outline represents the missing page that can’t be found.

See the Pen 404 page animation – missing book by Valeriiahello

George Orwell’s 1984 in CSS & SVG by TheahelloUsing a combination of CSS and SVG, this pen celebrates George Orwell’s classic “Nineteen Eighty-Four“. Hovering over the element changes the perspective, with the book’s spine coming into view. This effect would be an excellent fit for a bookseller or review blog.

See the Pen George Orwell #CodepenChallenge by Theahello

Kindle Paperwhite Simulator in CSS by Iah BhelloYes, books have joined the high-tech scene – thanks to devices like the Kindle Paperwhite. It allows readers to carry an entire library’s worth of literature around (try doing that with old-school hardbacks), while still offering a paper-like experience. Click around this emulator to explore the universe.

See the Pen Kindle Paperwhite Simulator by Iah Bhello

Field Notes Workbook with CSS by Tim AronanThis ingenious replica of a Field Notes workbook is completely interactive. Hover over the cover to open the book, type a message directly onto a page, and hold down on the page to flip to a new one. Amazingly, this is all done with CSS and HTML forms.

See the Pen Working Field Notes w/ CSS by timaronanhello

A Book Generator Apart by Dave RupertIf you’ve ever wanted to write a book, here’s your chance to play pretend. Enter your book’s title, author, and issue number. You can also change the cover’s primary color. Then download an SVG image and share it with friends!

See the Pen A Book Generator Apart by Dave Ruperthello

Book Flip Page Turn with CSS & JavaScript by Anya MelnykThe idea of “turning” the pages of an online book has been around for a long time. The effect goes back to the days of Flash. These days, it can be built with a little bit of CSS and JavaScript (the Turn.js library, in this case). It’s a fun way to add interactivity to any website.

See the Pen book flip page turn by Anya Melnykhello

Add a Literary Touch to Your ProjectsWhether you’re creating a tribute to Harry Potter or simply love the aesthetic of books, there are plenty of ways to integrate them into your website. The snippets above serve a variety of purposes. However, they only scratch the surface of what’s possible.

If you’re looking for even more literary inspiration, be sure to check out our CodePen collection!

The post 8 CSS & JavaScript Snippets That Celebrate Books appeared first on Speckyboy Design Magazine.

View Details

All Things AI – Use this resource to find AI tools and services.

ResumeTide – A tool that aims to help you quickly build an attractive resume.

What is a Design System? – A quick guide to six different types of design systems.

Top Pens of 2022 on CodePen– Explore the most hearted pens of the year!

The Website-Related Skills Your Clients Really Need to Know – Skills that will help clients effectively manage their website.

Sailboat UI – A modern UI component library for Tailwind CSS with 150+ components.

Unicopy – Click to copy common Unicode characters and symbols.

Why You Should Conduct Annual Website Audits – Tips for auditing the websites you manage and what you can learn along the way.

Why do users prefer certain design? – How evolutionary factors of environment perception affect our preferences for a particular design.

Tree Views in CSS – Learn how to build an accessible tree view using HTML and CSS.

HTTPie AI – This tool uses artificial intelligence to make it easier to interact with APIs.

CSS Style Queries – Take an in-depth look at this experimental CSS specification.

Five Typography Trends Set to Make Waves in 2023 – A look at the innovation happening with typography.

Why Web Performance Still Matters in 2023 – How a performant website can boost user experience, SEO, and more.

Commercial & Community Categorization is Live on WordPress.org Theme & Plugin Directories – These changes aim to help users gain valuable background information on themes and plugins.

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

View Details

Starting a freelance design business is something of an experiment. You throw all kinds of ideas out there and see what works. And, over time, you get to learn the results.

When those results are tallied, not every idea is going to come out as a winner. Some services you offer may turn out to be making you little-to-no money. In extreme cases, you might even lose revenue on them.

It may be tempting to simply wipe these types of services off your menu. But it’s not always that easy. Clients may be depending on you for these items. Not to mention the possibility that you’re contractually obligated to keep things going for a while. Then, there could also be some non-monetary value to what you’re doing as well.

Let’s shed some light on this subject. First, we’ll look at how to identify areas of your business that is not doing much for you financially. From there, we can examine these areas to see if they should stay or go.

Look at the MarginsHopefully, the core services you provide clients are doing well (if not, that’s a whole other discussion). Those are generally the areas of business that designers should be spending most of their time on.

Quite often, it’s those surrounding products or services that are the troublemakers. Things that seemed to be a good idea at the time but perhaps never lived up to expectations.

Plus, so much depends on your niche and how it has evolved. If your business has changed direction in recent years, there could be some offerings hanging out there that are no longer relevant to you.

I’ll use myself as an example here. In the early years of my business, I tried to offer several different services beyond web design: hosting, SEO, digital advertising, social media, etc.

As the years rolled on, I found that some of the items on that list were not making me money. Some were even taking time away from more profitable services. This isn’t to say that any one of them doesn’t have the potential to become at least marginally profitable. It’s just that, given my focus and resources, they weren’t all that great for my situation.

Every business is unique, so your answers will likely be different than mine. But that’s the point. Take a look at what you’re doing and see which services may not be pulling their weight.

Determining the Fate of a ServiceBeyond monetary value, there are other considerations for whether a service is worth keeping around:

RelevanceIf something compliments your core services, then maybe it still deserves a spot on your menu. The tricky thing here is looking at why it hasn’t been profitable.

Maybe you didn’t spend as much time on it as you planned, or had a flawed approach. There’s always the possibility to retool things to bring in some cash.

On the other hand, even a relevant service can be a resource hog. If it’s taking too much of your time and not making you money, the writing could be on the wall.

Likewise, a service that no longer fits in within your business strategy should probably be jettisoned.

Client RelationsSometimes, it’s those little things that mean a lot to clients. Taking care of those tiny inconveniences for them (like domain renewal, for example) may be a pain to us. However, they are also a way to build some goodwill.

It’s akin to the niceties of a fancy hotel. These small gestures (the mint on the pillow, towels folded in artistic shapes) let clients know you care about their needs.

This could be worth continuing if you get a sense that your clients benefit from the service. However, that must be measured carefully against the time and responsibilities that come with such perks.

Removing a Service from Your OfferingsIf you have determined that a service is no longer viable, it’s time to phase it out. As mentioned previously, this isn’t necessarily an easy task.

The more clients who use the service, the more difficult it will be to discontinue. There may be situations where you’re obligated to provide a service until a specific date. Therefore, you can’t just pull the rug out from under people.

Regardless, the first step in the process is to inform clients about the impending change. Ideally, you’d provide at least a month’s notice or more. Send them a letter (electronic or otherwise) that details the discontinuation and any steps they may need to take.

In some cases, there might be an alternative service you can recommend. For instance, if you’ll no longer be hosting websites, you could offer up a list of providers. Since changes can make life more difficult for clients, it’s important to try and soften the blow in any way you can.

It’s also worth building some flexibility into your plans. Setting hard deadlines for changes may sound reasonable, but life often has other ideas. Be prepared to make a temporary exception or two on the way to removing a service.

All Businesses ChangeThe longer your freelance web design business goes on, the more likely it is that you’ll experience some significant changes. Not only do the tools and technologies evolve, but the very services you offer will change with the times.

And, despite good intentions, not every service you offer will make money. Thus, it’s important to identify what’s working and what isn’t. From there, it’s about taking action to ensure that these offerings either shape up or ship out.

The post Dealing with the Low Profit Areas of Your Freelance Business appeared first on Speckyboy Design Magazine.

View Details

Working with clients requires a lot of exploration. They may want you to build their website – that much is clear. But it takes a skilled designer to fish out all of the details.

Those details are important because they can greatly impact the project’s scope, budget, and outcome. Without them, we’re left to simply guess and hope we made the right decisions. We may also be leaving quite a bit of money on the table.

The trouble is that unless your client is incredibly tech-savvy, they could have difficulty in providing fully-formed ideas. For instance, they might need a shopping cart. But they may not have thought about how it should work or what kind of results to expect.

Web designers can’t afford to work based on these sorts of vague requests. Instead, we must help our clients understand what they need and how it will impact their projects. This is the first step in the information-gathering process – before we even think of determining the eventual requirements.

Let’s look at some ways we can help to fill in the blanks and round out our client’s ideas.

Getting a Broad View of What’s NeededEarly on, clients tend to paint a picture of their project using broad strokes. In some cases, they may only mention what they consider to be the most important aspect. That could be the aforementioned shopping cart, a news-oriented site with multiple authors, or perhaps that they want to accept event registrations.

Generalities are a fine place to start the conversation. But there are likely more ingredients involved. A website is more than just its standout feature, after all. And these additional items could be just as important from a web designer’s point of view.

Take our news-oriented site as an example. That general description doesn’t tell us much about the types of content to be published. Nor does it give us any clues regarding the target audience. Oh, and it would be nice to know how the client plans to make money from the venture.

With that in mind, it’s important to get a full picture of a project. A few good questions may be all you need to find out. But it’s not always that easy.

Some clients may not have thought that far ahead. Thus, they may have to do some soul-searching before understanding the full scope of what they want. Hopefully, you’ll be able to get them started on the journey.

Learning about Budgets and TimelinesOnce you and your client have a basic grasp of a project’s concept, it’s time to dig into expectations. There’s still not enough info to provide a cost estimate. Thus, this next stage is more about defining some general parameters for the budget and timeline.

It’s also where any grand ideas can meet a dose of reality. A client with a tight budget may not get everything on their wish list. The same goes for those that need their website launched within a short period. If they fit both profiles, well, that could be an issue.

That’s not to say the project won’t get off the ground. Rather, it will require some adjustments. Either increase the variables to match the needs or scale back the expectations. Something has to give in this scenario.

But what if a client has no particular budget in mind? That’s not necessarily a bad thing. It provides an opportunity to discuss flexibility. You might, for instance, offer a broad price range. This will help them get a clearer picture of what it will take to accomplish their goals.

It’s also important to note a client’s willingness to listen and adapt. This can be a good indicator of how your working relationship will fare. Someone who refuses to give an inch may not be the best fit. In contrast, a client who can rationalize their need to change is likely to be a more productive partner.

Help Projects off to a Great StartThere are so many details that go into building a website. The look and layout are only one part of the story. Technical items such as hosting requirements and back-end functionality are also of great importance.

But we can’t get to the nitty-gritty of a project without first understanding a client’s basic needs. They must provide us with a broad view that we can use to hammer out the specifics.

As such, those first conversations between the client and designer are pivotal. This is where we’ll gain an understanding of a client’s thought process. In addition, we can ask questions to help fill in the blanks.

From there, we can formulate accurate cost estimates and move on to the fun of turning ideas into reality.

The post How to Help Clients Round Out Their Ideas appeared first on Speckyboy Design Magazine.

View Details

If you’re a video editor looking to take your projects to the next level, you know that finding the right template can make all the difference.

That’s why we’ve compiled a collection of amazing free templates for DaVinci Resolve, the modern and popular video editing software used by many. These designs are easy to use and customizable, so you can quickly create professional-looking videos easily.

Whether you’re a newbie or a professional, you’ll find a template here that will suit your needs. From stunning title sequences to sleek lower thirds, these templates have everything you need to bring your videos to the next level and make them stand out fropm the crowd.

Templates like these are must-haves in your creative arsenal. They save you time, and you don’t need to be a design expert to use them. And your audiences will thank you: they’ll enjoy cinematic styles whenever they watch one of your videos.

So why wait? Start creating a winning video today with these fantastic free templates for DaVinci Resolve!

Table of Contents* Free DaVinci Resolve Titles Templates * Free DaVinci Resolve Lower Thirds Templates * Free DaVinci Resolve Opener Templates * Free DaVinci Resolve Special Effect Templates * Free DaVinci Resolve Transition Templates * Free DaVinci Resolve Instagram Story Templates

More Video Template Collections

Free Presets for After Effects
Free Premiere Pro Templates
Free Final Cut Pro Templates
Free Apple Motion Templates Free DaVinci Resolve Opener TemplatesModern Opener Logo Template for DaVinci Resolve (Free)Featuring a sleek and modern design, this video opener template is ideal for a corporate or business video. The user-friendly layout allows you to easily add your own branding and logo.

Urban Opener Template (on Envato Elements)This video opener template has a bold and energetic design, perfect for a sports or action video. The customizable layout allows you to easily add your own text and footage.

Dynamic 3D White Logo Template for DaVinci Resolve (Free)A dynamic logo video opener like this is an incredible way to introduce your brand. It places your logo front and center, ensuring it captures the attention of your audience.

Free DaVinci Resolve Lower Thirds TemplatesThin Border Lower Third Template for DaVinci Resolve (Free)With a thin border, these lower thirds designs won’t obscure your video content. They’re a top choice if you need a subtle text overlay that won’t distract your audience.

Titles & Lower Thirds DaVinci Resolve Pack (on Envato Elements)When you craft a video in DaVinci Resolve, it’s best to keep an elegant and unified theme. This pack includes many design options that share a similar aesthetic.

Lower Thirds for DaVinci Resolve (Free)Lower thirds overlays are often used in interviews, documentaries, and more. Add stylish lower thirds of your own to your next project, thanks to this free template design.

DaVinci Resolve Lower Thirds Template (on Envato Elements)With 16 options to choose from, you’ll have no problems adding text to your videos with this template. Don’t forget to customize the text and color elements to make the designs your own.

Clean Titles Pack For DaVinci Resolve Macros (Free)Clean titles complement the content they describe. They’re an essential part of any video, and these fast-rendering layouts won’t waste your time.

Elegant Lower Thirds for Davinci Resolve (on Envato Elements)With cinematic animations and bold text, your audience will take notice of these lower thirds for DaVinci Resolve. They’re built in 4K resolution, making them crisp and sharp on the very best displays.

Progress Radial Lower Third Template for DaVinci Resolve Template (Free)Radial animations are eye-catching text overlays for any video. Add one of your own here – all you have to do is drop in your own text, and you’re all set.

Titles Template For DaVinci Resolve (Free)Title overlays put text first and foremost in any video. This pack has an array of colorful options that pair well with the content of all kinds.

Subscribe Button With Mouse for DaVinci Resolve (Free)When you’re sharing videos, your goal is often to encourage viewers to come back for more. With this template, you can add a ‘subscribe’ button to your videos to encourage engagement.

Titles Template For DaVinci Resolve (Free)With a purple color palette, these are simple and stylish text overlays for DaVinci Resolve. Add your own text, then change up the size and style to add overlays to your next video.

Simple Dot Callout Template for DaVinci Resolve (Free)Dot callouts help you call visual attention to key details in your video. This template allows you add them anywhere, and it uses a stylish, crisp font that’s easy to read.

Social Lower Thirds For DaVinci Resolve (Free)Need to share your social media presence with your video audience? These lower thirds let you share your social channels with your audience in an elegant, memorable way.

Free DaVinci Resolve Titles TemplatesFloral Wedding Titles for DaVinci Resolve (Free)These wedding titles are the perfect way to style memories of your special day. They’re easy to add to any wedding video, and they’ll make it unforgettable.

Stylish Typography Intro Template (on Envato Elements)Need a bold, colorful text intro? You’ve found the perfect one here, featuring funky and bright designs that are simple to customize.

DaVinci Resolve Title Templates (Free)These beautiful title overlays won’t take away from your video content. They’re studio-grade methods to introduce the work you’re sharing in your projects, and audiences will love them.

Catchy Title Templates for DaVinci Resolve (on Envato Elements)Keep in mind: the goal of titles is to capture attention and add context. That’s what these titles are meant for, and they’re simple and quick to work with.

Dynamic Distance Meter Title Template for DaVinci Resolve (Free)A distance meter helps you add a sense of scale to your video projects. You can add one with just a few clicks, thanks to this dynamic DaVinci Resolve template pack.

Modern Glitch Titles Templates (on Envato Elements)Glitch titles are funky and modern, and you’ll often find them in sports and action videos. Try them out in your own work with this title pack, filled with many unique designs.

Simple Video Mask Title for DaVinci Resolve Template (Free)Text masks add titles even as they preview your underlying video content. This is a sleek and elegant option to add written masking to your next video.

Call Out Title Pack for DaVinci Resolve (Free)Call-out titles link text to specific elements in your video. Especially useful for explainers and tutorials, text features like this can be yours, all thanks to this robust free template.

Outline Fill Reveal Title Template (Free)Polished and sleek onscreen, these title overlays grab the audience’s attention. In no time, you’ll be sharing text that will never go unnoticed.

Christmas Title Template for DaVinci Resolve (Free)Is it the season for festive titles? This template pack has you covered for fun, Christmas-themed text overlays that are quick and easy to edit.

Brush Title Template for DaVinci Resolve (Free)Brush titles provide a hand-drawn, artistic look to your videos. You can customize the text, and enjoy the creative styles applied to it.

Free DaVinci Resolve Special Effect TemplatesDiode Screen Effect for DaVinci Resolve (on Envato Elements)Diode effects like these lend a funky, glitchy vibe to your next project. Here, you can add them to your video work without needing advanced design skills.

Magic Animated Letterbox Tool (Free)This animated letterbox template is a fun way to make your video stand out. The creative effects inside are easy to add, modify, and work with.

Realistic Hits & Rumbles Effects for DaVinci Resolve (on Envato Elements)Dramatic effects like these add energy to action videos that you produce. Give them a try if you need to ramp up the intensity of a film that you’re working on.

MagicAnimateV2 (Free)Animations help you transform flat videos into something special. This toolkit assists you with adding animations throughout video files in DaVinci Resolve.

Hallucination Effects for DaVinci Resolve (on Envato Elements)Ethereal effects are popular in many genres of film, and you can bring them to your own work with this template pack. The effects are powerful, and yet easy to apply and customize.

Matrix-Inspired Layout Pack for DVR (Free)These matrix effects are ideal for sci-fi and drama videos that you might be producing. The dramatic green overlays are reminiscent of popular films, and you can add them with just a few clicks.

MagicGradient Tool for DaVinci Resolve (Free)Gradient backgrounds add a touch of 3D styling to any video that you’re working on. This simple toolkit aids you in adding these backdrops in a flash.

Ultimate Seamless Transitions for DaVinci Resolve (Free)Transitions work to keep your video flowing, moving seamlessly from scene to scene. Add them to any video clips in DaVinci Resolve, thanks to this basic, yet powerful transition toolkit pack.

Free DaVinci Resolve Transition TemplatesVertical Split Frame Template for DaVinci Resolve (Free)Vertical split frames like this one move video clips up and down onscreen. They’re eye-catching transitions, and you can work with them in your own projects using this template.

120+ Flat Transitions for DaVinci Resolve (on Envato Elements)Flat transitions segue content, without being distracting or disruptive. This collection includes over 120 transition designs with a flat aesthetic and style.

mTransition Luma Matte Transition for DVR (Free)These Luma transitions add stunning motion effects to any video in DaVinci Resolve. In no time, you’ll be crafting video productions that look right at home on the big screens of cinema.

20 Curtain Transitions for DvR (on Envato Elements)Curtain transitions provide a clearly defined break between sections of a video. They’re dramatic, stylish, and simple to use, thanks to this robust and flexible template design.

Motion Blur Swipe Transition DaVinci Resolve Template (Free)Motion blur transitions are otherworldly and surreal ways to advance videos and films. Add them here, with several options and styles to choose from.

Distort & Twist Transition DaVinci Resolve Template (Free)Do you quite literally need video transitions with a twist? Here’s the perfect free template choice for you, loaded with the ability to add spiral transition animations to any video.

Free DaVinci Resolve Instagram Story TemplatesVideo Drop Story DaVinci Resolve Template (Free)Green templates like this are tailored for your social media. Drop in your own content, and you’ll soon have stunning shareable videos for Instagram and other social story platforms.

Monochrome Instagram Stories Template (on Envato Elements)Monochrome effects help your content stand out. That’s more important than ever in the packed arena of social media, where it’s essential to differentiate yourself to drive engagement.

Gradient Shape Animation Story DaVinci Resolve Template (Free)These gradient shapes provide beautiful overlays to your Instagram story content. They’re geared towards the smaller screens of mobile phones, where every bit of space counts.

The post 40 Free Templates for DaVinci Resolve appeared first on Speckyboy Design Magazine.

View Details

In the early days of Facebook, I recall having a few conversations with people who wondered if the platform may one day serve as a website replacement. Facebook Pages, after all, enabled organizations of all sizes to easily connect with their audience.

The argument made sense on some levels. Facebook Pages were free – websites not so much. Why pay for a potentially complex marketing vehicle when there was a simple, no-cost option? This seemed like a particularly good path for small businesses.

As you might have guessed, that optimism faded rather quickly. Facebook started charging for the ability to reach your entire audience. It also became increasingly difficult to stand out in a user’s chaotic social feed.

Now, let’s fast-forward to today. Elon Musk’s purchase of Twitter (and subsequent headline-grabbing actions) has caused concern among users. Content moderation has taken a backseat to the billionaire’s vision of what the platform should be. It’s fair to wonder how this will impact the ability to reach and engage with people.

With that in mind, it seems like a good time to reinforce the important role websites play. Here are some reasons why they’re still the best bet for anyone that has a message to share.

A Permanent Home for Your ContentSocial media still offers a great way to promote your content. But your content shouldn’t live on Facebook or Twitter. Rather, social postings should point readers toward your website.

Housing exclusive content on social media is a risk. Changes in platform ownership or policies could negatively impact what you’ve built. And if you decide to leave a particular service, how are you going to take everything with you?

Websites serve as a repository for content. That’s precisely what content management systems (CMS) such as WordPress are meant to do.

News, blog posts, and multimedia can be added, edited, or removed at any time. Most social networks don’t make these processes easy. Finding a particular tweet that you failed to bookmark, for example, is like finding a virtual needle in a haystack.

Most importantly, you’ll maintain ownership of your content. This means that you’re not subject to the whims of a third-party service provider. And you can keep it as long as you want.

The Focus Is on YouUsers have a notoriously short attention span. Add to that the sheer number of posts in a typical user’s timeline and the popularity of doomscrolling. This makes social media a difficult place to make an impact. All but your most loyal followers will struggle to see your message.

At the very least, a well-made website will take those last two items out of the equation. Getting users to care is still a challenge. But you’ll stand a fighting chance when compared to the algorithm-enhanced free-for-all on the likes of Facebook.

A website can provide visitors with a clear path to action. It gives them space and time to explore content. And it serves as a reference that can be easily accessed later.

You’re not limited by character counts, nor forced to compete with thousands (or hundreds of thousands) of other posts on a feed. For one shining moment, the focus is on you with zero distractions.

It’s an opportunity that most social media platforms can’t offer. Plus, you’re in complete control of the user experience.

Websites Can Live AnywhereCompanies can come and go without a moment’s notice. Others may simply fall out of favor (I see you, MySpace). It’s something that can impact both social media and website providers.

The big difference is that a website offers options. Even if your DIY website tool were to go belly up, you could still rebuild elsewhere. And an open-source CMS gives you the flexibility to host anywhere.

If your social media network of choice went away, you’d likely be left in the cold. Your data may or may not be accessible. And what use would you have for it, anyway? It’s not like you can import your tweets into LinkedIn and keep moving forward.

Plus, if you’re not satisfied with your current site, you can make changes. Hosting, CMS, look, content, and underlying technologies are all fair game. If you have enough budget, virtually every part can be customized to match your needs.

Keep the Roles of Social Media and Websites in MindFor a brief moment in history, the lines between social media and websites may have become blurred. Some saw the potential of the former to be a primary messaging tool. But as social media has experienced both growth and controversy, the division between the two has become clear.

Sure, many web designers may have understood this concept from the start. But clients aren’t always aware of what makes a website necessary and unique.

They may have been swayed by the thrill of posting content wherever they’ll get the most “likes” and comments. As such, they may not have thought about what happens when a platform goes away or is no longer an attractive option.

If you help clients with their marketing and content strategy, it may be worth having this conversation. Help them to understand what role social media can play in their success. But also look at the associated limitations and risks.

Conversely, there are benefits to using your website as a driver of content. This is a solution that can withstand the test of time – no matter what happens on social media.

The post How Social Media Uncertainty Reinforces the Importance of Websites appeared first on Speckyboy Design Magazine.

View Details

Unify Framework
A new HTML/CSS/JS library, and a set of standardized files, that can be used as the basis for building outstanding web designs.

Free WordPress Generators
A collection of 40+ generators that will speed up WordPress development.

Useful Accessibility & Usability Examples
Strategies and methods to tackle some common graphic communication problems, and insights into how to improve things.

Writing Can Help Your Web Design Career
Writing may not be the right option for everybody, but it could lead to becoming a better web designer.

The State of Mobile User Experience
This is the latest edition of Mobile Report from the Nielsen Norman Group.

Best Data Visualization Projects of 2022
A collection of Nathan Yau’s favorite data visualization projects from last year.

Things CSS Could Still Use Heading Into 2023
A collection of ideas from Chris Coyier on what he feels is still missing from CSS.

2022 CSS Updates
A selection of exciting additions to CSS that became fully or nearly cross-browser last year.

The State Of Usability in 2023
Observations from real usability testing on what people do and what they don’t do on the web.

Gradient Templates
A handpicked collection of copy & paste linear gradients.

Aurora Editor
An IDE built by the community, for the community, and written in Swift for the best native performance and feel for macOS.

The Bad Freelance Habits You Should Avoid
Like most bad habits, they seem to start slowly, and if left unchecked, they have the potential to wreak havoc.

The Best of Material in 2022
System capabilities, component updates, design resources, and an entirely new workflow, are just some of the top moments from Material Design last year.

A Theory of Web Relativity
The rel attribute plays an important role in providing meaning to the links, taking the web to the next level semantically, and boosting your site’s performance.

Why We Hang Onto WordPress Nostalgia
With WordPress nostalgia there’s an emotional connection that goes beyond casual memories or markers on a timeline.

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

View Details

Implementing creative solutions is a big part of what web designers do. And one area that requires a lot of attention is making things easier for clients to manage. This often comes with the use and customization of a content management system (CMS) such as WordPress.

But fully autonomous websites aren’t a thing yet. So, no matter how many customizations we’ve done, clients are still going to need to do some things for themselves.

As such, they need to have a working knowledge of some relevant skills. They may not be fully aware of what’s involved. Therefore, communicating this information is key.

With that in mind, here are five such web-related skills that clients will need to get the most out of their website.

Basic Image EditingModern websites can be very media-intensive. We often include features such as hero areas and slideshows that serve as a showcase for images.

They may require that images be sized according to some specifications we’ve set during the design process. And odds are that standard stock photos will need to be cropped to fit. If your client will be the one updating these elements, they’ll need to know how to accomplish this.

For some, image editing can be intimidating. Therefore, it’s best to advise them based on need. That means we don’t have to necessarily point them towards complicated or expensive tools. Photoshop and GIMP are terrific but may be overkill for someone who just needs a quick way to crop a photo.

Instead, it may be more appropriate to recommend simple tools – even online image editors. They’ll help your client do what they need without overwhelming them.

Content OrganizationHere’s a scenario for you. Let’s say you’ve built this beautiful, perfectly-organized website for your client. You train them and are on your merry way. Six months later, they want to add a feature. So, you log in, and… the content structure is a mess.

You might surmise that this is how your client wanted to “organize” things – so be it. What’s the harm? Well, this can devolve into a nightmare in a relatively short amount of time.

For one thing, when there is no clear hierarchy of pages or different types of content are mixed and matched, items can be difficult to find when you need to make changes. This also leads to scatterbrained navigation and URL structures.

It’s important to make mention of the concepts behind keeping content organized. This is especially useful within a CMS, where different post types may have a specific purpose. There’s no guarantee that they’ll listen, but any effort toward a well-organized website is worth doing.

Accessibility and SEO Best PracticesWhile these two subjects may seem to be separate entities, they do have one very important thing in common: Both require a focus on the end user.

Here, it’s about doing things that not only please the boss but are also in the best interests of the people visiting their website. Accessibility and SEO are prime examples.

This includes ensuring that everyone can effectively access the content. Of course, it’s our job to build sites with accessibility in mind. Still, clients can help the cause by using descriptive ALT text on images and, when applicable, choosing colors that provide an acceptable level of contrast.

When it comes to SEO, this is an area where clients can become confused about who they’re writing for. Sometimes they tend to worry about pleasing an algorithm or automated content analysis tool, rather than real people.

In both cases, it’s important to know the best practices and how they can be integrated into a client’s workflow.

Simple Security MeasuresWe can’t expect our clients to become full-on security experts (web designers aren’t usually in that group, either). Still, some basic skills in this area can go a long way.

Concepts such as using strong passwords and only providing colleagues the amount of access they need help to make for a safer website. Beyond that, acknowledging the risks associated with installing plugins or granting access to third-party services help to develop a healthy sense of cynicism – which can be a boon for security.

Again, the heavy lifting should fall upon us. But things tend to work best when everyone is on the same page.

Understanding LimitationsPerhaps one of the more overlooked skills a client needs to manage their website is understanding their limits. This is vital, as an adventurous (not to mention careless) soul can do a world of damage to a website.

Now, this doesn’t give us a license to lecture them on good behavior (good luck getting paid afterward). It must be approached delicately.

For example, you might mention that some functionality is very sensitive and can be broken. And let them know that they are welcome to contact you if they are unsure of how to do something.

Just knowing that they have you as a resource to lean on can help avoid a lot of problems. Also, it’s best to avoid giving them access to anything remotely breakable, where possible. That said, instilling a cautious approach is always a good idea.

Helping Clients Help ThemselvesIt’s a safe bet that most of us don’t have the time to impart all of our wisdom to clients. Still, we can at least make them aware of the skills they’ll need to better manage their website.

If you conduct training sessions, this would be an ideal time to bring up some of the principles mentioned above. In addition, you can share resources that they can use to learn on their own.

The goal is to help clients better understand this incredible new website you’ve built for them. In turn, they can use what they’ve learned to reach their goals more effectively.

The post The Website-Related Skills Your Clients Really Need to Know appeared first on Speckyboy Design Magazine.

View Details

The websites we build don’t always keep pace with technology. Best practices, frameworks, and other tools seem to change in the blink of an eye. And whether you manage a single site or a hundred, there always seem to be things that slip through the cracks.

Thankfully, websites don’t have to stay frozen in time, either. We can use our knowledge to help them evolve.

But too often, we only learn about any shortcomings after something has gone wrong. It could be a major falloff in performance, an incompatibility with the latest software update, or a broken feature. That makes bringing the site up to snuff a stressful experience.

One way to avoid this scenario is to conduct an annual website audit. This can help you identify any potentially problematic areas and address them before it’s too late.

Today, we’ll provide some tips for auditing the websites you manage and what you can learn along the way. Let’s get started!

Create a Website Maintenance ChecklistWhile each website is unique, there are likely similarities as well. For example, the sites you manage might have been built using the same content management system (CMS) – like WordPress. Some may rely on a framework such as Bootstrap. Then there are underlying languages like PHP, JavaScript, and CSS.

Each of these factors plays a role in a website audit. As such, it’s worth taking some time to think about those similarities and differences. From there, you can create a website maintenance checklist that you can use to keep things in tip-top shape.

Broadly speaking, let’s take a look at some items that will likely be on your list:

AccessibilitySure, you may have built and tested your website for accessibility. But it’s easy for gaps to appear as a site ages.

New content and features might not be up to standard. This is especially relevant when clients are involved in management. How can you be sure that they’ve kept up with best practices?

Any audit should include some basic accessibility tests. A combination of automated tools and manual inspection can help you detect and fix any shortcomings.

Basic Security MeasuresEvery website is a target for malicious actors. And those using a CMS are particularly at risk. Therefore, a basic review of security measures is in order.

Check the low-hanging fruit, such as the use of secure passwords and server file permissions. Shoring up these areas can help prevent some of the more unsophisticated attacks going around.

Also, look for any signs of a malware infection. They aren’t always easily detectable and can lie dormant for long periods before becoming active. Keeping track of file changes on your server and running security scans can help nip these maladies in the bud.

Outdated and Abandoned SoftwareUsing third-party themes and plugins makes our job easier. But they also require vigilance. These products are only as good as their last update.

Software that hasn’t been updated in a while can be problematic. For one, it could contain unpatched security vulnerabilities. And there’s also a chance that it won’t be compatible with new versions of PHP or other items you have installed.

Conducting a bit of research can save you headaches down the road. Identify whether the software in use is still being actively supported and developed. You can then determine whether to stick with what you have or find a suitable alternative.

Content and StructureAudits are about more than functionality. This is also a great time to dive into your website’s content.

There are a few items of interest here. Making sure content is still accurate and relevant is of utmost importance. Pricing, contact information, and service listings are prime examples. Make any necessary changes to ensure that visitors are getting the best possible experience.

How that content is structured also makes a difference. The goal is to help users (and search engines) find what they need in short order.

An Untapped Opportunity for RevenueNot only is an annual website audit a great preventative measure – but it’s also a potential source of revenue. Thus, offering this service to clients can be mutually beneficial.

If you offer yearly maintenance packages, audits can be sold as an add-on or simply included. There is plenty of opportunity for experimentation with pricing and implementation. However, much can depend on the client’s budget and attention span.

Clients that tend to lose interest may be more likely to react to the results of an audit, rather than request that you perform one. This can still be a profitable venture, as you can charge for any fixes you make.

Audits can also get clients thinking about other changes they’d like to make. It can serve as a catalyst for completing those tasks they’ve been putting off. In some cases, they may even prefer to spend money on a redesign rather than patching holes in their existing website.

For those looking to tap into the value of existing clients, this could be a viable option.

An All-Around Good Practice for Your Web Design BusinessThe benefits of conducting yearly website audits are plentiful. And while they require some manual labor on your part, they may well be worth every second spent.

First and foremost, they’ll help you spot any potential problems before they become nightmares. This alone will provide you and your clients with peace of mind.

Plus, they provide a path for increasing your revenue. And you can do so in a way that doesn’t require sales pitches or searching out new clients. Everything can be done in partnership with your existing client roster.

And, once you’ve established a checklist, the process is easy to repeat year after year. In all, it helps establish good practices in your business and can strengthen client relationships. It’s something for every freelancer and small agency to consider.

The post Why You Should Conduct Annual Website Audits appeared first on Speckyboy Design Magazine.

View Details

8 Virtual Winter Wonderlands Created with CSS & JavaScript – See snow, ice, and cozy scenes created with code.

Enhance Voice Recordings for Free – Upload an audio file and this Adobe tool will enhance its quality.

WordPress Playground: Running WordPress in the Browser – You can now test select WordPress themes and plugins without having to install a thing.

The Many Ways Web Designers Give Away Their Time – You could be leaving quite a bit of money on the table.

Setting Up a Screen Reader Testing Environment on Your Computer – This guide will show you how to test website accessibility via a screen reader.

The Best UX Design Books 2023 – An updated collection of top UX, UI, and product design books to check out.

The Grumpy Designer’s 2023 Preview – A tongue-in-cheek look at what the future holds for Twitter, WordPress, AI, and more.

2023 Visual Design Trends Guide – A look at motion design, parallax, immersion, contrasting UI styles, imitations, and more.

How to Code an On-Scroll Folding 3D Cardboard Box Animation with Three.js & GSAP – Learn how to build a unique interactive animation.

50 Tiny Little Web-Based Tools for Web Designers from 2022 – Save precious time with these incredible tools that you can run in a browser.

Design Takes Time – Take a behind-the-scenes look at an app’s identity design process.

CodeImage – Use this tool to create custom images for your code snippets.

Predicting the Next Opportunities for WordPress Innovation – Areas of the CMS that could benefit from new ideas.

New Viewport Units – Explore units to help you manage space within the large, small, and dynamic viewport spaces.

State of the Word 2022 – Watch Matt Mullenweg’s annual address and find out what’s happening in WordPress.

What Will Impact WordPress Freelancers in 2023? – PHP 8 and an unpredictable economy are among the issues facing freelancers.

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

View Details

Working on your own can be a rewarding experience. The freedom of setting up shop wherever you like is a big reason why many web designers choose a freelance life. You just don’t get the same experience while working for someone else.

But this lifestyle can also result in some negatives. It’s nice to not have a boss looking over your shoulder all day long. Yet this freedom can be problematic. If you’re not careful, you may form some bad habits that can hurt you both personally and professionally.

Like most bad habits, they seem to start slowly. Left unchecked, they have the potential to wreak havoc. Let’s have a look at what can go wrong and how to fix it.

Being Unresponsive to ClientsA lack of communication is one of the most self-destructive things a freelance designer can do. I’ve seen it time and again. Clients get tired of trying to get a response from their designer and move on to someone else.

I admit that I have occasionally let an email slip by me. There have been busy days where I meant to get back to someone and… forgot. It happens to everyone at some point.

However, it becomes a problem when you’re consistently making clients wait. This behavior gets in the way of their ability to do business.

The Fix: Set aside some time each day and reply to messages from clients. It may require a little bit of discipline at first. But eventually, you’ll have formed a good habit.

Cutting Corners to Save TimeThere are times when you may find yourself incredibly busy. Days when you sit at your desk for hours without so much as stretching your legs. And, if you’re the type that gets highly stressed in these situations (like me), you may start to forget the little details in your work. You know, the stuff that ensures quality and functionality.

The frustrating part of this is that you end up making more work for yourself when any mistakes are uncovered. Even more unnerving is that sometimes those errors may not turn up for months (yes, it has happened to me).

The Fix: As difficult as it can be, find the strength to give each task its proper allotment of time. It is so tempting to rush, but give your best effort towards doing the job right.

Failure to Keep Up with FinancesDesigners aren’t accountants. But if you have a business, you need to keep track of every penny that comes in and goes out. Otherwise, you can find yourself in a heap of trouble when tax time rolls around.

But finances include more than keeping track of income and expenses. It’s also important to keep an accurate record of who owes you money. After all, you can’t get paid if you don’t send out invoices.

This takes a lot of discipline and a bit of time to get used to. For instance, I developed the bad habit of not marking paid invoices promptly. I figured that I would simply remember what I did and when I did it. Long story short: that didn’t work out so well.

The Fix: Develop a process for recording all your financial records. You have the freedom to do so in a way that makes you comfortable. But don’t put things off until later. Later may never come.

Surrounding Yourself with DistractionsAnother perk of freelancing is the ability to set up a personalized work environment. While it’s nice to have things just the way you want them, be careful.

It’s so easy to fall into the trap of having the TV blaring next to you or listening to a sporting event while at work. While that may be fine for some, it can serve as a huge distraction for others.

Our line of work requires a good bit of focus. Anything that takes away from that can be detrimental to getting things done.

The Fix: Configure your workspace so that you can concentrate. Have plenty of entertainment options. Just be sure they aren’t a distraction.

Believing You Aren’t Good EnoughOK, this is a bit more existential than the other bad habits on the list. But it’s perhaps just as important.

We know that there is no shortage of talented designers out there. Some of them do brilliant work. Seeing this can make you feel like you don’t have what it takes to achieve great things.

It leads to not bothering to strive for something better. For instance, you may see a project out there that interests you. But don’t bid on it because you think it’s beyond your skill level. But as your mother would probably tell you: that attitude will get you nowhere.

The Fix: I think that every designer goes through a bit of imposter syndrome. To break out of your funk, do something that makes you feel good. Learn a new skill or start a fun side project. A little boost in confidence can do wonders.

Perfection Not RequiredDuring your freelance journey, any one of the bad habits above can strike. But that’s no reason to panic. We all go through periods where we don’t handle things ideally. The key is in using those times as a learning experience.

There will always be ups and downs. But the best designers keep working to get a little better each day. After all, nobody said the road to success is linear.

The post The Bad Freelance Habits You Should Avoid appeared first on Speckyboy Design Magazine.

View Details

Writing and web design go together quite well. Both require creativity and attention to detail. Importantly, they also serve as a gateway to connecting with others.

It’s a combination that has helped me through my journey. With 20+ years in design and another 10+ writing, I feel that each has provided me with a foundation for growth. As one discipline informs the other, there is so much I might have missed had I not participated in both.

Over the long term, the act of writing about web design can make you a better designer. But for many web professionals, there are roadblocks to getting started. Imposter syndrome and self-doubt are prime examples. A seemingly saturated community of bloggers may also play a role.

If you’re on the fence about publishing, you might wonder if there’s anything original left to say. On the other hand, you might not feel that writing would benefit your career.

Today, I’ll fill you in on what writing has meant to me as a web designer. Along the way, I’ll share some tips for making the most out of the experience.

Writing Opens Your Mind and Changes PerspectiveOne of the common misconceptions about writing is that you have to be an expert in a particular area to do it. For instance, you must know JavaScript like the back of your hand to write about the language.

On the contrary, writing offers a great opportunity to learn about a subject. It prompts you to conduct research and focus on the fundamentals. Thus, even a skill that seems insurmountable can start to make sense over time.

This opens up a whole world of possibilities. You may even begin picking topics precisely because you don’t know much about them yet. Writing can give you the motivation to dive in and start learning.

It’s also a catalyst for changing your approach to problem-solving. Writing a tutorial, for example, forces you to utilize a step-by-step strategy. You won’t want to skip ahead, because readers may miss out on some important information.

This is a great way to get past the more scattered methodology the web often throws at us. Instead of furiously copying and pasting code snippets in hopes that one will work, you can create a plan and see it through.

More Confidence with ClientsAs writing expands your knowledge, it also helps to create confidence. This can be a huge help when it comes to working with clients.

Because you’ve done your homework when crafting articles, you’ll be able to explain concepts to clients more easily. And the experience also means you’re an authority on the subjects you’ve written about.

It leads to speaking with the reassurance that you know what you’re talking about. So often, we don’t speak up because we’re afraid of not being taken seriously. The more you write, the better you can become at communicating opinions and ideas.

Clients will think of you as an indispensable resource. They’ll be more likely to ask your advice before making decisions. In addition, your confidence can help to build a trusting relationship.

That not only benefits your clients but you as well. The more knowledgeable you become, the more you can charge for your services.

How to Get Past Your FearsTaking the first steps toward writing about your web design journey can be awkward. There are a lot of “what ifs” that can enter your mind. You may be worried that you won’t find an audience or that your writing skills aren’t up to par.

Both of these fears are common and understandable. But they also don’t matter much in the grand scheme of things. That is, so long as you have realistic expectations.

In itself, writing is a positive for your web design career. Regardless of who sees it or how sharp your grammar is, there is a benefit to simply participating.

You don’t have to cultivate millions of readers or fill your office with trophies to be a success. Starting with the idea of exploring a particular topic is all you need to get moving in the right direction.

And you can improve with time. I’m not the world’s greatest writer. But I do know that I’ve leveled up my game over the years. Improvement comes from refining your craft and becoming more confident in what you have to say.

Where to StartEven if this sounds interesting, where do you start? My advice is to start small and find something you’re passionate about.

The subject matter can vary greatly. It could be a look at what modern CSS is capable of or a rundown of your favorite WordPress plugins. Writing about a project that made an impact on you is also a great choice.

There are no hard-and-fast rules here. It’s all about what’s important to you. Odds are, there is someone else out there who can benefit from what you have to say.

As for the medium, you have plenty of options. If you prefer a personal blog – go for it. Other writing-oriented services exist and make it easy to get up and running. As long as you have the tools you need to write the way you want, it’s all good.

Finally, don’t hesitate to write in your own voice. There’s no need to try and dress up your words – just be you! Again, you’ll be able to discover and refine your style as you move along.

Writing as a Means of Self-ImprovementTraditionally, improving your web design skills has meant signing up for a course or following a tutorial. But if you’re looking for a different way to grow, writing is also a viable path.

Depending on the type of content you produce, there’s an opportunity to gain hands-on experience. Test driving a new tool, for instance, lets you learn as you research. And by writing down your thoughts, you’re helping others at the same time.

It also connects you to the web design community. You might receive some valuable feedback or even some words of thanks along the way. If you’re lucky, you could get a paid gig or two out of the bargain.

While writing may not be the right option for everybody, I’d highly recommend considering it. It could lead you to become an even better web designer while helping you grow personally as well.

The post How Writing Can Help Your Web Design Career appeared first on Speckyboy Design Magazine.

View Details

There’s something about a winter scene that awakens the senses. Lots of people look forward to taking in freshly fallen snow. And even those in warm climates enjoy winter imagery during the holiday season. It’s enough to have anyone reaching for a cup of hot cocoa.

Thus, the idea of a virtual winter wonderland seems like a natural fit. There are so many touches – large and small – that can dress your website up for the cold. It could be as simple as a few dancing snowflakes or as grand as a scene from the North Pole.

We plowed our way through CodePen in search of outstanding winter-themed CSS and JavaScript snippets. Bundle up and check out these creative and fun examples!

Falling Snowflakes with CSS & JavaScript by Greg VissingWe have to start with snow, right? And these highly-detailed flakes offer a prime example of a virtual blizzard. This would make a terrific page background or serve as part of a seasonal hero banner.

See the Pen CodePen Challenge – Snow by Greg Vissing

360° Realistic Ice Cube by Matthias HurrleThis incredibly-realistic 3D ice block uses noise effects to perfection. Notice the distorted transparency as you look through to the other side. Grab the block with your mouse to get a full 360° view.

See the Pen Just Ice by Matthias Hurrle

Winter Papercut Scene with CSS & JS by Lia TsernantFeaturing cool colors and papercut artwork, this winter night scene is as calming as it is beautiful. The gentle snowfall is generated via particles.js, while SVG powers the razor-sharp illustrations. It all makes for a stunning presentation that puts a new spin on traditional handcraft.

See the Pen Winter papercut by Lia Tsernant

Crystallized Ice Star by Liam EganWatch as this icy artwork slowly takes shape. It’s reminiscent of the unique crystal formations you might see after a winter storm. Oh, and feel free to poke holes in it with your touch device!

See the Pen Ice Star by Liam Egan

CSS Animated Snow Fox by David KhourshidThis cuddly creature is made entirely out of HTML and CSS. There are lots of fun details here, like the fluffy tail and slightly bobbing head. Hovering on the presentation will make it snow.

See the Pen CSS Snow Fox by David Khourshid

Light & Dark Mode Snowglobe by Vangel TzoThe beauty of a snow globe is that it provides you with a winter scene on demand. But what if it could also give you day and night? That’s the premise of this snippet, which offers a switch for light and dark modes. A tiny bit of jQuery makes it possible.

See the Pen Snowglobe 🔮 by Vangel Tzo

Snow-Clearing Squirrel Loader by Chris GannonClearing out piles of snow is generally not considered a perk of winter. But that doesn’t mean we can’t have fun with the concept. Enjoy watching this feisty squirrel push snow across the screen in this cheeky loading graphic.

See the Pen Snow-clearing Squirrel Loader by Chris Gannon

8bit Pixelated Snow by eightarmshqIf you’re looking for something a bit quainter, this 8-bit snow may be just the thing. Watch with delight as little squares fill the air with winter spirit. Pixel snow for everyone!

See the Pen 8bit Snow by eightarmshq

Winterize Your Website with Cool ElementsAdding seasonal elements to your website offers a fun way to connect with users. And the snippets above demonstrate that there are several degrees of engagement. Breathtaking animations, icons, or even wintry color schemes are possible. But they’re just the tip of the iceberg.

Looking for more winter-themed snippets? Hop into your sleigh and visit our CodePen collection!

The post 8 Virtual Winter Wonderlands Created with CSS & JavaScript appeared first on Speckyboy Design Magazine.

View Details

Easy Mockup Plugin – This Figma plugin helps you quickly create device mockups.

Foney Fonts Logo Quiz – Test your typographic knowledge with this holiday-themed challenge.

40 Fantastic Special Effects Tutorials for After Effects – Learn how to make your videos come to life with this handy resource.

Tooltip to Gallery Transition – Learn how to build an animated and interactive gallery feature.

CSS For URLs & HTTP Headers – What if you could write selectors based on any piece of information in the HTTP response?

Photoshot – Upload a few selfies and create an AI-enhanced avatar with this tool.

How to Effectively Organize Content within WordPress – These built-in tools can help make content structure more logical and easier to maintain.

The Final Google Fonts Knowledge Drop of 2022 – A look at was added to the repository in the year’s fourth quarter.

How to Transfigure Wireframes into HTML – A detailed look at turning a designer’s mockup into a working prototype.

Design Tools Survey – Check out the results from the 2022 edition of the survey.

How to Navigate Design Politics – Tips for getting project stakeholders on the same page.

The State of UX in 2023 – Thoughts on where the industry is headed in the new year.

Accessible Front-End Patterns For Responsive Tables – Tips for determining the right approach to responsiveness.

A Practical Guide to CSS Media Queries – Use this helpful reference to gain a deeper understanding of what media queries are and how to use them effectively.

Why it Takes Commitment to Work with Clients – The kinds of commitments web designers need to make, along with tips for managing them.

From Type to Logotype – One designer’s process for creating a successful logo.

New WordPress Sandbox Project Demos – A browser-based tool that lets you test themes and plugins without installing WordPress.

The WP Awards 2022 – Review the winners and top vote-getters in a variety of WordPress-related categories.

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

View Details

Many industry outsiders are surprised to find out that web designers are just like them. We need to eat, have a roof over our heads, and have a shiny new phone in our pocket every six months or so. All kidding aside, we are indeed running a business and need to make a living.

Only sometimes it doesn’t feel that way. For those of us who don’t come from a business background, there is a tendency to become a bit too casual. And working from home only encourages this behavior.

This can be beneficial in that it allows us to build the type of atmosphere where creativity can blossom. But on the downside, a casual approach could mean that we’re leaving a significant amount of money on the table. Even worse is that it may not even occur to us that we’re doing so.

In that spirit, let’s look at some common situations where we are essentially giving our time away. To be clear, this is not to advocate for charging good clients for every little thing. Rather, it’s more about raising awareness and ensuring that we’re not being taken advantage of. Now, let’s get to it!

Technical SupportOnce you hand off a website to your client, it’s only a matter of time before they run into an issue or have a question. That’s to be expected. And, if you haven’t already sold them on a support package, it can also turn into a revenue-draining black hole.

While it hardly seems fair to charge for something as simple as a five- or ten-minute email exchange, these incidents do start to add up. What’s worse is that it only takes one technically-challenged or scope-expanding client to unintentionally eat up your time. This is time that you could otherwise use to, you know, make money.

There’s nothing wrong with giving away the occasional freebie. It’s a small gesture that can keep your client relationships strong. But it’s still important to set limits.

Make clients aware of your policies from the very beginning. Let them know any thresholds you’ve put into place. This will allow you to both be a web superhero and avoid taking a loss on support.

Acting as a Researcher/LiaisonSo much of our job these days involves working with third-party software and service providers. Plugin developers, web hosts, APIs, and code libraries make up significant portions of a project.

But we don’t often think about the amount of time spent researching these various items. That can include anything from searching the web, and comparing options to chatting with sales or support representatives. And when something goes wrong, we are often the ones who deal with it on behalf of our clients.

While a project is in the development phase, you might consider this as just a part of your standard fees – fair enough. But the role of liaison doesn’t end once the site launches.

Indeed, there can be a great deal of time (and stress) associated with relaying communications between an outside service and your client. The ensuing back-and-forth shouldn’t be forgotten when it comes to billing.

Giving AdviceBecause web designers are technically-skilled, we often get asked for help and advice regarding all sorts of subjects. And they’re not always related to web design.

People get in touch to ask (in no particular order): How to use their iPhone, what their email password is, how to get their email on their iPhone, how to open a specific type of file, will the new iPhone be worth it and… you get the idea.

Again, there is a fine line. You don’t want to be rude. But you also don’t want to go on endlessly answering questions unrelated to your job. It may be the last thing you want to do, especially when you’re busy with more pressing matters.

On the other hand, it might not be wise to charge for these types of questions. The idea could backfire and result in more questions from a particular client.

Perhaps the best solution is to simply leave these questions hanging until you have some extra time to deal with them.

Writing ProposalsSome web professionals charge for writing proposals. This can be a smart way to attract potential clients who are both serious and willing to pay for quality. Still, the practice seems to be the exception more than the rule.

Proposals can be significant work and do take up precious time, no doubt. But the hope is that it pays off in the form of a shiny new project to work on.

But then there are prospective or existing clients who ask for multiple quotes. They are often “serial” entrepreneurs with lots of big ideas or fanciful dreams. In either case, there is a large time investment on your part that could all be for nothing.

This leads to a serious business decision. If you find that you’re losing lots of time due to writing proposals, maybe a new strategy needs to be put in place. Or, it might be that a couple of the worst offenders need to be put in their place.

Keep Track of Your Time and Charge as NeededAs the old saying goes, time is money. And while money certainly isn’t the only thing that matters, the situations above could be getting in your way.

That’s why it’s important to track how much time you spend performing these tasks for free. Keep a tally of what you do, who you’re doing it for and the amount of time spent. You might be surprised at how much you’re giving away.

In response, it might be worth considering putting policies in place that protect you from overreaching clients – not to mention your own goodwill. Doing so can help to ensure that you’re being fairly compensated for your efforts.

The post The Many Ways Web Designers Give Away Their Time (Without Realizing It) appeared first on Speckyboy Design Magazine.

View Details

2022 turned out to be a tumultuous year for the tech industry. Crypto crashed, a certain social media network was taken over by a certain loquacious billionaire, and a lot of jobs were lost. Perhaps a few books will be written about this chaotic trip around the sun.

But rather than wallow in what was, this grumpy designer prefers to look forward. Taking the time to think about what will happen in the next year is a great opportunity – for some lighthearted satire, that is. Making outrageous predictions is both fun and an escape from everyday life. That’s something we can all use.

As with years past, my focus will be on things that matter to web designers. It’s all about the notable tools, people, and technology that keep our industry interesting.

If you’re a newcomer, I should also mention that there will be quite a bit of snark as well. Laughs are the primary goal, after all.

Without further ado, let’s take a peek at what will ~~definitely~~ happen in 2023!

Twitter Introduces Features to Please New OwnershipTwitter has been a great resource for the web design community. It’s been a vehicle for sharing information and connecting with others. Thus, it was no surprise that some members were concerned by Elon Musk’s acquisition of the platform. Would the famously impulsive billionaire be too disruptive?

In a word: Yes. Musk has been the proverbial bull in a crystal shop, laying off employees (only to rehire some shortly thereafter), conducting “code reviews,” and making all manner of odd proclamations.

The bottom line is that Twitter now exists to excite and entertain its new owner. As such, new features will be implemented exclusively for this purpose. 2023 will see a few major releases, including:

Randomly Edited Tweets
While the ability to edit tweets requires a paid Twitter Blue account, free users are in luck. A new algorithm will randomly change “unsatisfactory” tweets to better align with Musk’s worldview.

I know what you’re thinking – it’s a ploy to enforce the new guy’s take on free speech. But this feature goes well beyond mere lobbying efforts. Things can get a bit personal.

For instance, a tweet declaring that sloths are your favorite animal could be edited to match Musk’s fictional preference. Or a photo of you drinking a cup of coffee might be swapped out with a can of Diet Coke.

While it may be a minor inconvenience for users, it does mean that the boss won’t have to read anything the least bit unpleasant. That’s better for everyone.

“Troll Me” Button
The new sheriff in town has decided to cut back on content moderation. Some may see this as a bad thing, but the idea behind this decision is rather altruistic. The goal is to make it even easier to connect with others.

That’s why a new “Troll Me” button will appear on every user’s profile. Click it, and you’ll be presented with a list of pre-approved insults and condemnations. Simply choose the message that suits your needs and be on your merry way!

If beta testing proves successful, watch for the feature to also be added to the Reply options.

Per Twitter’s new verification system, I’d like to specify that everything above is a parody. No Tesla vehicles were harmed.*

New WordPress Plugins Will Adopt the TrendsWordPress has been around long enough that we’ve seen several trends come and go. From the way plugins approach specific functionality to a total rewrite of how themes are built, change is always on the menu.

2023 will be no exception. In fact, plugin developers are going to take things to an entirely new level. Look for the following WordPress plugins to find their way onto the market:

Admin Notifications Pro Extended
It seems like plugins litter the dashboard with notifications a little more each year. Not only are they greater in numbers, but they’re also harder to dismiss. That is if you can dismiss them at all.

Admin Notifications Pro Extended doesn’t want this trend to end. In contrast, it seeks to join in the fun!

The plugin ($29.99 per month for a single-site license) will display random, nonsensical notifications throughout the dashboard. To maintain the element of surprise, some will intentionally break the WordPress block editor – meaning you won’t be able to save that 1,000-word blog post. Such is life.

Level up with the User Experience Add-on ($100 per 500 page views) to make notices appear on the front end as well.

#WPDrama Generator
There’s nothing like a controversial discussion to stir up a little #WPDrama. But what happens during those quiet moments when no one is arguing?

That’s where the new #WPDrama Generator plugin comes in. It features a choose-your-own-adventure interface for creating hot takes, takedowns, and other hijinks. Publish your creation and use the built-in social sharing tool to stir the virtual pot.

If you’ve taken things too far, use the available WP Apology Generator add-on ($50 per use) to craft a mea culpa that’s reviewed by a professional crisis management bot.

Artificial Intelligence Will Be a Web Designer’s Best FriendWorried that artificial intelligence (AI) will take your job? I very much doubt it, as algorithms can’t fully replace human creativity and sensibility (yet).

If anything, AI will be there to guide web designers where we need it most. It will turn our weaknesses into strengths. But that’s not all.

I predict that sometime in 2023, we’ll see an app that leverages AI to tackle our biggest struggle: dealing with clients.

Among its core features:

Automatically connects to the client’s website to make the logo bigger;
Adjusts color contrast ratios to add some “pop” to the look;
Responds to vague emails by asking for clarification;
Detects scope creep and lets clients know when a request will cost more money;
Infiltrates your client’s devices and clears their cache;
Blocks client access to defunct web browsers;

Now that’s what I call useful technology. If only it could do something about those clients who don’t pay their bills…

Start the New Year with a LaughAs we prepare for another year, I think it’s important to do so with a sense of humor. Laughter is critical for surviving in chaotic times. That’s as relevant in web design as it is in life.

Hopefully, these predictions help in that quest. By roasting what’s to come, perhaps we can handle the inevitable bumps in the road more easily. If not, at least we can say that we had a few chuckles first.

Here’s to 2023. May you find happiness, success, and something to laugh about!

The post The Grumpy Designer’s 2023 Preview appeared first on Speckyboy Design Magazine.

View Details

All built and released this year, each of these free web-based apps offers a time-saving solution to many of the web design tasks you will need to perform from time to time. Without ever having to install anything, all you have to do is bookmark and save them for that day when they will be called upon.

Some of these tiny time-savers will help you to better assess your site’s accessibility, check your CSS for redundant classes, copy & paste CSS animations, beautify screenshots of your code, and so much more.

Whatever the web design time-saver you’re looking for, then the chances are you will find it here.

If you’re looking for last year’s collection of tiny little tools for web designers, here they all are.

Table of Contents* Color Tools & Generators * Pattern & Gradient Generators * Code Screenshot Generators * Image Effect Tools & Editors * CSS Tools & Generators * CSS Button Generators * CSS Code Quality Analyzers * Fonts & Typography Tools * Web Accessibility Tools * Icon Sets & Tools * Markdown Tools & Online Editors * Miscellaneous Tools & Generators Color Tools & GeneratorsHue Tools
A simple open-source toolbox for working with colors. It includes, color mixing, blending, conversion, modification, detailed information, and more.

Huemint
This tool uses machine learning to create unique color schemes.

Color Name Generator
Enter a hex code and this app will give it a name, and generate CSS variables.

Alphredo
Create the perfect color scale with this online alpha generator.

Pattern & Gradient GeneratorsMesh·y
This browser-based tool will help you create mesh gradients that can be exported as PNG images.

Gradients
Use this online tool to create complex gradients that can be exported in multiple formats.

CSS Shadow Gradients
Copy & paste a colorful shadow gradient or design your own with this web-based tool.

Code Screenshot GeneratorsPika
This web-based tool will help you build beautiful screenshots that you can share on social media or blog posts.

Tweetlet
A free tool for generating shareable images of your tweets.

kod.so
This browser app will help you create beautiful screenshots of your code snippets.

FabPic
Another free browser app for creating custom screenshots.

Image Effect Tools & EditorsGlitch Image Generator
A useful tool that allows you to create and save unique glitchy images.

Palette
Colorize your vintage photos with this AI-powered app.

Magic Eraser
Remove unwanted items from your images with this free tool.

CSS Tools & GeneratorsLoaders
Grab an assortment of loaders and spinners for your next project.

AnimatiSS
Use this collection of readymade CSS animations in your projects.

Box Shadows
A curated collection of beautiful copy & paste box shadows for Tailwind CSS.

Vanilla Breeze
An online tool for converting Tailwind CSS elements to semantic CSS.

CSS Clothoid Corners
This online tool will generate rounded corners using CSS clip-path.

Design Tokens Generator
Use this tool to get your CSS projects off to a fast start.

MetalliCSS
This open-source JavaScript library adds a metallic touch to any design element.

UI Filler
A small library of copy-and-paste placeholders for your design projects.

CSS Button GeneratorsButtons Generator
Choose from a selection of attractive click-to-copy buttons for your projects.

UI Buttons
A collection of copy-and-paste CSS button styles to use in your projects.

100 Buttons
A free collection of 100 modern CSS button designs for use in your projects.

CSS Code Quality AnalyzersCss Checker
Use this tool to identify redundant CSS classes.

Online CSS Code Quality Analyzer
This tool scores your CSS based on a range of quality guards.

CSS Minifier
Paste your CSS into this app and it will minify your code.

Fonts & Typography ToolsFallback Font Generator
This tool will help you avoid that pesky Cumulative Layout Shift (CLS) in your layouts.

A Typographic Scale Calculator
Use this tool to create a harmonious type scale.

Bunny Fonts
Check out this open-source, privacy-first web font platform.

Web Accessibility ToolsWeb Accessibility Checklist
Use this checklist for creating accessible websites and web applications.

The A11Y Project Checklist
The issues this checklist prompts you to check for covers a wide range of disability conditions.

Contrast Grid
This tool will help you test various color combinations for WCAG 2.0 compliance.

Accessibility Not-Checklist
Use this list as a reference when assessing your site’s accessibility.

Learn Accessibility
An evergreen accessibility course and reference to level up your web development.

Randoma11y
Use this tool to generate random accessible color palettes.

Icon Sets & ToolsIconer
Search through 36 libraries of free icons to find the perfect fit for your project.

Basicons
Download this collection of basic icons for product design and development.

CopySymbol
Looking for a symbol? This search engine will serve up an icon, keyboard shortcut, and CSS content code for copying and pasting.

Glyphs App
A handy library of copy & paste symbols for use in your projects.

Icônes
Find the perfect icon collection for your project via this search tool.

Markdown Tools & Online EditorsMarkdoc
A markdown-based editor for creating custom documentation websites.

LetsMarkdown.com
Check out this open-source, collaborative markdown editor that works right from your browser.

wrighter
Fans of markdown will want to give this minimal editor a try.

Miscellaneous Tools & GeneratorsCode Snippet Search
This search engine will return relevant code snippets for your queries.

Copy Book
This handy resource contains commonly used text found in web applications.

Ethical Design Resources
A collection of articles, organizations, tools, and more that promote ethics in design.

Heazy SVG Creator
Craft custom SVGs with the help of this browser-based tool.

Proge
Test your programming knowledge with this guess-the-language game.

The Typing of the RegEx
Test your RegEx skills with this puzzle game.

Motionity
A browser-based free motion graphics editor.

metaSEO
A free web-based tool for quickly generating meta tags for your website or content.

Javascript Playground
Learn and improve your skills with this online tool.

The post 50 Tiny Little Web-Based Tools for Web Designers from 2022 appeared first on Speckyboy Design Magazine.

View Details

WordPress has been around since 2003. And the content management system (CMS) has undergone massive changes throughout its life. Today, it might well be unrecognizable when compared to its earliest versions.

Signs of that evolution are everywhere. The block editor means we no longer need a page builder plugin to craft custom layouts. And thanks to the site editor and block themes, an entire website can be built without writing a line of code.

Virtually every major component of building and maintaining a website has changed. And there’s every reason to believe that the innovation process will continue. What WordPress is today is only laying the foundation for tomorrow.

But how will WordPress change? While we don’t have a crystal ball, we can see plenty of areas that are ripe for improvement. Some may be solved by updates to WordPress core, while the plugin and theme ecosystem could tackle others.

With that, let’s try and predict the next opportunities for innovation in WordPress. They may not qualify as sexy, but they’re important nonetheless.

Making Website Data Easier to AccessData storage and retrieval have long been a challenge for WordPress developers. Sure, everything is stored in a singular database. But things can get exceedingly complicated in a hurry.

Standard posts and pages are easy enough to import or export. But when you move into the realm of data generated by plugins, it’s a different story.

That’s because plugin authors have numerous options for writing to the database. On the surface, this freedom seems like a positive. It allows developers to store and retrieve data in a way that makes the most sense for their needs.

But for the rest of us, it can be a nightmare. Each plugin we install manages data in its own way. Thus, piecing together a coherent report is nearly impossible – unless you’re proficient with PHP.

For example, let’s imagine an eCommerce website that also has members-only content. We might install WooCommerce to power the online store, while a separate membership plugin restricts access to content.

If we just want to export data related to one of these site functions, it’s easy enough. But what if we combine each aspect into a single report? Not so easy. Data can be stored in different database tables and different formats. Even with the help of plugins designed to export data, it often takes custom code to make this work.

The obstacles to accessing data are large and complex. But there’s an opportunity for either WordPress core or a brilliant plugin developer to put it within reach of site owners.

Creating a Must-Have Block ThemeThe idea behind the WordPress Site Editor (aka Full Site Editing) is simple: to empower anyone to build a custom website within a code-free environment.

The feature officially became a part of WordPress core in version 5.9. Since then, a steady stream of newfangled block themes has been released. Meanwhile, the feature’s functionality and user experience continue to be refined.

Progress aside, we’ve yet to see a rush of users migrate to this new way of building websites. The theme market continues to be saturated with Classic Themes. Plus, developers may still be wary of allowing key layout elements open to editing.

What’s missing is a compelling reason to switch. Part of that may be a matter of increasing what the Site Editor is capable of. But perhaps a transformative product (or 100) is also needed to attract user interest.

Imagine a block theme that is both powerful and versatile. One that offers a wide range of style variations to fit a multitude of use cases. And its author will hopefully have learned from the past mistakes of the third-party theme market.

A theme that is lean, performant, and easy to customize could be just the thing to entice users. Luckily, the market is wide open. That means there is plenty of room for competition in this space.

Bringing Top-Notch Performance to WordPressWebsite performance is complicated. It starts with a high-powered server that is optimized for speed. Then there’s the website, where code and assets must be used efficiently. Add databases and calls to third-party APIs into the mix, and there are plenty of potential bottlenecks.

The WordPress Core Performance team has been established to help bring the CMS up to speed. And they’ve already made significant progress in the area of query caching.

Still, the WordPress ecosystem further complicates the process. Themes and plugins can vary greatly in terms of resource requirements. Some make multiple database calls, while others make extensive use of scripts and styles. And even items that perform well enough on small sites could struggle at scale.

There are a variety of caching plugins available to get the most performance out of a website. But neither they nor WordPress core can account for a bloated theme or plugin.

With that, some developers have decided to (mostly) bypass the ecosystem by running headless installations. With a WordPress back-end that handles content creation, a static front-end removes database calls from the equation. This can result in blazing-fast page loads, with the caveat that some plugin functionality won’t carry over.

Tools that simplify the process of building headless WordPress websites would be welcomed. And bonus points for those that can keep plugin functionality (shopping carts, forms, etc.) going on the static side or via a hybrid approach. Much progress is being made, and it will be exciting to see what breakthroughs come next.

That doesn’t mean WordPress core shouldn’t focus on speed, though. For most users, keeping a traditional install that uses a database is still the reality. Every step towards higher performance counts.

Looking for the Next Big Thing in WordPressThe predictions above represent opportunities that already exist. One or more people can take on these challenges and create a solution that makes WordPress better/easier/faster. But they’re far from the only ones out there.

The great thing about an open-source CMS is that developers are only limited by their imaginations. Thus, we could see innovations that haven’t even been considered yet.

As WordPress matures, the need to create a powerful and seamless experience increases. A community full of creative minds is hard at work, plotting the next big thing. We can’t wait to see what they come up with.

The post Predicting the Next Opportunities for WordPress Innovation appeared first on Speckyboy Design Magazine.

View Details

Beauty may be in the eye of the beholder, but sometimes it takes some coaxing to show its true colors. And by coaxing, we mean editing. While we have a lot of tech at our disposal (and it really has come far), our cameras still cannot capture the exact essence of the moment and all the little things that make it magical.

So after you’ve ensured the lighting and shooting conditions are perfect, it’s time to edit your photos and show the world the incredible magic you’ve made. But don’t fall down the manual editing rabbit hole in Adobe Lightroom!

Instead, take a look at these Lightroom presets for creating stunning portraits. You’ll get plenty of options to create authentic and unique moods your followers and clients will love. From presets inspired by Instagram effects and sepia tones to Lightroom presets for bright and colorful portraits, you’ll get plenty to pick from. Enhance your original shots to tell your story!

Some of these Lightroom preset collections for portrait photography even offer such diverse filters that you can download them now and reuse them for years! They’ll be the perfect addition to your standard editing kit, and the best part is that you can get everything done with just a few clicks. Say goodbye to lengthy and arduous editing processes, and scroll down to meet your perfect Lightroom portraiture match!

More Lightroom Presets* Free Lightroom Presets * Lightroom Presets for Instagram Effects * Lightroom Presets for Fashion Effects * HDR Effect Lightroom Presets * Movie Effect Lightroom Presets * Lightroom Presets for Travel & Landscapes * Lightroom Presets for Weddings

Learn Adobe Lightroom

How to Install Lightroom Presets
Essential Lightroom Tutorials & Tips Lomography Lightroom Presets You don’t need an analog camera to get stunning results! Give your photos an authentic and vintage feel with Lomography, a collection of 11 Lightroom presets for portrait photography. These beautifully toned Lightroom presets are perfect for professional photoshoots, as well as portfolio and social media photography.

Lightroom Presets for Portraits Create diverse and beautiful portraits with these Lightroom presets for portrait photography. You’ll get 14 presets that will help you create flawless and professional results, no matter the lighting. From black and white to minimalist presets, you’ll get plenty of options for the perfect shot!

Tangerine Portrait Presets for Lightroom Stunning and authentic, Tangerine portrait presets for Lightroom are a fantastic choice. You’ll get 20 portrait presets that play with golden and warm tones and give your photos a matte vibe with quick editing in Adobe Lightroom or Photoshop. They’re great for professionals and newbies alike!

Stylish Portrait Pro Lightroom Preset Bright and stylish, these Lightroom presets are perfect for professional portrait photography as well as inexperienced bloggers and influencers. Your photos will get a bright, airy, and glossy atmosphere that’s perfect for highlighting the beauty of your models. This incredible collection offers 11 Lightroom presets for portrait photography.

Scarlet Fantasy Lightroom Presets Bring out the right tone in your photos to create a unique feeling with Scarlet Fantasy, a collection of 16 Lightroom presets for portrait photography. You’ll get five toning presets for cold, warm, and sepia tones, as well as 11 preset variations that optimize saturation, contrast, and exposure.

Natural Portrait Lightroom Presets Perfect for enhancing the natural beauty of your models, these Lightroom presets for portrait photography offer flawless results. You’ll get 60 professional Lightroom presets, so this collection is an excellent addition to your standard editing kit. They’re perfect for portrait, social media, blog, and fashion photography.

Burgundy Lightroom Presets Give your photos a rich and deep atmosphere with Burgundy, a collection of 14 Lightroom presets for portrait photography. These presets bring out the fantastical reds in your photos and create a stunning and authentic vintage atmosphere. These Lightroom presets are perfect for portfolio photography and establishing a distinct style!

Natural Light Portrait Lightroom Presets If you leveraged natural light for your portrait shots, you’ll love these Lightroom presets! Made with natural lighting in mind, these 30 Lightroom presets give your photos an airy and warm feeling. They’re perfect for professional shoots, as well as portfolios and social media.

Aurum Portrait Lightroom Presets No glitter, but plenty of gold! Aurum is a stunning collection of 14 presets and their variations for portrait photography. They’ll give your photos a color and warmth boost, no matter the conditions. Aurum presets make every photo beautiful, even if it was shot in a cold studio.

Yolk Portrait Lightroom Presets Add a dash of gold to your standard portrait photography with Yolk, a collection of 31 Lightroom presets. From natural tones that enhance professional photoshoots to presets that turn every photo into a masterpiece of fine art, there’s plenty to pick from in this stunning preset collection.

80 Portrait Lightroom Preset Bundle The ultimate bundle for all your portrait photography Lightroom needs! You’ll get 80 presets for rich and moody, vintage black and white, as well as glossy editorial and magazine atmospheres. These presets aren’t destructive, and you can easily add them to your photos for stunning results.

Romantic Autumn Lightroom Presets Convey the romantic and cozy atmosphere of autumn with these Lightroom presets. This beautiful collection offers 20 Lightroom presets for portrait photography, with effects that vary from soft and matte shades to presets with dramatic and deep orange tones. There’s plenty to pick from for your next shoot!

Instagram Portrait Lightroom Presets Turn your original shots into works of art with these Instagram portrait Lightroom presets. You’ll get 11 Lightroom presets that work like a charm for a variety of images, conditions, and lighting environments. You can easily adjust the effects to suit your preferences and create a consistent style.

10 Portrait Lightroom Presets Ver.1 Save time and get gorgeous, consistent results with these 10 Lightroom presets for portrait photography. These presets offer gentle improvements to your original shots that beautifully convey the unique atmosphere of each moment. You can easily edit the effects to suit your style, and give your original images more depth.

Modern Portrait Lightroom Presets Bright, airy, and glossy, these modern Lightroom presets for portrait photography are fit to appear on the cover of Vogue! You’ll get 30 Lightroom presets that work beautifully for a variety of different shoots, and guarantee stunning results. You can also use them for fashion and wedding photography.

Flowerage Portrait Lightroom Presets Let your viewers immerse themselves in the nostalgic atmosphere of your photos with Flowerage, a collection of 24 portrait photography Lightroom presets. They adjust the colors to give your original shots a hipster vintage feeling. You can use them for various photos since they offer different brightness and lighting variations.

Pro Portrait & VSCO Lightroom Presets Mimic the charm of VSCO at scale with these professional portrait and VSCO Lightroom presets. This collection offers 12 Lightroom presets that will give your standard portrait shots additional depth and moody atmospheres for highly-artistic results. These Lightroom presets are perfect for professional shoots, as well as distinguished portfolio photography.

Pro Portrait & Film Lightroom Presets Give your photos a unique and artistic feel with these professional Lightroom presets for portrait photography. These 16 presets offer a film-like look for your photos. The effects range from faded and grainy to soft and smooth filters. They’re perfect for pro photography, social media, and magazines.

Great Portrait Lightroom Presets Diverse and authentic, these Lightroom presets offer phenomenal options for your portrait photography editing. You’ll get all the must-have filters and effects, from faded matte to soft filters enhancing your models’ creamy skin. There are 14 Lightroom presets in this pack, and you’ll love the results!

Blacktone Black & White Lightroom Presets There’s nothing like B&W to add drama to your photos or showcase the emotions lying underneath. These portrait photography Lightroom presets offer ten black and white filters. From sepia-infused tones to bright filters, you’ll get everything you need to turn your photos into works of art.

Deeptone Lightroom Presets Add depth to your photos with Deeptone, a collection of 8 Lightroom presets for portrait photography. They’ll give your photos a moody atmosphere. The presets range from cold greens to neutral and warm tones, so there’s plenty to create a beautiful photo clients will love.

Flora Lightroom Presets Flora is a collection of 4 fine-tuned and artistic Lightroom presets, perfect for outdoor portrait photography. You’ll get four preset options, named after seasons, that work like a charm for creating unique atmospheres and bring the best out of lush, green settings. They work best with natural light!

Retrochrome Lightroom Presets Retrochrome is a collection of vintage-inspired Lightroom presets perfect for portrait and family photography. It offers beautiful toning for photos you want to radiate a nostalgic and warm atmosphere. You’ll get 17 retro chrome presets, as well as variations to match your original photos’ settings, conditions, and lighting.

Fairytale Lightroom Presets It’s time to tell an incredible story with your photos! Use these 11 Lightroom presets that convey a dark fairytale atmosphere. Every preset is editable, so you can customize them to fit your vision (and settings). These are really unique presets that will look amazing in your portfolio!

Magazine Lightroom Presets If you want to give your portraits a glossy touch, you’ll love these 50 Lightroom presets for portrait photography. You’ll get presets inspired by Kodachrome, Hermes’ red and orange tones, nostalgic filters, and other styles seen in magazines. You can even use them for videos!

Highlight the subtle nuances that make your shots magical with these Lightroom portrait photography presets. From presets that create dark and rich moods by bringing out the reds and the browns in your original shots to presets that create a fizzy aesthetic more glamorous than a glass of champagne, these 25 Lightroom presets for portrait photography offer endless options.

It’s up to you to pick the perfect preset for your next project(s). At the end of the day, you’ll get stunning results. And no matter the lighting or the conditions, you’ll be able to create the exact scene you originally set out to create.

And once you share your beautiful work with the world – be that in your portfolio or on your social media – you’ll have no problem attracting even more clients who want your magic to themselves.

How to Install & Use a Lightroom PresetHow to Install ∧ Use a Preset in Lightroom CC 2018+:

Download ∧ unzip the preset file
Open Lightroom
Navigate to Develop Module
Hover over the + sign next to the Presets
Select Import Presets
Apply the preset by selecting the photo you want to edit and clicking the preset name.

How to Install and Use a Preset in Older Versions of Lightroom:

Open Lightroom
Go to Preferences > Presets
Click on the box titled Show Lightroom Presets Folder
Double click on Lightroom
Double click on Develop Presets
Copy the folders of your presets into the Develop Presets folder
Restart Lightroom
Use the preset by selecting the photo you want to work with and clicking on the preset name The post The 25 Best Lightroom Presets for Creating Stunning Portraits appeared first on Speckyboy Design Magazine.

View Details

The Large, Small, and Dynamic Viewport Units – Discover new CSS units that account for mobile viewports with dynamic toolbars.

10 Free Templates for Creating Professional Intros in After Effects – Grab viewer attention by using one of these excellent intro templates.

The Anatomy Of Themed Design System Components – A detailed look at what’s involved with creating a component.

Using The New Constrained Layout In WordPress Block Themes – WordPress 6.1 offers more layout spacing options for theme developers.

How to Find Out What a Web Design Client Really Needs – Tips for dealing with someone who can’t make up their mind or just doesn’t know much about the process of developing a website.

Sketchy Pencil Effect with Three.js Post-Processing – Learn how to create a hand-drawn look using a JavaScript library and WebGL.

Wireframe Free Kit – Check out this free wireframing kit for Figma.

Fancy Frames with CSS – How to go beyond basic square or rounded corners with a bit a CSS magic.

8 CSS & JavaScript Snippets for Creating Cool Cursor Effects – Cursor effects that range from basic to outrageous.

Vuestic UI – A customizable UI framework for use with Vue.js.

Circum – Check out this open-source icon library that follows Google Material Design principles.

The Importance of Keeping Up with the Latest CSS Techniques – Why taking the time to learn now can lead to greater efficiency later.

a2000 – Use this UI library to create a retro look.

Designing a Utopian Layout Grid – Learn how to use the Utopia fluid grid calculator to create responsive layouts.

The 2022 WordPress Survey – It’s time to share your feedback with the team behind WordPress.

15 Free Templates for Creating Party & Event Flyers – Promote your next event in style with one of these free templates.

The WP Community Collective – This new organization aims to help fund WordPress contributors.

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

View Details

The ability to quickly create content is a strength of WordPress. Install the content management system (CMS), configure a few settings, and start writing. That’s all there is to it – sort of.

If your website has a lot of content, you’ll first want to give some thought to how it’s organized. Without proper care, pages and posts can become a jumbled mess in the dashboard. Not only does it make a particular item harder to find later on, but it’s also a pain to rearrange after the fact.

That’s why it pays to have a plan. By mapping out your needs at the start of a project, you’ll be able to store content logically. It looks professional, helps with SEO, and will likely reduce your stress levels. What’s not to like?

Today, we’ll share some tips to help you effectively organize content within WordPress. Let’s get started!

What’s a Page? What’s a Post?A default WordPress installation supports both Pages and Posts. Each has specific use cases, and they aren’t easily interchangeable. This can trip up even experienced users. As such, it’s worth pointing out some key differences.

Pages are geared toward standalone content. For example, your website may have an About Us page that contains a biography or a Contact page that includes a form.

These items could have parent/child relationships with other pages. Thinking of our example, the Contact page might have child pages for each location of a business.

Posts are generally best for creating a collection of similar content. If your website has a blog or needs to publish news items, posts are a perfect fit.

They can also be sorted into categories and tags, which helps to organize content by a specific subject. A post can belong to multiples of each, making it easier to narrow down large volumes.

Use Custom Post Types for Niche ContentWhile Pages and Posts are powerful, they’re rather generic in terms of labeling. Consider having all of your eCommerce products live alongside press releases in the Posts area. While it’s technically possible, it could make managing content confusing – particularly if you’re handing the site off to a client.

That’s where custom post types and taxonomies come in handy. Functionally, they’re no different than Pages and Posts. But they allow for housing and organizing a site’s niche content in a highly-tailored way.

WooCommerce is a prime example of these features in action. Install the eCommerce plugin and you’ll see a post type for Products appear in the WordPress admin menu. In addition, they can be further organized through custom taxonomies (product categories and tags).

Using custom post types and taxonomies creates a more intuitive management experience. When every type of content has a unique name and place, it’s easier to find, edit, and add to. It’s a level of flexibility you can’t get by lumping everything into the standard content types.

Plus, optimizing for search engines becomes simpler. You can target certain content and implement structured data that accurately represent products, events, or anything else you need.

The benefits of “going custom” may lead you to eschew traditional Posts altogether.

Take Advantage of Parent/Child RelationshipsAs we mentioned, WordPress pages are capable of parent/child relationships. Custom post types can also do so – if configured to use them.

This creates a hierarchy that makes related content easier to locate and manage within WordPress. Likewise, it establishes consistency in your site’s URL structure – another feature to boost your SEO.

For sites with dozens (or hundreds) of pages, parent/child relationships are a lifesaver. This method organizes the Pages listing screen according to those relationships. Without them, you might be scrolling through several screens trying to find a proverbial needle in a haystack.

When should you use these relationships? A good rule of thumb is to group pages that have something in common.

One method involves mimicking your site’s menu structure. If you have multilevel menus, for instance, you can arrange parent/child relationships that reflect this setup.

In practice, it means that the About Us page could serve as the parent for each subpage in that navigation tab. With that, both the listing and URLs follow a pattern. For example:

About Us (parent – /about-us/)
-Mission Statement (child – /about-us/mission-statement/)
-Leadership (child – /about-us/leadership/)
-Staff (child – /about-us/staff/)

By organizing your content identically on both the front and back ends, you’re simplifying the experience and making future edits a breeze.

Keep Your WordPress Content Neat and TidyWhile it’s easy enough to create content with WordPress, keeping things organized isn’t so obvious. And a bit of carelessness here can lead to a lot of frustration down the line.

Thankfully, WordPress offers features that can help you keep things neat and tidy. Standard Pages and Posts, along with custom post types and parent/child relationships allow you to organize content in any way you choose.

The key is to plan ahead. That requires careful thought to determine what content your site will feature and how to best organize it.

Doing it right requires a bit of work. However, it’s well worth the effort. The reward is a website where everything has its place.

The post How to Effectively Organize Content within WordPress appeared first on Speckyboy Design Magazine.

View Details

Freelance web designers often work with a variety of clients. It provides many interesting experiences. For example, you get a behind-the-scenes look at how decisions are made. And it’s something that can vary significantly from place to place.

For instance, you may find that an organization has a very clear power structure. Others may be a complete mess in that area. Those without structure are often the most difficult to work with. And even though these situations aren’t typically enjoyable, they are almost always a learning opportunity.

Seeing where your clients excel and where they struggle provides insight. That’s a good thing because the web design process can demonstrate office politics at its worst. Everybody wants to have their say and get their ideas implemented. It will test your patience. And if you’re not careful, your project can go up in flames.

Design politics can seem insurmountable. But a savvy web designer may be able to save the day. Let’s look at some ideas to help you get things back on track.

Web Designer in the MiddleAs organizational outsiders, web designers are often the ones left in the middle of a power struggle. And all too often, we are expected to act as mediators.

This is especially so when a client’s nominal “leader” allows for too many cooks in the kitchen. That leads to being inundated by multiple people who aren’t on the same page.

The challenge is that we can’t necessarily ignore everyone but the boss. Thus, we get pulled in multiple directions and are left to sift through competing suggestions. Sometimes, ideas can clash and contradict each other.

For a designer, it can feel both frustrating and a bit pointless. You’re there to build a great website, not to play staff psychiatrist.

So, how are you supposed to effectively deal with such a free-for-all?

Take a Leadership RoleAt some point during the process, it may become obvious that a client has trouble making decisions. You can usually tell very early on.

In meetings, people tend to eschew a productive debate. Instead, they’ll take the conversation in different directions without any clear answers.

In these situations, you might be the only one who can put out the fire. Therefore, you’ll need to speak up and assert yourself as someone who knows what they’re doing.

This is not the easiest thing to do – especially if it doesn’t fit your personality. But you don’t have to be mean or forceful – just honest. Here’s how it works:

Explain the Design and Development ProcessesTeam members often crave strong leadership and struggle when it’s missing. You can be the person they will rally around.

It starts with a mention of how, to succeed, the project needs a clear plan of attack. Explain your process for getting things done and what you need from everyone to carry it out.

At the very least, this provides everyone in the room with a bit of a reset. Understanding what makes for a successful outcome will (hopefully) create a higher level of cooperation.

Welcome Client IdeasToo many ideas can indeed drive you crazy. But a client still has a right to express their thoughts. Therefore, the goal is to better organize them.

This can be accomplished by cataloging ideas in a shared document. Here, everyone can add their voice, but in a less chaotic way. Be sure to use a basic template and try to have everyone follow the same format.

From there, you can go over the pros and cons of each suggestion. It may take a little while to get through. But the hope is that people will start to see a clearer path forward. As a result, that list should become much smaller.

See it ThroughIf you’re seeing a more productive environment for getting things done – great! But don’t rest on your laurels. There might still be roadblocks on the way to getting the website launched.

Look for opportunities to re-establish your message. There’s no need to be aggressive. It’s more about sending gentle reminders for items that still need to be done. And it’s also not a bad idea to celebrate milestones as you pass them.

These little forms of motivation can add up and keep the momentum moving in the right direction.

Learn to AdaptNo two clients will work the same way. That can be hard to deal with since we tend to be creatures of habit. But it’s unlikely that your client is going to change the way they do things just for you.

Thus, it’s up to us to adapt to them. Sometimes, the design and build processes will go smoothly. Other situations may call for a firmer grip on the reigns. The key is in diagnosing the dynamics in the room (physical or virtual) and adjusting your strategy to match.

They say that it “takes all kinds” to make the world. Web designers get to experience this firsthand. Ultimately, it enables us to navigate even the most difficult projects.

The post How to Navigate Design Politics appeared first on Speckyboy Design Magazine.

View Details

The ability to work with multiple clients is one of the perks of being a freelance web designer. You can build websites spanning an array of industries – each one providing a unique experience. Or you can go in the opposite direction and focus on a particular niche.

Whichever path you choose, there is a singular common thread for each project you take on: commitment. It’s crucial to not only focus on a project’s outcome, but on our relationships with clients as well. Yet it’s not something we routinely discuss.

That’s something we should change. After all, commitment is a key ingredient to a successful web design career. You aren’t likely to get very far without it.

Let’s kick off the discussion with a look at what kinds of commitments web designers need to make, along with tips for managing it all.

What Are We Committing To?Booking a project is exciting. But it’s also a lot of responsibility. If you’re not prepared to deal with it, things may not go according to plan.

Thus, before you sign on the dotted line, know that you’re committing to:

Delivering Quality WorkFirst and foremost, web designers should deliver quality work. While “quality” is a subjective term, in this case, it means the website should look and work in an agreed-upon way.

Nothing in this world is perfect – and that includes websites. Still, we’re committing to follow best practices and do so to the best of our knowledge.

Honesty can also be included here. For example, if a client requests functionality that is out of their budget, it’s up to us to explain the situation. All told, it’s about setting realistic expectations and then following through.

CommunicationHave you ever booked a client who previously worked with another web designer? Odds are, one of the reasons they left the other designer was a lack of communication.

This means being responsive to client requests and keeping them in the loop as necessary. The requirements will vary based on the type of project and the personalities involved. But staying on top of your inbox is paramount.

And you don’t have to be a wordsmith. Even a brief acknowledgment that a message was received and in review is usually enough. Making even a minimal effort in this area can help to build trust.

ProfessionalismProfessionalism is an overlooked part of freelancing. And despite what stock photos often depict, it has very little to do with wearing business attire. It’s more about how you manage projects and interact with stakeholders.

It starts with being organized. For example, keeping track of your schedule and demonstrating the ability to consistently meet project deadlines. These acts go a long way towards developing good relationships – and maybe receiving some positive word-of-mouth.

There’s also something to be said for accepting what we do and don’t know. We all have weaknesses. So, when we don’t have an immediate answer, it’s always better to research than provide a half-baked response.

None of this means that you can’t have fun. Rather, it’s a reminder to go the extra mile and put forth your best effort.

A Long-Term RelationshipIf you’re a freelancer who provides both design and maintenance, then you’re also committing to a long-term relationship with your clients. That means the website you build today could still be a part of your life several years from now.

This is an especially important consideration. If you’re not crazy about a project or a client, the thought of dealing with them indefinitely might give you pause. It could be enough of a reason to turn down an opportunity.

The bottom line is to make sure you know what you’re getting into! You may not always get it right. But the ability to choose positive relationships will take you a long way in this industry.

A Commitment to Web Design SuccessWhen you think about freelancing, commitment may not be the first thing that comes to mind. And it’s not uncommon to hear stories from others who have been surprised by how much of it is required to succeed.

It’s one reason why this career path isn’t a fit for everyone. Starting a web design business without an understanding of commitment makes for an even bigger challenge.

Even so, it’s something you can learn and improve over time. And you don’t need any special skills – just a willingness to put in the work.

Once you realize the finer points of the job, things start to flow naturally. You may even find that your projects and client relationships move along more smoothly. Why? Because you’ve mastered the art of commitment.

The post Why It Takes Commitment to Work with Clients appeared first on Speckyboy Design Magazine.

View Details

This week’s Designer News – № 672 – includes How to Use Huge Type on the Web, An Interactive Guide to Flexbox, The iOS 16 Design Guidelines, State of JavaScript 2022, Futicons, Hexagon Pattern Generator, WordlePress, and lots more.

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

View Details

Do you have a client that doesn't know the process of developing a website? There are some things you can do to help them.

The post How to Find Out What a Web Design Client Really Needs appeared first on Speckyboy Design Magazine.

View Details

Even if your current solutions work adequately, there are still reasons to invest in learning the latest CSS techniques.

The post The Importance of Keeping Up with the Latest CSS Techniques appeared first on Speckyboy Design Magazine.

View Details

A collection of free event and party flyer templates (PSD & AI). Make an impact on how your event is received by your target audience!

The post 15 Free Templates for Creating Party & Event Flyers appeared first on Speckyboy Design Magazine.

View Details

A collection of eight CSS & JavaScript copy & paste code snippets for creating unique and highly creative cursor effects.

The post 8 CSS & JavaScript Snippets for Creating Cool Cursor Effects appeared first on Speckyboy Design Magazine.

View Details

This week’s Designer News – № 671 – includes The Faces Behind Typefaces, Making Static Noise From a Weird CSS Gradient Bug, Design Principles, Online CSS Code Quality Analyzer, A Guide To Keyboard Accessibility: HTML And CSS, Web Sustainability Resources, and a whole lot more.

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

View Details

Even in this high-tech world in which we live, there are still people who think that anyone can build a great website.

The post Dealing with People Who Don’t Value Web Designers appeared first on Speckyboy Design Magazine.

View Details

Many years ago, I had a dream. It was to become a fantastic web designer. From there, I would launch a freelance business and find immediate success. Ah, the joys...

The post You Don’t Have to Be an Expert to Launch a Freelance Career appeared first on Speckyboy Design Magazine.

View Details

A collection of the best free Adobe After Effects title templates that are not only easy to customize but will save you hours of time.

The post 10 Free Adobe After Effects Titles Templates appeared first on Speckyboy Design Magazine.

View Details

On the web, things don't go away so much as they fade into the background. As quickly as new tech arrives, the old continues to lumber along in the shadows.

The post The Web Has an Outdated Software Problem appeared first on Speckyboy Design Magazine.

View Details

This week’s Designer News – № 670 – includes Mona and Hubot Sans Fonts, GitHub Blocks, Why We Need CSS Speech, Slim Icons, The Evolution of Scalable CSS, Managing CSS Styles in a WordPress Block Theme, and so much more.

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

View Details

We take a look at some scenarios where patience between a designer and client is called for, and when it's time to say "enough."

The post What to Do When a Client Tries Your Patience appeared first on Speckyboy Design Magazine.

View Details

Hard as it may be to fathom, the web has been a part of our world since CERN placed it into the public domain in 1993. And if you were...

The post The Web Design Concepts That Were Ahead of Their Time appeared first on Speckyboy Design Magazine.

View Details

With these beautiful and free Photoshop PSD scene mockups and creators, you will be able to make your designs truly stand out.

The post 15 Free Hero Scene Creator Mockup Templates for Photoshop appeared first on Speckyboy Design Magazine.

View Details

A collection of CSS and JavaScript snippets that celebrate retro computing. The Commodore 64, the original Mac, Windows 95, and much more.

The post 8 CSS & JavaScript Snippets That Celebrate Retro Computing appeared first on Speckyboy Design Magazine.

View Details

A collection of the best Photoshop actions for quickly creating stunning light leak effects. All provide a stellar and professional result.

The post The 15 Best Light Leak Effect Photoshop Action Sets appeared first on Speckyboy Design Magazine.

View Details

This week’s Designer News – № 669 – includes How To Create Advanced Animations With CSS, The New CSS Media Query Range Syntax, Open Design Systems Repo, Copy-and-Paste Glyphs, The Typing of the RegEx, Design Tokens Generator, WordPress 6.1 “Misha”, and plenty more.

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

View Details

So many problems can be prevented by avoiding lazy practices. By weighing the potential consequences of a web project could save us from many issues.

The post Things That Come Back to Haunt Web Designers appeared first on Speckyboy Design Magazine.

View Details

Online event registration has become a popular feature in web design. But, before you start taking online registrations, read our tips for choosing the right tool.

The post Tips for Taking Event Registrations on Your Website appeared first on Speckyboy Design Magazine.

View Details

Browse our collection of the best Lightroom presets for fashion photography and photoshoots, and find the perfect fit for you.

The post 15 Stunning Lightroom Presets for Fashion Photoshoots appeared first on Speckyboy Design Magazine.

View Details

Let's talk about the pressures we face as freelance web designers, and maybe we'll find some healthy ways to cope with them.

The post The Grumpy Designer Asks: Are You Tired? appeared first on Speckyboy Design Magazine.

View Details

This week’s Designer News – № 668 – includes Do you Really Understand CSS radial-gradients?, CSS Animated Grid Layouts, Drag and Drop UX Best Practices, 2022 Design Tools Survey, The Component Gallery, Tylify Figma Plugin, Essays as Design Theory, Introducing the M3 Design Kit for Figma, and a whole lot more.

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

View Details

Ethics are often very personal, and what I find acceptable may not sit so well with you and vice-versa. But there are some general traits that most designers can agree on.

The post The 5 Traits of an Ethical Freelance Web Designer appeared first on Speckyboy Design Magazine.

View Details

There are hosting providers out there that do offer stable, low-cost hosting. However, you do need to learn how to improve their performance.

The post Squeezing the Most Performance from Cheap Web Hosting appeared first on Speckyboy Design Magazine.

View Details

A collection of professionally designed free logo mockup templates for Photoshop that will help you showcase your branding beautifully.

The post 30 Free Logo Mockup PSD Templates for Creatives appeared first on Speckyboy Design Magazine.

View Details

If you're looking to build a web career that is successful and sustainable, we're here to help! Here are some tips to help get you up and running.

The post How New Web Designers Can Level Up appeared first on Speckyboy Design Magazine.

View Details

This week’s Designer News – № 667 – includes Nabla Isometric Font, html.to.design for Figma, Futuristic CSS, Responsive Animations for Every Screen Size and Device, Paper Wireframe Kit, Gutenberg Best Practices, and so much more.

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

View Details

How can WP capture the do-it-yourself (DIY) market? Here are a few ideas on how WordPress can become even friendlier to newbies.

The post What Can WordPress Do to Appeal to the DIY Market? appeared first on Speckyboy Design Magazine.

View Details

A collection of the very best free Lightroom wedding presets. They all share powerful styling to enhance your favorite wedding photos.

The post The 10 Top Free Wedding Presets for Lightroom appeared first on Speckyboy Design Magazine.

View Details

We share a handful of code snippets that you can use for creating common interactive elements using just simple HTML and CSS.

The post Interactive Elements That You Can Build with HTML & CSS appeared first on Speckyboy Design Magazine.

View Details

Many choose the freedom of a freelance career, but dealing with the responsibilities can be difficult. You'll need to become self-reliant!

The post The Keys to Becoming a Self-Reliant Freelance Designer appeared first on Speckyboy Design Magazine.

View Details

This week’s Designer News – № 664 – includes GIFs Without the .gif, The New Wave of JavaScript Web Frameworks, 2022 Web Almanac, Sargam Icons Collection, Free iPhone 14 Pro Mockup, Useful JavaScript Math Functions and How to Use Them, and plenty more.

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

View Details

Our line of work boasts guides to absolutely everything. For instance, gurus are there to tell us about every new CSS feature – including why it’s the next big thing...

The post Sifting Through Design Information Overload appeared first on Speckyboy Design Magazine.

View Details

Despite all of the hype regarding block themes, classic themes continue to dominate the market receiving love from WordPress core.

The post Why Classic WordPress Themes Aren’t Going Away appeared first on Speckyboy Design Magazine.

View Details

There's no shame in saying “no” to a project. That can be a difficult lesson to learn – but very much worth the effort.

The post Reasons to Say “No” to a Web Design Project appeared first on Speckyboy Design Magazine.

View Details

If you're ready to take your next presentation design up a level, we're back with another stunning collection of free Keynote templates.

The post 25 More Free Keynote Templates for Creatives appeared first on Speckyboy Design Magazine.

View Details

This week’s Designer News – № 663 – includes Randomness in CSS, Palette AI Colorization App, Björk WordPress Theme, How Much Time Do We Waste Waiting for Websites to Load?, Designing Better Inline Validation UX, and so much more.

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

View Details

In design, as in society, there is constant pressure to mimic the most successful among us. Just like some want to copy the look and style of their favorite celebrity,...

The post How to Develop Your Signature Style as a Web Designer appeared first on Speckyboy Design Magazine.

View Details

We identify some of the common pitfalls when redesigning a WordPress website and show you how to prepare for a smoother transition process.

The post Common Pitfalls When Redesigning a WordPress Website appeared first on Speckyboy Design Magazine.

View Details

For adding extra visual flair to your videos, this collection of free lower thirds After Effects templates is exactly what you need.

The post The 10 Best Free Lower Thirds Templates for After Effects appeared first on Speckyboy Design Magazine.

View Details

A collection of CSS & JavaScript snippets for building mega menus. Everything from simple, text-based navigation to richly-styled UIs.

The post 8 CSS & JavaScript Snippets for Building Mega Menus appeared first on Speckyboy Design Magazine.

View Details

This week’s Designer News – № 662 – includes Git Commands Cheat Sheet, Thanks iPhone 14: Designing for Device Sizes is Dead, Figma's New Collaboration with Adobe, Hacktoberfest, JavaScript APIs You Don’t Know About, iOS 16 UI Kit for Figma, and a whole lot more.

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

View Details

In design circles, we're quick to judge others in our profession. It's incredibly easy to glance at another's work and call it "crap." But are we judging fairly?

The post Why We Unfairly Judge Other Designers appeared first on Speckyboy Design Magazine.

View Details

Spending money on your business isn’t always a bad thing. In some cases, it may be an investment that helps you bring in more revenue. Still, there’s a fine line...

The post How to Run Your Freelance Design Business on the Cheap appeared first on Speckyboy Design Magazine.

View Details

A collection of free Lightroom presets for creating amazing portraits. They will boost colors, smooth edges, and stylishly fade backgrounds.

The post The 10 Best Free Lightroom Presets for Creating Stunning Portraits appeared first on Speckyboy Design Magazine.

View Details

The further we get into the 21st century, the more contradictory the web seems to become. We have a plethora of no-code tools aimed to make things easier for novices...

The post The Challenges of Building a Modern eCommerce Website appeared first on Speckyboy Design Magazine.

View Details

We share the best Adobe After Effects lower thirds pre-designed templates, so most of the work has already been finished for you.

The post The 10 Best Lower Thirds Templates for Adobe After Effects appeared first on Speckyboy Design Magazine.

View Details

This week’s Designer News – № 661 – includes Making a Website Under 1kB, Freebie iPhone 14 Pro Mockup, Overlapping Bar Charts, Browserslist, Infinite Scrolling: When to Use It / When to Avoid It, UX Checklists For Interface Designers, and lots more.

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

View Details

Web designers are a passionate lot. I’m willing to bet that, if you’re reading this, you likely love what you do and enjoy sharing it with others. It seems to...

The post Getting Clients to Care About Their Website Long Term appeared first on Speckyboy Design Magazine.

View Details

A collection of the best intro video templates for After Effects. They will help you create amazing videos without starting from scratch.

The post The 10 Best Professional Intro Templates for After Effects appeared first on Speckyboy Design Magazine.

View Details

Tips and advice on how you can expedite the WordPress plugin support process and increase the odds of getting a positive solution.

The post How to Get the Best Technical Support for WordPress Plugins appeared first on Speckyboy Design Magazine.

Speckyboy Design Magazine: Recent Episodes

None