10 Creative Code Examples of Media Player Design

With the power of HTML5 and the ease adding multimedia through technologies such as WordPress oEmbed, anyone can add compelling video or audio content to their website. And, while it’s great that default media players are included from a purely functional standpoint, so much more can be done to improve the user experience.

The default player may provide basic functionality, but it doesn’t necessarily match your branding or offer some more advanced features. So designers have taken it upon themselves to add creative flair, along with high-end functionality to create some incredibly unique media players. Take a look at some of our favorites below and feel free to experiment with the source code.

The Web Designer Toolbox
Unlimited Downloads: 500,000+ Web Templates, Themes, Plugins & Design Assets

DOWNLOAD NOW

Audio Players

Round and Beautiful

This circular audio player from Sebastian Beltz puts the straight edges of a standard media player to shame. It’s quite beautiful to look at, intuitive and the inclusion of sharing/favorite buttons makes it a more complete UI.

Draggable Playlist

The fact that you can drag this audio player around your screen is cool. But even better is the simple and smart UI that Antoinette Janus has created. Scrolling through the playlist and playing the selected track is quick and painless.

Accessibility Built In

It’s a simple player, indeed. But Joe Watkins has added in a terrific alternative UI for accessibility. The text-based buttons for play and pause ensure that anyone can consume the media. The ability to view a transcript is just brilliant.

Material Design Comes to Audio

Michael Zhigulin’s use of Material Design on this player is outstanding. From the popular “card” layout to the smooth animations, it fits in nicely with Google’s standard.

Spinning Some Vinyl

The concept here is just too cool. Matt Stvartak’s player is basic in functionality, but the rotating vinyl that pops out of the sleeve is a standout design.

Video Players

Smooth and Responsive

Part of the idea behind HTML5 media was to ensure that mobile devices were able …

Weekly News for Designers № 484

Forge Your Own (Animation) Path with These Snippets – Creative examples of path-based web animations.
Forge Your Own (Animation) Path with These Snippets

Animation Performance 101: Browser Under the Hood – Techniques for attaining 60fps animations without taxing web browsers.
Animation Performance 101: Browser Under the Hood

Top Font Combinations – A look at some perfect font pairings for your projects.
Top Font Combinations

CSS masonry with flexbox, :nth-child(), and order – A smart approach to masonry layouts that doesn’t require JavaScript.
CSS masonry with flexbox, :nth-child(), and order

Front-end Developer Handbook 2019 – A massive resource you can use to further your front-end skills.
Front-end Developer Handbook 2019

The Four Ways That Freelancers Are Often Mistreated – Ways to fight back when clients try to take advantage of you.
The Four Ways That Freelancers Are Often Mistreated

Generative Art with CSS – A variety of techniques for creating art with pure CSS.
Generative Art with CSS

The process: Building a better checkout – How Paystack reimagined its checkout experience to better serve Africa-based users.
The process: Building a better checkout

Art Direction For The Web Using CSS Shapes – Build unique layouts with the help of CSS shapes.
Art Direction For The Web Using CSS Shapes

The Battle of Stability vs. Growth – Every designer wants a steady workflow (and income). But how does that affect future growth?
The Battle of Stability vs. Growth

Long-form websites and typography – A mix of philosophies on making long-form content easy to read and withstand the test of time.
Long-form websites and typography

The junior developer’s guide to writing super clean and readable code – Learn the secrets behind writing code that is focused and easy to read.
The junior developer’s guide to writing super clean and readable code

Why you should use CSS env() – With env(), you’ll be able to share variables between CSS and JS.
Why you should use CSS env()

Simple Ways to Customize WordPress Plugins – You don’t have to be an expert to add custom functionality to an existing plugin.
Simple Ways to Customize WordPress Plugins

Diagonal Containers in CSS – Create those trendy full-width diagonal containers with clip-path.
Diagonal Containers in CSS

