Original Source: http://feedproxy.google.com/~r/tympanus/~3/88gNj-zE9ZA/

Today we’d like to show you how to create a little experimental glitch-like effect on an image. The effect will be powered by CSS animations and the clip-path property. The technique involves using several layers of images where each one will have a clip-path, a blend mode and a translation applied to it. It was inspired by the technique seen on the speakers page of the 404 conference.

Please note this effect is very experimental; we use several properties that won’t work in older browsers. The clip-path property is not supported in IE or Edge.

We also use CSS variables for setting some properties that will allow for an easy adjustment of the effect.

Breaking down the effect

When searching the web for an easy to use and light-weight glitch implementation, we came across this question on Reddit. Somebody was asking how the glitch effect was pulled off on the speaker line up page of the 404 conference. The glitch effect was made using CSS animations on a stack of three images that are the same. The animations consist of a rapidly changing clip property on all layers except the first one. Additionally, the layers are being moved slightly. So what we are seeing, is slices of the image, slightly offset and in constant movement.

We wanted to experiment with this and recreate the effect using the clip-path property instead. Although it has less browser support (it doesn’t work in IE or Edge), it allows for a more flexible usage since we can use percentage values and apply it to elements that are not necessarily positioned absolutely.

Combining the effect with background blend modes, allows us to create some interesting looking image effects.

The way this works is to create an image stack where each overlaying image will animate its clip-path in, what looks like, random sizes. We’ll use a stack of 5 images:

<div class=”glitch glitch–style-1″>
<div class=”glitch__img”></div>
<div class=”glitch__img”></div>
<div class=”glitch__img”></div>
<div class=”glitch__img”></div>
<div class=”glitch__img”></div>
</div>

Let’s have a look at the main styles for the hover effect that you can see in the last demo. Note that we’ve defined some variables previously, but they should be self-explanatory:

.glitch {
position: relative;
width: var(–glitch-width);
max-width: 400px;
height: var(–glitch-height);
max-height: calc(400px * 1.25);
overflow: hidden;
margin: 0 auto;
}

.glitch:hover {
cursor: pointer;
}

.glitch__img {
position: absolute;
top: calc(-1 * var(–gap-vertical));
left: calc(-1 * var(–gap-horizontal));
width: calc(100% + var(–gap-horizontal) * 2);
height: calc(100% + var(–gap-vertical) * 2);
background: url(../img/1.jpg) no-repeat 50% 0;
background-color: var(–blend-color-1);
background-size: cover;
background-blend-mode: var(–blend-mode-1);
}

We don’t want to show the sides being cut off, so we make sure that the image dimensions take the gap, i.e. the movement into consideration.

Then, we set the background colors and blend modes for each layer:

/* Set the background colors for the glitch images*/
.glitch__img:nth-child(2) {
background-color: var(–blend-color-2);
background-blend-mode: var(–blend-mode-2);
}

.glitch__img:nth-child(3) {
background-color: var(–blend-color-3);
background-blend-mode: var(–blend-mode-3);
}

.glitch__img:nth-child(4) {
background-color: var(–blend-color-4);
background-blend-mode: var(–blend-mode-4);
}

.glitch__img:nth-child(5) {
background-color: var(–blend-color-5);
background-blend-mode: var(–blend-mode-5);
}

As this is going to be a hover effect, we want all layers except the first one to be hidden by default:

.glitch__img:nth-child(n+2) {
opacity: 0;
}

Then, on hover, we show all layers:

.glitch:hover .glitch__img:nth-child(n+2) {
opacity: 1;
}

And we also apply the animations and a transform to each layer:

.glitch:hover .glitch__img:nth-child(2) {
transform: translate3d(var(–gap-horizontal),0,0);
animation: glitch-anim-1-horizontal var(–time-anim) infinite linear alternate;
}

.glitch:hover > .glitch__img:nth-child(3) {
transform: translate3d(calc(-1 * var(–gap-horizontal)),0,0);
animation: glitch-anim-2-horizontal var(–time-anim) infinite linear alternate;
}

.glitch:hover > .glitch__img:nth-child(4) {
transform: translate3d(0, calc(-1 * var(–gap-vertical)), 0) scale3d(-1,-1,1);
animation: glitch-anim-3-horizontal var(–time-anim) infinite linear alternate;
}

