Blog

232 posts

Areas to Be Proactive with Your Web Design Clients

We talk about it all the time. Being a web designer is about more than just clean code and pretty graphics. There are a number of other roles we play. Psychiatrist, psychic, support technician and all-around guru come to mind.

Part of our relationship with clients also involves sharing knowledge and gently prodding them to move in the right direction. That makes us motivational speakers/life coaches, maybe?

Regardless of what we call it, the action itself is vitally important. Because the web is constantly changing, designers are often an invaluable resource for clients.

We are a liaison that keeps them abreast of new developments that can have a direct impact on their business. This is especially so when it comes to smaller businesses that don’t have the resources to keep up on their own.

In that tradition, the following are some key areas where we can proactively fill in those knowledge gaps for our clients and some tips for doing so.

Accessibility

Those of us in the web design industry have been talking about the importance of accessibility for years. However, clients have tended to show varying degrees of interest. In some cases, it feels like you could be shouting the message through a bullhorn and get a mere shrug in return.

Yet, this issue isn’t going away. Quite the opposite. Accessibility concerns haven’t been covered that much by the mainstream media. That is, until the now-infamous Domino’s Pizza case. It shows that companies can face legal (hence, financial) consequences for failing to accommodate all users.

This serves as an especially loud wakeup call in the United States, which has yet to enact any concrete rules regarding website accessibility.

It’s something clients need to know about. Whether approached one-by-one or through mass communication, there is an opportunity to get any stragglers on board. At the very least, we can make them better aware of what’s happening and what steps can be taken to address any shortcomings.

Aspects such as typography, color contrast and keyboard navigation are often fairly simple to tweak and go a long way towards more user-centric design. Plus, reinforcing good habits like setting ALT tags on images should also be emphasized.

A handicap parking space.

Privacy

Here’s another area where clients really need a helping hand. Unlike accessibility, privacy concerns really are all over the news. And regulations such as GDPR again mean that real consequences can come from missteps.

Just about every website is collecting something. Tying in with virtually any third-party service provider means cookies and user tracking scripts will likely be in place. Not to mention the everyday server logging that most sites employ. Therefore, privacy policies and procedures to back them up need to be in place.

Obviously, web designers are not legal experts. So, while we can’t (and shouldn’t) be the sole provider of advice, we can certainly play the role of helpful messenger.

How does that play out? You might consider reaching out to your clients and explaining the issues at hand. Provide some links to related articles – especially those that demonstrate the seriousness of keeping user data private. Finally, encourage them to seek legal counsel on the matter and be proactive themselves.

A sign that reads "PRIVATE".

Security

The web is simply teeming with security risks. Virtually every user is vulnerable in some way. The same goes for websites.

A hacked site can become infected with malware. That, in turn, makes the site potentially unsafe for users. Beyond that, it can destroy carefully-crafted SEO strategies and leak customer data.

Many clients just assume that it’s our job to handle this stuff. And while that’s technically true, they also have a major role to play in keeping things safe.

Designers can help guide clients towards implementing secure practices. Things like using strong passwords and not sharing them with just anyone. In addition, teaching a healthy skepticism of email scams and even any third-party software they want to install.

As they say, security is only as good as its weakest link. In some cases that can be a careless client. But this is something we can help to prevent. As such, it’s worth the time and effort to help them understand their own responsibilities.

Padlocks on a fence.

Knowing Where to Draw the Line

All of the subjects above are not only important, they are also linked to some serious repercussions. For web designers, this means walking a bit of a fine line.

On one hand, there is a sense of duty that goes along with informing our clients about these issues. That’s what being proactive is all about – trying to call attention to problems before they become even bigger ones.

At the same time, there is a danger in taking on too much responsibility in any one of these areas. It’s one thing to fix some known accessibility problems with a client’s website. But it’s another to certify (without being qualified to do so) that their site is compliant. If the opposite is found to be true it can become a real nightmare.

That’s why it’s important to make your intentions and limitations clearly known. Let clients know that you can provide advice on a given topic, but that it’s best to speak with a legal expert where appropriate. You don’t want to leave yourself vulnerable should something go wrong.

People having a conversation.

The Benefits of Speaking Up

Quite often, our clients are busy. They’re wrapped up in their own daily grind and don’t necessarily have the time to focus on the intricacies of their website. So, don’t be too surprised if they don’t have a vast knowledge of accessibility, privacy or security best practices.

Web designers, however, are in a position to keep clients informed. And we have perhaps even a moral and ethical obligation to do so.

Helping others avoid potential problems feels great. Plus, there is the possibility of generating some revenue from these discussions as well. In all, it’s a win-win situation.

The post Areas to Be Proactive with Your Web Design Clients appeared first on Speckyboy Design Magazine.

Researchers develop 3D printable wound dressings based on fruit

Researchers from the Aristotle University of Thessaloniki (AUTh), Greece, have developed 3D printable direct and indirect patches with wound-healing capabilities.  In an article published in the journal Pharmaceutics, 3D printable inks based on pectin, a naturally occurring substance found in berries, apples, and other fruit, which form free‐standing transparent films designed to treat shallow wounds and ulcers. “The application […]

Danish University’s plastic recycling technology hopes to end 3D printing “Wild West”

The Department of Engineering of Aarhus University, Denmark wants to revolutionize plastic usage in 3D printing. The aim is to recycle plastic waste into a standardized filament product since the industry lacks the standards of print-quality filament – states professor and plastics expert Mogens Hinge. The university is cooperating with Aage Vestergaard Larsen A/S plastic […]

BAE Systems and Renishaw partner to develop combat aircraft systems using additive manufacturing

Multinational aerospace company BAE Systems has signed a Memorandum of Understanding (MoU) with UK-based metal 3D printer manufacturer Renishaw to improve manufacturing processes for combat aircraft systems.  With the application of industrial 3D printing, this collaboration aims to improve performance, reduce costs and speed up the production of such aircraft systems, ultimately advancing novel technology […]

New research details influence of prenatal development on design for additive manufacturing

Researchers from the University of Birmingham, UK, have proposed a new approach to design for additive manufacturing, suggesting there is much to learn from the prenatal development of a human baby. The work by Birmingham’s School of Engineering and the Centre for Human Reproductive Science and published in The International Journal of Advanced Manufacturing Technology […]

Recreating The Arduino Pushbutton Using SVG And <lit-element>

Recreating The Arduino Pushbutton Using SVG And <lit-element>

Recreating The Arduino Pushbutton Using SVG And <lit-element>

Uri Shaked

Today, I am going to take you through the journey of creating an HTML component that mimics a momentary pushbutton component that is commonly used with Arduino and in electronic projects. We will use technologies such as SVG, Web Components and lit-element, and learn how to make the button accessible through some JavaScript-CSS trickery.

Let’s start!

From Arduino To HTML: The Need For A Pushbutton Component

Before we embark on the journey, let’s explore what we are going to create, and more importantly, why. I’m creating an open-source Arduino simulator in JavaScript called avr8js. This simulator is able to execute Arduino code and I will be using it in a series of tutorials and courses that teach makers how to program for Arduino.

The simulator itself only takes care of the program execution — it runs the code instruction by instruction and updates its internal state and a memory buffer according to the program logic. In order to interact with the Arduino program, you need to create some virtual electronic components that can send input to the simulator or react to its outputs.

Running the simulator alone is very much like running JavaScript in isolation. You can’t really interact with the user unless you also create some HTML elements, and hook them to the JavaScript code through the DOM.

Thus, in addition to the simulator of the processor, I’m also working on a library of HTML components that mimic physical hardware, starting with the first two components that you will find in almost any electronics project: an LED and a pushbutton.

The LED and the Pushbutton elements in action
The LED and the Pushbutton elements in action

The LED is relatively simple, as it only has two output states: on and off. Behind the scenes, it uses an SVG filter to create the lighting effect.

The pushbutton is more interesting. It also has two states, but it has to react to user input and update its state accordingly, and this is where the challenge comes from, as we will shortly see. But first, let’s nail down the requirements from our component we are going to create.

Defining The Requirements For The Pushbutton

Our component will resemble a 12mm pushbutton. These buttons are very common in electronics starter kits, and come with caps in multiple colors, as you can see in the photo below:

Simon Game with Yellow, Red, Blue and Green pushbuttons
Simon Game with Yellow, Red, Blue and Green pushbuttons (Large preview)

In terms of behavior, the pushbutton should have two states: pressed and released. These are similar to the mousedown/mouseup HTML events, but we must make sure that the pushbuttons can also be used from mobile devices, and are accessible for users without a mouse.

As we will be using the state of the pushbutton as input for Arduino, there is no need to support "click" or "double click" events. It is up to the Arduino program running in the simulation to decide how to act upon the state of the button, and physical buttons do not generate click events.

If you’d like to learn more, check out a talk I held with Benjamin Gruenbaum at SmashingConf Freiburg in 2019: “Anatomy of a Click”.

To summarize our requirements, our pushbutton needs to:

  1. look similar to the physical 12mm pushbutton;
  2. have two distinct states: pressed, and released, and they should be visually discernible;
  3. support mouse interaction, mobile devices and be accessible to keyboard users;
  4. support different cap colors (at least red, green, blue, yellow, white and black).

Now that we have defined the requirements, we can start working on the implementation.

SVG For The Win

Most web components are implemented using a combination of CSS and HTML. When we need more complex graphics, we usually use raster images, in either JPG or PNG format (or GIF if you feel nostalgic).

In our case, however, we will use another approach: SVG graphics. SVG lends itself to complex graphics much more easily than CSS (yeah, I know, you can create fascinating things with CSS, but it doesn’t mean it should). But don’t worry, we are not giving up on CSS entirely. It will help us with styling the pushbuttons, and eventually even with making them accessible.

SVG has another big advantage, in comparison with raster graphics images: it is very easy to manipulate from JavaScript and can be styled through CSS. This means that we can provide a single image for the button and use JavaScript to customize the color cap, and CSS styles to indicate the state of the button. Neat, isn’t it?

Finally, SVG is just an XML document, which can be edited with text editors, and embedded directly into HTML, making it a perfect solution for creating reusable HTML components. Are you ready to draw our pushbutton?

Drawing The Pushbutton With Inkscape