Public Sans – A free neutral typeface for all of your UI needs.
Public Sans

Developer Survey Results 2019 – Stack Overflow’s yearly look at what developers are learning and doing.
Developer Survey Results 2019

Illustrated.dev – Web development concepts explained through friendly illustrations.
Illustrated.dev

Exploring the Simple Beauty of Business Cards with Geometric Designs – A look at how some simple shapes can deliver stunning results.
Exploring the Simple Beauty of Business Cards with Geometric Designs

Follow Speckyboy on …

Simple Ways to Customize WordPress Plugins

There are times when a WordPress plugin’s functionality gets you close to what you need – but not quite the whole way. In addition, there are also situations where you’ve committed to using a particular plugin and would like to build additional features around it.

These are prime examples of why you’d want to customize or extend an existing WordPress plugin. It’s one of the really cool aspects of how the CMS allows us to build highly-custom websites. We can take a plugin we’re already using on our site and integrate extra functionality or usability items that help us to do more.

And, while it may sound like something reserved for seasoned developers, extending a plugin doesn’t require a PhD. Depending on what you’re looking to achieve, a basic understanding of PHP, HTML and CSS may be all you need to add some powerful features.

Today, we’ll review the process of choosing a plugin worth extending and some basics regarding what you can achieve.

The WordPress Toolbox
Unlimited Downloads: 500,000+ WordPress Themes, Plugins, Templates & Design Assets

WordPress

DOWNLOAD NOW

Finding the Right Plugin

The first part of this process is also the most important: choosing a plugin. Sure, you can pick any one of the tens of thousands of available choices out there. And you may already have one in mind. But if you’re going to go to the trouble of adding extra capabilities, your ultimate pick is worth some serious consideration.

In many cases, a plugin you would consider customizing is playing a key role in what your website does. For example, an ecommerce plugin such as WooCommerce is going to be a major part of an online store. Just as an organization that holds a lot of events might heavily rely on a calendar plugin.

Regardless of what the plugin does, it’s vital to choose one that you can commit to for the long term. Therefore, you’ll want to look for software that:

  • Is being actively maintained by its author;
  • Has an adequate userbase, relevant to its niche;

The Four Ways That Freelancers Are Often Mistreated

To many web professionals, freelancing means freedom. The freedom to work on what you please, when you please. It seems to be the perfect career path in this on-demand world we live in.

However, the fact that you’re out there on your own does have some downsides. Being a solo entrepreneur leaves you without a lot of the benefits and protections that an employee might have. And it is often those things that leave us at a disadvantage.

One of the biggest resources lacking for freelancers is a legal department that is there to make sure that nobody is taken advantage of. They help to set policies, ensure compliance and defend company interests when needed.

Of course, clients know this. And if you run into a particularly unscrupulous one, your relationship could become fraught with abuse.

In fact, there are a number of ways that clients can mistreat you. Let’s explore four of the more common transgressions, along with ways to combat them.

The Freelance Designer Toolbox
Unlimited Downloads: 500,000+ Web Templates, Themes, Plugins & Design Assets

DOWNLOAD NOW

1. Refusal to Pay the Agreed Upon Price

There are all sorts of reasons why a client may not pay. Sometimes, it’s a financial hardship. But there are also situations where someone sees an opportunity to get what they want without holding up their end of the bargain.

If you’ve been in business for a while, you’ve most likely run into this type of person. They’ll keep stringing you along, attempting to get even more work out of you, while continuing to pay you nothing (or next to it).

While you do have some legal recourse, it’s not necessarily cost-effective unless you are owed a large sum of money. Paying for a collection agency, lawyer or court costs may negate any benefit you might receive. Not to mention all the wasted time in going through this process.

And this is exactly why someone will expect to get away with such behavior. They know it’s most likely not worth your while to …

Weekly News for Designers № 483

Is Nothing Sacred? The Pollution of the WordPress Dashboard – How notifications of varying importance are taking over the WordPress back end.
Is Nothing Sacred? The Pollution of the WordPress Dashboard

