Pixels of the Week – August 19, 2016

Pixels of the Week – August 19, 2016

This content is 8 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: PWA design, performance and tutorial, nice typography tips, a few CSS tutorials (writing-mode, creating your own language), human centered design principles, manipulation in UX and the use of wireframes, CSS animations and how to make them smooth and communicate them to the team. You’ll also find a few tattoos and illustrations in the inspiration section, a bear to remote control your devices and another one to bring you UX related articles, a scroll animation library and some SVG icons.

You can follow me on twitter to get a dose of links every days.

TL;DNR the one you should not miss

#PWA

Designing Responsive Progressive Web Apps, a great read on the non technical challenges we will face with Progressive Web Apps

Interesting article

#Typography

How to hack beautiful flourishes into your font

#CSS

CSS writing-mode, to changes alignment of the text so that it can be read from top to bottom or from left to right.

#Design

Human Centered Design & The 6 Fundamental Principles of Interaction Between Products and Users

#Wireframes

Wireframes are waste (use them as communication tool with devs and others designers, not to validate with clients)

#Design

Is it ever okay for designers to manipulate people?, excellent read / small podcast on helping people overcome the lizard brain but not tricking them into doing something they don’t want to do

#PWA

Offline Storage for Progressive Web Apps

P

#Animations

Communicating Animation

#Illustration

Product Vs. Marketing Illustration. The language of illustration & how it is applied differently between product & marketing

#Design

Anatomy of a pattern in a pattern library

#Animations

Smooth as Butter: Achieving 60 FPS Animations with CSS3

#Photoshop

Photoshop Etiquette For Responsive Web Design, artboards FTW 😀

#Photo #Psychology

Top 10 Profile Photo and Portrait Hacks Based on Science (to optimize LinkedIn or dating site pics, your call)

#UX

Enterprise UX Case Study: Improving Usability Under Tight Deadlines

#CSS

You can kinda invent your own weird design language with attributes and attribute selectors

Inspiration and Great ideas

#Illustration

Hi! My name is Vicki and I want to help empower girls and women through art!

#Graphic Design

Graphicmeans.com, a history of Graphic Design production in a short video

#Tattoo

okanuckun, my favorite tattoo artist at the moment

#Cute #Device

Cute bear remote control for you devices <3

Webdesign news

#Edge #Notifications

Edge integrates a site’s web notifications into Windows 10’s Action Center

#Experiment

a-k-apart.com The Challenge? Build a compelling web experience that can be delivered in 10KB and works without JavaScript.

Tutorials

#PWA

A Beginner’s Guide To Progressive Web Apps

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

#Mobile

W3C mobile checker (alpha)

#UX

Introducing the UX Bear, a new conversational interface that will send you Ux related articles

#JS

scrollanim.kissui.io, a library to create scroll animation, be careful though, it might make people dizzy pretty quickly ^^

#A11y

A free online course for building accessible Web Applications

#SVG

Bytesize, a tiny style-controlled SVG iconset