A massive selection this week. 2 great website examples to help inspire your portfolio designs. Some great JS frameworks and testing tools. A few articles to help designers design the good stuff, and even more articles to keep you busy. Enjoy this website design and developer inspiration rundown.
Website Inspiration
Tom Rush
A Leeds based digital creative website. Tom has built a simple, easy to read, and quick to load portfolio that does a great job.
Tim Householter
First Tom, now Tim. A lead designer at Transom Design in Seattle. His site uses lots of white space and grids to display his work. Clean, simple, easy to read.
Designer Resources, Examples and Inspiration
In the dead of night we are drawn to dark interfaces
Distraction free, pretty, and amplification. What dark interfaces are a massive thing in product design.
https://uxdesign.cc/in-the-dead-of-night-a4c7fa98aec4
Development Snippets, Samples, and Articles
Grid Tile Layouts with auto-fit and minmax
A new and easy way to make perfect responsive title layouts with CSS Grid.
https://gedd.ski/post/tile-layouts/
Building Your Colour Palette
You can’t build anything with five hex codes. To build something real, you need a much more comprehensive set of colours to choose from.
https://refactoringui.com/previews/building-your-color-palette
Creating Excellent UX Flow Charts
Flow charts, like any deliverable in the design process, is an excuse to talk to your team. As much as we like complaining about meetings and formal deliverables, the truth is that design work would come to a dead stop without (a) conversations and (b) pictures.
https://medium.com/eightshapes-llc/creating-excellent-ux-flow-charts-df6f1e46e524
Google Web.Dev
With actionable guidance and analysis, web.dev helps developers like you learn and apply the web’s modern capabilities to your own sites and apps.
Glorious Demo
The best way to create animated code for demos. Copy, pastable, and pretty.
Chromatic – UI testing for Storybook
A continuous UI testing tool that combines the accuracy of manual testing with the efficiency of automation. 21% of software budget is on bugs, and the cost of bug repair in production is 5-10x. This tool helps save time and money.
https://blog.hichroma.com/chromatic/home
Maizzle
Maizzle is a BYOHTML framework for rapid HTML email development. It’s like a static site generator, but tailored to email.
Svelte
The magical disappearing UI framework. I still need to have a proper look into this but it seems really interesting. Using vanilla JS, but the same functionality as major JS frameworks. Teeny tiny in size.
Why using `tabindex` values greater than “0” is bad
Using Tab Indexes in web development? Maybe you should stop doing that…
http://www.karlgroves.com/2018/11/13/why-using-tabindex-values-greater-than-0-is-bad/
A bit of everything
Web Typography Resources
A great list of resources all centred around typography. Perfect for designers and developers.
https://betterwebtype.com/web-typography-resources
Cacher
The code snippet organiser for developers. Integrates with most editors to store commonly used snippets from the whole team on the cloud.
Heat maps 101: a complete guide with examples, tools, and case studies
Hotjar walk you through why, how and when to use heat maps. Mixed up with a few case studies and examples to show how valuable they can be.
https://www.hotjar.com/blog/heatmaps
Designing, laws, and attitudes.
I often hear from stakeholders who worry that “accessible” means “ugly.” Well here are resources that are accessible and visually beautiful.
https://ethanmarcotte.com/wrote/designing-laws-and-attitudes/
