Title: “Graphic Fest: Spot-on Identity for Festivals and Fairs”

Author: Victionary

Website: on the Victionary website

What’s this book about?

“Graphic Fest” is a colorful exploration of visual design systems that were created specifically for large-scale, in-person events like festivals and exhibitions around the world. The community events featured in this book took place between 2015 and 2018, so as of writing this in 2020, it’s still a relatively current collection of curated environmental design work.

Overall, 84 unique projects by 66 different designers and design studios are highlighted in this book. These creative personalities are based in cities like Hong Kong, Seoul, Beijing, London, Oslo, Cape Town, Gdańsk, and Thessaloniki, to name a few. The book also features three multi-page interviews with studio fnt from Seoul, with BLOW from Hong Kong, and with IS Creative Studio from Madrid. These interviews provide insight into the various thought processes and creative philosophies that inform some of the work on display.

What are my thoughts on this book?

This book focuses mostly on print, exhibit & environmental design—less so on digital applications, although they’re alluded to. This obviously makes sense given the constraints of the print medium, but it would have been better if this book’s website contained further examples of the digital and motion graphic elements that comprised some of these visual identities.

Having said that, I was pleasantly surprised to find “Graphic Fest” features both the same festival over multiple years (so you can see how the design approach changes every year), and the same studio designing for completely different events (so you can see their breadth). This provides a unique opportunity to compare case studies across a variety of perspectives.

Take for example Bond Creative Agency’s work for FLOW Festival both in 2017, as well as in 2015 - 2016. The two projects featured from this multi-year collaboration show how Bond Creative Agency took two very different creative approaches. Each of these approaches encourage notes of intrigue and playfulness through their respective unique visual identities, while relying on very different types of imagery (raster vs vector), as well as color palettes and visual motifs.

Comparison of posters designed by Bond Creative Agency for Flow Festival 2015 – 2017

Along those lines, in terms of visual symbols the recurring visual pattern I noticed most involved eyeballs. I found this intriguing given that eyes are the windows to the soul, and it’s interesting to see how many different ways this visual motif was illustratively interpreted. For example, Rethink used the symbol of an eye as their starting point for Design Thinkers 2017, but then riffed upon that idea and expanded it into a visual language that extends beyond the basic symbolism of the eye. BLOW did something similar in their work for Conqueror Design Contest 2017, although with a more playful flair.

Comparison of posters designed by Rethink for Design Thinkers conference, and Make It Wow design contest collateral designed by Bond Creative Agency in 2017

Despite the breadth of visual styles in this book, one thing I noticed as a point of curiosity was the large number of sans-serif typefaces present in the featured work—both for latin and non-latin typefaces alike. There were still a few examples of display type and serif type in the featured visual identities, but they were definitely the exception.

This makes me wonder if this is a question of legibility and readability, because festival and environmental design need to be as accessible as possible for their intended audiences? Display typefaces in particular could very quickly become impediments in this respect. Although research on the comparative legibility and readability between serif and sans-serif fonts seems inconclusive, Massimo Vignelli’s work for the New York City subway system helped establish a precedent of sans-serif usage for public communications projects.

Having said that, despite the suffusion of sans-serif type in this book, I enjoyed the many examples it provided of latin and non-latin typefaces coexisting and interplaying in visual identities with each other, including Chinese, Korean and Japanese typefaces. 2017 projects like the Broken Spectre Exhibition by 0.00 Design and Risograph ROOM, as well as the Hi! Houses project by BLOW, and the Totem Run by Good Morning Design are just a few of the examples of this interplay of typefaces that stood out to me from “Graphic Fest.”

Posters and event graphics designed by by 0.00 Design and Risograph ROOM for Broken Spectre Exhibition 2017, along with Hi! Houses environmental graphics designed by BLOW in 2017, and Totem Run design system created by Good Morning Design in 2017

Do I recommend this book?

Overall, I love that this book has exposed me to more visual design work from parts of the world whose creative output I would otherwise find it difficult to find on my own, so yes, I recommend it. Sometimes it can be difficult to know where to start online because there’s so much to sort through, even when it comes to niche areas of design like event and environmental design. Books like “Graphic Fest” provide a shortcut for finding this kind of inspiration in a curated context, and they encourage you to look deeper into these design projects instead of taking them at face value.

Along those lines, I also enjoy that this book exposed me to various types of cultural events that have taken place around the world. From fashion trade shows, to music and film festivals, to design contests, to photography and art exhibitions, to academic capstone and degree shows, to city-wide library weeks, and so much more—this book reminded me of just how many different types of one-time and recurring public events exist, in need of visual design services. These types of events provide a unique opportunity for creatives to use design as an interface for public discourse.

The format Victionary chose also helped to highlight the similar community-based needs that arise for events that might otherwise seemed unrelated. Overall, “Graphic Fest” ventures beyond the realm of simple design inspiration by amplifying the public context within which so much design is created.

Introduction

It’s 2020 and I’ve accomplished something I never thought I’d do—I now cook 90% to 100% of my meals every day. After many failed meal prepping attempts, I finally zeroed in on the friction points I was experiencing and built a system that bypassed them instead of getting knotted up by them. What this looks like in practice is a set of relational no-code databases in Notion. After more than ten weeks, I can confidently say that this system has worked better for me than any other paid or free approaches I’d tried to solve the meal planning conundrum.