15 Git Commands You May Not Know – Lesser-known commands that can help you master the version control system.
15 Git Commands You May Not Know

Designer Bio Generator™ – Why write your own bio when this tool can just generate it for you?
Designer Bio Generator

How to create clipped, blurred background images in CSS – A handy guide to applying effects to just a specific portion of an image.
How to create clipped, blurred background images in CSS

It’s 2019! Let’s End The Debate On Icon Fonts vs SVG Icons – A side-by-side comparison of these two competing icon formats.
It’s 2019! Let’s End The Debate On Icon Fonts vs SVG Icons

10 heuristic principles for mobile interfaces – Ideas for implementing user-centered design.
10 heuristic principles for mobile interfaces

Crossroads Slideshow – A tutorial for building a slider that features rotated text and images.
Crossroads Slideshow

Material Admin – A free admin and UI kit that is based on Google’s Material Design.
Material Admin

Freebie: Virtual Reality Icon Pack – A collection of 50 free PNG and SVG icons in three unique styles.
Freebie: Virtual Reality Icon Pack

Explorer Font – A free, organic hand drawn typeface for use in your projects.
Explorer Font

Native image lazy-loading for the web! – Sneak peek at the loading attribute for both images and iframes.
Native image lazy-loading for the web!

Animating SVG with CSS – Learn how to add beautiful animation effects to your projects.
Animating SVG with CSS

CSSBattle – Use your CSS skills to replicate targets with the smallest possible code in this golf-like game.
CSSBattle

Connecting WordPress to Cloud Storage Services – Add useful and even performance-enhancing features to your site via cloud services.
Connecting WordPress to Cloud Storage Services

Illustrated.dev – Web design concepts explained through illustration.
Illustrated.dev

Hyper Editor – A backend independent block-based content editor.
Hyper Editor

Water.css – Simple styles and semantic code for your static website.
Water.css

Attention Getters: Bright Call-to-Action Buttons – Examples that showcase the power of brightly-colored CTAs.
Attention Getters: Bright Call-to-Action Buttons

Follow Speckyboy on Twitter or Facebook for a daily does of web design resources and freebies.

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

from Speckyboy Web Design Magazine https://speckyboy.com/weekly-news-for-designers-483/…

12 of the Top Multipurpose WordPress Themes Available Today

The Swiss Army knife is an extremely handy tool. You can do many things with one and do them well. Due to their small size, some of the individual tools can have certain limitations. Yet given the chance, few people would refuse one as a gift, and most wouldn’t hesitate to purchase one at a fair price.

A multipurpose theme is a different kind of animal. The performance of some would lead you to think about the “Jack of all trades, master of none” saying. You would believe that this truism that applies to software tools just as it does to many other things.

Indeed, some may be lacking in what you need to build certain types of websites. Yet, premier multipurpose themes provide everything you’ll need to build a high-performing website. Here are the 12 best options in our opinion.

Be Theme

BeTheme’s 40+ core features give you a powerful toolkit you can use to build any type of website for any purpose, and as close to perfection as possible. These core website-building features have much to do with Be being the biggest WordPress theme of them all. What really tips the “bigness” scales is its library of more than 400 professionally designed, responsive, and customizable pre-built websites.

As these 30+ pre-built websites cover all the major business and industry sectors, it’s never a problem to find a close match that will get your project off to a flying start. Better yet, each of these pre-built websites features the functionality you need to produce a website that is not only responsive, retina-ready, and SEO friendly but features a friendly UX as well.

Features like the new Header Builder provide you with greater design flexibility and make your overall design effort as easy as can be. No coding is necessary, and it’s not at all unusual to complete a reasonably complex project in as little as 4 hours.

Jupiter

Give Jupiter X half a chance to show its stuff and it will do what only a premium quality multipurpose theme …

