The Web Can’t Go Home Again

It’s far too easy to look back and imagine that everything was better then than it is now. God knows I miss being a skinny teenager, but I don’t want the acne back. The hormones can just shove right off, too.

Even so, there are things I miss about being younger, and frankly a bit naïve.

Lately, there has been conversation about the nature of the Internet, and many people seem to feel much as I do about my teenage years: that is to say, they miss the relative innocence. Though once reviled, dancing baby .GIFs and elements seem like high art compared to the click-bait, the passionate-yet-incomprehensible comment wars, and the desperate attempts of corporations to look “hip”. We’d be hard-pressed to look around and say, “Yes, this really is better.”

We even miss Tom, and his kind of desperate-feeling attempt to be everybody’s friend

We miss the utopianism of the early Internet pioneers. We miss the creativity of people just learning HTML, from the days of the first pages, to the days of the customized MySpace page. We even miss Tom, and his kind of desperate-feeling attempt to be everybody’s friend; because at least he was trying to be friends, not tell you how your every opinion was wrong.

And so here we are, in a new world of our own making, and we wish we’d made it differently. Some people blame corporations, and their focus on profit over community. Others more or less blame the blog format, and the press of people who all want to be a little bit famous. There are more than a few who blame social media.

None of these people are entirely wrong, of course. We could have done better. We can do better. We can make a friendlier Internet that promotes creativity. What we cannot do is go back.

“You can’t go home again.” For those unfamiliar, it’s an old saying based on the idea that once you leave a place, you can never truly return to what once was. Even if the place you left has stayed the same, you will have changed. The you that comes back is not the you that left.

We can do better. We can make a friendlier Internet that promotes creativity.

We can’t go back to the old Internet because we have changed. Like Adam and Eve in the proverbial garden, we now have knowledge of both the good the Internet can do, and the evil. Businesses have seen how much money can be made. The near-monopolies of the Internet have no reason to give up their advantages.

Elsewhere, communities have seen how, when there are not enough rules, or when the rules are not enforced, the loudest and most violent voices will oppress the rest. We have also seen that with too many rules, and inflexible enforcement, the bureaucrats will become the oppressors.

Knowing what we know now, we cannot go back to the wild west days of the Internet, because it’s unlikely that most of us could ever embrace that sort of potential without the fear born of our experience. Whatever the Web becomes next, I hope it has the better qualities of the Internet of the past, but it will not, perhaps cannot, be the same.

Okay, that’s quite enough mourning of our collective innocence. There are things we can reasonably do to help improve the state of the Internet, and after all that, I’d like to include a few I thought of.

Get Political

Now I don’t mean that you should tweet at your ideological opponents more, and I’m not going to tell you who to vote for. What I am going to say is that most politicians in most governments are sorely ignorant what what the Internet truly is, and how it works. Watching Mark Zuckerberg getting questioned was one of the more painful things a nerd could ever watch. Don’t even get me started on the mess that was/is the EU’s attempt to redefine copyright law. Articles 11 and 13 are nightmarish concepts.

Watching Mark Zuckerberg getting questioned was one of the more painful things a nerd could ever watch

If we’re going to bring back some of the fun to the Internet, we need to make sure our politicians are better educated about it. I’m not an expert on political activism; but perhaps we could all stand to reach out to our local politicians more, and not just when they’re about to take away half of our online rights through ignorance.

Make Alternatives More Attractive

For example: many video creators are feeling stifled under YouTube’s arcane and sometimes arbitrary sets of rules, and many a creator has lost their source of revenue overnight. You see, YouTube has become so massive that many video creators wouldn’t even think of putting their content elsewhere, which makes the platform even bigger. That centralization gives YouTube massive power over millions of creators, and their algorithms more or less define what many would-be artists create.

So on top of controlling smaller creators’ revenue, one website is having an out-sized impact on entire cultures. That is antithetical to the spirit of the Internet as it was intended to be. Some smart cookies have decided to try to alleviate this problem, and other crises caused by corporate near-monopolies, by creating decentralized versions of YouTube, decentralized social networks, and even decentralized versions of the Internet itself.

Alternatives to massive sites need more tangible, immediate benefits

