Pixels of the Week – February 23, 2018
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: UI design tips, designer ethics and the end of amateurism, Design Sprint facilitation and brand design sprints, handlebar UI, notifications, onboarding framework, progress tracking UI, CSS variables, CSS margin collapse, SVG form animation, CSS breakpoints, UI prototyping tool working with Sketch, hand-coding SVG, AMP stories.
You can follow me on twitter to get a dose of links every days.
TL;DNR the two articles you should not miss this week
#Design
This is a really nice article for students and design beginners: 7 Practical UI tips (shadows, borders, backgrounds, etc.) to help you achieve visual hierarchy in your design.
#Ethics #Design
I want to quote half of this article on ethics an designer’s responsibly to the world, so please read it: “Design’s Lost Generation” by Mike Monteiro. Amateur hour is over, design isn’t art. Fucking YES!
Interesting article
#UI #UX #Design
- I found a nice article on progress tracking UI on @smashingmag
- “Designing A Perfect Responsive Configurator“, detailed article with a lot of cool examples
- Introducing C.A.R.E. – a simple framework for user onboarding. Convert, activate, retain and expand
- Handlebars in UI Design, an interesting article by @shankarux on how and when to use those. I only recently discovered the Android multitasking view and first thought it was a bug 😀
- The Tamagotchi Trap, on designing for human’s values
#Design Sprint
- The Facilitator’s Handbook: 24 Design Sprint Tips
- The Three-Hour Brand Sprint – GV’s Simple Recipe For Getting Started On Your Brand
#CSS
#Conference
“My Talk Writing Process” by Val Head. Soooo glad to read that I’m not the only one hoarding articles, videos & books pieces into a giant Google doc. Last 45min conf was 30 pages of notes & I also keep updating the notes after, in case I give the talk again ^^
#Notifications
How To Build A Notification That You Won’t Hate, by installing a light bulb ^^ nice idea.
Webdesign news
#Invision #Design tools
“InVision Studio is out—but are designers migrating to a new tool again?” True, eventually someone might come with a “Design tool testing retreat” concept: one week of hiking, biking, drinking juice & doing stuff designers with beards do, + testing tools.
#AMP
AMP gets stories as well (not quite sure about that one)
Tutorials
#CSS
- Stunning hover effects with CSS variables. I love how CSS variables and JS work so well together, this will bring plenty of really cool new possibilities
- Everything you need to know about CSS Variables, a long and detailed article with 3 exercices to help you understand the power of CSS Variables
- Eric’s Archived Thoughts: Displaying CSS Breakpoint Information with Generated Content
- Remember, Truncation is not a content Strate… (Karen McGrane) but if you really must snip your titles here is some CSS JS code to help you
#SVG
How to Hand Code SVG, if you like challenges
Useful resources, tools and plugins that will make your life easy
#Design tools
- A list of codepen collections with UI elements, for inspiration and ideas
- Protowire, an interesting prototyping in Sketch that shows a lot of potential
- Sketch Isometric Plugin, if you want to easily build isometric rectangles in Sketch
- “Sketch Plugins I Can’t Live Without” by @ry_stephen I also love Sketch runner it became 90% of my Workflow. I don’t bother remembering menus or keyboard shortcuts I just type what I want to do in runner and Voilà.