Is Nothing Sacred? The Pollution of the WordPress Dashboard

There are any number of things to love about WordPress. Chiefly among them is the fact that it’s open source and free to use in any way you like.

For web designers and their clients, this keeps costs down and lowers the barrier to building a first-class website. For plugin and theme authors, it provides an opportunity to tap into and benefit from a large, existing marketplace. Everyone’s a winner, right?

Well, it’s not always that simple. There are times when the various interests who have a stake in WordPress collide with a difference of opinion (see: Gutenberg). And it seems that we’ve hit another one of those points of contention: The WordPress dashboard.

An Unseemly Tactic?

Recently, there’s been some fervor over a “feature” in version 7.1 of Jetpack (since removed, as of version 7.2.1), the venerable Swiss-Army-Knife of a plugin by Automattic (a driving force behind WordPress) that offers a ton of various functionality. The plugin had started to promote its own paid products on the WordPress plugin search screen, placing itself first in line over everyone else.

The Jetpack plugin suggestion, and other assorted notificaitons.

Funny enough, this did not go unnoticed by members of the community (which likely led to its quick demise). There was fierce debate on Twitter, with Gravity Forms founder Carl Hancock declaring (in a since-deleted tweet), “Automattic is setting the precedence that hijacking plugin search results is an acceptable way to game user discovery problems & outrank competitors.”

While this change created a stir, it’s hardly the first time a plugin (Jetpack included) has forced its way onto our screens. For example, sites with Jetpack installed have been seeing ads for their backup services on the plugin upgrade screen for quite some time.

And they are far from the only guilty party. Plugins both free and commercial are littering the dashboard. Sometimes, it’s just a friendly message regarding a maintenance-related task. More often, they’re asking for donations, reviews, upgrades and various other annoyances. The “good” ones are easily dismissed, the not-so-good ones keep showing up time …

Weekly News for Designers № 482

A Gutenburg-Powered Newsletter – Learn the process behind converting the CSS-Tricks newsletter to use the new WordPress block editor.
A Gutenburg-Powered Newsletter

Maizzle – A framework for rapidly developing email prototypes with CSS.
Maizzle

Website Audit Checklist – A simple checklist to audit your site for proper formatting, performance, accessibility, and security.
Website Audit Checklist

Stop using so many divs! An intro to semantic HTML – Why divs should be a container of “last resort”.
Stop using so many divs! An intro to semantic HTML

Cool uses of the ::before and ::after pseudoelements – You might be surprised at how much pseudoelements are capable of.
Cool uses of the ::before and ::after pseudoelements

Clicking Around: The Use of Circular Mouse Cursors – How this small detail can help to create a seamless UX.
Clicking Around: The Use of Circular Mouse Cursors

WinXP – Recreating the iconic Windows XP in your browser.
WinXP

Tone.js – A framework for creating interactive music in the browser.
Tone.js

The Design of Apple’s Credit Card – A look behind the uniqueness of Apple Card.
The Design of Apple's Credit Card

How To Organize Files In A Design Agency – Learn how a world-class agency organizes their files.
How To Organize Files In A Design Agency

Lint for Sketch – A Sketch tool to validate your designs against your own defined design guidelines.
Lint for Sketch

100% Responsive Typography System using a Modular Scale – Create a smooth typographic scale that looks great on every device.
100% Responsive Typography System using a Modular Scale

The 20 Best Free WordPress Portfolio Themes for Creatives – Build up your portfolio in style with one of these free themes.
The 20 Best Free WordPress Portfolio Themes for Creatives

How To Use Spaces In Web Design With Gestalt Principles – Telling a story through the use of space.
How To Use Spaces In Web Design With Gestalt Principles

Form Validation in Under an Hour with Vuelidate – How to leverage Vue.js to quickly validate forms.
Form Validation in Under an Hour with Vuelidate