These alternatives face one major problem (besides plain old logistics): attracting a user base in the first place. This is normal for any business breaking into a crowded market, but many of these projects advertise themselves by saying things like, “We’re not corporate and evil like Google.” The problem is that this is not something the average user cares about. We already give away our information freely, so privacy isn’t going to sell it either. Alternatives to massive sites need more tangible, immediate benefits.

Support Efforts That Lower the Web’s Creative Entry Requirements

We, as people who love the Internet, need to each make our own efforts to improve it. But we should also remember that there are plenty of people out there already doing what they can, and they need some love.

One of my favorite examples is that of NeoCities, which we’ve previously discussed here on WDD. Basically, it’s a place where anyone can create a basic HTML/CSS site about anything they like, for free, in the spirit of the old GeoCities sites. The idea is to encourage more people to try making sites for themselves with the lowest possible barrier to entry.

Projects like these need ongoing support, and frankly deserve free advertising. So that’s why NeoCities is getting a link.

Be Kind, and Forgive

If the Web is going to change (again), people will have to change (again). And as people change, we’ll need to be ready to forgive. We’ve all made mistakes in the past, from simply saying rude things online, to building tools that might have had a part in making the Internet a less friendly place. What’s worse is that the Internet has a better memory than we do.

as people change, we’ll need to be ready to forgive

If we’re going to make massive, sweeping changes to make the Internet more fun, and weird, and friendly, we need to be fun, weird, and friendly. More importantly, we’ll need to be kinder. We may find ourselves needing to be kind even to those who took part in making the Internet the unfriendly place it is now. People can and do grow and change, and if we’re going to make a better world, we can’t hold their past mistakes against them (so long as those mistakes are truly in the past).

Ultimately, the people on the Internet are the Internet, and we can’t go home again. We can build a new home, though.

 

Featured image via DepositPhotos.

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

Source

from Webdesigner Depot https://www.webdesignerdepot.com/2018/11/the-web-cant-go-home-again/

Getting Started With DOMmy.Js

DOMmy.js is a super-lightweight, standalone Javascript library, designed to work easily with the DOM and produce powerful CSS3 animations via JS.

Full disclosure: I developed DOMmy.js. And in this tutorial I want to demonstrate how it can be used to keep your webpages nice and light.

DOMmy.js has a very shallow learning curve; it’s even shallower if you have ever used an old-generation style framework such as jQuery or Prototype.

DOMmy.js isn’t a next-generation framework like Vue.js, React, or Angular; these are tools which use new technologies such as the virtual DOM, dynamic templating, and data binding; you use next-generation tools to build asyncronous applications.

DOMmy.js is a Javascript frame work for writing “classic” Javascript code, working with the DOM at the core level. A Javascript framework like jQuery does a similar task, with three big differences:

• jQuery uses a proprietary, internal engine to work with selectors and to produce animations. This engine is entirely Javascript-based. Conversely, DOMmy.js allows you to select any element in the DOM and create powerful animations, by using the modern and super-powerful specifics of both Javascript and CSS3. I didn’t need to write a Javascript engine to work with DOM and animations. The cross-browser, flexible and powerful tools that allow you to do it are already available. I just wanted a Javascript structure that would assists developers in writing DOM controls and CSS3 animations using the Javascript language.
• DOMmy.js is a Javascript structure that looks at the future. It is written to be compatible with some of the latest versions of the major browsers, but I don’t want my code to be compatible with very old software like IE6/7 and similar.
• jQuery and Prototype both have complete APIs based on an internal engine, DOMmy.js provides controls for just two main things: DOM operations and animations; other tasks can easily be accomplished with vanilla Javascript or by extending the DOMmy.js central structure.

So, DOMmy.js is a cross-browser, super-lightweight (the minified version weights only 4kb), super-easy to learn, super-fast to execute, Javascript library. In a nutshell, with DOMmy.js you can:

• navigate throughout the DOM, by selecting and working with HTML elements and collections of elements;
• create powerful CSS3 animations and collections of animations;
• add (multiple) events, CSS properties and attributes to elements;
• use an element storage to store and retrieve specific content;
• work with a coherent this structure;
• have a cross-browser DOMReady fashion, with which you do not need to wait for resources (like images and videos) to completely load in order to work with DOM.

Installing DOMmy.js