/* Hover flash animation on last image */
.glitch:hover > .glitch__img:nth-child(5) {
animation: glitch-anim-flash 0.5s steps(1,end) infinite;
}

The calc(-1 * var(–gap-horizontal)) basically allows us to set a negative value of a given variable.

Have a look at this slow motion visualization to see what’s going on under the hood (this GIF is quite big, so it might take a while to load):

The last layer is only flashing and moving slightly while the others also get cut by a clip-path.

Let’s have a look at one of the animations for setting the clip-path:

@keyframes glitch-anim-1-horizontal {
0% {
-webkit-clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
}
10% {
-webkit-clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
}
20% {
-webkit-clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
}
30% {
-webkit-clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
}
40% {
-webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
}
50% {
-webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
}
60% {
-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
}
70% {
-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
}
80% {
-webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
}
90% {
-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
}
100% {
-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
}
}

The slices will go from tiny, to a bit larger and also nothing, leaving a “pause” on some of the frames and then starting again from another position.

A great tool to visualize clip paths is Clippy by Bennett Feely.

The final animation is a simple flash of the last layer:

@keyframes glitch-anim-flash {
0% {
opacity: 0.2;
transform: translate3d(var(–gap-horizontal), var(–gap-vertical), 0);
}
33%, 100% {
opacity: 0;
transform: translate3d(0,0,0);
}
}

This looks especially interesting when applying an overlay blend mode with a fitting color.

Note that we can also apply this effect to text elements. Check out the demos to see it in action!

And that’s it! We hope you’ve found some inspiration in this little experiment.

References and Credits

Images by Unsplash.com
imagesLoaded by Dave DeSandro

CSS Glitch Effect was written by Mary Lou and published on Codrops.

Original Source: http://feedproxy.google.com/~r/1stwebdesigner/~3/XpS3Na-3JQA/

Reddit is the #1 social news community for every topic. Sports, gaming, fishing – there’s a community for everyone. Naturally this includes all kinds of design topics from web to mobile.

So I’ve curated my picks for the top 10 subreddits geared towards designers. Each sub comes with a different community, but all of them can be useful if you’re looking for design ideas or advice from other designers.

Take a look and see what you think!

1. /r/Design

First in this list has to be /r/Design. This subreddit is also one of the largest digital design subs with over 200k subscribers.

Granted, this community isn’t just focused on interface design. It runs the gamut of digital design including logos, branding, print work and even motion graphics. There’s a lot you can learn from skimming the front page.

But it’s also one of the best subs to pick up ideas for new projects, find cool interviews, or just share your ideas with the community. Since it’s a fairly large sub you’re guaranteed to get some comments on anything you post.

2. /r/web_design

The default web design community is /r/web_design and it has been around for quite a few years. This one’s even larger than the main design sub with more active posts per day.

At the time of this writing it has a total of 290k subscribers and counting. Many front page articles relate to guides, tutorials and general resources for web design.

But this is also a place for newbies to come and ask basic questions. You’ll see a lot of beginner-level questions on the front page so this can feel like an introductory forum at times. Yet there’s also a good number of pros who lurk around as well. This one is full of gems.

3. /r/webdev

It may seem weird that I’m recommending a development community in a UI/UX design list. But /r/webdev isn’t just for developers. In fact, it’s mostly a frontend community so there’s a lot of overlap.

The front page updates daily with new posts, most of which relate to professional development work. HTML, CSS, and JavaScript are key topics. If you consider yourself a designer who codes, you should definitely subscribe.

But even if you don’t code, this is still a great community to keep up with the pulse of modern web development.

4. /r/userexperience

Reddit’s /r/userexperience sub is pretty small but very active. Most regular users comment frequently and the sub has grown a lot over the years.

User experience is a tricky subject because it doesn’t just relate to websites. It can cover mobile apps, software and pretty much anything that’s interactive and digital.

This sub is a fantastic place to learn and pick up advice relevant to the UX field.

Also, if you want another place to browse, this subreddit is one of the more active UX communities.

5. /r/UI_Design