Inkscape is my favorite tool for creating SVG vector graphics. It’s free and packed with powerful features, such as a large collection of built-in filter presets, bitmap tracing, and path binary operations. I started using Inkscape for creating PCB art, but in the past two years, I started using it for most of my graphic editing tasks.

Drawing the pushbutton in Inkscape is pretty straightforward. We are going to draw a top-view illustration of the button and its four metal leads that connect it to other parts, as follows:

  1. 12×12mm dark gray rectangle for the plastic case, with slightly rounded corners to make it softer.
  2. Smaller, 10.5×10.5 light gray rectangle for the metal cover.
  3. Four darker circles, one in each corner for the pins that hold the button together.
  4. A large circle in the middle, that is the contour of the button cap.
  5. A smaller circle in the middle for the top of the button cap.
  6. Four light-gray rectangles in a “T” shape for the metal leads of the button.

And the result, slightly enlarged:

Our hand-drawn Pushbutton Sketch
Our hand-drawn Pushbutton Sketch (Large preview)

As a final touch, we’ll add some SVG gradient magic to the contour of the button, to give it a 3D feel:

Adding a gradient fill for creating 3D-feel
Adding a gradient fill for creating 3D-feel (Large preview)

There we go! We have the visuals, now we need to get it to the web.

From Inkscape to Web SVG

As I mentioned above, SVGs are pretty straightforward to embed into HTML — you can just paste the content of the SVG file into your HTML document, open it in a browser, and it will be rendered on your screen. You can see it in action in the following CodePen example:

See the Pen SVG Pushbutton in HTML by @Uri Shaked

See the Pen SVG Pushbutton in HTML by @Uri Shaked

However, SVG files saved from Inkscape contain a lot of unnecessary baggage such as the Inkscape version and the window position when you last saved the file. In many cases, there are also empty elements, unused gradients and filters, and they all bloat the file size, and make it harder to work with it inside HTML.

Luckily, Inkscape can clean most of the mess for us. Here is how you do it:

  1. Go to the File menu and click on Clean up document. (This will remove unused definitions from your document.)
  2. Go again to File and click on Save as…. When saving, select Optimized SVG (*.svg) in the Save as type dropdown.
  3. You will see an “Optimized SVG Output” dialog with three tabs. Check all the options, except for “Keep editor data”, “Keep unreferenced definitions” and “Preserve manually created IDs…”.
(Large preview)

Removing all these things will create a smaller SVG file that is easier to work with. In my case, the file went from 4593 bytes down to just 2080 bytes, less than half the size. For more complex SVG files, this can be a huge saving of bandwidth and can make a notable difference in the loading time of your webpage.

The optimized SVG is also much easier to read and understand. In the following excerpt, you should be able to easily spot the two rectangles that make the body of the pushbutton:

<rect width="12" height="12" rx=".44" ry=".44" fill="#464646" stroke-width="1.0003"/>
<rect x=".75" y=".75" width="10.5" height="10.5" rx=".211" ry=".211" fill="#eaeaea"/>
<g fill="#1b1b1b">
  <circle cx="1.767" cy="1.7916" r=".37"/>
  <circle cx="10.161" cy="1.7916" r=".37"/>
  <circle cx="10.161" cy="10.197" r=".37"/>
  <circle cx="1.767" cy="10.197" r=".37"/>
</g>
<circle cx="6" cy="6" r="3.822" fill="url(#a)"/>
<circle cx="6" cy="6" r="2.9" fill="#ff2a2a" stroke="#2f2f2f" stroke-opacity=".47" stroke-width=".08"/>

You can even further shorten the code, for instance, by changing the stroke width of the first rectangle from 1.0003 to just 1. It doesn’t make a significant difference in the file size, but it makes the code easier to read.

In general, a manual pass over the generated SVG file is always useful. In many cases, you can remove empty groups or apply matrix transforms, as well as simplify gradient coordinates by mapping them from “user space on use” (global coordinates) to “object bounding box” (relative to the object). These optimizations are optional, but you get code that is easier to understand and maintain.

From this point on, we’ll put Inkscape away and work with the text representation of the SVG image.

Creating A Reusable Web Component

So far, we got the graphics for our pushbutton, ready to be inserted into our simulator. We can easily customize the color of the button by changing the fill attribute of the smaller circle, and the start color of the gradient of the larger circle.

Our next goal is to turn our pushbutton into a reusable Web Component which can be customized by passing a color attribute and reacts to user interaction (press/release events). We will use lit-element, a small library that simplifies the creation of Web Components.

lit-element excels in creating small, stand-alone component libraries. It’s built on top of the Web Components standard, which allows these components to be consumed by any web application, regardless of the framework used: Angular, React, Vue or Vanilla JS would all be able to use our component.

Creating components in lit-element is done using a class-based syntax, with a render() method that returns the HTML code for the element. A bit similar to React, if you are familiar with it. However, unlike react, lit-element uses standard Javascript tagged template literals for defining the content of the component.

Here is how you would create a simple hello-world component:

import { customElement, html, LitElement } from 'lit-element';

@customElement('hello-world')
export class HelloWorldElement extends LitElement {
  render() {
    return html`
      <h1>
        Hello, World!
      </h1>
    `;
  }
}

This component can then be used anywhere in your HTML code simply by writing <hello-world></hello-world>.

Note: Actually, our pushbutton requires just a bit more code: we need to declare an input property for the color, using the @property() decoractor (and with a default value of red), and paste the SVG code into our render() method, replacing the color of the button cap with the value of the color property (see example). The important bits are in line 5, where we define the color property: @property() color = 'red'; Also, in line 35 (where we use this property to define the fill color for the circle that makes the cap of the button), using the JavaScript template literal syntax, written as ${color}:

<circle cx="6" cy="6" r="2.9" fill="${color}" stroke="#2f2f2f" stroke-opacity=".47" stroke-width=".08" />

Making It Interactive

The last piece of the puzzle would be to make the button interactive. There are two aspects we need to consider: the visual response to the interaction as well as the programmatic response to the interaction.

For the visual part, we can simply inverse the gradient fill of the button contour, which will create the illusion the button has been pressed:

Inverting the button’s contour gradient
Inverting the button’s contour gradient (Large preview)

The gradient for the button contour is defined by the following SVG code, where ${color} is replaced with the color of the button by lit-element, as explained above:

<linearGradient id="grad-up" x1="0" x2="1" y1="0" y2="1">
  <stop stop-color="#ffffff" offset="0" />
  <stop stop-color="${color}" offset="0.3" />
  <stop stop-color="${color}" offset="0.5" />
  <stop offset="1" />
</linearGradient>

One approach for the pressed button look would be to define a second gradient, invert the order of colors, and use it as the fill of the circle whenever the button is pressed. However, there is a nice trick that allows us to reuse the same gradient: we can rotate the svg element by 180 degrees using a SVG transform:

<circle cx="6" cy="6" r="3.822" fill="url(#a)" transform="rotate(180 6 6)" />

The transformattribute tells SVG that we want to rotate the circle by 180 degrees, and that the rotation should happen about the point (6, 6) that is the center of the circle (defined by cx and cy). SVG transforms also affect the fill of the shape, and so our gradient will be rotated as well.

We only want to invert the gradient when the button is pressed, so instead of adding the transformattribute directly on the <circle>element, as we did above, we are actually going to set a CSS class for this element, and then take advantage of the fact that SVG attributes can be set through CSS, albeit using a slightly different syntax:

transform: rotate(180deg);
transform-origin: 6px 6px;

These two CSS rules do exactly the same as the transformwe had above — rotate the circle 180 degrees around its center at (6, 6). We want these rules to be applied only when the button is pressed, so we’ll add a CSS class name to our circle:

<circle class="button-contour" cx="6" cy="6" r="3.822" fill="url(#a)" />

And now we can use the :active CSS pseudo-class to apply a transform to the button-contour whenever the SVG element is clicked:

svg:active .button-contour {
  transform: rotate(180deg);
  transform-origin: 6px 6px;
}

lit-element allows us to attach a stylesheet to our component by declaring it in a static getter inside our component class, using a tagged template literal:

static get styles() {
  return css`
    svg:active .button-contour {
      transform: rotate(180deg);
      transform-origin: 6px 6px;
    }
  `;
}

Just like the HTML template, this syntax allows us to inject custom values to our CSS code, even though we don’t need it here. lit-element also takes care of creating Shadow DOM for our component, so that the CSS only affects the elements within our component and does not bleed to other parts of the application.

Now, what about the programmatic behavior of the button when pressed? We want to fire an event so that the users of our component could figure out whenever the state of the button changes. One way to do this is to listen to mousedown and mouseup events on the SVG element, and fire “button-press”/“button-release” events correspondingly. This is what it looks like with lit-element syntax:

render() {
  const { color } = this;
  return html`
    <svg
      @mousedown=${() => this.dispatchEvent(new Event('button-press'))}
      @mouseup=${() => this.dispatchEvent(new Event('button-release'))}
      ...
    </svg>
  `;
}

However, this is not the best solution, as we’ll shortly see. But first, take a quick look at the code we got so far:

import { customElement, css, html, LitElement, property } from 'lit-element';

@customElement('wokwi-pushbutton')
export class PushbuttonElement extends LitElement {
  @property() color = 'red';

  static get styles() {
    return css`
      svg:active .button-contour {
        transform: rotate(180deg);
        transform-origin: 6px 6px;
      }
    `;
  }