Implementing DOMmy.js into your web page is simple. You only need to include the script through the script tag, and you’ll be ready to start. You can download the script and use it locally or load it through the project’s website:

<script src="https://www.riccardodegni.com/projects/dommy/dommy-min.js"></script>
<script>
    // use dommy.js
    $$$(function() {
        // ...
    });
</script>

The DOM is Ready!

Like I said on before, with DOMmy.js we don’t need to wait for the resources of the page to load in order to work with DOM. To do this, we use the $$$ function. The content placed inside this handy function will be executed when the DOM structure (and not the “page”) is ready. Writing code with DOMmy.js is super-fast. I wanted to create a snippet that allowed me to write as less code as possible, so I guess that nothing is faster than writing:

$$$(function() {
        // when DOM is ready do this
});

…in a standalone fashion. Of course, you can use as many DOMReady blocks as you want or need:

// block 1 
$$$(function() {
        // when DOM is ready do this
});

// block 2
$$$(function() {
        // when DOM is ready do this
});

// block 3
$$$(function() {
        // when DOM is ready do this
});

Select DOM Elements

So now we can start to work with our DOM structure. You can select the element you want by using an HTML “id”. This is done with the $ function:

// select an element by ID. 
// In this case you select the element with ID "myElement"
$('myElement');

And you can select the collection/list of elements you want by using a CSS selector. This is done with the $$ function:

// select a collection of elements by CSS selector
$$('#myid div.myclass p')

Of course you can select multiple elements by using multiple selectors, too:

// a selection of HTML elements
$$('#myfirstelement, #mysecondelement')

// another selection of HTML elements
$$('#myfirstelement div.myclass a, #mysecondelement span')

There are no limits to DOM selection. The elements will be included in the final collection with which you can work with the DOMmy.js methods.

Adding Events

Adding events to elements (in a cross-browser fashion) is very simple. Just use to the on method on the collection of element you want to attach the event(s) to with the specific event:

// add an event to an element that fires when you click the element
$('myElement').on('click', function() {
    log('Hey! You clicked on me!');
});

Note: the function log is a built-in function that works as a global-cross-browser shortcut for console.log. If the browser does not support the console object the result will be printed in a global alert box.

You can add multiple events at once, of course:

// add a events to an element
$$('#myElement p').on({
    // CLICK event
    'click': function() {
        log('Hey, you clicked here!');
    },
    
    // MOUSEOUT event
    'mouseout': function() {
        log('Hey you mouseovered here!');
    }
});

As you can see, you don’t need to apply the DOMmy.js methods to each element. You apply the methods directly to the result of the DOM selection and the internal engine will properly iterate through the HTML elements.

You can access the “current” element in the iteration simpy by using the this keyword:

 $('demo').on({
     'click': function() {
          this.css({'width': '300px'})
              .html('Done!');
     } 
 });

Working With Attributes

In the same way, you can add, edit and retrieve the values of HTML attributes:

// get an attribute
var title = $('myElement').attr('title');

// set an attribute
$('myElement').attr('title', 'my title');

// set multiple attributes
$('myElement').attr({'title': 'my title', 'alt': 'alternate text'});

The attr method works in three different ways:

• it returns the value of the specified attribute if the argument you provided is a string;
• it sets an HTML attribute to a new value if you pass two arguments;
• it sets a collection of HTML attributes if you pass an object of key/value pairs representing the element’s attributes.

Setting CSS Styles

Just like HTML attributes, you can set and get CSS values by means of the css method:

// set single CSS
$('myElement').css('display', 'block');

// set multiple CSS
$('myElement').css({'display': 'block', 'color': 'white'});

// get single CSS
$('myElement').css('display');

// get multiple CSS
$('myElement').css(['display', 'color']);

As you can see, with the powerful css method you can:

• set a single CSS property to a new value, if you pass two strings;
• get the value of a CSS property, if you pass one string;
• set multiple CSS properties, if you pass an object of key/value pairs;
• get an array of values, if you pass an array of strings representing CSS properties.

Getting and Setting HTML Content

With the html method you can set and get the element’s HTML value:

// set html
$('myElement').html('new content');

// get html
var content = $('myElement').html();

// logs 'new content'
log ( content );
    

Iteration