General interface design is a broad topic with a lot of room for discussion. The /r/UI_Design community is a small one, and not necessarily the most active.

But it does allow for a huge range of topics – so long as they relate to interface design. It’s a great place to share an article you’ve read or even share an article you wrote on your blog.

Each day there’s an estimated 2-4 new posts, so the front page does move. The community is also engaging if you pose a great question about design.

6. /r/servers

You may not think that designers need to know anything about servers. But if you work as a freelancer, then you should understand them – at least at a basic level.

On the /r/servers subreddit you’ll find advice for managed hosting, VPS hosting and shared hosting alike. Depending on the type of site you’re launching, this subreddit can help you make a great decision that will fit your needs.

However, it can also be a fairly complex community, discussing more advanced technologies like memcached & varnish. You certainly don’t need to delve that far, but it helps to have a working knowledge of web servers.

7. /r/learnwebdesign

While this sub is small and very quiet, I still think /r/learnwebdesign is a great place to subscribe.

It’s a small community geared towards beginners and semi-intermediate designers. Every post links to a tutorial or detailed article that can help improve your design skills.

Articles range from how-tos in Photoshop all the way to more technical guides for frontend design in the browser.

8. /r/design_critiques

Here’s a much larger and more active sub, totaling nearly 30k subscribers at the time of this writing.

In /r/design_critiques, you can post your work and ask for honest critiques. The community is full of beginners, semi-skilled pros and industry veterans alike. This means the critiques you’ll get can range from simple quips to incredibly useful paragraphs.

For a free community, it’s one of the best you’ll find on this topic. Whether you just need a small pick-me-up or need genuine design advice, I highly recommend checking out this sub.

And, you can even learn from the critiques of other people’s work – if you browse around long enough.

9. /r/usability

Humans are the ones who use technology and it’s humans that we’re designing for. The /r/usability community forces you to keep this in mind by sharing articles related to HCI and general usability.

This sub is not just about web design. It covers everything related to usability from wearables to desktop software.

But what I’ve found is that most usability topics relate to each other. Yes, there are differences between mediums and devices, but usability is an easy topic to read through once you understand the main goal: to help the end user.

10. /r/UnsolicitedRedesigns

I stumbled onto this sub a few years back and it’s been one of my favorites to hit every so often. As the name suggests, /r/UnsolicitedRedesigns is a curation of redesign projects created by designers – just for fun. They include new branding & identity designs, new websites and mobile apps.

It’s a pretty small community and there’s usually about 1-2 new posts per week.

Still, the community is fantastic and some of the constructive critiques are surprisingly helpful. It’s a place you come back to time & again for new ideas.

Original Source: https://www.webdesignerdepot.com/2017/12/whats-new-for-designers-december-2017/

The holiday season is upon us, and that’s the perfect time to give yourself a few design goodies. While the season for new releases has slowed some, there are still plenty of news design tools and beta releases to test out. Take the opportunity to play with some of these great new elements for designers.

If we’ve missed something that you think should have been on the list, let us know in the comments. And if you know of a new app or resource that should be featured next month, tweet it to @carriecousins to be considered!

DesignEvo

Want to create a logo on your own in just a few minutes? DesignEvo is a free online logo maker that has more than 3,000 templates to help you create a simple logo in a hurry. Search by template type (or brand category) to start working on a custom logo right away. Everything you need, including icons, color swatches and fonts, are included in your logo design.

Oiga

Project management tools are a must have part of the creative workflow. Every project comes with assets, colors, fonts, files and schedules that team members have to be aware of. Oiga, which is currently in beta, is a modern project management tool that helps you keep track of everything in one place. It’s designed for remote work and unlike many other project management tools, it also includes an asset manager so that everything is in one place.

Google Poly

Google is developing a great repository of three-dimensional assets for AR and VR apps. What’s even better is that all of these assets are open source and come with creative commons licenses so that you can use them. The database is growing quickly and is a great resource for getting started with these cutting-edge apps.

Flawless

Flawless is an app that uses real-time comparisons of expected and implemented designs to help you ensure the quality of mobile apps.

SessionStack

