Pixels of the Week – February 19, 2016

This content is 9 years old. Remember that the following content might be outdated.

Every week I post a lot of my daily readings about Web, UI and UX Design, mobile design, webdesign tools  and useful ressources, inspiration on twitter and other social networks.

This week’s selection: the idea of the “front end designer” job description, performance for websites and web apps, micro-moments, micro-interactions, animations and semantic motion, user experience, responsive wireframes and workflow and the concept of content inventory and content priorisation, amazing web apps that behave like native apps. In the tools selection: input detection, wtfHTML, web notifications generator, a tool to create animations and a HTML styleguide generator.

TL;DNR the one you should not miss

#Design #Development

Front End Design, by  Brad Frost. AMEN. “Here’s the thing: HTML, CSS, and presentational JavaScript build user interfaces – yes, the same user interfaces that those designers are meticulously crafting in tools like Photoshop and Sketch. In order for teams to build successful user interface design systems together, it’s crucial to treat frontend development as a core part of the design process.”

Interesting article

#SVG #Color

The feColorMatrix SVG filter explained by Una

#CSS

Really interesting read: The future of loading CSS

#performance

Performance matters: How slow is too slow in 2016?

 

#Performance

Designing faster web apps,  a few practical tips and solutions, from code optimization to percieved performance

#Typeface

Choosing and pairing typefaces for cookbooks

#Design

Methods for Using Micro-Interactions on Your Site, a few tips to design those little moments that close the gap between human and machine

#Design #Motion

Motion with Meaning: Semantic Animation in Interface Design, a really nice article on how to craft delightful animations that will feel right in the interface

#UX

This is what great UX looks like. (Episode 1) a few examples of what great UX is

#Responsive

I’m not the only one doing content inventories and wireframes in AI: Creating Content Wireframes For Responsive Design . And on the same topic, Wireframe in content blocks.

#Design

A few tips for beginners: How To Design The Best Blog Graphics With Free Tools And Design Theory

 

Inspiration and Great ideas

#Responsive

Responsive web design: What the Internet looks like in 2016

Tutorials

#Responsive

Responsive Web Design Workflow, an online workshop with Stephen Hay

#CSS #Email

The Fab Four technique to create Responsive Emails without Media Queries, the solution involves the CSS calc() function and the three width, min-width and max-width properties.

Useful ressources, tools and plugins that will make your life easy

 

#JS #Animation

Spiritjs.io this little gost is really cute, also the tools looks promising 😀

#HTML #CSS

wtfhtmlcss.com reasons HTML and CSS might make you say what the fuck.

#Notification

A nice  notification generator where you can test those little things

#Styleguide

Useful: Poor man’s style guide, a frontend styleguide for the pragmatic

#Mouse #Touch

What-input, a global utility library for tracking the current input method (mouse, keyboard or touch)