If you select more than one element, you can apply a DOMmy.js method to every element just in one call.
However, when you want to work with each element manually, like when you are getting contents (i.e. HTML content or stored content). In this case, you can use the handy forEach function in the following way:

// get all divs
var myels = $$('div');

// set a stored content
myels.set('val', 10); 

// ITERATE through each single div and print its attributes
myels.forEach(function(el, i) {
    log(el.attr('id') + el.get('val') + ' \n');
});

The forEach funtion is the preferred way to iterate through HTML collections of elements using DOMmy.js. When applied on a DOMmy.js element, it uses two parameters:

• element: the DOMmy.js element you are selecting. You can apply every DOMmy.js method to it;
• index: an index representing the position of the element in the collections of elements.

Storage

The storage is a place, that belongs to elements, where you can store as many values as you want and retrieve them at the desired moment. You can work with the storage by using the set and get methods:

// set storage
var myVal = "hello";
$('myElement').set('myVal', myVal);

// multiple storage
var mySecondVal = "everybody";
$('myElement').set({'myVal': myVal, 'mySecondVal': mySecondVal});

// get   
$('myElement').get('myVal') + $('myel').get('mySecondVal');  
// "hello everybody"

As you can see, you can store single item or multple items at once. The items you store belong to the element that you are selecting.
Note: remember that if you are selecting multiple elements, the item will be stored in each of these elements, even if the CSS is slightly different, because DOMmy.js recognizes each specific element:

// set an item to div#a and div#b
$$('div#a, div#b').set('myStoredValue', 10);

// get from #a, that of course is the same as div#a
$('a').get('myStoredValue'); // 10

Of course DOMmy.js internal mechanics identify “div#a” and “a” / “#a” as the same pointer to the same element, so you can safely work with storage and others DOMmy.js methods in a coherent way.

If you store the DOM element in a single variable, which is the best way to work with HTML elements, you can bypass concurrent calls and earn memory space:

const myEl = $("div#a div");

// store data
myEl.set('myStoredValue', 10);

// get data
myEl.get('myStoredValue');      // 10

CSS3 Animations

The crown jewel of DOMmy.js is its animation engine. This is based on CSS3 animations engine, so it works with all the major browsers. Animations are generated through the fx method, that accepts the following arguments:

• an object, representing the CSS property to animate;
• a number, representing the duration of the animation, in seconds. Default value is 5 seconds;
• a function, representing a callback that will be called once the animation is done;
• a boolean, representing whether to chain concurrent animations or not. Default is false.

Let’s see how to use the fx method, by creating two simple animations.

// simple animation
$('myel').fx({'width': '300px', 'height': '300px'}, 2);

Here we simply alter the CSS properties width and height of #myel in 2 seconds. In the following example we create the same animation with a duration of 1 second and with a callback function that will edit the HTML content of the element with the “Completed!” string.

You can access the current element by using the this keyword:

// simple animation with callback
$('myel').fx({'width': '300px', 'height': '300px'}, 1, function() {
        this.html('Completed!');
});

Chaining

You can create magic with “animation chaining”: by using true as a value of the fourth parameter, you can chain as many animation as you want. To do this, simple use the fx method more than once on a specific selector. In the following example we change the width of all HTML elements that match the “.myel” selector on multiple times:

var callBack = function() {
    // do something cool
};

// queue animations
$$('.myel').fx({'width': '400px'}, 2, callBack, true);
           .fx({'width': '100px'}, 4, callBack, true);
           .fx({'width': '50px'}, 6, callBack, true);
           .fx({'width': '600px'}, 8, callBack, true);

Of course you can chain everything. DOMmy.js’s structure allows you to set concurrent calls to elements:

// multiple calls
$$('div#e, #d')
    .fx({'font-size': '40px', 'color': 'yellow'}, 1)
    .fx({'font-size': '10px', 'color': 'red'}, 1)
    .attr('title', 'thediv')
    .attr('class', 'thediv')
    .attr({'lang': 'en', 'dir': 'ltr'});

Remember that the chained calls will be executed immediately. If you want to chain something at the end of a specific animation you have to set a callback for that animation.

Create an Event Handler That Fires Animations

Now, we want to set up a snippet that produces an animation on a specific element. This animation will fire when the user moves the mouse over the element itself and when he leaves back the mouse. At the end of each step, a proper HTML content will be set:

$('myElement').on({
    'mouseover': function() {
        this.fx({'width': '300px'}, 1, function() {
            this.html('Completed!');
        });
    },
    'mouseout': function() {
        this.fx({'width': '100px'}, 1, function() {
            this.html('Back again!');
        });
    } 
});

As you can see, with DOMmy.js is super-easy to work with CSS3 animations. Always remember that this refers to the current element.

Now, we want to produce a chained animation that alters the CSS style of an element in four different steps, using four different callbacks and fire this animation when the user clicks the element:

   var clicked = false;
   
   $('myElement').on({
    'click': function() {
        if( !clicked ) {
            clicked = true;
            this.fx({'width': '300px', 'height': '300px', 'background-color': 'red', 'border-width': '10px'}, 1, function() {
                this.html('1');
            }, true)
            .fx({'height': '50px', 'background-color': 'yellow', 'border-width': '4px'}, 1, function() {
                this.html('2');
            }, true)
            .fx({'width': '100px', 'background-color': 'blue', 'border-width': '10px'}, 1, function() {
                this.html('3');
            }, true)
            .fx({'height': '100px', 'background-color': '#3dac5f', 'border-width': '2px'}, 1, function() {
                this.html('4');
                clicked = false;
            }, true); 
        }
    } 
  });

You can see these snippets in action directly in the Demo section of the DOMmy.js project.

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

Source

from Webdesigner Depot https://www.webdesignerdepot.com/2018/11/getting-started-with-dommy-js/

Cyber Monday Deal: Elegant Themes Offers Its Biggest Discount Ever

There’s never a shortage of good deals to be found on a Cyber Monday, and this year is no different. Still, you usually have to do your share of searching to uncover some really great deals.

This little gem easily qualifies as the #1 Cyber Monday deal for designers and developers. It’s offered by Elegant Themes, the creators of the world’s most highly regarded premium WordPress theme – Divi.

Elegant Theme’s offer? 25% off on their Developer and Lifetime accounts, including a free assortment of Divi layouts.

A Few Words About This Exceptional Elegant Themes Deal

If you’re not familiar with Elegant Themes and its wildly popular products, here are a few things you need to know about this website-building tool provider and its Cyber Monday offer.

#1. Elegant Themes is the Ultimate WordPress Toolkit for Designers and Developers

By signing up for a membership you’ll get access to 87 different themes, 3 plugins, and the ultimate WordPress theme and visual page builder – Divi.

You’ll quickly discover how your new membership will forever change for the better, your website-building undertakings.

#2. You Get Unlimited Use

Pricing per website will become a thing of the past. With your Elegant Themes membership, you’ll be able to enjoy unlimited use. Take advantage of the Cyber Monday deal, and the one-time fee you pay will be reduced by 25%!

When you consider the outstanding value you get when paying the full fee for this superb collection of WordPress tools, it’s not hard to see why the Cyber Monday deal represents an opportunity you won’t want to let slip by.

#3. Elegant Themes’ Pricing Plan is About as Simple as it Gets

No beating around the bush, no teaser offers, and most certainly no bait-and-switch offers. It’s simply a matter of paying a one-time fee (at a discount!) for your membership to gain access to Elegant Themes’ entire collection of themes and plugins.

Better yet, you can use these themes and plugins to build as many websites as you want.

#4. You’ll Receive Products You Can Trust

Elegant Themes has been in the WordPress theme and plugin business for the past 10 years. During that time, they’ve created some of the world’s most popular products on the market, products they constantly maintain, refine, and improve – every single one of them.

What Comes With the Cyber Monday Deal

You’ll find “everything” to be quite impressive, since it includes a set of useful products website designers or developers would love to get their hands on.

First, There’s Divi – The World’s #1 Premium WordPress Theme

This is Elegant Theme’s flagship theme, and according to stats supplied by BuiltWith.com it’s the world’s most widely used premium WordPress theme. To call Divi a theme (as everyone does) is in truth somewhat of an understatement.

In reality, Divi is a website builder’s framework that, with it’s outstanding assortment of tools enables its users to build stunning, high-performance websites without coding and without any need to install and configure a collection of special-purpose plugins.