  render() {
    const { color } = this;
    return html` 
      <svg 
        @mousedown=${() => this.dispatchEvent(new Event('button-press'))}
        @mouseup=${() => this.dispatchEvent(new Event('button-release'))}
        width="18mm" 
        height="12mm" 
        version="1.1" 
        viewBox="-3 0 18 12"     
        xmlns="http://www.w3.org/2000/svg"
      >
        <defs>
          <linearGradient id="a" x1="0" x2="1" y1="0" y2="1">
            <stop stop-color="#ffffff" offset="0" />
            <stop stop-color="${color}" offset="0.3" />
            <stop stop-color="${color}" offset="0.5" />
            <stop offset="1" />
          </linearGradient>
        </defs>
        <rect x="0" y="0" width="12" height="12" rx=".44" ry=".44" fill="#464646" />
        <rect x=".75" y=".75" width="10.5" height="10.5" rx=".211" ry=".211" fill="#eaeaea" />
        <g fill="#1b1b1">
          <circle cx="1.767" cy="1.7916" r=".37" />
          <circle cx="10.161" cy="1.7916" r=".37" />
          <circle cx="10.161" cy="10.197" r=".37" />
          <circle cx="1.767" cy="10.197" r=".37" />
        </g>
        <g fill="#eaeaea">
          <path d="m-0.3538 1.4672c-0.058299 0-0.10523 0.0469-0.10523 0.10522v0.38698h-2.1504c-0.1166 0-0.21045 0.0938-0.21045 0.21045v0.50721c0 0.1166 0.093855 0.21045 0.21045 0.21045h2.1504v0.40101c0 0.0583 0.046928 0.10528 0.10523 0.10528h0.35723v-1.9266z" /> 
          <path d="m-0.35376 8.6067c-0.058299 0-0.10523 0.0469-0.10523 0.10523v0.38697h-2.1504c-0.1166 0-0.21045 0.0939-0.21045 0.21045v0.50721c0 0.1166 0.093855 0.21046 0.21045 0.21046h2.1504v0.401c0 0.0583 0.046928 0.10528 0.10523 0.10528h0.35723v-1.9266z" />
          <path d="m12.354 1.4672c0.0583 0 0.10522 0.0469 0.10523 0.10522v0.38698h2.1504c0.1166 0 0.21045 0.0938 0.21045 0.21045v0.50721c0 0.1166-0.09385 0.21045-0.21045 0.21045h-2.1504v0.40101c0 0.0583-0.04693 0.10528-0.10523 0.10528h-0.35723v-1.9266z" />
          <path d="m12.354 8.6067c0.0583 0 0.10523 0.0469 0.10523 0.10522v0.38698h2.1504c0.1166 0 0.21045 0.0938 0.21045 0.21045v0.50721c0 0.1166-0.09386 0.21045-0.21045 0.21045h-2.1504v0.40101c0 0.0583-0.04693 0.10528-0.10523 0.10528h-0.35723v-1.9266z" />
        </g>
        <g>
          <circle class="button-contour" cx="6" cy="6" r="3.822" fill="url(#a)" />
          <circle cx="6" cy="6" r="2.9" fill="${color}" stroke="#2f2f2f" stroke-opacity=".47" stroke-width=".08" />
        </g>
      </svg>
    `;
  }
}

You can click each of the buttons and see how they react. The red one even has some event listeners (defined in index.html), so when you click on it you should see some messages written to the console. But wait, what if you want to use the keyboard instead?

Making The Component Accessible And Mobile-Friendly

Hooray! We created a reusable pushbutton component with SVG and lit-element!

Before we sign off on our work, there are a few issues we should look at. First, the button is not accessible to people who use the keyboard. In addition, the behavior on mobile is inconsistent — the buttons do appear pressed when you hold your finger on them, but the JavaScript events are not fired if you hold your finger for more than one second.

Let’s start by tackling the keyboard issue. We could make the button keyboard-accessible by adding a tabindex attribute to the svg element, making it focusable. A better alternative, in my opinion, is just to wrap the button with a standard <button> element. By using the standard element, we also make it play nicely with screen readers and other assistive technology.

This approach has one drawback through, as you can see below:

Our pretty component encaged inside a button element
Our pretty component encaged inside a <button> element. (Large preview)

The <button> element comes with some built-in styling. This could easily be fixed by applying some CSS to remove these styles:

