Pixels of the Week – April 19, 2020
Every week I share a list of curated articles, resources and tools about UX, UI and mobile design, HTML, CSS, the web industry, process inspiration and more…
This week’s selection: Accessibility for UX Designers, frontend bookmarks, how to give constructive design feedback, colors in design systems, tips for designing remotely, pushing the limits of CSS, image techniques, a trick for minimum viable CSS dark mode, CSS diagonale layouts, UI design principes, responsive behavior, how people read on the internet, a fun game in the browser and mooooore…
#Now – what I’m up to
I’m currently thinking about offering some mentoring for speaker who start their first talk. If you have topic ideas you can comment here or on the twitter conversation. I’m also perfecting my bao recipe 😀
Also I’m officially an aunty so I draw a little something for the nephew 🙂
https://www.instagram.com/p/B_Foz_iBlUE/
TL;DNR the one you should not miss
#Accessibility
Here is A starter guide for UX Designers, it’s a small guide about delivering accessible websites and some tools/resources, because it’s our job to advocate for all users, including those with disabilities
Interesting article
#UI
15 User Interface Design Principles for Better Websites: design is not born purely from creative inspiration. instead, we build it upon best practices that have emerged from hundreds of years of design
#Reading Patterns
How People Read Online: New and Old Findings – Looking back at findings from a series of eyetracking studies over 13 years, we see that fundamental scanning behaviors remain constant, even as designs change. With so many patterns, are those even patterns?
#Feedback
Constructive vs Destructive feedback, some tips on how to get constructive feedback: if you want quality feedback you need to frame the session, set goals, non goals, etc and be careful about who gets invited otherwise it will derail
#Remote
“Tips for designing remotely” interesting tips, you might think that there’s quite a lot of documentation going on here but that’s life as a designer as well, sharing process, explaining concepts, the whys and how’s, seeking feedback, etc.
#CSS
Extending the Limits of CSS: from art and animations to games and even a search engine, pushing the limits of CSS have never been so fun
#Responsive
Thinking in Behaviors, Not Screen Sizes, when designing or building a responsive website, I like this approach a lot and feel like grid and flexbox help even if we do not have container queries yet
#Technical Writing
How the Writing in Technical Writing Should Evolve in 2020
Inspiration, fun experiments and great ideas
#Machine Learning
A machine model trained on dribbble shots gives some interesting results
#Game
A fun little game in the browser, hit space or tap to stack checkboxes on top of each other (I’m super bad at those but still have a lot of fun)
#Web Design
I have no idea what this website is (I suppose sushi restaurant) but I love it, the colors, the layout, the GIFs <3
Tutorials
#Color
Thinking in Design Systems, interesting article on naming and theming colors
#CSS
- Minimum viable dark mode using filter: invert(90%) hue-rotate(25deg); Well, hum, I think my website is too complex for that but I still like the quick trick!
- “Create Diagonal Layouts Like It’s 2020“, that’s a really cool tutorial 🙂
#FrontEnd
Image Techniques On The Web: various ways of including images in your website with advantages and disadvantages (<img> tag, <picture> and srcset for responsive images, CSS background, SVG <image> and responsive SVGs, SVG masks)
Ebooks
#Interviewing
Emma Bostian is publishing an ebook on De-Coding The Technical Interview Process and you can pre-order it.
Useful tools and resources that will make your life easy
#FrontEnd
frontendbookmarks.com this is really cool, worth bookmarking (hehe): a collection of articles and talks about HTML, CSS, and JS, grouped by elements, attributes, properties, selectors, methods, and expressions
#Documentaries
Designer.Watch: a place to find documentaries on art, design, typography
#Performance
A small “Web performance checklist” to help you remember about important performance enhancements for your site
#Conferences
Remote Confidence, Women Talk Design is putting together a Monday-Wednesday-Friday email called Remote Confidence. Three times per week starting this Wednesday, someone from our network of experienced speakers will be sharing a tip or trick to speak, teach, facilitate, or meet remotely with confidence directly to your inbox for free. Will you join us?
#Brainstorming
Fabricating Alternatives – a digital card deck powered by AI that remixes and multiplies ideas around any topic that you and your team are exploring. This generates a serie of “what if” questions for your brainstorming sessions. It generated a lot of garbage like MANY AI generated content but it’s still quite fun and interesting once you cherry picked the interesting ones.