Divi’s enthusiastic community of over 500,000 users attests to its popularity.

Next, There’s the Divi Builder

This drag and drop website-building stand-alone plugin works with any theme. Its authors used the same visual page-building technology they used when creating the hugely successful Divi theme.

The Divi Builder’s intuitive visual design interface enables you to build anything and everything and customize what you’ve created down to the smallest detail.

The Extra WordPress Theme

Extra is Elegant Theme’s ultimate magazine WordPress theme. It’s powered by the Divi Builder framework and extends the Builder’s capabilities with a set of 40 post-based content modules that’s perfect for creating online publications and blogs.

All that’s required of you when using this magazine theme is to choose the content elements you want to use and customize and arrange them to fit your needs.

Bloom – An Easy-to-Use Lead Generating Plugin

This Elegant Themes product makes gathering leads and building an email list a piece of cake. It offers six opt-in types, each of which can be customized to create a sophisticated targeting approach designed to engage visitors and capture leads.

This easy-to-work-with plugin does your email list-building for you. It has every tool needed to entice a visitor to become a follower and a customer.

Monarch – A Plugin Designed to Assist You with Your Social Sharing Activities

It’s social media that makes the Internet tick, and social sharing that uses this media to benefit businesses. Monarch was designed to help you engage and empower vibrant online communities, provide social sharing support, and increase the number of your followers.

Its authors took great care to ensure its use would in no way compromise the integrity of any of your website designs.

Wrapping Up

Given what you get for your money, Elegant Themes’ Cyber Monday deal not only provides value; it provides it in spades. Even its authors call their deal crazy; no doubt because 25% represents the biggest discount they’ve ever offered.

If you were to pay the full fee for Divi, the Divi Builder, Extra, Bloom, and Monarch, it would still be a deal you would not want to pass up.

 

[- This is a sponsored post on behalf of Elegant Themes -]

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

Source

from Webdesigner Depot https://www.webdesignerdepot.com/2018/11/cyber-monday-deal-elegant-themes-offers-its-biggest-discount-ever/

3 Essential Design Trends, December 2018

It can be hard to think about, and take on new design projects at this time of year. Maybe a little design inspiration is just the thing to pep you up and get you thinking about wrapping up those projects.

There’s a continued shift toward designs with more complex visual effects and these trends are no different with stacked text elements, glitchy video effects and artistic imagery.

Here’s what’s trending for the end of 2018:

1. Stacked Text

The days of the oversized, three-word homepage headline are numbered.

Designs are moving toward blocks of stacked text on the homepage. Visually, the weight of an oversized headline is still there. Informationally, there’s a lot more room for messaging. (Just don’t pack these headlines with unnecessary words.)

The key to making this design trend work is typeface selection. You need a font that’s easy to read and gives you plenty of room between lines (but not too much room). Typefaces with exceptionally long ascenders or descenders can be an issue here.

While designers are experimenting with all kinds of different typefaces, number of lines of stacked text, and alignments, there are plenty of all caps variations (that gets rid of the descender problem) and sans serifs. But don’t feel like this is a rule. Upper- and lowercase letters can look great in stacked blocks, as can serif typefaces.

When picking a typeface for this treatment, look for the following:

• Standard or medium x-height without long or elaborate swatches or flourishes. These characters can cause readability concerns in blocks of text.
• Regular shapes that aren’t too condensed or flattened. You know you are close when the bowls of each “o” is fairly round.
• Lettering with a style that seems to take on the mood of its surroundings. A font with too much personality here could overpower the actual words.

Home

2. Glitchy Video

Wait…that video is glitchy…on purpose?

While it used to be that glitchy video was a result of a slow internet connection or page load speed, glitchy video is a trend. Maybe we can attribute it to things like TikTok, a growing social media platform that uses this technique. Maybe we can attribute it to the fact that it stops users and makes them look. (Even if they might ask if that’s supposed to happen or not.)

Either way, glitchy video effects are a definite web design trend.

They might happen in the form of background video with distortions or glitch effects, animations that are activated by a hover or click with the same jerky movements or can seem totally random in a full-screen video.

The evolution of glitch effects might also trace to the rise of brutalism. This “harsh” design technique has a similar feel as many of the brutalist designs that we’ve seen.