The main friction point I realized kept tripping me up throughout the years was related to the context within which I was planning my meals. Many of the meal planning templates and services I’ve tried online throughout the years organize meal planning within a temporal context. You plan your meals based on days, weeks, and months as your measurable units. My problem is that I don’t stick very well to those units of measurement—especially not while intermittent fasting—and this can lead to food waste. For example, some days I just don’t get around to cooking, or I end up eating leftovers, or I end up ordering takeout, or improvising with leftover ingredients.

Most recently, I tried PlateJoy as a paid meal planning service, but I kept running into this time conundrum. PlateJoy is a service that is very rigidly structured within a week-centric, time-based constraint, and this often led to recipe backups for me while I was using the service. Depending on your predispositions in the kitchen, this may not be a problem for you, but I’m cooking for one and a recipe backup can quickly become an issue.

So how can you apply the solution I created to your own meal planning journey? Keep reading if you’d like to learn how to duplicate my meal planning template so you can try it for yourself using Notion. This post summarizes the tutorial you can also find in the footer of the template.

How to access this template

Template URL: https://www.notion.so/Meal-Planner-12d3d4145ba4428b8f85500579bba4e2

Tutorial URL: https://www.notion.so/How-to-Use-this-Template-f1a7d44b1023477982120a3d4b17c21e

Getting started

If you’re new to Notion, make sure you’ve created a new free or unpaid account first. This template is compatible with free workspaces and paid workspaces alike. Once you’re logged into your Notion account, navigate to the meal planning template and click the ‘Duplicate’ button on the top right of the page to copy the template into your own Notion workspace. Once it’s in your workspace you’ll be able to edit and modify it to your heart’s content.

Meal planning based on number of servings

This meal template uses a servings-based approach to meal planning, as opposed to a time-constrained approach. A servings-based approach to meal planning makes it easier to buy groceries, and helps minimize food waste.

When you use timeframes to organize our batches of meals, you may organize your meals around one or two week increments, for example. For some people this may work great, but for others a time-based approach may be too inflexible.

Using serving sizes to organize batches of meals lets you focus on the number of servings you’d like to cook within a given batch. This servings-based approach is especially useful if you have a non-traditional meal schedule, e.g. if you’re intermittent fasting or if you tend to be less strict about when you cook throughout the week.

Step 1: Decide on number of servings & create a new batch

First, decide on the number of servings you want to cook in your first batch of meals. Depending on your type of diet and the number of people you’re cooking for, your number of servings will usually translate to number of meals. In my case, I plan for two meals a day because I practice intermittent fasting.

Once you know your number of servings, navigate to the ‘Batches’ page and click on the dropdown arrow next to the blue ‘New’ button. Click on ‘Batch Template’ option in the dropdown menu. This will create a new page for your first batch based on a template that contains everything you need to get started.

Step 2: Add meals to your new batch

This meal planning template comes with 45 recipes that range between vegan, vegetarian, and meat meals that have been bookmarked from various online chef bloggers. All information has been input manually, including recipe information, ingredient information, and chef/creator information. I’ve included a few breakfast recipes, and a handful of snack recipes, but the vast majority of these recipes are for lunch and dinner. Many of these are ideal for bulk meal prep as well.

Click within the ‘Meals’ field to start browsing available recipes. Click on the plus sign that appears when you hover over a recipe to add it to your current batch. As you add recipes to your batch, the ingredients and number of servings will automatically be updated in the batch’s ‘Ingredients’ and ‘Servings’ fields.

Step 3: Mark the status of your batch as ‘Current’

Remember to set the status of your new batch to ‘Current’. This status is what the Grocery List relies upon to tell you what your grocery list looks like for the batch in question. This template comes with three self-explanatory statuses, ‘Current’, ‘Past’, and ‘Upcoming’.

Step 4: View your grocery list!

Navigate from the batches page to the grocery list page. If your batch statuses are up to date, then the list of the ingredients you’ll need for this batch should be listed under the ‘Current Batches’ column of the Grocery List kanban board, and all your past batches should be listed under the ‘Past Batches’ column. You can also plan for upcoming grocery lists with the ‘Upcoming Batch’ status.

I order my groceries online, so I usually just go down this list and add the items to my shopping cart. One of the downsides to this system is that there doesn’t seem to be an easy way to export this shopping list. This may be more of a problem for you if you physically go to the grocery store, because you won’t be able to check items off in this view in Notion. Still, it creates a pretty succinct list of exactly what you’ll need for your upcoming set of meals, which is something I’ve found extremely valuable.

Step 5: Add your own favorite recipes (optional)

You may want to customize or add to the recipes included in this template. You can do this on the ‘Meals’ page, where you can indicate whether the recipe contains meat or dairy, its number of serving, source, maker, and more!

Step 6: Add your favorite chefs (optional)

When you add a new recipe to this template, if its creator isn’t currently in your database, you’re give the option to add them while you’re adding a new recipe. While this creates a placeholder for that chef, it doesn’t automatically create a templated page for them in your database. If you’d like to create a page for them, just navigate to the ‘Chefs’ page, and click on the chef in question. An empty page will appear, and if you scroll towards the bottom of this page and click ‘Chef Template’, this page will be populated with its page template.

Conclusion

This meal planning system won’t be for everyone, but it may appeal to some people who’ve tried a few other meal planning solutions with no luck. It’s not really that huge of a change from a time-based meal planning system, but for me the switch in thinking to servings-based has just clicked a lot more easily when it comes to plotting it all out—especially when it comes to ordering groceries.

If you happen to find this template useful, let me know on Twitter or send me an email. I’d love to hear how you used or modified this template to suit your needs!

