Issue 130

Design Rewind 2024: Part I

Hello, dear readers! 👋

By tradition, in the last two issues of the outgoing year, we recall the best that was sent you during the year.

From several thousand links, I carefully select only the most valuable, applicable, important, influential, inspiring and transformative. It turns out to be a rich and valuable material.

In order not to overload you, the material is divided into 2 issues, approximately in half. Half today and half a week from now. Wishing you Merry Christmas and good holidays! And thank you for standing by❤️

Enjoy reading!

🗞 News and articles

CARE: Structure for Crafting AI Prompts

Kate Moran from NNGroup explained how to use the CARE framework to create effective AI tools when working on UX projects. These promptas are suitable for ChatGPT, Claude, Gemini and other models.

The name of the framework stands for Context, Ask, Rules, Examples (context, query, rules, examples). It assumes the inclusion of each of these components in the prompta in that order.

Kate figured out what each item might look like, showed examples of requests and responses in a dialogue with AI, and also told how the results could be further adjusted.

The framework:

• Context — describes the situation you are in. It may include information about your experience, place of work, project, and target audience.

• Ask — indicates a specific action that the AI should perform. At this point, specify exactly the role of the AI, the expected result, the number of options, and the response format.

• Rules are restrictions and guidelines that will help the AI understand what can and cannot be done. For example, you can prohibit the use of specific words or ask them to match the brand's tone.

• Examples — explain what you want to get in the end. You can show both good and bad examples.

  

The Sound of Software

A valuable basic article by the Not Boring team about sound design in applications. They talked about when to use sound, how to design it, how to make it informative, and much more. There are great visual examples inside the article.

They also gave a couple of tips on where to start and which instruments to use, as well as shared their own pack of sounds.

Some tips from the article:

• Add variations to the sounds so that they are similar, but slightly different. For example, when voicing buttons in a calculator. Then instead of just repeating, you'll create a texture.

• Feel free to combine and layer sounds on top of each other to get an original and interesting sound.

• Think about how your sounds will fit together. The soundscape should be perceived as a single whole, similar to the visual system of a brand.

• Sounds of similar actions should have common characteristics such as tone, instruments, and effects. For the opposite ones (for example, open and close), on the contrary, they should differ and indicate the direction of the action.

• To get original sounds, look for inspiration in the real world.

• Don't test sound design only on studio equipment. Listen to your sounds the way users will listen to them.

UI Density

Matthew Strom's publication on what interface density is, how it can manifest itself, and how to take it into account when designing. In the article, he rethinks the conclusions of Edward Tufty from the book "The Visual Representation of Large amounts of Information."

Main thoughts:

• Density can be visual, informational, or temporal.

• First of all, the density is assessed visually. The more information there is in the interface, the denser it is.

• The density of information indicates how much data is placed in the interface. If the elements take up a lot of space but contain little data, then perhaps they should be excluded.

• The density of information has a limit, and its perception depends on the audience. For example, an experienced trader can easily cope with a complex quotation table, but a second grader cannot

• Information density can be related to visual density. Usually, the higher the density of information, the denser its visualization will look

• When designing, it is necessary to take into account the principles of gestalt, which describe how people structure and perceive visual information

• The time density is determined by how quickly the interface responds and loads

• It is important to find a compromise between visual, information and time density, as well as to take into account the context of working with the interface.

Blur radius comparison

A useful practical article with a detailed comparison of how different types of blur look in browsers and editors at a value of 50%. The author not only compared the blur radius, but also the range in which the color is mixed.

For example, he found that the blur in Figma is most consistent with CSS box shadow. However, all 3 available blur options (background, layer, and drop shadow) have the same radius and blending range. In Photoshop and Illustrator, by contrast, the same drop-shadow effect is radically different.

The article, among other things, has a table with scaling coefficients of various gradients relative to CSS box-shadow. For example, for blur in Figma, the value will be 1.13, and for drop shadow in Illustrator, it will be 0.49.

New technologies

Neural networks and products based on them have been developing a lot over the past year, here are the most relevant and advanced tools from the USA and China, this year:

• Sora — one of the first and acclaimed models for generating videos based on text queries. The OpenAI product.

• Suno AI — full-fledged song generator for text queries.

• Firefly Video Model — a powerful AI video generator from Adobe, which is positioned as a competitor to Sora. It can accept both text and images as a reference.

• Kling — an impressive Chinese model for generating videos based on text prompts. Creates realistic enough videos with a minimum amount of input data. It surpasses Sora in terms of generation speed and can generate complex scenes, including movements of several characters and changing.

• Flux.1 — A new generative model for creating images with amazing quality. Developed by Black Forest Labs, which was founded by the engineers who created Stable Diffusion.

• Claude 3.5 Sonnet — a new model from the company Anthropic. It surpasses the previous flagship Claude 3 Opus model in quality, and is also ahead of the GPT-4o in almost all benchmarks.

• LLaMa-3 — a new generation of open—source language models from Meta. It significantly exceeds the performance of previous versions and performed better in reasoning and coding. Instagram Facebook chatbot Meta AI, developed on the basis of Meta Llama 3, is available for free on Facebook, Instagram, WhatsApp and Messenger.

• Grok 2 and Grok-2 mini — new models of Elon Musk's xAI company. Benchmarks show that these can be compared with Claude 3.5 and GPT-4 in terms of power.

• NotebookLM — an AI version of Google's notepad. It allows you to use AI to generate an audio podcast from your notes and documents.

• Cursor — AI-based code editor. It allows you to write code using simple queries and perform a smart search of the code base. Knows how to predict edits and shows the result in advance.

Trend — AI agents

Neural networks are developing rapidly, but many users still do not understand how to put them into practice in everyday scenarios. It seems to us that this situation is starting to change with the development of AI agents - autonomous assistants who can independently perform tasks in the background and make decisions, and then inform the user about the results. That is, such an AI does not just respond to a specific request, but performs long-term work, adapting to the situation.

Here are some examples that I found:

• Noon Ai — AI recruiter who independently searches the Internet for specialists according to specified parameters, establishes communication with them and sends suggestions.

• SeeAct — AI agent that can be assigned any task related to the web. For example, compare two products, find a flight ticket and a hotel for the right dates, add such and such an item to the basket, etc.

• CrewAI — Framework for autonomous AI agents based on GPT-4 and other models. For example, you can use it to create an analyst for buying stocks or a travel planner.

• Fine — Platform for launching AI developers who are online 24 hours a day. It autonomously monitors the backlog of tasks and perform them, as well as conduct tests, analyze code, and do much more.

• Devin — AI of Cognition Labs startup, which is supposed to replace the developer. It can independently study unfamiliar tools and documentation, look for errors in the code, and most importantly, develop applications without outside help.
  
  It is likely that such autonomous agents will make AI a truly massive and ubiquitous technology.

Trend — AI buddy

The CharacterAI service is rapidly gaining popularity among teenagers from the United States. There you can communicate with AI counterparts of fictional characters or real people, as well as create your own ideal companion.

At the time of publication, the service has 250 million monthly visits, 20 million regular users and 2 billion requests per day. In terms of popularity, CharacterAI is one of the first after ChatGPT. If it becomes unavailable for a while, then a wave of panic threads immediately appears on the network.

The company recently raised $150 million in investments and blocked NSFW content. This caused a wave of discontent, but still did not significantly affect attendance.