When planning to use video in a way that’s glitchy or distorted, it’s important to use the trend in a way that has some purpose or intent. If the video just looks poorly created or bad, users will be turned off rather than intrigued by the design.

It also takes a certain type of content for this effect to really have an impact. It is a gritty visual. It won’t mesh with soft content.

The effect is often paired with more minimalist design frameworks and often doesn’t include a while lot of color. (Probably because the “trick” in the design is the glitch effect. With too many other things going on, it could turn into a design disaster quickly.)

If you want to try a glitch effect, opt for a simple design pattern and use it in a way that matches content. (My favorite of the examples below is Studio Digital Creatif, which has a very old-school feel where the glitchy video seems like a television screen from decades past.)

3. Almost Abstract Art

Exercise your creative muscles with more artistic representations on website homepages. While these designs might seem best suited for art galleries, abstract art is finding its way into a number of projects. (And it’s a trend we can get onboard with.)

What’s nice about this trend–and concept–is that it can be accomplished in so many different ways. Each of the examples below takes a different approach to using almost abstract art in the design.

• Montreal in Motion uses moving colored blobs to pull you into the design. It looks a little like water moving or maybe colors in the evening sky. Either way the artistic quality of the background draws users in.
• Barkli Gallery uses an actual piece of art to draw users into the design. This is an appropriate use for a gallery, but what’s nice is that the art isn’t showed full-screen in its entirety. You only see a portion of the image, giving it an even more abstract feel.
• Wildsmith Skin uses a split screen design with a person on the left and an abstract image for balance on the right. You might think the abstract image is a cellular-level view of skin or maybe a look at the product under a magnifying glass. Either way it creates a nice harmony with the main image and generates a lot of visual interest.

Conclusion

When in comes to design trends, do you like to be ahead of the curve or a little behind it? The examples above are pushing some of the boundaries of what has been popular visually for a while, with fresh takes on everyday ideas.

What trends are you loving (or hating) right now? I’d love to see some of the websites that you are fascinated with. Drop me a link on Twitter; I’d love to hear from you.

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

Source

from Webdesigner Depot https://www.webdesignerdepot.com/2018/11/3-essential-design-trends-december-2018/

Popular Design News of the Week: November 19, 2018 – November 25, 2018

Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers. 

The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week.

Note that this is only a very small selection of the links that were posted, so don’t miss out and subscribe to our newsletter and follow the site daily for all the news.

10 Small Design Mistakes We Still Make

 

The State of JavaScript 2018

 

25 CSS Color Palettes Template Width Codes

 

Mute all Background Noise During your Calls

 

“The World’s Gone Flat!” -  Evolutions in Interface Design

 

Sketch Vs. Sketch

 

23 Clever Typographic Logos

 

10 Skills that Make a Great Designer

 

Use Adobe Draw to Get your Illustrations, Art and Drawn Designs into 3D

 

Why are Micro-Experiences so Important to UX Design?

 

Site Design: Humen

 

21 of the Most Beautiful Objects and Designs in the World

 

How to Create Compelling Content for your Portfolio Site

 

New Storybook.js in the Browser

 

A Small French Privacy Ruling Could Remake Adtech

 

Armchair VGUX: No Man’s Sky

 

This is the Most Complex Generative Design Ever Made

 

9 Steps in the Lifecycle of a Design Trend

 

Less is More – Using Lean UX to Assess Product Viability

 

This is (almost) Everything I Learned in Design School

 

Editorial Layouts, Floats, and CSS Grid

 

How to Build a WordPress Theme from Scratch

 

The Most Complete Design Thinking Tools & Resource Collections

 

The Mystery Font that Took Over New York

 

The 6 Rules to own Design

 

Want more? No problem! Keep track of top design news from around the web with Webdesigner News.

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

Source

from Webdesigner Depot https://www.webdesignerdepot.com/2018/11/popular-design-news-of-the-week-november-19-2018-november-25-2018/

5 Tips for Using Curation As a Content Strategy

Every day, thousands—if not millions—of people are all asking themselves the same, simple question: what do I post now? If you’ve been reading for a while, you know what I’m getting at. Regular content: It’s good for your website’s soul. Also its relevance.

