Pixels of the Week – December 1, 2017
Every week I post a lot of my daily readings about Web, UI and UX Design, mobile design, webdesign tools and useful resources, inspiration on twitter and other social networks.
This week’s selection: UX review guide, localized input masks UX, introducing design systems, design process evolution, designers becoming problem solvers, what PWAs can do for you, CSS grid layout starters, tutorials and a github repository to find CSS talks, Front-End Checklist, JavaScript animations, Sketch cleaner and animation plugins.
You can follow me on twitter to get a dose of links every days.
TL;DNR the one you should not miss
#CSS
If you’re looking for CSS talks to watch, here is a whole list 🙂
Interesting article
#UX
- How to do a UX Review: The Definitive Guide
- Form Field Usability: Consider Using Localized Input Masks for ‘Phone’ and Other Restricted Inputs (64% Don’t) via Baymard. For phone numbers, localization can get really
tricky, for instance I live in Luxembourg by my phone number has a French format :/
#Design
- “RE: The end of Design as we know it” nice article on designers getting more time to become problem solvers
- The web is ready for great graphic design
- Introducing design systems
- Where to Spot New Design Trends: 15 Sources to Stay Fresh
#Responsive
- How to Design a Large Scale Responsive Site, another great article on responsive process
- Designing for Breakpoints by Stephen Hay, 2013 but the process is still relevant today
#Product
“The best visual description of a company I’ve ever seen, as simple as that”
#PWA
Designing For A Browserless Web, great article on what Progressive Web Apps can do for you.
I’m wondering if we can detect a standalone launch to display specific content (like share buttons when there’s no browser or enhance the navigation)
#Front-end
Optimizing CSS: Tweaking Animation Performance with DevTools
#Resume
“6 things I hate about your design CV”, number 1 Fucking skills charts. Yes
Inspiration, fun demos and Great ideas
#Illustration #Typography
Garamond Corpvs, for all of the typography and anatomy nerds out there <3
Tutorials
#JS
Animating Layouts with the FLIP Technique (+ a library to help you as a bonus)
#Front-End
The Front-End Checklist – an online tool to build a front-end checklist for your projects
#CSS
- CSS Grid Starter Layouts, quick tips to build really flexible grids
- Learn CSS Grid in 5 Minutes – A quick introductions to the future of website layouts.
Useful resources, tools and plugins that will make your life easy
#Inspiration
designercize.com a tool that gives you random design challenges to practise. Fun but a little wtf in the challenges sometimes ?
#Sketch
- Sketchcleaner – a plug-in to help you clean your sketch files, yeahy ?
- Diya, a timeline animation directly in Sketch.