I’ve been using Hexo on this site for around three months now, and I’ve published five or six posts in that period, so I’ve had enough time to play around with the framework in depth. I’m a designer whose knowledge of web development is spotty at best — indeed, the gaps are probably wider than the filled areas. I don’t consider myself a developer (yet), but this project was a testament to the fact that I can figure things out with enough Googling and intuition. Turns out that I’d need both of those things pretty much immediately upon trying to install Hexo, but that wasn’t necessarily Hexo’s fault.

This walkthrough is meant to summarize the steps I took to get Hexo up and running, as well as highlight some of the errors I encountered, along with how I went about solving them. It’s written for beginner developers or non-developers who may not understand what to do when troubleshooting their own instances of Hexo.

Make sure you have the right version of Node.js installed in the right directory

Given the fact that Hexo is powered by Node, it stands to reason that you would want to make sure you have Node installed on your machine (I’m using a Mac). If you’re like me, you might have installed Node awhile ago without having to touch it much, and you may not initially realize that you can have multiple versions of Node installed in different directories (especially if Yarn or other package control comes into play).

That’s essentially what I ran into when I ran npm install -g hexo-cli only to get my first of many error messages:

1
2
3

/usr/lib/node_modules/hexo-cli/node_modules/chokidar/index.js:150 async remove(item) { ^^^^^^

SyntaxError: Unexpected identifier at createScript (vm.js:56:10) at Object.runInThisContext (vm.js:97:10) at Module._compile (module.js:549:28) at Object.Module._extensions..js (module.js:586:10) at Module.load (module.js:494:32) at tryModuleLoad (module.js:453:12) at Function.Module._load (module.js:445:3) at Module.require (module.js:504:17) at require (internal/module.js:20:19) at Object.<anonymous> (/usr/lib/node_modules/hexo-cli/node_modules/hexo-fs/lib/fs.js:6:18) at Module._compile (module.js:577:32) at Object.Module._extensions..js (module.js:586:10) at Module.load (module.js:494:32) at tryModuleLoad (module.js:453:12) at Function.Module._load (module.js:445:3) at Module.require (module.js:504:17)

Internet research led me to a few tangentially related StackOverflow questions in English, as well as a bunch of directly-related questions in Chinese. Thankfully, Google Translate helped me see that a few different people had the same issue as me, and it was due to a Node version that was out of date, and thus incompatible with Hexo.

I proceeded to update Node, but the old version was still being referenced in my project directory for some reason. I then tried reinstalling Node with Homebrew, but that didn’t work either, so I once again turned to Google. It turns out someone else had similar problems with Homebrew + Node in certain situations, so I tried what they did and uninstalled Node altogether to get a fresh start.

Based on the advice from that StackOverflow thread, I used NVM (Node Version Manager) to install Node this time. This is where the next two road blocks came up – first I had to fix two bash issues to get NVM installed at all. To be fair, this was more a me problem than a Hexo problem.

Terminal had been prompting me to update from bash to zsh because “the default interactive shell is now zsh” (I don’t actually have any idea what bash or zsh are), and I mistakenly made that update while I was in the midst of my Hexo set-up. This of course caused even more issues to crop up. It didn’t take an internet search to figure out that changing to zsh from bash caused my new road blocks. Instead of trying to make zsh work, I decided to just revert back to bash.

After solving that problem, and scrambling to solve a secondary bash profile issue, I was finally able to install NVM and then use it to re-install Node, which thankfully solved the weird version inconsistencies. Finally, finally, npm install -g hexo-cli worked the way it was supposed to!

Beware special characters when using YAML & markdown to write posts

Hexo’s blog post format combines a YAML front-matter area containing post meta-data, and a markdown section below it within which to write the body of the post. Coming into this project, I had lots of experience working with markdown, and had previously worked with YAML front matter on Dev.to’s posting platform. Thankfully, it was pretty straightforward to apply that knowledge in this capacity, with one glaring exception – apostrophes a.k.a. single quotes.

It’s an easy thing to get tripped up by if you’re not paying attention, and honestly I should have known better given the havoc special typographic characters are known to wreak in other languages. The need to escape apostrophes in YAML didn’t occur to me until I’d just about started banging my head against the desk trying to figure out why I kept getting errors similar to these when I tried to use hexo generate to generate a static site from my first blog post:

1

YAMLException: can not read a block mapping entry; a multiline key may not be an implicit key

1

"hexo" FATAL can not read a block mapping entry; a multiline key may not be an implicit key at line 9, column 9:

Although Hexo’s docs mention troubleshooting YAML parsing errors, they cover the use of soft tabs and adding a space after colons, but they don’t really touch upon special characters as a possible source of bugs too. And the YAML spec that Hexo’s docs link to, while obviously comprehensive, is overwhelming when trying to debug an issue like this one.

Thanks to even more helpful internet research, it turns out I’d been using an unescaped single quote in one of my post titles. Before I realized the root of my problem was single quotes, I’d been looking at everything from hidden non-English characters, to trailing spaces as possible sources of my road blocks.

Even better, after all that frustration, all it took was adding one more single quote next to the original single quote to fix the problem. It’s a lesson I learned at least once more when I carelessly added an unescaped single quote to my blog description in the _config.yml file, which is where most if not all of the global site settings are stored.

I found this primer on YAML by OctoPrint to be helpful in summarizing some of the common pitfall areas that people encounter in these scenarios – because it turns out there are a variety of ways people can get tripped up by syntax despite YAML’s seeming simplicity.

Hexo themes extend customizability beyond just styling

The main selling point that convinced me to go with Hexo compared to other static site generators was the number of promising themes its robust community has provided over the years. I chose Pieter Robberechts’s Cactus theme because it aligns with the vision I have for this site, and because it has great documentation. Something I was also pleasantly surprised by was the way themes like Cactus can extend Hexo’s features without the need to install individual plugins.

With Cactus, I’m able to easily switch between light and dark color scheme variations, change my code highlighting scheme, add a projects list to my site, and a lot more. Some of these are features that I probably could have added to Hexo via individual plugins, but it’s so much nicer to have them all in one theme/place with clear documentation and thoughtful integration.

One point of frustration I have experienced with Cactus, and which I would have experienced with any theme I’d chosen to go with, is going beyond its built-in customizability. Full disclosure: This is because of my lack of domain knowledge, and not a fault of the theme nor the framework.

A case in point here is table styling. I decided I wanted to change the way my tables are styled in Cactus theme, but am not super knowledgeable on compiling CSS and basically just hacked together a plain CSS solution. I know it was the wrong way to have done it, but considering how much time I’ve spent troubleshooting just to get to this point with Hexo, I decided the trade-off of time spent figuring it out wouldn’t have been worth it to me at that moment in time. I know I may come to regret that decision later on, but I’ll cross that bridge when I get to it.

Conclusion: Hexo’s worth it so far

Despite the copious amount of roadblocks I had to get through first, three months after first starting to use it I’d say I’m happy with Hexo overall. I really like the workflow I’ve developed with it, even though I’m still manually deploying the site at the end of it because I couldn’t get deployment to work and was sick of debugging one of three personal sites I currently maintain. The convenience of being able to continue writing my posts in markdown while being able to produce static, interconnected HTML pages of those posts with a single hexo generate command has made a lot of the headaches worth it.

Also, I’d like to note that I’ve had mixed results with plugins so far, but I’ll have to explore their capabilities and results a little more before I give any definitive opinion on them. The one bad plugin experience I’ve had so far was with the hexo-image-caption plugin by Wayou – I just wasn’t able to get it to work. A good plugin experience I had was with the Google Analytics add-on to Cactus theme.

I’d hesitate to recommend Hexo to everyone, but I will say that it might be a good fit for you if you’re looking for a markdown-based, Node-powered static site generator for a blog. If your development knowledge is non-existent or entry-level, then it might also help if you’re a very curious and patient person who’s convinced every problem is a knot that can be unravelled. If you have any questions or feedback about my experiences with Hexo so far or about your own experiences with it, let me know!

Plugin Name: VisualEyes

Creator: Jim Raptis

Cost: Free-ish (for now?)

Docs: Yes

Rating: 4 / 5

Introduction

The second Figma plugin I’m evaluating in this series is VisualEyes. On its Figma plugin page, this plugin’s description reads, “Get rich insights about your designs in a click,” and, “Embrace data-driven design in your workflow. Understand how users look in your prototypes and how clear and aesthetically pleasing are your designs.”

I first heard about VisualEyes through Thomas, the CEO of the two companies where I work as a creative director and senior designer respectively. He’s really good about finding and sharing useful new digital tools in a wide range of disciplines, and enjoys hearing our feedback after giving these tools a test run. When I came across VisualEyes via organic social media a few weeks after he mentioned it, I decided to stop procrastinating and give it a try.

Aside from HotJar and CrazyEgg, I don’t have much experience with attention heatmaps in my design workflow, but I’ve been interested in exploring and integrating more data-driven design practices into what I do. Despite the seeming common sense nature of the insights that tools like attention heatmaps provide, they can provide an outside perspective on your designs that might help you refine your compositions when you can no longer look at them objectively.

When I first wrote this review a few months ago, it was from the perspective of a free user whose first interactions with the VisualEyes product were happening through Figma’s plugin interface. However in the past month, VisualEyes has made their Basic paid plan free for all users, so I’ll be revising my review to take that into account, since it means more of the plugin’s features will now be available to try for no extra charge until further notice.

Menus Upon Menus!

My first point of friction while using this plugin has more to do with Figma’s plugin UI than anything else. I had to navigate through four floating menus before I was able to access the VisualEyes plugin options. This floating menu behavior is determined by your screen height, so if I’d had a taller browser window or a larger device, I may have been able to eliminate a few of those steps. Still, more than one or two menu interactions seems like a bit much to get started. It also doesn’t help that this plugin’s name starts with the letter ‘V’, which puts it at the bottom of my list of installed plugins.

This perfect storm of circumstances means that using this plugin might quickly become tedious if I need to access often it via the plugins menu for whatever reason. Granted, that use case seems unlikely given the limited amount of options VisualEyes has, but still, you never know.

This Plugin Requires an API Key

It’s worth a heads up that this plugin’s functionality requires an API key. You would think that the menu item clearly stating ‘🔑 Set my API key’ would have been indication enough for me, but alas I had tunnel vision and had to learn from my mistakes. However, it wasn’t difficult to get an API key from VisualEyes. I signed up for an account, verified my email, and was able to copy my API key and go on my merry way in a matter of minutes. I say this in case anyone is intimidated in general by Figma plugins that require API keys – it was very straightforward to find the necessary API key on VisualEyes’ website after logging in.

When I originally began to write my review for VisualEyes a few months ago, the experience was frustrating for me as a new user giving it a first try because a lot of its functionality seemed to be hidden behind a paywall. My frustration has gone away now that VisualEyes is offering a Basic plan free for all users for the next few months. This means I can now explore the full extent of the plugin without first having to pay $30. I’m including my past experiences as a free user along with my current experience as a free user so you can see how they compare.

When I first used VisualEyes’ free account, the API key didn’t do much for you if you didn’t already have a paid monthly or yearly subscription to VisualEyes. Although you got 20 credits to start with after signing up for a VisualEyes account and verifying your email, those 20 credits were only good for what were essentially previews of the various paid services that VisualEyes offers. It was a disappointing road block to come that far only to find that my free account didn’t do as much as I expected it to.

Scoring Reports Have Improved Considerably

It’s been awhile since I gave VisualEyes a try that first time, and now that I’ve revisited it I can see that there’s been a lot of improvement. When I first used the VisualEyes plugin in Figma a few months ago, one of my biggest issues with the plugin was the invasive quality of its scoring. In both the attention heatmap and clarity prediction cases, the rectangle containing the test score obscured the main navigation of my design. There didn’t seem to be any way to reposition this score box before or after running the tests, which meant that some of the test data was inaccessible. As a user who placed my main navigation menu in the top right corner of my composition (an extremely common web pattern by now), the test’s results report detracted from the value the plugin might have otherwise provided to me.

That reporting experience is much improved in the latest iteration of VisualEyes’ Figma plugin, especially because the plugin now operates within a persistent plugin window as you can see in the screenshots below. This means that results are presented in a much less invasive way than before. This also provides a cleaner opportunity to present additional useful information that would have otherwise cluttered the design of the results presentation, as was the case in VisualEyes’ first iteration in Figma when no persistent plugin window was being used.

These improvements overall speak to the attentiveness of this plugin’s developers. Beyond the work they’ve obviously done to improve the VisualEyes user experience in general, my before and after screenshot comparisons show just how much though they’ve put into Figma’s plugin experience in particular.

Attention Heatmap Scoring Review

On the left, we have VisualEyes’ old method of reporting for attention heatmap scoring. On the right, we have VisualEyes’ new, less invasive method of reporting for attention heatmap scoring in a persistent plugin window.

Overall, I found VisualEyes’ attention heatmap scoring to be a useful way to visually qualify layout-related design recommendations, although some might say that these score results border on common sense at best, or glorified AI lip service at worst. Say what you will about AI tools like this, but there’s definitely a time and place for them depending on the kind of designer you are and the kind of work environment you’re in. This is especially true on teams that value a data-driven, iterative approach to design.

I used a website that I recently designed and built for my friend Eric as my test subject, mainly because it’s one of the more recent personal web design projects I’ve worked on. The attention heatmap score helped me accept that the arrow functionality I introduced on the right-hand side of the home page might as well be invisible – something I’d been in denial about until that point. This is the context in which I think I’d generally find this tool useful, at the micro-level, helping to iron out the finer design details.

Clarity Scoring Review

On the left, we have VisualEyes’ old method of reporting for clarity scoring. On the right, we have VisualEyes’ new, less invasive method of reporting for clarity scoring in a persistent plugin window.

At first I was confused by the clarity prediction scoring that VisualEyes offers, mainly because of its potential for ambiguity. Even after having read the docs on interpreting Clarity Scores, I’m not sure how a spectrum of ‘Cluttered’ to ‘Clear’ translates into a design clarity score, given that it relies on content density without much seeming regard for content hierarchy or information architecture, much less copywriting. Having said that, I still think that this tool could be useful for those designers who want a second opinion about their layout or content density decisions at a purely aesthetic level.

The ambiguity of this test could be improved with a better label like ‘Visual Clarity Score’ to qualify the scope of the reporting. It could also be improved if the docs further explained which aesthetic elements and factors are being taken into account when the VisualEyes tool conducts its scoring. As of writing this post, the docs on clarity scores still reflect the previous form of reporting, so this would actually be a good time to update the language explaining the test’s focus on aesthetic clarity.

Having said that, the VisualEyes team definitely knows that they can’t please everyone, as they mention in their docs: “We cannot eliminate every red area of our designs when we have to deliver some insights to our users and convey a message to them. You need to find a fine line between the score you want to achieve and the context you include in your designs.”

So What Could Make this Plugin Better?

My biggest suggestion for how the VisualEyes Figma plugin could improve has to do with the right-click menu UX friction I mentioned at the beginning of this post. Giving users the option to re-run another heatmap or clarity test from within the persistent plugin window, instead of them having to do it via the right-click menu (which involves multiple clicks), would greatly reduce the interaction cost of using VisualEyes in Figma.

Specifically, adding the ability to re-run a test from the score report interface would also make this plugin much easier to use in iterative design workflows where it may become tedious having to click three or four times to re-run a test after you’ve made a change in the design to improve a previous score.

Conclusion

The value that you get out of VisualEyes’ attention heatmap scoring and clarity scoring will obviously depend on a combination of factors – YMMV. Beginner designers, iterative designers, and data-driven designers are the three types I might expect to find VisualEyes most useful in general, although intermediate and experienced designers might still occasionally find the plugin useful when refining details in their compositions.

Overall I’m glad I gave this plugin a try, and I can definitely see myself using it every now and then, more for my professional projects than my personal ones. I can see myself using it both in UX research projects for activities like content audits and competitor landscape analyses, as well as in visual design projects.

I hope this plugin review showed you what it’s like to use the VisualEyes plugin in Figma, including some of its strengths and potential points of frustration for users. If you have any additional questions about this or any of my other plugin reviews, feel free to reach out to me on Twitter or via email!

One of the nice things about listening to ambient soundscapes as background noise is that most ambient sounds are made to play for long periods of time. In fact, you can use ambient noise as a timer by choosing a format that allows you to set a fixed duration á la Pomodoro. You can easily set windows of time that last anywhere from half an hour all the way up to 10 or more hours depending on your needs by finding ambient Youtube videos of your desired length. The 8-hour long ambient mixes can be a nice way to time your workday in the background when you’re working from home.

Alternatively, there are plenty of infinitely loopable soundscape options if you’d rather just set it and forget it until you’re ready to stop listening – whenever that may be. The nice thing about finding ambient atmospheres on YouTube is you have the option to set them to loop indefinitely. Although it takes an extra step, by looping your favorite ambient soundscape on YouTube, you don’t have to worry about the amount of time you’ll spend listening to it.

Beyond the time aspect, the ambient soundscapes I’ve encountered online mostly fall into these two general categories:

• Pre-made sounds & soundscapes
• Customizable sounds & soundscapes

A Word of Warning

If you do happen to set an ambient atmosphere to loop on YouTube, it may eventually pause automatically to ask whether you’re still watching. This has happened to me both on my computer as well as on my TV, but it usually takes a few hours.

Customizable Sounds & Soundscapes

This category spans the breadth of everything from simple customizability on one end of the spectrum, to very detailed controls on the other end of it. By customizability, I mean the ability to change the individual sounds that comprise your soundscape. This lets you adjust everything to your exact specifications.

For example, if you’re listening to a soundscape of a café during a storm, then a customizable version will let you change the volume of elements like the rain, the fireplace, the wind, the people talking in the background, etc. More advanced versions will even let you control things like wether each sound element is louder in your left or right ear.

While figuring out what your ambient tastes are, you might encounter sounds that irk or distract you. This is where customizable ambient noise set-ups provide a lot of value because they let you control how different sounds stand out as they interact within a soundscape.

If you disagree with the default mix of sounds, you can change them to your heart’s content if the soundscape is customizable. Depending on the degree of control the creator provides, you can create highly customized aural atmospheres that suit your preferences and state of mind.

Here are some of the customizable ambient noise and soundscape mixers I’ve found online – they’re all over the spectrum of customizability.

Customizable Ambient Soundscapes on the Web

Pre-Made Sounds & Soundscapes

If the only thing you can control about the ambient soundscape is its volume, then it’s considered a pre-made sound. This includes websites and apps that may provide a variety of soundscapes in gallery format. Some of these may come with a visual component too.

Here are a few free examples of pre-made soundscapes that run the gamut between time-boxed and infinitely loopable. All but one are available as standalone sites, while the last one in the list is an app specifically for Ubuntu operating systems.

Pre-Made Ambient Soundscape Examples on the Web

Pre-made Ambient Soundscape Examples on YouTube

Pre-made Ambient Soundscape Examples on Spotify

Pre-made Ambient Soundscape Examples on Spotify Made by Spotify

Bonus Sounds

For those of you who want to spice up the listening process, I present to you some of my favorite online audio novelties for your listening pleasure:

Bonus Sounds on Spotify

Now Put It In a Master List

In case you’d like this long list of links in a clean CSV file, you can view a consolidated version of it on Github or check out the embedded version below.

That’s all, folks

Keep in mind that this list of ambient soundscapes is by no mean exhaustive, and it errs heavily towards websites, videos and desktop-based apps. Noticeably lacking in this list of recommendations are mobile apps that provide ambient noise for productivity, although I’ve thrown one or two in there. I did this on purpose, mainly because there are so many app options available for iOS and Android devices that they could justify a post all on their own.

If there’s an ambient soundscape you didn’t see me mention in this post that you really think I should know about, let me know on Twitter or send me an email. Happy listening!

Plugin Name: Unsplash

Creator: Liam Martens and Unsplash

Cost: Free

Docs: No

Rating: 5 / 5

Introduction

The first Figma plugin I’m evaluating in this series is the official Unsplash plugin, made in partnership with Liam Martens. This plugin is currently Figma’s most popular plugin by far, with more than 103,000 user installs as of now. To put that into perspective, the next most popular plugin on Figma has around 76,000 installs.

Unsplash is one of the better known providers of free quality stock photography online, and the company’s been steadily building and strengthening its reputation over the past few years. It’s one of my go-to design resources, so when I noticed the release of this plugin, I was looking forward to trying it out.

What I Liked About This Plugin

On its Figma plugin page, this plugin’s description reads, “Insert beautiful images from Unsplash straight into your designs.” This plugin definitely lives up to that description, and the additional details like random image selection and the inclusion of presets make it a delight to use.

My normal design workflow with Unsplash (sans plugin) usually involves opening a new browser tab, browsing for the right photo, downloading it, switching back to my original browser tab, and inserting my chosen photo in my Figma composition. As you can tell, it’s a multi-step process that can become tedious if I have to repeat it a few times.

With the Unsplash plugin, there’s no need for me to leave Figma when looking for a new photo anymore. This means I don’t have to interrupt my design process nearly as much while in the zone, especially if all I’m looking for are filler images.

Possible Areas of Improvement

Having said that, I did still notice a few possible areas for improvement with this plugin. One of the top things I think could help is if the plugin provided some sort of visual confirmation that the image has been placed. The first time I tried using this plugin was on my laptop, so the photo that the plugin placed in my workspace was obscured behind Figma’s UI elements – including the plugin window.

It would also be nice to see the associated metadata for each photo, including who took the photo and a URL back to the photo’s page on the Unsplash website. This is especially important in scenarios where I want to find out whether a specific photo is part of a larger set of photos, or if I’m interested in seeing more of the photographer’s work.

Final Word

Overall, the Unsplash plugin for Figma is a super helpful tool for designers, and I definitely think its position as Figma’s most popular plugin is well-deserved. If you’re on the fence about giving this plugin a try, it’s a no-brainer. Go for it!

Welcome to the first in what I plan to be a multi-part review series about Figma plugins! For the past year and a half since I discovered it, I’ve been a big Figma proponent. It’s a powerful design tool with a robust set of features (even at the free membership level) that’s made digital design more accessible to the masses than ever.

When Figma announced the launch of plugin functionality in August 2019, I was excited by the possibilities it introduced in my favorite design tool/environment. It’s now been 6 months since plugins launched in Figma, and as the dust begins to settle, I thought it would be helpful to share my experiences with Figma plugins so far.

The Plugin Browsing Experience Could Be Better

The top-level browsing experience for Figma’s plugins is comprised of a sortable data grid of plugins, with each entry containing the plugin name, plugin logo, the plugin’s publisher, the plugin’s publish date, the number of plugin installs, an option to install the plugin, and a link to the plugin page for more info.

When Figma plugins launched, this UI made sense because only 40 plugins had been vetted in beta by that point, so there weren’t too many plugins to peruse. Six months later, that number has ballooned to 430 available plugins, and the data grid that previously made sense now feels tedious to scroll through. The only reason I know the number of available plugins on Figma is because I counted them all manually just now, but I think it would be useful if Figma’s plugin browsing page provided that number just to contextualize how many plugins we’re working with.

Off the top of my head, here are three changes that I think would make the plugin browsing experience in Figma more intuitive and informative:

1. Add the option to view plugin descriptions from the browsing page, whether as a modal or an expandable section in the existing data grid. It’s very difficult sometimes to tell what a plugin does based on name alone.
2. Add some sort of categorization or tagging to plugins to make it easier to filter through them and chunk them instead of being faced with one massive list of hundreds of plugins to choose from.
3. Add a card layout mode to the plugins data grid that matches the Featured plugins layout. The card versions of each plugin entry can feature a screenshot depicting the plugin’s functionality in action, or some similarly informative cover image, as well as a short description.

Accessing Plugins Can Take a Few Steps

I’m not in love with Figma’s browsing experience for plugins, nor am I enamored with the way plugin access has been integrated into Figma’s UI in the design editor itself. Indeed, my first point of friction while using some Figma plugins has more to do with Figma’s multi-step plugin UI than anything else.

Plugins can be accessed by right-clicking within the design workspace in Figma, and hovering over the ‘Plugins’ menu item. Depending on your screen size, it can require two to four clicks to select your plugin of choice. This floating menu behavior is determined by screen height, so if you have a taller browser window you’ll have less steps to contend with. Still, even a handful menu interactions seems like a bit much to me.

It also doesn’t help when a plugin’s name starts towards the end of the alphabet, which puts it at the bottom of the list of installed plugins. In the case of plugins like Unsplash or VisualEyes, I’ve had to navigate through four floating menus before being able to access those plugin options. This perfect storm of circumstances means that using these unfortunately named plugins might quickly become tedious if you need to access them often via the plugins menu for whatever reason.

Although browsing and using Figma plugins is still not the most intuitive experience yet, the value they provide is still worth the occasional inconveniences. This brings me to UI element that minimizes the need to use the right-click menu to access plugins repeatedly – persistent plugin windows.

Persistent Plugin Windows Save Time

At a bare minimum, when you run a Figma plugin after selecting it in the right-click menu your desired change will be reflected in your design workspace, but there’s sometimes nothing more than a brief notification at the bottom of your screen or an alert modal to tell you if the plugin ran successfully or not.

However a large number of Figma plugins go beyond this basic functionality by using persistent plugin windows that eliminate the need to tediously re-use the right-click menu to access those plugins. These windows can obviously be used for a variety of things, from plugin interaction to plugin reporting.

This persistent window behavior also makes it easier to iterate upon design ideas and to refine plugin settings if the first try was off the mark. This makes plugins that offer persistent windows more forgiving than the plugins that provide no UI to facilitate repeat interactions.

The one potential downside I’ve found when it comes to these persistent plugin windows is that you can only ever have one of them open at time. This is probably a good decision given Figma’s already scarce real estate – your screen would quickly become gobbled up by more than two or three plugin windows. But this means that you have to be better about planning your repeat plugin interactions in chunks so that you can minimize the amount of plugin switching you have to do. Sometimes that’s not a practical way to structure your workflow, though.

Plugins Can Be a Bridge to Surprising Functionality

I continue to be surprised by the new ways that Figma plugins manage to transform what was already a formidable design tool into an incredibly powerful one. From animation to 3D capabilities, Figma’s community has already pushed the limits of what I thought it was capable of doing, and those limits only continue to expand.

Going back to the point I made earlier, that’s why I think Figma’s plugin browsing experience could be improved. It’s unfortunate that people are potentially missing out on the incredible possibilities that Figma plugin developers have facilitated simply because it can be tedious to click through every single plugin to see its description page.

What I’m excited by is the breadth of plugin tools that are being created for Figma. The plugins that are being released don’t just address visual or design considerations – they also explore realms like project management, animation, image manipulation, workflow streamlining, task automation, and so much more!

More than any other design tool I’ve encountered, Figma is positioning itself to be a total solution for digital design – a true integrated design environment that combines designing, prototyping, and developer hand-off in one place. Plugins are a piece of that puzzle, and they’ve proven to be a game-changer, especially if you take into account the nearly 300 plugins that have been released since Figma’s initial 40 beta plugins launched 6 months ago.

Clearly plugins have been a hit – this is further reinforced when you consider the install numbers. Unsplash, the most popular Figma plugin, currently has 103,000+ installs. The second most popular plugin on Figma, Microsoft’s Content Reel, has 76,000+ installs. That’s a lot of user interaction in half a year.

Figma Plugins Are Worth a Try

Despite my various friction points while using Figma plugins, I’m really happy to have them in my life, and I think you will be too if you have yet to give them a try. Whether you think you’ll be a sparse plugin user or a power user, Figma plugins definitely have something for everyone – from the purely utilitarian to the delightfully frivolous.

The next additions to this writing series will feature my reviews for individual Figma plugins based on my personal experiences with them. I don’t plant to review every Figma plugin out there considering there are now hundreds of them. Instead, I’ll be focusing on the plugins that catch my eye. If there’s a plugin you think I should review, let me know. Happy designing!

Introduction

For the past year or so I’ve been using Notion as a place to centralize my personal organization systems both at work and for my personal projects. However it wasn’t until recently that I took a closer look at Notion’s versatility. This was motivated in large part by “How to Run Your Life Inside Notion,” Dan Shipper’s write-up on Notion expert Marie Poulin.

I was so intrigued by Poulin’s approach to Notion that I decided to begin experimenting with it too, especially because I wasn’t able to find live demos of her more complex set-ups. In the process, I thought it would be helpful to provide the fruits of those experiments as free templates for the world to use.

If you’d like to experiment with more complex personal organization systems, Marie Poulin’s methods are a great place to start. If you’re new to Notion, their documentation would be a good place to get started. Keep in mind that it’s free to use for most personal use cases, including this journal template.

The Template

Access the template here: https://www.notion.so/Mental-Health-Journal-21577d3b76174018b3c73964aef3f1da

Access template ReadMe here: https://www.notion.so/ReadMe-for-this-journal-template-5ebd7f422e854fa78c23b6ae28ba97bd

Although I’m working on multiple Notion templates right now, the first one I finished was a mental health journal for daily tracking of one’s mental and emotional states. It’s based on the DIY bullet journal trackers that have become so popular in the past few years – sometimes it’s easier to use your phone or computer as a journal than it is to use a physical book for a journal when you’re on the go.

My goal with this template is to encourage people to spend five to ten minutes each day evaluating their emotions so they can document them in a daily journal entry. Over time, behavioral and emotional patterns and trends that usually go unnoticed may become apparent by leveraging observation and qualitative metrics.

This mental health journal template includes four views:

1. A ‘Full Journal’ view that shows a compact summary of all of your journal entries in a data table format, with all entry fields visible.
2. An ‘Emotional Snapshot’ view that visualizes your journal entries as thumbnails using your uploaded daily photos. It summarizes your emotional state over time at a high level.
3. A ‘Habit Tracker’ view that shows a compact summary of the behaviors and activities you’re tracking in a data table format.
4. A ‘Gratitude Journal’ view that focuses solely on what you’re grateful for, as well as what you struggled with during each day.

When expanded, each journal entry also features a free-form section where you can write about your day, as well as a place for you to write a positive affirmation. The free-form section can also include many other types of content, including videos, embedded content, and so much more. Once you’ve duplicated this Notion template into your own workspace, feel free to modify, shorten, or extend it to suit your needs.

Resources & Credits

The (shortened) list of emotions included as options in the ‘✌️ My Day In 2 Words’ journal field comes from psychologist Jonice Webb’s website. It seemed like overkill to include every emotion in that list so I tried to pare it down.

The photos I used for journal snapshots are from Unsplash, specifically from photographers Eduard Militaru, Louis Hansel, Robert Bye, and ConvertKit. The cover image is by Unsplash photographer Drew Beamer.

The filled-in data included in this journal template is fictional and doesn’t represent any real person’s mental state (including mine). Happy journaling!

Although I’ve long been inclined towards big picture, long-term thinking, it wasn’t until I stumbled across The Long Now Foundation that I realized there are people out there who are so interested in long-term thinking at a societal scale that they’d not only make a cultural institution of it, but would go as far as dedicating their lives to it. It’s invigorating given the current societal backdrop of ever-shortening attention spans, and given my own tendency to flit between various trains of thought. To some extent, the long now is a conceptual model that I’ve begun to use to focus the way I categorize my thoughts and share them with the world.

The distinction I make between long now and short now is perhaps a generous elaboration on my part though, one that I haven’t really seen any other proponents of the long now talk about. To me, the short now seems like the most logical counterpart to the long now because both designations encompass temporal delineations that work within the model the long now provides. To perceive something as long in the first place, there must also exist a perception of not-long things that’s also relevant. I find it important to acknowledge how the short now fills in the gaps that help propel us towards the long now.

To that end, I’ve created Practicing Design as a place for my short now thoughts to live. It’s one aspect of my extended (perhaps counterintuitive) interpretation of the long now movement, and my personal endeavor to mold that movement into something broader – a mindset that fosters temporal awareness overall, especially as it relates to media interactions. As extremely important as long now thinking is, I think it’s also important to understand the role that the short now can play at individual and societal levels if we acknowledge it and wield it according to its strengths and weaknesses, as well as according to its power over people. Practicing Design is my way of doing that, in a roundabout way. Welcome!