Pixels of the Week – June 23, 2019

Stéphanie Walter

Senior UX Designer - Mobile Expert

Senior UX Designer. Mobile Expert. Public speaker. Blog writer. Google Dev Expert Product Design (GDE)

Follow on Twitter

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 and typography, signs of low UX maturity, some inspirational UX cards, responsive menus, form required fields, mobile prototyping tool, CSS tables, a satire of the <toast> new HTML element, UI frameworks and user experience, the state of CSS 2019,  mobile UX and illustrations, cognitive biases, conducting usability testing, etc.

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

I gave some talks

#UX #UI #Frameworks

Pretty, but not Usable – the slides and video of my talk at @cssdayconf I share my experience and process, some design/dev relations tips to help people build a user centric product while working with a UI framework.

#UX #Journeymap

The slides of our UX in Lux workshop on User Journey Maps are also online.

TL;DNR the one you should not miss

#Accessibility

5 Keys to Accessible Web Typography:

  • base font size in relative units
  • colour & contrast
  • legible fonts with “Milimeter” test (I also use the a1iIlL0o test)
  • paragraphs shapes, line length and line height
  •  semantics & heading levels for hierarchy

Interesting article

#UX

#Responsive #Menu

Using Hamburger Menus? Try Sausage Links (scrolling navigation).” Interesting concept, one of the issues for me is the uncontrolled “overflow cutting”. A French newspaper implemented this and on my mobile, Culture got cut into “Cul” (French for “Ass”)

#HTML #Specs

Introducing the new HTML element – welcome <clippy>!” a satirical look at the current state of web “standards” development and Google introducing the <toast> element.

#Illustration

6 Ways Digital Illustration Improves User Experience for Web and Mobile

#Design #Collaboration

Brad Frost and Dan Mall: Rethinking designer-developer collaboration: an interesting 50+ min podcast on design systems, agile, etc.

Inspiration, fun demos and Great ideas

#HTML #Brutalism

This page is a truly naked, brutalist html quine, a fun idea to bring back the world weird web

News in the industry

#Layout #API

The Layout Instability API – Detect unexpected layout shifts in JavaScript. We that for instagram, you open it, want to like a picture, the layout shifts and you end up liking a complete other picture. NEIN.

#CSS

State of CSS, 2019 edition, the results!! (Also, I LOVE this shirt )

Useful tools and plugins that will make your life easy

#Accessibility

A11Y with Lindsey: this is a cool blog with a lot of ressources and articles on accessibility

#Prototype

Origami Studio, a tool to create interactive prototypes for mobile apps without the need to code. You can test them directly on Android and iOS

#Tables

34 CSS Tables, An interesting list of HTML and CSS tables with code and examples, from responsive tables to pricing, periodic tables, etc.

#Viewport

Tornis is a minimal JavaScript library that watches the state of your browser’s viewport, allowing you to respond whenever something changes.

Are you looking for a UX or UI designer, for a site or mobile application? Do you want me to give a talk at your conference, or simply want to know more about me? You can take a look at my portfolio and contact me.

Leave a Reply

Your email address will not be published. Required fields are marked *