Don’t Shortchange Yourself When Inheriting a Website – You just never know what you’ll find when inheriting a website – charge accordingly.
Don’t Shortchange Yourself When Inheriting a Website

Editor.js – A free, next generation block editor app.
Editor.js

Write – Free UI Kit for Sketch and Adobe XD – A free kit that includes 15 iOS app screens.
Write - Free UI Kit for Sketch and Adobe XD

Follow Speckyboy on Twitter or Facebook for a daily does of web design resources and freebies.

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

from …

Connecting WordPress to Cloud Storage Services

For many of us, cloud storage has become a key component of our workflow. These services make it incredibly easy to back up files and share them with others. You can even set them up so they run quietly in the background – copying your files as you work.

Plus, most services offer more than one way to access your storage space. Sure, you could download an official mobile app or use their website. But, through the use of an API, other applications can also tap into the system – including WordPress.

There are a number of different reasons and use cases for hooking your WordPress site up to the cloud. Today, we’ll look at a few of the more popular scenarios and introduce you to some plugins that will help you to get started.

The WordPress Toolbox
Unlimited Downloads: 500,000+ WordPress Themes, Plugins, Templates & Design Assets

DOWNLOAD NOW

Serve Up Media

Media files can take up a lot of server space and eat away at your allotted bandwidth. Cloud storage can help by keeping media separate and quickly serving it up, much like a content delivery network (CDN).

WP Offload Media Lite

WP Offload Media Lite

WP Offload Media Lite works with a number of popular cloud providers, including Amazon S3, DigitalOcean and Google Cloud Storage. The plugin will automatically copy uploaded files to the cloud and changes the URL accordingly. Just note that a copy of the files you upload will remain on your hosting server – they just won’t be used. A pro version adds the ability to move existing media to the cloud and other goodies.

WP-Stateless

WP-Stateless

Users of Google Cloud Storage can leverage WP-Stateless to serve up media files through the tech behemoth’s redundant servers. Choose from one of three custom “modes”: Backup, CDN and Stateless – the latter storing and serving media exclusively from Google’s servers. There are a lot of customization possibilities here and the plugin will even automatically replace hard-coded media links to reflect their new location.

Media Cloud

Media Cloud

Media Cloud claims nearly identical functionality …

Room to Breathe: Using Whitespace in the Hero Area

Developers are often so obsessed with extravagant solutions that they sometimes get carried away – forgetting how the simplest things can make an interface a better place. One such example is whitespace.

Creatives do not always give it proper credit. However, if you are building a comfortable user experience with a prime focus on the content, then whitespace is your friend. It’s the one that stands behind a pleasant UX, encouraging visitors to stay on a website. It creates order out of chaos and puts everything in its place. It assists in establishing visual paths and determining the priorities. It does all the heavy lifting behind the curtains.

These arguments may sound banal. Nevertheless, they are reasonable and based on a long history of experimentation. Without a proper amount of fresh air, your users will feel claustrophobic. The general experience will lack enjoyment.

Of course, whitespace will always be whitespace. You cannot transform it into a mind-blowing animation – it is just a blank space. However, this does not mean that it has nothing to do with the design. On the contrary, it is an integral part of it.

Today we are going to show you how whitespace skillfully sets the content apart from everything else, as well as plays an essential role in the overall aesthetics. Let us explore some designs with lots of whitespace presented as huge, organized gaps.

What We’re Looking For

We will intentionally step aside from more traditional designs like Beyond Theory or Heartbeat Labs, whose hero areas can be deservedly called spacious.

Their welcome sections consist of only vital elements such as the tagline, navigation and whitespace. Without a doubt, they are filled with fresh air. They both look crisp. And, their slogans instantly catch an eye. However, there are other intricate ways of using whitespace. Therefore, we are going to consider only those interfaces where cleverly organized gaps run the show.

Beyond Theory

Heartbeat Labs

Olio Intini

The first example to examine is Olio Intini. The design team goes beyond just displaying content. They took the …