Visual Design, UI, Twine: ID Links 11/19/24

As I read online, I bookmark resources I find interesting and useful. I share these links about once a month here on my blog. This post includes links related to visual design, user interface design, Twine workflows, and a recording of my recent webinar with scenario tips.

I’m seeing lots of learning and development folks joining Bluesky this week. Right now, there seems to be some momentum in creating a new L&D community in that social platform. You can find me on Bluesky at christytucker.

AI-generated image of a woman with long brown hair working on a color scheme and visual design on her computer

Visual design and UI

eLearning Makeovers

Bianca Woods’s slides, tips, and resources from her DevLearn session “Practical eLearning Makeovers for Everyone.” This includes before and after examples with notes on the thought process for improving the visual design.

Howard Lewis, Ph.D., CPT on LinkedIn: Learning Visual Design – Learner Perspective

Summary of research comparing learner perceptions for graphic (illustrated) versus photorealistic characters. Different image styles may be better for different audiences and goals.

User Inyerface – A worst-practice UI experiment

How fast can you navigate through deliberately terrible UI? It took me over 10 minutes (I got stuck on the validation.) A fun way to think about errors in user interface.

Rate My Site: Rate your site in seconds – get instant feedback.

AI-generated feedback on website design. Enter a URL and get a score and feedback on the visual design, layout and clarity, and content. The site provides recommendations for improvements as well. As with all things AI, the recommendations should be viewed with some skepticism, but I found it overall reasonably accurate for the few sites I tested.

Twine workflows

A Quick Guide to Using Tweego

One problem with Twine is that it can start to lag when your story gets too big (often around 300 passages). For larger games, it may be better to break it up into multiple smaller files. This guide explains how to use Tweego to combine multiple HTML files created in Twine into a single file.

A Modern Developer’s Workflow For Twine

A developer shares his workflow for working with Twine. Instead of writing in Twine’s visual editor, he writes in a text editor and uses VSCode. For larger games (~300+ passages), Twine’s visual editor doesn’t scale as well. This workflow also includes some information about how he handles version control.