Ever wonder what your app looks like to users? SessionStack helps you see web app problems in the same way users do. This tool can help you pinpoint and correct small issues before they become major problems. The biggest feature of this tool is the record and playback tool.

Direction Reveal

Direction Reveal is a plugin that detects which direction a user enters and exits a block so that content and hover actions follow the same user action. Hidden content animates from the direction the user enters or can animate based on the direction a user leaves. This makes for pretty interesting animated effects. Animations can swing, slide or rotate.

Color Scheme Generator

Generate a color palette from a base color. See different optimum color combinations rooted in color theory. This is a great tool for designers that struggle with picking colors.

Superstruct

Superstruct makes it easy to define interfaces and then validate JavaScript data against them. It is designed for validating data at runtime, so it throws (or returns) detailed runtime errors. This can be useful for accepting arbitrary input in a REST or GraphQL API. But it can also be used to validate internal data structures at runtime.

World City Icons

The world cities icon pack includes graphic representations of popular cities from around the globe. Each icon is drawn in a vector format and collections include Asia and Oceania, Middle East and Africa, Europe, North and Central America and South America. Each icon comes in line style, but can be filled.

Threed

Threed helps you generate three-dimensional mockups in-browser. Just upload a design, adjust a few settings and download the mockup. The tool, which is still in beta, is free to use.

Scri.ch

Draw something on the screen and save the unique link to share. It’s like the grown up (digital) version of an Etch-a-Sketch.

Akaunting

With so many creative professionals working in the gig economy, it’s important to have plenty of effective and low-cost tools to help with business tasks. Akaunting is free accounting software for small businesses and freelancers. It is an open source tool that provides invoicing, expense tracking and basic accounting so you can keep up with finances easily.

Orion

This tool bills itself as the best icon tool with a large database of elements to search, download and customize. The search features are robust when it comes to finding just what you envision (and don’t want to draw yourself).

Electron Toolkit

Electron Toolkit is a lightweight open source application to launch Electron apps. It bundles a suite of tools to generate assets and artifacts such as installers, binaries, icons, screenshots, and product videos. You can even generate full landing pages.

Instabug Integrations Tool

The Instabug Integration Tool help you receive detailed bug reports and in-app messages directly from whatever tools you use. Whether it’s Jira, GitHub, Slack and more, there are dozens of integrations to help your team focus on what matters without disrupting workflow.

Creative Equals

There’s a lot of talk about making sure the creative space is welcome, diverse and inclusive. Creative Equals includes resources and information to help you or your business, and the industry as a whole, drive change and provide a more equal playing field for all creatives. It’s packed with training resources, campaigns and even a talent recruiting tool.

Lona Studio

Airbnb has a new tool for defining and using design systems and it is making the experiment public. “What if we had a single design system specification that encodes all of the detail needed to accurately translate from design to code? This spec would act as the source of truth. An engineer could then write code which captures the design with 100% accuracy. If the design file is missing a key piece of information, the designer and engineer could work together to add it to the source of truth.” That’s the concept of Lona, which operates on component files and is supposed to work with your current design tools.

Ballada

Ballada is a brush-style typeface with a slanted stance and plenty of loops and curves. It has a somewhat feminine feel and is designed for display use. It is free for personal and commercial projects.

Brewmaster Gothic

Brewmaster Gothic is a block-style sans serif for display type. The typeface is powerful and bold and includes a full set of uppercase letters.

Onomber

Onomber is an interesting geometric style typeface with mixed cap heights for extra visual interest. It has open letterforms that can work well in display uses.

Spirited

Spirited is a set of hand-drawn letters that create a modern script with a retro feel. This typeface could work for logos, display type or other special projects that require a font with a special touch.

Studio Gothic

Studio Gothic is a simple sans serif with uniform stroke widths with thick and thin options. The versatile typeface can work for display or larger text blocks and has a modern feel.

3500+ Textures, Brushes, Icons, Watercolors & More Graphic Elements

Source

p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

Original Source: https://www.webdesignerdepot.com/2017/12/to-hell-with-subtle-design/

Don’t try to be so damn subtle in web design.

Okay, let me explain that…