button {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  text-decoration: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

button:active .button-contour {
  transform: rotate(180deg);
  transform-origin: 6px 6px;
}

Note that we also replaced the selector that inverts the grid of the buttons’ contour, using button:activein place of svg:active. This ensures that the button-pressed style applies whenever the actual <button> element is pressed, regardless of the input device used.

We can even make our component more screen-reader friendly by adding an aria-label attribute that includes the color of the button:

<button aria-label="${color} pushbutton">

There is still one more thing to tackle: the “button-press” and “button-release” events. Ideally, we want to fire them based on the CSS :active pseudo-class of the button, just like we did in the CSS above. In other words, we would like to fire the “button-press” event whenever the button becomes :active, and the “button-release” event to fire whenever it is :not(:active).

But how do you listen to a CSS pseudo-class from Javascript?

Turns out, it is not so simple. I asked this question to the JavaScript Israel community, and eventually dug up one idea that worked out of the endless thread: use the :activeselector to trigger a super-short CSS animation, and then I can listen to it from JavaScript using the animationstart event.

A quick CodePen experiment proved that this actually works reliably. As much as I liked the sophistication of this idea, I decided to go with a different, simpler solution. The animationstart event isn’t available on Edge and iOS Safari, and triggering a CSS animation just for detecting the change of the button state doesn’t sound like the right way to do things.

Instead, we’re going to add three pairs of event listeners to the <button> element: mousedown/mouseup for the mouse, touchstart/touchend for mobile devices, and keyup/keydown for the keyboard. Not the most elegant solution, in my opinion, but it does the trick and works on all browsers.

<button
  aria-label="${color} pushbutton"
  @mousedown=${this.down}
  @mouseup=${this.up}
  @touchstart=${this.down}
  @touchend=${this.up}
  @keydown=${(e: KeyboardEvent) => e.keyCode === SPACE_KEY && this.down()}
  @keyup=${(e: KeyboardEvent) => e.keyCode === SPACE_KEY && this.up()}
>

Where SPACE_KEY is a constant that equals 32, and up/down are two class methods that dispatch the button-press and button-release events:

@property() pressed = false;

private down() {
  if (!this.pressed) {
    this.pressed = true;
    this.dispatchEvent(new Event('button-press'));
  }
}

private up() {
  if (this.pressed) {
    this.pressed = false;
    this.dispatchEvent(new Event('button-release'));
  }
}
  • You can find the full source code here.

We Did It!

It was a pretty long journey that started with outlining the requirements and drawing the illustration for the button in Inkscape, went through converting our SVG file to a reusable web component using lit-element, and after making sure it’s accessible and mobile-friendly, we ended up with nearly 100 lines of code of a delightful virtual pushbutton component.

This button is just a single component in an open-source library of virtual electronic components I’m building. You are invited to peek at the source code, or check out the online Storybook where you can see and interact with all the available components.

And finally, if you are interested in Arduino, take a look at the programming Simon for Arduino course I’m currently building, where you can also see the pushbutton in action.

Till next time, then!

Smashing Editorial (dm, il)

The 10 Best Newsletters for Videographers

No matter what type of video projects you’re working on, one thing is certain: you need to continually hone your skills if you want to stay on top of current trends and provide your clients with the best possible experience.

Not only that, but if you’re working as an independent contractor, you need to know how to protect and grow your business so you can avoid the feast and famine cycle and have a steady stream of clients month after month.

You also need to stay on top of new software and equipment and one of the best ways to do that is by subscribing to industry newsletters.

We’ve gathered the best newsletters for videographers that will help you grow your business, hone your skills, and even deliver a few freebies for all your video projects.

1. Pond5

Pond5 is a giant resource for royalty-free video footage and music library. Their newsletter gives you access to exclusive promotions, their huge library of video and audio assets, and inspirational content to get your creative juices flowing.

Pond5 newsletter video videographer

2. RocketStock

On this site, you’ll find various design assets and After Effects templates for all your video editing needs. When you join their newsletter, you’ll get an exclusive set of After Effects templates that you can use in your projects immediately as well as a freebie file every month.

RocketStock newsletter video videographer

3. RampantDesignTools

This newsletter will give you an exclusive discount on RampantDesign effects and exclusive access to 4K products. Perfect if you’re looking to expand your video editing library.

RampantDesignTools newsletter video videographer

4. CreativePlanet Network

Creative Planet Network offers a few options with their newsletter, depending on your needs. You can sign up for a weekly digest or go more granular and sign up for specific videography news.

CreativePlanet Network newsletter video videographer

5. GroundControl

GroundControl has an impressive number of LUTS for all your video editing applications and needs. They also offer free LUTS which you can get when you sign up for their newsletter.

GroundControl newsletter video videographer

6. Tao Of Color

If you want to learn more about color grading, this newsletter is the perfect choice. Delivered every Sunday morning, you’ll get news and tips about the craft and business of Digital Color Grading.

7. Digital Production Buzz

This site is the go-to resource for video production news, interviews, and insights. When you sign up for their weekly newsletter, you’ll get exclusive tutorials, tips, and links to their excellent weekly podcast.

Digital Production Buzz newsletter video videographer

8. Studio Daily

Studio Daily is the leading website for all things related to digital content creation. Sign up for their newsletter that features a mix of original reporting, expert reviews and tutorials, interviews with leading creatives, and new creative techniques.

Studio Daily newsletter video videographer

9. Photography & Video Tutorials Envato Tuts Plus

Envato Tuts Plus has a wealth of tips and tricks for mastering video editing software as well as new techniques you can use. Their weekly newsletter is a summary of video and motion design tutorials so you don’t have to worry about missing them.

Photography Video Tutorials Envato Tuts Plus newsletter video videographer

10. Videomaker

If you want to learn more about making, producing, and editing videos, this newsletter will be right up your alley. You’ll get advice straight from the experts, industry news and informative articles about video-related products, tips, and exclusive discounts.

Videomaker newsletter video videographer

Final Thoughts

If you want to stay on top of industry news or simply get your hands on cool and free assets to use in your video projects, subscribing to various industry newsletters is a great idea. The newsletters in this collection will help you with tons of tutorials and free resources so be sure to join them.

The post The 10 Best Newsletters for Videographers appeared first on Speckyboy Design Magazine.

Weekly News for Designers № 523

Envato Elements

See the Sound: Audio Visualization CSS & JavaScript Code Snippets – A collection of scripts that bring a visual element to sound.
Example from See the Sound: Audio Visualization CSS & JavaScript Code Snippets

How CSS Grid changes the way we think about structuring our content – Why using CSS Grid can simplify page layout.
Example from How CSS Grid changes the way we think about structuring our content

The Split Personality Of Brutalist Web Development – Do you know brutalist design when you see it?
Example from The Split Personality Of Brutalist Web Development

The Emotional Rollercoaster of Being a Web Designer – A career in design can present some serious emotional challenges.
Example from The Emotional Rollercoaster of Being a Web Designer

All Design Conferences – Find a conference worth attending with this simple list.
Example from All Design Conferences

calcolor – A reference tool that provides each color with its own page, along with matching colors and variants.
Example from calcolor

7 UI trends you should be watching in 2020 – Here are the trends that will lead us into the new decade.
Example from 7 UI trends you should be watching in 2020

Here’s the typography of the next decade – Why Didone fonts will rule the 2020s.
Example from Here’s the typography of the next decade

SPELLL – A spelling and grammar checker for Figma.
Example from SPELLL

25 Free Sets of Brushes for Procreate App – Enhance your mobile art projects with these awesome free brushes.
Example from 25 Free Sets of Brushes for Procreate App

25 Procreate Tutorials for Drawings, Illustrations, Paintings, and More – Use these resources to master the Procreate mobile art app.
Example from 25 Procreate Tutorials for Drawings, Illustrations, Paintings, and More

KPI is an imperative tool for UX designers – Learn how Key Performance Indicator (KPI) can help you measure the success of your UX.
Example from KPI is an imperative tool for UX designers

The Auto-Flowing Powers of Grid’s Dense Keyword – How to use grid-auto-flow: dense to keep a layout intact, no matter how much content is there.
Example from The Auto-Flowing Powers of Grid’s Dense Keyword

beedii – A free, hand-drawn emoji font.
Example from beedii

SleekBundle – Get high-quality vector graphics for your projects, with free assets added weekly.
Example from SleekBundle

126, 24×24 Icon giveaway – A free set of beautiful vector icons, with versions for light and dark backgrounds.
Example from 126, 24x24 Icon giveaway

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

20 Free High-Resolution T-Shirt Mockup PSD Templates for Designers

There was a time when apparel designers would have to actually print their illustrations and designs directly onto a t-shirt, just to test how it looked. Now, with Photoshop and pre-designed mockup templates, designers can rapidly create ‘live’ samples, in real-world scenarios, without ever having to leave the comfort of their desks.

T-shirt mockups are truly a cost-effective and time-saving method for testing and showcasing your designs before having to go to print or full production.

The free high-resolution t-shirt mockup templates we have for you today will allow you to give your t-shirt design a photorealistic result in mere minutes. They’re all in Photoshop PSD format, most will even allow you to change the t-shirt color, and all you have to do is place your artwork into the Smart Object, and save. It’s that simple!

If you’re looking for some more mockup templates, we’ve previously published collections of free corporate identity mockup templates and you’ll find a further 100 high resolution mockup templateshere.

The Product Mockup Toolbox
Unlimited Downloads: 1,000,000+ Mockup Templates, Branding Templates, Print Templates, Design Assets, and more!

Front, Back & Folded T-shirt Mockup (Free)

With this free mockup, you will be able to show off the front, back, and how the shirt looks when folded. At this price point the choice is simple, get it and you’re done!

Free Front Back Folded T-shirt Mockup Photoshop PSD

Realistic T-Shirt Mockup Templates (with Envato Elements)

Save time and energy by using this t-shirt mockup template. With 6 different views for men and women, you will be able to showcase your designs on people, and have time for coffee.

Realistic T-Shirt Mockup Templates Photoshop PSD

Woman’s T-Shirt Mockup Template (Free)

This mockup pack includes 5 high quality t-shirt mockups that will allow you to demonstrate your designs like a professional. Get your final versions of a photorealistic mockup in seconds.

Free Woman T-Shirt Mockup Template Photoshop PSD

Photorealistic 4K T-Shirt Mockups (with Envato Elements)

Save time and money with this photorealistic t-shirt mockup pack. Use the 3D design mapping to get your designs perfectly aligned and make them look perfect on any device with their 4k resolution.

Photorealistic 4K T-Shirt Mockups Photoshop PSD

Baby T-Shirt PSD Mockup (Free)

This is the perfect baby apparel mockup back for showing off your designs. Get 6 different angles that will allow you to show off just what you need to and easily change the colors and details to match your design.

Free Baby T-Shirt PSD Mockup Photoshop PSD

T-Shirt Mockup 04 (with Envato Elements)

This mockup will save you time and money with its one click design changes and high resolution images. This resource is perfect for promoting your designs on platforms like Amazon Merch or Tee-spring.

T-Shirt Mockup 04 Photoshop PSD

T-Shirt PSD Mockup with Changeable Background (Free)

This mockup allows you to showcase your designs on a persona and in any color that you want! With an easy way to get your designs onto the shirt and filters that you can use; this mockup pack is an excellent choice!

Free T-Shirt PSD Mockup with Changeable Background Photoshop PSD

Women’s T-Shirt Mockups (with Envato Elements)

This time saving t-shirt mockup gives you the best way to simply and beautifully showcase your t-shirt designs for womens apparel. Features include 3D mapping and a 4k resolution, this resource will bring your designs to life.

Women T-Shirt Mockups Photoshop PSD

T-Shirt Mockup Templates (Free)

This t-shirt mockup is ideal to showcase your designs on any t-shirt color. With the design files as a vector file; you will be able to manipulate the view and always make it look nice.

Free T-Shirt Mockup Templates Photoshop PSD

T-Shirt Mockup 6.0 (with Envato Elements)

This t-shirt mockup will save you time and energy by showcasing your designs on both male and female models. This mockup has a one click design change and is perfect for light and dark designs.

T-Shirt Mockup Photoshop PSD

I am Creator T-Shirt Mockup Template (Free)

This mockup template includes everything you need to present your t-shirts in the best possible light. Includes a helpful pdf and video tutorials.

Free I am Creator T-Shirt Mockup Template Photoshop PSD

PSD T-Shirt Mockup Template (Free)

This t-shirt mockup gives you a colorful array to showcase your t-shirt designs. Simple, clean looking, and easy to use; this mockup pack delivers just what you need.

Free PSD T-Shirt Mockup Template Photoshop PSD

T-Shirt Tag/Logo Mockup Template (Free)

This mockup features a simple and easy way to showcase your logo designs on the tags of t-shirts. The file includes smart layers in the PSD file, and has a 3000x2400px resolution.

Free T-shirt Tag Logo Mockup Template Photoshop PSD

T-Shirt Mockup Design (Free)

This t-shirt mockup is perfect to show your designs. Paste your designs onto the shirts with Adobe Photoshop.

Free T-Shirt Mockup Design Photoshop PSD

Men’s T-Shirt MockUp (Free)

This t-shirt mockup is great for showcasing your apparel designs on men’s shirts. It’s ideal for creating a photorealistic display. Included with the PSD, are smart features like folds displacement mapping and filter actions.

Free Men's T-Shirt MockUp Photoshop PSD

Folded T-Shirt Mockup Template (Free)

This t-shirt mockup gives you several different perspectives of folded shirts. You can easily change the shirt color and add graphics with the smart layer.

Free Folded T-Shirt Mockup Template Photoshop PSD

Stunning Tee Shirt Mockup (Free)

This mockup pack is specially designed to present your designs quickly and professionally. Showcase your design on the shirt, in a box, and at 300DPI. The smart object option allows you to fully customize every aspect of the mockup.

Free Stunning Tee Shirt Mockup Photoshop PSD

T-Shirt Mockup Templates (Free)

This t-shirt mock up displays your t-shirt designs alongside other clothing articles. Quickly and easily change your designs using the smart object layer.

Free T-Shirt Mockup Templates Photoshop PSD

Ultimate Apparel T-Shirt Mockup Template (Free)

This t-shirt mock up has 5 fully customizable PSD scenes from a flat lay to models. This mockup is easy to use, and includes a help file. Get your designs ready!

Free Ultimate Apparel T-Shirt Mockup Template Photoshop PSD

Tank Top PSD Mockup Templates (Free)

Show off your tank top designs using this mockup template. The summer background adds a nice touch which makes it easy to visualize how the finished tee will look.

Free Tank Top PSD Mockup Templates Photoshop PSD

T-Shirt Mockup 2 (Free)

If you need a closeup mockup to present your t-shirt design, look no further than this template. The template is easy to edit thanks to smart layers.

Free T-Shirt Mockup Photoshop PSD

Longline T-Shirt Mockup (Free)

Thanks to this longline t-shirt mockup, you can easily showcase large designs. The template makes it easy to edit colors on the shirt and place your design via smart layers and objects.

Free Longline T-Shirt Mockup Photoshop PSD

Folded PSD Sweatshirt Mockup (Free)

Show off your sweatshirts with this folded sweatshirt mockup. You can easily change the sweatshirt color and add your graphics with the smart layers.

Free Folded PSD Sweatshirt Mockup Photoshop PSD

T-Shirt Mockup Templates (Free)

This t-shirt mockup is perfect if you want to showcase a company logo. You can drop in the design via smart objects and quickly change the color of the shirt.

Free T-Shirt Mockup Templates Photoshop PSD

Red T-Shirt Mockup PSD (Free)

If you need a color shirt design take a look at this template. It comes in red color but you can easily change it to match your needs and then use smart layers to add your design.

Free Red T-Shirt Mockup PSD Photoshop PSD

Photorealistic T-Shirt Mockup Templates (Free)

Showcase your wearable designs in the best possible light with this mockup file. With the ability to edit specific layers, you will be able to change the background and give it a texture that best suits your t-shirts!

Free Photorealistic T-Shirt Mockup Templates Photoshop PSD


Whether you’re designing the front of the shirt, the back or both front and back, there is no doubt that a high-resolution t-shirt mockup will allow you to showcase your design in the best possible light. Use the mockups on this list to help your clients or customers visualize how the t-shirt will look once printed and worn.

The post 20 Free High-Resolution T-Shirt Mockup PSD Templates for Designers appeared first on Speckyboy Design Magazine.

20 Free High-Resolution T-Shirt Mockup PSD Templates for Designers

There was a time when apparel designers would have to actually print their illustrations and designs directly onto a t-shirt, just to test how it looked. Now, with Photoshop and pre-designed mockup templates, designers can rapidly create ‘live’ samples, in real-world scenarios, without ever having to leave the comfort of their desks.

T-shirt mockups are truly a cost-effective and time-saving method for testing and showcasing your designs before having to go to print or full production.

The free high-resolution t-shirt mockup templates we have for you today will allow you to give your t-shirt design a photorealistic result in mere minutes. They’re all in Photoshop PSD format, most will even allow you to change the t-shirt color, and all you have to do is place your artwork into the Smart Object, and save. It’s that simple!

If you’re looking for some more mockup templates, we’ve previously published collections of free corporate identity mockup templates and you’ll find a further 100 high resolution mockup templateshere.

The Product Mockup Toolbox
Unlimited Downloads: 1,000,000+ Mockup Templates, Branding Templates, Print Templates, Design Assets, and more!

Front, Back & Folded T-shirt Mockup (Free)

With this free mockup, you will be able to show off the front, back, and how the shirt looks when folded. At this price point the choice is simple, get it and you’re done!

Free Front Back Folded T-shirt Mockup Photoshop PSD

Realistic T-Shirt Mockup Templates (with Envato Elements)

Save time and energy by using this t-shirt mockup template. With 6 different views for men and women, you will be able to showcase your designs on people, and have time for coffee.

Realistic T-Shirt Mockup Templates Photoshop PSD

Woman’s T-Shirt Mockup Template (Free)

This mockup pack includes 5 high quality t-shirt mockups that will allow you to demonstrate your designs like a professional. Get your final versions of a photorealistic mockup in seconds.

Free Woman T-Shirt Mockup Template Photoshop PSD

Photorealistic 4K T-Shirt Mockups (with Envato Elements)

Save time and money with this photorealistic t-shirt mockup pack. Use the 3D design mapping to get your designs perfectly aligned and make them look perfect on any device with their 4k resolution.

Photorealistic 4K T-Shirt Mockups Photoshop PSD

Baby T-Shirt PSD Mockup (Free)

This is the perfect baby apparel mockup back for showing off your designs. Get 6 different angles that will allow you to show off just what you need to and easily change the colors and details to match your design.

Free Baby T-Shirt PSD Mockup Photoshop PSD

T-Shirt Mockup 04 (with Envato Elements)

This mockup will save you time and money with its one click design changes and high resolution images. This resource is perfect for promoting your designs on platforms like Amazon Merch or Tee-spring.

T-Shirt Mockup 04 Photoshop PSD

T-Shirt PSD Mockup with Changeable Background (Free)

This mockup allows you to showcase your designs on a persona and in any color that you want! With an easy way to get your designs onto the shirt and filters that you can use; this mockup pack is an excellent choice!

Free T-Shirt PSD Mockup with Changeable Background Photoshop PSD

Women’s T-Shirt Mockups (with Envato Elements)

This time saving t-shirt mockup gives you the best way to simply and beautifully showcase your t-shirt designs for womens apparel. Features include 3D mapping and a 4k resolution, this resource will bring your designs to life.

Women T-Shirt Mockups Photoshop PSD

T-Shirt Mockup Templates (Free)

This t-shirt mockup is ideal to showcase your designs on any t-shirt color. With the design files as a vector file; you will be able to manipulate the view and always make it look nice.

Free T-Shirt Mockup Templates Photoshop PSD

T-Shirt Mockup 6.0 (with Envato Elements)

This t-shirt mockup will save you time and energy by showcasing your designs on both male and female models. This mockup has a one click design change and is perfect for light and dark designs.

T-Shirt Mockup Photoshop PSD

I am Creator T-Shirt Mockup Template (Free)

This mockup template includes everything you need to present your t-shirts in the best possible light. Includes a helpful pdf and video tutorials.

Free I am Creator T-Shirt Mockup Template Photoshop PSD

PSD T-Shirt Mockup Template (Free)

This t-shirt mockup gives you a colorful array to showcase your t-shirt designs. Simple, clean looking, and easy to use; this mockup pack delivers just what you need.

Free PSD T-Shirt Mockup Template Photoshop PSD

T-Shirt Tag/Logo Mockup Template (Free)

This mockup features a simple and easy way to showcase your logo designs on the tags of t-shirts. The file includes smart layers in the PSD file, and has a 3000x2400px resolution.

Free T-shirt Tag Logo Mockup Template Photoshop PSD

T-Shirt Mockup Design (Free)

This t-shirt mockup is perfect to show your designs. Paste your designs onto the shirts with Adobe Photoshop.

Free T-Shirt Mockup Design Photoshop PSD

Men’s T-Shirt MockUp (Free)

This t-shirt mockup is great for showcasing your apparel designs on men’s shirts. It’s ideal for creating a photorealistic display. Included with the PSD, are smart features like folds displacement mapping and filter actions.

Free Men's T-Shirt MockUp Photoshop PSD

Folded T-Shirt Mockup Template (Free)

This t-shirt mockup gives you several different perspectives of folded shirts. You can easily change the shirt color and add graphics with the smart layer.

Free Folded T-Shirt Mockup Template Photoshop PSD

Stunning Tee Shirt Mockup (Free)

This mockup pack is specially designed to present your designs quickly and professionally. Showcase your design on the shirt, in a box, and at 300DPI. The smart object option allows you to fully customize every aspect of the mockup.

Free Stunning Tee Shirt Mockup Photoshop PSD

T-Shirt Mockup Templates (Free)

This t-shirt mock up displays your t-shirt designs alongside other clothing articles. Quickly and easily change your designs using the smart object layer.

Free T-Shirt Mockup Templates Photoshop PSD

Ultimate Apparel T-Shirt Mockup Template (Free)

This t-shirt mock up has 5 fully customizable PSD scenes from a flat lay to models. This mockup is easy to use, and includes a help file. Get your designs ready!

Free Ultimate Apparel T-Shirt Mockup Template Photoshop PSD

Tank Top PSD Mockup Templates (Free)

Show off your tank top designs using this mockup template. The summer background adds a nice touch which makes it easy to visualize how the finished tee will look.

Free Tank Top PSD Mockup Templates Photoshop PSD

T-Shirt Mockup 2 (Free)

If you need a closeup mockup to present your t-shirt design, look no further than this template. The template is easy to edit thanks to smart layers.

Free T-Shirt Mockup Photoshop PSD

Longline T-Shirt Mockup (Free)

Thanks to this longline t-shirt mockup, you can easily showcase large designs. The template makes it easy to edit colors on the shirt and place your design via smart layers and objects.

Free Longline T-Shirt Mockup Photoshop PSD

Folded PSD Sweatshirt Mockup (Free)

Show off your sweatshirts with this folded sweatshirt mockup. You can easily change the sweatshirt color and add your graphics with the smart layers.

Free Folded PSD Sweatshirt Mockup Photoshop PSD

T-Shirt Mockup Templates (Free)

This t-shirt mockup is perfect if you want to showcase a company logo. You can drop in the design via smart objects and quickly change the color of the shirt.

Free T-Shirt Mockup Templates Photoshop PSD

Red T-Shirt Mockup PSD (Free)

If you need a color shirt design take a look at this template. It comes in red color but you can easily change it to match your needs and then use smart layers to add your design.

Free Red T-Shirt Mockup PSD Photoshop PSD

Photorealistic T-Shirt Mockup Templates (Free)

Showcase your wearable designs in the best possible light with this mockup file. With the ability to edit specific layers, you will be able to change the background and give it a texture that best suits your t-shirts!

Free Photorealistic T-Shirt Mockup Templates Photoshop PSD


Whether you’re designing the front of the shirt, the back or both front and back, there is no doubt that a high-resolution t-shirt mockup will allow you to showcase your design in the best possible light. Use the mockups on this list to help your clients or customers visualize how the t-shirt will look once printed and worn.

The post 20 Free High-Resolution T-Shirt Mockup PSD Templates for Designers appeared first on Speckyboy Design Magazine.

Scan Dimension updates SOL 3D scanner software

Scan Dimension, a 3D scanner developer with offices in the U.S. and Denmark, has announced an update to the software for its SOL 3D scanner. The update provides a number of new and improved features for the scanner, including improved scanning speed, and support for the latest macOS Catalina 10.15. Versions of the software for […]

3D Systems launches Figure 4 3D printing platform optimized for jewelry production

American 3D printer OEM 3D Systems has announced a new jewelry production solution for its Figure 4 3D printing platform. Designed for the 3D printed jewelry market, Figure 4 Jewelry consists of 3D systems’ hardware, software and materials optimized for providing high accuracy, fine-feature details and smooth surface finishes.  Included within the Figure 4 Jewelry […]

All Things Smashing: Monthly Update

All Things Smashing: Monthly Update

All Things Smashing: Monthly Update

Iris Lješnjanin

We can’t repeat enough how wonderful the web performance community is! There are good folks who help make the web faster, and their efforts matter indeed. With the new year sinking in and everyone’s resolutions still being put to the test, personal goals such as reproducing bugs and fixing issues suddenly become something we all have in common: improving the web for everyone involved.

As various areas of performance become more and more sophisticated and complicated throughout the years, Vitaly refines and updates his front-end performance checklist every year. This guide covers pretty much everything from performance budgets to single-page apps to networking optimizations. It has proved to be quite useful to folks in the past years — anyone can edit it (PDF, MS Word Doc and Apple Pages) and adjust it to their own personal needs or even use it for their organization.

Now, without further ado, let’s see what’s been cooking at Smashing!

Exciting Times: New Smashing Book

Upcoming Smashing Book: Ethical Design Handbook

Are you ready for the next Smashing book? Well, just like all the printed books we’ve published, each and every is crafted to deliver in-depth knowledge and expertise shared by experts and practitioners from the industry. The Ethical Design Handbook will not be any different. Written by Trine Falbe, Martin Michael Frederiksen and Kim Andersen, the book will be pre-released late January.

As always, there will be a pre-order discount available. We expect to ship printed hardcover copies late February, but in the meantime, feel free to subscribe to the book mailing list to be one of the first folks to get your hands on the book!

Less Speaking, More Time For Questions

Our SmashingConfs are known to be friendly, inclusive events where front-end developers and designers come together to attend live sessions and hands-on workshops. From live designing to live debugging, we want you to ask speakers anything — from naming conventions to debugging strategies. For each talk, we’ll have enough time to go into detail, and show real examples from real work on the big screen.

A photo of Dan Mall standing on stage explaining code shown on the screen behind him
Dan Mall, Brad Frost and Ian Frost coding live on stage at SmashingConf in NYC. (Image credit: Drew McLellan) (Watch video)

If you’re eager not to miss out on one of our SmashingConfs, then early-bird tickets are still available. And if you need a lil’ help convincing your boss to send you to an event, let us know! We’ve got your back. 😉

A Taste Of Smashing… Offscreen

Smashing Podcast moderated by Drew McLellanWe’ve reached our 7th episode of the Smashing Podcast! We’re so proud and thrilled to have our dear friends and colleagues, Drew McLellan and Bethany Andrew, managing the bi-weekly interview show so brilliantly! The feedback has been overwhelmingly positive, and now we’re excited for many more!

Shining The Spotlight On TypeScript

Smashing TVIn less than two weeks (Jan. 29), we’ll be hosting a Smashing TV webinar with Stefan Baumgartner who’ll shed light on what type-checking has in store for folks creating and using the web. TypeScript has been one of the most hyped technologies in 2019 — it’s now time to look beyond the hype!

Mark your calendars and join us at 17:00 London time — we’d love to hear your thoughts and experiences you’ve had in your career.

We publish a new article every day on various topics that are current in the web industry. Here are some that our readers seemed to enjoy the most and have recommended further:

Best Picks From Our Newsletter

With the start of a brand-new decade, we decided to start off with topics dedicated to web performance. There are so many talented folks out there working on brilliant projects, and we’d love to spread the word and give them the credit they deserve!

Note: A huge thank you to Cosima Mielke for writing and preparing these posts!

Which Metrics Matter Most?

First Meaningful Paint, Time to Interactive, First Input Delay, SpeedIndex. With so many performance metrics floating around, it’s not easy to strike just the right balance for a project. And most of the time, these metrics alone will be too generic and not precise enough, so we’ll need to complement them with custom ones as well. In small and large companies it’s common to define important pixels in the UI, measure how fast we can start render them, and how quickly we can provide input responsiveness for them.

Every project could benefit from a mix of at least 4 metrics. Time To Interactive (TTI) is the key metrics for understanding how much wait a user has to experience to use the site without a lag. First Input Delay (FID) complements TTI very well as it describes the missing part of the picture: what happens when a user actually interacts with the site.

A graph showing JavaScript fetch, parse, and compile loading phases
JavaScript fetch, parse, and compile loading phases (Image credit)

Total Blocking Time (TBT) helps quantify the severity of how non-interactive a page is prior to it becoming reliably interactive. And Cumulative Layout Shift (CLS) highlights how often users experience unexpected layout shifts (reflows) when accessing the site. All these metrics will appear in Lighthouse v6 as it starts rolling out in 2020.

Additionally, you can look into FrustrationIndex that looks at the gaps between metrics instead of looking at them individually, ad weight impact and Component-Level CPU costs. Note that First Meaningful/Contentful Paint are being replaced with Largest Contentful Paint, and the role of SpeedIndex has decreased with new metrics showing up.

The Impact Of Performance Optimization

It’s no secret that performance has a direct impact on user experience and business metrics and that sometimes, even a seemingly small web performance optimization like shaving off a few milliseconds load time can lead to a better conversion rate. To demonstrate this impact, WPO Stats collects case studies and experiments from products and e-commerce sites — stories of successes and of things that went wrong. Inspiring!

UX Speed Calculator
An open-source visualization tool that helps explain the relationship between page speed, conversion and bounce rates. (Image credit)

To support your performance optimizations with some hard figures and help you better grasp their impact, Sergey Chernyshev built the UX Speed Calculator. It lets you see how speed distribution, error rate, bounce rate, and conversion rate intertwine for the values you enter. A handy little helper.

Automatically Compress The Images In Your PRs

Image optimization is probably one of the easiest tasks on your performance optimization checklist. However, if you have a lot of images to optimize, it can also take up quite some time, and in the hurry, some images might even make it into production skipping this step.

Image Actions
“State of the Web: Video Playback Metrics” by Doug Sillars (Image credit)

To change that, the team at Calibre built a GitHub action that automatically compresses all the JPEGs, PNGs, and WebP images in your pull requests. It’s fast, efficient, and, for near-lossless compression, it uses the best image compression algorithms available: mozjpeg and libvips. A real timesaver.

Resources To Stay On Top Of Performance

A lot of people in the web community are committed to performance and to helping spread the word about it. One of them is Tim Kadlec. In his podcast Chasing Waterfalls, he invites people who work to make the web faster for everyone. Three episodes have already been released, with Reefath Rajali sharing insights into PayPal’s performance journey, Malek Kalim exploring how to scale a culture of performance across an organization, and Katie Hempenius talking about performance budgets, third-party challenges, JavaScript, and a lot of other things that impact performance.

Chasing Waterfalls podcast hosted by Tim Kadlec
Conversations with the people working to make the web faster for everyone, hosted by Tim Kadlec. (Image credit)

Another handy resource to keep you on top of web performance comes from Ben Schwarz and Karolina Szczur. Together they curate the Performance Newsletter, delivering web performance tools, talks, and other resources to your inbox twice a month. There’s also an archive of previous newsletter issues for you to catch up on until the next issue will be sent out.

Each and every issue of the Smashing Newsletter is written and edited with love and care. No third-party mailings or hidden advertising — you’ve got our word.

Smashing Editorial (cm, vf, ra, il)

Things That Will Scare Your Web Design Clients

Dealing with concerned clients can be a challenge for numerous reasons. I liken it to running around with a fire extinguisher, desperately trying to put out blazes large and small. But it’s not just the panicky ones who need the occasional dousing. And it’s not necessarily their fault.

The web can be a scary place – even for seasoned designers. Trying to wrap our heads around privacy issues, security, accessibility and new technologies can make anyone’s head spin. So, just think of what they can do to the people who depend on us for help.

In some ways, it’s even worse for our clients. Why? Because there are any number of bad actors out there who are constantly trying to trick them, hack their site or otherwise extort a few extra dollars. Not to mention the perfectly legitimate things that, while innocent enough, can put a non-techie into a cold sweat.

With that in mind, here are a few items that tend to put even cool clients into panic mode. But don’t worry. Each one includes some tips for talking them off the emotional ledge.

Mysterious Spam Invoices

If you own a website, or even a domain, odds are you’re going to start receiving all manner of nuisance messages. Whether they appear in your inbox or your postal mail, their aim is to get you to spend money – often out of fear.

One of the more famous examples of this are phony domain registration renewals. A company (if you can call it that) will send a letter that looks like an invoice, claiming the client’s domain name is about to expire. It will probably mention all the terrible things that can happen if they don’t renew this instant. And, oh yeah, the cost is massively marked up.

The only trouble is that your client has never heard of this company. So naturally, they’ll ask you about it. They may wonder if they’ve missed the deadline and why the price is suddenly higher. Have they already lost the domain? What will happen to their business?

Honorable mention goes out to those great “let me fix your website” emails that show up regularly. But they’re only kind of scary.

What to Do

When your client comes to you with a scam message, tell them so. But also tell them, if necessary, who their domain registrar is and why it’s important to have that information on file. It’s a great chance to educate them.

Man looking at a laptop computer.

Red Alerts from Google Search Console

No, it’s not just spam that gets a client’s heart racing. The emails sent out by Google Search Console can be even more frightening.

The search/email/operating system/home device/phone/world-dominating giant has been known to inundate our inboxes with all sorts of “helpful” messages about our websites. Sometimes it thinks buttons are too close together or text is too small. In other instances, it complains about missing attributes within breadcrumb links.

That’s not to say these messages can’t point out some legitimate website issues. But often, it’s more likely to cause the recipient to worry about something that is realistically harmless. Worse yet, it gets forwarded to a web designer, who suddenly needs another glass of wine.

What to Do

Whatever rubbish Google sends, it should still be looked into – just in case. Still, it’s worth mentioning that these messages need to be taken with a grain of salt. Clients shouldn’t worry that their site won’t be indexed or that they’re somehow being punished by an algorithm.

Let them know that Google’s automated tools can often focus on the minutiae. And, while you’ll be glad to review the issue, it most likely isn’t a major concern.

Google sign.

The Cache Trap

Raise your hand if you’ve ever had a client request a change, which you make, and receive a message back stating that they “can’t see it”.

Even though I can’t see you (Google probably can, though), I’d expect many hands to be in the air. That’s because “cache panic” is probably as old as web design itself. For years, it’s been a game of cat-and-mouse where we attempt to help our clients clear out browser cache – a sometimes painful experience.

I mention this because it seems to be more prevalent than ever with certain website configurations. Managed WordPress hosting services have been particularly difficult in this area. With some, it’s not just browser-based cache, we also need to worry about server-based as well. The result is a lot of wasted time, trying to get everyone on the same page.

What to Do

First, get a stress ball. Next, teach your clients about the wonders of cache and how they can clear it from their browser. In most cases, that will do the trick.

If you find that your web host has tough-to-clear server cache, it may be worth trying a staging environment. This would allow you to make changes on a non-cached location, while enabling your clients to see updates before you push them to production.

Woman typing.

Shapeshifting Tools

Change is difficult – especially when it comes to software. And it seems like, just when we find a comfortable routine, it all gets blown up by what vendors like to call “UI enhancements”.

This can really throw a monkey wrench into the lives of clients who update their own website. After all, they’re not web designers and don’t have time or interest in keeping up with the industry. They simply wake up one day, log into their website and find that their whole process is turned upside down.

The most recent example of this is the WordPress Gutenberg block editor. It looks and functions quite differently from the old Classic Editor. Not to mention that early versions lacked the polish we see today.

This led to a lot of confusion, frustration and, yes, even a little fear that things would break.

What to Do

Frankly, it often falls on designers to stay ahead of the game with these kinds of changes. If we see major developments coming along to the sites we manage, we should act to make the transition as smooth as possible (or delay it indefinitely).

In the case of Gutenberg, that meant educating clients about the new editor. And, in some cases, perhaps installing the Classic Editor to keep the status quo. It’s all about minimizing discomfort.

WordPress new post link.

Web Designers: Lifting the Fog of Fear

It seems like just about every day, there’s something to put a scare into our clients. Whether it’s a crafty scammer, a nitpicking search giant or advancements in technology – we web designers are bound to be asked about it.

Certainly, having to calmly explain these situations can become tiring. There is no shortage of other things on our to-do lists. But on the bright side, it can be very satisfying to help clear up misconceptions and bring even a tiny level of comfort to someone else.

That in itself is a reward and it also helps to build a high level of trust between designer and client. And, looking like a superhero isn’t so bad, either.

The post Things That Will Scare Your Web Design Clients appeared first on Speckyboy Design Magazine.

Thor3D announces two new software bundles for Calibry 3D scanner

Russian handheld 3D scanner developer Thor3D has announced two new bundles for its 3D scanning technology. The company has revealed partnerships with Californian software developers nPowerSoftware and Pixologic, agreeing to provide packages of its 3D scanners with their respective software technologies.  Users who purchase the nPowerSoftware bundle will be provided with Thor3D’s Calibry 3D scanner […]

New ABB Robotics software enables 3D printing without manual programming

ABB Robotics, the robotics division of Swiss-Swedish multinational electrical equipment firm ABB, has introduced 3D printing software to its robotics simulation program.  With this new feature, the company states that users will be able to program ABB robots to begin additive manufacturing production in 30 minutes. Available as an add-on in its RobotStudio software, ABB […]

15 Free Vintage & Antique Brush Packs for Adobe Photoshop

If you’re working on a design project that needs to evoke feelings of nostalgia or working with a brand who has an established history, chances are you’d do well by using vintage or antique brushes.

From retro advertisements to old-fashioned writing, there is a vintage brush for any type of project. Browse our collection below to find the perfect set of vintage and antique brushes for your project or simply get inspired and get those creative juices going.

Free 1940 Cosmopolitan Photoshop Brushes (48 Brushes, Free)

First up is this set of 1940 Cosmopolitan Photoshop brushes. Made from an actual 1940’s issue of a Cosmopolitan, this pack contains 48 high resolution brushes that can be used in personal and commercial projects. Attribution is required.

1940 Cosmopolitan vintage antique adobe photoshop ps brush brushes abr pack set free

Vintage Film Photoshop Actions (with Envato Elements)

Give you projects and old-school feel and speed up your design process at the same time with this vintage film action pack. The pack contains 10 vintage actions for Photoshop which create a separate group for the action so you can apply them non-destructively.

film action vintage antique adobe photoshop pack set

Stamp-O-Matic Free Vintage Photoshop Seal & Stamp Brushes (56 Brushes, Free)

This vintage set of 56 brushes is perfect whenever you need to add an old-school stamp to your designs. The brushes vary in sizes and resolution but you’ll get a nice mix of different styles of stamps to spice your designs with.

Seal Stamp vintage antique adobe photoshop ps brush brushes abr pack set free

Illuminati Grunge Woodcut Brushes (with Envato Elements)

Consider this set of vintage brushes for Illustrator if you need to create a logo with a vintage look and feel. The pack contains 42 brushes and you can even create a unique woodcut feel by mixing and matching different brushes.

Illuminati Grunge Woodcut vintage antique adobe photoshop ps brush brushes abr pack set

Free Antique Book Brushes (Free)

If you want to add antique books to your designs, this pack is the right choice. Brushes are free for personal use, come in a variety of sizes, and attribution is required.

book vintage antique adobe photoshop ps brush brushes abr pack set free

Vintage Art Photoshop Action (with Envato Elements)

Here’s a great starting point for your vintage art projects. This Photoshop Action makes it easy to create photo manipulation artworks with vintage effect. The action includes brushes , splashes, and color grading.

art action vintage antique adobe photoshop ps pack set

Vintage Postcard Free Photoshop Brushes (16 Brushes, Free)

Consider this vintage postcard set of Photoshop brushes if your project requires old postcards. The brushes are free for personal and commercial use and the pack contains 16 high resolution brushes.

postcard vintage antique adobe photoshop ps brush brushes abr pack set free

Vintage Photo Creator (with Envato Elements)

With this Photoshop file, you will be able to make any image look vintage in an instant. The download includes 1 PSD file with all the layers necessary to transform your images.

Photo Creator vintage antique adobe photoshop pack set

Vintage Postcard Free Photoshop Brushes (20 Brushes, Free)

Another set of postcard brushes with a vintage look and feel. This set contains a slightly bigger selection of brushes in high resolution. The brushes can be used in personal and commercial projects with proper attribution.

postcard vintage antique adobe photoshop ps brush brushes abr pack set free

Retro Logo Templates (with Envato Elements)

If you need a retro logo to go along with the rest of your retro designs, this Retro Logo template is the perfect choice. The collection contains 6 vintage logo templates, perfect for branding projects, apparel design, packaging product design, and more.

Retro Logo Templates adobe photoshop ps pack set

Free Vintage Cycle Photoshop Brushes (12 Brushes, Free)

cycle bike transport vintage antique adobe photoshop ps brush brushes abr pack set free

Steampunk Free Photoshop Brushes (25 Brushes, Free)

For any project that requires steampunk elements, this pack will come in handy. The pack contains 25 high resolution brushes that can be used in personal and commercial projects with no attribution required.

Steampunk vintage antique adobe photoshop ps brush brushes abr pack set free

Free Vintage Crown Photoshop Brushes (15 Brushes, Free)

Instantly add a touch of class and make your projects more regal by applying any one of the vintage crown Photoshop brushes from this brush pack. The pack contains 15 brushes in high resolution and they can be used in commercial and personal projects with proper attribution.

Crown vintage antique adobe photoshop ps brush brushes abr pack set free

Free High-Res Assorted Map Photoshop Brushes (14 Brushes, Free)

If you need vintage or antique maps, this pack is a must-have. You’ll get 14 high resolution brushes that can be used without any restriction in both personal and commercial projects.

High-Res Assorted Map vintage antique adobe photoshop ps brush brushes abr pack set free

Free 1920s Sport Photoshop Brushes (Free)

This 1920’s sport brush pack contains a variety of brushes featuring different sports from the 1920’s era. The brushes can be used in commercial and noncommercial projects. No attribution is required but is appreciated.

1920s Sport vintage antique adobe photoshop ps brush brushes abr pack set free

Vintage Script Free Photoshop Brushes (20 Brushes, Free)

Make your projects stand out and instantly add a touch of elegance with the brushes from this vintage script brush pack. The pack contains 20 high resolution brushes that are free to use in personal and commercial projects. Attribution is required.

Script vintage antique adobe photoshop ps brush brushes abr pack set free

Piano Music Partiture Free Photoshop Brushes (20 Brushes, Free)

This vintage brush pack is perfect for any music-related design. The pack contains 20 high resolution brushes which can be used in personal and commercial projects. Attribution is required.

Piano Music Partiture vintage antique adobe photoshop ps brush brushes abr pack set free

Free Tarot & Fortune Teller Cards Brush Set (9 Brushes, Free)

The Tarot and Fortune Teller Cards Brush set contains 9 different brushes in medium size. The brushes can be used for both personal and commercial purposes. Attribution is appreciated but not required.

Tarot Fortune Teller vintage antique adobe photoshop ps brush brushes abr pack set free

Free Vintage Horses Free Photoshop Brushes (Free)

This brush pack is perfect for any nature or outdoors design project. You’ll find a variety of horse brushes in different sizes and you can use them with no restrictions.

Vintage Horses antique adobe photoshop ps brush brushes abr pack set free

Conclusion

The retro and vintage style is definitely a popular design style and perfect for any client that’s been in business for a while or a new business with an old soul and traditional values. The brushes shared in this post will certainly come in handy for those projects so be sure to check them out.

The post 15 Free Vintage & Antique Brush Packs for Adobe Photoshop appeared first on Speckyboy Design Magazine.

15 Free Vintage & Antique Brush Packs for Adobe Photoshop

If you’re working on a design project that needs to evoke feelings of nostalgia or working with a brand who has an established history, chances are you’d do well by using vintage or antique brushes.

From retro advertisements to old-fashioned writing, there is a vintage brush for any type of project. Browse our collection below to find the perfect set of vintage and antique brushes for your project or simply get inspired and get those creative juices going.

Free 1940 Cosmopolitan Photoshop Brushes (48 Brushes, Free)

First up is this set of 1940 Cosmopolitan Photoshop brushes. Made from an actual 1940’s issue of a Cosmopolitan, this pack contains 48 high resolution brushes that can be used in personal and commercial projects. Attribution is required.

1940 Cosmopolitan vintage antique adobe photoshop ps brush brushes abr pack set free

Vintage Film Photoshop Actions (with Envato Elements)

Give you projects and old-school feel and speed up your design process at the same time with this vintage film action pack. The pack contains 10 vintage actions for Photoshop which create a separate group for the action so you can apply them non-destructively.

film action vintage antique adobe photoshop pack set

Stamp-O-Matic Free Vintage Photoshop Seal & Stamp Brushes (56 Brushes, Free)

This vintage set of 56 brushes is perfect whenever you need to add an old-school stamp to your designs. The brushes vary in sizes and resolution but you’ll get a nice mix of different styles of stamps to spice your designs with.

Seal Stamp vintage antique adobe photoshop ps brush brushes abr pack set free

Illuminati Grunge Woodcut Brushes (with Envato Elements)

Consider this set of vintage brushes for Illustrator if you need to create a logo with a vintage look and feel. The pack contains 42 brushes and you can even create a unique woodcut feel by mixing and matching different brushes.

Illuminati Grunge Woodcut vintage antique adobe photoshop ps brush brushes abr pack set

Free Antique Book Brushes (Free)

If you want to add antique books to your designs, this pack is the right choice. Brushes are free for personal use, come in a variety of sizes, and attribution is required.

book vintage antique adobe photoshop ps brush brushes abr pack set free

Vintage Art Photoshop Action (with Envato Elements)

Here’s a great starting point for your vintage art projects. This Photoshop Action makes it easy to create photo manipulation artworks with vintage effect. The action includes brushes , splashes, and color grading.

art action vintage antique adobe photoshop ps pack set

Vintage Postcard Free Photoshop Brushes (16 Brushes, Free)

Consider this vintage postcard set of Photoshop brushes if your project requires old postcards. The brushes are free for personal and commercial use and the pack contains 16 high resolution brushes.

postcard vintage antique adobe photoshop ps brush brushes abr pack set free

Vintage Photo Creator (with Envato Elements)

With this Photoshop file, you will be able to make any image look vintage in an instant. The download includes 1 PSD file with all the layers necessary to transform your images.

Photo Creator vintage antique adobe photoshop pack set

Vintage Postcard Free Photoshop Brushes (20 Brushes, Free)

Another set of postcard brushes with a vintage look and feel. This set contains a slightly bigger selection of brushes in high resolution. The brushes can be used in personal and commercial projects with proper attribution.

postcard vintage antique adobe photoshop ps brush brushes abr pack set free

Retro Logo Templates (with Envato Elements)

If you need a retro logo to go along with the rest of your retro designs, this Retro Logo template is the perfect choice. The collection contains 6 vintage logo templates, perfect for branding projects, apparel design, packaging product design, and more.

Retro Logo Templates adobe photoshop ps pack set

Free Vintage Cycle Photoshop Brushes (12 Brushes, Free)

cycle bike transport vintage antique adobe photoshop ps brush brushes abr pack set free

Steampunk Free Photoshop Brushes (25 Brushes, Free)

For any project that requires steampunk elements, this pack will come in handy. The pack contains 25 high resolution brushes that can be used in personal and commercial projects with no attribution required.

Steampunk vintage antique adobe photoshop ps brush brushes abr pack set free

Free Vintage Crown Photoshop Brushes (15 Brushes, Free)

Instantly add a touch of class and make your projects more regal by applying any one of the vintage crown Photoshop brushes from this brush pack. The pack contains 15 brushes in high resolution and they can be used in commercial and personal projects with proper attribution.

Crown vintage antique adobe photoshop ps brush brushes abr pack set free

Free High-Res Assorted Map Photoshop Brushes (14 Brushes, Free)

If you need vintage or antique maps, this pack is a must-have. You’ll get 14 high resolution brushes that can be used without any restriction in both personal and commercial projects.

High-Res Assorted Map vintage antique adobe photoshop ps brush brushes abr pack set free

Free 1920s Sport Photoshop Brushes (Free)

This 1920’s sport brush pack contains a variety of brushes featuring different sports from the 1920’s era. The brushes can be used in commercial and noncommercial projects. No attribution is required but is appreciated.

1920s Sport vintage antique adobe photoshop ps brush brushes abr pack set free

Vintage Script Free Photoshop Brushes (20 Brushes, Free)

Make your projects stand out and instantly add a touch of elegance with the brushes from this vintage script brush pack. The pack contains 20 high resolution brushes that are free to use in personal and commercial projects. Attribution is required.

Script vintage antique adobe photoshop ps brush brushes abr pack set free

Piano Music Partiture Free Photoshop Brushes (20 Brushes, Free)

This vintage brush pack is perfect for any music-related design. The pack contains 20 high resolution brushes which can be used in personal and commercial projects. Attribution is required.

Piano Music Partiture vintage antique adobe photoshop ps brush brushes abr pack set free

Free Tarot & Fortune Teller Cards Brush Set (9 Brushes, Free)

The Tarot and Fortune Teller Cards Brush set contains 9 different brushes in medium size. The brushes can be used for both personal and commercial purposes. Attribution is appreciated but not required.

Tarot Fortune Teller vintage antique adobe photoshop ps brush brushes abr pack set free

Free Vintage Horses Free Photoshop Brushes (Free)

This brush pack is perfect for any nature or outdoors design project. You’ll find a variety of horse brushes in different sizes and you can use them with no restrictions.

Vintage Horses antique adobe photoshop ps brush brushes abr pack set free

Conclusion

The retro and vintage style is definitely a popular design style and perfect for any client that’s been in business for a while or a new business with an old soul and traditional values. The brushes shared in this post will certainly come in handy for those projects so be sure to check them out.

The post 15 Free Vintage & Antique Brush Packs for Adobe Photoshop appeared first on Speckyboy Design Magazine.

3D Printing Services vs Owning an Industrial 3D Printer: How to Choose

In today’s modern world, businesses have access to more technologically-advanced devices than ever before, which can be used to expedite certain processes of each business. One such device is an industrial 3D printer, a machine that gives manufacturers a quick way to prototype.

Gone are the days of waiting for the production of the first prototype to see your creations come to life. Now you can have the first sample in your hands within a few hours.

Now you just have to make a decision between two options: either purchase your own industrial 3D printer or use a 3D printing service. As with anything else in business, both options have their advantages. Here is a definitive layout of both.

Advantages of Using a 3D Printing Service

Outsourcing is a tremendous option for many aspects of your business, and using it for your 3D printing needs is no different. Here are several advantages that come with hiring a 3D printing service for your innovative products.

Experience Is on Your Side

Anytime you can add years of experience to your team, it’s a good thing. Buying a 3D printer on your own means going through the bumps and bruises of learning the model that you purchase. If neither you nor your employees have much experience with 3D printing and all that it entails, expect a learning curve with it.

Rather, you can hire a 3D printing service that has several employees with the years of experience you need. That means you can hit the ground running with 3D printing as soon as you hire them; no setbacks!

As your business grows, so will the demands of your 3D printing needs. Whether it’s adding a new product to your line or making a few moderations to current ones, you’ll need the 3D printing to keep up.

There can be instances where the specifics that you send over for printing won’t meet the expectations you have for it. Your 3D printing service can use their knowledge of printing similar items in the past to alert you of any potential setbacks ahead of time.

That way, you can gameplan whether to proceed with the current specifics or quickly return to the drawing board before printing it out. This will save you a fortune over reprinting the same product after a setback with the initially-printed prototype.

Access to the Latest Equipment

Companies that purchase a 3D printer for their own use do so with the intention of having it for several years down the line. However, the model they purchase could become outdated as early as the following year, when a new edition of that same model rolls out and has even better features. Now, because they bought it, that company is stuck with the model they purchased and succumbing to its limitations.

On the other hand, companies tat utilize 3D printing services may have more access to the latest and greatest equipment that money can buy. 3D printing services are always looking to streamline their process and provide their clients with the best equipment.

Now, instead of being stuck with this year’s model 5-10 years down the line, you and your manufacturing processes will have access to the optimum 3D printers in the industry.

No In-House Overhead

As previously mentioned, it’s unlikely that your current employees have enough 3D printing experience to run the process for your company. That means that if you’re going to buy a 3D printer for yourself, you’ll also need to hire for positions that know how to run the software, monitor any maintenance needs, and stay in the loop with the latest trends and products.

In addition to spending money to hire new employees, you’ll also be spending $20,000-$100,000 on a single industrial 3D printer. Considering you’d need to hire several new employees to maintain the 3D printing, it’s much more cost-efficient to hire an all-encompassing 3D printing service.

That way, you’re paying for access to the brightest minds in the industry, experience, and the best 3D printers on the market. What’s better than that?

Premium Manufacturing and Order Fulfillment

If you purchase a 3D printer for your company, you’re just hoping that becomes streamlined and produces the end results you were hoping for. Even if it does, you now have to worry about the processing and assembly of each part that you’ve printed. That can be overwhelming for those that don’t have previous experience in doing so. It’s a lot of pressure to configure something the very first time that it’s created.

Get your company teamed up with experts that handle those situations day in and day out. They can assemble your product together and use the resources at their disposal to send it to you in custom packaging.

You’ll never have to worry about it arriving in one piece ever again, and that in itself is worth the investment.

Advantages of Owning an Industrial 3D Printer

Who doesn’t enjoy having something to call their own? After all, it’s your business, and you want to claim that industrial 3D printer as your own. Does it make sense for your specific situation? Read below and figure out whether it’s the best choice for you or not.

Quicker Turnaround

Once you’ve purchased the industrial 3D printer and hired the right staff to monitor its processes, you can have the products made in-house. Depending on the size of the item you’re printing, it could take a few minutes, a few hours, or a day or two for completion. Regardless, you’ll have access to it the moment it’s finished.

No need to hold off production until the item comes in from your third party 3D printing service. You’ll have the end result in your hand to determine what needs to be fixed and what doesn’t.

The key here is that you’ll need a high resolution industrial 3D printer to optimize this process. Without one, you’re wasting precious time on production.

Hands-On Printing

Perhaps you’re the type of person that feels more comfortable being more hands-on with every aspect of your business. Even if you don’t have any prior experience, you enjoy the process of learning and going through trial-and-error to maximize production. If that’s you, owning your own 3D printing service could be the best fit.

You’ll have the opportunity to oversee the integration, processing, and finalization of the methods you use for your in-house 3D printing. And with enough time, you’ll figure out the best ways to modify your printing software to yield the best results. Does your company have that kind of time on its hands?

After you and your team figure out the best methods, you’ll be able to grow your 3D printing team and teach them your ways of processing and manufacturing.

Getting Yourself Ahead of the Curve

Even though it’s becoming more and more modernized, 3D printing is still a relatively new feature in the business world. As time progresses, and the 3D printing industry continues to grow, more businesses will start to own their own 3D printers. You can get ahead of that trend by going through the learning curve now.

If you feel as if it’s a great advantage for you over your competitors then spending the time and money now can set yourself up for success down the line. However, your competitors may beat you out by going with a 3D printing service to expedite the learning curve and yield results in the quickest.

3D printing software is going to continue to advance, so you and your staff will be tasked time and time again to get up-to-speed on those changes. If you feel up to that challenge, the reward can be well worth it.

As long as you’re prepared to invest in new software and new industrial 3D printers every few years, the payoff can be substantial.

Make the Right Industrial 3D Printer Decision for Your Company

No one knows your business operations better than you do. Buying an industrial 3D printer means having some setbacks to set yourself up for the future. On the other hand, you could hire a 3D printer service and never skip a beat on your production.

Be sure to read this article on how big a role that design thinking plays in 3D printing for your business. For more inquiries, please reach out via our contact us page and we’ll be happy to assist you further.

The post 3D Printing Services vs Owning an Industrial 3D Printer: How to Choose appeared first on Shapeways Magazine.