But what if I told you that you didn’t have to write anything for yourself at all? What if I told you that there are thousands—if not millions—of hard-working people getting paid to write stuff every day? (Who really don’t need the competition, thank you very much.) Okay, that last bit was me (mostly) kidding. My point is that you don’t necessarily need to do a lot of writing to keep your site alive.

The alternatives are simple: outright plagiarism, and content curation. Guess which one I’m going to talk about today. Well, both…but I’m going to talk about plagiarism last; if I start now, I’ll go rabid, and I’ll never get around to the curation bit.

What Should You Post?

Well, the “what” is simple. You want to post links to things that other people have created that directly relate to your industry, product, and/or general subject matter. You want to go looking for the original source, and link to it. If the content is embeddable (like a YouTube video), then go ahead and embed it on your site.

Link to everything: tutorials, reviews, meme videos, discussion posts on forums, the works. If it’s relevant and/or makes you look good, link to it. Heck, link to content on your direct competitors’ sites, if they’ve made something good. That’s right, send traffic to competitors on occasion (not all the time). If you truly believe in your own product/service, that’s a hell of a power move. If your competitors respond in kind, that could be the start of some lovely cross-promotion.

Where Should You Post?

Well, on your website. That’s what this is all about, right? Look, it can help to post some things on your social media accounts as well. After all, it can help to keep your name in people’s social feeds. Don’t post everything, though. Post the best links, and invite people back to your own website to see more. Save some value for the people who make the trip.

Besides, if posting links is all you do on social media, people may quickly get bored. It’s called “social” media, after all. You’re supposed to actually interact with your followers, maybe even get to know them a bit. The more they like you as people, the more likely they are to like your business.

Organization and Format

Okay, so you’ve got the what and the where. How are you going to present all of these links? Well, first you need to decide how much of your content is going to be original, and how much is going to be curation. On a blog-style site like—for example—Web Designer Depot, we have a lot of both. In cases like this, embrace the listicle. God knows I have.

If you’re going to be posting nothing but links, then you need to ask yourself a few questions:

• Is the subject matter primarily visual or text-based?
• Do I want to add commentary to each entry?
• Do I want to user-generated discussion on my site?

These questions will form the core of your design strategy. Visual content may require the Pinterest treatment…that is, thumbnails everywhere. Think of the old old CSS gallery format.

If it’s all about the text, you could try the Daring Fireball approach. Headlines link directly to external articles, but there’s room for quotes from the articles, and the curator’s own commentary.

If you want to post links, but don’t feel like writing down anything more than a headline, there’s the Digg/Reddit formula implemented our sister site Web Designer News. The voting systems really are optional.

Commentary & Comments

Deciding whether or not to add your own commentary should depend on a couple of things: Is your audience expecting you to provide an opinion? Sometimes, that’s what an audience will keep showing up for. How much time do you have? Do you just want to share stuff you thought was cool, or do you want to contribute to the conversation?

In the end, either approach is a perfectly valid choice.

The matter of user-generated comments is another thing that would largely be dictated by the amount of time you have. Ask the admins here at WDD. Moderating comments is a time-consuming and sometimes difficult job.

That is, of course, when you get any comments at all. It may be that your audience just wants to click links, and doesn’t necessarily feel like leaving comments. In cases like those, an empty comments section might seem more intimidating than inviting. When it comes right down to it, most of us Internet Users are consumers first and foremost. Feedback requires time and effort a lot of us don’t always feel we have.

For the Love of God, Do Not Copy and Paste the Whole Thing

There are some blogs out there that only kind of plagiarize content when they literally copy and paste the whole thing. By “kind of”, I mean that they do post a link back to the source. But why would anyone click that when it’s all right there? And then some don’t even do that, and pretend the article is theirs.

Now, I’m assuming you’re not a total jerk. You don’t want to claim these things as yours. Just keep in mind that for better or worse, people who get paid to make stuff on the Internet have their revenue directly and indirectly tied to their traffic. Do not copy and paste. Just link. Include a short quote at most. (The only exception is the previously-mentioned embeddable content.)

And that’s it! You’re on your way to building a web content empire! Probably! You still have to market it, just like any blog.

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

Source

from Webdesigner Depot https://www.webdesignerdepot.com/2018/11/5-tips-for-using-curation-as-a-content-strategy/