About a year or so ago, I made a terrible mistake: I tried to be funny; More specifically, I tried my hand at stand-up comedy. I sat down, wrote out a bunch of jokes that I found amusing; and collected some online acquaintances in video chat to try them out. I did it this way because I live in Mexico, but my first language is English.

And here’s what I found out: Unless people already know you, they may not immediately understand you when you’re trying to be clever. They tend to take what you say rather literally. Also, they will only trust you with a joke that has a long set-up if they already think you’re funny. Also, Mexicans can have a really dark and subtle sense of humor that doesn’t translate to everyone else and it has rubbed off on me. The only Mexican in the virtual room was my biggest fan.

Cleverness is overrated; Subtlety is useless

In web design, those first two points are the ones that truly apply: Cleverness is overrated; Subtlety is useless.

Just give them what they want without making them jump through mental hoops. As a comedian, I failed my “audience” by presenting them with small puzzles. I mean, I thought they were just clever references with obvious punchlines. I figured if they just thought about it for a split second, they’d laugh like I did. That was silly of me.

When people go to a comedian, they don’t want puzzles. They want laughs. That’s why some of the most obvious jokes can carry entire careers. It’s why comedians usually start a set with quick, almost-guaranteed jokes. Once they have captured the attention of the audience—once the audience trusts them to deliver the laughs—they can go into subtler material, and longer jokes.

When people browse the Internet looking for information, they don’t want websites to be puzzles. They don’t want references or clever gimmicks. Those things can be a nice bonus (or Easter egg) but users shouldn’t have to get through them to get to the information or product they want.

So What Exactly Do You Want Us To Stop Doing?

I’m so glad you asked! Let’s tackle subtlety and overwrought cleverness in UX Design: Every time someone comes up with a newfangled form of navigation, an overly-artistic layout, or hides content behind unnecessary clicks, Sir Tim Berners-Lee cries. Stop making Sir Tim cry.

Every time someone…hides content behind unnecessary clicks, Sir Tim Berners-Lee cries

I’m not saying to never do anything new or interesting with your layout. I’m saying that you need to be more careful about it. Every time you consider a brand new approach in web design, ask yourself if it’s going to make things easier or harder for users to find. Then go ask some users. Any users. For the love of all that is holy, stop hiding information and UI elements that people need.

Now, on mobile devices, it might make some sense to hide your navigation behind an extra tap, but that’s really the limit. On tablets and desktop computers, primary navigation just shouldn’t be hidden. It just shouldn’t. There is no good reason. Aesthetics is not a good reason.

Let’s take another example: forms. There is no reason they should not look like forms. No matter how clever it might seem to make text inputs look like something else, it’s really not a big help. Not unless you put up a sign that says, “Click here, and here, and here…”, and then you’re just making more work for yourself.

Yes, forms are sometimes ugly, boring, and frustrating—just like in the offline world. Can they be better? Yes, but only as long as they are still recognizable as forms. The moment they look like anything else, users have to spend extra time figuring them out. Congratulations! You made forms more irritating.

The bits of your website that users actually interact with don’t have to be clever, innovative, or subtle. They just need to work.

On Subtle UI Flourishes

Let’s address UI design next: drop shadows, gradients, and contrast. Specifically, let’s talk about the near-complete absence of contrast on some sites. I’ll admit, this is a trap I’ve fallen into many times, myself: Please don’t look at my current writing portfolio, I’m just about to redesign it yet again.

When you make a gradient, or a drop shadow, it can be tempting to make it as subtle as possible. Light grey stuff on white backgrounds looks elegant. Or at least that’s something we tell ourselves. The truth is, if your user is looking at your site on a screen where that’s not quite calibrated right, a lot of those details can disappear entirely.

If you’re depending on something like a drop shadow or gradient to create affordances (or clues as to how the interface works), having those details disappear can seriously affect usability. It’s a different kind of subtlety, yes, but it needs to be addressed.

Conclusion

Don’t hold back. Be bold with your colors, your contrast, and your user experience design. Go wild! The only real constraints should be usability, and efficiency. And by that I mean don’t hide the content or features that your users are looking for.

Metaphorically hit them in the face with what they want. It’s what they want.

3500+ Textures, Brushes, Icons, Watercolors & More Graphic Elements

Source

p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}